### Install Koobiq Dependencies

Source: https://github.com/koobiq/angular-components/blob/main/docs/guides/installation.en.md

Commands to install the required Koobiq packages. You can use the Angular CLI for automated setup or install the packages manually via npm.

```bash
ng add @koobiq/components
```

```bash
npm install @koobiq/cdk @koobiq/components @koobiq/icons @koobiq/design-tokens @koobiq/angular-luxon-adapter @koobiq/date-adapter @koobiq/date-formatter luxon
```

--------------------------------

### Setup Testing Environment

Source: https://github.com/koobiq/angular-components/blob/main/docs/guides/06-testing.md

Commands to install project dependencies and prepare the environment for running tests. This is a prerequisite for both unit and E2E test suites.

```bash
yarn install
yarn run e2e:setup
```

--------------------------------

### Implement Koobiq Component

Source: https://github.com/koobiq/angular-components/blob/main/docs/guides/installation.en.md

Example of importing Koobiq modules into an Angular component and using them in the template. This demonstrates basic button and icon usage.

```typescript
import { KbqButtonModule } from '@koobiq/components/button';
import { KbqIconModule } from '@koobiq/components/icon';

@Component({
    imports: [KbqButtonModule, KbqIconModule],
    template: `
        <button kbq-button>
            <i kbq-icon="kbq-plus_16"></i>
            Button
        </button>
    `
})
export class AppComponent {}
```

--------------------------------

### Install and Run E2E Tests with Yarn

Source: https://github.com/koobiq/angular-components/blob/main/packages/e2e/README.md

This snippet outlines the command-line interface (CLI) commands for managing E2E testing. It covers Node.js version management using nvm, installing project dependencies with Yarn, starting the development server, setting up Playwright, and executing E2E tests.

```bash
nvm use
yarn install
yarn run dev:e2e
yarn run e2e:setup
yarn run e2e:components
playwright test packages/components/button/e2e.playwright-spec.ts
```

--------------------------------

### Run SSR Development Server (Bash)

Source: https://github.com/koobiq/angular-components/blob/main/docs/guides/09-ssr-dev.md

Execute commands to build and run the SSR development server. Two options are provided: `yarn run dev:ssr-start` for a standard SSR start and `yarn run dev:ssr` for SSR with live server and client hydration.

```bash
yarn run dev:ssr-start
```

```bash
yarn run dev:ssr
```

--------------------------------

### Install highlight.js Dependency for Code Block

Source: https://github.com/koobiq/angular-components/blob/main/packages/components/code-block/code-block.en.md

To enable syntax highlighting and other features of the kbq-code-block component, you need to install the highlight.js library. This command installs version 11 of highlight.js.

```bash
npm install highlight.js@^11
```

--------------------------------

### KbqMarkdown: Code Block Example

Source: https://github.com/koobiq/angular-components/blob/main/packages/components/markdown/markdown.en.md

Demonstrates how to render multi-line code blocks using Markdown's fenced code syntax. This example is ideal for displaying larger code examples.

```html
<example-component name="markdown-code-block"></example-component>
```

--------------------------------

### KbqMarkdown: Link Example

Source: https://github.com/koobiq/angular-components/blob/main/packages/components/markdown/markdown.en.md

Shows how to render hyperlinks using Markdown syntax. This example covers creating clickable links to external or internal resources.

```html
<example-component name="markdown-link"></example-component>
```

--------------------------------

### Configure Global Styles

Source: https://github.com/koobiq/angular-components/blob/main/docs/guides/installation.en.md

Register the necessary CSS files for icons, design tokens, and component themes within the styles array of your angular.json configuration file.

```json
"styles": [
  "node_modules/@koobiq/icons/fonts/kbq-icons.css",
  "node_modules/@koobiq/design-tokens/web/css-tokens.css",
  "node_modules/@koobiq/design-tokens/web/css-tokens-light.css",
  "node_modules/@koobiq/components/prebuilt-themes/theme.css",
  "src/styles.css"
]
```

--------------------------------

### Development Commands for Angular Components Project

Source: https://github.com/koobiq/angular-components/blob/main/AGENTS.md

Commands to start development servers for specific components or all components, as well as the documentation development server.

```bash
yarn run dev:<component>           # Start dev server for specific component (e.g., yarn run dev:button)
yarn run dev:all                   # Start dev server with all components
yarn run docs:start:dev            # Start docs dev server
```

--------------------------------

### Configure Google Fonts CDN in HTML

Source: https://github.com/koobiq/angular-components/blob/main/packages/components/core/styles/typography/typography.en.md

Adds the necessary link tags to the document head to load fonts from the Google Fonts CDN. This is an alternative to local installation for faster setup.

```html
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<!-- Inter -->
<link
    href="https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&display=swap"
    rel="stylesheet"
/>
<!-- JetBrains Mono -->
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet" />
```

--------------------------------

### Install Koobiq CLI

Source: https://github.com/koobiq/angular-components/blob/main/packages/cli/README.md

Installs the Koobiq CLI as a development dependency in your project using npm.

```bash
npm i --save-dev @koobiq/cli
```

--------------------------------

### Configure Overlay Container

Source: https://github.com/koobiq/angular-components/blob/main/packages/components/actions-panel/actions-panel.en.md

Provides examples for setting a custom overlay container for a specific panel instance or globally via dependency injection.

```typescript
// Specific container configuration
import { ElementRef, inject } from '@angular/core';
import { KbqActionsPanel } from '@koobiq/components/actions-panel';

export class YourComponent {
    private readonly actionsPanel = inject(KbqActionsPanel, { self: true });
    private readonly customContainer = inject(ElementRef);

    openActionsPanel() {
        const actionsPanelRef = this.actionsPanel.open(YourActionsPanelComponent, {
            overlayContainer: this.customContainer
        });
    }
}

// Global container configuration
import { Injectable } from '@angular/core';
import { OverlayContainer } from '@angular/cdk/overlay';

@Injectable()
export class CustomOverlayContainer extends OverlayContainer {}

@NgModule({
    providers: [{ provide: OverlayContainer, useClass: CustomOverlayContainer }]
})
```

--------------------------------

### KbqTooltip Directive Example

Source: https://context7.com/koobiq/angular-components/llms.txt

Illustrates the use of the KbqTooltip directive for displaying tooltips on hover or focus. Examples cover basic tooltips, placement, delay, rich content using ng-template, arrow visibility, and disabling the tooltip. Requires KbqToolTipModule and KbqButtonModule.

```typescript
import { KbqToolTipModule } from '@koobiq/components/tooltip';

@Component({
  selector: 'app-tooltip-example',
  standalone: true,
  imports: [KbqToolTipModule, KbqButtonModule],
  template: `
    <!-- Basic tooltip -->
    <button kbq-button [kbqTooltip]="'Click to save your changes'">
      Save
    </button>

    <!-- Tooltip with placement -->
    <button kbq-button
            [kbqTooltip]="'This appears on the left'"
            [kbqPlacement]="'left'">
      Left Tooltip
    </button>

    <!-- Tooltip with delay -->
    <span [kbqTooltip]="'Delayed tooltip'"
          [kbqEnterDelay]="500"
          [kbqLeaveDelay]="200">
      Hover me
    </span>

    <!-- Tooltip with template content -->
    <button kbq-button [kbqTooltip]="tooltipTemplate">
      Rich Tooltip
    </button>

    <ng-template #tooltipTemplate>
      <strong>Important!</strong>
      <p>This action cannot be undone.</p>
    </ng-template>

    <!-- Tooltip with arrow -->
    <span [kbqTooltip]="'With arrow'" [kbqTooltipArrow]="true">
      Pointed tooltip
    </span>

    <!-- Disabled tooltip -->
    <span [kbqTooltip]="'Hidden'" [kbqTooltipDisabled]="true">
      No tooltip here
    </span>
  `
})
export class TooltipExampleComponent {}
```

--------------------------------

### Build and Pack Package for Local Testing

Source: https://github.com/koobiq/angular-components/blob/main/packages/cli/README.md

Steps to build the CLI project and create a tarball artifact for local installation and testing.

```bash
npm run build:cli
cd dist/cli
npm pack --pack-destination ~
```

--------------------------------

### KbqMarkdown: Image Example

Source: https://github.com/koobiq/angular-components/blob/main/packages/components/markdown/markdown.en.md

Demonstrates how to embed images using Markdown syntax. This example shows how to include image files with alt text and optional titles.

```html
<example-component name="markdown-image"></example-component>
```

--------------------------------

### Install Marked Dependency for KbqMarkdown

Source: https://github.com/koobiq/angular-components/blob/main/packages/components/markdown/markdown.en.md

This command installs the 'marked' JavaScript library, which is a required dependency for the KbqMarkdown component to function correctly. It enables the conversion of Markdown syntax to HTML.

```bash
npm install marked
```

--------------------------------

### KbqMarkdown: Table Example

Source: https://github.com/koobiq/angular-components/blob/main/packages/components/markdown/markdown.en.md

Illustrates the rendering of tables using Markdown syntax. This example covers creating structured data tables with headers and rows.

```html
<example-component name="markdown-table"></example-component>
```

--------------------------------

### KbqEmptyState Migration Example

Source: https://github.com/koobiq/angular-components/blob/main/packages/schematics/src/migrations/empty-state-size-attr/README.md

A comparison of the component template before and after the migration. The 'big' attribute is replaced by the 'size' attribute.

```typescript
import { Component } from '@angular/core';

@Component({
    template: `
        <kbq-empty-state [big]="true">...</kbq-empty-state>
    `
})
export class MyComp {}
```

```typescript
import { Component } from '@angular/core';

@Component({
    template: `
        <kbq-empty-state size="big">...</kbq-empty-state>
    `
})
export class MyComp {}
```

--------------------------------

### KbqMarkdown: Lists Example

Source: https://github.com/koobiq/angular-components/blob/main/packages/components/markdown/markdown.en.md

Illustrates the rendering of both ordered and unordered lists in Markdown. This example covers the syntax for creating bulleted and numbered lists.

```html
<example-component name="markdown-list"></example-component>
```

--------------------------------

### KbqMarkdown: Headers Example

Source: https://github.com/koobiq/angular-components/blob/main/packages/components/markdown/markdown.en.md

Demonstrates how to render Markdown headers (H1-H6) using the KbqMarkdown component. This example showcases the basic structure for creating headings of different levels.

```html
<example-component name="markdown-headers"></example-component>
```

--------------------------------

### KbqMarkdown: Inline Code Example

Source: https://github.com/koobiq/angular-components/blob/main/packages/components/markdown/markdown.en.md

Shows how to format inline code snippets using Markdown's backtick syntax. This example is useful for embedding short pieces of code within text.

```html
<example-component name="markdown-code"></example-component>
```

--------------------------------

### Implement Icons in Angular Templates

Source: https://github.com/koobiq/angular-components/blob/main/packages/components/icon/icon.en.md

Demonstrates two methods for rendering icons: using the kbq-icon attribute with color theming, or using standard CSS classes for simpler implementation.

```html
<!-- Method 1: Attribute with color -->
<i kbq-icon="kbq-gear_16" [color]="'contrast'"></i>

<!-- Method 2: Simple class -->
<i class="kbq kbq-gear_16"></i>
```

--------------------------------

### Modal Component Example

Source: https://github.com/koobiq/angular-components/blob/main/packages/components-dev/all/template.html

Shows a basic example of the Modal component, specifically a confirmation modal.

```html
Confirm
```

--------------------------------

### Install AG Grid and Theme Packages

Source: https://github.com/koobiq/angular-components/blob/main/docs/data-grid/ag-grid/ag-grid.en.md

Installs the necessary AG Grid community and Angular packages along with the custom Koobiq theme. Ensure the versions match for compatibility.

```bash
npm install @koobiq/ag-grid-angular-theme@^34 ag-grid-community@^34 ag-grid-angular@^34
```

--------------------------------

### Install OverlayScrollbars dependency

Source: https://github.com/koobiq/angular-components/blob/main/packages/components/scrollbar/scrollbar.en.md

The kbq-scrollbar component requires the overlayscrollbars library version 2.7.3 to function correctly. Install it via npm before implementing the component.

```bash
npm install overlayscrollbars@2.7.3
```

--------------------------------

### KbqDropdown Component Example

Source: https://context7.com/koobiq/angular-components/llms.txt

Demonstrates the usage of the KbqDropdown component for creating context menus and dropdowns. It includes examples of basic dropdowns, nested submenus, and custom item actions. Requires KbqDropdownModule and KbqButtonModule.

```typescript
import { KbqDropdownModule } from '@koobiq/components/dropdown';

@Component({
  selector: 'app-dropdown-example',
  standalone: true,
  imports: [KbqDropdownModule, KbqButtonModule],
  template: `
    <!-- Basic dropdown menu -->
    <button kbq-button [kbqDropdownTriggerFor]="basicMenu">
      Actions
      <kbq-icon>kbq-chevron-down_16</kbq-icon>
    </button>

    <kbq-dropdown #basicMenu>
      <button kbq-dropdown-item (click)="onEdit()">
        <kbq-icon>kbq-edit_16</kbq-icon>
        Edit
      </button>
      <button kbq-dropdown-item (click)="onDuplicate()">
        <kbq-icon>kbq-copy_16</kbq-icon>
        Duplicate
      </button>
      <div kbq-divider></div>
      <button kbq-dropdown-item [color]="'error'" (click)="onDelete()">
        <kbq-icon>kbq-trash_16</kbq-icon>
        Delete
      </button>
    </kbq-dropdown>

    <!-- Dropdown with nested submenu -->
    <button kbq-button [kbqDropdownTriggerFor]="exportMenu">Export</button>

    <kbq-dropdown #exportMenu>
      <button kbq-dropdown-item [kbqDropdownTriggerFor]="formatSubmenu">
        Export as...
      </button>
      <button kbq-dropdown-item>Quick Export</button>
    </kbq-dropdown>

    <kbq-dropdown #formatSubmenu>
      <button kbq-dropdown-item (click)="exportAs('pdf')">PDF</button>
      <button kbq-dropdown-item (click)="exportAs('csv')">CSV</button>
      <button kbq-dropdown-item (click)="exportAs('json')">JSON</button>
    </kbq-dropdown>
  `
})
export class DropdownExampleComponent {
  onEdit() { console.log('Edit'); }
  onDuplicate() { console.log('Duplicate'); }
  onDelete() { console.log('Delete'); }
  exportAs(format: string) { console.log('Export as:', format); }
}
```

--------------------------------

### KbqMarkdown: Paragraph Example

Source: https://github.com/koobiq/angular-components/blob/main/packages/components/markdown/markdown.en.md

Illustrates the rendering of standard text paragraphs within the KbqMarkdown component. This example shows how plain text is interpreted as a paragraph.

```html
<example-component name="markdown-paragraph"></example-component>
```

--------------------------------

### KbqMarkdown: Blockquote Example

Source: https://github.com/koobiq/angular-components/blob/main/packages/components/markdown/markdown.en.md

Demonstrates the use of blockquotes in Markdown for quoting text blocks. This example shows how to format quoted content using the KbqMarkdown component.

```html
<example-component name="markdown-quote"></example-component>
```

--------------------------------

### Toggles Component Examples

Source: https://github.com/koobiq/angular-components/blob/main/packages/components-dev/all/template.html

Illustrates the Toggles component in both small and big sizes, with examples of text content ('Quack like a duck') and repeated instances to show layout.

```html
### Small Toggles

Quack like a duck

Quack like a duck

### Big Toggles

Quack like a duck

Quack like a duck

### Small Toggles

Quack like a duck

Quack like a duck

### Big Toggles

Quack like a duck

Quack like a duck
```

--------------------------------

### Import Icon Styles and Module

Source: https://github.com/koobiq/angular-components/blob/main/packages/components/icon/icon.en.md

Configures the necessary styles and Angular module imports. Supports various stylesheet formats including CSS, SCSS, and LESS.

```scss
@use '@koobiq/icons/fonts/kbq-icons.css';
```

```typescript
import { KbqIconModule } from '@koobiq/components';
```

--------------------------------

### Icon Migration Transformation Example

Source: https://github.com/koobiq/angular-components/blob/main/packages/schematics/src/migrations/icons-replacement/README.md

Demonstrates the before and after state of an Angular component after the icon replacement schematic has been applied, showing updates to template attributes and CSS classes.

```typescript
// Before
import { Component } from '@angular/core';

@Component({
    template: `
        <i kbq-icon="kbq-bolt-circle_16">...</i>
    `,
    styles: `
        .custom-icon {
            <!-- cspell:ignore xmark -->
            @extend .kbq-xmark-circle_16;
        }
    `
})
export class MyComp {
    iconName = 'kbq-bolt-circle_16';
}

// After
import { Component } from '@angular/core';

@Component({
    template: `
        <i kbq-icon="kbq-circle-bolt_16">...</i>
    `,
    styles: `
        .custom-icon {
            <!-- cspell:ignore xmark -->
            @extend .kbq-circle-xmark_16;
        }
    `
})
export class MyComp {
    iconName = 'kbq-circle-bolt_16';
}
```

--------------------------------

### Radio Component Examples (Angular)

Source: https://github.com/koobiq/angular-components/blob/main/packages/components-dev/all/template.html

Demonstrates the Radio component using Angular's structural directives (`@for`) to iterate over data. It shows examples with simple string lists and lists of objects, including disabled options.

```html
@for (season of fruits; track season) { {{ season }} }

Disabled buttons

@for (data of selectionList; track data) { {{ data.name }} }
```

--------------------------------

### Testing Commands for Angular Components Project (Unit & E2E)

Source: https://github.com/koobiq/angular-components/blob/main/AGENTS.md

Commands for running unit tests using Jest and Karma, and End-to-End (E2E) tests using Playwright. Includes setup and pattern matching for specific tests.

```bash
# Unit tests (Jest + Karma)
yarn run unit:components           # Run component unit tests
yarn run unit:cdk                  # Run CDK unit tests
yarn run unit:schematics           # Run schematics tests
npx jest <pattern>                 # Run specific unit (jest) tests (e.g., npx jest packages/components/button/button.component.spec.ts)

# E2E tests (Playwright)
yarn run e2e:setup                 # Install Playwright browsers (run once)
yarn run e2e:components            # Run all E2E tests
npx playwright test <pattern>      # Run specific E2E tests (e.g., npx playwright test packages/components/button/e2e.playwright-spec.ts
```

--------------------------------

### Icon Component Examples

Source: https://github.com/koobiq/angular-components/blob/main/packages/components-dev/all/template.html

Demonstrates the Icon component with different color variations (default, primary, secondary, error, light) and states (default, disabled).

```html
default

primary

secondary

error
  
  
  
disabled

default

primary

secondary

error
  
  
  
light

default

primary

secondary

error
```

--------------------------------

### Build and Run Schematic Locally

Source: https://github.com/koobiq/angular-components/blob/main/packages/schematics/src/migrations/empty-state-size-attr/README.md

Instructions for building the schematics package from source and running the migration command against a local project path.

```shell
yarn run build:schematics
ng g ./dist/components/schematics/collection.json:empty-state-size-attr --project koobiq-docs
```

--------------------------------

### Configure Global Filesize Settings via DI

Source: https://github.com/koobiq/angular-components/blob/main/packages/components/core/formatters/filesize/filesize-formatter.en.md

Explains how to set default formatting parameters like precision and unit systems globally across an application using the kbqFilesizeFormatterConfigurationProvider.

```typescript
import { kbqFilesizeFormatterConfigurationProvider } from '@koobiq/components/core';

@NgModule({
    providers: [
        kbqFilesizeFormatterConfigurationProvider({
            defaultPrecision: 3,
            defaultUnitSystem: 'SI'
        })
    ]
})
```

--------------------------------

### Apply Theme Class

Source: https://github.com/koobiq/angular-components/blob/main/docs/guides/installation.en.md

Apply the required theme class to the body element in your index.html to ensure components render with the correct visual styles.

```html
<body class="kbq-light">
    <app-root></app-root>
</body>
```

--------------------------------

### Upgrade Koobiq dependencies to version 18.5.3

Source: https://github.com/koobiq/angular-components/blob/main/docs/guides/migration.en.md

Installs the required core packages, design tokens, and adapters for the 18.5.3 baseline upgrade. This step ensures compatibility with updated theming and icon packages.

```bash
npm install @koobiq/cdk@18.5.3
npm install @koobiq/components@18.5.3
npm install @koobiq/icons@^9.0.0
npm install @koobiq/design-tokens@~3.7.3
npm install @koobiq/angular-luxon-adapter@18.5.3
npm install @koobiq/date-adapter^3.1.3
npm install @koobiq/date-formatter^3.1.3
npm install luxon
npm install @messageformat/core
```

--------------------------------

### Install Koobiq Icons Package

Source: https://github.com/koobiq/angular-components/blob/main/packages/components/icon/icon.en.md

Installs the latest version of the Koobiq icons package using the Node Package Manager. This is a prerequisite for using icon components in the project.

```bash
npm install @koobiq/icons --save
```

--------------------------------

### Install Fontsource packages via NPM

Source: https://github.com/koobiq/angular-components/blob/main/packages/components/core/styles/typography/typography.en.md

Installs the required Inter and JetBrains Mono font packages as project dependencies. This is the recommended approach for local font management.

```bash
npm install @fontsource/inter @fontsource/jetbrains-mono
```

--------------------------------

### Configure Filesize Formatting with Pipe Arguments

Source: https://github.com/koobiq/angular-components/blob/main/packages/components/core/formatters/filesize/filesize-formatter.en.md

Shows how to customize the output of the filesize formatter directly in the template by providing precision, unit system, and locale arguments.

```typescript
@Component({
    imports: [KbqDataSizePipe],
    template: `
        <div>{{ 1536 | kbqDataSize : 1 : 'IEC' : 'en-US' }}</div><!-- 1.5 KB -->
    `
})
```

--------------------------------

### Timepicker Component Example

Source: https://github.com/koobiq/angular-components/blob/main/packages/components-dev/all/template.html

Shows an example of the Timepicker component, specifically demonstrating how to toggle its disabled state.

```html
Toggle disabled state
  

```

--------------------------------

### Applying Theme Colors

Source: https://github.com/koobiq/angular-components/blob/main/packages/components/progress-spinner/progress-spinner.en.md

Customizes the visual appearance of the spinner by assigning primary, secondary, or error theme palettes.

```html
<kbq-progress-spinner [color]="themePalette.Primary"></kbq-progress-spinner>
<kbq-progress-spinner [color]="themePalette.Secondary"></kbq-progress-spinner>
<kbq-progress-spinner [color]="themePalette.Error"></kbq-progress-spinner>
```

--------------------------------

### Select Component Provider for Panel Minimum Width

Source: https://github.com/koobiq/angular-components/blob/main/packages/components/select/select.en.md

Demonstrates configuring a global minimum panel width for all selects within a module using `kbqSelectOptionsProvider`.

```typescript
import { kbqSelectOptionsProvider } from '@koobiq/components/select';

@NgModule({
    providers: [
        kbqSelectOptionsProvider({ panelMinWidth: 350 })
    ]
})
```

--------------------------------

### Select Component Provider for Panel Width

Source: https://github.com/koobiq/angular-components/blob/main/packages/components/select/select.en.md

Demonstrates configuring a global panel width for all selects within a module using `kbqSelectOptionsProvider`.

```typescript
import { kbqSelectOptionsProvider } from '@koobiq/components/select';

@NgModule({
    providers: [
        kbqSelectOptionsProvider({ panelWidth: 'auto' })
    ]
})
```

--------------------------------

### Integrate KbqDataSizePipe in Angular Components

Source: https://github.com/koobiq/angular-components/blob/main/packages/components/core/formatters/filesize/filesize-formatter.en.md

Demonstrates how to import and use the KbqDataSizePipe within an Angular component template to format raw numbers into readable file sizes.

```typescript
import { KbqDataSizePipe } from '@koobiq/components/core';

@Component({
    imports: [KbqDataSizePipe],
    template: `
        <div>{{ 1024 | kbqDataSize }}</div>
    `
})
```

--------------------------------

### Build and Run Schematics Locally

Source: https://github.com/koobiq/angular-components/blob/main/packages/schematics/src/migrations/icons-replacement/README.md

Instructions for building the schematics package and executing them directly from the distribution folder for testing purposes.

```shell
yarn run build:schematics
ng g ./dist/components/schematics/collection.json:icons-replacement --project koobiq-docs
```

--------------------------------

### Time Range Overview Example

Source: https://github.com/koobiq/angular-components/blob/main/packages/components/time-range/time-range.en.md

Demonstrates the basic usage of the time range selection menu component. This example shows the default appearance and functionality.

```typescript
// Assuming 'TimeRangeMenuComponent' is imported and available
// Example usage within a parent component's template:
// <app-time-range-menu (dateRangeChange)="onDateRangeChange($event)"></app-time-range-menu>
```

--------------------------------

### Configure KbqContentPanel dimensions

Source: https://github.com/koobiq/angular-components/blob/main/packages/components/content-panel/content-panel.en.md

Sets the width, minimum width, and maximum width of the content panel container. These attributes control the responsive behavior of the panel within the layout.

```html
<kbq-content-panel-container width="400" minWidth="300" maxWidth="500">
    <kbq-content-panel>...</kbq-content-panel>
</kbq-content-panel-container>
```

--------------------------------

### Run Migration Schematic via CLI

Source: https://github.com/koobiq/angular-components/blob/main/packages/schematics/src/migrations/empty-state-size-attr/README.md

Commands to execute the migration schematic using Angular CLI or Nx. These commands target the specific project where the KbqEmptyState components need to be updated.

```shell
ng g @koobiq/components:empty-state-size-attr --project <your project>
```

```shell
nx g @koobiq/components:empty-state-size-attr --project <your project>
```

--------------------------------

### KbqMarkdown: Horizontal Rule Example

Source: https://github.com/koobiq/angular-components/blob/main/packages/components/markdown/markdown.en.md

Illustrates the creation of a horizontal rule (a thematic break) using Markdown syntax. This example shows how to visually separate content sections.

```html
<example-component name="markdown-divider"></example-component>
```

--------------------------------

### Select Component Provider for Search Threshold

Source: https://github.com/koobiq/angular-components/blob/main/packages/components/select/select.en.md

Demonstrates configuring a global search threshold for all selects within a module using `kbqSelectOptionsProvider`.

```typescript
import { kbqSelectOptionsProvider } from '@koobiq/components/select';

@NgModule({
    providers: [
        kbqSelectOptionsProvider({ minOptionsThreshold: 'auto' })
    ]
})
```

--------------------------------

### KbqActionsPanelConfig

Source: https://github.com/koobiq/angular-components/blob/main/tools/public_api_guard/components/actions-panel.api.md

Configuration options for opening an actions panel.

```APIDOC
## KbqActionsPanelConfig

### Description
Configuration object for customizing the behavior and appearance of the `KbqActionsPanel`.

### Properties
- **closeOnNavigation** (`boolean`): Optional - If true, the panel will close when the route changes.
- **containerClass** (`string | string[]`): Optional - CSS classes to apply to the panel container.
- **data** (`D | null`): Optional - Data to be passed to the component or template rendered in the panel. `D` is the type of the data.
- **direction** (`Direction`): Optional - The directionality (left-to-right or right-to-left) of the panel content.
- **disableClose** (`boolean`): Optional - If true, the panel cannot be closed by clicking outside or pressing the Escape key.
- **injector** (`Injector`): Optional - An `Injector` to be used for providing dependencies to the component rendered in the panel.
- **maxWidth** (`number | string`): Optional - The maximum width of the panel.
- **minWidth** (`number | string`): Optional - The minimum width of the panel.
- **overlayContainer** (`ElementRef<HTMLElement>`): Optional - A reference to an element that will serve as the overlay container.
- **overlayPanelClass** (`string | string[]`): Optional - CSS classes to apply to the overlay panel itself.
- **scrollStrategy** (`(overlay: Overlay) => ScrollStrategy`): Optional - A function that returns a scroll strategy for the overlay.
- **width** (`string`): Optional - The explicit width of the panel.

### Example Usage (within `open` method)
```typescript
const config: KbqActionsPanelConfig<MyDataType> = {
  width: '400px',
  disableClose: false,
  data: { userId: 123 },
  overlayPanelClass: 'my-custom-panel-class'
};

this.actionsPanel.open(MyComponent, config);
```
```

--------------------------------

### Tree Component Example (Angular)

Source: https://github.com/koobiq/angular-components/blob/main/packages/components-dev/all/template.html

Shows a basic example of the Tree component, utilizing Angular's interpolation to display node values retrieved via a tree control object.

```html
{{ treeControl.getViewValue(node) }} {{ treeControl.getViewValue(node) }}
```

--------------------------------

### Basic Usage of KbqProgressSpinner

Source: https://github.com/koobiq/angular-components/blob/main/packages/components/progress-spinner/progress-spinner.en.md

Displays a simple sector progress spinner using the default Koobiq theme settings.

```html
<kbq-progress-spinner></kbq-progress-spinner>
```

--------------------------------

### Badge Component Examples

Source: https://github.com/koobiq/angular-components/blob/main/packages/components-dev/all/template.html

Illustrates the Badge component, used for displaying status or new information. The examples show the badge text 'Новый в работе' repeated multiple times.

```html
Новый в работе

Новый в работе

Новый в работе

Новый в работе

Новый в работе

Новый в работе

Новый в работе
```

--------------------------------

### Reactive Form with formControl in Angular

Source: https://github.com/koobiq/angular-components/blob/main/packages/components-dev/validation/template.html

This example demonstrates using `formControl` directly for form elements in a reactive Angular form. It includes handling typeahead suggestions and displaying validation errors for form controls.

```html
<form>
  <div>
    <label>Reactive Form Control Typeahead:</label>
    <input type="text" [formControl]="reactiveFormControlTypeaheadItems">
    @if (formControlTags.errors) {
      @if (formControlTags.errors?.required) {
        <span>error</span>
      }
    }
    @for (tag of reactiveFormControlTypeaheadItems; track tag) {
      <span>{{ tag }}</span>
    }
  </div>
  <div>
    <label>Reactive Form Control Input:</label>
    <input type="text" [formControl]="formControlTagInputFormControl">
    @if (formControlTagInputFormControl.errors) {
      @if (formControlTagInputFormControl.errors?.required) {
        <span>required error</span>
      }
    }
  </div>
  <button type="submit">Submit</button>
</form>
```

--------------------------------

### Form Group with Custom Validator in Angular

Source: https://github.com/koobiq/angular-components/blob/main/packages/components-dev/validation/template.html

This example demonstrates creating a form group with a custom validator in Angular. It specifically shows how to apply a 'required' validator to a login control and display the associated error message.

```html
<form [formGroup]="formWithCustomValidator">
  <div>
    <label>Login:</label>
    <input type="text" formControlName="login">
    @if (formWithCustomValidator.controls.login.errors) {
      @if (formWithCustomValidator.controls.login.errors?.required) {
        <span>error</span>
      }
    }
  </div>
  <button type="submit">Submit</button>
</form>
```

--------------------------------

### Commit Message Structure Example

Source: https://github.com/koobiq/angular-components/blob/main/CONTRIBUTING.md

This example demonstrates the standard format for commit messages in the Koobiq project. It includes the commit type, scope, and a concise summary, adhering to present tense and no trailing punctuation for the summary.

```git
feat(button): added new type of button
```

```git
fix(button): fixes an issue of theming.

Closes #33
```

```git
refactor(button): removed deprecated method.

BREAKING CHANGE: The method has been removed.
Describe reasons.
```

--------------------------------

### KbqFullScreenDropzoneService Implementation

Source: https://github.com/koobiq/angular-components/blob/main/tools/public_api_guard/components/file-upload.api.md

Implements the KbqFullScreenDropzoneService for handling full-screen drop zone functionality. It extends KbqDrop and implements OnDestroy for lifecycle management. Key methods include close, createOverlay, init, ngOnDestroy, onDrop, open, and stop.

```typescript
constructor();
    close(): void;
    protected createOverlay(): OverlayRef;
    init(config?: KbqDropzoneData): void;
    // (undocumented)
    ngOnDestroy(): void;
    onDrop(event: DragEvent): void;
    open(config?: KbqDropzoneData): void;
    stop(): void;
    // (undocumented)
    static ɵfac: i0.ɵɵFactoryDeclaration<KbqFullScreenDropzoneService, never>;
    // (undocumented)
    static ɵprov: i0.ɵɵInjectableDeclaration<KbqFullScreenDropzoneService>;
}
```

--------------------------------

### Open KbqActionsPanel with Data

Source: https://github.com/koobiq/angular-components/blob/main/packages/components/actions-panel/actions-panel.en.md

Demonstrates how to open an actions panel and pass custom data using the KbqActionsPanel service.

```typescript
import { inject } from '@angular/core';
import { KbqActionsPanel } from '@koobiq/components/actions-panel';

export class YourComponent {
    private readonly actionsPanel = inject(KbqActionsPanel, { self: true });

    openActionsPanel() {
        const actionsPanelRef = this.actionsPanel.open(YourActionsPanelComponent, {
            data: { name: 'koobiq' }
        });
    }
}
```

--------------------------------

### Inset Divider

Source: https://github.com/koobiq/angular-components/blob/main/packages/components/divider/divider.en.md

An inset divider that provides padding from the start of the container. This is useful for aligning separators with text content in lists.

```html
<kbq-divider [inset]="true"></kbq-divider>
```

--------------------------------

### Select Component Overview

Source: https://github.com/koobiq/angular-components/blob/main/packages/components/select/select.en.md

Demonstrates the basic usage and overview of the Angular Select component, allowing users to select one or more values from a predefined list.

```html
<kbq-select>
  <kbq-option *ngFor="let item of items" [value]="item.value">
    {{ item.label }}
  </kbq-option>
</kbq-select>
```

--------------------------------

### Define KbqLoaderOverlay Component and Directives

Source: https://github.com/koobiq/angular-components/blob/main/tools/public_api_guard/components/loader-overlay.api.md

The KbqLoaderOverlay class manages the display of loading states, supporting custom indicators, text, and captions. It implements OnInit and OnDestroy interfaces to handle component lifecycle and provides inputs for size, transparency, and content configuration.

```typescript
export class KbqLoaderOverlay implements OnInit, OnDestroy {
    constructor(elementRef: ElementRef<HTMLElement>, renderer: Renderer2);
    caption: string;
    size: KbqDefaultSizes;
    text: string;
    transparent: boolean;
    ngOnDestroy(): void;
    ngOnInit(): void;
}
```

--------------------------------

### Build Commands for Angular Components Project

Source: https://github.com/koobiq/angular-components/blob/main/AGENTS.md

These commands are used to build various parts of the angular-components project, including the main components library, CDK utilities, experimental components, date adapters, CLI, schematics, and documentation.

```bash
yarn run build:components               # Build main components library
yarn run build:cdk                      # Build CDK utilities
yarn run build:components-experimental  # Build experimental components
yarn run build:angular-luxon-adapter    # Build Luxon date adapter
yarn run build:angular-moment-adapter   # Build Moment date adapter
yarn run build:cli                      # Build release management CLI
yarn run build:schematics               # Build Angular CLI schematics
yarn run styles:build-all               # Build all SCSS bundles
yarn run docs:build                     # Build docs app for production
```

--------------------------------

### Configure Content Panel Container

Source: https://github.com/koobiq/angular-components/blob/main/tools/public_api_guard/components/content-panel.api.md

The KbqContentPanelContainer provides functionality for opening, closing, and resizing panels. It utilizes Angular signals for state management and supports inputs for width constraints and interaction settings.

```typescript
export class KbqContentPanelContainer {
    open(): void;
    close(): void;
    toggle(): void;
    readonly isOpened: Signal<boolean>;
    readonly width: InputSignalWithTransform<number, unknown>;
    readonly minWidth: InputSignalWithTransform<number, unknown>;
    readonly maxWidth: InputSignalWithTransform<number, unknown>;
}
```

--------------------------------

### KbqRectangleItem

Source: https://github.com/koobiq/angular-components/blob/main/tools/public_api_guard/components/core.api.md

Represents an item within a rectangular layout, providing functionality to get its outer element width and manage its collapsed state.

```APIDOC
## KbqRectangleItem

### Description
Represents an item within a rectangular layout, providing functionality to get its outer element width and manage its collapsed state.

### Class
KbqRectangleItem

### Properties
- **collapsed** (boolean) - Gets or sets the collapsed state of the item.
- **state** (Subject<void>) - Subject to emit state changes.
- **isBrowser** (boolean) - Protected property indicating if the code is running in a browser environment.
- **nativeElement** (HTMLElement) - Protected property referencing the native HTML element.
```

--------------------------------

### KbqActionsPanelRef

Source: https://github.com/koobiq/angular-components/blob/main/tools/public_api_guard/components/actions-panel.api.md

Reference object for interacting with an opened actions panel.

```APIDOC
## KbqActionsPanelRef

### Description
Provides a reference to an opened `KbqActionsPanel`, allowing for programmatic control and observation of its lifecycle.

### Properties
- **containerInstance** (`KbqActionsPanelContainer`): The instance of the `KbqActionsPanelContainer` component.
- **id** (`string`): The unique ID of the overlay element.
- **overlayRef** (`OverlayRef`): The CDK overlay reference.

### Methods
- **close(result?: R): void**
  Closes the actions panel and optionally returns a result.
  - **result** (`R`): The result to be returned when the panel is closed.

- **afterClosed**: `Observable<R | undefined>`
  An observable that emits when the dialog is closed. The emitted value is the result returned from the `close` method.

- **afterOpened**: `Observable<void>`
  An observable that emits when the dialog has been opened and attached to the view.

- **keydownEvents**: `Observable<KeyboardEvent>`
  An observable that emits keyboard events that occur while the dialog is open.

### Example Usage
```typescript
const panelRef = this.actionsPanel.open(MyComponent);

panelRef.afterOpened.subscribe(() => {
  console.log('Actions panel has been opened.');
});

panelRef.afterClosed.subscribe(result => {
  console.log('Actions panel closed with:', result);
});

// To close the panel programmatically
// setTimeout(() => {
//   panelRef.close('Operation successful');
// }, 5000);
```
```

--------------------------------

### Provide Default Actions Panel Configuration in TypeScript

Source: https://github.com/koobiq/angular-components/blob/main/tools/public_api_guard/components/actions-panel.api.md

A provider function to set the default configuration for the KbqActionsPanel. This allows for easy customization of default behaviors across the application.

```typescript
import { Provider } from '@angular/core';
import { KbqActionsPanelConfig } from './actions-panel-config';

export const kbqActionsPanelDefaultConfigProvider: <D>(config: KbqActionsPanelConfig<D>) => Provider;
```

--------------------------------

### Template-Driven Form in Angular

Source: https://github.com/koobiq/angular-components/blob/main/packages/components-dev/validation/template.html

This snippet shows a basic template-driven form in Angular. It uses template references and directives to manage form state and display user input.

```html
<form #templateForm="ngForm">
  <div>
    <label>Typeahead:</label>
    <input type="text" name="typeahead" [(ngModel)]="typeaheadItems">
    @for (tag of typeaheadItems; track tag) {
      <span>{{ tag }}</span>
    }
  </div>
  <button type="submit">Submit</button>
</form>
```

--------------------------------

### Basic HTML Structure for Angular Application

Source: https://github.com/koobiq/angular-components/blob/main/packages/docs-examples/components/markdown/markdown-code-block/markdown-code-block-example.html

This HTML file represents the root of an Angular application. It includes essential meta tags for character set and viewport, and a title for the browser tab. The `<app></app>` tag is a placeholder for the main Angular component that bootstraps the application.

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Koobiq</title>
</head>
<body>
  <app></app>
</body>
</html>
```

--------------------------------

### Alert Component Examples

Source: https://github.com/koobiq/angular-components/blob/main/packages/components-dev/all/template.html

Demonstrates the usage of the Alert component in Angular. It shows basic alert messages and includes a comment suggesting the implementation of a separate button for actions.

```html
<!-- todo сделать отдельную кнопку -->
Alert text

Alert text

Alert text

Alert text

Alert text
```

--------------------------------

### Import Fontsource styles in SCSS

Source: https://github.com/koobiq/angular-components/blob/main/packages/components/core/styles/typography/typography.en.md

Imports specific font weights and styles into the global stylesheet of the Angular application. This ensures the fonts are bundled and available globally.

```scss
// Inter
@import '@fontsource/inter/400.css';
@import '@fontsource/inter/500.css';
@import '@fontsource/inter/600.css';
@import '@fontsource/inter/700.css';
@import '@fontsource/inter/400-italic.css';
@import '@fontsource/inter/500-italic.css';

// JetBrains Mono
@import '@fontsource/jetbrains-mono/400.css';
@import '@fontsource/jetbrains-mono/700.css';
```