# addons.md

```bash
npm i @taiga-ui/addon-charts    // Components for various charts, graphs and visualizations
npm i @taiga-ui/addon-commerce  // Money-related extension with currencies, credit card inputs and validators
npm i @taiga-ui/addon-mobile    // Components and tools specific to mobile version of the app
npm i @taiga-ui/addon-table     // Interactive table component and related utilities
npm i @taiga-ui/addon-doc       // Taiga UI based library for developing documentation portals for Angular libraries
npm i @taiga-ui/layout          // Layout components
```

---
# angular-json-styles.md

```json
{
  "projects": {
    "my-project": {
      "architect": {
        "build": {
          "options": {
            "styles": [
              "@taiga-ui/core/styles/taiga-ui-theme.less",
              "@taiga-ui/core/styles/taiga-ui-fonts.less",
              "@taiga-ui/addon-mobile/styles/taiga-ui-mobile.less" // optional
            ]
          }
        }
      }
    }
  }
}
```

---
# app-standalone.md

```ts
import {TuiRoot} from '@taiga-ui/core';
// ..
@Component({
  standalone: true,
  selector: 'app-root',
  imports: [
    TuiRoot,
    // ...
  ],
  templateUrl: './app.component.html',
})
export class App {}
```

---
# app-template.md

```html
<tui-root>
  <!-- content of your app -->
  <!--
     If you need, you can add something between Taiga portal layers:
    -->
  <ng-container ngProjectAs="tuiOverContent">
    <!-- Content over app content -->
  </ng-container>
  <ng-container ngProjectAs="tuiOverDialogs">
    <!-- Content over dialogs -->
  </ng-container>
  <ng-container ngProjectAs="tuiOverAlerts">
    <!-- Content over alerts -->
  </ng-container>
  <ng-container ngProjectAs="tuiOverDropdowns">
    <!-- Content over dropdowns -->
  </ng-container>
  <ng-container ngProjectAs="tuiOverHints">
    <!-- Content over hints -->
  </ng-container>
</tui-root>
```

---
# assets.md

```json
{
  "projects": {
    "my-project": {
      "architect": {
        "build": {
          // ...
          "assets": [
            {
              "glob": "**/*",
              "input": "node_modules/@taiga-ui/icons/src",
              "output": "assets/taiga-ui/icons"
            }
          ]
        }
      }
    }
  }
}
```

---
# components-styles.md

```ts
@Component({
  //...,
  styleUrls: ['./my.component.scss', './my.component.less'],
})
export class Example {}
```

---
# import-local-less.md

```less
@import '@taiga-ui/core/styles/taiga-ui-local.less';
// other styles
```

---
# main-standalone.md

```ts
import {provideAnimations} from '@angular/platform-browser/animations';
import {provideEventPlugins} from '@taiga-ui/event-plugins';
// ...
bootstrapApplication(App, {
  providers: [
    provideAnimations(),
    provideEventPlugins(),
    //...
  ],
}).catch((err) => console.error(err));
```

---
# main.md

```bash
npm i @taiga-ui/{cdk,core,kit,icons}
```

---
# nx-add.md

```bash
npm i taiga-ui
nx g taiga-ui:ng-add
```

---
# nx-assets.md

```json
{
  "targets": {
    "build": {
      "options": {
        // ...
        "assets": [
          {
            "glob": "**/*",
            "input": "node_modules/@taiga-ui/icons/src",
            "output": "assets/taiga-ui/icons"
          }
        ]
      }
    }
  }
}
```

---
# nx-migrate.md

```bash
nx migrate @taiga-ui/cdk
nx migrate --run-migrations=migrations.json
```

---
# ponyfill.md

```bash
npm install css-vars-ponyfill
```

---
# project-json-styles.md

```json
{
  "targets": {
    "build": {
      "options": {
        "styles": [
          "@taiga-ui/core/styles/taiga-ui-theme.less",
          "@taiga-ui/core/styles/taiga-ui-fonts.less",
          "@taiga-ui/addon-mobile/styles/taiga-ui-mobile.less" // optional
        ]
      }
    }
  }
}
```

---
# components/Accordion
- **Package**: `EXPERIMENTAL`
- **Type**: components

### How to Use (Import)

```ts
import {TuiAccordion} from '@taiga-ui/experimental';

// ...

@Component({
  standalone: true,
  imports: [
    // ...
    TuiAccordion,
  ],
  // ...
})
export class Example {}
```

### How to Use (Template)

```html
<tui-accordion>
  <button tuiAccordion>Taiga UI cdk</button>
  <tui-expand>
    Development kit consisting of the low level tools and abstractions used to develop Taiga UI Angular entities
  </tui-expand>
  <button tuiAccordion>Taiga UI core</button>
  <tui-expand>Basic elements needed to develop components, directives and more using Taiga UI design system</tui-expand>
  <button tuiAccordion>Taiga UI kit</button>
  <tui-expand>The main set of components used to build Taiga UI based Angular applications</tui-expand>
</tui-accordion>
```

### Example

```html
<tui-accordion [closeOthers]="closeOthers" [size]="size" >
<button tuiAccordion>Taiga UI cdk</button>
<tui-expand> Development kit consisting of the low level tools and abstractions used to develop Taiga UI Angular entities </tui-expand>
<button [(tuiAccordion)]="open">Taiga UI core</button>
<tui-expand> Basic elements needed to develop components, directives and more using Taiga UI design system </tui-expand>
</tui-accordion>
```

### API

| Property | Type | Description |
|----------|-----|----------|
| [closeOthers] | `boolean` | Other sections are closed when user opens one |
| [size] | `TuiSizeS | TuiSizeL` | Size |
| [(tuiAccordion)] | `boolean` | Individual item open state |

### Usage Examples

#### Basic

**Template:**
```html
<tui-accordion>
<ng-container *ngFor="let item of data | keyvalue; let index = index">
<button [tuiAccordion]="index === 1">{{ item.key }}</button>
<tui-expand>{{ item.value }}</tui-expand>
</ng-container>
</tui-accordion>
```
**TypeScript:**
```ts
import {KeyValuePipe, NgForOf} from '@angular/common';
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiAccordion} from '@taiga-ui/experimental';

@Component({
    standalone: true,
    imports: [KeyValuePipe, NgForOf, TuiAccordion],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly data = {
        'Taiga UI cdk':
            'Development kit consisting of the low level tools and abstractions used to develop Taiga UI Angular entities',
        'Taiga UI core':
            'Basic elements needed to develop components, directives and more using Taiga UI design system',
        'Taiga UI kit':
            'The main set of components used to build Taiga UI based Angular applications',
    };
}
```

#### Custom

**Template:**
```html
<tui-accordion class="accordion">
<ng-container *ngFor="let group of operations | keyvalue: orderBy">
<button appearance="" iconEnd="" tuiAccordion tuiCell >
<span tuiTitle>
<strong>{{ group.key }}</strong>
<span tuiSubtitle>
<ng-container *ngIf="group.value.length; else empty"> {{ group.value.length }} operations • Total: {{ sum(group.value) | tuiAmount: '$' : 'left' | async }} </ng-container>
<ng-template #empty>No operations so far</ng-template>
</span>
</span>
</button>
<tui-expand [style.display]="group.value.length ? null : 'none'">
<div *ngFor="let operation of group.value" tuiCell >
<tui-avatar [appearance]="operation.sum && operation.sum > 0 ? '' : 'negative'" [src]="getIcon(operation)" />
<span tuiTitle>
<strong>{{ operation.title }}</strong>
<span *ngIf="operation.subtitle" tuiSubtitle > {{ operation.subtitle }} </span>
</span>
<span *ngIf="operation.sum; else button" tuiTitle [style.color]="operation.sum > 0 ? 'var(--tui-text-positive)' : null" > {{ operation.sum | tuiAmount: '$' : 'left' | async }} <span tuiSubtitle>{{ operation.time }}</span>
</span>
<ng-template #button>
<button appearance="secondary" tuiButton type="button" > Retry </button>
</ng-template>
</div>
</tui-expand>
</ng-container>
</tui-accordion>
```
**TypeScript:**
```ts
import {AsyncPipe, KeyValuePipe, NgForOf, NgIf} from '@angular/common';
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiAmountPipe} from '@taiga-ui/addon-commerce';
import {TuiButton, TuiTitle} from '@taiga-ui/core';
import {TuiAccordion} from '@taiga-ui/experimental';
import {TuiAvatar} from '@taiga-ui/kit';
import {TuiCell} from '@taiga-ui/layout';

interface Operation {
    title: string;
    subtitle?: string;
    sum?: number;
    time?: string;
}

@Component({
    standalone: true,
    imports: [
        AsyncPipe,
        KeyValuePipe,
        NgForOf,
        NgIf,
        TuiAccordion,
        TuiAmountPipe,
        TuiAvatar,
        TuiButton,
        TuiCell,
        TuiTitle,
    ],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly operations = {
        Today: [],
        Yesterday: [
            {
                title: 'Cashback',
                subtitle: 'Pot of gold',
                sum: 237,
                time: '19:32',
            },
            {
                title: 'Failed to load',
            },
        ],
        'January 6, 2021': [
            {
                title: 'Salary',
                subtitle: 'Account number ••••237',
                sum: 43256,
                time: '11:02',
            },
            {
                title: 'Shaman Hat',
                subtitle: 'Insurrection Apparel',
                sum: -99,
                time: '09:11',
            },
            {
                title: 'Shaman Makeup',
                subtitle: 'Insurrection Apparel',
                sum: -75,
                time: '09:11',
            },
        ],
    };

    protected getIcon(operation: Operation): string {
        if (!operation.sum) {
            return '@tui.triangle-alert';
        }

        return operation.sum > 0 ? '@tui.thumbs-up' : '@tui.thumbs-down';
    }

    protected sum(operations: readonly Operation[]): number {
        return operations.reduce((acc, {sum}) => acc + (sum || 0), 0);
    }

    protected orderBy(): number {
        return 0;
    }
}
```

#### Single

**Template:**
```html
<tui-accordion>
<button tuiAccordion>Taiga UI cdk</button>
<tui-expand> Development kit consisting of the low level tools and abstractions used to develop Taiga UI Angular entities </tui-expand>
</tui-accordion>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiAccordion} from '@taiga-ui/experimental';

@Component({
    standalone: true,
    imports: [TuiAccordion],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {}
```

#### Eager and Lazy

**Template:**
```html
<tui-accordion>
<button tuiAccordion>Taiga UI lazy</button>
<tui-expand>
<ng-container *tuiItem>I'm lazy content</ng-container>
</tui-expand>
</tui-accordion>
<tui-accordion [style.margin-block-start.rem]="1">
<button tuiAccordion>Taiga UI eager</button>
<tui-expand>I'm eager content</tui-expand>
</tui-accordion>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiAccordion} from '@taiga-ui/experimental';

@Component({
    standalone: true,
    imports: [TuiAccordion],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {}
```

#### Nested

**Template:**
```html
<tui-accordion>
<button [tuiAccordion]="true">Level 1</button>
<tui-expand> Development kit consisting of the low level tools and abstractions used to develop Taiga UI Angular entities <tui-accordion [style.margin-block-start.rem]="0.75">
<button [tuiAccordion]="true">Level 2</button>
<tui-expand> The main set of components used to build Taiga UI based Angular applications <tui-accordion [style.margin-block-start.rem]="0.75">
<button [tuiAccordion]="true">Level 3</button>
<tui-expand> Basic elements needed to develop components, directives and more using Taiga UI design system </tui-expand>
</tui-accordion>
</tui-expand>
</tui-accordion>
</tui-expand>
</tui-accordion>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiAccordion} from '@taiga-ui/experimental';

@Component({
    standalone: true,
    imports: [TuiAccordion],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {}
```

#### Connected

**Template:**
```html
<tui-accordion tuiConnected class="accordion" >
<ng-container *ngFor="let item of steps | keyvalue: orderBy; let index = index">
<button appearance="icon" [tuiAccordion]="index === 1" >
<tui-avatar [appearance]="isChecked(item.value.steps) ? 'info' : ''" [src]="isChecked(item.value.steps) ? '@tui.check' : ''" /> {{ item.key }} </button>
<tui-expand> {{ item.value.text }} <label *ngFor="let step of item.value.steps" tuiCell >
<input tuiCheckbox type="checkbox" [ngModel]="selected.includes(step)" (ngModelChange)="toggle(step)" />
<span tuiTitle>{{ step }}</span>
</label>
</tui-expand>
</ng-container>
</tui-accordion>
```
**TypeScript:**
```ts
import {KeyValuePipe, NgForOf} from '@angular/common';
import {Component} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {tuiArrayToggle} from '@taiga-ui/cdk';
import {TuiTitle} from '@taiga-ui/core';
import {TuiAccordion} from '@taiga-ui/experimental';
import {TuiAvatar, TuiCheckbox, TuiConnected} from '@taiga-ui/kit';
import {TuiCell} from '@taiga-ui/layout';

@Component({
    standalone: true,
    imports: [
        FormsModule,
        KeyValuePipe,
        NgForOf,
        TuiAccordion,
        TuiAvatar,
        TuiCell,
        TuiCheckbox,
        TuiConnected,
        TuiTitle,
    ],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly steps = {
        'First steps': {
            text: 'Getting to know your workplace',
            steps: ['Looks around', 'Talk to colleagues', 'Have lunch'],
        },
        'Work day': {
            text: 'Start working',
            steps: ['Open the project', 'Read the documentation', 'Start coding'],
        },
        Mastery: {
            text: 'Become a pro',
            steps: ['Write tests', 'Refactor the code', 'Deploy the project'],
        },
    };

    protected selected = this.steps['First steps'].steps.concat(
        this.steps['Work day'].steps[0] || '',
    );

    protected isChecked(steps: readonly string[]): boolean {
        return steps.every((step) => this.selected.includes(step));
    }

    protected toggle(step: string): void {
        this.selected = tuiArrayToggle(this.selected, step);
    }

    protected orderBy(): number {
        return 0;
    }
}
```


### TypeScript

```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {TuiDemo} from '@demo/utils';
import {type TuiSizeL, type TuiSizeS} from '@taiga-ui/core';
import {TuiAccordion} from '@taiga-ui/experimental';

@Component({
    standalone: true,
    imports: [TuiAccordion, TuiDemo],
    templateUrl: './index.html',
    changeDetection,
})
export default class Page {
    protected readonly examples = [
        'Basic',
        'Custom',
        'Single',
        'Eager and Lazy',
        'Nested',
        'Connected',
    ];

    protected readonly sizeVariants: ReadonlyArray<TuiSizeL | TuiSizeS> = ['s', 'm', 'l'];
    protected size = this.sizeVariants[2]!;
    protected closeOthers = true;
    protected open = false;
}
```

---
# components/ActionBar
- **Package**: `KIT`
- **Type**: components
It is an element on the bottom of screen to show actions by multiselect of some items. It works with custom
        content.

### How to Use (Import)

```ts
import {TuiActionBar} from '@taiga-ui/kit';
// ...

@Component({
  standalone: true,
  imports: [
    TuiActionBar,
    // ...
  ],
  // ...
})
export class App {}
```

### How to Use (Template)

```html
<tui-action-bar *tuiActionBar="open">content</tui-action-bar>
```

### Usage Examples

#### Size M

**Template:**
```html
<tui-filter size="s" [formControl]="control" [items]="items" />
<tui-action-bar *tuiActionBar="open" [expanded]="!!isMobile() && expanded" >
<tui-data-list role="menu">
<tui-opt-group>
<button role="menuitem" tuiOption type="button" >
<span>
<tui-icon icon="@tui.send" class="tui-space_right-3" /> Send </span>
</button>
<button role="menuitem" tuiOption type="button" >
<span>
<tui-icon icon="@tui.trash" class="tui-space_right-3" /> Delete </span>
</button>
</tui-opt-group>
<tui-opt-group>
<button role="menuitem" tuiOption type="button" [disabled]="selected === items.length" (click)="control.setValue(items)" >
<span>
<tui-icon icon="@tui.layout-grid" class="tui-space_right-3" /> Select all </span>
</button>
<button role="menuitem" tuiOption type="button" (click)="close()" >
<span>
<tui-icon icon="@tui.x" class="tui-space_right-3" /> Select none and close </span>
</button>
</tui-opt-group>
<tui-opt-group>
<button *tuiRepeatTimes="let index of 5" role="menuitem" tuiOption type="button" >
<span>
<tui-icon icon="@tui.star" class="tui-space_right-3" /> Action {{ index + 1 }} </span>
</button>
</tui-opt-group>
</tui-data-list>
<div>
<strong>Selected: {{ selected }} of {{ items.length }}</strong>
<button *ngIf="!isMobile()" tuiLink type="button" class="tui-space_left-3" (click)="toggleSelect()" > {{ selected < items.length ? 'Select all' : 'Select none' }} </button>
</div>
<tui-items-with-more>
<ng-container *tuiRepeatTimes="let index of 5">
<button *tuiItem iconStart="@tui.star" tuiButton type="button" > Action {{ index + 1 }} </button>
</ng-container>
<ng-template let-lastIndex tuiMore >
<button iconStart="@tui.ellipsis" tuiButton tuiDropdownAlign="right" tuiDropdownOpen type="button" [tuiDropdown]="dropdown" > More </button>
<ng-template #dropdown>
<tui-data-list size="l">
<ng-container *tuiRepeatTimes="let index of 5">
<button *ngIf="index > lastIndex" tuiOption type="button" > Action {{ index + 1 }} </button>
</ng-container>
</tui-data-list>
</ng-template>
</ng-template>
</tui-items-with-more>
<button *ngIf="!isMobile()" iconStart="@tui.send" tuiButton type="button" > Send </button>
<button *ngIf="!isMobile()" iconStart="@tui.trash" tuiButton type="button" (click)="close()" > Delete </button>
<button *ngIf="isMobile()" iconStart="@tui.send" tuiIconButton type="button" > Send </button>
<button *ngIf="isMobile()" iconStart="@tui.ellipsis" tuiIconButton type="button" (click)="expanded = !expanded" > More </button>
<button *ngIf="!isMobile()" appearance="icon" iconStart="@tui.x" tuiIconButton type="button" (click)="close()" > Close </button>
</tui-action-bar>
```
**TypeScript:**
```ts
import {NgIf} from '@angular/common';
import {Component, inject} from '@angular/core';
import {toSignal} from '@angular/core/rxjs-interop';
import {FormControl, ReactiveFormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiRepeatTimes} from '@taiga-ui/cdk';
import {
    TuiBreakpointService,
    TuiButton,
    TuiDataList,
    TuiDropdown,
    TuiIcon,
    TuiLink,
} from '@taiga-ui/core';
import {TuiActionBar, TuiFilter, TuiItemsWithMore} from '@taiga-ui/kit';
import {map} from 'rxjs';

@Component({
    standalone: true,
    imports: [
        NgIf,
        ReactiveFormsModule,
        TuiActionBar,
        TuiButton,
        TuiDataList,
        TuiDropdown,
        TuiFilter,
        TuiIcon,
        TuiItemsWithMore,
        TuiLink,
        TuiRepeatTimes,
    ],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    protected items = ['one', 'two', 'three', 'four'];
    protected control = new FormControl<string[]>([]);
    protected expanded = false;

    protected readonly isMobile = toSignal(
        inject(TuiBreakpointService).pipe(map((size) => size === 'mobile')),
    );

    protected get value(): string[] {
        return this.control.value || [];
    }

    protected get open(): boolean {
        return this.value.length > 0;
    }

    protected get selected(): number {
        return this.value.length;
    }

    protected toggleSelect(): void {
        this.control.setValue(this.selected < this.items.length ? this.items : []);
    }

    protected close(): void {
        this.control.setValue([]);
        this.expanded = false;
    }
}
```

#### Size S

**Template:**
```html
<button size="m" tuiButton type="button" (click)="open.set(true)" > Show TableBar </button>
<tui-action-bar *tuiActionBar="open()" size="s" >
<span [style.width.%]="isMobile() ? 100 : null">Table bar opened</span>
<button appearance="glass" iconStart="@tui.trash" tuiButton type="button" (click)="open.set(false)" > Remove </button>
<button iconStart="@tui.x" tuiIconButton type="button" [appearance]="isMobile() ? 'glass' : 'icon'" (click)="open.set(false)" > Close </button>
</tui-action-bar>
```
**TypeScript:**
```ts
import {Component, inject, signal} from '@angular/core';
import {toSignal} from '@angular/core/rxjs-interop';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiBreakpointService, TuiButton} from '@taiga-ui/core';
import {TuiActionBar} from '@taiga-ui/kit';
import {map} from 'rxjs';

@Component({
    standalone: true,
    imports: [TuiActionBar, TuiButton],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    protected open = signal(false);

    protected readonly isMobile = toSignal(
        inject(TuiBreakpointService).pipe(map((size) => size === 'mobile')),
    );
}
```

#### Top position

**Template:**
```html
<button automation-id="open-table-bar-on-top" tuiButton type="button" (click)="open.set(true)" > Show TableBar on top </button>
<tui-action-bar *tuiActionBar="open()">
<span>Table bar on top opened</span>
<button iconStart="@tui.trash" tuiIconButton type="button" (click)="open.set(false)" > Close </button>
</tui-action-bar>
```
**TypeScript:**
```ts
import {Component, inject, signal} from '@angular/core';
import {toSignal} from '@angular/core/rxjs-interop';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiBreakpointService, TuiButton} from '@taiga-ui/core';
import {TuiActionBar} from '@taiga-ui/kit';
import {map} from 'rxjs';

@Component({
    standalone: true,
    imports: [TuiActionBar, TuiButton],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected open = signal(false);

    protected readonly isMobile = toSignal(
        inject(TuiBreakpointService).pipe(map((size) => size === 'mobile')),
    );
}
```


### TypeScript

```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {TuiDemo} from '@demo/utils';

@Component({
    standalone: true,
    imports: [TuiDemo],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    changeDetection,
})
export default class Page {
    protected readonly examples = ['Size M', 'Size S', 'Top position'];
}
```

### LESS

```less
.label {
    inline-size: 6.25rem;
}
```

---
# components/Alert
- **Package**: `CORE`
- **Type**: components
Built-in implementation of notifications

        
            Position on screen can be configured by providing margins with
            TUI_ALERT_POSITION
            token. Default value is
            2rem 3rem 0 auto
            .

### Example

```html
<button size="m" tuiButton type="button" (click)="showNotification()" > Show </button>
```

### API

| Property | Type | Description |
|----------|-----|----------|
| [content] | `PolymorpheusContent` | Content |
| [appearance] | `string` | Appearance |
| [label] | `string` | Heading |
| [data] | `number` |  |
| [autoClose] | `TuiHandler | number` | Auto close timeout, 0 for no auto close |
| [closeable] | `boolean` | Has close button |
| [icon] | `PolymorpheusContent` | Icon |

### Usage Examples

#### Text

**Template:**
```html
<button size="m" tuiButton type="button" (click)="showNotification()" > Show </button>
```
**TypeScript:**
```ts
import {Component, inject} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiAlertService, TuiButton} from '@taiga-ui/core';

@Component({
    standalone: true,
    imports: [TuiButton],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    private readonly alerts = inject(TuiAlertService);

    protected showNotification(): void {
        this.alerts
            .open('Basic <strong>HTML</strong>', {label: 'With a heading!'})
            .subscribe();
    }
}
```

#### Template

**Template:**
```html
<p> Your balance: <span>{{ money | tuiAmount: 'RUB' | async }}</span>
</p>
<button size="m" tuiButton type="button" class="tui-space_right-3" (click)="showWithdrawAlert()" > Withdraw </button>
<button size="m" tuiButton type="button" class="tui-space_right-3" (click)="showDepositAlert()" > Add </button>
<p>
<button size="m" tuiButton type="button" (click)="withdraw()" > Withdraw&nbsp; <span>{{ 100 | tuiAmount: 'RUB' | async }}</span>
</button>
</p>
<ng-template #withdrawTemplate="polymorpheus" polymorpheus >
<p>Notifications can be shown with template</p>
<p> Your balance: <span>{{ money | tuiAmount: 'RUB' | async }}</span>
</p>
<button tuiButton type="button" (click)="withdraw()" > Withdraw&nbsp; <span>{{ 100 | tuiAmount: 'RUB' | async }}</span>
</button>
</ng-template>
<ng-template #depositTemplate="polymorpheus" polymorpheus >
<p> If there are many templates, you can use <code>ViewChildren</code> instead of <code>ViewChild</code> or set them IDs with "#" (see code of this sample) </p>
<p> Your balance: <span>{{ money | tuiAmount: 'RUB' | async }}</span>
</p>
<button tuiButton type="button" (click)="deposit()" >
<span> Add&nbsp; <span>{{ 100 | tuiAmount: 'RUB' | async }}</span>
</span>
</button>
</ng-template>
```
**TypeScript:**
```ts
import {AsyncPipe} from '@angular/common';
import {Component, inject, type TemplateRef, ViewChild} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiAmountPipe} from '@taiga-ui/addon-commerce';
import {type TuiAlertContext, TuiAlertService, TuiButton} from '@taiga-ui/core';
import {PolymorpheusTemplate} from '@taiga-ui/polymorpheus';

@Component({
    standalone: true,
    imports: [AsyncPipe, PolymorpheusTemplate, TuiAmountPipe, TuiButton],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    private readonly alerts = inject(TuiAlertService);

    @ViewChild('withdrawTemplate')
    protected withdrawTemplate?: TemplateRef<TuiAlertContext>;

    @ViewChild('depositTemplate')
    protected depositTemplate?: TemplateRef<TuiAlertContext>;

    protected money = 1000;

    protected showWithdrawAlert(): void {
        this.alerts
            .open(this.withdrawTemplate || '', {
                label: 'A template sample',
                appearance: 'warning',
                autoClose: 0,
            })
            .subscribe();
    }

    protected showDepositAlert(): void {
        this.alerts
            .open(this.depositTemplate || '', {
                label: 'A template sample',
                appearance: 'positive',
                autoClose: 0,
            })
            .subscribe();
    }

    protected withdraw(): void {
        this.money -= 100;
    }

    protected deposit(): void {
        this.money += 100;
    }
}
```

#### Component

**Template:**
```html
<p>This notification will be removed after router change (see TypeScript tab)</p>
<button size="m" tuiButton type="button" (click)="showNotification()" > Show </button>
```
**TypeScript:**
```ts
import {NgForOf} from '@angular/common';
import {Component, inject} from '@angular/core';
import {Router} from '@angular/router';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {type TuiPopover} from '@taiga-ui/cdk';
import {type TuiAlertOptions, TuiAlertService, TuiButton} from '@taiga-ui/core';
import {injectContext, PolymorpheusComponent} from '@taiga-ui/polymorpheus';
import {switchMap, takeUntil} from 'rxjs';

@Component({
    standalone: true,
    imports: [NgForOf, TuiButton],
    template: `
        <p>Yes?</p>
        <button
            *ngFor="let response of [true, false]"
            appearance="outline-grayscale"
            size="s"
            tuiButton
            type="button"
            class="tui-space_right-1"
            (click)="context.completeWith(response)"
        >
            {{ response ? 'Yes' : 'No' }}
        </button>
    `,
    changeDetection,
})
export class AlertExample {
    protected readonly context =
        injectContext<TuiPopover<TuiAlertOptions<void>, boolean>>();
}

@Component({
    standalone: true,
    imports: [TuiButton],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    private readonly alerts = inject(TuiAlertService);
    private readonly notification = this.alerts
        .open<boolean>(new PolymorpheusComponent(AlertExample), {
            label: 'Question',
            appearance: 'negative',
            autoClose: 0,
        })
        .pipe(
            switchMap((response) =>
                this.alerts.open(`Got a value — ${response}`, {label: 'Information'}),
            ),
            takeUntil(inject(Router).events),
        );

    protected showNotification(): void {
        this.notification.subscribe();
    }
}
```

#### Component with data

**Template:**
```html
<button size="m" tuiButton type="button" (click)="showNotification()" > Show </button>
```
**TypeScript:**
```ts
import {AsyncPipe} from '@angular/common';
import {Component, inject} from '@angular/core';
import {Router} from '@angular/router';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiAmountPipe} from '@taiga-ui/addon-commerce';
import {type TuiPopover} from '@taiga-ui/cdk';
import {type TuiAlertOptions, TuiAlertService, TuiButton, TuiLink} from '@taiga-ui/core';
import {injectContext, PolymorpheusComponent} from '@taiga-ui/polymorpheus';
import {switchMap, takeUntil} from 'rxjs';

@Component({
    standalone: true,
    imports: [AsyncPipe, TuiAmountPipe, TuiButton, TuiLink],
    template: `
        <span tuiSubtitle>
            <em>Your balance:</em>
            {{ value | tuiAmount: 'RUB' | async }}
        </span>
        <div>
            <button
                tuiButton
                type="button"
                (click)="context.completeWith(value)"
            >
                Submit
            </button>
            <button
                tuiLink
                type="button"
                (click)="increaseBalance()"
            >
                Increase
            </button>
        </div>
    `,
    changeDetection,
})
export class AlertExampleWithData {
    protected readonly context =
        injectContext<TuiPopover<TuiAlertOptions<number>, number>>();

    protected value = this.context.data;

    protected increaseBalance(): void {
        this.value += 10;
    }
}

@Component({
    standalone: true,
    imports: [TuiButton],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    private readonly alerts = inject(TuiAlertService);
    private readonly notification = this.alerts
        .open<number>(new PolymorpheusComponent(AlertExampleWithData), {
            label: 'Heading is so long that it should be shown in two lines of text',
            data: 237,
            appearance: 'warning',
            autoClose: 0,
        })
        .pipe(
            switchMap((response) =>
                this.alerts.open(`Got a value — ${response}`, {label: 'Information'}),
            ),
            takeUntil(inject(Router).events),
        );

    protected showNotification(): void {
        this.notification.subscribe();
    }
}
```

#### Component with custom label

**Template:**
```html
<button size="m" tuiButton type="button" (click)="showNotification()" > Using function </button>
<p>
<button size="m" tuiButton type="button" (click)="showNotificationWithCustomLabel()" > Using component </button>
</p>
```
**TypeScript:**
```ts
import {Component, inject} from '@angular/core';
import {Router} from '@angular/router';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {type TuiPopover} from '@taiga-ui/cdk';
import {type TuiAlertOptions, TuiAlertService, TuiButton, TuiIcon} from '@taiga-ui/core';
import {
    injectContext,
    PolymorpheusComponent,
    PolymorpheusOutlet,
    PolymorpheusTemplate,
} from '@taiga-ui/polymorpheus';
import {takeUntil} from 'rxjs';

@Component({
    standalone: true,
    imports: [TuiIcon],
    template: `
        <label style="display: flex; align-items: center">
            <em>From custom label component with</em>
            <tui-icon icon="@tui.heart" />
        </label>
    `,
    changeDetection,
})
class CustomLabel {}

@Component({
    standalone: true,
    imports: [PolymorpheusOutlet, PolymorpheusTemplate],
    template: `
        <h4>Start content</h4>
        <ng-container *polymorpheusOutlet="context.label as text; context: context">
            {{ text }}
        </ng-container>
        <h4>End content</h4>
    `,
    changeDetection,
})
class AlertExampleWithCustomLabel {
    protected readonly context =
        injectContext<TuiPopover<TuiAlertOptions<unknown>, boolean>>();
}

@Component({
    standalone: true,
    selector: 'tui-alerts-example-5',
    imports: [TuiButton],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    private readonly router = inject(Router);
    private readonly alerts = inject(TuiAlertService);

    private readonly notification = this.alerts
        .open(new PolymorpheusComponent(AlertExampleWithCustomLabel), {
            label: ({appearance}) =>
                appearance === 'negative'
                    ? 'Error label from function'
                    : 'Info label from function',
            appearance: 'negative',
            autoClose: 0,
        })
        .pipe(takeUntil(this.router.events));

    private readonly notificationWithCustomLabel = this.alerts
        .open(new PolymorpheusComponent(AlertExampleWithCustomLabel), {
            label: new PolymorpheusComponent(CustomLabel),
            appearance: 'warning',
            autoClose: 0,
        })
        .pipe(takeUntil(this.router.events));

    protected showNotification(): void {
        this.notification.subscribe();
    }

    protected showNotificationWithCustomLabel(): void {
        this.notificationWithCustomLabel.subscribe();
    }
}
```

#### Directive

**Template:**
```html
<button size="m" tuiButton type="button" (click)="show = true" > Show </button>
<ng-template [tuiAlertOptions]="{label: 'Directive', autoClose: 0, closeable: false}" [(tuiAlert)]="show" >
<span tuiSubtitle>This is a declarative directive alert</span>
<button tuiButton type="button" (click)="show = false" > Close </button>
</ng-template>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiAlert, TuiButton} from '@taiga-ui/core';

@Component({
    standalone: true,
    selector: 'tui-alerts-example-6',
    imports: [TuiAlert, TuiButton],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    protected show = false;
}
```

#### Concurrency limit

**Template:**
```html
<button size="m" tuiButton type="button" (click)="showNotification()" > Show </button>
```
**TypeScript:**
```ts
import {Component, inject} from '@angular/core';
import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiAlertService, TuiButton} from '@taiga-ui/core';
import {mergeAll, type Observable, Subject} from 'rxjs';

const MAX_CONCURRENT = 3;

@Component({
    standalone: true,
    imports: [TuiButton],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    private readonly alerts = inject(TuiAlertService);
    private readonly queue$ = new Subject<Observable<unknown>>();
    private i = 0;

    constructor() {
        this.queue$.pipe(mergeAll(MAX_CONCURRENT), takeUntilDestroyed()).subscribe();
    }

    protected showNotification(): void {
        this.queue$.next(
            this.alerts.open(
                `It is impossible to show more than ${MAX_CONCURRENT} alerts concurrently!<br/>` +
                    `<strong>Index: ${this.i++}</strong>`,
                {label: 'Use power of RxJS!'},
            ),
        );
    }
}
```


### TypeScript

```ts
import {Component, inject, INJECTOR} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {DemoRoute} from '@demo/routes';
import {TuiDemo} from '@demo/utils';
import {type TuiPopoverContext} from '@taiga-ui/cdk';
import {
    TUI_NOTIFICATION_OPTIONS,
    type TuiAlertOptions,
    TuiAlertService,
    TuiButton,
} from '@taiga-ui/core';
import {PolymorpheusComponent, type PolymorpheusContent} from '@taiga-ui/polymorpheus';
import {switchMap} from 'rxjs';

import {AlertExampleWithData} from './examples/4';

@Component({
    standalone: true,
    imports: [TuiButton, TuiDemo],
    templateUrl: './index.html',
    changeDetection,
})
export default class Page {
    private readonly alerts = inject(TuiAlertService);

    private readonly defaultIcon = inject(TUI_NOTIFICATION_OPTIONS).icon;

    protected readonly routes = DemoRoute;
    protected readonly examples = [
        'Text',
        'Template',
        'Component',
        'Component with data',
        'Component with custom label',
        'Directive',
        'Concurrency limit',
    ];

    protected readonly method = import('./examples/import/method.md?raw');

    protected readonly exampleServiceUsage = import(
        './examples/import/service-usage.md?raw'
    );

    protected readonly exampleServiceUsageComponent = import(
        './examples/import/service-usage-component.md?raw'
    );

    protected readonly exampleCustomAlert = import(
        './examples/import/custom-alert.md?raw'
    );

    protected readonly exampleLazyModule = import('./examples/import/lazy-module.md?raw');
    protected readonly exampleOptions = import('./examples/import/define-options.md?raw');

    protected data = 100;

    protected label = 'Heading';

    protected readonly appearanceVariants = [
        'info',
        'positive',
        'negative',
        'warning',
        'neutral',
    ];

    protected appearance = this.appearanceVariants[0]!;

    protected readonly iconVariants = ['Default', '@tui.heart'];

    protected icon = this.iconVariants[0]!;

    protected readonly contentVariants = ['String', 'Component'];

    protected content = this.contentVariants[0]!;

    protected readonly autoCloseVariants = [0, 3000, 5000, 1000, 500];

    protected autoClose = this.autoCloseVariants[1]!;

    protected closeable = true;

    protected readonly component = new PolymorpheusComponent(
        AlertExampleWithData,
        inject(INJECTOR),
    );

    protected get selectedContent(): PolymorpheusContent<
        TuiAlertOptions<number> & TuiPopoverContext<number>
    > {
        return this.content === 'String' ? this.content : this.component;
    }

    protected showNotification(): void {
        this.alerts
            .open(this.selectedContent, {
                label: this.label,
                data: this.data,
                appearance: this.appearance,
                autoClose: this.autoClose,
                closeable: this.closeable,
                icon: this.icon === this.iconVariants[0] ? this.defaultIcon : this.icon,
            })
            .pipe(
                switchMap((response) =>
                    this.alerts.open(response, {
                        label: 'Notification responded with:',
                    }),
                ),
            )
            .subscribe();
    }
}
```

---
# components/AppBar
- **Package**: `LAYOUT`
- **Type**: components
Component for the main app header

### How to Use (Import)

```ts
import {TuiAppBar} from '@taiga-ui/layout';

// ...

@Component({
  standalone: true,
  imports: [
    // ...
    TuiAppBar,
  ],
  // ...
})
export class Example {}
```

### How to Use (Template)

```html
<header>
  <tui-app-bar>
    <button
      tuiAppBarBack
      tuiSlot="left"
    >
      Back
    </button>
    Page title
    <button
      tuiIconButton
      icon="@tui.settings"
      title="settings"
      tuiSlot="right"
    ></button>
  </tui-app-bar>
</header>
```

### Usage Examples

#### Mobile — medium size

**Template:**
```html
<h3>iOS</h3>
<section tuiPlatform="ios">
<tui-app-bar>
<button tuiButton tuiSlot="left" type="button" > Back </button> Taiga UI <button tuiButton tuiSlot="right" type="button" > Action </button>
</tui-app-bar>
<tui-app-bar>
<button tuiAppBarBack tuiSlot="left" type="button" > Back </button> Taiga UI — Components library <a iconStart="@tui.user" title="User" tuiIconButton tuiSlot="right" ></a>
</tui-app-bar>
<tui-app-bar>
<button title="Back" tuiAppBarBack tuiSlot="left" type="button" ></button> Taiga UI <a iconStart="@tui.user" title="User" tuiIconButton tuiSlot="right" ></a>
<button iconStart="@tui.settings" title="Settings" tuiIconButton tuiSlot="right" type="button" ></button>
</tui-app-bar>
<tui-app-bar>
<label tuiTitle> Taiga UI <span tuiSubtitle>Components library</span>
</label>
<button iconStart="@tui.settings" title="Settings" tuiIconButton tuiSlot="right" type="button" ></button>
</tui-app-bar>
</section>
<h3 class="tui-space_top-8">Android</h3>
<section tuiPlatform="android">
<tui-app-bar> Taiga UI <button tuiButton tuiSlot="right" type="button" > Action </button>
</tui-app-bar>
<tui-app-bar>
<button tuiAppBarBack tuiSlot="left" type="button" > Back </button> Taiga UI — Components library <a iconStart="@tui.user" title="User" tuiIconButton tuiSlot="right" ></a>
</tui-app-bar>
<tui-app-bar>
<button iconStart="@tui.x" title="Settings" tuiIconButton tuiSlot="left" type="button" ></button> Taiga UI <a iconStart="@tui.user" title="User" tuiIconButton tuiSlot="right" ></a>
<button iconStart="@tui.settings" title="Settings" tuiIconButton tuiSlot="right" type="button" ></button>
</tui-app-bar>
<tui-app-bar>
<button title="Back" tuiAppBarBack tuiSlot="left" type="button" ></button>
<label tuiTitle> Taiga UI <span tuiSubtitle>Components library</span>
</label>
<button iconStart="@tui.settings" title="Settings" tuiIconButton tuiSlot="right" type="button" ></button>
</tui-app-bar>
</section>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiPlatform} from '@taiga-ui/cdk';
import {TuiButton, TuiTitle} from '@taiga-ui/core';
import {TuiAppBar} from '@taiga-ui/layout';

@Component({
    standalone: true,
    imports: [TuiAppBar, TuiButton, TuiPlatform, TuiTitle],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {}
```

#### Desktop — large size

**Template:**
```html
<tui-app-bar size="l">
<button iconStart="@tui.chevron-left" tuiButton tuiSlot="left" type="button" > Action </button> Taiga UI </tui-app-bar>
<tui-app-bar size="l">
<label tuiTitle> Taiga UI <span tuiSubtitle>Components library</span>
</label>
<button tuiButton tuiSlot="right" type="button" > Action </button>
</tui-app-bar>
<tui-app-bar size="l">
<button tuiButton tuiSlot="left" type="button" > Action </button>
<label tuiTitle> Taiga UI is a very long title that should fade away <span tuiSubtitle>Components library</span>
</label>
<button iconStart="@tui.x" tuiIconButton tuiSlot="right" type="button" > Close </button>
</tui-app-bar>
<tui-app-bar size="l">
<button iconStart="@tui.chevron-left" tuiIconButton tuiSlot="left" type="button" > Back </button>
<progress size="s" tuiProgressBar [max]="100" [style.width.rem]="10" [value]="35" ></progress>
<button tuiButton tuiSlot="right" type="button" > Action </button>
</tui-app-bar>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiButton, TuiTitle} from '@taiga-ui/core';
import {TuiProgress} from '@taiga-ui/kit';
import {TuiAppBar} from '@taiga-ui/layout';

@Component({
    standalone: true,
    imports: [TuiAppBar, TuiButton, TuiProgress, TuiTitle],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {}
```

#### Variants

**Template:**
```html
<h3>Customization</h3>
<tui-app-bar>
<progress size="s" tuiProgressBar [max]="100" [value]="35" ></progress>
</tui-app-bar>
<tui-app-bar class="gray">
<button appearance="" tuiButton tuiSlot="left" type="button" > Back </button>
<label tuiTitle>
<span tuiSubtitle>More interesting title</span> Taiga UI </label>
<button appearance="" tuiButton tuiSlot="right" type="button" > Accept </button>
</tui-app-bar>
<tui-app-bar class="black">
<button appearance="" tuiButton tuiSlot="left" type="button" > Cancel </button> Taiga UI <button appearance="" iconStart="@tui.settings" title="Settings" tuiIconButton tuiSlot="right" type="button" ></button>
</tui-app-bar>
<h3 class="tui-space_top-8">Centered Android</h3>
<section tuiPlatform="android">
<tui-app-bar>
<label tuiTitle>Taiga UI</label>
<button tuiButton tuiSlot="right" type="button" > Action </button>
</tui-app-bar>
<tui-app-bar>
<button tuiAppBarBack tuiSlot="left" type="button" > Back </button>
<label tuiFade tuiTitle > Taiga UI — Components library </label>
<a iconStart="@tui.user" title="User" tuiIconButton tuiSlot="right" ></a>
</tui-app-bar>
<tui-app-bar>
<button iconStart="@tui.x" title="Settings" tuiIconButton tuiSlot="left" type="button" ></button>
<label tuiTitle>Taiga UI</label>
<a iconStart="@tui.user" title="User" tuiIconButton tuiSlot="right" ></a>
<button iconStart="@tui.settings" title="Settings" tuiIconButton tuiSlot="right" type="button" ></button>
</tui-app-bar>
<tui-app-bar>
<button title="Back" tuiAppBarBack tuiSlot="left" type="button" ></button>
<label tuiTitle> Taiga UI <span tuiSubtitle>Components library</span>
</label>
<button iconStart="@tui.settings" title="Settings" tuiIconButton tuiSlot="right" type="button" ></button>
</tui-app-bar>
</section>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiPlatform} from '@taiga-ui/cdk';
import {TuiButton, TuiTitle} from '@taiga-ui/core';
import {TuiFade, TuiProgress} from '@taiga-ui/kit';
import {TuiAppBar} from '@taiga-ui/layout';

@Component({
    standalone: true,
    imports: [TuiAppBar, TuiButton, TuiFade, TuiPlatform, TuiProgress, TuiTitle],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {}
```

#### Dialog

**Template:**
```html
<button size="m" tuiButton type="button" (click)="open(template)" > Show </button>
<ng-template #template let-observer >
<tui-app-bar tuiAppBarSize>
<button tuiAppBarBack tuiSlot="left" type="button" [disabled]="!step" (click)="step = step - 1" > Back </button>
<progress max="5" size="s" tuiProgressBar [style.width.rem]="8" [value]="step" ></progress>
<button tuiButton tuiSlot="right" type="button" (click)="observer.complete()" > Close </button>
</tui-app-bar>
<h2 tuiHeader="l">
<span tuiTitle>I'm a stepper</span>
</h2>
<p tuiAppearance="floating" tuiCardLarge > Step {{ step }} </p>
<button tuiButton type="button" [disabled]="step === 5" (click)="step = step + 1" > Next </button>
</ng-template>
```
**TypeScript:**
```ts
import {Component, inject, type TemplateRef} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiAppearance, TuiButton, TuiDialogService, TuiTitle} from '@taiga-ui/core';
import {TuiProgress} from '@taiga-ui/kit';
import {TuiAppBar, TuiCardLarge, TuiHeader} from '@taiga-ui/layout';

@Component({
    standalone: true,
    imports: [
        TuiAppBar,
        TuiAppearance,
        TuiButton,
        TuiCardLarge,
        TuiHeader,
        TuiProgress,
        TuiTitle,
    ],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    private readonly dialogs = inject(TuiDialogService);

    protected step = 0;

    protected open(template: TemplateRef<any>): void {
        this.step = 0;
        this.dialogs
            .open(template, {
                label: '',
                size: 'fullscreen',
                closeable: false,
                dismissible: false,
            })
            .subscribe();
    }
}
```

#### Dynamic header

**Template:**
```html
<tui-segmented [(activeItemIndex)]="activeItemIndex">
<button type="button">IOS</button>
<button type="button">Android</button>
</tui-segmented>
<div tuiDynamicHeaderContainer class="container" [tuiPlatform]="activeItemIndex ? 'android' : 'ios'" >
<tui-app-bar>
<button title="Back" tuiAppBarBack tuiSlot="left" type="button" ></button>
<div tuiDynamicHeader></div>
</tui-app-bar>
<div class="content">
<div *tuiDynamicHeaderAnchor tuiHeader="h6" >
<h6 tuiTitle> Title 1 <div tuiSubtitle>Subtitle</div>
</h6>
</div>
<div *tuiRepeatTimes="let i of 7" tuiCell >
<tui-avatar appearance="primary" src="@tui.star" />
<div tuiTitle> Title <div tuiSubtitle>Description</div>
</div>
</div>
<div *tuiDynamicHeaderAnchor tuiHeader="h6" >
<h6 tuiTitle>Title 2</h6>
</div>
<div *tuiRepeatTimes="let i of 15" tuiCell >
<tui-avatar appearance="secondary" src="@tui.heart" />
<div tuiTitle> Title <div tuiSubtitle>Description</div>
</div>
</div>
<div *tuiDynamicHeaderAnchor tuiHeader="h6" >
<h6 tuiTitle>Title 3 Long title</h6>
</div>
<div *tuiRepeatTimes="let i of 15" tuiCell >
<tui-avatar appearance="secondary" src="@tui.heart" />
<div tuiTitle> Title <div tuiSubtitle>Description</div>
</div>
</div>
</div>
</div>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiPlatform, TuiRepeatTimes} from '@taiga-ui/cdk';
import {TuiTitle} from '@taiga-ui/core';
import {TuiAvatar, TuiSegmented} from '@taiga-ui/kit';
import {TuiAppBar, TuiCell, TuiDynamicHeader, TuiHeader} from '@taiga-ui/layout';

@Component({
    standalone: true,
    imports: [
        TuiAppBar,
        TuiAvatar,
        TuiCell,
        TuiDynamicHeader,
        TuiHeader,
        TuiPlatform,
        TuiRepeatTimes,
        TuiSegmented,
        TuiTitle,
    ],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected activeItemIndex = 0;
}
```


### TypeScript

```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {TuiDemo} from '@demo/utils';

@Component({
    standalone: true,
    imports: [TuiDemo],
    templateUrl: './index.html',
    changeDetection,
})
export default class Page {
    protected readonly examples = [
        'Mobile — medium size',
        'Desktop — large size',
        'Variants',
        'Dialog',
        'Dynamic header',
    ];
}
```

---
# components/ArcChart
- **Package**: `ADDON-CHARTS`
- **Type**: components

### How to Use (Import)

```ts
import {TuiArcChart} from '@taiga-ui/addon-charts';

// ...

@Component({
  standalone: true,
  imports: [
    // ...
    TuiArcChart,
  ],
  // ...
})
export class Example {}
```

### How to Use (Template)

```html
<tui-arc-chart [value]="value"></tui-arc-chart>
```

### Example

```html
<tui-arc-chart class="chart" [max]="max" [maxLabel]="maxLabel" [minLabel]="minLabel" [size]="size" [value]="value" [(activeItemIndex)]="activeItemIndex" />
```

### API

| Property | Type | Description |
|----------|-----|----------|
| [max] | `number` | Maximum value |
| [maxLabel] | `string` | Label for maximum value |
| [minLabel] | `string` | Label for minimum value |
| [size] | `TuiSizeXL` | Size |
| [value] | `readonly number[]` | Value |
| [(activeItemIndex)] | `number` | Index of selected arc |

### Usage Examples

#### Sizes

**Template:**
```html
<tui-textfield class="index-controller" [tuiTextfieldCleaner]="false" >
<label tuiLabel>activeItemIndex</label>
<input tuiInputNumber [max]="value.length - 1" [min]="0" [ngModel]="activeItemIndex" [step]="1" [tuiNumberFormat]="{precision: 0}" (ngModelChange)="onTextfieldChange($event)" />
</tui-textfield>
<div class="wrapper">
<tui-arc-chart size="m" class="tui-space_right-4" [value]="value" [(activeItemIndex)]="activeItemIndex" > Total value </tui-arc-chart>
<tui-arc-chart size="l" class="tui-space_right-4" [value]="value" [(activeItemIndex)]="activeItemIndex" > Total value <div>Label</div>
</tui-arc-chart>
<tui-arc-chart size="xl" class="tui-space_right-4" [value]="value" [(activeItemIndex)]="activeItemIndex" >
<span>{{ 123456 | tuiAmount: 'RUB' | async }}</span>
<div>Not bad!</div>
</tui-arc-chart>
</div>
```
**TypeScript:**
```ts
import {AsyncPipe} from '@angular/common';
import {Component} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiArcChart} from '@taiga-ui/addon-charts';
import {TuiAmountPipe} from '@taiga-ui/addon-commerce';
import {TuiNumberFormat, TuiTextfield} from '@taiga-ui/core';
import {TuiInputNumber} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [
        AsyncPipe,
        FormsModule,
        TuiAmountPipe,
        TuiArcChart,
        TuiInputNumber,
        TuiNumberFormat,
        TuiTextfield,
    ],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly value = [40, 30, 20, 10];

    protected activeItemIndex = NaN;

    public onTextfieldChange(value: number | null): void {
        this.activeItemIndex = value ?? NaN;
    }
}
```

#### Stacked

**Template:**
```html
<div class="wrapper">
<tui-arc-chart size="l" [value]="[40]" />
<tui-arc-chart maxLabel="" minLabel="" size="l" class="stacked" [value]="[20]" > +20% <div>For filling in last name</div>
</tui-arc-chart>
</div>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiArcChart} from '@taiga-ui/addon-charts';
import {tuiSum} from '@taiga-ui/cdk';

@Component({
    standalone: true,
    imports: [TuiArcChart],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly value = [13769, 12367, 10172, 3018, 2592];
    protected readonly sum = tuiSum(...this.value);
}
```


### TypeScript

```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {TuiDemo} from '@demo/utils';
import {TuiArcChart} from '@taiga-ui/addon-charts';
import {type TuiSizeXL} from '@taiga-ui/core';

@Component({
    standalone: true,
    imports: [TuiArcChart, TuiDemo],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    changeDetection,
})
export default class Page {
    protected readonly examples = ['Sizes', 'Stacked'];

    protected readonly valueVariants = [
        [42],
        [40, 30, 20, 10],
        [13769, 10172, 3018, 2592],
    ];

    protected value = this.valueVariants[0]!;

    protected readonly maxVariants = [100, 10000, 50000];

    protected max = this.maxVariants[0]!;

    protected readonly sizeVariants: readonly TuiSizeXL[] = ['m', 'l', 'xl'];

    protected size = this.sizeVariants[0]!;

    protected minLabel = '0%';

    protected maxLabel = '100%';

    protected activeItemIndex = NaN;
}
```

### LESS

```less
.chart {
    margin: 0 auto;
}
```

---
# components/Avatar
- **Package**: `KIT`
- **Type**: components

### How to Use (Import)

```ts
import {Component} from '@angular/core';
import {TuiAvatar} from '@taiga-ui/kit';
// ...

@Component({
  standalone: true,
  imports: [
    // ...
    TuiAvatar,
  ],
})
export class Example {}
```

### How to Use (Template)

```html
<tui-avatar>Batman</tui-avatar>
```

### Example

```html
<tui-avatar [round]="round" [size]="size" [src]="src" />
```

### API

| Property | Type | Description |
|----------|-----|----------|
| round | `boolean` | Use round shape |
| size | `TuiSizeS | TuiSizeL` | Size |
| src | `SafeResourceUrl | string | null` | which would be styled differently from initials and fade if overflown |

### Usage Examples

#### Content types

**Template:**
```html
<h3 tuiTitle> Icon <span tuiSubtitle> Starts with <code>&#64;tui.</code>
</span>
</h3>
<tui-avatar src="@tui.user" />
<h3 tuiTitle> Colored icon <span tuiSubtitle> Use <code>tuiIcon</code> pipe to resolve name </span>
</h3>
<tui-avatar [src]="'@tui.mastercard' | tuiIcon" />
<tui-avatar [src]="'assets/icons/nx.svg'" />
<h3 tuiTitle>Image</h3>
<tui-avatar [src]="'https://avatars.githubusercontent.com/u/11832552' | tuiFallbackSrc: '@tui.user' | async" />
<h3 tuiTitle>Initials</h3>
<tui-avatar src="AI" />
<h3 tuiTitle>Content</h3>
<div>
<tui-avatar>99+</tui-avatar>
<tui-avatar class="tui-space_horizontal-4">
<picture>
<source media="(min-width: 600px)" srcset="assets/images/angular.svg" />
<img alt="Alex Inkin" src="assets/images/avatar.jpg" />
</picture>
</tui-avatar>
<tui-avatar>
<video autoplay loop playsinline [muted]="true" >
<source src="assets/media/bbb.mp4" type="video/mp4" />
</video>
</tui-avatar>
</div>
```
**TypeScript:**
```ts
import {AsyncPipe} from '@angular/common';
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiFallbackSrcPipe, TuiIconPipe, TuiTitle} from '@taiga-ui/core';
import {TuiAvatar} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [AsyncPipe, TuiAvatar, TuiFallbackSrcPipe, TuiIconPipe, TuiTitle],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {}
```

#### Colors

**Template:**
```html
<tui-avatar appearance="negative" src="@tui.user" />
<tui-avatar src="AI" class="text" [style.background]="'AI' | tuiAutoColor" />
<tui-avatar class="text">
<div tuiFade>Fading</div>
</tui-avatar>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiAutoColorPipe} from '@taiga-ui/core';
import {TuiAvatar, TuiFade} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [TuiAutoColorPipe, TuiAvatar, TuiFade],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {}
```

#### Sizes

**Template:**
```html
<section *ngFor="let size of sizes">
<tui-avatar [size]="size">{{ size | uppercase }}</tui-avatar>
<tui-avatar src="@tui.user" [size]="size" />
</section>
```
**TypeScript:**
```ts
import {NgForOf, UpperCasePipe} from '@angular/common';
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiAvatar} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [NgForOf, TuiAvatar, UpperCasePipe],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly sizes = ['xxl', 'xl', 'l', 'm', 's', 'xs'] as const;
    protected readonly names = ['Jason Statham', 'Silvester Stallone', 'Jackie Chan'];
}
```

#### Stacking

**Template:**
```html
<tui-avatar-stack *ngFor="let size of sizes; let odd = odd" class="tui-space_vertical-4" [direction]="odd ? 'left' : 'right'" >
<tui-avatar *ngFor="let name of names" [round]="odd" [size]="size" [src]="name | tuiInitials" [style.background]="name | tuiAutoColor" />
<tui-avatar [round]="odd" [size]="size" > 99+ </tui-avatar>
</tui-avatar-stack>
```
**TypeScript:**
```ts
import {NgForOf} from '@angular/common';
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {
    TuiAutoColorPipe,
    TuiInitialsPipe,
    type TuiSizeXS,
    type TuiSizeXXL,
} from '@taiga-ui/core';
import {TuiAvatar, TuiAvatarStack} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [NgForOf, TuiAutoColorPipe, TuiAvatar, TuiAvatarStack, TuiInitialsPipe],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly names = ['Jason Statham', 'Silvester Stallone', 'Jackie Chan'];
    protected readonly sizes: ReadonlyArray<TuiSizeXS | TuiSizeXXL> = [
        'xxl',
        'xl',
        'l',
        'm',
        's',
        'xs',
    ];
}
```

#### Options with DI

**Template:**
```html
<tui-avatar src="DI" />
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiAvatar, tuiAvatarOptionsProvider} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [TuiAvatar],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
    providers: [tuiAvatarOptionsProvider({size: 'l'})],
})
export default class Example {}
```

#### Labeled

**Template:**
```html
<tui-avatar-labeled label="Grigori Constantinopolsky">
<tui-avatar [src]="'https://avatars.githubusercontent.com/u/10106368' | tuiFallbackSrc: '@tui.user' | async" />
</tui-avatar-labeled>
<tui-avatar-labeled label="Nikolai Rimsky-Korsakov">
<tui-avatar [src]="'https://avatars.githubusercontent.com/u/11832552' | tuiFallbackSrc: '@tui.user' | async" />
</tui-avatar-labeled>
<tui-avatar-labeled label="Hubert Wolfflegelstainhausenbergedorf">
<tui-avatar [src]="'https://avatars.githubusercontent.com/u/46284632' | tuiFallbackSrc: '@tui.user' | async" />
</tui-avatar-labeled>
<tui-avatar-labeled label="Arkhangelsky Constantine">
<tui-avatar [src]="'https://avatars.githubusercontent.com/u/35179038' | tuiFallbackSrc: '@tui.user' | async" />
</tui-avatar-labeled>
<tui-avatar-labeled label="Zoya Kosmodemyanskaya">
<tui-avatar [src]="'https://avatars.githubusercontent.com/u/8158578' | tuiFallbackSrc: '@tui.user' | async" />
</tui-avatar-labeled>
```
**TypeScript:**
```ts
import {AsyncPipe} from '@angular/common';
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiFallbackSrcPipe} from '@taiga-ui/core';
import {TuiAvatar, TuiAvatarLabeled} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [AsyncPipe, TuiAvatar, TuiAvatarLabeled, TuiFallbackSrcPipe],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {}
```

#### Outline

**Template:**
```html
<tui-avatar size="m" src="@tui.heart" tuiAvatarOutline />
<tui-avatar size="l" tuiAvatarOutline="var(--tui-background-accent-2)" >
<img alt="Alex Inkin" src="assets/images/avatar.jpg" />
</tui-avatar>
<tui-avatar size="xl" src="OK" tuiAvatarOutline="linear-gradient(#c86dd7, #3023ae)" [style.background]="'linear-gradient(#3023ae, #c86dd7)'" [style.color]="'#fff'" />
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiAvatar, TuiAvatarOutline} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [TuiAvatar, TuiAvatarOutline],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {}
```


### TypeScript

```ts
import {Component, inject} from '@angular/core';
import {DomSanitizer, type SafeResourceUrl} from '@angular/platform-browser';
import {changeDetection} from '@demo/emulate/change-detection';
import {TuiDemo} from '@demo/utils';
import {type TuiSizeXS, type TuiSizeXXL} from '@taiga-ui/core';
import {TuiAvatar} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [TuiAvatar, TuiDemo],
    templateUrl: './index.html',
    changeDetection,
})
export default class Page {
    private readonly sanitizer = inject(DomSanitizer);

    protected readonly examples = [
        'Content types',
        'Colors',
        'Sizes',
        'Stacking',
        'Options with DI',
        'Labeled',
        'Outline',
    ];

    protected readonly sizes: ReadonlyArray<TuiSizeXS | TuiSizeXXL> = [
        'xs',
        's',
        'm',
        'l',
        'xl',
        'xxl',
    ];

    protected size = this.sizes[3]!;

    protected readonly srcVariants: ReadonlyArray<SafeResourceUrl | string> = [
        'MW',
        'https://avatars.githubusercontent.com/u/11832552',
        'https://taiga-ui.dev/assets/images/test-not-found.png',
        '@tui.user',
        this.sanitizer.bypassSecurityTrustResourceUrl(
            'https://avatars.githubusercontent.com/u/10106368',
        ),
    ];

    protected src = this.srcVariants[0]!;

    protected round = true;
}
```

---
# components/Axes
- **Package**: `ADDON-CHARTS`
- **Type**: components
Just axes for charts

### How to Use (Import)

```ts
import {TuiAxes} from '@taiga-ui/addon-charts';

// ...

@Component({
  standalone: true,
  imports: [
    // ...
    TuiAxes,
  ],
  // ...
})
export class Example {}
```

### How to Use (Template)

```html
<tui-axes [value]="value"></tui-axes>
```

### Example

```html
<tui-axes class="axes" [axisX]="axisX" [axisXLabels]="axisXLabels || []" [axisY]="axisY" [axisYInset]="axisYInset" [axisYLabels]="axisYLabels || []" [axisYName]="axisYName" [axisYSecondaryInset]="axisYSecondaryInset" [axisYSecondaryLabels]="axisYSecondaryLabels" [axisYSecondaryName]="axisYSecondaryName" [horizontalLines]="horizontalLines" [horizontalLinesHandler]="horizontalLinesHandler" [verticalLines]="verticalLines" [verticalLinesHandler]="verticalLinesHandler" />
```

### API

| Property | Type | Description |
|----------|-----|----------|
| [axisX] | `TuiLineType` | Axis X |
| [axisXLabels] | `ReadonlyArray<string | null>` | — no stroke |
| [axisY] | `TuiLineType` | Axis Y |
| [axisYInset] | `boolean` | Inset of labels on axis Y |
| [axisYLabels] | `readonly string[]` | Labels for Y |
| [axisYName] | `string` | Name of Y axis |
| [axisYSecondaryInset] | `boolean` | Inset labels for Y |
| [axisYSecondaryLabels] | `readonly string[]` | Secondary Y axis labels |
| [axisYSecondaryName] | `string` | Secondary Y axis name |
| [horizontalLines] | `number` | Horizontal lines number |
| [horizontalLinesHandler] | `TuiLineHandler` | Horizontal lines type handler |
| [verticalLines] | `number` | Number of vertical lines |
| [verticalLinesHandle] | `TuiLineHandler` | Vertical lines type handler |

### Usage Examples

#### Cool one

**Template:**
```html
<tui-axes axisYName="Target" axisYSecondaryName="Sum" class="axes" [axisXLabels]="axisXLabels" [axisYInset]="true" [axisYLabels]="axisYLabels" [axisYSecondaryLabels]="axisYSecondaryLabels" [horizontalLines]="2" [verticalLines]="3" [verticalLinesHandler]="verticalLinesHandler" />
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiAxes, type TuiLineHandler} from '@taiga-ui/addon-charts';

@Component({
    standalone: true,
    imports: [TuiAxes],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly axisXLabels = ['Jan 2019', 'Feb', 'Mar', ''];
    protected readonly axisYLabels = ['', '25%', '50%', '75%', '100%'];
    protected readonly axisYSecondaryLabels = ['80 k', '100 k', '120 k'];
    protected readonly verticalLinesHandler: TuiLineHandler = (index, total) =>
        index === total - 1 ? 'none' : 'dashed';
}
```

#### With bars

**Template:**
```html
<tui-axes axisY="none" class="axes" [axisXLabels]="axisXLabels" [axisYSecondaryLabels]="axisYSecondaryLabels" [horizontalLines]="2" [horizontalLinesHandler]="horizontalLinesHandler" [verticalLines]="4" [verticalLinesHandler]="verticalLinesHandler" >
<tui-bar-chart class="chart" [max]="maxValue" [tuiHintContent]="hint" [value]="value" />
</tui-axes>
<ng-template #hint let-setIndex >
<p *ngFor="let item of value; let index = index" class="hint" >
<span class="dot" [style.background]="'var(--tui-chart-categorical-' + index.toString().padStart(2, '0') + ')'" ></span>
<span class="name">{{ getSetName(index) }}</span>
<span>{{ (item[setIndex] || 0) * 1000 | tuiAmount: 'RUB' | async }}</span>
</p>
</ng-template>
```
**TypeScript:**
```ts
import {AsyncPipe, NgForOf} from '@angular/common';
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {
    TUI_ALWAYS_DASHED,
    TUI_ALWAYS_NONE,
    TuiAxes,
    TuiBarChart,
} from '@taiga-ui/addon-charts';
import {TuiAmountPipe} from '@taiga-ui/addon-commerce';
import {tuiCeil, tuiPure} from '@taiga-ui/cdk';
import {TuiHint} from '@taiga-ui/core';

const BENJI = 100;

@Component({
    standalone: true,
    imports: [AsyncPipe, NgForOf, TuiAmountPipe, TuiAxes, TuiBarChart, TuiHint],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    private readonly setNames = ['cdk', 'core', 'kit', 'charts'];

    protected readonly value: ReadonlyArray<[number, number, number, number]> = [
        [10, 20, 3, 7],
        [15, 18, 24, 1],
        [34, 23, 12, 9],
        [30, 14, 18, 14],
    ];

    protected readonly maxValue = 40;

    protected readonly axisYSecondaryLabels = [
        '',
        `${this.getMax(this.value) / 2} k`,
        `${this.getMax(this.value)} k`,
    ];

    protected readonly axisXLabels = ['Q1', 'Q2', 'Q3', 'Q4'];

    protected readonly horizontalLinesHandler = TUI_ALWAYS_DASHED;

    protected readonly verticalLinesHandler = TUI_ALWAYS_NONE;

    protected getPercent(set: [number, number, number, number]): number {
        return (BENJI * Math.max(...set)) / this.getMax(this.value);
    }

    protected getSetName(index: number): string {
        return this.setNames[index] ?? '';
    }

    @tuiPure
    private getMax(value: ReadonlyArray<[number, number, number, number]>): number {
        return tuiCeil(
            value.reduce((max, value) => Math.max(...value, max), 0),
            -1,
        );
    }
}
```

#### With horizontal bars

**Template:**
```html
<tui-axes class="axes" [axisXLabels]="axisXLabels" [verticalLines]="4" >
<div class="t-horizontal-bars">
<tui-bar *ngFor="let bar of value; let i = index" size="m" [style.background-color]="'var(--tui-chart-categorical-' + i.toString().padStart(2, '0') + ')'" [style.height.%]="getHeight(bar)" />
</div>
</tui-axes>
```
**TypeScript:**
```ts
import {NgForOf} from '@angular/common';
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiAxes, TuiBar} from '@taiga-ui/addon-charts';

@Component({
    standalone: true,
    imports: [NgForOf, TuiAxes, TuiBar],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly axisXLabels = ['0', '25', '50', '75', '100'];
    protected readonly value = [50, 24, 36, 95];
    protected readonly largest = 100;

    protected getHeight(value: number): number {
        return Math.abs((value * 100) / this.largest);
    }
}
```


### TypeScript

```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {TuiDemo} from '@demo/utils';
import {
    TUI_ALWAYS_DASHED,
    TUI_ALWAYS_SOLID,
    TuiAxes,
    type TuiLineHandler,
    type TuiLineType,
} from '@taiga-ui/addon-charts';

@Component({
    standalone: true,
    imports: [TuiAxes, TuiDemo],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    changeDetection,
})
export default class Page {
    protected readonly examples = ['Cool one', 'With bars', 'With horizontal bars'];

    protected readonly lineVariants: readonly TuiLineType[] = [
        'solid',
        'dashed',
        'none',
        'hidden',
    ];

    protected readonly labelsXVariants: ReadonlyArray<ReadonlyArray<string | null>> = [
        [],
        ['', '25%', '50%', '100%', ''],
        ['One', 'Two', 'Three', ''],
        ['One', null, '', 'Two and a half', 'Three', null, ''],
    ];

    protected readonly labelsYVariants: ReadonlyArray<readonly string[]> = [
        [],
        ['', '25%', '50%', '100%'],
        ['One', 'Two', 'Three'],
        ['One', '', 'Two and a half', 'Three'],
    ];

    protected readonly handlerVariants: readonly TuiLineHandler[] = [
        TUI_ALWAYS_SOLID,
        TUI_ALWAYS_DASHED,
        (index) => (index % 2 ? 'dashed' : 'solid'),
    ];

    protected axisX = this.lineVariants[0]!;

    protected axisXLabels = this.labelsXVariants[0]!;

    protected axisY = this.lineVariants[0]!;

    protected axisYInset = false;

    protected axisYLabels = this.labelsYVariants[0]!;

    protected axisYName = '';

    protected axisYSecondaryInset = false;

    protected axisYSecondaryLabels = this.labelsYVariants[0]!;

    protected axisYSecondaryName = '';

    protected horizontalLines = 0;

    protected horizontalLinesHandler = this.handlerVariants[0]!;

    protected verticalLines = 0;

    protected verticalLinesHandler = this.handlerVariants[1]!;
}
```

### LESS

```less
.axes {
    block-size: 12.5rem;
}
```

---
# components/Badge
- **Package**: `KIT`
- **Type**: components
Component for displaying text, pictures and icons.

### How to Use (Import)

```ts
import {Component} from '@angular/core';
import {TuiBadge} from '@taiga-ui/kit';
// ...

@Component({
  standalone: true,
  imports: [
    // ...
    TuiBadge,
  ],
})
export class Example {}
```

### How to Use (Template)

```html
<tui-badge appearance="primary">{{ value }}</tui-badge>
```

### Example

```html
<p>
<tui-badge *ngIf="contentType === 'with icon'" iconStart="@tui.check" [appearance]="appearance" [size]="size" >
<div tuiFade>Taiga UI</div>
</tui-badge>
<tui-badge *ngIf="contentType === 'text'" [appearance]="appearance" [size]="size" > Taiga UI </tui-badge>
<img *ngIf="contentType === 'image'" alt="market" src="assets/images/avatar.jpg" tuiBadge [appearance]="appearance" [size]="size" />
</p>
```

### API

| Property | Type | Description |
|----------|-----|----------|
| [size] | `TuiSizeL` | Size |
| [appearance] | `TuiStatus` | Appearance |

### Usage Examples

#### Basic

**Template:**
```html
<tui-badge>Default</tui-badge>
<tui-badge appearance="primary">Primary</tui-badge>
<tui-badge appearance="accent">Accent</tui-badge>
<tui-badge appearance="positive" tuiStatus > Success </tui-badge>
<tui-badge appearance="negative" tuiStatus > Error </tui-badge>
<tui-badge appearance="warning" tuiStatus > Warning </tui-badge>
<tui-badge appearance="warning">Warning</tui-badge>
<tui-badge appearance="neutral">Neutral</tui-badge>
<tui-badge appearance="info">Info</tui-badge>
<p>Custom status</p>
<tui-badge tuiStatus="var(--tui-chart-categorical-09)" [style.background]="'var(--tui-chart-categorical-01)'" > Custom </tui-badge>
<p>Use CSS for support colors</p>
<tui-badge *tuiRepeatTimes="let index of 20" [style.background]="'var(--tui-chart-categorical-' + index.toString().padStart(2, '0') + ')'" > Taiga </tui-badge>
<p>Sizes</p>
<tui-badge appearance="positive" size="xl" tuiStatus > Success </tui-badge>
<tui-badge appearance="positive" size="l" tuiStatus > Success </tui-badge>
<tui-badge appearance="positive" size="m" tuiStatus > Success </tui-badge>
<tui-badge appearance="positive" size="s" tuiStatus > Success </tui-badge>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiRepeatTimes} from '@taiga-ui/cdk';
import {TuiBadge, TuiStatus} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [TuiBadge, TuiRepeatTimes, TuiStatus],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {}
```

#### Sizes

**Template:**
```html
<tui-badge appearance="primary" size="xl" > x-large </tui-badge>
<tui-badge appearance="primary" size="l" class="tui-space_left-1" > large </tui-badge>
<tui-badge appearance="primary" size="m" class="tui-space_left-1" > medium </tui-badge>
<tui-badge appearance="primary" size="s" class="tui-space_left-1" > small </tui-badge>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiBadge} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [TuiBadge],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {}
```

#### Content type (mobile platform)

**Template:**
```html
<div tuiPlatform="ios">
<h4 class="tui-space_vertical-1">Value with icon</h4>
<tui-badge appearance="primary" iconStart="@tui.box" size="xl" > x-large </tui-badge>
<tui-badge appearance="primary" iconStart="@tui.box" size="l" class="tui-space_left-1" > large </tui-badge>
<tui-badge appearance="primary" iconStart="@tui.box" size="m" class="tui-space_left-1" > medium </tui-badge>
<tui-badge appearance="primary" iconStart="@tui.box" size="s" class="tui-space_left-1" > small </tui-badge>
</div>
<div tuiPlatform="ios">
<h4 class="tui-space_top-3 tui-space_bottom-1">Icon only</h4>
<tui-icon appearance="accent" icon="@tui.box" size="xl" tuiBadge />
<tui-icon appearance="accent" icon="@tui.box" size="l" tuiBadge class="tui-space_left-1" />
<tui-icon appearance="accent" icon="@tui.box" size="m" tuiBadge class="tui-space_left-1" />
<tui-icon appearance="accent" icon="@tui.box" size="s" tuiBadge class="tui-space_left-1" />
</div>
<div tuiPlatform="ios">
<h4 class="tui-space_top-3 tui-space_bottom-1">Image</h4>
<img alt="market" size="xl" src="assets/images/avatar.jpg" tuiBadge />
<img alt="market" size="l" src="assets/images/avatar.jpg" tuiBadge class="tui-space_left-1" />
<img alt="market" size="m" src="assets/images/avatar.jpg" tuiBadge class="tui-space_left-1" />
<img alt="market" size="s" src="assets/images/avatar.jpg" tuiBadge class="tui-space_left-1" />
</div>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiPlatform} from '@taiga-ui/cdk';
import {TuiIcon} from '@taiga-ui/core';
import {TuiBadge} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [TuiBadge, TuiIcon, TuiPlatform],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {}
```

#### Long value

**Template:**
```html
<tui-badge appearance="primary" size="xl" class="badge" >
<div tuiFade>Very long value in badge</div>
</tui-badge>
<tui-badge appearance="accent" iconStart="@tui.box" size="l" class="badge tui-space_top-3" >
<div class="t-ellipsis">Very long value in badge</div>
</tui-badge>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiBadge, TuiFade} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [TuiBadge, TuiFade],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {}
```

#### Customization

**Template:**
```html
<tui-badge appearance="custom" iconStart="@tui.lock" size="xl" class="custom-1" > 10 000 000 $ </tui-badge>
<tui-badge appearance="custom" size="xl" class="custom-2 tui-space_left-3" > Taiga </tui-badge>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiBadge} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [TuiBadge],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {}
```

#### Options with DI

**Template:**
```html
<tui-badge>10 000 000 $</tui-badge>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiBadge, tuiBadgeOptionsProvider} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [TuiBadge],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
    providers: [tuiBadgeOptionsProvider({appearance: 'primary'})],
})
export default class Example {}
```


### TypeScript

```ts
import {Component} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {TuiDemo} from '@demo/utils';
import {type TuiSizeS, type TuiSizeXL} from '@taiga-ui/core';
import {TuiBadge, TuiFade, TuiRadioList} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [FormsModule, TuiBadge, TuiDemo, TuiFade, TuiRadioList],
    templateUrl: './index.html',
    changeDetection,
})
export default class Page {
    protected readonly appearanceVariants = [
        '',
        'accent',
        'primary',
        'custom',
        'positive',
        'negative',
        'warning',
        'info',
        'neutral',
    ];

    protected appearance = this.appearanceVariants[0]!;

    protected readonly sizeVariants: ReadonlyArray<TuiSizeS | TuiSizeXL> = [
        's',
        'm',
        'l',
        'xl',
    ];

    protected size: TuiSizeS | TuiSizeXL = this.sizeVariants[1]!;

    protected contentTypeVariants = ['text', 'with icon', 'image'];
    protected contentType = this.contentTypeVariants[0]!;
}
```

---
# components/BadgeNotification
- **Package**: `KIT`
- **Type**: components
Simple non-interactive badge. Used in headers, cells, cards, avatars to indicate notifications, such as new
            messages

### How to Use (Import)

```ts
import {Component} from '@angular/core';
import {TuiBadgeNotification} from '@taiga-ui/kit';
// ...

@Component({
  standalone: true,
  imports: [
    // ...
    TuiBadgeNotification,
  ],
})
export class Example {}
```

### How to Use (Template)

```html
<tui-badge-notification>10</tui-badge-notification>
```

### Example

```html
<tui-badge-notification [size]="size">11</tui-badge-notification>
```

### API

| Property | Type | Description |
|----------|-----|----------|
| [size] | `TuiSizeL` | Size |

### Usage Examples

#### Basic

**Template:**
```html
<h4>Desktop</h4>
<p tuiPlatform="web">
<tui-badge-notification size="l">9</tui-badge-notification>
<tui-badge-notification>9</tui-badge-notification>
<tui-badge-notification size="s">9</tui-badge-notification>
<tui-badge-notification size="xs">9</tui-badge-notification>
</p>
<h4>Android</h4>
<p tuiPlatform="android">
<tui-badge-notification size="l">9</tui-badge-notification>
<tui-badge-notification>9</tui-badge-notification>
<tui-badge-notification size="s">9</tui-badge-notification>
<tui-badge-notification size="xs">9</tui-badge-notification>
</p>
<h4>IOS</h4>
<p tuiPlatform="ios">
<tui-badge-notification size="l">9</tui-badge-notification>
<tui-badge-notification>9</tui-badge-notification>
<tui-badge-notification size="s">9</tui-badge-notification>
<tui-badge-notification size="xs">9</tui-badge-notification>
</p>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiPlatform} from '@taiga-ui/cdk';
import {TuiBadgeNotification} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [TuiBadgeNotification, TuiPlatform],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {}
```

#### Custom color

**Template:**
```html
<tui-badge-notification size="l">10</tui-badge-notification>
<tui-badge-notification>11</tui-badge-notification>
<tui-badge-notification size="s">12</tui-badge-notification>
<tui-badge-notification size="xs" />
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiBadgeNotification} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [TuiBadgeNotification],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {}
```


### TypeScript

```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {TuiDemo} from '@demo/utils';
import {TuiLabel, type TuiSizeL, type TuiSizeXS} from '@taiga-ui/core';
import {TuiBadgeNotification} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [TuiBadgeNotification, TuiDemo, TuiLabel],
    templateUrl: './index.html',
    changeDetection,
})
export default class Example {
    protected readonly sizeVariants: ReadonlyArray<TuiSizeL | TuiSizeXS> = [
        'l',
        'm',
        's',
        'xs',
    ];

    protected size: TuiSizeL | TuiSizeXS = this.sizeVariants[0]!;
}
```

---
# components/BadgedContent
- **Package**: `KIT`
- **Type**: components
BadgedContent is a wrapper for other components to add badges and notifications to them.

### How to Use (Import)

```ts
import {Component} from '@angular/core';
import {TuiBadgedContent} from '@taiga-ui/kit';
// ...

@Component({
  standalone: true,
  imports: [
    // ...
    TuiBadgedContent,
  ],
})
export class Example {}
```

### How to Use (Template)

```html
<tui-badged-content>
  <tui-badge-notification tuiSlot="top">1</tui-badge-notification>
  <tui-avatar src="@tui.user"></tui-avatar>
  <tui-badge-notification tuiSlot="bottom">1</tui-badge-notification>
</tui-badged-content>
```

### Example

```html
<tui-badged-content [style.--tui-radius]="radius">
<tui-badge-notification tuiSlot="top">1</tui-badge-notification>
<tui-avatar size="l" [round]="radius === '50%'" [src]="'https://avatars.githubusercontent.com/u/11832552' | tuiFallbackSrc: '@tui.user' | async" />
</tui-badged-content>
```

### API

| Property | Type | Description |
|----------|-----|----------|
| style.--t-radius | `string` | Border radius |

### Usage Examples

#### Basic

**Template:**
```html
<tui-badged-content>
<tui-badge-notification size="s" tuiSlot="top" > 99 </tui-badge-notification>
<tui-avatar size="s" src="@tui.user" [round]="false" />
</tui-badged-content>
<tui-badged-content>
<tui-avatar size="m" src="@tui.user" [round]="false" />
<tui-badge-notification size="m" tuiSlot="bottom" > 120 </tui-badge-notification>
</tui-badged-content>
<tui-badged-content>
<tui-icon appearance="primary" icon="@tui.star" size="l" tuiBadge tuiSlot="top" />
<tui-avatar size="l" src="@tui.user" [round]="false" />
</tui-badged-content>
<tui-badged-content>
<tui-badge-notification size="l" tuiSlot="top" > 99 </tui-badge-notification>
<tui-avatar size="xl" src="@tui.user" [round]="false" />
<tui-icon appearance="accent" icon="@tui.star" size="l" tuiBadge tuiSlot="bottom" />
</tui-badged-content>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiIcon} from '@taiga-ui/core';
import {TuiAvatar, TuiBadge, TuiBadgedContent, TuiBadgeNotification} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [TuiAvatar, TuiBadge, TuiBadgedContent, TuiBadgeNotification, TuiIcon],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {}
```

#### Rounded content

**Template:**
```html
<tui-badged-content [style.--tui-radius.%]="50">
<tui-badge-notification size="s" tuiSlot="top" > 8 </tui-badge-notification>
<tui-avatar size="s" src="@tui.user" />
</tui-badged-content>
<tui-badged-content [style.--tui-radius.%]="50">
<tui-icon appearance="accent" icon="@tui.star" size="m" tuiBadge tuiSlot="bottom" />
<tui-avatar size="m" src="@tui.user" />
</tui-badged-content>
<tui-badged-content [style.--tui-radius.%]="50">
<tui-badge appearance="accent" size="l" tuiSlot="top" > Taiga </tui-badge>
<tui-avatar size="l" src="@tui.user" />
</tui-badged-content>
<tui-badged-content [style.--tui-radius.%]="50">
<tui-badge-notification size="l" tuiSlot="top" > 99 </tui-badge-notification>
<tui-avatar size="xl" src="@tui.user" />
</tui-badged-content>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiIcon} from '@taiga-ui/core';
import {TuiAvatar, TuiBadge, TuiBadgedContent, TuiBadgeNotification} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [TuiAvatar, TuiBadge, TuiBadgedContent, TuiBadgeNotification, TuiIcon],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {}
```

#### With different components

**Template:**
```html
<tui-badged-content>
<tui-badge-notification size="xs" tuiSlot="top" />
<tui-input class="input">Input text</tui-input>
</tui-badged-content>
<tui-badged-content>
<tui-icon appearance="accent" icon="@tui.check" size="s" tuiBadge tuiSlot="bottom" />
<button tuiButton type="button" > Button </button>
</tui-badged-content>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiButton, TuiIcon} from '@taiga-ui/core';
import {TuiBadge, TuiBadgedContent, TuiBadgeNotification} from '@taiga-ui/kit';
import {TuiInputModule} from '@taiga-ui/legacy';

@Component({
    standalone: true,
    imports: [
        TuiBadge,
        TuiBadgedContent,
        TuiBadgeNotification,
        TuiButton,
        TuiIcon,
        TuiInputModule,
    ],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {}
```

#### With image

**Template:**
```html
<tui-badged-content>
<img alt="icon" src="assets/images/angular.svg" tuiSlot="top" width="24" />
<tui-avatar src="@tui.user" [round]="false" />
</tui-badged-content>
<tui-badged-content>
<img alt="icon" src="assets/images/angular.svg" tuiSlot="bottom" width="24" />
<tui-avatar src="@tui.user" [round]="false" />
</tui-badged-content>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiAvatar, TuiBadgedContent} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [TuiAvatar, TuiBadgedContent],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {}
```


### TypeScript

```ts
import {AsyncPipe} from '@angular/common';
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {TuiDemo} from '@demo/utils';
import {TuiFallbackSrcPipe} from '@taiga-ui/core';
import {TuiAvatar, TuiBadgedContent, TuiBadgeNotification} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [
        AsyncPipe,
        TuiAvatar,
        TuiBadgedContent,
        TuiBadgeNotification,
        TuiDemo,
        TuiFallbackSrcPipe,
    ],
    templateUrl: './index.html',
    changeDetection,
})
export default class Example {
    protected radiusVariants = ['0.75rem', '50%'];
    protected radius = this.radiusVariants[0]!;

    protected readonly examples = [
        'Basic',
        'Rounded content',
        'With different components',
        'With image',
    ];
}
```

---
# components/Bar
- **Package**: `ADDON-CHARTS`
- **Type**: components
A bar for bar chart

### How to Use (Import)

```ts
import {TuiBar} from '@taiga-ui/addon-charts';

// ...

@Component({
  standalone: true,
  imports: [
    // ...
    TuiBar,
  ],
  // ...
})
export class Example {}
```

### How to Use (Template)

```html
<tui-bar [value]="value"></tui-bar>
```

### Example

```html
<tui-bar class="bar" [size]="size" [value]="value" />
```

### API

| Property | Type | Description |
|----------|-----|----------|
| [size] | `TuiSizeS | TuiSizeL` | Size |
| [value] | `readonly number[]` | An array of segments |

### Usage Examples

#### Basic

**Template:**
```html
<tui-bar class="bar" />
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiBar} from '@taiga-ui/addon-charts';

@Component({
    standalone: true,
    imports: [TuiBar],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {}
```

#### Segments

**Template:**
```html
<tui-bar size="s" class="bar" [value]="value" />
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiBar} from '@taiga-ui/addon-charts';

@Component({
    standalone: true,
    imports: [TuiBar],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly value = [30, 15, 10];
}
```


### TypeScript

```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {TuiDemo} from '@demo/utils';
import {TuiBar} from '@taiga-ui/addon-charts';
import {type TuiSizeL, type TuiSizeS} from '@taiga-ui/core';

@Component({
    standalone: true,
    imports: [TuiBar, TuiDemo],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    changeDetection,
})
export default class Page {
    protected readonly examples = ['Basic', 'Segments'];

    protected readonly sizeVariants: ReadonlyArray<TuiSizeL | TuiSizeS> = ['s', 'm', 'l'];

    protected size = this.sizeVariants[1]!;

    protected readonly valueVariants = [
        [30, 20, 10],
        [237, 50, 10, 5, 1],
    ];

    protected value = this.valueVariants[0]!;
}
```

### LESS

```less
.bar {
    block-size: 6.25rem;
}
```

---
# components/BarChart
- **Package**: `ADDON-CHARTS`
- **Type**: components
Bar chart that can be used as a content to
            
                axes
            
            .

### How to Use (Import)

```ts
import {TuiBarChart} from '@taiga-ui/addon-charts';

//...

@Component({
  standalone: true,
  imports: [
    //  ...
    TuiBarChart,
  ],
  //...
})
export class Example {}
```

### How to Use (Template)

```html
<tui-bar-chart [value]="value"></tui-bar-chart>
```

### Example

```html
<tui-bar-chart class="chart" [collapsed]="collapsed" [max]="max" [size]="size" [value]="value" (tapColumn)="documentationPropertyTapColumn.emitEvent($event)" />
```

### API

| Property | Type | Description |
|----------|-----|----------|
| [collapsed] | `boolean` | Shows data set in a single bar |
| [max] | `number` | Sets chart max manually |
| [size] | `TuiSizeS | TuiSizeL | null` | for autosize) |
| [value] | `ReadonlyArray<readonly number[]>` | Array of segments |
| (tapColumn) | `number` | Bar column click/enter event |

### Usage Examples

#### With axes

**Template:**
```html
<tui-axes class="axes" [axisXLabels]="labelsX" [axisYLabels]="labelsY" >
<tui-bar-chart [max]="10000" [value]="value" />
</tui-axes>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiAxes, TuiBarChart} from '@taiga-ui/addon-charts';
import {tuiCeil} from '@taiga-ui/cdk';

@Component({
    standalone: true,
    imports: [TuiAxes, TuiBarChart],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly value = [
        [3660, 8281, 1069, 9034, 5797, 6918, 8495, 3234, 6204, 1392, 2088, 8637, 8779],
        [3952, 3671, 3781, 5323, 3537, 4107, 2962, 3320, 8632, 4755, 9130, 1195, 3574],
    ];

    protected readonly labelsX = ['Jan 2019', 'Feb', 'Mar', ''];
    protected readonly labelsY = ['0', '10 000'];

    protected getHeight(max: number): number {
        return (max / tuiCeil(max, -3)) * 100;
    }
}
```

#### Same values with collapsed mode

**Template:**
```html
<div class="flex">
<tui-axes class="axes" [axisXLabels]="labelsX" [axisYLabels]="labelsY" >
<tui-bar-chart [max]="10000" [tuiHintAppearance]="appearance" [tuiHintContent]="hint" [value]="value" />
</tui-axes>
<tui-axes class="axes" [axisXLabels]="labelsX" [axisYLabels]="labelsY" >
<tui-bar-chart [collapsed]="true" [max]="10000" [tuiHintAppearance]="appearance" [tuiHintContent]="hint" [value]="value" />
</tui-axes>
</div>
<tui-textfield tuiChevron class="select" >
<label tuiLabel>Hint appearance</label>
<input tuiSelect [(ngModel)]="appearance" />
<tui-data-list-wrapper *tuiTextfieldDropdown new [items]="appearances" />
</tui-textfield>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiAxes, TuiBarChart} from '@taiga-ui/addon-charts';
import {type TuiContext} from '@taiga-ui/cdk';
import {tuiFormatNumber, TuiHint, TuiTextfield} from '@taiga-ui/core';
import {TuiChevron, TuiDataListWrapper, TuiSelect} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [
        FormsModule,
        TuiAxes,
        TuiBarChart,
        TuiChevron,
        TuiDataListWrapper,
        TuiHint,
        TuiSelect,
        TuiTextfield,
    ],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly value = [
        [1000, 8000, 4000, 3000, 4000],
        [6000, 2000, 4500, 7000, 5000],
    ];

    protected readonly labelsX = ['Jan 2021', 'Feb', 'Mar', ''];
    protected readonly labelsY = ['0', '10 000'];
    protected readonly appearances = ['dark', 'error'];

    protected appearance = this.appearances[0]!;

    protected readonly hint = ({$implicit}: TuiContext<number>): string =>
        this.value
            .reduce(
                (result, set) => `${result}$${tuiFormatNumber(set[$implicit] ?? 0)}\n`,
                '',
            )
            .trim();
}
```


### TypeScript

```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {DemoRoute} from '@demo/routes';
import {TuiDemo} from '@demo/utils';
import {TuiBarChart} from '@taiga-ui/addon-charts';
import {type TuiSizeL, type TuiSizeS} from '@taiga-ui/core';

@Component({
    standalone: true,
    imports: [TuiBarChart, TuiDemo],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    changeDetection,
})
export default class Page {
    protected collapsed = false;

    protected readonly sizeVariants: ReadonlyArray<TuiSizeL | TuiSizeS> = ['s', 'm', 'l'];

    protected size: TuiSizeL | TuiSizeS | null = null;

    protected max = 0;

    protected readonly valueVariants = [
        [
            [30000, 20500, 12345],
            [12422, 16124, 22424],
        ],
        [
            [30, 65, 30, 80, 54],
            [98, 48, 33, 25, 11],
            [55, 10, 27, 36, 73],
        ],
    ];

    protected value = this.valueVariants[0]!;
    protected readonly routes = DemoRoute;
}
```

### LESS

```less
.chart {
    block-size: 12.5rem;
}
```

---
# components/BarSet
- **Package**: `ADDON-CHARTS`
- **Type**: components
A group of bars for bar chart

### How to Use (Import)

```ts
import {TuiBarSet} from '@taiga-ui/addon-charts';

// ...

@Component({
  standalone: true,
  imports: [
    // ...
    TuiBarSet,
  ],
})
// ...
export class Example {}
```

### How to Use (Template)

```html
<tui-bar-set [value]="value"></tui-bar>
```

### Example

```html
<tui-bar-set class="bars" [collapsed]="collapsed" [size]="size" [value]="value" />
```

### API

| Property | Type | Description |
|----------|-----|----------|
| [collapsed] | `boolean` | Shows data set in a single bar |
| [size] | `TuiSizeS | TuiSizeL | null` | for autosize) |
| [value] | `readonly number[]` | Array of segments |

### Usage Examples

#### Dynamic size

**Template:**
```html
<tui-bar-set class="bars" [size]="null" [value]="value" />
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiBarSet} from '@taiga-ui/addon-charts';

@Component({
    standalone: true,
    imports: [TuiBarSet],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly value = [30, 15, 10];
}
```

#### Fixed size

**Template:**
```html
<tui-bar-set size="m" class="bars" [value]="value" />
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiBarSet} from '@taiga-ui/addon-charts';

@Component({
    standalone: true,
    imports: [TuiBarSet],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly value = [30, 15, 10];
}
```

#### With negative values

**Template:**
```html
<tui-bar-set class="bars" [value]="value" />
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiBarSet} from '@taiga-ui/addon-charts';

@Component({
    standalone: true,
    imports: [TuiBarSet],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly value = [30, -15];
}
```

#### Horizontal

**Template:**
```html
<div class="wrapper">
<tui-bar-set class="bars" [value]="value" />
</div>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiBarSet} from '@taiga-ui/addon-charts';

@Component({
    standalone: true,
    imports: [TuiBarSet],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly value = [30, 45, 12, 6, 20];
}
```

#### With value label

**Template:**
```html
<tui-bar-set class="bars" [collapsed]="true" [value]="value" > {{ sum | tuiFormatNumber | async }} </tui-bar-set>
```
**TypeScript:**
```ts
import {AsyncPipe} from '@angular/common';
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiBarSet} from '@taiga-ui/addon-charts';
import {TuiFormatNumberPipe} from '@taiga-ui/core';

@Component({
    standalone: true,
    imports: [AsyncPipe, TuiBarSet, TuiFormatNumberPipe],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly value = [451, 302, 203, 124, 65];
    protected readonly sum = this.value.reduce((a, b) => a + b, 0);
}
```


### TypeScript

```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {TuiDemo} from '@demo/utils';
import {TuiBarSet} from '@taiga-ui/addon-charts';
import {type TuiSizeL, type TuiSizeS} from '@taiga-ui/core';

@Component({
    standalone: true,
    imports: [TuiBarSet, TuiDemo],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    changeDetection,
})
export default class Page {
    protected readonly examples = [
        'Dynamic size',
        'Fixed size',
        'With negative values',
        'Horizontal',
        'With value label',
    ];

    protected collapsed = false;

    protected readonly sizeVariants: ReadonlyArray<TuiSizeL | TuiSizeS> = ['s', 'm', 'l'];

    protected size: TuiSizeL | TuiSizeS | null = null;

    protected readonly valueVariants = [
        [30, 20, 10],
        [237, -50, 10, 5, 1],
    ];

    protected value = this.valueVariants[0]!;
}
```

### LESS

```less
.bars {
    block-size: 10rem;
    inline-size: 6.25rem;
    box-shadow: 0 1px var(--tui-border-normal);
}
```

---
# components/Block
- **Package**: `KIT`
- **Type**: components
Block
            is a special presentation of a checkbox/radiobutton which can display actual control or be a control itself

### How to Use (Import)

```ts
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import {TuiBlock, TuiCheckbox} from '@taiga-ui/kit';

// ...

@Component({
  standalone: true,
  imports: [
    // ...
    FormsModule,
    TuiBlock,
    TuiCheckbox, // or TuiRadio
  ],
  // ...
})
export class Example {}
```

### How to Use (Template)

```html
<!-- Visible checkbox -->
<label tuiBlock>
  <input
    type="checkbox"
    tuiCheckbox
    [(ngModel)]="value"
  />
  I'm a label
</label>

<!-- Implicit checkbox -->
<label tuiBlock>
  <input
    type="checkbox"
    tuiBlock
    [(ngModel)]="value"
  />
  I'm a label
</label>
```

### Example

```html
<label [appearance]="appearance.appearance" [iconEnd]="icons.iconEnd" [iconStart]="icons.iconStart" [tuiAppearanceFocus]="appearance.focus" [tuiAppearanceMode]="appearance.mode" [tuiAppearanceState]="appearance.state" [tuiBlock]="size" >
<span tuiTitle> tuiTitle <span tuiSubtitle>tuiSubtitle</span>
</span>
<input tuiSwitch type="checkbox" [(ngModel)]="value" />
</label>
```

### API

| Property | Type | Description |
|----------|-----|----------|
| [tuiBlock] | `TuiSizeL | TuiSizeS` | Size of the block |

### Usage Examples

#### Sizes

**Template:**
```html
<form [formGroup]="testForm">
<label tuiBlock="s"> Qiwi <input formControlName="testValue2" size="s" tuiCheckbox type="checkbox" />
</label>
<label tuiBlock="m"> Oranges <input formControlName="testValue3" size="s" tuiCheckbox type="checkbox" />
</label>
<label tuiBlock> Watermelons <input formControlName="testValue4" tuiCheckbox type="checkbox" />
</label>
</form>
<form [formGroup]="testForm">
<label tuiBlock="s">
<input formControlName="testValue5" size="s" tuiRadio type="radio" value="qiwi" />
<span tuiTitle>
<span> Qiwi <tui-icon tuiTooltip="Not the bird" />
</span>
<span tuiSubtitle>Green and sour</span>
</span>
</label>
<label tuiBlock="m">
<input formControlName="testValue5" size="s" tuiRadio type="radio" value="oranges" />
<span tuiTitle>
<span> Oranges <tui-icon tuiTooltip="Famously don't rhyme with things" />
</span>
<span tuiSubtitle>Best for fresh squeeze</span>
</span>
</label>
<label tuiBlock>
<input formControlName="testValue5" tuiRadio type="radio" value="watermelons" />
<span tuiTitle>
<span> Watermelons <tui-icon tuiTooltip="Preferably seedless" />
</span>
<span tuiSubtitle>Cool and refreshing</span>
</span>
</label>
</form>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {FormControl, FormGroup, ReactiveFormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiIcon, TuiTitle} from '@taiga-ui/core';
import {TuiBlock, TuiCheckbox, TuiRadio, TuiTooltip} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [
        ReactiveFormsModule,
        TuiBlock,
        TuiCheckbox,
        TuiIcon,
        TuiRadio,
        TuiTitle,
        TuiTooltip,
    ],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly testForm = new FormGroup({
        testValue1: new FormControl(true),
        testValue2: new FormControl({value: false, disabled: true}),
        testValue3: new FormControl({value: true, disabled: true}),
        testValue4: new FormControl(false),
        testValue5: new FormControl(),
    });
}
```

#### Groups

**Template:**
```html
<h3 class="title">Horizontal group</h3>
<form tuiGroup class="group" [collapsed]="true" [formGroup]="testForm" >
<label tuiBlock>
<input formControlName="testValue" tuiRadio type="radio" value="oranges" /> Oranges </label>
<label tuiBlock>
<input formControlName="testValue" tuiRadio type="radio" value="apples" /> Apples </label>
<label tuiBlock>
<input formControlName="testValue" tuiRadio type="radio" value="pineapples" />
<span tuiFade>Pineapples</span>
</label>
</form>
<h3 class="title">Vertical group</h3>
<form orientation="vertical" tuiGroup class="group" [collapsed]="true" [formGroup]="testForm" >
<label tuiBlock>
<input formControlName="testValue" tuiRadio type="radio" value="oranges" /> Oranges </label>
<label tuiBlock>
<input formControlName="testValue" tuiRadio type="radio" value="apples" /> Apples </label>
<label tuiBlock>
<input formControlName="testValue" tuiRadio type="radio" value="pineapples" /> Pineapples </label>
</form>
<h3 class="title">Without checkbox indicators</h3>
<form tuiGroup class="group" [collapsed]="true" [formGroup]="testForm" >
<label appearance="" tuiBlock >
<input formControlName="testValue" tuiBlock type="radio" value="oranges" /> Oranges </label>
<label appearance="" tuiBlock >
<input formControlName="testValue" tuiBlock type="radio" value="apples" /> Apples </label>
<label appearance="" tuiBlock >
<input formControlName="testValue" tuiBlock type="radio" value="pineapples" /> Pineapples </label>
</form>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {FormControl, FormGroup, ReactiveFormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiGroup} from '@taiga-ui/core';
import {TuiBlock, TuiFade, TuiRadio} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [ReactiveFormsModule, TuiBlock, TuiFade, TuiGroup, TuiRadio],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly testForm = new FormGroup({
        testValue: new FormControl('orange'),
    });
}
```

#### Custom

**Template:**
```html
<form [formGroup]="testForm">
<label tuiBlock>
<tui-avatar src="https://avatars.githubusercontent.com/u/11832552" /> Heading <input formControlName="testValue1" tuiCheckbox type="checkbox" />
</label>
<label appearance="" tuiBlock >
<tui-avatar src="https://avatars.githubusercontent.com/u/11832552" />
<span tuiTitle [style.margin-block.rem]="-0.5" >
<span tuiSubtitle>Taiga UI</span> Alex Inkin </span>
<tui-icon icon="@tui.heart" />
<input formControlName="testValue2" tuiBlock type="checkbox" />
</label>
<label appearance="secondary" tuiBlock >
<span tuiTitle> Heading <span tuiSubtitle> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi atque incidunt itaque iusto natus quaerat quia similique veniam? </span>
</span>
<input formControlName="testValue3" tuiSwitch type="checkbox" />
</label>
<label tuiBlock="m" [style.align-self]="'stretch'" >
<input formControlName="testValue3" size="s" tuiSwitch type="checkbox" /> Enable <tui-icon tuiTooltip="Enabling this will cause trouble" [style.margin-left]="'auto'" />
</label>
</form>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {FormControl, FormGroup, ReactiveFormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiIcon, TuiTitle} from '@taiga-ui/core';
import {TuiAvatar, TuiBlock, TuiCheckbox, TuiSwitch, TuiTooltip} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [
        ReactiveFormsModule,
        TuiAvatar,
        TuiBlock,
        TuiCheckbox,
        TuiIcon,
        TuiSwitch,
        TuiTitle,
        TuiTooltip,
    ],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly testForm = new FormGroup({
        testValue1: new FormControl(false),
        testValue2: new FormControl(false),
        testValue3: new FormControl(false),
        testValue4: new FormControl(false),
    });
}
```


### TypeScript

```ts
import {Component} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {TuiDocAppearance} from '@demo/components/appearance';
import {TuiDocIcons} from '@demo/components/icons';
import {changeDetection} from '@demo/emulate/change-detection';
import {TuiDemo} from '@demo/utils';
import {type TuiSizeL, type TuiSizeS, TuiTitle} from '@taiga-ui/core';
import {TuiBlock, TuiSwitch} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [
        FormsModule,
        TuiBlock,
        TuiDemo,
        TuiDocAppearance,
        TuiDocIcons,
        TuiSwitch,
        TuiTitle,
    ],
    templateUrl: './index.html',
    changeDetection,
})
export default class Example {
    protected readonly examples = ['Sizes', 'Groups', 'Custom'];
    protected readonly sizes: ReadonlyArray<TuiSizeL | TuiSizeS> = ['s', 'm', 'l'];
    protected readonly appearances = ['outline-grayscale', 'secondary'];

    protected value = false;
    protected size = this.sizes[2]!;
}
```

---
# components/BlockDetails
- **Package**: `LAYOUT`
- **Type**: components
Layout directive for describing details. For example, transaction details

### How to Use (Import)

```ts
import {Component} from '@angular/core';
import {TuiBlockDetails} from '@taiga-ui/layout';
// ...

@Component({
  standalone: true,
  imports: [
    // ...
    TuiBlockDetails,
  ],
})
export class Example {}
```

### How to Use (Template)

```html
<div tuiBlockDetails>
  <tui-avatar></tui-avatar>
  <h2 tuiTitle>
    Title
    <div tuiSubtitle>Subtitle</div>
  </h2>

  <span>{{ amount }} | tuiAmount: 'USD' | async }}</span>
  <span tuiAmountDescription>description</span>
  <span tuiComment>comment</span>
  <tui-badge appearance="neutral">Badge</tui-badge>
</div>
```

### Usage Examples

#### Full

**Template:**
```html
<div tuiBlockDetails>
<tui-avatar src="JW" [size]="isMobile ? 'xl' : 'xxl'" />
<h2 tuiTitle> John W <div tuiSubtitle>money transfers</div>
</h2>
<span>{{ -1050 | tuiAmount: 'USD' | async }}</span>
<span tuiSubtitle>today</span>
<span tuiSubtitle>extra subtitle</span>
<span tuiComment>Birthday gift</span>
<div tuiAccessories>
<tui-badge appearance="neutral">private</tui-badge>
<tui-badge appearance="default">fast</tui-badge>
</div>
<div tuiDetailsStatus>
<tui-icon icon="@tui.clock" [style.font-size.rem]="1" /> Pending </div>
</div>
```
**TypeScript:**
```ts
import {AsyncPipe} from '@angular/common';
import {Component, inject} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiAmountPipe} from '@taiga-ui/addon-commerce';
import {TUI_IS_MOBILE} from '@taiga-ui/cdk';
import {TuiIcon, TuiTitle} from '@taiga-ui/core';
import {TuiAvatar, TuiBadge, TuiComment} from '@taiga-ui/kit';
import {TuiBlockDetails} from '@taiga-ui/layout';

@Component({
    standalone: true,
    imports: [
        AsyncPipe,
        TuiAmountPipe,
        TuiAvatar,
        TuiBadge,
        TuiBlockDetails,
        TuiComment,
        TuiIcon,
        TuiTitle,
    ],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly isMobile = inject(TUI_IS_MOBILE);
}
```

#### Customization

**Template:**
```html
<div tuiBlockDetails>
<tui-avatar src="@tui.gift" [size]="isMobile ? 'xl' : 'xxl'" />
<h2 tuiTitle> Auchan <div tuiSubtitle>grocery &#x2022; MMC 5350</div>
</h2>
<span [style.color]="'var(--tui-text-positive)'">{{ 0.5 | tuiAmount: 'USD' | async }}</span>
<span tuiFade tuiSubtitle > promotion (long value with fade) </span>
<tui-badge appearance="neutral">cashback</tui-badge>
</div>
<div tuiBlockDetails>
<tui-avatar src="@tui.star" [size]="isMobile ? 'xl' : 'xxl'" />
<h2 tuiTitle> Uber <div tuiSubtitle>taxi &#x2022; MMC 5550</div>
</h2>
<span [style.color]="'var(--tui-text-negative)'">{{ -10.5 | tuiAmount: 'USD' | async }}</span>
</div>
```
**TypeScript:**
```ts
import {AsyncPipe} from '@angular/common';
import {Component, inject} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {tuiAmountOptionsProvider, TuiAmountPipe} from '@taiga-ui/addon-commerce';
import {TUI_IS_MOBILE} from '@taiga-ui/cdk';
import {TuiTitle} from '@taiga-ui/core';
import {TuiAvatar, TuiBadge, TuiFade} from '@taiga-ui/kit';
import {TuiBlockDetails} from '@taiga-ui/layout';

@Component({
    standalone: true,
    imports: [
        AsyncPipe,
        TuiAmountPipe,
        TuiAvatar,
        TuiBadge,
        TuiBlockDetails,
        TuiFade,
        TuiTitle,
    ],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
    providers: [tuiAmountOptionsProvider({sign: 'always'})],
})
export default class Example {
    protected readonly isMobile = inject(TUI_IS_MOBILE);
}
```


### TypeScript

```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {TuiDemo} from '@demo/utils';

@Component({
    standalone: true,
    imports: [TuiDemo],
    templateUrl: './index.html',
    changeDetection,
})
export default class Page {}
```

---
# components/BlockStatus
- **Package**: `LAYOUT`
- **Type**: components
Component for status screens, result screens and zero screens

### How to Use (Import)

```ts
import {TuiBlockStatus} from '@taiga-ui/layout';

// ...

@Component({
  standalone: true,
  imports: [
    // ...
    TuiBlockStatus,
  ],
  // ...
})
export class Example {}
```

### How to Use (Template)

```html
<tui-block-status [card]="card">
  <img
    tuiSlot="top"
    src="src"
  />
  <h4>Title</h4>
  Description
  <button
    tuiButton
    tuiItem
  >
    Button
  </button>
</tui-block-status>
```

### Example

```html
<tui-block-status [card]="card" [size]="size" >
<img alt="hidden content" src="assets/images/camping.svg" tuiSlot="top" />
<h4>Title</h4> Description <button appearance="secondary" tuiButton type="button" > Action </button>
</tui-block-status>
```

### API

| Property | Type | Description |
|----------|-----|----------|
| [card] | `boolean` | Enable border radius and padding for card view |
| [size] | `TuiSizeL` | Size (for desktop only) |

### Usage Examples

#### Basic

**Template:**
```html
<tui-block-status>
<img alt="not found" src="assets/images/not-found.svg" tuiSlot="top" class="image" />
<h4>Not found</h4> Try to find by number </tui-block-status>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiBlockStatus} from '@taiga-ui/layout';

@Component({
    standalone: true,
    imports: [TuiBlockStatus],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {}
```

#### With actions

**Template:**
```html
<tui-block-status *ngIf="size$ | async as size">
<img alt="survived" src="assets/images/going-up.svg" tuiSlot="top" />
<h4>Something has been achieved</h4>
<span class="text"> You can do something with it, or you can not do it. And the description text can be quite long. </span>
<button appearance="secondary" tuiButton type="button" [size]="size" > Do </button>
<button appearance="flat-grayscale" tuiButton type="button" [size]="size" > Not to do </button>
</tui-block-status>
```
**TypeScript:**
```ts
import {AsyncPipe, NgIf} from '@angular/common';
import {Component, inject} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiBreakpointService, TuiButton, type TuiSizeL} from '@taiga-ui/core';
import {TuiBlockStatus} from '@taiga-ui/layout';
import {map, type Observable} from 'rxjs';

@Component({
    standalone: true,
    imports: [AsyncPipe, NgIf, TuiBlockStatus, TuiButton],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly breakpointService = inject(TuiBreakpointService);

    protected size$: Observable<TuiSizeL> = this.breakpointService.pipe(
        map((key) => (key === 'mobile' ? 'm' : 'l')),
    );
}
```

#### Cards

**Template:**
```html
<div *ngIf="size$ | async as size" class="container" >
<tui-block-status class="card" [card]="true" >
<img alt="hidden content" src="assets/images/camping.svg" tuiSlot="top" class="image" /> We hide the unwanted block <button appearance="secondary" tuiButton type="button" [size]="size" > Return </button>
</tui-block-status>
<tui-block-status class="card" [card]="true" >
<img alt="something wrong" src="assets/images/cancel.svg" tuiSlot="top" class="image" /> Something happened in this block <button appearance="secondary" tuiButton type="button" [size]="size" > Try again </button>
</tui-block-status>
</div>
```
**TypeScript:**
```ts
import {AsyncPipe, NgIf} from '@angular/common';
import {Component, inject} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiBreakpointService, TuiButton, type TuiSizeL} from '@taiga-ui/core';
import {TuiBlockStatus} from '@taiga-ui/layout';
import {map, type Observable} from 'rxjs';

@Component({
    standalone: true,
    imports: [AsyncPipe, NgIf, TuiBlockStatus, TuiButton],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly breakpointService = inject(TuiBreakpointService);

    protected size$: Observable<TuiSizeL> = this.breakpointService.pipe(
        map((key) => (key === 'mobile' ? 'm' : 'l')),
    );
}
```

#### Customization

**Template:**
```html
<div class="container">
<tui-block-status class="card" [card]="true" >
<tui-avatar-stack tuiSlot="top">
<tui-avatar *ngFor="let user of users" size="l" [src]="user | tuiInitials" [style.background]="user | tuiAutoColor" />
</tui-avatar-stack> You can put other content instead of image using <code>tui-block-content</code> css class <button appearance="primary" size="s" tuiButton type="button" [style.border-radius.rem]="100" > Got it </button>
</tui-block-status>
<tui-block-status [card]="true" [class.card]="true" >
<img alt="Alex Inkin" src="assets/images/avatar.jpg" tuiSlot="top" class="avatar" />
<h1>Alex Inkin</h1>
</tui-block-status>
</div>
```
**TypeScript:**
```ts
import {NgFor} from '@angular/common';
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiAutoColorPipe, TuiButton, TuiInitialsPipe} from '@taiga-ui/core';
import {TuiAvatar, TuiAvatarStack} from '@taiga-ui/kit';
import {TuiBlockStatus} from '@taiga-ui/layout';

@Component({
    standalone: true,
    imports: [
        NgFor,
        TuiAutoColorPipe,
        TuiAvatar,
        TuiAvatarStack,
        TuiBlockStatus,
        TuiButton,
        TuiInitialsPipe,
    ],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly users = [
        'Alex Inkin',
        'Vladimir Potekhin',
        'Nikita Barsukov',
        'Maxim Ivanov',
    ];
}
```

#### Mobile

**Template:**
```html
<div tuiPlatform="ios" class="container" >
<tui-block-status class="card" [card]="true" >
<img alt="hidden content" src="assets/images/camping.svg" tuiSlot="top" class="image" /> We hide the unwanted block <button appearance="secondary" size="m" tuiButton type="button" > Return </button>
</tui-block-status>
<tui-block-status tuiPlatform="ios" class="card" [card]="true" >
<img alt="something wrong" src="assets/images/cancel.svg" tuiSlot="top" class="image" /> Something happened in this block <button appearance="secondary" size="m" tuiButton type="button" > Try again </button>
</tui-block-status>
<tui-block-status tuiPlatform="ios" class="card" [card]="true" > Something happened in this block </tui-block-status>
</div>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiPlatform} from '@taiga-ui/cdk';
import {TuiButton} from '@taiga-ui/core';
import {TuiBlockStatus} from '@taiga-ui/layout';

@Component({
    standalone: true,
    imports: [TuiBlockStatus, TuiButton, TuiPlatform],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {}
```

#### Desktop medium

**Template:**
```html
<tui-block-status size="m">
<img alt="survived" src="assets/images/going-up.svg" tuiSlot="top" />
<h4>There is nothing here yet</h4>
<span>To get started, create a server</span>
<button appearance="primary" size="s" tuiButton type="button" > Create </button>
</tui-block-status>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiButton} from '@taiga-ui/core';
import {TuiBlockStatus} from '@taiga-ui/layout';

@Component({
    standalone: true,
    imports: [TuiBlockStatus, TuiButton],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {}
```

#### Empty image block

**Template:**
```html
<tui-block-status size="m">
<h4>Something happened in this block</h4>
<span>Try again later</span>
<button appearance="secondary" size="s" tuiButton type="button" > Retry </button>
</tui-block-status>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiButton} from '@taiga-ui/core';
import {TuiBlockStatus} from '@taiga-ui/layout';

@Component({
    standalone: true,
    imports: [TuiBlockStatus, TuiButton],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {}
```

#### Empty description block

**Template:**
```html
<div class="container">
<tui-block-status class="card" [card]="true" >
<img alt="hidden content" src="assets/images/camping.svg" tuiSlot="top" class="image" />
<h3>No operations</h3>
</tui-block-status>
<tui-block-status class="card" [card]="true" >
<img alt="hidden content" src="assets/images/camping.svg" tuiSlot="top" class="image" />
<h3>No operations</h3>
<button appearance="secondary" size="m" tuiButton type="button" > Return </button>
</tui-block-status>
</div>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiButton} from '@taiga-ui/core';
import {TuiBlockStatus} from '@taiga-ui/layout';

@Component({
    standalone: true,
    imports: [TuiBlockStatus, TuiButton],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {}
```


### TypeScript

```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {TuiDemo} from '@demo/utils';
import {TuiButton, type TuiSizeL} from '@taiga-ui/core';
import {TuiBlockStatus} from '@taiga-ui/layout';

@Component({
    standalone: true,
    imports: [TuiBlockStatus, TuiButton, TuiDemo],
    templateUrl: './index.html',
    changeDetection,
})
export default class Example {
    protected card = false;

    protected readonly sizes: TuiSizeL[] = ['l', 'm'];

    protected size: TuiSizeL = this.sizes[0] || 'l';

    protected readonly examples = [
        'Basic',
        'With actions',
        'Cards',
        'Customization',
        'Mobile',
        'Desktop medium',
        'Empty image block',
        'Empty description block',
    ];
}
```

---
# components/BottomSheet
- **Package**: `ADDON-MOBILE`
- **Type**: components
A non-modal draggable sheet

### How to Use (Import)

```ts
import {TuiBottomSheet} from '@taiga-ui/addon-mobile';

// ...

@Component({
  standalone: true,
  imports: [
    // ...
    TuiBottomSheet,
  ],
  // ...
})
export class Example {}
```

### How to Use (Template)

```html
<tui-bottom-sheet>Content</tui-bottom-sheet>
```

### API

| Property | Type | Description |
|----------|-----|----------|
| [stops] | `readonly string[]` | Scroll snap stops |

### Usage Examples

#### Basic

**Template:**
```html
<div class="messages">
<tui-scrollbar>
<div tuiMessage>What's up?</div>
<div *ngFor="let message of messages" appearance="accent" tuiMessage class="message" [textContent]="message" ></div>
</tui-scrollbar>
<tui-bottom-sheet>
<div class="actions">
<button tuiAppearance="floating" tuiCardLarge type="button" (click)="onClick('Ok')" > Ok </button>
<button tuiAppearance="floating" tuiCardLarge type="button" (click)="onClick('Bye!')" > Bye! </button>
<button tuiAppearance="floating" tuiCardLarge type="button" (click)="onClick('Taiga UI is awesome!')" > Taiga UI is awesome! </button>
</div>
</tui-bottom-sheet>
</div>
<form class="form" (ngSubmit)="onSubmit()" >
<tui-textfield class="textarea">
<label tuiLabel>Type your message</label>
<textarea name="message" tuiTextarea [max]="6" [(ngModel)]="value" (keydown.control.enter)="onSubmit()" ></textarea>
</tui-textfield>
<button tuiButton type="submit" > Send </button>
</form>
```
**TypeScript:**
```ts
import {NgForOf} from '@angular/common';
import {Component, ElementRef, ViewChild} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiBottomSheet} from '@taiga-ui/addon-mobile';
import {TuiAppearance, TuiButton, TuiScrollbar, TuiTextfield} from '@taiga-ui/core';
import {TuiMessage, TuiTextarea} from '@taiga-ui/kit';
import {TuiCardLarge} from '@taiga-ui/layout';

@Component({
    standalone: true,
    imports: [
        FormsModule,
        NgForOf,
        TuiAppearance,
        TuiBottomSheet,
        TuiButton,
        TuiCardLarge,
        TuiMessage,
        TuiScrollbar,
        TuiTextarea,
        TuiTextfield,
    ],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    @ViewChild(TuiBottomSheet, {read: ElementRef})
    private readonly sheet?: ElementRef<HTMLElement>;

    protected messages = ['Check that awesome bottom sheet out!'];
    protected value = '';

    protected onClick(message: string): void {
        this.messages = this.messages.concat(message);
        this.sheet?.nativeElement.scrollTo({top: 0, behavior: 'smooth'});
    }

    protected onSubmit(): void {
        this.messages = this.messages.concat(this.value);
        this.value = '';
    }
}
```

#### Reacting to scroll

**Template:**
```html
<iframe allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade" src="https://www.google.com/maps/embed?pb=!1m10!1m8!1m3!1d318007.389194818!2d-0.1506732382812497!3d51.48692612252592!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2sae!4v1738141112584!5m2!1sen!2sae" title="map" class="map" ></iframe>
<div #buttons class="buttons" >
<a appearance="floating" href="https://maps.google.com/maps?ll=25.085609,55.261751" iconStart="@tui.map-pin" rel="noopener noreferrer" size="m" target="_blank" tuiIconButton > Map </a>
<a appearance="floating" href="https://london.gov.uk" iconStart="@tui.external-link" rel="noopener noreferrer" size="m" target="_blank" tuiIconButton > Website </a>
</div>
<tui-bottom-sheet class="sheet" [stops]="stops" (scroll.zoneless)="onScroll($any($event.target))" >
<h3 tuiHeader>
<span tuiTitle> London <span tuiSubtitle>United Kingdom</span>
</span>
</h3>
<div class="content">
<div tuiTitle>
<strong>Population</strong>
<span tuiSubtitle>8,866,180</span>
</div>
<div tuiTitle>
<strong>Area</strong>
<span tuiSubtitle>1,572 square km</span>
</div>
<div tuiTitle>
<strong>Time zone</strong>
<span tuiSubtitle>UTC+00:00 (Greenwich Mean Time)</span>
</div>
<div tuiTitle>
<strong>Established</strong>
<span tuiSubtitle>47 AD</span>
</div>
</div> London is the capital and largest city of both England and the United Kingdom, with a population of 8,866,180 in 2022. Its wider metropolitan area is the largest in Western Europe, with a population of 14.9 million. London stands on the River Thames in southeast England, at the head of a 50-mile (80 km) tidal estuary down to the North Sea, and has been a major settlement for nearly 2,000 years. Its ancient core and financial centre, the City of London, was founded by the Romans and has retained its medieval boundaries. The City of Westminster, to the west of the City of London, has been the centuries-long host of the national government and parliament. London grew rapidly in the 19th century, becoming the world's largest city at the time. Since the 19th century, the name "London" has referred to the metropolis around the City of London. </tui-bottom-sheet>
```
**TypeScript:**
```ts
import {Component, type ElementRef, ViewChild} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiBottomSheet} from '@taiga-ui/addon-mobile';
import {TuiButton, TuiTitle} from '@taiga-ui/core';
import {TuiHeader} from '@taiga-ui/layout';

@Component({
    standalone: true,
    imports: [TuiBottomSheet, TuiButton, TuiHeader, TuiTitle],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    @ViewChild('buttons')
    protected readonly button?: ElementRef<HTMLElement>;

    protected readonly stops = ['112px'] as const;

    protected onScroll({clientHeight, scrollTop}: HTMLElement): void {
        const offset = Number.parseInt(this.stops[0], 10);
        const top = Math.min(scrollTop, clientHeight - offset);
        const transform = `translate3d(0, ${-top}px, 0)`;

        this.button?.nativeElement.style.setProperty('transform', transform);
    }
}
```

#### Stops

**Template:**
```html
<label tuiBlock tuiTheme="dark" >
<input tuiCheckbox type="checkbox" [(ngModel)]="show" /> Show more content </label>
<tui-bottom-sheet [stops]="['9.5rem', '18.5rem', '100%']">
<header class="header"> Taiga UI <a href="https://github.com/taiga-family/taiga-ui" iconStart="@tui.star" rel="noopener noreferrer" size="m" target="_blank" tuiButton > Give us a Star </a>
</header>
<ng-container *ngIf="show">
<img alt="" src="assets/images/taiga-family.png" [style.inline-size.%]="100" [style.margin-block-start.rem]="2" />
<p *tuiRepeatTimes="let index of 20">All work and no play makes Jack a dull boy</p>
<tui-accordion>
<button tuiAccordion>Show more</button>
<tui-expand>All work and no play makes Jack a dull boy</tui-expand>
</tui-accordion>
</ng-container>
</tui-bottom-sheet>
```
**TypeScript:**
```ts
import {NgIf} from '@angular/common';
import {Component} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiBottomSheet} from '@taiga-ui/addon-mobile';
import {TuiRepeatTimes} from '@taiga-ui/cdk';
import {TuiButton} from '@taiga-ui/core';
import {TuiAccordion} from '@taiga-ui/experimental';
import {TuiBlock, TuiCheckbox} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [
        FormsModule,
        NgIf,
        TuiAccordion,
        TuiBlock,
        TuiBottomSheet,
        TuiButton,
        TuiCheckbox,
        TuiRepeatTimes,
    ],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected show = true;
}
```


### TypeScript

```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {TuiDemo} from '@demo/utils';

@Component({
    standalone: true,
    imports: [TuiDemo],
    templateUrl: './index.html',
    changeDetection,
})
export default class Page {
    protected readonly examples = ['Basic', 'Reacting to scroll', 'Stops'];
}
```

---
# components/Breadcrumbs
- **Package**: `KIT`
- **Type**: components
Navigation element that shows a path from root page to the current

### How to Use (Import)

```ts
import {TuiItem} from '@taiga-ui/cdk';
import {TuiBreadcrumbs} from '@taiga-ui/kit';

// ...

@Component({
  standalone: true,
  imports: [
    // ...
    TuiItem,
    TuiBreadcrumbs,
  ],
  // ...
})
export class Example {}
```

### How to Use (Template)

```html
<tui-breadcrumbs [size]="size">
  <ng-container *ngFor="let item of items">
    <a
      *tuiItem
      tuiLink
      [routerLink]="item.routerLink"
    >
      {{ item.caption }}
    </a>
  </ng-container>
</tui-breadcrumbs>
```

### Example

```html
<tui-breadcrumbs [itemsLimit]="itemsLimit" [size]="size" >
<ng-container *ngFor="let item of items">
<button *tuiItem tuiLink type="button" > {{ item }} </button>
</ng-container>
</tui-breadcrumbs>
```

### API

| Property | Type | Description |
|----------|-----|----------|
| [itemsLimit] | `number` | Limit on visible items |
| [size] | `TuiSizeL` | Text size |

### Usage Examples

#### Basic

**Template:**
```html
<tui-breadcrumbs>
<ng-container *ngFor="let item of items">
<a *tuiItem tuiLink [routerLink]="item.routerLink" > {{ item.caption }} </a>
</ng-container>
</tui-breadcrumbs>
<tui-breadcrumbs size="l" class="tui-space_top-2" >
<ng-container *ngFor="let item of items">
<a *tuiItem tuiLink [routerLink]="item.routerLink" > {{ item.caption }} </a>
</ng-container>
</tui-breadcrumbs>
```
**TypeScript:**
```ts
import {NgFor} from '@angular/common';
import {Component} from '@angular/core';
import {RouterLink} from '@angular/router';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiItem} from '@taiga-ui/cdk';
import {TuiLink} from '@taiga-ui/core';
import {TuiBreadcrumbs} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [NgFor, RouterLink, TuiBreadcrumbs, TuiItem, TuiLink],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    protected items = [
        {
            caption: 'Selects',
            routerLink: '/components/select',
        },
        {
            caption: 'Multi',
            routerLink: '/components/multi-select',
        },
        {
            caption: 'With tags',
            routerLink: '/components/multi-select',
        },
        {
            caption: 'Current',
            routerLink: '/navigation/breadcrumbs',
            routerLinkActiveOptions: {exact: true},
        },
    ];
}
```

#### Overflow

**Template:**
```html
<h3 tuiTitle>
<strong>Truncate</strong>
<span tuiSubtitle> Using <code>.text-truncate()</code> mixin </span>
</h3>
<tui-breadcrumbs>
<ng-container *ngFor="let item of items; let last = last">
<button *tuiItem tuiHintOverflow tuiLink type="button" class="link" [class.link_last]="last" > {{ item }} </button>
</ng-container>
</tui-breadcrumbs>
<hr />
<h3 tuiTitle>
<strong>Fade</strong>
<span tuiSubtitle> Combining <code>.text-truncate()</code> mixin with <code>
<a tuiLink [routerLink]="fade" > Fade </a>
</code> directive </span>
</h3>
<tui-breadcrumbs>
<ng-container *ngFor="let item of items; let last = last">
<button *tuiItem tuiFade tuiHintOverflow tuiLink type="button" class="link" [class.link_last]="last" > {{ item }} </button>
</ng-container>
</tui-breadcrumbs>
<hr />
<h3 tuiTitle>
<strong>Scroll</strong>
<span tuiSubtitle> Putting <code>
<a tuiLink [routerLink]="fade" > Fade </a>
</code> directive on entire component </span>
</h3>
<tui-breadcrumbs tuiFade>
<ng-container *ngFor="let item of items; let last = last">
<button *tuiItem tuiLink type="button" [class.link_last]="last" > {{ item }} </button>
</ng-container>
</tui-breadcrumbs>
<hr />
<h3 tuiTitle>
<strong>Collapse</strong>
<span tuiSubtitle> Using <code>itemsLimit: number</code>
</span>
</h3>
<tui-breadcrumbs [itemsLimit]="10">
<ng-container *ngFor="let item of items; let last = last">
<button *tuiItem tuiLink type="button" [class.link_last]="last" > {{ item }} </button>
</ng-container>
</tui-breadcrumbs>
```
**TypeScript:**
```ts
import {NgForOf} from '@angular/common';
import {Component} from '@angular/core';
import {RouterLink} from '@angular/router';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {DemoRoute} from '@demo/routes';
import {TuiItem} from '@taiga-ui/cdk';
import {TuiHint, TuiLink, TuiTitle} from '@taiga-ui/core';
import {TuiBreadcrumbs, tuiBreadcrumbsOptionsProvider, TuiFade} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [
        NgForOf,
        RouterLink,
        TuiBreadcrumbs,
        TuiFade,
        TuiHint,
        TuiItem,
        TuiLink,
        TuiTitle,
    ],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
    providers: [tuiBreadcrumbsOptionsProvider({icon: '/'})],
})
export default class Example {
    protected readonly fade = DemoRoute.Fade;
    protected readonly items = [
        'First item',
        'Very very long second item that must overflow',
        'Third item',
        'One last super long item that is never gonna fit',
    ];
}
```


### TypeScript

```ts
import {Component, inject} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {TuiDemo} from '@demo/utils';
import {TuiItem} from '@taiga-ui/cdk';
import {TuiLink, type TuiSizeL} from '@taiga-ui/core';
import {TUI_BREADCRUMBS_OPTIONS, TuiBreadcrumbs} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [TuiBreadcrumbs, TuiDemo, TuiItem, TuiLink],
    templateUrl: './index.html',
    changeDetection,
})
export default class Example {
    private readonly options = inject(TUI_BREADCRUMBS_OPTIONS);

    protected readonly examples = ['Basic', 'Overflow'];
    protected readonly items = [
        'Item 1',
        'Item 2',
        'Item 3',
        'Item 4',
        'Item 5',
        'Item 6',
        'Item 7',
        'Item 8',
    ];

    protected readonly sizeVariants: readonly TuiSizeL[] = ['m', 'l'];
    protected size: TuiSizeL = this.options.size;
    protected itemsLimit = this.options.itemsLimit;
}
```

---
# components/Button
- **Package**: `CORE`
- **Type**: components

### How to Use (Import)

```ts
import {Component} from '@angular/core';
import {TuiButton} from '@taiga-ui/core';
// ...

@Component({
  standalone: true,
  imports: [
    // ...
    TuiButton,
  ],
})
export class Example {}
```

### How to Use (Template)

```html
<button tuiButton>Press me</button>
<a tuiButton>Press me</a>
```

### Example

```html
<button tuiButton type="button" [appearance]="appearance.appearance" [iconEnd]="icons.iconEnd" [iconStart]="icons.iconStart" [loading]="loading" [size]="size" [tuiAppearanceFocus]="appearance.focus" [tuiAppearanceMode]="appearance.mode" [tuiAppearanceState]="appearance.state" > Button </button>
```

### API

| Property | Type | Description |
|----------|-----|----------|
| [size] | `TuiSizeXS | TuiSizeL` | Size of the button |
| [loading] | `boolean` | ) |

### Usage Examples

#### Sizes

**Template:**
```html
<button size="l" tuiButton type="button" > Large </button>
<button size="m" tuiButton type="button" > Medium </button>
<button size="s" tuiButton type="button" > Small </button>
<button size="xs" tuiButton type="button" > Extra small </button>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiButton} from '@taiga-ui/core';

@Component({
    standalone: true,
    imports: [TuiButton],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {}
```

#### Appearance

**Template:**
```html
<button appearance="primary" tuiButton type="button" > Primary </button>
<button appearance="accent" tuiButton type="button" > Accent </button>
<button appearance="secondary" tuiButton type="button" > Secondary </button>
<button appearance="flat" tuiButton type="button" > Flat </button>
<button appearance="outline" tuiButton type="button" > Outline </button>
<button appearance="floating" tuiButton type="button" > Floating </button>
<button appearance="primary" disabled tuiButton type="button" > Primary disabled </button>
<div> See <a tuiLink [routerLink]="routes.Appearance" > Appearance </a> directive for more. </div>
<div> Use <code>tuiAppearanceMode</code> to emulate <code>:checked</code> / <code>:invalid</code> CSS state for outline appearance: </div>
<button appearance="outline" tuiAppearanceMode="checked" tuiButton type="button" > Outline </button>
<button appearance="outline-grayscale" tuiAppearanceMode="checked invalid" tuiButton type="button" > Whiteblock </button>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {RouterLink} from '@angular/router';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {DemoRoute} from '@demo/routes';
import {TuiButton, TuiLink} from '@taiga-ui/core';

@Component({
    standalone: true,
    imports: [RouterLink, TuiButton, TuiLink],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly routes = DemoRoute;
}
```

#### Icons

**Template:**
```html
<button appearance="accent" tuiButton type="button" >
<tui-avatar size="xs" src="https://avatars.githubusercontent.com/u/11832552" /> Alex Inkin </button>
<button appearance="secondary" size="m" tuiButton type="button" >
<tui-icon icon="@tui.users" [style.height.rem]="1" /> Users </button>
<button appearance="outline" iconEnd="@tui.chevron-down" size="s" tuiButton type="button" > More </button>
<button appearance="secondary-destructive" iconStart="@tui.heart" size="xs" tuiIconButton type="button" [style.border-radius.%]="100" > Favorite </button>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiButton, TuiIcon} from '@taiga-ui/core';
import {TuiAvatar} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [TuiAvatar, TuiButton, TuiIcon],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {}
```

#### Loading

**Template:**
```html
<button iconStart="@tui.clock" tuiButton type="button" [loading]="loading$ | async" (click)="trigger$.next()" > Click to start </button>
```
**TypeScript:**
```ts
import {AsyncPipe} from '@angular/common';
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TUI_FALSE_HANDLER} from '@taiga-ui/cdk';
import {TuiButton} from '@taiga-ui/core';
import {TuiButtonLoading} from '@taiga-ui/kit';
import {map, startWith, Subject, switchMap, timer} from 'rxjs';

@Component({
    standalone: true,
    imports: [AsyncPipe, TuiButton, TuiButtonLoading],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly trigger$ = new Subject<void>();
    protected readonly loading$ = this.trigger$.pipe(
        switchMap(() => timer(2000).pipe(map(TUI_FALSE_HANDLER), startWith('Loading'))),
    );
}
```

#### Options with DI

**Template:**
```html
<button tuiButton type="button" > Options with DI </button>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiButton, tuiButtonOptionsProvider} from '@taiga-ui/core';

@Component({
    standalone: true,
    imports: [TuiButton],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
    providers: [tuiButtonOptionsProvider({size: 's'})],
})
export default class Example {}
```

#### Vertical

**Template:**
```html
<button tuiButton tuiButtonVertical type="button" >
<tui-avatar size="xs" src="https://avatars.githubusercontent.com/u/11832552" /> Alex </button>
<button appearance="secondary" iconStart="@tui.users" tuiButton tuiButtonVertical type="button" > Users </button>
<button appearance="flat" iconStart="@tui.star" tuiButton tuiButtonVertical type="button" >
<div tuiFade tuiFadeHeight="1rem" tuiFadeOffset="0.5rem" > Very long label with fade </div>
</button>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiButton} from '@taiga-ui/core';
import {TuiAvatar, TuiFade} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [TuiAvatar, TuiButton, TuiFade],
    templateUrl: './index.html',
    styles: [':host { display: flex; gap: 1rem; align-items: flex-start; }'],
    encapsulation,
    changeDetection,
})
export default class Example {}
```

#### Two labels

**Template:**
```html
<button tuiButton type="button" class="button" >
<span tuiFade>Purchase gift certificate</span>
<strong>$500</strong>
</button>
<p>
<button tuiButton type="button" class="button" >
<span tuiFade>Purchase</span>
<strong>$500</strong>
</button>
</p>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiButton} from '@taiga-ui/core';
import {TuiFade} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [TuiButton, TuiFade],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {}
```


### TypeScript

```ts
import {Component} from '@angular/core';
import {TuiDocAppearance} from '@demo/components/appearance';
import {TuiDocIcons} from '@demo/components/icons';
import {changeDetection} from '@demo/emulate/change-detection';
import {TuiDemo} from '@demo/utils';
import {TuiButton, type TuiSizeL, type TuiSizeXS} from '@taiga-ui/core';
import {TuiButtonLoading} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [TuiButton, TuiButtonLoading, TuiDemo, TuiDocAppearance, TuiDocIcons],
    templateUrl: './index.html',
    changeDetection,
})
export default class Page {
    protected readonly examples = [
        'Sizes',
        'Appearance',
        'Icons',
        'Loading',
        'Options with DI',
        'Vertical',
        'Two labels',
    ];

    protected readonly sizes: ReadonlyArray<TuiSizeL | TuiSizeXS> = ['xs', 's', 'm', 'l'];

    protected size = this.sizes[3]!;

    protected loading = false;
}
```

---
# components/ButtonClose
- **Package**: `KIT`
- **Type**: components

### How to Use (Import)

```ts
import {Component} from '@angular/core';
import {TuiButton} from '@taiga-ui/core';
import {TuiButtonClose} from '@taiga-ui/kit';
// ...

@Component({
  standalone: true,
  imports: [
    // ...
    TuiButton,
    TuiButtonClose,
  ],
})
export class Example {}
```

### How to Use (Template)

```html
<button
  tuiIconButton
  tuiButtonClose
>
  Close
</button>
```

### Usage Examples

#### Basic

**Template:**
```html
<button tuiButtonClose tuiIconButton type="button" > Close </button>
<button appearance="glass" tuiButtonClose tuiIconButton type="button" > Close </button>
<button size="xs" tuiButtonClose tuiIconButton type="button" > Close </button>
<button appearance="glass" size="xs" tuiButtonClose tuiIconButton type="button" > Close </button>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiButton} from '@taiga-ui/core';
import {TuiButtonClose} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [TuiButton, TuiButtonClose],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {}
```


### TypeScript

```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {TuiDemo} from '@demo/utils';

@Component({
    standalone: true,
    imports: [TuiDemo],
    templateUrl: './index.html',
    changeDetection,
})
export default class Page {}
```

---
# components/ButtonGroup
- **Package**: `KIT`
- **Type**: components

### How to Use (Import)

```ts
import {Component} from '@angular/core';
import {TuiButton} from '@taiga-ui/core';
import {TuiButtonGroup} from '@taiga-ui/kit';
// ...

@Component({
  standalone: true,
  imports: [
    // ...
    TuiButton,
    TuiButtonGroup,
  ],
})
export class Example {}
```

### How to Use (Template)

```html
<div
  tuiButtonGroup
  tuiSurface="elevated"
>
  <button>
    <tui-icon icon="@tui.circle-plus"></tui-icon>
    Create a payment
  </button>
</div>
```

### Usage Examples

#### Elevated

**Template:**
```html
<div tuiAppearance="floating" tuiButtonGroup >
<button type="button">
<tui-icon icon="@tui.circle-plus" /> Create a payment </button>
<button type="button">
<tui-icon badge="" icon="@tui.circle-plus" /> Pay the bill </button>
<button type="button">
<tui-icon badge="@tui.lock" icon="@tui.circle-plus" class="custom" /> Remove from favorites </button>
</div>
<div tuiAppearance="floating" tuiButtonGroup >
<button type="button">
<tui-icon icon="@tui.circle-plus" /> Top up </button>
<button type="button">
<tui-icon icon="@tui.circle-arrow-right" /> Take out </button>
</div>
<div tuiAppearance="floating" tuiButtonGroup >
<button type="button">
<tui-icon icon="@tui.circle-plus" /> To repay </button>
</div>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiAppearance, TuiIcon} from '@taiga-ui/core';
import {TuiButtonGroup, TuiIconBadge} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [TuiAppearance, TuiButtonGroup, TuiIcon, TuiIconBadge],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {}
```

#### Flat

**Template:**
```html
<div tuiAppearance="secondary" tuiButtonGroup >
<button type="button">
<tui-icon icon="@tui.circle-plus" /> Create a payment </button>
<button type="button">
<tui-icon icon="@tui.circle-plus" /> Pay the bill </button>
<button type="button">
<tui-icon icon="@tui.circle-plus" /> Remove from favorites </button>
</div>
<div tuiAppearance="secondary" tuiButtonGroup >
<button type="button">
<tui-icon icon="@tui.circle-plus" /> Top up </button>
<button type="button">
<tui-icon icon="@tui.circle-arrow-right" /> Take out </button>
</div>
<div tuiAppearance="secondary" tuiButtonGroup >
<button type="button">
<tui-icon icon="@tui.circle-plus" /> To repay </button>
</div>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiAppearance, TuiIcon} from '@taiga-ui/core';
import {TuiButtonGroup} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [TuiAppearance, TuiButtonGroup, TuiIcon],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {}
```

#### Dark

**Template:**
```html
<div tuiButtonGroup tuiTheme="dark" >
<button type="button">
<tui-icon icon="@tui.circle-plus" /> Create a payment </button>
<button type="button">
<tui-icon icon="@tui.circle-plus" /> Pay the bill </button>
<button type="button">
<tui-icon icon="@tui.circle-plus" /> Remove from favorites </button>
</div>
<div tuiButtonGroup tuiTheme="dark" >
<button type="button">
<tui-icon icon="@tui.circle-plus" /> Top up </button>
<button type="button">
<tui-icon icon="@tui.circle-arrow-right" /> Take out </button>
</div>
<div tuiButtonGroup tuiTheme="dark" >
<button type="button">
<tui-icon icon="@tui.circle-plus" /> To repay </button>
</div>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiIcon} from '@taiga-ui/core';
import {TuiButtonGroup} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [TuiButtonGroup, TuiIcon],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {}
```

#### Swiped animation

**Template:**
```html
<tui-carousel [draggable]="true" [itemsCount]="1" [(index)]="index" (shift)="opacity = $event" >
<ng-container *ngFor="let item of items; let i = index">
<div *tuiItem tuiCardMedium class="card" [style.background]="item.gradient" >
<h2 tuiTitle> BANK <span tuiSubtitle>{{ item.title }}</span>
</h2>
<tui-badge class="money">
<tui-icon icon="@tui.wallet" /> {{ item.content }} </tui-badge>
</div>
</ng-container>
</tui-carousel>
<tui-pagination size="s" [length]="items.length" [(index)]="index" />
<div tuiButtonGroup [style.background-color]="items[index]?.color" >
<tui-elastic-container [style.opacity]="opacity * 2">
<ng-container *ngIf="index === 0">
<button type="button">
<tui-icon icon="@tui.circle-plus" /> Create a payment </button>
<button type="button">
<tui-icon icon="@tui.circle-plus" /> Pay the bill </button>
<button type="button">
<tui-icon icon="@tui.circle-plus" /> Remove from favorites </button>
</ng-container>
<ng-container *ngIf="index === 1">
<button type="button">
<tui-icon icon="@tui.circle-plus" /> Remove from favorites </button>
</ng-container>
<ng-container *ngIf="index === 2">
<button type="button">
<tui-icon icon="@tui.circle-plus" /> Create a payment </button>
<button type="button">
<tui-icon icon="@tui.circle-plus" /> Remove from favorites </button>
</ng-container>
</tui-elastic-container>
</div>
```
**TypeScript:**
```ts
import {NgForOf, NgIf} from '@angular/common';
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiIcon, TuiTitle} from '@taiga-ui/core';
import {
    TuiBadge,
    TuiButtonGroup,
    TuiCarousel,
    TuiElasticContainer,
    TuiPagination,
} from '@taiga-ui/kit';
import {TuiCardMedium} from '@taiga-ui/layout';

@Component({
    standalone: true,
    imports: [
        NgForOf,
        NgIf,
        TuiBadge,
        TuiButtonGroup,
        TuiCardMedium,
        TuiCarousel,
        TuiElasticContainer,
        TuiIcon,
        TuiPagination,
        TuiTitle,
    ],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected index = 0;
    protected opacity = 1;

    protected readonly items = [
        {
            title: 'RUB Account',
            content: '10 000 ₽',
            gradient: 'linear-gradient(334.83deg, #7d8ca0 0%, #647382 100%)',
            color: '#7d8ca0',
        },
        {
            title: 'USD Account',
            content: '2 000 000 $',
            gradient: 'linear-gradient(-90deg, #cf77f3 0%, #009bff 47%, #2ac9db 100%)',
            color: 'rgb(0, 155, 255)',
        },
        {
            title: 'EUR Account',
            content: '30 000 €',
            gradient: 'linear-gradient(135deg, #1AC07E, #DEA683)',
            color: 'rgb(158 178 129)',
        },
    ];
}
```


### TypeScript

```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {TuiDemo} from '@demo/utils';

@Component({
    standalone: true,
    imports: [TuiDemo],
    templateUrl: './index.html',
    changeDetection,
})
export default class Page {
    protected readonly examples = ['Elevated', 'Flat', 'Dark', 'Swiped animation'];
}
```

---
# components/Calendar
- **Package**: `CORE`
- **Type**: components
A simple calendar. If you want a textfield with date, see
            
                InputDate
            
            and
            
                InputDateRange

### How to Use (Import)

```ts
import {TuiCalendar} from '@taiga-ui/core';

// ...

@Component({
  standalone: true,
  imports: [
    // ...
    TuiCalendar,
  ],
  // ...
})
export class Example {}
```

### How to Use (Template)

```html
<tui-calendar></tui-calendar>
```

### Example

```html
<tui-calendar [disabledItemHandler]="disabledItemHandler" [markerHandler]="markerHandler" [max]="max" [maxViewedMonth]="maxViewedMonth" [min]="min" [minViewedMonth]="minViewedMonth" [showAdjacent]="showAdjacent" [value]="value" [(hoveredItem)]="hoveredItem" [(month)]="month" (dayClick)="documentationPropertyDayClick.emitEvent($event)" />
```

### API

| Property | Type | Description |
|----------|-----|----------|
| [disabledItemHandler] | `TuiBooleanHandler<TuiDay>` |  |
| [showAdjacent] | `boolean` | Show adjacent months days |
| [(hoveredItem)] | `TuiDay | null` | Hovered date |
| [markerHandler] | `TuiMarkerHandler | null` | A handler that gets date and returns null or a tuple with circled marker colors |
| [max] | `TuiDay | null` | Maximal date to choose |
| [maxViewedMonth] | `TuiMonth | null` | Maximal month to access |
| [min] | `TuiDay | null` | Minimum date to choose |
| [minViewedMonth] | `TuiMonth | null` | Minimum month to access |
| [(month)] | `TuiMonth` | Current month |
| [value] | `TuiDay | TuiDayRange | null` | Selected day or range |
| (dayClick) | `TuiDay` | Date click |

### Usage Examples

#### Basic

**Template:**
```html
<tui-calendar [value]="value" (dayClick)="onDayClick($event)" />
<div *ngIf="value">Chosen date: {{ value }}</div>
```
**TypeScript:**
```ts
import {NgIf} from '@angular/common';
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {type TuiDay} from '@taiga-ui/cdk';
import {TuiCalendar} from '@taiga-ui/core';

@Component({
    standalone: true,
    imports: [NgIf, TuiCalendar],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    protected value: TuiDay | null = null;

    protected onDayClick(day: TuiDay): void {
        this.value = day;
    }
}
```

#### Range

**Template:**
```html
<div class="wrapper">
<tui-calendar [maxViewedMonth]="firstMonth" [month]="firstMonth" [showAdjacent]="false" [value]="value" [(hoveredItem)]="hoveredItem" (dayClick)="onDayClick($event)" (monthChange)="onMonthChangeFirst($event)" />
<tui-calendar [maxViewedMonth]="middleMonth" [minViewedMonth]="middleMonth" [month]="middleMonth" [showAdjacent]="false" [value]="value" [(hoveredItem)]="hoveredItem" (dayClick)="onDayClick($event)" (monthChange)="onMonthChangeMiddle($event)" />
<tui-calendar [minViewedMonth]="lastMonth" [month]="lastMonth" [showAdjacent]="false" [value]="value" [(hoveredItem)]="hoveredItem" (dayClick)="onDayClick($event)" (monthChange)="onMonthChangeLast($event)" />
</div>
<div *ngIf="value">Chosen dates: {{ value }}</div>
```
**TypeScript:**
```ts
import {NgIf} from '@angular/common';
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {type TuiDay, TuiDayRange, TuiMonth} from '@taiga-ui/cdk';
import {TuiCalendar} from '@taiga-ui/core';

@Component({
    standalone: true,
    imports: [NgIf, TuiCalendar],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected value: TuiDayRange | null = null;

    protected firstMonth = TuiMonth.currentLocal();

    protected middleMonth = TuiMonth.currentLocal().append({month: 1});

    protected lastMonth = TuiMonth.currentLocal().append({month: 2});

    protected hoveredItem: TuiDay | null = null;

    protected onDayClick(day: TuiDay): void {
        if (!this.value?.isSingleDay) {
            this.value = new TuiDayRange(day, day);
        }

        this.value = TuiDayRange.sort(this.value.from, day);
    }

    protected onMonthChangeFirst(month: TuiMonth): void {
        this.firstMonth = month;
        this.middleMonth = month.append({month: 1});
        this.lastMonth = month.append({month: 2});
    }

    protected onMonthChangeMiddle(month: TuiMonth): void {
        this.firstMonth = month.append({month: -1});
        this.middleMonth = month;
        this.lastMonth = month.append({month: 1});
    }

    protected onMonthChangeLast(month: TuiMonth): void {
        this.firstMonth = month.append({month: -2});
        this.middleMonth = month.append({month: -1});
        this.lastMonth = month;
    }
}
```

#### With markers

**Template:**
```html
<div class="wrapper">
<tui-calendar [markerHandler]="markerHandler" [maxViewedMonth]="firstMonth" [month]="firstMonth" [showAdjacent]="false" [value]="value" [(hoveredItem)]="hoveredItem" (dayClick)="onDayClick($event)" (monthChange)="onMonthChangeFirst($event)" />
<tui-calendar [markerHandler]="markerHandler" [maxViewedMonth]="middleMonth" [minViewedMonth]="middleMonth" [month]="middleMonth" [showAdjacent]="false" [value]="value" [(hoveredItem)]="hoveredItem" (dayClick)="onDayClick($event)" (monthChange)="onMonthChangeMiddle($event)" />
<tui-calendar [markerHandler]="markerHandler" [minViewedMonth]="lastMonth" [month]="lastMonth" [showAdjacent]="false" [value]="value" [(hoveredItem)]="hoveredItem" (dayClick)="onDayClick($event)" (monthChange)="onMonthChangeLast($event)" />
</div>
<div *ngIf="value">Chosen dates: {{ value }}</div>
```
**TypeScript:**
```ts
import {NgIf} from '@angular/common';
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {type TuiDay, TuiDayRange, TuiMonth} from '@taiga-ui/cdk';
import {TuiCalendar, type TuiMarkerHandler} from '@taiga-ui/core';

const TWO_DOTS: [string, string] = [
    'var(--tui-background-accent-1)',
    'var(--tui-status-info)',
];
const ONE_DOT: [string] = ['var(--tui-status-positive)'];

@Component({
    standalone: true,
    imports: [NgIf, TuiCalendar],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected value: TuiDayRange | null = null;

    protected firstMonth = TuiMonth.currentLocal();

    protected middleMonth = TuiMonth.currentLocal().append({month: 1});

    protected lastMonth = TuiMonth.currentLocal().append({month: 2});

    protected hoveredItem: TuiDay | null = null;

    protected readonly markerHandler: TuiMarkerHandler = (day: TuiDay) =>
        // Attention: do not create new arrays in handler, use constants instead
        day.day % 2 === 0 ? TWO_DOTS : ONE_DOT;

    protected onDayClick(day: TuiDay): void {
        if (!this.value?.isSingleDay) {
            this.value = new TuiDayRange(day, day);
        }

        this.value = TuiDayRange.sort(this.value.from, day);
    }

    protected onMonthChangeFirst(month: TuiMonth): void {
        this.firstMonth = month;
        this.middleMonth = month.append({month: 1});
        this.lastMonth = month.append({month: 2});
    }

    protected onMonthChangeMiddle(month: TuiMonth): void {
        this.firstMonth = month.append({month: -1});
        this.middleMonth = month;
        this.lastMonth = month.append({month: 1});
    }

    protected onMonthChangeLast(month: TuiMonth): void {
        this.firstMonth = month.append({month: -2});
        this.middleMonth = month.append({month: -1});
        this.lastMonth = month;
    }
}
```

#### Localization

**Template:**
```html
<tui-calendar />
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiDayOfWeek} from '@taiga-ui/cdk';
import {TUI_FIRST_DAY_OF_WEEK, TuiCalendar} from '@taiga-ui/core';

@Component({
    standalone: true,
    imports: [TuiCalendar],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
    providers: [
        {
            provide: TUI_FIRST_DAY_OF_WEEK,
            useValue: TuiDayOfWeek.Sunday,
        },
    ],
})
export default class Example {}
```

#### Color customization

**Template:**
```html
<tui-calendar />
```
**TypeScript:**
```ts
import {Component, ViewEncapsulation} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {type TuiDay, type TuiHandler} from '@taiga-ui/cdk';
import {TUI_DAY_TYPE_HANDLER, TuiCalendar} from '@taiga-ui/core';

const handler: TuiHandler<TuiDay, string> = (day: TuiDay) => {
    if (day.day === 10) {
        return 'holiday';
    }

    return day.isWeekend ? 'weekend' : 'weekday';
};

@Component({
    standalone: true,
    imports: [TuiCalendar],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation: ViewEncapsulation.None,
    changeDetection,
    providers: [{provide: TUI_DAY_TYPE_HANDLER, useValue: handler}],
})
export default class Example {}
```

#### Select multiple dates

**Template:**
```html
<tui-calendar [value]="value" (dayClick)="onDayClick($event)" />
<div>Chosen dates: {{ value }}</div>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {type TuiDay} from '@taiga-ui/cdk';
import {TuiCalendar} from '@taiga-ui/core';

@Component({
    standalone: true,
    imports: [TuiCalendar],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    protected value: readonly TuiDay[] = [];

    protected onDayClick(day: TuiDay): void {
        this.value = this.value.find((item) => item.daySame(day))
            ? this.value.filter((item) => !item.daySame(day))
            : this.value.concat(day);
    }
}
```

#### Open in year view

**Template:**
```html
<tui-calendar initialView="year" [value]="value" (dayClick)="onDayClick($event)" />
<div *ngIf="value">Chosen date: {{ value }}</div>
```
**TypeScript:**
```ts
import {NgIf} from '@angular/common';
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {type TuiDay} from '@taiga-ui/cdk';
import {TuiCalendar} from '@taiga-ui/core';

@Component({
    standalone: true,
    imports: [NgIf, TuiCalendar],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    protected value: TuiDay | null = null;

    protected onDayClick(day: TuiDay): void {
        this.value = day;
    }
}
```


### TypeScript

```ts
import {Component} from '@angular/core';
import {RouterModule} from '@angular/router';
import {changeDetection} from '@demo/emulate/change-detection';
import {DemoRoute} from '@demo/routes';
import {TuiDemo} from '@demo/utils';
import {
    TUI_FALSE_HANDLER,
    TUI_FIRST_DAY,
    TUI_LAST_DAY,
    type TuiBooleanHandler,
    TuiDay,
    TuiDayRange,
    TuiMonth,
} from '@taiga-ui/cdk';
import {TuiCalendar, type TuiMarkerHandler} from '@taiga-ui/core';

const TWO_DOTS: [string, string] = [
    'var(--tui-background-accent-1)',
    'var(--tui-status-info)',
];
const ONE_DOT: [string] = ['var(--tui-status-positive)'];

@Component({
    standalone: true,
    imports: [RouterModule, TuiCalendar, TuiDemo],
    templateUrl: './index.html',
    changeDetection,
})
export default class Example {
    protected readonly examples = [
        'Basic',
        'Range',
        'With markers',
        'Localization',
        'Color customization',
        'Select multiple dates',
        'Open in year view',
    ];

    protected showAdjacent = true;

    protected readonly minVariants = [
        TUI_FIRST_DAY,
        new TuiDay(2017, 2, 5),
        new TuiDay(1900, 0, 1),
    ];

    protected min = this.minVariants[0]!;

    protected readonly maxVariants = [
        TUI_LAST_DAY,
        new TuiDay(2020, 3, 30),
        new TuiDay(2300, 0, 1),
    ];

    protected max = this.maxVariants[0]!;

    protected readonly minViewedMonthVariants = [
        new TuiMonth(0, 0),
        new TuiMonth(2017, 2),
        new TuiMonth(1900, 0),
    ];

    protected minViewedMonth = this.minViewedMonthVariants[0]!;

    protected readonly maxViewedMonthVariants = [
        TUI_LAST_DAY,
        new TuiMonth(2020, 3),
        new TuiMonth(2300, 0),
    ];

    protected maxViewedMonth = this.maxViewedMonthVariants[0]!;

    protected readonly disabledItemHandlerVariants: ReadonlyArray<
        TuiBooleanHandler<TuiDay>
    > = [TUI_FALSE_HANDLER, ({day}) => day % 3 === 0];

    protected disabledItemHandler = this.disabledItemHandlerVariants[0]!;

    protected readonly markerHandlerVariants: readonly TuiMarkerHandler[] = [
        (day: TuiDay) => (day.day % 2 === 0 ? TWO_DOTS : ONE_DOT),
    ];

    protected markerHandler: TuiMarkerHandler | null = null;

    protected readonly valueVariants: ReadonlyArray<TuiDay | TuiDayRange> = [
        TuiDay.currentLocal(),
        new TuiDayRange(TuiDay.currentLocal(), TuiDay.currentLocal().append({day: 3})),
        new TuiDay(2020, 3, 21),
    ];

    protected value: TuiDay | TuiDayRange | null = null;

    protected month = TuiMonth.currentLocal();

    protected hoveredItem: TuiDay | null = null;
    protected readonly routes = DemoRoute;
}
```

---
# components/CalendarMonth
- **Package**: `KIT`
- **Type**: components
Month picker component. If you want a textfield, see
            
                InputMonth

### How to Use (Import)

```ts
import {TuiCalendarMonth} from '@taiga-ui/kit';

// ...

@Component({
  standalone: true,
  imports: [
    // ...
    TuiCalendarMonth,
  ],
  // ...
})
export class Example {}
```

### How to Use (Template)

```html
<tui-calendar-month></tui-calendar-month>
```

### Example

```html
<tui-calendar-month [disabledItemHandler]="disabledItemHandler" [max]="max" [maxLength]="maxLength" [min]="min" [minLength]="minLength" [value]="value" [year]="year" (monthClick)="documentationPropertyMonthClick.emitEvent($event)" />
```

### API

| Property | Type | Description |
|----------|-----|----------|
| [disabledItemHandler] | `TuiBooleanHandler<TuiMonth>` |  |
| [max] | `TuiMonth | null` | Maximal month |
| [min] | `TuiMonth | null` | Minimal month |
| [maxLength] | `number` | Maximum length |
| [minLength] | `number` | Minimum length |
| [value] | `TuiMonth | TuiMonthRange | null` | A single month or a range of months |
| [(year)] | `TuiYear` | Current year |
| (monthClick) | `TuiMonth` | Selected month |

### Usage Examples

#### Basic

**Template:**
```html
<tui-calendar-month [value]="value" (hoveredItemChange)="onMonthHovered($event)" (monthClick)="onMonthClick($event)" />
<p>Selected month: {{ value }}</p>
<p>Hovered month: {{ hoveredMonth }}</p>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {type TuiMonth} from '@taiga-ui/cdk';
import {TuiCalendarMonth} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [TuiCalendarMonth],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    protected value: TuiMonth | null = null;
    protected hoveredMonth: TuiMonth | null = null;

    protected onMonthClick(month: TuiMonth): void {
        this.value = month;
    }

    protected onMonthHovered(month: TuiMonth | null): void {
        this.hoveredMonth = month;
    }
}
```

#### Range

**Template:**
```html
<tui-calendar-month [max]="max" [min]="min" [value]="value" (monthClick)="onMonthClick($event)" />
<p>Selected value: {{ value }}</p>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiMonth, TuiMonthRange} from '@taiga-ui/cdk';
import {TuiCalendarMonth, tuiCalendarMonthOptionsProvider} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [TuiCalendarMonth],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
    providers: [tuiCalendarMonthOptionsProvider({rangeMode: true})],
})
export default class Example {
    protected value: TuiMonth | TuiMonthRange | null = null;

    protected max = TuiMonth.currentLocal().append({year: 1});
    protected min = new TuiMonth(2019, 7);

    protected onMonthClick(month: TuiMonth): void {
        this.value =
            this.value instanceof TuiMonth
                ? TuiMonthRange.sort(this.value, month)
                : month;
    }
}
```


### TypeScript

```ts
import {Component} from '@angular/core';
import {RouterModule} from '@angular/router';
import {changeDetection} from '@demo/emulate/change-detection';
import {DemoRoute} from '@demo/routes';
import {TuiDemo} from '@demo/utils';
import {
    TUI_FALSE_HANDLER,
    TUI_FIRST_DAY,
    TUI_LAST_DAY,
    type TuiBooleanHandler,
    TuiDay,
    TuiMonth,
    TuiMonthRange,
    TuiYear,
} from '@taiga-ui/cdk';
import {TuiLink} from '@taiga-ui/core';
import {TuiCalendarMonth} from '@taiga-ui/kit';
import {TuiInputMonthRangeModule} from '@taiga-ui/legacy';

@Component({
    standalone: true,
    imports: [RouterModule, TuiCalendarMonth, TuiDemo, TuiInputMonthRangeModule, TuiLink],
    templateUrl: './index.html',
    changeDetection,
})
export default class Example {
    protected readonly examples = ['Basic', 'Range'];

    protected readonly minVariants = [
        TUI_FIRST_DAY,
        new TuiMonth(2019, 2),
        new TuiMonth(2007, 0),
    ];

    protected readonly maxVariants = [
        TUI_LAST_DAY,
        new TuiMonth(2020, 2),
        new TuiMonth(2023, 0),
        new TuiMonth(2019, 4),
    ];

    protected min = this.minVariants[0]!;
    protected max = this.maxVariants[0]!;
    protected maxLength = 0;
    protected minLength = 0;

    protected readonly disabledItemHandlerVariants: ReadonlyArray<
        TuiBooleanHandler<TuiMonth>
    > = [TUI_FALSE_HANDLER, ({month}) => month % 3 === 0];

    protected disabledItemHandler = this.disabledItemHandlerVariants[0]!;

    protected readonly valueVariants: ReadonlyArray<TuiMonth | TuiMonthRange> = [
        TuiDay.currentLocal(),
        new TuiMonthRange(
            TuiDay.currentLocal(),
            TuiDay.currentLocal().append({month: 3}),
        ),
        new TuiMonth(2007, 2),
    ];

    protected value: TuiMonth | TuiMonthRange | null = null;

    protected readonly yearVariants: readonly TuiYear[] = [
        TuiDay.currentLocal(),
        new TuiYear(2007),
    ];

    protected year = this.yearVariants[0]!;
    protected readonly routes = DemoRoute;
}
```

---
# components/CalendarRange
- **Package**: `KIT`
- **Type**: components
Component for choosing date range in calendar

### How to Use (Import)

```ts
import {TuiCalendarRange} from '@taiga-ui/kit';

// ...

@Component({
  standalone: true,
  imports: [
    // ...
    TuiCalendarRange,
  ],
  // ...
})
export class Example {}
```

### How to Use (Template)

```html
<tui-calendar-range />
```

### Example

```html
<tui-calendar-range [defaultViewedMonth]="defaultViewedMonth" [disabledItemHandler]="disabledItemHandler" [items]="items" [markerHandler]="markerHandler" [max]="max" [maxLength]="maxLength" [min]="min" [minLength]="minLength" (valueChange)="documentationPropertyRangeChange.emitEvent($event)" />
```

### API

| Property | Type | Description |
|----------|-----|----------|
| [defaultViewedMonth] | `TuiMonth` | Default month to show |
| [disabledItemHandler] | `TuiBooleanHandler<TuiDay>` |  |
| [items] | `TuiDayRangePeriod[]` | Fixed intervals (shows 2 calendars with empty array) |
| [markerHandler] | `TuiMarkerHandler | null` | A handler that gets date and returns null or a tuple with circled marker colors |
| [min] | `TuiDay | null` | Min date |
| [max] | `TuiDay | null` | Max date |
| [minLength] | `TuiDayLike | null` | Minimal length of range |
| [maxLength] | `TuiDayLike | null` | Maximal length of range |
| (rangeChange) | `TuiDayRange` | Selected date range |

### Usage Examples

#### Basic

**Template:**
```html
<tui-calendar-range />
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiCalendarRange} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [TuiCalendarRange],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {}
```

#### With value

**Template:**
```html
<tui-calendar-range />
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiDay, TuiDayRange} from '@taiga-ui/cdk';
import {TUI_CALENDAR_DATE_STREAM, TuiCalendarRange} from '@taiga-ui/kit';
import {of} from 'rxjs';

export const calendarStream$ = of(
    new TuiDayRange(new TuiDay(2019, 2, 11), new TuiDay(2019, 2, 14)),
);

@Component({
    standalone: true,
    imports: [TuiCalendarRange],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
    providers: [
        {
            provide: TUI_CALENDAR_DATE_STREAM,
            useValue: calendarStream$,
        },
    ],
})
export default class Example {}
```

#### With ranges

**Template:**
```html
<tui-calendar-range [items]="items" />
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiCalendarRange, tuiCreateDefaultDayRangePeriods} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [TuiCalendarRange],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    protected items = tuiCreateDefaultDayRangePeriods();
}
```

#### Localization

**Template:**
```html
<tui-calendar-range />
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiDayOfWeek} from '@taiga-ui/cdk';
import {TUI_FIRST_DAY_OF_WEEK} from '@taiga-ui/core';
import {TuiCalendarRange} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [TuiCalendarRange],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
    providers: [
        {
            provide: TUI_FIRST_DAY_OF_WEEK,
            useValue: TuiDayOfWeek.Sunday,
        },
    ],
})
export default class Example {}
```

#### With another range switcher

**Template:**
```html
<tui-calendar-range [items]="items" [value]="value" [(item)]="selected" (valueChange)="onValue($event)" />
<p *ngIf="isLastVisible">
<button tuiLink type="button" (click)="reset()" > Reset </button>
</p>
<p *ngIf="isSelected && !isDefault"> You are seeing {{ selected }}. <button *ngIf="!isLastVisible" tuiLink type="button" (click)="toggle()" > Switch to {{ opposite }} </button>
</p>
```
**TypeScript:**
```ts
import {NgIf} from '@angular/common';
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiDay, TuiDayRange} from '@taiga-ui/cdk';
import {TuiLink} from '@taiga-ui/core';
import {TuiCalendarRange, TuiDayRangePeriod} from '@taiga-ui/kit';

const today = TuiDay.currentLocal();
const startOfWeek = today.append({day: -today.dayOfWeek()});
const startOfMonth = today.append({day: 1 - today.day});
const startOfQuarter = startOfMonth.append({month: -(startOfMonth.month % 3)});

@Component({
    standalone: true,
    imports: [NgIf, TuiCalendarRange, TuiLink],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly items = [
        new TuiDayRangePeriod(
            new TuiDayRange(today.append({day: -30}), today),
            'Default',
        ),
        new TuiDayRangePeriod(new TuiDayRange(startOfWeek, today), 'Week'),
        new TuiDayRangePeriod(new TuiDayRange(startOfMonth, today), 'Month'),
        new TuiDayRangePeriod(new TuiDayRange(startOfQuarter, today), 'Quarter'),
    ];

    protected selected: TuiDayRangePeriod | null = this.default;
    protected value: TuiDayRange | null = this.default.range;

    public get default(): TuiDayRangePeriod {
        return this.items[0]!;
    }

    public get isDefault(): boolean {
        return this.selected === this.default;
    }

    public get isSelected(): boolean {
        return !!this.items.find((item) => item === this.selected);
    }

    public get isLastVisible(): boolean {
        return this.selected === this.items[this.items.length - 1];
    }

    public get opposite(): TuiDayRangePeriod | null {
        if (!this.isSelected) {
            return null;
        }

        switch (this.selected) {
            case this.default:
                return null;
            case this.items[1]:
                return this.items[2]!;
            case this.items[2]:
                return this.items[3]!;
            case this.items[3]:
                return null;
            default:
                return null;
        }
    }

    public onValue(value: TuiDayRange | null): void {
        this.value = value;
    }

    public reset(): void {
        this.selected = this.default;
        this.value = this.selected.range;
    }

    public toggle(): void {
        this.selected = this.opposite;
        this.value = this.selected?.range ?? null;
    }
}
```


### TypeScript

```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {DemoRoute} from '@demo/routes';
import {TuiDemo} from '@demo/utils';
import {
    TUI_FALSE_HANDLER,
    TUI_FIRST_DAY,
    TUI_LAST_DAY,
    type TuiBooleanHandler,
    TuiDay,
    type TuiDayLike,
    TuiMonth,
} from '@taiga-ui/cdk';
import {TuiLink, type TuiMarkerHandler} from '@taiga-ui/core';
import {
    TuiCalendarRange,
    tuiCreateDefaultDayRangePeriods,
    type TuiDayRangePeriod,
} from '@taiga-ui/kit';

const TWO_DOTS: [string, string] = [
    'var(--tui-background-accent-1)',
    'var(--tui-status-info)',
];
const ONE_DOT: [string] = ['var(--tui-status-positive)'];

@Component({
    standalone: true,
    imports: [TuiCalendarRange, TuiDemo, TuiLink],
    templateUrl: './index.html',
    changeDetection,
})
export default class Example {
    protected readonly examples = [
        'Basic',
        'With value',
        'With ranges',
        'Localization',
        'With another range switcher',
    ];

    protected readonly minVariants = [
        TUI_FIRST_DAY,
        new TuiDay(2017, 2, 5),
        new TuiDay(1900, 0, 1),
    ];

    protected readonly maxVariants = [
        TUI_LAST_DAY,
        new TuiDay(2018, 9, 30),
        new TuiDay(2020, 2, 5),
        new TuiDay(2300, 0, 1),
        TuiDay.currentLocal(),
    ];

    protected readonly disabledItemHandlerVariants: ReadonlyArray<
        TuiBooleanHandler<TuiDay>
    > = [TUI_FALSE_HANDLER, ({day}) => day % 3 === 0];

    protected readonly defaultViewedMonthVariants: readonly TuiMonth[] = [
        TuiMonth.currentLocal(),
        TuiMonth.currentLocal().append({month: 1}),
        new TuiMonth(2007, 5),
    ];

    protected readonly itemsVariants: ReadonlyArray<readonly TuiDayRangePeriod[]> = [
        [],
        tuiCreateDefaultDayRangePeriods(),
    ];

    protected readonly minLengthVariants: readonly TuiDayLike[] = [
        {day: 3},
        {day: 15},
        {month: 1},
        {month: 1, day: 1},
    ];

    protected readonly maxLengthVariants: readonly TuiDayLike[] = [
        {day: 5},
        {month: 1},
        {year: 1},
    ];

    protected readonly markerHandlerVariants: readonly TuiMarkerHandler[] = [
        (day: TuiDay) => (day.day % 2 === 0 ? TWO_DOTS : ONE_DOT),
    ];

    protected markerHandler: TuiMarkerHandler | null = null;
    protected min: TuiDay = this.minVariants[0]!;
    protected max: TuiDay = this.maxVariants[0]!;
    protected cleaner = false;
    protected disabledItemHandler = this.disabledItemHandlerVariants[0]!;
    protected items = this.itemsVariants[0]!;
    protected defaultViewedMonth = this.defaultViewedMonthVariants[0]!;
    protected minLength: TuiDayLike | null = null;
    protected maxLength: TuiDayLike | null = null;
    protected readonly routes = DemoRoute;
}
```

---
# components/CardCollapsed
- **Package**: `LAYOUT`
- **Type**: components

### How to Use (Import)

```ts
import {TuiButton, TuiTitle} from '@taiga-ui/core';
import {TuiExpand, TuiChevron} from '@taiga-ui/kit';
import {TuiCard, TuiHeader} from '@taiga-ui/layout';
// ...

@Component({
  standalone: true,
  imports: [
    // ...
    TuiCard,
    TuiHeader,
    TuiTitle,
    TuiButton,
    TuiChevron,
    TuiExpand,
  ],
})
export class Example {}
```

### How to Use (Template)

```html
<section
  tuiCardLarge
  [tuiCardCollapsed]="collapsed"
>
  <header tuiHeader>
    <hgroup tuiTitle>
      <h2>Title</h2>
      <p tuiSubtitle>Subtitle</p>
    </hgroup>
    <aside tuiAccessories>
      <button
        tuiIconButton
        [tuiChevron]="!collapsed"
        (click)="collapsed = !collapsed"
      >
        Expand
      </button>
    </aside>
  </header>
  <tui-expand [expanded]="!collapsed">...</tui-expand>
</section>
```

### Usage Examples

#### Basic

**Template:**
```html
<section tuiCardLarge="compact" [tuiCardCollapsed]="collapsed()" >
<header tuiHeader="body-m">
<hgroup tuiTitle>
<h2>[31344] Error finding account number when executing the deal</h2>
<p tuiSubtitle> Some clients could encounter an error “Account not found” when selecting the account on the checkout screen </p>
</hgroup>
<aside tuiAccessories>
<button appearance="action-grayscale" iconEnd="@tui.copy" tuiLink type="button" > 237-123-42 </button>
</aside>
</header>
<div tuiCardRow>
<div tuiTitle>
<div tuiSubtitle>Status</div>
<div>
<tui-icon icon="@tui.clock" /> Pending </div>
</div>
<div tuiTitle>
<div tuiSubtitle>Unit</div>
<a href="https://github.com/taiga-family/taiga-ui" rel="noreferrer" target="_blank" tuiLink > Taiga UI </a>
</div>
<div tuiTitle>
<div tuiSubtitle>Category</div>
<div> Angular <tui-badge appearance="neutral" size="s" > Open Source </tui-badge>
</div>
</div>
<button appearance="secondary" size="s" tuiIconButton type="button" [tuiChevron]="!collapsed()" (click)="collapsed.set(!collapsed())" > Expand </button>
</div>
<tui-expand [expanded]="!collapsed()">
<table tuiTable>
<thead>
<tr>
<th tuiTh>Project</th>
<th tuiTh>Version</th>
<th tuiTh>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td tuiTd><b>Taiga UI</b></td>
<td tuiTd>4.32.0</td>
<td tuiTd>Angular UI kit for awesome people</td>
</tr>
<tr>
<td tuiTd><b>Maskito</b></td>
<td tuiTd>3.5.0</td>
<td tuiTd>Holy Grail of input masking for the Web</td>
</tr>
</tbody>
</table>
</tui-expand>
</section>
<section tuiCardLarge="compact">I'm just another card</section>
```
**TypeScript:**
```ts
import {Component, signal} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiTable} from '@taiga-ui/addon-table';
import {TuiButton, TuiIcon, TuiLink, TuiTitle} from '@taiga-ui/core';
import {TuiExpand} from '@taiga-ui/experimental';
import {TuiBadge, TuiChevron} from '@taiga-ui/kit';
import {TuiCard, TuiHeader} from '@taiga-ui/layout';

@Component({
    standalone: true,
    imports: [
        TuiBadge,
        TuiButton,
        TuiCard,
        TuiChevron,
        TuiExpand,
        TuiHeader,
        TuiIcon,
        TuiLink,
        TuiTable,
        TuiTitle,
    ],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    public readonly collapsed = signal(true);
}
```


### TypeScript

```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {TuiDemo} from '@demo/utils';

@Component({
    standalone: true,
    imports: [TuiDemo],
    templateUrl: './index.html',
    changeDetection,
})
export default class Example {
    protected readonly examples = ['Basic'];
}
```

---
# components/CardLarge
- **Package**: `LAYOUT`
- **Type**: components

### How to Use (Import)

```ts
import {Component} from '@angular/core';
import {TuiAppearance} from '@taiga-ui/core';
import {TuiCardLarge} from '@taiga-ui/layout';
// ...

@Component({
  standalone: true,
  imports: [
    // ...
    TuiAppearance,
    TuiCardLarge,
  ],
})
export class Example {}
```

### How to Use (Template)

```html
<div
  tuiCardLarge
  tuiAppearance="floating"
>
  <div tuiHeader>
    <h2 tuiTitle>Header</h2>
  </div>
</div>
```

### Usage Examples

#### Basic

**Template:**
```html
<div tuiPlatform="web">
<h4>Desktop</h4>
<div tuiAppearance="floating" tuiCardLarge >
<header tuiHeader>
<h2 tuiTitle>Header</h2>
</header>
<section>Replace me</section>
<footer>
<button appearance="secondary" size="m" tuiButton type="button" > Label </button>
</footer>
</div>
<div tuiAppearance="floating" tuiCardLarge class="tui-space_top-4" >
<header tuiHeader>
<h2 tuiTitle>Header</h2>
<aside tuiAccessories>
<tui-badge appearance="neutral" iconStart="@tui.heart" size="xl" > Like </tui-badge>
</aside>
</header>
<section>Replace me</section>
</div>
</div>
<div tuiPlatform="ios">
<h4>iOS/Android</h4>
<div tuiAppearance="floating" tuiCardLarge >
<header tuiHeader>
<h2 tuiTitle>Header</h2>
<aside tuiAccessories>
<a tuiLink class="label" > Label </a>
</aside>
</header>
<section>Replace me</section>
<footer>
<button appearance="secondary" size="m" tuiButton type="button" > Label </button>
</footer>
</div>
<div tuiAppearance="floating" tuiCardLarge class="tui-space_top-4" >
<header tuiHeader>
<h2 tuiTitle>Header</h2>
<aside tuiAccessories>
<a tuiLink class="label" > Label </a>
</aside>
</header>
<section>Replace me</section>
</div>
</div>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiPlatform} from '@taiga-ui/cdk';
import {TuiAppearance, TuiButton, TuiLink, TuiTitle} from '@taiga-ui/core';
import {TuiBadge} from '@taiga-ui/kit';
import {TuiCardLarge, TuiHeader} from '@taiga-ui/layout';

@Component({
    standalone: true,
    imports: [
        TuiAppearance,
        TuiBadge,
        TuiButton,
        TuiCardLarge,
        TuiHeader,
        TuiLink,
        TuiPlatform,
        TuiTitle,
    ],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {}
```

#### Image

**Template:**
```html
<div tuiCardLarge tuiHeader class="image-1" >
<h1 tuiTitle> Title <span tuiSubtitle>Subtitle</span>
</h1>
<aside tuiAccessories>
<button appearance="glass" tuiButtonClose tuiIconButton type="button" > Close </button>
</aside>
</div>
<div tuiCardLarge tuiHeader tuiTheme="dark" class="image-2" >
<h1 tuiTitle> Title <span tuiSubtitle>Subtitle</span>
</h1>
<aside tuiAccessories>
<button appearance="glass" tuiButtonClose tuiIconButton type="button" > Close </button>
</aside>
</div>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiButton, TuiTitle} from '@taiga-ui/core';
import {TuiButtonClose} from '@taiga-ui/kit';
import {TuiCardLarge, TuiHeader} from '@taiga-ui/layout';

@Component({
    standalone: true,
    imports: [TuiButton, TuiButtonClose, TuiCardLarge, TuiHeader, TuiTitle],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {}
```

#### Cell with close

**Template:**
```html
<div tuiPlatform="ios">
<h4>iOS/Android</h4>
<div tuiAppearance="floating" tuiCardLarge="compact" tuiCell >
<tui-avatar appearance="primary" src="@tui.star" />
<div tuiTitle>
<div tuiFade tuiFadeHeight="1.2rem" tuiFadeOffset="1.5em" tuiFadeSize="1.5em" [style.block-size.rem]="2.5" > Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit. </div>
<div tuiFade tuiFadeHeight="1rem" tuiFadeOffset="1.5em" tuiFadeSize="1.5em" tuiSubtitle [style.align-items]="'flex-start'" [style.block-size.rem]="2" > Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </div>
</div>
<aside tuiAccessories>
<button tuiButtonClose tuiIconButton type="button" > Close </button>
</aside>
</div>
</div>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiPlatform} from '@taiga-ui/cdk';
import {TuiAppearance, TuiButton, TuiTitle} from '@taiga-ui/core';
import {TuiAvatar, TuiButtonClose, TuiFade} from '@taiga-ui/kit';
import {TuiCardLarge, TuiCell, TuiHeader} from '@taiga-ui/layout';

@Component({
    standalone: true,
    imports: [
        TuiAppearance,
        TuiAvatar,
        TuiButton,
        TuiButtonClose,
        TuiCardLarge,
        TuiCell,
        TuiFade,
        TuiHeader,
        TuiPlatform,
        TuiTitle,
    ],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {}
```

#### Paddings and radii

**Template:**
```html
<div tuiPlatform="web">
<h4>Desktop</h4>
<div tuiAppearance="floating" tuiCardLarge="normal" >
<header tuiHeader>
<h2 tuiTitle> Normal <span tuiSubtitle>Radius: 24, padding: 24</span>
</h2>
</header>
<footer>
<button appearance="secondary" size="m" tuiButton type="button" > Label </button>
</footer>
</div>
<div tuiAppearance="floating" tuiCardLarge="compact" class="tui-space_top-4" >
<header tuiHeader>
<h2 tuiTitle> Compact <span tuiSubtitle>Radius: 16, padding: 20</span>
</h2>
</header>
<footer>
<button appearance="secondary" size="m" tuiButton type="button" > Label </button>
</footer>
</div>
</div>
<div tuiPlatform="ios">
<h4>iOS/Android</h4>
<div tuiAppearance="floating" tuiCardLarge="normal" >
<header tuiHeader="xs">
<h2 tuiTitle> Normal <span tuiSubtitle>Radius: 24, padding: 20</span>
</h2>
</header>
<footer>
<button appearance="secondary" size="m" tuiButton type="button" > Label </button>
</footer>
</div>
<div tuiAppearance="floating" tuiCardLarge="compact" class="tui-space_top-4" >
<header tuiHeader="xs">
<h2 tuiTitle> Compact <span tuiSubtitle>Radius: 16, padding: 16</span>
</h2>
</header>
<footer>
<button appearance="secondary" size="m" tuiButton type="button" > Label </button>
</footer>
</div>
</div>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiPlatform} from '@taiga-ui/cdk';
import {TuiAppearance, TuiButton, TuiTitle} from '@taiga-ui/core';
import {TuiCardLarge, TuiHeader} from '@taiga-ui/layout';

@Component({
    standalone: true,
    imports: [TuiAppearance, TuiButton, TuiCardLarge, TuiHeader, TuiPlatform, TuiTitle],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {}
```

#### Map

**Template:**
```html
<div tuiAppearance="floating" tuiCardLarge >
<header tuiHeader>
<h1 tuiTitle> Title <span tuiSubtitle>Subtitle</span>
</h1>
</header>
<section>
<iframe height="450" loading="lazy" src="https://yandex.ru/map-widget/v1/?um=constructor%3A0ff7188173ceeea1b3c1d5b2ebeaca63ceb70dc60ebc79513c51bb855356a6ac&amp;source=constructor" title="map" width="100%" class="map" ></iframe>
</section>
<footer>
<button appearance="secondary" size="m" tuiButton type="button" > Label </button>
</footer>
</div>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiAppearance, TuiButton, TuiTitle} from '@taiga-ui/core';
import {TuiCardLarge, TuiHeader} from '@taiga-ui/layout';

@Component({
    standalone: true,
    imports: [TuiAppearance, TuiButton, TuiCardLarge, TuiHeader, TuiTitle],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {}
```

#### In portal

**Template:**
```html
<button tuiButton type="button" (click)="step.set(step() || 1)" > Show popover </button>
<div *tuiPopup="!!step()" tuiAnimated tuiAppearance="floating" tuiCardLarge="compact" class="popover" >
<ng-container *ngIf="step() === 1">
<h1 tuiTitle> Leave your feedback <span tuiSubtitle>It will only take 3 minutes</span>
</h1>
<tui-rating [(ngModel)]="rating" />
</ng-container>
<ng-container *ngIf="step() === 2">
<h1 tuiTitle>Why so?</h1>
<tui-textfield tuiTextfieldSize="m">
<textarea placeholder="Leave a few words" tuiAutoFocus tuiTextarea [max]="3" [min]="3" [(ngModel)]="comment" ></textarea>
</tui-textfield>
</ng-container>
<button appearance="icon" iconStart="@tui.x" size="xs" tuiIconButton type="button" class="close" (click)="close()" > Close </button>
<footer class="footer">
<button *ngIf="step() === 2" appearance="secondary" size="s" tuiButton type="button" (click)="step.set(1)" > Back </button>
<button appearance="primary" size="s" tuiButton type="button" (click)="step() === 1 ? step.set(2) : close()" > {{ step() === 1 ? 'Next' : 'Submit' }} </button>
</footer>
</div>
```
**TypeScript:**
```ts
import {NgIf} from '@angular/common';
import {Component, signal} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiAnimated, TuiAutoFocus} from '@taiga-ui/cdk';
import {TuiAppearance, TuiButton, TuiPopup, TuiTextfield, TuiTitle} from '@taiga-ui/core';
import {TuiRating, TuiTextarea} from '@taiga-ui/kit';
import {TuiCardLarge} from '@taiga-ui/layout';

@Component({
    standalone: true,
    imports: [
        FormsModule,
        NgIf,
        TuiAnimated,
        TuiAppearance,
        TuiAutoFocus,
        TuiButton,
        TuiCardLarge,
        TuiPopup,
        TuiRating,
        TuiTextarea,
        TuiTextfield,
        TuiTitle,
    ],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly step = signal(0);
    protected rating = 0;
    protected comment = '';

    protected close(): void {
        this.rating = 0;
        this.comment = '';
        this.step.set(0);
    }
}
```

#### Avatar

**Template:**
```html
<div tuiPlatform="web">
<h4>Desktop</h4>
<div tuiAppearance="floating" tuiCardLarge >
<header tuiHeader>
<h1 tuiTitle> Title <span tuiSubtitle>Subtitle</span>
</h1>
<aside tuiAccessories>
<tui-avatar appearance="primary" src="@tui.star" />
</aside>
</header>
<footer>
<button appearance="secondary" size="m" tuiButton type="button" > Label </button>
</footer>
</div>
</div>
<div tuiPlatform="ios">
<h4>iOS/Android</h4>
<div tuiAppearance="floating" tuiCardLarge >
<div tuiHeader>
<h2 tuiTitle> Title <span tuiSubtitle>Subtitle</span>
</h2>
<aside tuiAccessories>
<tui-avatar appearance="primary" src="@tui.star" />
</aside>
</div>
<footer>
<button appearance="secondary" size="m" tuiButton type="button" > Label </button>
</footer>
</div>
</div>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiPlatform} from '@taiga-ui/cdk';
import {TuiAppearance, TuiButton, TuiTitle} from '@taiga-ui/core';
import {TuiAvatar} from '@taiga-ui/kit';
import {TuiCardLarge, TuiHeader} from '@taiga-ui/layout';

@Component({
    standalone: true,
    imports: [
        TuiAppearance,
        TuiAvatar,
        TuiButton,
        TuiCardLarge,
        TuiHeader,
        TuiPlatform,
        TuiTitle,
    ],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {}
```

#### Single item

**Template:**
```html
<button tuiCardLarge tuiHeader tuiSurface="floating" type="button" >
<h1 tuiTitle> Title <span tuiSubtitle>Subtitle</span>
</h1>
<aside tuiAccessories>
<tui-avatar appearance="primary" src="@tui.star" />
</aside>
</button>
<button tuiCardLarge tuiCell tuiSurface="floating" type="button" >
<tui-avatar appearance="primary" src="@tui.star" />
<div tuiTitle> Title <div tuiSubtitle>Description</div>
</div>
</button>
<section class="actions">
<button tuiCardLarge tuiHeader tuiSurface="floating" type="button" >
<h2 tuiTitle>Title</h2>
<aside tuiAccessories>
<tui-icon icon="@tui.star" tuiAppearance="flat" />
</aside>
</button>
<button tuiCardLarge tuiHeader tuiSurface="floating" type="button" >
<h2 tuiTitle>Title</h2>
<aside tuiAccessories>
<tui-icon icon="@tui.star" tuiAppearance="flat" />
</aside>
</button>
</section>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiAppearance, TuiIcon, TuiSurface, TuiTitle} from '@taiga-ui/core';
import {TuiAvatar} from '@taiga-ui/kit';
import {TuiCardLarge, TuiCell, TuiHeader} from '@taiga-ui/layout';

@Component({
    standalone: true,
    imports: [
        TuiAppearance,
        TuiAvatar,
        TuiCardLarge,
        TuiCell,
        TuiHeader,
        TuiIcon,
        TuiSurface,
        TuiTitle,
    ],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {}
```

#### Cards List

**Template:**
```html
<div tuiAppearance="floating" tuiCardLarge >
<header tuiHeader>
<h1 tuiTitle> Title <span tuiSubtitle>Subtitle</span>
</h1>
</header>
<section>
<div *tuiRepeatTimes="let index of 3" tuiAppearance="neutral" tuiCardMedium >
<tui-icon icon="@tui.square-plus" class="plus" />
<h2 tuiTitle> Title <span tuiSubtitle>Subtitle</span>
</h2>
</div>
</section>
<footer>
<button appearance="secondary" size="m" tuiButton type="button" > Label </button>
</footer>
</div>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiRepeatTimes} from '@taiga-ui/cdk';
import {TuiAppearance, TuiButton, TuiIcon, TuiTitle} from '@taiga-ui/core';
import {TuiCardLarge, TuiCardMedium, TuiHeader} from '@taiga-ui/layout';

@Component({
    standalone: true,
    imports: [
        TuiAppearance,
        TuiButton,
        TuiCardLarge,
        TuiCardMedium,
        TuiHeader,
        TuiIcon,
        TuiRepeatTimes,
        TuiTitle,
    ],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {}
```

#### Cell List

**Template:**
```html
<div tuiAppearance="floating" tuiCardLarge >
<header tuiHeader>
<h1 tuiTitle> Title <span tuiSubtitle>Subtitle</span>
</h1>
</header>
<div *tuiRepeatTimes="let index of 3" tuiCell="l" >
<tui-avatar appearance="primary" src="@tui.star" />
<div tuiTitle> Title <div tuiSubtitle>Description</div>
</div>
</div>
<footer>
<button appearance="secondary" size="m" tuiButton type="button" > Label </button>
</footer>
</div>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiRepeatTimes} from '@taiga-ui/cdk';
import {TuiAppearance, TuiButton, TuiTitle} from '@taiga-ui/core';
import {TuiAvatar} from '@taiga-ui/kit';
import {TuiCardLarge, TuiCell, TuiHeader} from '@taiga-ui/layout';

@Component({
    standalone: true,
    imports: [
        TuiAppearance,
        TuiAvatar,
        TuiButton,
        TuiCardLarge,
        TuiCell,
        TuiHeader,
        TuiRepeatTimes,
        TuiTitle,
    ],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {}
```

#### Cell List (2 columns)

**Template:**
```html
<div tuiAppearance="floating" tuiCardLarge >
<header tuiHeader>
<h1 tuiTitle> Title <span tuiSubtitle>Subtitle</span>
</h1>
</header>
<section class="actions">
<div *tuiRepeatTimes="let index of 6" tuiCell="l" >
<tui-avatar appearance="primary" src="@tui.star" />
<div tuiTitle> Title <div tuiSubtitle>Description</div>
</div>
</div>
</section>
<footer>
<button appearance="secondary" size="m" tuiButton type="button" > Label </button>
</footer>
</div>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiRepeatTimes} from '@taiga-ui/cdk';
import {TuiAppearance, TuiButton, TuiTitle} from '@taiga-ui/core';
import {TuiAvatar} from '@taiga-ui/kit';
import {TuiCardLarge, TuiCell, TuiHeader} from '@taiga-ui/layout';

@Component({
    standalone: true,
    imports: [
        TuiAppearance,
        TuiAvatar,
        TuiButton,
        TuiCardLarge,
        TuiCell,
        TuiHeader,
        TuiRepeatTimes,
        TuiTitle,
    ],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {}
```

#### Cell List (actions)

**Template:**
```html
<div tuiAppearance="floating" tuiCardLarge >
<header tuiHeader>
<h1 tuiTitle> Title <span tuiSubtitle>Subtitle</span>
</h1>
</header>
<button *tuiRepeatTimes="let index of 3" tuiCell="l" tuiDropdownAlign="right" tuiDropdownOpen type="button" [tuiDropdown]="dropdown" [tuiDropdownSided]="true" >
<tui-avatar appearance="primary" src="@tui.star" />
<div tuiTitle> Title <div tuiSubtitle>Description</div>
</div>
<tui-icon icon="@tui.chevron-right" tuiAppearance="icon" />
</button>
<button tuiLink type="button" > Show all </button>
</div>
<ng-template #dropdown let-close >
<tui-data-list>
<tui-opt-group>
<button *ngFor="let item of ['Edit', 'Download', 'Rename', 'Delete']" tuiOption type="button" > {{ item }} </button>
</tui-opt-group>
<tui-opt-group>
<button tuiOption type="button" (click)="close()" > Nevermind </button>
</tui-opt-group>
</tui-data-list>
</ng-template>
```
**TypeScript:**
```ts
import {NgForOf} from '@angular/common';
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiRepeatTimes} from '@taiga-ui/cdk';
import {
    TuiAppearance,
    TuiDataList,
    TuiDropdown,
    TuiIcon,
    TuiLink,
    TuiTitle,
} from '@taiga-ui/core';
import {TuiAvatar} from '@taiga-ui/kit';
import {TuiCardLarge, TuiCell, TuiHeader} from '@taiga-ui/layout';

@Component({
    standalone: true,
    imports: [
        NgForOf,
        TuiAppearance,
        TuiAvatar,
        TuiCardLarge,
        TuiCell,
        TuiDataList,
        TuiDropdown,
        TuiHeader,
        TuiIcon,
        TuiLink,
        TuiRepeatTimes,
        TuiTitle,
    ],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {}
```

#### Cell List (headless)

**Template:**
```html
<div tuiAppearance="floating" tuiCardLarge >
<div *tuiRepeatTimes="let index of 3" tuiCell="l" >
<tui-avatar appearance="primary" src="@tui.star" />
<div tuiTitle> Title <div tuiSubtitle>Description</div>
</div>
</div>
</div>
<div tuiAppearance="floating" tuiCardLarge >
<div tuiCell="l">
<tui-avatar appearance="primary" src="@tui.star" />
<div tuiTitle> Title <div tuiSubtitle>Description</div>
</div>
</div>
<button appearance="secondary" size="m" tuiButton type="button" > Label </button>
</div>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiRepeatTimes} from '@taiga-ui/cdk';
import {TuiAppearance, TuiButton, TuiTitle} from '@taiga-ui/core';
import {TuiAvatar} from '@taiga-ui/kit';
import {TuiCardLarge, TuiCell} from '@taiga-ui/layout';

@Component({
    standalone: true,
    imports: [
        TuiAppearance,
        TuiAvatar,
        TuiButton,
        TuiCardLarge,
        TuiCell,
        TuiRepeatTimes,
        TuiTitle,
    ],
    templateUrl: './index.html',
    styles: [':host { display: flex; flex-direction: column; gap: 2rem}'],
    encapsulation,
    changeDetection,
})
export default class Example {}
```

#### Footer alignment

**Template:**
```html
<div tuiAppearance="floating" tuiCardLarge >
<header tuiHeader>
<h2 tuiTitle>Title</h2>
</header>
<div tuiCell>
<tui-avatar appearance="primary" src="@tui.star" />
<div tuiTitle> Title <div tuiSubtitle>Description</div>
</div>
</div>
<footer>
<button appearance="secondary" size="m" tuiButton type="button" > Label </button>
</footer>
</div>
<div tuiAppearance="floating" tuiCardLarge >
<header tuiHeader>
<h2 tuiTitle>Title</h2>
</header> Some text <footer>
<button appearance="secondary" size="m" tuiButton type="button" > Label </button>
</footer>
</div>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiAppearance, TuiButton, TuiTitle} from '@taiga-ui/core';
import {TuiAvatar} from '@taiga-ui/kit';
import {TuiCardLarge, TuiCell, TuiHeader} from '@taiga-ui/layout';

@Component({
    standalone: true,
    imports: [
        TuiAppearance,
        TuiAvatar,
        TuiButton,
        TuiCardLarge,
        TuiCell,
        TuiHeader,
        TuiTitle,
    ],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {}
```


### TypeScript

```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {TuiDemo} from '@demo/utils';

@Component({
    standalone: true,
    imports: [TuiDemo],
    templateUrl: './index.html',
    changeDetection,
})
export default class Example {
    protected readonly examples = [
        'Basic',
        'Avatar',
        'Single item',
        'Cards List',
        'Cell List',
        'Cell List (2 columns)',
        'Cell List (actions)',
        'Cell List (headless)',
        'Footer alignment',
        'Image',
        'Cell with close',
        'Paddings and radii',
        'Map',
        'In portal',
    ];
}
```

---
# components/CardMedium
- **Package**: `LAYOUT`
- **Type**: components
A layout component used to create various cards for the interface. Define visual styles of the cards
            yourself or combine with
            
                Surface
            
            for visual presets.

### How to Use (Import)

```ts
import {Component} from '@angular/core';
import {TuiCardMedium} from '@taiga-ui/layout';
// ...

@Component({
  standalone: true,
  imports: [
    // ...
    TuiCardMedium,
  ],
})
export class Example {}
```

### How to Use (Template)

```html
<div tuiCardMedium>
  <tui-avatar
    class="star"
    src="@tui.star"
  ></tui-avatar>

  <h2 tuiTitle>
    Title
    <span tuiSubtitle>Subtitle</span>
  </h2>
</div>
```

### Usage Examples

#### Avatar and text

**Template:**
```html
<div tuiAppearance="neutral" tuiCardMedium >
<tui-avatar src="@tui.star" class="star" />
<h2 tuiTitle> Title <span tuiSubtitle>Subtitle</span>
</h2>
</div>
<div tuiAppearance="neutral" tuiCardMedium >
<h2 tuiTitle [style.margin-top]="'auto'" > Title <span tuiSubtitle>Subtitle</span>
</h2>
</div>
<div tuiAppearance="neutral" tuiCardMedium >
<h2 tuiTitle> Title <span tuiSubtitle>Subtitle</span>
</h2>
</div>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiAppearance, TuiTitle} from '@taiga-ui/core';
import {TuiAvatar} from '@taiga-ui/kit';
import {TuiCardMedium} from '@taiga-ui/layout';

@Component({
    standalone: true,
    imports: [TuiAppearance, TuiAvatar, TuiCardMedium, TuiTitle],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {}
```

#### Icon

**Template:**
```html
<div tuiAppearance="floating" tuiCardMedium >
<tui-icon icon="@tui.square-plus" class="plus" />
<h2 tuiTitle> Title <span tuiSubtitle>Subtitle</span>
</h2>
</div>
<div tuiAppearance="floating" tuiCardMedium >
<h2 tuiTitle> Title <span tuiSubtitle>Subtitle</span>
</h2>
<tui-icon icon="@tui.square-plus" class="plus" />
</div>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiAppearance, TuiIcon, TuiTitle} from '@taiga-ui/core';
import {TuiCardMedium} from '@taiga-ui/layout';

@Component({
    standalone: true,
    imports: [TuiAppearance, TuiCardMedium, TuiIcon, TuiTitle],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {}
```

#### Badge

**Template:**
```html
<div tuiAppearance="neutral" tuiCardMedium >
<tui-badge appearance="custom" class="badge" >
<tui-icon icon="@tui.target" /> 10 % </tui-badge>
<h2 tuiTitle> Title <span tuiSubtitle>Subtitle</span>
</h2>
</div>
<div tuiAppearance="neutral" tuiCardMedium >
<h2 tuiTitle> Title <span tuiSubtitle>Subtitle</span>
</h2>
<tui-badge class="badge">
<tui-icon icon="@tui.target" /> 10 % </tui-badge>
</div>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiAppearance, TuiIcon, TuiTitle} from '@taiga-ui/core';
import {TuiBadge} from '@taiga-ui/kit';
import {TuiCardMedium} from '@taiga-ui/layout';

@Component({
    standalone: true,
    imports: [TuiAppearance, TuiBadge, TuiCardMedium, TuiIcon, TuiTitle],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {}
```

#### Stacking

**Template:**
```html
<div tuiAppearance="floating" tuiCardMedium >
<tui-avatar-stack direction="left">
<tui-avatar *ngFor="let url of urls" size="s" [src]="url | tuiFallbackSrc: '@tui.user' | async" [style.background]="url | tuiAutoColor" />
</tui-avatar-stack>
<h2 tuiTitle> Title <span tuiSubtitle>Subtitle</span>
</h2>
</div>
<div tuiAppearance="floating" tuiCardMedium >
<h2 tuiTitle> Title <span tuiSubtitle>Subtitle</span>
</h2>
<tui-avatar-stack direction="left">
<tui-avatar *ngFor="let url of urls" size="s" [src]="url | tuiFallbackSrc: '@tui.user' | async" [style.background]="url | tuiAutoColor" />
</tui-avatar-stack>
</div>
```
**TypeScript:**
```ts
import {AsyncPipe, NgForOf} from '@angular/common';
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {
    TuiAppearance,
    TuiAutoColorPipe,
    TuiFallbackSrcPipe,
    TuiTitle,
} from '@taiga-ui/core';
import {TuiAvatar, TuiAvatarStack} from '@taiga-ui/kit';
import {TuiCardMedium} from '@taiga-ui/layout';

@Component({
    standalone: true,
    imports: [
        AsyncPipe,
        NgForOf,
        TuiAppearance,
        TuiAutoColorPipe,
        TuiAvatar,
        TuiAvatarStack,
        TuiCardMedium,
        TuiFallbackSrcPipe,
        TuiTitle,
    ],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly urls = [
        'https://avatars.githubusercontent.com/u/11832552',
        'https://avatars.githubusercontent.com/u/10106368',
        'https://avatars.githubusercontent.com/u/46284632',
    ];
}
```

#### Customization

**Template:**
```html
<div tuiCardMedium tuiSurface class="poster" >
<h2 tuiTitle> Poster <span tuiSubtitle>Cinema, concerts, theaters and sports up to 25%</span>
</h2>
<tui-badge class="badge">
<tui-icon icon="@tui.target" /> 10% </tui-badge>
</div>
<div tuiCardMedium tuiSurface class="fly" >
<h2 tuiTitle>Flights</h2>
<tui-badge class="badge">
<tui-icon icon="@tui.target" /> 10% </tui-badge>
</div>
<div tuiCardMedium tuiSurface class="google" >
<h2 tuiTitle> Google <span tuiSubtitle>-2.7%</span>
</h2>
<tui-badge class="money">$3,605.2</tui-badge>
</div>
<div tuiCardMedium tuiSurface class="microsoft" >
<h2 tuiTitle> Microsoft <span tuiSubtitle>-12.44%</span>
</h2>
<tui-badge class="money">$1,095.3</tui-badge>
</div>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiIcon, TuiSurface, TuiTitle} from '@taiga-ui/core';
import {TuiBadge} from '@taiga-ui/kit';
import {TuiCardMedium} from '@taiga-ui/layout';

@Component({
    standalone: true,
    imports: [TuiBadge, TuiCardMedium, TuiIcon, TuiSurface, TuiTitle],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {}
```

#### Long text

**Template:**
```html
<div tuiAppearance="neutral" tuiCardMedium tuiTitle >
<span tuiFade class="fade" > Lorem Ipsum is simply dummy text of the printing and typesetting industry. </span>
<span tuiFade="vertical" tuiSubtitle class="fade-vertical" > It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text. </span>
</div>
<div tuiAppearance="neutral" tuiCardMedium tuiTitle > Text without fade out when overflow content <div #text tuiHintDirection="top" tuiSubtitle="" class="nowrap" [tuiHint]="text.innerText" > It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text. </div>
</div>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiAppearance, TuiHint, TuiTitle} from '@taiga-ui/core';
import {TuiFade} from '@taiga-ui/kit';
import {TuiCardMedium} from '@taiga-ui/layout';

@Component({
    standalone: true,
    imports: [TuiAppearance, TuiCardMedium, TuiFade, TuiHint, TuiTitle],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {}
```

#### Selectable

**Template:**
```html
<label tuiCardMedium tuiSurface class="card" >
<img alt="google-pay" src="assets/taiga-ui/icons/google-pay.svg" />
<div tuiFade class="cards" >
<tui-thumbnail-card iconStart="@tui.lock" paymentSystem="mastercard" size="m" > 4572 </tui-thumbnail-card>
<tui-thumbnail-card iconStart="@tui.lock" paymentSystem="mir" size="m" class="mir" > 6733 </tui-thumbnail-card>
<tui-thumbnail-card paymentSystem="visa" size="m" class="visa" > 5212 </tui-thumbnail-card>
</div>
<input tuiSurfaceLayer type="radio" class="selected" [value]="0" [(ngModel)]="value" />
<div tuiRipple tuiSurfaceLayer [style.background-color]="'#fff6c7'" ></div>
</label>
<label tuiCardMedium tuiSurface class="card" >
<img alt="apple-pay" src="assets/taiga-ui/icons/apple-pay.svg" />
<div tuiFade class="cards" >
<tui-thumbnail-card paymentSystem="mir" size="m" class="mir" > 2222 </tui-thumbnail-card>
</div>
<input tuiSurfaceLayer type="radio" [value]="1" [(ngModel)]="value" />
<div tuiRipple tuiSurfaceLayer [style.background-color]="'#d5f6df'" ></div>
</label>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiThumbnailCard} from '@taiga-ui/addon-commerce';
import {TuiRipple} from '@taiga-ui/addon-mobile';
import {TuiSurface} from '@taiga-ui/core';
import {TuiFade} from '@taiga-ui/kit';
import {TuiCardMedium} from '@taiga-ui/layout';

@Component({
    standalone: true,
    imports: [
        FormsModule,
        TuiCardMedium,
        TuiFade,
        TuiRipple,
        TuiSurface,
        TuiThumbnailCard,
    ],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected value = 0;
}
```


### TypeScript

```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {DemoRoute} from '@demo/routes';
import {TuiDemo} from '@demo/utils';

@Component({
    standalone: true,
    imports: [TuiDemo],
    templateUrl: './index.html',
    changeDetection,
})
export default class Example {
    protected readonly examples = [
        'Avatar and text',
        'Icon',
        'Badge',
        'Stacking',
        'Customization',
        'Long text',
        'Selectable',
    ];

    protected readonly surface = DemoRoute.Surface;
}
```

---
# components/Carousel
- **Package**: `KIT`
- **Type**: components
Carousel allows you to rotate through arbitrary items. Multiple items can be shown simultaneously.

### How to Use (Import)

```ts
import {TuiCarousel} from '@taiga-ui/kit';

// ...

@Component({
  standalone: true,
  imports: [
    // ...
    TuiCarousel,
  ],
  // ...
})
export class Example {}
```

### How to Use (Template)

```html
<tui-carousel>
  <div *tuiItem>Slide 1</div>
  <div *tuiItem>Slide 2</div>
  <div *tuiItem>Slide 3</div>
</tui-carousel>
```

### Example

```html
<tui-carousel class="carousel" [draggable]="draggable" [duration]="duration" [itemsCount]="itemsCount" [style.--tui-carousel-padding]="itemPadding" [(index)]="index" (touchstart.passive.stop)="(0)" >
<ng-container *tuiRepeatTimes="let item of 9">
<div *tuiItem class="plate" > {{ item }} <button size="s" tuiButton type="button" class="button" > I'm focusable </button>
</div>
</ng-container>
</tui-carousel>
```

### API

| Property | Type | Description |
|----------|-----|----------|
| [draggable] | `boolean` | Whether or not slider can be dragged by clicking and holding |
| [duration] | `number` | Duration in milliseconds for each slide for automatic rotation (use 0 to disable automatic rotation) |
| [itemsCount] | `number` | Number of slides shown at the same time |
| [(index)] | `number` | Current index |

### Usage Examples

#### Single

**Template:**
```html
<tui-carousel [duration]="4000" [(index)]="index" >
<ng-container *ngFor="let item of items">
<div *tuiItem class="item" >
<h2 class="title">{{ item }}</h2>
<!-- TODO: update documentation here -->
<a tuiButton [attr.href]="'https://en.wikipedia.org/wiki/' + item" > Wiki </a>
</div>
</ng-container>
</tui-carousel>
<tui-pagination size="s" class="pagination" [length]="items.length" [(index)]="index" />
```
**TypeScript:**
```ts
import {NgFor} from '@angular/common';
import {Component, inject} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiButton} from '@taiga-ui/core';
import {TuiCarousel, TuiPagination} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [NgFor, TuiButton, TuiCarousel, TuiPagination],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected index = 2;
    protected readonly items = inject<readonly string[]>('Pythons' as any);
}
```

#### Multiple

**Template:**
```html
<tui-carousel [draggable]="true" [itemsCount]="3" [(index)]="index" >
<ng-container *ngFor="let item of items; let i = index">
<img *tuiItem alt="" draggable="false" class="item" [class.item_active]="i === index + 1" [src]="'assets/images/' + item" />
</ng-container>
</tui-carousel>
```
**TypeScript:**
```ts
import {NgFor} from '@angular/common';
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiCarousel} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [NgFor, TuiCarousel],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected index = 0;

    protected readonly items = [
        'angular.svg',
        'avatar.jpg',
        'angular.svg',
        'avatar.jpg',
        'angular.svg',
        'avatar.jpg',
    ];
}
```

#### Custom

**Template:**
```html
<div tuiCarouselButtons class="wrapper" >
<button iconStart="@tui.chevron-left" tuiIconButton type="button" (click)="carousel.prev()" > Previous </button>
<tui-carousel #carousel class="carousel" >
<div *tuiItem class="item" >
<h2 class="title">Monty Python and the Holy Grail</h2>
<p> King Arthur and his Knights of the Round Table embark on a surreal, low-budget search for the Holy Grail, encountering many, very silly obstacles. </p>
<div>
<button appearance="primary" tuiButton type="button" > Buy ${{ 12.99 | tuiAmount: 'RUB' | async }} </button>
<button tuiButton type="button" class="tui-space_left-2" > Rent ${{ 4.99 | tuiAmount: 'RUB' | async }} </button>
</div>
</div>
<div *tuiItem class="item" >
<tui-loader />
</div>
<div *tuiItem class="item" [style.text-align]="'center'" >
<h2 class="title">Failed to load</h2>
<p>
<tui-avatar appearance="negative" src="@tui.x" />
</p>
</div>
</tui-carousel>
<button iconStart="@tui.chevron-right" tuiIconButton type="button" (click)="carousel.next()" > Next </button>
</div>
```
**TypeScript:**
```ts
import {AsyncPipe} from '@angular/common';
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiAmountPipe} from '@taiga-ui/addon-commerce';
import {TuiButton, TuiLoader} from '@taiga-ui/core';
import {TuiAvatar, TuiCarousel} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [AsyncPipe, TuiAmountPipe, TuiAvatar, TuiButton, TuiCarousel, TuiLoader],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {}
```

#### Carousel inside dialog

**Template:**
```html
<button size="m" tuiButton type="button" (click)="onClick()" > Show dialog with carousel </button>
<ng-template #header>
<div class="header" [style.background-image]="background" ></div>
</ng-template>
<ng-template [tuiDialogOptions]="{size: 's', header: header}" [(tuiDialog)]="open" >
<div tuiCarouselButtons class="wrapper" (touchstart.passive.stop)="(0)" >
<button appearance="neutral" iconStart="@tui.chevron-left" tuiIconButton tuiTheme="dark" type="button" class="tui-space_right-4" (click)="navigate(-1)" > Previous </button>
<tui-carousel [(index)]="index">
<div *tuiItem>
<h2>Carousel is awesome</h2>
<p>It can show arbitrary content and it's very easy to control</p>
</div>
<div *tuiItem>
<h2>Pagination</h2>
<p> You can use <a tuiLink [routerLink]="routes.Pagination" > Pagination </a> component with size 's' together with it </p>
</div>
<div *tuiItem>
<h2>Buttons</h2>
<p> Use <code>tuiCarouselButtons</code> directive to setup navigation buttons </p>
</div>
</tui-carousel>
<button appearance="neutral" iconStart="@tui.chevron-right" tuiIconButton tuiTheme="dark" type="button" class="tui-space_left-4" (click)="navigate(1)" > Next </button>
</div>
<tui-pagination size="s" class="tui-space_top-4" [length]="3" [(index)]="index" />
<div class="tui-space_top-4">
<button appearance="primary" tuiButton type="button" (click)="open = false" > Got it! </button>
</div>
</ng-template>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {RouterLink} from '@angular/router';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {DemoRoute} from '@demo/routes';
import {TuiButton, TuiDialog, TuiLink} from '@taiga-ui/core';
import {TuiCarousel, TuiPagination} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [RouterLink, TuiButton, TuiCarousel, TuiDialog, TuiLink, TuiPagination],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly routes = DemoRoute;
    protected open = false;

    protected index = 0;

    protected get background(): string {
        switch (this.index) {
            case 0:
                return 'url(https://cdn.tvc.ru/pictures/mood/bw/194/22.jpg)';
            case 1:
                return 'url(https://ic.pics.livejournal.com/ruhtal/6943012/12468/12468_900.jpg)';
            default:
                return 'url(https://cdn.motor1.com/images/mgl/28bxz/s1/ford-carousel.jpg)';
        }
    }

    protected onClick(): void {
        this.index = 0;
        this.open = true;
    }

    protected navigate(delta: number): void {
        this.index = (this.index + delta) % 3;
    }
}
```

#### Vertical alignment

**Template:**
```html
<tui-carousel [itemsCount]="3" [(index)]="index" >
<ng-container *ngFor="let item of items">
<div *tuiItem class="item" >
<h2 class="title">{{ item.title }}</h2> {{ item.content }} </div>
</ng-container>
</tui-carousel>
<tui-pagination size="s" class="tui-space_top-4" [index]="rounded" [length]="items.length / itemsCount" (indexChange)="onIndex($event)" />
```
**TypeScript:**
```ts
import {NgFor} from '@angular/common';
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiCarousel, TuiPagination} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [NgFor, TuiCarousel, TuiPagination],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected index = 0;

    protected readonly itemsCount = 3;

    protected readonly items = [
        {title: 'First', content: 'First content'},
        {title: 'Title #2', content: 'Much more content here so the height is bigger'},
        {title: 'Title III', content: 'Small item again'},
        {title: 'Title four', content: 'Relatively ling content here'},
        {title: 'Fifth item', content: 'Tiny text'},
        {title: '6', content: "That one's short too"},
        {title: 'Lucky 7', content: 'This takes about two lines or so'},
        {title: 'Eighth card', content: 'Almost the last one'},
        {title: 'X', content: 'This is the longest item there is in this list'},
    ];

    protected get rounded(): number {
        return Math.floor(this.index / this.itemsCount);
    }

    protected onIndex(index: number): void {
        this.index = index * this.itemsCount;
    }
}
```


### TypeScript

```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {TuiDemo} from '@demo/utils';
import {TuiRepeatTimes} from '@taiga-ui/cdk';
import {TuiButton} from '@taiga-ui/core';
import {TuiCarousel} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [TuiButton, TuiCarousel, TuiDemo, TuiRepeatTimes],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    changeDetection,
})
export default class Example {
    protected readonly examples = [
        'Single',
        'Multiple',
        'Custom',
        'Carousel inside dialog',
        'Vertical alignment',
    ];

    protected readonly durationVariants = [0, 3000, 10000];
    protected readonly itemPaddingVariants = [null, '0 10px', '0'];
    protected draggable = false;
    protected duration = this.durationVariants[0]!;
    protected itemPadding: string | null = this.itemPaddingVariants[0]!;
    protected index = 0;
    protected itemsCount = 1;
}
```

### LESS

```less
@import '@taiga-ui/core/styles/taiga-ui-local';

.carousel {
    margin: 0 2.5rem;
    border: 1px solid var(--tui-background-accent-1);
}

.plate {
    display: flex;
    font: var(--tui-font-heading-3);
    flex-direction: column;
    align-items: flex-start;
    inline-size: 100%;
    block-size: 7.5rem;
    padding: 1.75rem;
    box-sizing: border-box;
    background: var(--tui-background-neutral-1);
}

.button {
    margin-block-start: 0.5rem;
}
```

---
# components/Cell
- **Package**: `LAYOUT`
- **Type**: components

### How to Use (Import)

```ts
import {Component} from '@angular/core';
import {TuiCell} from '@taiga-ui/layout';
// ...

@Component({
  imports: [
    // ...
    TuiCell,
  ],
})
export class Example {}
```

### How to Use (Template)

```html
<div tuiCell>
  <tui-avatar src="..."></tui-avatar>
  <div tuiTitle>
    Title
    <div tuiSubtitle>Subtitle</div>
  </div>
  <button tuiButton>Action</button>
</div>
```

### Example

```html
<div [tuiCell]="size" [tuiCellHeight]="height" >
<tui-avatar *ngIf="height !== 'compact'" appearance="primary" src="@tui.star" />
<div tuiTitle> Title <div *ngIf="height !== 'compact'" tuiSubtitle > Description </div>
</div>
<div tuiTitle> Secondary title <div *ngIf="height !== 'compact'" tuiSubtitle > Another description </div>
</div>
</div>
```

### API

| Property | Type | Description |
|----------|-----|----------|
| [tuiCell] | `'l' | 'm' | 's'` | Layout size |
| [tuiCellHeight] | `'normal' | 'compact' | 'spacious'` | Height mode |

### Usage Examples

#### Basic

**Template:**
```html
<div *ngFor="let size of sizes" [tuiCell]="size" >
<tui-avatar appearance="primary" src="@tui.star" />
<div tuiTitle> Title <div tuiSubtitle>Description</div>
</div>
<div tuiTitle> Secondary title <div tuiSubtitle>Another description</div>
</div>
</div>
```
**TypeScript:**
```ts
import {NgFor} from '@angular/common';
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiTitle} from '@taiga-ui/core';
import {TuiAvatar} from '@taiga-ui/kit';
import {TuiCell} from '@taiga-ui/layout';

@Component({
    standalone: true,
    imports: [NgFor, TuiAvatar, TuiCell, TuiTitle],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly sizes = ['s', 'm', 'l'] as const;
}
```

#### Label

**Template:**
```html
<label tuiCell>
<tui-badged-content>
<tui-icon appearance="negative" icon="@tui.arrow-down-left" size="s" tuiBadge tuiSlot="top" />
<tui-avatar size="s" src="@tui.phone" />
</tui-badged-content>
<div tuiTitle [style.color]="'var(--tui-text-negative)'" > Allow incoming <div tuiSubtitle>Why would you?</div>
</div>
<input tuiSwitch type="checkbox" [(ngModel)]="incoming" />
</label>
<label tuiCell>
<tui-badged-content>
<tui-icon appearance="positive" icon="@tui.arrow-up-right" size="s" tuiBadge tuiSlot="top" />
<tui-avatar size="s" src="@tui.phone" />
</tui-badged-content>
<div tuiTitle>Allow outgoing</div>
<input tuiSwitch type="checkbox" [(ngModel)]="outgoing" />
</label>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiIcon, TuiTitle} from '@taiga-ui/core';
import {TuiAvatar, TuiBadge, TuiBadgedContent, TuiSwitch} from '@taiga-ui/kit';
import {TuiCell} from '@taiga-ui/layout';

@Component({
    standalone: true,
    imports: [
        FormsModule,
        TuiAvatar,
        TuiBadge,
        TuiBadgedContent,
        TuiCell,
        TuiIcon,
        TuiSwitch,
        TuiTitle,
    ],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected incoming = false;
    protected outgoing = true;
}
```

#### Left side

**Template:**
```html
<div tuiCell>
<label tuiProgressLabel>
<tui-icon icon="@tui.smile" [style.color]="'var(--tui-background-accent-1)'" />
<tui-progress-circle size="s" [value]="0.3" />
</label>
<div tuiTitle>
<strong>$30 our of $100</strong>
<div tuiSubtitle>Saving for a Benjamin Franklin portrait</div>
</div>
<div tuiTitle>
<tui-badge appearance="positive" size="s" > +$30 </tui-badge>
<div tuiSubtitle>&nbsp;</div>
</div>
</div>
<div tuiCell>
<tui-avatar-stack>
<tui-avatar src="assets/images/avatar.jpg" />
<tui-avatar src="assets/images/poorly.png" />
<tui-avatar>+2</tui-avatar>
</tui-avatar-stack>
<div tuiTitle> Waterplea <div tuiSubtitle>
<tui-badge appearance="neutral" size="s" >
<tui-icon icon="@tui.lock" /> 100 ₽ </tui-badge> Music <tui-icon appearance="positive" icon="@tui.bell" size="s" tuiBadge />
</div>
</div>
<a href="https://waterplea.bandcamp.com" tuiLink > Buy </a>
</div>
<div tuiCell>
<input tuiCheckbox type="checkbox" [(ngModel)]="value" />
<tui-thumbnail-card paymentSystem="mastercard" size="s" > 1234 </tui-thumbnail-card>
<div tuiTitle> Primary Card <div tuiSubtitle>**** **** **** 1234</div>
</div>
</div>
<div tuiCell>
<img alt="Poster" src="https://m.media-amazon.com/images/M/MV5BNzQzMzJhZTEtOWM4NS00MTdhLTg0YjgtMjM4MDRkZjUwZDBlXkEyXkFqcGdeQXVyNjU0OTQ0OTY@._V1_UY209_CR0,0,140,209_AL_.jpg" [style.border-radius.rem]="0.5" [style.width.rem]="3" />
<div tuiTitle>
<div tuiSubtitle>Ridley Scott, 1982</div> Blade Runner <div tuiSubtitle> A blade runner must pursue and terminate four replicants who stole a ship in space and have returned to Earth to find their creator. </div>
</div>
</div>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiThumbnailCard} from '@taiga-ui/addon-commerce';
import {TuiIcon, TuiLink, TuiTitle} from '@taiga-ui/core';
import {
    TuiAvatar,
    TuiAvatarStack,
    TuiBadge,
    TuiCheckbox,
    TuiProgress,
} from '@taiga-ui/kit';
import {TuiCell} from '@taiga-ui/layout';

@Component({
    standalone: true,
    imports: [
        FormsModule,
        TuiAvatar,
        TuiAvatarStack,
        TuiBadge,
        TuiCell,
        TuiCheckbox,
        TuiIcon,
        TuiLink,
        TuiProgress,
        TuiThumbnailCard,
        TuiTitle,
    ],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected value = false;
}
```

#### Right side

**Template:**
```html
<a href="https://github.com/taiga-family/taiga-ui" tuiCell >
<div tuiTitle>Notifications</div>
<tui-badge-notification size="l">3</tui-badge-notification>
<tui-icon tuiTooltip="A cell can be a link" (click.prevent)="(0)" />
<div tuiSubtitle> Read <tui-icon icon="@tui.chevron-right" />
</div>
</a>
<label tuiCell>
<div tuiTitle> A label <div tuiSubtitle>Clicking it will toggle checkbox</div>
</div>
<tui-loader />
<input tuiCheckbox type="checkbox" [(ngModel)]="value" />
</label>
<button tuiCell type="button" >
<div tuiTitle>
<div tuiSubtitle>
<span [style.color]="'var(--tui-text-positive)'">For sale</span> • <span>ebay</span>
</div> It can be a button <div tuiSubtitle>In stock</div>
</div>
<div tuiTitle>
<div tuiSubtitle>&nbsp;</div> $237 <div tuiSubtitle>321 items</div>
</div>
</button>
<div tuiCell>
<tui-avatar src="assets/images/avatar.jpg" />
<div tuiTitle>Salary</div>
<div tuiTitle>
<span [style.color]="'var(--tui-text-positive)'" [tuiSensitive]="true" > Enough </span>
<div tuiSubtitle>Sky's the limit</div>
</div>
</div>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiIcon, TuiLoader, TuiTitle} from '@taiga-ui/core';
import {
    TuiAvatar,
    TuiBadgeNotification,
    TuiCheckbox,
    TuiSensitive,
    TuiTooltip,
} from '@taiga-ui/kit';
import {TuiCell} from '@taiga-ui/layout';

@Component({
    standalone: true,
    imports: [
        FormsModule,
        TuiAvatar,
        TuiBadgeNotification,
        TuiCell,
        TuiCheckbox,
        TuiIcon,
        TuiLoader,
        TuiSensitive,
        TuiTitle,
        TuiTooltip,
    ],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected value = false;
}
```

#### Long content

**Template:**
```html
<div tuiCell>
<tui-avatar src="@tui.eye" tuiAccessories />
<div tuiTitle> Long title in a cell will wrap to multiple lines and so will the subtitle <div tuiSubtitle [style.display]="'block'" > Use <strong>tuiAccessories</strong> to keep your side content properly aligned if you have many lines of text </div>
</div>
<div tuiAccessories>
<tui-icon icon="@tui.check" [style.color]="'var(--tui-text-positive)'" />
</div>
</div>
<div tuiCell [style.white-space]="'nowrap'" >
<div tuiFade tuiTitle > Alternatively you can use fade to hide extra text using nowrap CSS <div tuiSubtitle>Works the same for subtitle when fade directive is applied to the top</div>
</div>
<tui-badge>Works with the right side</tui-badge>
</div>
<div tuiCell [style.white-space]="'nowrap'" >
<tui-avatar src="@tui.smile" [round]="false" />
<div tuiFade tuiTitle > Works with fade on both sides <div tuiSubtitle>You can control proportions</div>
</div>
<div tuiFade tuiTitle > Proportions are controlled with flex <div tuiSubtitle>Flex shrink is set to 70-30 by default</div>
</div>
<tui-badge-notification size="xs" />
</div>
<div tuiCell>
<tui-avatar src="assets/images/avatar.jpg" tuiAccessories />
<div tuiAccessories tuiTitle > Alexander <div tuiSubtitle>Taiga UI developer</div>
</div>
<div tuiTitle>
<span [style.color]="'var(--tui-text-positive)'">+$1000</span>
<div tuiSubtitle>Bonus for tuiCell component</div>
<tui-badge appearance="primary">Awesome!</tui-badge>
</div>
</div>
<div tuiCell>
<tui-avatar src="@tui.home" tuiAccessories />
<div tuiTitle>
<strong>Main account</strong>
<div tuiSubtitle>USD</div>
<tui-badge appearance="neutral">By default unless arrested</tui-badge>
</div>
<div tuiAccessories tuiTitle [style.white-space]="'nowrap'" [style.width]="0" > $123 456 <div tuiSubtitle>Careful, content may overlap</div>
</div>
</div>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiIcon, TuiTitle} from '@taiga-ui/core';
import {TuiAvatar, TuiBadge, TuiBadgeNotification, TuiFade} from '@taiga-ui/kit';
import {TuiCell} from '@taiga-ui/layout';

@Component({
    standalone: true,
    imports: [
        TuiAvatar,
        TuiBadge,
        TuiBadgeNotification,
        TuiCell,
        TuiFade,
        TuiIcon,
        TuiTitle,
    ],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {}
```

#### Actions

**Template:**
```html
<div tuiCell>
<div tuiTitle> Single action <div tuiSubtitle>Description of the action</div>
</div>
<button tuiButton type="button" > Action </button>
</div>
<div tuiCell>
<div tuiTitle> Multiple actions <div tuiSubtitle>With no content on the right</div>
</div>
<button appearance="icon" iconStart="@tui.ellipsis" tuiDropdownAlign="right" tuiDropdownOpen tuiIconButton type="button" [tuiDropdown]="dropdown" > Action </button>
<ng-template #dropdown let-close >
<tui-data-list-wrapper [items]="items" (itemClick)="close()" />
</ng-template>
</div>
<button tuiCell type="button" >
<div tuiTitle> Multiple actions <div tuiSubtitle>When there's content on the right</div>
</div>
<div tuiCellActions tuiGroup tuiTheme="dark" [collapsed]="true" >
<button *ngFor="let item of items" appearance="primary-grayscale" tuiIconButton type="button" [iconStart]="item.icon" > {{ item }} </button>
</div>
<div tuiTitle> Hover over <div tuiSubtitle>Put it before the right side</div>
</div>
</button>
```
**TypeScript:**
```ts
import {NgFor} from '@angular/common';
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiButton, TuiDropdown, TuiGroup, TuiTitle} from '@taiga-ui/core';
import {TuiDataListWrapper} from '@taiga-ui/kit';
import {TuiCell} from '@taiga-ui/layout';

@Component({
    standalone: true,
    imports: [
        NgFor,
        TuiButton,
        TuiCell,
        TuiDataListWrapper,
        TuiDropdown,
        TuiGroup,
        TuiTitle,
    ],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly items = [
        {
            icon: '@tui.phone',
            toString: () => 'Call now',
        },
        {
            icon: '@tui.star',
            toString: () => 'Add to favorites',
        },
        {
            icon: '@tui.trash',
            toString: () => 'Remove item',
        },
    ];
}
```

#### Combinations

**Template:**
```html
<tui-notification> Don't forget import <code>TuiCardLarge</code>
</tui-notification>
<div tuiAppearance="floating" tuiCardLarge >
<h3 tuiTitle="m">Inside a block</h3>
<button *ngFor="let item of items" tuiCell type="button" >
<tui-avatar appearance="accent" [src]="item.icon" />
<span tuiTitle> {{ item.title }} <span tuiSubtitle>{{ item.subtitle }}</span>
</span>
</button>
</div>
<label> Inside a dropdown <tui-textfield tuiChevron [content]="content" [tuiTextfieldCleaner]="false" >
<input tuiSelect [(ngModel)]="value" />
<tui-data-list-wrapper *tuiTextfieldDropdown new [itemContent]="content" [items]="items" />
<ng-template #content let-item >
<span tuiCell>
<tui-avatar appearance="primary" [src]="item.icon" />
<span tuiTitle> {{ item.title }} <span tuiSubtitle>{{ item.subtitle }}</span>
</span>
</span>
</ng-template>
</tui-textfield>
</label>
```
**TypeScript:**
```ts
import {NgFor} from '@angular/common';
import {Component} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiAppearance, TuiNotification, TuiTextfield, TuiTitle} from '@taiga-ui/core';
import {TuiAvatar, TuiChevron, TuiDataListWrapper, TuiSelect} from '@taiga-ui/kit';
import {TuiCardLarge, TuiCell} from '@taiga-ui/layout';

@Component({
    standalone: true,
    imports: [
        FormsModule,
        NgFor,
        TuiAppearance,
        TuiAvatar,
        TuiCardLarge,
        TuiCell,
        TuiChevron,
        TuiDataListWrapper,
        TuiNotification,
        TuiSelect,
        TuiTextfield,
        TuiTitle,
    ],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly items = [
        {
            icon: '@tui.eye',
            title: 'Show more',
            subtitle: 'Ctrl + Shift + M',
        },
        {
            icon: '@tui.mail',
            title: 'Send message',
            subtitle: 'Keep it short',
        },
        {
            icon: '@tui.lock',
            title: 'Access',
            subtitle: 'Block your account',
        },
    ];

    protected value = this.items[0]!;
}
```

#### Connected

**Template:**
```html
<tui-notification> Can be attached as host directive: <code>hostDirectives: [TuiConnected]</code>
</tui-notification>
<div tuiAppearance="floating" tuiCardLarge tuiConnected >
<h3 tuiTitle="m">Inside a block</h3>
<button *ngFor="let item of items" tuiCell type="button" >
<tui-avatar appearance="accent" [src]="item.icon" />
<span tuiTitle> {{ item.title }} <span tuiSubtitle>{{ item.subtitle }}</span>
</span>
</button>
</div>
<div tuiConnected>
<label tuiCell>
<tui-badged-content>
<tui-icon appearance="negative" icon="@tui.arrow-down-left" size="s" tuiBadge tuiSlot="top" />
<tui-avatar src="@tui.phone" />
</tui-badged-content>
<div tuiTitle [style.color]="'var(--tui-text-negative)'" > Allow incoming <div tuiSubtitle>Why would you?</div>
</div>
<input tuiSwitch type="checkbox" [(ngModel)]="incoming" />
</label>
<label tuiCell>
<tui-badged-content tuiAccessories>
<tui-icon appearance="positive" icon="@tui.arrow-up-right" size="s" tuiBadge tuiSlot="top" />
<tui-avatar src="@tui.phone" />
</tui-badged-content>
<div tuiTitle>Allow outgoing unusual call that can change your life in an unusual way</div>
<div tuiAccessories>
<input tuiSwitch type="checkbox" [(ngModel)]="outgoing" />
</div>
</label>
<label tuiCell>
<tui-badged-content>
<tui-icon appearance="negative" icon="@tui.arrow-down-left" size="s" tuiBadge tuiSlot="top" />
<tui-avatar src="@tui.phone" />
</tui-badged-content>
<div tuiTitle [style.color]="'var(--tui-text-negative)'" > Allow incoming <div tuiSubtitle>Why would you?</div>
</div>
<input tuiSwitch type="checkbox" [(ngModel)]="incoming" />
</label>
</div>
```
**TypeScript:**
```ts
import {NgFor} from '@angular/common';
import {Component} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiAppearance, TuiIcon, TuiNotification, TuiTitle} from '@taiga-ui/core';
import {
    TuiAvatar,
    TuiBadge,
    TuiBadgedContent,
    TuiConnected,
    TuiDataListWrapper,
    TuiSwitch,
} from '@taiga-ui/kit';
import {TuiCardLarge, TuiCell} from '@taiga-ui/layout';
import {TuiSelectModule, TuiTextfieldControllerModule} from '@taiga-ui/legacy';

@Component({
    standalone: true,
    imports: [
        FormsModule,
        NgFor,
        TuiAppearance,
        TuiAvatar,
        TuiBadge,
        TuiBadgedContent,
        TuiCardLarge,
        TuiCell,
        TuiConnected,
        TuiDataListWrapper,
        TuiIcon,
        TuiNotification,
        TuiSelectModule,
        TuiSwitch,
        TuiTextfieldControllerModule,
        TuiTitle,
    ],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly items = [
        {
            icon: '@tui.eye',
            title: 'Show more',
            subtitle: 'Ctrl + Shift + M',
        },
        {
            icon: '@tui.mail',
            title: 'Send message',
            subtitle:
                'Allow outgoing unusual call that can change your life in an unusual way',
        },
        {
            icon: '@tui.lock',
            title: 'Access',
            subtitle: 'Block your account',
        },
    ];

    protected value = this.items[0]!;

    protected incoming = false;
    protected outgoing = true;
}
```

#### Disabled state

**Template:**
```html
<button disabled tuiCell type="button" >
<div tuiTitle>Disabled cell</div>
<tui-badge-notification size="l">1</tui-badge-notification>
<tui-icon tuiTooltip="A cell can be a button" (click.prevent)="(0)" />
<div tuiSubtitle>Hint enabled</div>
</button>
<label tuiAppearance tuiAppearanceState="disabled" tuiCell >
<div tuiTitle> A disabled label <div tuiSubtitle>Clicking it will not toggle checkbox</div>
</div>
<tui-loader />
<input disabled tuiCheckbox type="checkbox" [(ngModel)]="value" />
<tui-icon tuiTooltip="Hint enabled" />
</label>
<tui-loader class="cell">
<button tuiCell type="button" >
<div tuiTitle>Disabled cell</div>
<div tuiCellActions tuiTheme="dark" >
<button appearance="primary-grayscale" iconStart="@tui.phone" tuiIconButton type="button" > Call me </button>
</div>
<div tuiTitle> Hover over <div tuiSubtitle>Put it before the right side</div>
</div>
</button>
</tui-loader>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiAppearance, TuiButton, TuiIcon, TuiLoader, TuiTitle} from '@taiga-ui/core';
import {TuiBadgeNotification, TuiCheckbox, TuiTooltip} from '@taiga-ui/kit';
import {TuiCell} from '@taiga-ui/layout';

@Component({
    standalone: true,
    imports: [
        FormsModule,
        TuiAppearance,
        TuiBadgeNotification,
        TuiButton,
        TuiCell,
        TuiCheckbox,
        TuiIcon,
        TuiLoader,
        TuiTitle,
        TuiTooltip,
    ],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected value = false;
}
```


### TypeScript

```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {TuiDemo} from '@demo/utils';
import {tuiDocExampleOptionsProvider} from '@taiga-ui/addon-doc';
import {TuiTitle} from '@taiga-ui/core';
import {TuiAvatar} from '@taiga-ui/kit';
import {TuiCell, type TuiCellOptions} from '@taiga-ui/layout';

@Component({
    standalone: true,
    imports: [TuiAvatar, TuiCell, TuiDemo, TuiTitle],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    changeDetection,
    providers: [tuiDocExampleOptionsProvider({fullsize: true})],
})
export default class Example {
    protected sizes = ['l', 'm', 's'] as const;
    protected size: TuiCellOptions['size'] = this.sizes[0];

    protected heights = ['normal', 'compact', 'spacious'] as const;
    protected height: TuiCellOptions['height'] = this.heights[0];

    protected readonly examples = [
        'Basic',
        'Label',
        'Left side',
        'Right side',
        'Long content',
        'Actions',
        'Combinations',
        'Connected',
        'Disabled state',
    ];
}
```

### LESS

```less
:host {
    tui-doc-demo::ng-deep .t-content {
        background: var(--tui-background-neutral-1);
    }

    [tuiCell] {
        background: var(--tui-background-elevation-1);
    }
}
```

---
# components/Checkbox
- **Package**: `KIT`
- **Type**: components
A checkbox component that is able to imitate native control on mobile platforms.

        
            Use
            --tui-background-accent-2
            CSS variable to customize color of native control emulation

### How to Use (Import)

```ts
import {Component} from '@angular/core';
import {TuiCheckbox} from '@taiga-ui/kit';
// ...

@Component({
  standalone: true,
  imports: [
    // ...
    TuiCheckbox,
  ],
})
export class Example {}
```

### How to Use (Template)

```html
<input
  tuiCheckbox
  type="checkbox"
  [(ngModel)]="value"
/>
```

### Usage Examples

#### Platforms

Add import of &#64;taiga-ui/addon-mobile/styles/taiga-ui-mobile.less to your encapsulated global styles to enable power of TuiPlatform directive.

**Template:**
```html
<div *ngFor="let platform of platforms; let first = first" class="wrapper" [class.wrapper_web]="platform === 'web'" [tuiPlatform]="platform" > {{ platform }} <input tuiCheckbox type="checkbox" [ngModel]="true" [size]="getSize(first)" />
<input tuiCheckbox type="checkbox" [indeterminate]="true" [size]="getSize(first)" />
<input tuiCheckbox type="checkbox" [disabled]="true" [ngModel]="true" [size]="getSize(first)" />
<input tuiCheckbox type="checkbox" [size]="getSize(first)" />
<input tuiCheckbox type="checkbox" [disabled]="true" [ngModel]="false" [size]="getSize(first)" />
<input tuiCheckbox type="checkbox" [formControl]="invalidTrue" [size]="getSize(first)" />
<input tuiCheckbox type="checkbox" [formControl]="invalidFalse" [size]="getSize(first)" />
</div>
```
**TypeScript:**
```ts
import {NgForOf} from '@angular/common';
import {Component, type OnInit} from '@angular/core';
import {FormControl, FormsModule, ReactiveFormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiPlatform} from '@taiga-ui/cdk';
import {type TuiSizeS} from '@taiga-ui/core';
import {TuiCheckbox} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [FormsModule, NgForOf, ReactiveFormsModule, TuiCheckbox, TuiPlatform],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example implements OnInit {
    protected readonly platforms: ReadonlyArray<'android' | 'ios' | 'web'> = [
        'web',
        'web',
        'ios',
        'android',
    ];

    protected readonly invalidTrue = new FormControl(true, () => ({invalid: true}));
    protected readonly invalidFalse = new FormControl(false, () => ({invalid: true}));

    public ngOnInit(): void {
        this.invalidTrue.markAsTouched();
        this.invalidFalse.markAsTouched();
    }

    protected getSize(first: boolean): TuiSizeS {
        return first ? 'm' : 's';
    }
}
```

#### Decorative

**Template:**
```html
<p>
<input checked tuiCheckbox type="checkbox" />
</p>
<p>
<input tuiCheckbox type="checkbox" />
</p>
<p>
<input tuiCheckbox type="checkbox" [checked]="checked" />
</p>
<button tuiButton type="button" (click)="checked = !checked" > Toggle </button>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiButton} from '@taiga-ui/core';
import {TuiCheckbox} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [TuiButton, TuiCheckbox],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    protected checked = false;
}
```

#### Form

**Template:**
```html
<ng-container *ngIf="currentQuestion < 2; else result">
<p>{{ currentQuestion + 1 }}. {{ questionTitles[currentQuestion] }}</p>
<form [formGroup]="form">
<label *ngFor="let option of questions[currentQuestion]; let index = index">
<input size="s" tuiCheckbox type="checkbox" [formControlName]="index" /> {{ option }} </label>
</form>
<button size="s" tuiButton type="button" class="tui-space_top-4" (click)="nextQuestion()" > Next </button>
</ng-container>
<ng-template #result>
<p><b>Your answers</b></p>
<div *ngFor="let options of results; let i = index" class="tui-space_top-4" >
<p>{{ i + 1 }}. {{ questionTitles[i] }}</p>
<label *ngFor="let question of questions[i]; let j = index">
<input size="s" tuiCheckbox type="checkbox" [checked]="options[j]" /> {{ question }} </label>
</div>
</ng-template>
```
**TypeScript:**
```ts
import {NgForOf, NgIf} from '@angular/common';
import {Component} from '@angular/core';
import {FormControl, FormGroup, FormsModule, ReactiveFormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiButton} from '@taiga-ui/core';
import {TuiCheckbox} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [FormsModule, NgForOf, NgIf, ReactiveFormsModule, TuiButton, TuiCheckbox],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly questionTitles = [
        'What framework do you like?',
        'What library do you like?',
    ];

    protected readonly questions = [
        ['Angular', 'React', 'Vue'],
        ['Taiga UI', 'Material UI', 'PrimeNG'],
    ];

    protected currentQuestion = 0;

    protected results: boolean[][] = [];

    protected form = new FormGroup({
        0: new FormControl(false),
        1: new FormControl(false),
        2: new FormControl(false),
    });

    protected nextQuestion(): void {
        this.currentQuestion++;

        this.results.push(Object.values(this.form.value).map(Boolean));

        this.form = new FormGroup({
            0: new FormControl(false),
            1: new FormControl(false),
            2: new FormControl(false),
        });
    }
}
```


### TypeScript

```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {TuiDemo} from '@demo/utils';

@Component({
    standalone: true,
    imports: [TuiDemo],
    templateUrl: './index.html',
    changeDetection,
})
export default class Page {}
```

---
# components/Chip
- **Package**: `KIT`
- **Type**: components
Chip component is used to display array data and can also be interactive depending on the tag used.

### How to Use (Import)

```ts
import {Component} from '@angular/core';
import {TuiChip} from '@taiga-ui/kit';
// ...

@Component({
  imports: [
    // ...
    TuiChip,
  ],
})
export class Example {}
```

### How to Use (Template)

```html
<tui-chip appearance="primary">{{ value }}</tui-chip>
```

### Example

```html
<tui-chip [appearance]="appearance.appearance" [iconEnd]="icons.iconEnd" [iconStart]="icons.iconStart" [size]="size" > Chip </tui-chip>
```

### API

| Property | Type | Description |
|----------|-----|----------|
| [size] | `TuiSizeXS | TuiSizeL` | Size of the chip |

### Usage Examples

#### Basic

**Template:**
```html
<tui-chip>Default appearance is Neutral</tui-chip>
<tui-chip appearance="primary">Primary</tui-chip>
<tui-chip appearance="accent">Accent</tui-chip>
<tui-chip appearance="positive">Positive</tui-chip>
<tui-chip appearance="negative">Negative</tui-chip>
<tui-chip appearance="warning">Warning</tui-chip>
<tui-chip appearance="info">Info</tui-chip>
<tui-chip appearance="outline">Outline</tui-chip>
<tui-chip appearance="floating">Floating</tui-chip>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiChip} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [TuiChip],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {}
```

#### Sizes and content

**Template:**
```html
<section>
<tui-chip *ngFor="let size of sizes" [size]="size" [style.border-radius.rem]="5" > Text </tui-chip>
</section>
<section>
<tui-chip *ngFor="let size of sizes" iconStart="@tui.bell" [size]="size" > Single icon </tui-chip>
</section>
<section>
<tui-chip *ngFor="let size of sizes" iconEnd="@tui.circle-help" iconStart="@tui.bell" [size]="size" [style.border-radius.rem]="5" > Duo icon </tui-chip>
</section>
<section>
<tui-chip *ngFor="let size of sizes" [size]="size" >
<img *ngIf="size === 'm' || size === 's'" alt="Avatar" src="assets/images/avatar.jpg" [style.border-radius.rem]="size === 'm' ? 0.25 : 0.5" /> Image </tui-chip>
</section>
<section>
<tui-chip *ngFor="let size of sizes" [size]="size" [style.border-radius.rem]="5" >
<tui-avatar *ngIf="size === 'm' || size === 's'" src="assets/images/avatar.jpg" /> Avatar </tui-chip>
</section>
<section>
<tui-chip size="m"> Button <button iconStart="@tui.x" size="s" tuiIconButton type="button" > Remove </button>
</tui-chip>
<tui-chip *ngFor="let size of sizes | slice: 1" [size]="size" > Button <button iconStart="@tui.x" tuiIconButton type="button" > Remove </button>
</tui-chip>
</section>
<section>
<tui-chip *ngFor="let size of sizes" [size]="size" > Badge <tui-badge *ngIf="size !== 'xxs'" appearance="primary" [size]="size === 'm' ? 'm' : 's'" > 1 </tui-badge>
<button iconStart="@tui.x" tuiIconButton type="button" > Remove </button>
</tui-chip>
</section>
```
**TypeScript:**
```ts
import {NgForOf, NgIf, SlicePipe} from '@angular/common';
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiButton} from '@taiga-ui/core';
import {TuiAvatar, TuiBadge, TuiChip} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [NgForOf, NgIf, SlicePipe, TuiAvatar, TuiBadge, TuiButton, TuiChip],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly sizes = ['m', 's', 'xs', 'xxs'] as const;
}
```

#### Interactive

**Template:**
```html
<h3>Checkbox</h3>
<section>
<label *tuiRepeatTimes="let i of checked.length" appearance="" tuiChip > Checkbox {{ i + 1 }} <input appearance="outline-grayscale" tuiChip type="checkbox" [(ngModel)]="checked[i]" />
</label>
</section>
<h3>Radio</h3>
<section>
<label *tuiRepeatTimes="let i of 3" appearance="" tuiChip > Radio {{ i + 1 }} <input appearance="outline-grayscale" name="radio" tuiChip type="radio" [value]="i" />
</label>
</section>
<h3>Label outline</h3>
<section>
<label *tuiRepeatTimes="let i of checked.length" appearance="outline-grayscale" tuiChip >
<input tuiCheckbox type="checkbox" [(ngModel)]="checked[i]" /> Label {{ i + 1 }} </label>
</section>
<h3>Label accent</h3>
<section>
<label *tuiRepeatTimes="let i of checked.length" tuiChip [appearance]="checked[i] ? 'accent' : 'neutral'" >
<input hidden type="checkbox" [(ngModel)]="checked[i]" /> Label {{ i + 1 }} </label>
</section>
<h3>Button</h3>
<section>
<button *tuiRepeatTimes="let i of 3" tuiChip type="button" (click)="onChip(i)" > Button {{ i + 1 }} </button>
</section>
<section>
<tui-chip *tuiRepeatTimes="let i of 3"> Close button {{ i + 1 }} <button iconStart="@tui.x" tuiIconButton type="button" (click.stop)="onX(i)" > Remove </button>
</tui-chip>
</section>
<h3>Input</h3>
<section>
<tui-chip *tuiRepeatTimes="let i of values.length" appearance="" [style.color]="'transparent'" > {{ values[i] }} <input tuiChip [(ngModel)]="values[i]" />
</tui-chip>
</section>
```
**TypeScript:**
```ts
import {Component, inject} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiRepeatTimes} from '@taiga-ui/cdk';
import {TuiAlertService, TuiButton} from '@taiga-ui/core';
import {TuiCheckbox, TuiChip} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [FormsModule, TuiButton, TuiCheckbox, TuiChip, TuiRepeatTimes],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    private readonly alerts = inject(TuiAlertService);

    protected readonly checked = [true, false, true];
    protected readonly values = ['test', 'Some text', 'WOW!'];

    protected onChip(index: number): void {
        this.alerts.open(`Clicked chip ${index + 1}`).subscribe();
    }

    protected onX(index: number): void {
        this.alerts
            .open(`Removed chip ${index + 1}`, {appearance: 'negative'})
            .subscribe();
    }
}
```

#### Use cases

**Template:**
```html
<tui-chip appearance="primary" class="fade" >
<div tuiFade>Very long value in chip</div>
<div>{{ 123000 | tuiAmount: 'RUB' | async }}</div>
</tui-chip>
<tui-chip appearance="accent" iconStart="@tui.box" >
<div class="ellipsis">Very long value in chip</div>
</tui-chip>
<tui-badged-content>
<tui-badge-notification size="xs" tuiSlot="top" />
<tui-chip appearance="secondary" iconStart="@tui.bell" > Notifications </tui-chip>
</tui-badged-content>
<tui-chip appearance="custom" iconEnd="@tui.thumbs-up" > Customized chip </tui-chip>
<tui-chip [appearance]="selected ? 'primary' : 'neutral'"> Toggle chip <button iconStart="@tui.plus" tuiIconButton type="button" class="toggle" [style.transform]="selected ? 'rotate(45deg)' : 'rotate(0)'" (click)="selected = !selected" > Toggle </button>
</tui-chip>
```
**TypeScript:**
```ts
import {AsyncPipe} from '@angular/common';
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiAmountPipe} from '@taiga-ui/addon-commerce';
import {TuiButton} from '@taiga-ui/core';
import {TuiBadgedContent, TuiBadgeNotification, TuiChip, TuiFade} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [
        AsyncPipe,
        TuiAmountPipe,
        TuiBadgedContent,
        TuiBadgeNotification,
        TuiButton,
        TuiChip,
        TuiFade,
    ],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected selected = false;
}
```

#### Auto color

**Template:**
```html
<tui-chip *ngFor="let chip of chips" appearance="custom" [style.background-color]="chip | tuiAutoColor" > {{ chip }} </tui-chip>
```
**TypeScript:**
```ts
import {NgForOf} from '@angular/common';
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiAutoColorPipe} from '@taiga-ui/core';
import {TuiChip} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [NgForOf, TuiAutoColorPipe, TuiChip],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected chips = [
        'Free',
        'Base',
        'Pro',
        'Enterprise',
        'Premium',
        'Ultimate',
        'Starter',
        'Advanced',
        'Business',
        'Enterprise',
        'Personal',
        'Standard',
        'Essential',
        'Professional',
        'Deluxe',
        'Gold',
        'Silver',
        'Bronze',
        'Plus',
        'Basic',
    ];
}
```

#### Fade in complex designs

**Template:**
```html
<tui-chip appearance="accent" iconStart="@tui.shopping-cart" >
<div tuiFade>Supermarkets</div>
<div tuiFade>{{ 9000 | tuiAmount: 'USD' | async }}</div>
</tui-chip>
<tui-chip appearance="accent">
<tui-avatar src="assets/images/avatar.jpg" />
<div tuiFade>AI</div>
<div tuiFade>{{ 9870043000 | tuiAmount: 'USD' | async }}</div>
</tui-chip>
<tui-chip appearance="accent" iconEnd="@tui.shower-head" >
<div tuiFade>Long category name</div>
</tui-chip>
<p>Use CSS to set a custom priority for the fade:</p>
<tui-chip appearance="primary" class="custom" >
<div tuiFade>Miscellaneous goods</div>
<div tuiFade>{{ 105000 | tuiAmount: 'USD' | async }}</div>
</tui-chip>
```
**TypeScript:**
```ts
import {AsyncPipe} from '@angular/common';
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiAmountPipe} from '@taiga-ui/addon-commerce';
import {TuiAvatar, TuiChip, TuiFade} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [AsyncPipe, TuiAmountPipe, TuiAvatar, TuiChip, TuiFade],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {}
```


### TypeScript

```ts
import {Component} from '@angular/core';
import {TuiDocAppearance} from '@demo/components/appearance';
import {TuiDocIcons} from '@demo/components/icons';
import {changeDetection} from '@demo/emulate/change-detection';
import {TuiDemo} from '@demo/utils';
import {type TuiSizeXXS} from '@taiga-ui/core';
import {TuiChip} from '@taiga-ui/kit';

@Component({
    standalone: true,
    selector: 'example-chip',
    imports: [TuiChip, TuiDemo, TuiDocAppearance, TuiDocIcons],
    templateUrl: './index.html',
    changeDetection,
})
export default class Example {
    protected readonly examples = [
        'Basic',
        'Sizes and content',
        'Interactive',
        'Use cases',
        'Auto color',
        'Fade in complex designs',
    ];

    protected readonly sizes: readonly TuiSizeXXS[] = ['xxs', 'xs', 's', 'm'];

    protected size = this.sizes[2]!;
}
```

---
# components/ComboBox
- **Package**: `KIT`
- **Type**: components
ComboBox
        is a form control for
        selecting a single value
        from a set of options. It is similar to
        
            Select
        
        but with a major difference –
        possibility to enter value manually
        .

### How to Use (Import)

```ts
import {FormsModule} from '@angular/forms';
import {TuiTextfield} from '@taiga-ui/core';
import {TuiChevron, TuiComboBox} from '@taiga-ui/kit';

@Component({
  imports: [
    // ...
    FormsModule,
    TuiTextfield,
    TuiChevron,
    TuiComboBox,
  ],
})
export class Example {
  items = ['Option 1', 'Option 2', 'Option 3'];
  value: string | null = null;
}
```

### How to Use (Template)

```html
<tui-textfield tuiChevron>
  <input
    tuiComboBox
    [(ngModel)]="value"
  />

  <tui-data-list-wrapper
    *tuiTextfieldDropdown
    new
    [items]="items"
  />
</tui-textfield>
```

### Example

```html
<ng-template>
<tui-textfield #textfield tuiChevron [content]="!textfield.focused() && control.value ? textfieldContent : ''" [disabledItemHandler]="itemsHandlers.disabledItemHandler()" [iconStart]="icons.iconStart" [identityMatcher]="itemsHandlers.identityMatcher()" [stringify]="itemsHandlers.stringify()" [tuiDropdownAlign]="dropdown.align" [tuiDropdownAppearance]="dropdown.appearance" [tuiDropdownDirection]="dropdown.direction" [tuiDropdownLimitWidth]="dropdown.limitWidth" [tuiDropdownMaxHeight]="dropdown.maxHeight" [tuiDropdownMinHeight]="dropdown.minHeight" [tuiDropdownOffset]="dropdown.offset" [tuiTextfieldCleaner]="textfieldDoc.cleaner" [tuiTextfieldSize]="textfieldDoc.size" [(open)]="dropdown.open" >
<input placeholder="Search country" tuiComboBox [formControl]="control" [invalid]="controlDoc.invalid" [matcher]="matcher" [readOnly]="controlDoc.readonly" [strict]="strict" [tuiDisabled]="controlDoc.disabled" />
<tui-data-list-wrapper *tuiTextfieldDropdown new [items]="countries$ | async | tuiFilterByInput" />
</tui-textfield>
</ng-template>
```

### API

| Property | Type | Description |
|----------|-----|----------|
| [strict] | `boolean` |  |
| [matcher] | `TuiStringMatcher | null` | function that compares search text and datalist's items to define a match between them. Lowercase string
                comparison function by default. |
| [content] | `PolymorpheusContent` |  |

### Usage Examples

#### Basic

The main helper you’ll use with almost every ComboBox is the tuiFilterByInput pipe. It enables item filtering based on the user’s input as they type.

**Template:**
```html
<tui-textfield tuiChevron>
<input tuiComboBox [(ngModel)]="value" />
<tui-data-list-wrapper *tuiTextfieldDropdown new [items]="items | tuiFilterByInput" />
</tui-textfield>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiTextfield} from '@taiga-ui/core';
import {
    TuiChevron,
    TuiComboBox,
    TuiDataListWrapper,
    TuiFilterByInputPipe,
} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [
        FormsModule,
        TuiChevron,
        TuiComboBox,
        TuiDataListWrapper,
        TuiFilterByInputPipe,
        TuiTextfield,
    ],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly items = [
        'Darth Vader',
        'Luke Skywalker',
        'Princess Leia',
        'Han Solo',
        'Obi-Wan Kenobi',
        'Yoda',
    ] as const;

    protected value: string | null = this.items[0];
}
```

#### Virtual scroll

You can use ComboBox with virtual scrolling from &#64;angular/cdk/scrolling .

**Template:**
```html
<tui-textfield tuiChevron>
<input placeholder="Country" tuiComboBox [(ngModel)]="value" />
<ng-container *tuiTextfieldDropdown>
<!-- 44 = option height -->
<!-- 4 = margin between options -->
<!-- 8 = data list padding -->
<cdk-virtual-scroll-viewport *tuiLet="countries$ | async | tuiFilterByInput as items" tuiScrollable class="scroll" [itemSize]="44" [maxBufferPx]="44 * 10" [minBufferPx]="44 * 5" [style.height.px]="(items?.length || 1) * (44 + 4) + 8" >
<tui-data-list>
<button *cdkVirtualFor="let item of items" new tuiOption type="button" [value]="item" > {{ item }} </button>
</tui-data-list>
</cdk-virtual-scroll-viewport>
</ng-container>
</tui-textfield>
```
**TypeScript:**
```ts
import {ScrollingModule} from '@angular/cdk/scrolling';
import {AsyncPipe} from '@angular/common';
import {Component, inject} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiLet} from '@taiga-ui/cdk';
import {TuiDataList, TuiScrollable, TuiTextfield} from '@taiga-ui/core';
import {
    TUI_COUNTRIES,
    TuiChevron,
    TuiComboBox,
    TuiFilterByInputPipe,
} from '@taiga-ui/kit';
import {map, type Observable} from 'rxjs';

@Component({
    standalone: true,
    imports: [
        AsyncPipe,
        FormsModule,
        ScrollingModule,
        TuiChevron,
        TuiComboBox,
        TuiDataList,
        TuiFilterByInputPipe,
        TuiLet,
        TuiScrollable,
        TuiTextfield,
    ],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly countries$: Observable<string[]> = inject(TUI_COUNTRIES).pipe(
        map(Object.values),
    );

    protected value = null;
}
```

#### With DropdownMobile

Use real mobile device or enable mobile emulation in DevTools to explore this example! Put tuiDropdownMobile on &lt;tui-textfield /&gt; to enable a full-screen dialog instead of the default dropdown on mobile devices. By default, the full-screen dialog hides all other content using visibility: hidden and shifts the textfield to the top of the page. Use --tui-dropdown-mobile-offset css-variable option to control how far the textfield is shifted. If needed, manually set visibility: visible on any hidden elements (e.g., a sticky header) to make them visible again.

**Template:**
```html
<tui-textfield tuiChevron tuiDropdownMobile >
<input placeholder="Select destination" tuiComboBox [(ngModel)]="value" />
<tui-data-list-wrapper *tuiTextfieldDropdown new [items]="countries$ | async | tuiFilterByInput" />
</tui-textfield>
```
**TypeScript:**
```ts
import {AsyncPipe} from '@angular/common';
import {Component, inject, ViewEncapsulation} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {TuiDropdownMobile} from '@taiga-ui/addon-mobile';
import {TuiTextfield} from '@taiga-ui/core';
import {
    TUI_COUNTRIES,
    TuiChevron,
    TuiComboBox,
    TuiDataListWrapper,
    TuiFilterByInputPipe,
} from '@taiga-ui/kit';
import {map, type Observable} from 'rxjs';

@Component({
    standalone: true,
    imports: [
        AsyncPipe,
        FormsModule,
        TuiChevron,
        TuiComboBox,
        TuiDataListWrapper,
        TuiDropdownMobile,
        TuiFilterByInputPipe,
        TuiTextfield,
    ],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation: ViewEncapsulation.None,
    changeDetection,
})
export default class Example {
    protected readonly countries$: Observable<string[]> = inject(TUI_COUNTRIES).pipe(
        map(Object.values),
    );

    protected value: string | null = null;
}
```

#### Override option component

You can override default behavior and appearance of all options inside dropdown. Just provide your custom component by tuiAsOptionContent -utility. Double check if you really need this feature! For the most cases &lt;tui-data-list-wrapper [itemContent]="..." /&gt; can be enough for your task. Explore this example for more details.

**Template:**
```html
<tui-textfield tuiChevron>
<input placeholder="Select something" tuiComboBox [formControl]="control" />
<tui-data-list-wrapper *tuiTextfieldDropdown new [items]="items | tuiFilterByInput" />
</tui-textfield>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {FormControl, ReactiveFormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {tuiAsOptionContent, TuiTextfield} from '@taiga-ui/core';
import {
    TuiChevron,
    TuiComboBox,
    TuiDataListWrapper,
    TuiFilterByInputPipe,
} from '@taiga-ui/kit';

import {Option} from './option';

@Component({
    standalone: true,
    imports: [
        ReactiveFormsModule,
        TuiChevron,
        TuiComboBox,
        TuiDataListWrapper,
        TuiFilterByInputPipe,
        TuiTextfield,
    ],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
    providers: [tuiAsOptionContent(Option)],
})
export default class Example {
    protected readonly items = new Array(5)
        .fill(null)
        .map((_, index) => `Option ${index + 1}`);

    protected readonly control = new FormControl<string | null>(this.items[2]!);
}
```

#### Non-strict mode

By default, strict mode is enabled. This means the input value must match one of the options from the data list. If the value doesn't match, the form control is not updated and the input is cleared on blur. In non-strict mode, the form control can contain any value — even if it doesn’t match any item in the data list.

**Template:**
```html
<tui-textfield tuiChevron>
<input placeholder="Purpose loan" tuiComboBox [formControl]="control" [strict]="false" />
<tui-data-list-wrapper *tuiTextfieldDropdown new [items]="items" />
</tui-textfield>
<p>
<strong>Form control:</strong>
<code>{{ control.value | json }}</code>
</p>
```
**TypeScript:**
```ts
import {JsonPipe} from '@angular/common';
import {Component} from '@angular/core';
import {FormControl, ReactiveFormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiTextfield} from '@taiga-ui/core';
import {TuiChevron, TuiComboBox, TuiDataListWrapper} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [
        JsonPipe,
        ReactiveFormsModule,
        TuiChevron,
        TuiComboBox,
        TuiDataListWrapper,
        TuiTextfield,
    ],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly items = [
        'Medical Expenses',
        'Education',
        'Travel',
        'Home Repair',
        'Car',
    ];

    protected control = new FormControl<string | null>(null);
}
```

#### Client-side filtering

You can configure any filtering logic by passing a custom matcher function as an argument to the tuiFilterByInput pipe.

**Template:**
```html
<tui-textfield tuiChevron>
<input placeholder="British monarchs" tuiComboBox [(ngModel)]="value" />
<tui-data-list-wrapper *tuiTextfieldDropdown new [items]="items | tuiFilterByInput: matcher" />
</tui-textfield>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {type TuiStringMatcher} from '@taiga-ui/cdk';
import {TuiTextfield} from '@taiga-ui/core';
import {
    TuiChevron,
    TuiComboBox,
    TuiDataListWrapper,
    TuiFilterByInputPipe,
} from '@taiga-ui/kit';

const ROMAN_TO_LATIN: Record<string, string> = {
    I: '1',
    II: '2',
    III: '3',
    IV: '4',
    V: '5',
    VI: '6',
    VII: '7',
    VIII: '8',
};

@Component({
    standalone: true,
    imports: [
        FormsModule,
        TuiChevron,
        TuiComboBox,
        TuiDataListWrapper,
        TuiFilterByInputPipe,
        TuiTextfield,
    ],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly items = [
        'Charles III',
        'Elizabeth II',
        'George VI',
        'Edward VIII',
        'George V',
        'William IV',
        'George IV',
        'George III',
    ];

    protected value: string | null = null;

    protected readonly matcher: TuiStringMatcher<string> = (item, query) => {
        const romanNumeral = item.split(' ').at(-1)!;

        return (
            query === ROMAN_TO_LATIN[romanNumeral] ||
            item.toLowerCase().includes(query.toLowerCase())
        );
    };
}
```

#### Textfield customization

Take full advantage of Textfield : add any number of Icons and Tooltips (with control over their order and color), adjust the size of the textbox, and more. Explore Textfield documentation page for more customization options.

**Template:**
```html
<tui-textfield iconStart="@tui.search" tuiChevron tuiTextfieldSize="m" [tuiTextfieldCleaner]="false" >
<label tuiLabel>I am a label</label>
<input placeholder="I am placeholder" tuiComboBox [(ngModel)]="value" />
<tui-data-list-wrapper *tuiTextfieldDropdown new [items]="cities | tuiFilterByInput" />
<tui-icon *ngIf="value" icon="@tui.check" style="color: var(--tui-status-positive); pointer-events: none" />
<tui-icon tuiTooltip="I am a hint" />
</tui-textfield>
```
**TypeScript:**
```ts
import {NgIf} from '@angular/common';
import {Component} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiIcon, TuiTextfield} from '@taiga-ui/core';
import {
    TuiChevron,
    TuiComboBox,
    TuiDataListWrapper,
    TuiFilterByInputPipe,
    TuiTooltip,
} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [
        FormsModule,
        NgIf,
        TuiChevron,
        TuiComboBox,
        TuiDataListWrapper,
        TuiFilterByInputPipe,
        TuiIcon,
        TuiTextfield,
        TuiTooltip,
    ],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly cities = [
        'Night City',
        'Raccoon City',
        'City 17',
        'Springfield',
        'Bikini Bottom',
        'Gotham',
    ];

    protected value: string | null = null;
}
```

#### Server-side filtering

Pass null as argument to tui-data-list-wrapper[items] to show loader inside the dropdown. Additionally, you can put Loader inside textfield's box. Pass empty array to tui-data-list-wrapper[items] to show tui-data-list-wrapper[emptyContent] (it accepts PolymorpheusContent ).

**Template:**
```html
<tui-textfield *tuiLet="items$ | async as items" tuiChevron >
<input #inputRef placeholder="Search country" tuiComboBox [(ngModel)]="value" (input)="search$.next($any($event.target).value)" />
<tui-data-list-wrapper *tuiTextfieldDropdown new [emptyContent]="inputRef.value.length < 2 ? 'Enter at least 2 characters' : 'Nothing found!'" [items]="inputRef.value.length < 2 ? [] : items" />
<tui-loader *ngIf="items && showLoader()" />
</tui-textfield>
```
**TypeScript:**
```ts
import {AsyncPipe, NgIf} from '@angular/common';
import {Component, inject, signal} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiLet} from '@taiga-ui/cdk';
import {TuiLoader, TuiTextfield} from '@taiga-ui/core';
import {TuiChevron, TuiComboBox, TuiDataListWrapper} from '@taiga-ui/kit';
import {debounceTime, filter, of, Subject, switchMap, tap} from 'rxjs';

import {DatabaseServer} from './database';

@Component({
    standalone: true,
    imports: [
        AsyncPipe,
        FormsModule,
        NgIf,
        TuiChevron,
        TuiComboBox,
        TuiDataListWrapper,
        TuiLet,
        TuiLoader,
        TuiTextfield,
    ],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    private readonly api = inject(DatabaseServer);

    protected readonly showLoader = signal(false);
    // Click on cleaner / datalist item triggers (input) events too
    protected readonly search$ = new Subject<string>();
    protected readonly items$ = this.search$.pipe(
        debounceTime(0), // ensure form control is updated after last input
        filter(() => !this.value), // click on datalist item should not trigger new api request
        tap(() => this.showLoader.set(true)),
        debounceTime(300),
        switchMap((query) => (query.length >= 2 ? this.api.request$(query) : of(null))),
        tap(() => this.showLoader.set(false)),
    );

    protected value: string | null = null;
}
```

#### Items handlers

Use tuiItemsHandlersProvider to override the default behavior of all ComboBox -s below the current DI scope. To customize a specific ComboBox , use the input properties [identityMatcher] / [stringify] / disabledItemHandler (inherited from Textfield ).

**Template:**
```html
<tui-textfield tuiChevron>
<input tuiComboBox [(ngModel)]="value" />
<tui-data-list-wrapper *tuiTextfieldDropdown new [items]="users | tuiFilterByInput" />
</tui-textfield>
```
**TypeScript:**
```ts
import {Component, signal} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {tuiItemsHandlersProvider, TuiTextfield} from '@taiga-ui/core';
import {
    TuiChevron,
    TuiComboBox,
    TuiDataListWrapper,
    TuiFilterByInputPipe,
} from '@taiga-ui/kit';

interface Character {
    readonly id: number;
    readonly name: string;
}

@Component({
    standalone: true,
    imports: [
        FormsModule,
        TuiChevron,
        TuiComboBox,
        TuiDataListWrapper,
        TuiFilterByInputPipe,
        TuiTextfield,
    ],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
    providers: [
        /**
         * You can also use input props of `Textfield`
         * (they will have more priority):
         * ```html
         * <tui-textfield
         *     [identityMatcher]="..."
         *     [stringify]="..."
         *     [disabledItemHandler]="..."
         * />
         * ```
         */
        tuiItemsHandlersProvider({
            stringify: signal((x: Character) => x.name),
            identityMatcher: signal((a: Character, b: Character) => a.id === b.id),
            disabledItemHandler: signal((x: Character) => x.name.includes('Trevor')),
        }),
    ],
})
export default class Example {
    protected readonly users: Character[] = [
        {id: 42, name: 'Tommy Vercetti'},
        {id: 237, name: 'Carl Johnson'},
        {id: 666, name: 'Niko Bellic'},
        {id: 999, name: 'Trevor Philips'},
        {id: 123, name: 'Michael De Santa'},
        {id: 777, name: 'Franklin Clinton'},
    ];

    protected value: Character | null = {id: 42, name: 'Tommy Vercetti'}; // !== this.users[0]
}
```

#### Customize content

DataListWrapper lets you customize the appearance of options inside the dropdown by [itemContent] property. Also, Textfield has [content] property to customize appearance of selected option inside textbox. Both properties accept PolymorpheusContent – it empowers you with extremely large possibilities for customization.

**Template:**
```html
<tui-textfield #textfield tuiChevron [content]="value && !textfield.focused() ? content : ''" [stringify]="stringify" >
<input placeholder="Choose a card" tuiComboBox [(ngModel)]="value" />
<tui-data-list-wrapper *tuiTextfieldDropdown new [itemContent]="content" [items]="cards | tuiFilterByInput: matcher" />
</tui-textfield>
<ng-template #content let-card >
<div class="card">
<tui-thumbnail-card [paymentSystem]="card.paymentSystem"> {{ card.number.slice(-4) }} </tui-thumbnail-card> {{ card.name }} </div>
</ng-template>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {type TuiPaymentSystem, TuiThumbnailCard} from '@taiga-ui/addon-commerce';
import {type TuiStringHandler, type TuiStringMatcher} from '@taiga-ui/cdk';
import {TuiTextfield} from '@taiga-ui/core';
import {
    TuiChevron,
    TuiComboBox,
    TuiDataListWrapper,
    TuiFilterByInputPipe,
} from '@taiga-ui/kit';

interface Card {
    name: string;
    number: string;
    paymentSystem: TuiPaymentSystem;
}

@Component({
    standalone: true,
    imports: [
        FormsModule,
        TuiChevron,
        TuiComboBox,
        TuiDataListWrapper,
        TuiFilterByInputPipe,
        TuiTextfield,
        TuiThumbnailCard,
    ],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected cards: Card[] = [
        {name: 'Bitcoin', number: '5555555555554444', paymentSystem: 'mastercard'},
        {name: 'Salary', number: '4242424242424242', paymentSystem: 'visa'},
        {name: 'Charity', number: '2201382000000013', paymentSystem: 'mir'},
        {name: 'Subscriptions', number: '6200000000000005', paymentSystem: 'unionpay'},
    ];

    protected value: Card | null = null;

    protected readonly matcher: TuiStringMatcher<Card> = (item, value) => {
        return (
            item.name.toLowerCase().includes(value.toLowerCase()) ||
            item.number.includes(value)
        );
    };

    protected readonly stringify: TuiStringHandler<Card> = (x) => x.number;
}
```

#### With DataList

DataListWrapper is just a helper to solve most popular use cases. Use DataList for more complex cases when great flexibility is required. DataList documentation page for more customization options.

**Template:**
```html
<tui-textfield tuiChevron>
<input placeholder="Select film" tuiComboBox [(ngModel)]="value" />
<tui-data-list *tuiTextfieldDropdown size="s" >
<section class="filters">
<label *ngFor="let category of categories" tuiChip [appearance]="filters[category] ? 'accent' : 'neutral'" (pointerdown.prevent)="(0)" > {{ category }} <input hidden type="checkbox" [(ngModel)]="filters[category]" />
</label>
</section>
<ng-container *ngFor="let group of filmDatabase | keyvalue">
<tui-opt-group *ngIf="filters[group.key]" [label]="group.key" >
<button *ngFor="let film of group.value | tuiFilterByInput" new tuiOption type="button" [value]="film" > {{ film }} </button>
</tui-opt-group>
</ng-container>
</tui-data-list>
</tui-textfield>
```
**TypeScript:**
```ts
import {KeyValuePipe, NgFor, NgIf} from '@angular/common';
import {Component} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiDataList, TuiTextfield} from '@taiga-ui/core';
import {TuiChevron, TuiChip, TuiComboBox, TuiFilterByInputPipe} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [
        FormsModule,
        KeyValuePipe,
        NgFor,
        NgIf,
        TuiChevron,
        TuiChip,
        TuiComboBox,
        TuiDataList,
        TuiFilterByInputPipe,
        TuiTextfield,
    ],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected filmDatabase = {
        Action: [
            'The Dark Knight',
            'Inception',
            'The Matrix',
            'The Dark Knight Rises',
            'Gladiator',
        ],
        Comedy: [
            'The Wolf of Wall Street',
            'Back to the Future',
            'Guardians of the Galaxy',
            'The Truman Show',
            'Deadpool',
        ],
        Drama: [
            'The Shawshank Redemption',
            'The Godfather',
            "Schindler's List",
            '12 Angry Men',
        ],
        Horror: ['The Silence of the Lambs', 'Alien', 'Psycho', 'The Shining'],
        Romance: [
            'Forrest Gump',
            'Titanic',
            'Good Will Hunting',
            'Eternal Sunshine of the Spotless Mind',
            'Slumdog Millionaire',
        ],
    };

    protected categories: string[] = Object.keys(this.filmDatabase);
    protected filters: Record<string, boolean> = this.categories.reduce(
        (acc, category, i) => ({...acc, [category]: i % 2 === 0}),
        {},
    );

    protected selectedCategory = true;

    protected value: string | null = null;
}
```

#### Choose form control output

DataList exposes Option -directives – it provides you with an opportunity to decide which data type put inside its [value] . This example demonstrates how every option can be a complex object with any structure but form control contains a single id-property as number -type.

**Template:**
```html
<tui-textfield tuiChevron [stringify]="stringify" >
<input tuiComboBox [formControl]="control" [matcher]="matcher" />
<tui-data-list *tuiTextfieldDropdown>
<button *ngFor="let item of items" new tuiOption type="button" [value]="item.id" > {{ item.name }} </button>
</tui-data-list>
</tui-textfield>
<p>
<strong>Form control:</strong>
<code>{{ control.value | json }}</code>
</p>
```
**TypeScript:**
```ts
import {JsonPipe, NgForOf} from '@angular/common';
import {Component} from '@angular/core';
import {FormControl, ReactiveFormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {type TuiStringHandler, type TuiStringMatcher} from '@taiga-ui/cdk';
import {TuiDataList, TuiTextfield} from '@taiga-ui/core';
import {TuiChevron, TuiComboBox} from '@taiga-ui/kit';

interface Python {
    readonly id: number;
    readonly name: string;
}

@Component({
    standalone: true,
    imports: [
        JsonPipe,
        NgForOf,
        ReactiveFormsModule,
        TuiChevron,
        TuiComboBox,
        TuiDataList,
        TuiTextfield,
    ],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly control = new FormControl<number | null>(777);

    protected readonly items: readonly Python[] = [
        {id: 42, name: 'John Cleese'},
        {id: 0, name: 'Eric Idle'},
        {id: 666, name: 'Michael Palin'},
        {id: 123, name: 'Terry Gilliam'},
        {id: 777, name: 'Terry Jones'},
        {id: 999, name: 'Graham Chapman'},
    ];

    protected readonly stringify: TuiStringHandler<number> = (id) =>
        this.items.find((item) => item.id === id)?.name ?? '';

    protected readonly matcher: TuiStringMatcher<number> = (id, query) => {
        const {name} = this.items.find((item) => item.id === id)!;

        return String(id) === query || name.toLowerCase() === query.toLowerCase();
    };
}
```


### TypeScript

```ts
import {Component, computed, inject} from '@angular/core';
import {FormControl, ReactiveFormsModule} from '@angular/forms';
import {TuiDocControl} from '@demo/components/control';
import {TuiDocDropdown} from '@demo/components/dropdown';
import {TuiDocIcons} from '@demo/components/icons';
import {TuiDocItemsHandlers} from '@demo/components/items-handlers';
import {TuiDocTextfield} from '@demo/components/textfield';
import {changeDetection} from '@demo/emulate/change-detection';
import {DemoRoute} from '@demo/routes';
import {TuiDemo} from '@demo/utils';
import {type TuiRawLoaderContent} from '@taiga-ui/addon-doc';
import {
    TUI_IS_MOBILE,
    TUI_STRICT_MATCHER,
    type TuiContext,
    type TuiStringMatcher,
} from '@taiga-ui/cdk';
import {TuiDropdown, TuiTextfield} from '@taiga-ui/core';
import {
    TUI_COUNTRIES,
    TuiChevron,
    TuiComboBox,
    TuiDataListWrapper,
    TuiFilterByInputPipe,
} from '@taiga-ui/kit';
import {type PolymorpheusContent} from '@taiga-ui/polymorpheus';
import {map, type Observable} from 'rxjs';

interface Country {
    id: string;
    name: string;
}

@Component({
    standalone: true,
    imports: [
        ReactiveFormsModule,
        TuiChevron,
        TuiComboBox,
        TuiDataListWrapper,
        TuiDemo,
        TuiDocControl,
        TuiDocDropdown,
        TuiDocIcons,
        TuiDocItemsHandlers,
        TuiDocTextfield,
        TuiDropdown,
        TuiFilterByInputPipe,
        TuiTextfield,
    ],
    templateUrl: './index.html',
    changeDetection,
})
export default class PageComponent {
    protected readonly routes = DemoRoute;
    protected readonly isMobile = inject(TUI_IS_MOBILE);

    protected readonly control = new FormControl<Country | null>(null);

    protected textfieldContent: PolymorpheusContent = '';

    protected readonly countries$: Observable<Country[]> = inject(TUI_COUNTRIES).pipe(
        map((x) => Object.entries(x).map(([id, name]) => ({id, name}))),
    );

    protected readonly matcherVariants: ReadonlyArray<TuiStringMatcher<Country>> = [
        TUI_STRICT_MATCHER as TuiStringMatcher<Country>,
        (item: Country, search: string) => item.id === search,
    ];

    protected matcher = this.matcherVariants[0]!;

    protected readonly textfieldContentVariants = computed(() => [
        '',
        'TOP SECRET',
        ({$implicit: x}: TuiContext<any>) =>
            x.name
                .split(' ')
                .map((x: string) => '*'.repeat(x.length))
                .join(' '),
        ({$implicit: x}: TuiContext<any>) =>
            x?.name.includes('i') ? `->${x.name}<-` : x?.name,
    ]);

    protected strict = true;

    protected readonly databaseExample: TuiRawLoaderContent = import(
        './examples/5/database.ts?raw'
    );

    protected readonly selectOptionExample: TuiRawLoaderContent = import(
        './examples/12/option.ts?raw'
    );

    protected readonly handler = (item: Country): boolean =>
        item.id.charCodeAt(1) % 3 === 0;
}
```

---
# components/Compass
- **Package**: `KIT`
- **Type**: components

### How to Use (Import)

```ts
import {Component} from '@angular/core';
import {TuiCompass} from '@taiga-ui/kit';
// ...

@Component({
  standalone: true,
  imports: [
    // ...
    TuiCompass,
  ],
})
export class Example {}
```

### How to Use (Template)

```html
<tui-compass [degrees]="degrees"></tui-compass>
```

### Example

```html
<tui-compass [degrees]="degrees" [style.color]="color" />
```

### API

| Property | Type | Description |
|----------|-----|----------|
| [degrees] | `number` | Pointer direction in degrees |
| [style.color] | `string` | Custom color |

### Usage Examples

#### Basic

**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiCompass} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [TuiCompass],
    template: '<tui-compass />',
    encapsulation,
    changeDetection,
})
export default class Example {}
```

#### Direction

**TypeScript:**
```ts
import {Component, ElementRef, ViewChild} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {EMPTY_CLIENT_RECT} from '@taiga-ui/cdk';
import {TuiCompass} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [TuiCompass],
    template: '<tui-compass [degrees]="degrees" />',
    encapsulation,
    changeDetection,
    host: {
        '(document:mousemove)': 'calculate($event)',
    },
})
export default class Example {
    @ViewChild(TuiCompass, {read: ElementRef})
    private readonly compass?: ElementRef<HTMLElement>;

    protected degrees = 0;

    protected calculate(event: MouseEvent): void {
        const rect =
            this.compass?.nativeElement.getBoundingClientRect() ?? EMPTY_CLIENT_RECT;
        const x = Math.ceil(event.clientX - (rect.left + rect.width / 2));
        const y = Math.ceil(event.clientY - (rect.top + rect.height / 2));

        this.degrees = Math.atan2(y, x) * (180 / Math.PI) + 90;
    }
}
```


### TypeScript

```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {TuiDemo} from '@demo/utils';
import {TuiCompass} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [TuiCompass, TuiDemo],
    templateUrl: './index.html',
    changeDetection,
})
export default class Page {
    protected colorVariants = [
        '#428bf9',
        'rgb(234, 56, 24)',
        'var(--tui-status-positive)',
        '',
    ];

    protected color = this.colorVariants[0]!;

    protected degrees = 90;
}
```

---
# components/Confirm
- **Package**: `KIT`
- **Type**: components
Confirm is a ready to use
            
                Dialog
            
            to ask user to confirm an action
        

        
            See
            
                this example
            
            to learn how to use confirm to prevent data loss on forms inside other modals

### Example

```html
<button tuiButton type="button" (click)="onClick()" > Show </button>
```

### API

| Property | Type | Description |
|----------|-----|----------|
| content | `PolymorpheusContent` | Content of the confirm |
| appearance | `string` | Appearance of the confirming button |
| no | `string` | Text on false button |
| yes | `string` | Text on true button |

### Usage Examples

#### Basic

**Template:**
```html
<button tuiButton type="button" (click)="onClick()" > Show </button>
```
**TypeScript:**
```ts
import {Component, inject} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiResponsiveDialogService} from '@taiga-ui/addon-mobile';
import {TuiAlertService, TuiButton} from '@taiga-ui/core';
import {TUI_CONFIRM, type TuiConfirmData} from '@taiga-ui/kit';
import {switchMap} from 'rxjs';

@Component({
    standalone: true,
    imports: [TuiButton],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    private readonly dialogs = inject(TuiResponsiveDialogService);
    private readonly alerts = inject(TuiAlertService);

    protected onClick(): void {
        const data: TuiConfirmData = {
            content:
                'This is <code>PolymorpheusContent</code> so it can be template too!',
            yes: 'That is great!',
            no: 'Who cares?',
        };

        this.dialogs
            .open<boolean>(TUI_CONFIRM, {
                label: 'Do you like Taiga UI?',
                size: 's',
                data,
            })
            .pipe(switchMap((response) => this.alerts.open(String(response))))
            .subscribe();
    }
}
```


### TypeScript

```ts
import {Component, inject} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {DemoRoute} from '@demo/routes';
import {TuiDemo} from '@demo/utils';
import {TuiAlertService, TuiButton, TuiDialogService} from '@taiga-ui/core';
import {TUI_CONFIRM, type TuiConfirmData} from '@taiga-ui/kit';
import {switchMap} from 'rxjs';

@Component({
    standalone: true,
    imports: [TuiButton, TuiDemo],
    templateUrl: './index.html',
    changeDetection,
})
export default class Example implements TuiConfirmData {
    private readonly dialogs = inject(TuiDialogService);
    private readonly alerts = inject(TuiAlertService);

    protected readonly routes = DemoRoute;
    protected readonly examples = ['Basic'];
    protected readonly exampleService = import('./examples/import/service.md?raw');

    public readonly appearances = ['primary', 'accent', 'secondary'];
    public appearance = this.appearances[0]!;
    public no = 'No';
    public yes = 'Yes';

    public readonly content =
        'This is <code>PolymorpheusContent</code>, so it can be anything you like!';

    protected onClick(): void {
        this.dialogs
            .open<boolean>(TUI_CONFIRM, {
                label: 'Are you sure?',
                size: 's',
                data: this,
            })
            .pipe(switchMap((response) => this.alerts.open(String(response))))
            .subscribe();
    }
}
```

---
# components/Copy
- **Package**: `KIT`
- **Type**: components
This component provides an easy way to copy text content to the clipboard. It displays the content normally and
        shows a copy button on hover, with visual feedback when content is copied.

### How to Use (Import)

```ts
import {Component} from '@angular/core';
import {TuiCopy} from '@taiga-ui/kit';
// ...

@Component({
  imports: [
    // ...
    TuiCopy,
  ],
})
export class Example {}
```

### How to Use (Template)

```html
<tui-copy>Here you can reproduce copy Taiga UI</tui-copy>
```

### Usage Examples

#### Basic

**Template:**
```html
<p tuiTitle>
<span tuiSubtitle>Bank account</span>
<tui-copy>1234 42069237 88884321</tui-copy>
</p>
<p>
<tui-copy>Very very long text that is so long it will wrap to the next line</tui-copy>
</p>
<tui-copy><span>Very very long text that is so long it will overflow and get truncated</span></tui-copy>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiTitle} from '@taiga-ui/core';
import {TuiCopy} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [TuiCopy, TuiTitle],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {}
```

#### Sizes

**Template:**
```html
<p *ngFor="let font of fonts; let index = index">
<tui-copy [size]="index > 5 ? 'm' : 'l'" [style.font]="'var(--tui-' + font + ')'" [style.white-space]="'nowrap'" > {{ font }} </tui-copy>
</p>
```
**TypeScript:**
```ts
import {NgForOf} from '@angular/common';
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiCopy} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [NgForOf, TuiCopy],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly fonts = [
        'font-heading-1',
        'font-heading-2',
        'font-heading-3',
        'font-heading-4',
        'font-heading-5',
        'font-heading-6',
        'font-text-xl',
        'font-text-l',
        'font-text-m',
        'font-text-s',
        'font-text-xs',
    ];
}
```

#### InputCopy

**Template:**
```html
<tui-textfield>
<label tuiLabel>Click icon to copy</label>
<input placeholder="I am placeholder" tuiTextfield [(ngModel)]="value" />
<tui-icon icon="@tui.copy" tuiCopy />
</tui-textfield>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiIcon, TuiTextfield} from '@taiga-ui/core';
import {TuiCopy} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [FormsModule, TuiCopy, TuiIcon, TuiTextfield],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    protected value = '';
}
```

#### With CopyProcessor

**Template:**
```html
<tui-copy [tuiCopyProcessor]="processor">Taiga UI</tui-copy>
<p> When you copy, the result will have a space prepended and appended: <code>" Taiga UI "</code> . </p>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiCopyProcessor} from '@taiga-ui/cdk';
import {TuiCopy} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [TuiCopy, TuiCopyProcessor],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly processor = (value: string): string => ` ${value} `;
}
```


### TypeScript

```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {TuiDemo} from '@demo/utils';

@Component({
    standalone: true,
    imports: [TuiDemo],
    templateUrl: './index.html',
    changeDetection,
})
export default class Example {
    protected readonly examples = ['Basic', 'Sizes', 'InputCopy', 'With CopyProcessor'];
}
```

---
# components/DataList
- **Package**: `CORE`
- **Type**: components
DataList
            allows to make lists or menus

### How to Use (Import)

```ts
import {TuiDataList} from '@taiga-ui/core';

// ...

@Component({
  standalone: true,
  imports: [
    // ...
    TuiDataList,
  ],
  // ...
})
export class Example {}
```

### How to Use (Template)

```html
<tui-data-list role="menu">
  <tui-opt-group
    *ngFor="let group of groups"
    [label]="group.label"
  >
    <a
      *ngFor="let item of group.items"
      tuiOption
      role="menuitem"
      [routerLink]="item.routerLink"
    >
      {{item.label}}
    </a>
  </tui-opt-group>
</tui-data-list>
```

### Example

```html
<tui-data-list [emptyContent]="emptyContent" [size]="size" >
<button *ngFor="let item of items$ | async" tuiOption type="button" [value]="[item]" > {{ item }} </button>
</tui-data-list>
```

### API

| Property | Type | Description |
|----------|-----|----------|
| emptyContent | `PolymorpheusContent` | Content to display when there are no options inside |
| size | `TuiSizeS | TuiSizeL` | Size of items |

### Usage Examples

#### Links

**Template:**
```html
<button tuiButton tuiChevron tuiDropdownOpen type="button" [tuiDropdown]="content" > Menu </button>
<ng-template #content>
<tui-data-list role="menu">
<tui-opt-group *ngFor="let group of groups" [label]="group.label" >
<a *ngFor="let item of group.items" #rla="routerLinkActive" role="menuitemradio" routerLinkActive tuiOption [attr.aria-checked]="rla.isActive" [routerLink]="item.routerLink" > {{ item.label }} <tui-icon *ngIf="rla.isActive" icon="@tui.check" />
</a>
</tui-opt-group>
</tui-data-list>
</ng-template>
```
**TypeScript:**
```ts
import {NgForOf, NgIf} from '@angular/common';
import {Component} from '@angular/core';
import {RouterLink, RouterLinkActive} from '@angular/router';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiButton, TuiDataList, TuiDropdown, TuiIcon} from '@taiga-ui/core';
import {TuiChevron} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [
        NgForOf,
        NgIf,
        RouterLink,
        RouterLinkActive,
        TuiButton,
        TuiChevron,
        TuiDataList,
        TuiDropdown,
        TuiIcon,
    ],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly groups = [
        {
            label: 'Components',
            items: [
                {
                    label: 'Input',
                    routerLink: '/components/input',
                },
                {
                    label: 'Select',
                    routerLink: '/components/select',
                },
                {
                    label: 'DataList',
                    routerLink: '/components/data-list',
                },
            ],
        },
        {
            label: 'Styles',
            items: [
                {
                    label: 'Icons',
                    routerLink: '/icons',
                },
                {
                    label: 'Typography',
                    routerLink: '/typography',
                },
            ],
        },
        {
            label: '',
            items: [
                {
                    label: 'Changelog',
                    routerLink: '/changelog',
                },
            ],
        },
    ];
}
```

#### Submenu

**Template:**
```html
<button appearance="flat" iconStart="@tui.ellipsis-vertical" tuiIconButton type="button" [tuiAppearanceState]="open ? 'hover' : null" [tuiDropdown]="content" [(tuiDropdownOpen)]="open" > Open </button>
<ng-template #content>
<tui-data-list tuiDataListDropdownManager [size]="size" >
<button *tuiLet="'French Fries' as item" tuiOption type="button" (click)="selectOption(item)" > {{ item }} </button>
<button iconEnd="@tui.chevron-right" tuiDropdownAlign="right" tuiDropdownManual tuiDropdownSided tuiOption type="button" [tuiDropdown]="burgersTmp" > Burgers </button>
<button iconEnd="@tui.chevron-right" tuiDropdownAlign="right" tuiDropdownManual tuiDropdownSided tuiOption type="button" [tuiDropdown]="drinksTmp" > Drinks </button>
<button *tuiLet="'Ice Cream' as item" tuiOption type="button" (click)="selectOption(item)" > {{ item }} </button>
</tui-data-list>
<ng-template #burgersTmp>
<tui-data-list tuiDataListDropdownManager>
<button *ngFor="let burger of burgers" tuiOption type="button" (click)="selectOption(burger)" > {{ burger }} </button>
<button iconEnd="@tui.chevron-right" iconStart="@tui.menu" tuiDropdownAlign="right" tuiDropdownManual tuiDropdownSided tuiOption type="button" [tuiDropdown]="drinksTmp" > Nested menu </button>
</tui-data-list>
</ng-template>
<ng-template #drinksTmp>
<tui-data-list [size]="size">
<button *ngFor="let drink of drinks" tuiOption type="button" (click)="selectOption(drink)" > {{ drink }} </button>
</tui-data-list>
</ng-template>
</ng-template>
```
**TypeScript:**
```ts
import {NgForOf} from '@angular/common';
import {Component, inject} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiLet} from '@taiga-ui/cdk';
import {
    TuiButton,
    TuiDataList,
    TuiDialogService,
    TuiDropdown,
    type TuiSizeL,
    type TuiSizeS,
} from '@taiga-ui/core';
import {TuiDataListDropdownManager} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [
        NgForOf,
        TuiButton,
        TuiDataList,
        TuiDataListDropdownManager,
        TuiDropdown,
        TuiLet,
    ],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    private readonly dialogs = inject(TuiDialogService);

    protected dropdownOpen = false;
    protected size: TuiSizeL | TuiSizeS = 's';

    protected readonly burgers = [
        'Classic',
        'Cheeseburger',
        'Royal Cheeseburger Quarterpounder',
    ];

    protected readonly drinks = ['Cola', 'Tea', 'Coffee', 'Slurm'];

    protected open = false;

    protected selectOption(item: string): void {
        this.dropdownOpen = false;
        this.dialogs.open(`You selected ${item}`).subscribe();
    }
}
```

#### Form control

**Template:**
```html
<h3>Multi select control</h3>
<button appearance="flat" tuiChevron tuiIconButton type="button" [tuiAppearanceState]="control ? 'hover' : null" [tuiDropdown]="content" [tuiDropdownMaxHeight]="500" [(tuiDropdownOpen)]="control" > Open </button>
<ng-template #content>
<tui-data-list [style.width.rem]="12">
<tui-opt-group tuiMultiSelectGroup [(ngModel)]="value" >
<tui-opt-group label="Main dishes menu with long label">
<button *ngFor="let burger of burgers" tuiOption type="button" [value]="burger" > {{ burger }} </button>
</tui-opt-group>
<tui-opt-group label="Drinks">
<button *ngFor="let drink of drinks" tuiOption type="button" [value]="drink" > {{ drink }} </button>
</tui-opt-group>
</tui-opt-group>
</tui-data-list>
</ng-template>
<p>{{ value }}</p>
<h3>Separate toggles</h3>
<button appearance="flat" tuiChevron tuiIconButton type="button" [tuiAppearanceState]="label ? 'hover' : null" [tuiDropdown]="separate" [tuiDropdownMaxHeight]="500" [(tuiDropdownOpen)]="label" > Open </button>
<ng-template #separate>
<tui-data-list [style.width.rem]="10">
<label tuiOption> First <input tuiCheckbox type="checkbox" [(ngModel)]="first" />
</label>
<label tuiOption> Second <input tuiSwitch type="checkbox" [(ngModel)]="second" />
</label>
</tui-data-list>
</ng-template>
```
**TypeScript:**
```ts
import {NgForOf} from '@angular/common';
import {Component} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiButton, TuiDataList, TuiDropdown} from '@taiga-ui/core';
import {TuiCheckbox, TuiChevron, TuiSwitch} from '@taiga-ui/kit';
import {TuiMultiSelectModule} from '@taiga-ui/legacy';

@Component({
    standalone: true,
    imports: [
        FormsModule,
        NgForOf,
        TuiButton,
        TuiCheckbox,
        TuiChevron,
        TuiDataList,
        TuiDropdown,
        TuiMultiSelectModule,
        TuiSwitch,
    ],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    protected first = false;
    protected second = true;
    protected control = false;
    protected label = false;

    protected value = [];

    protected readonly burgers = ['Hamburger', 'Cheeseburger'];

    protected readonly drinks = ['Cola', 'Tea', 'Coffee', 'Slurm'];
}
```

#### Custom list

**Template:**
```html
<tui-select class="control" [identityMatcher]="identityMatcher" [valueContent]="valueContent" [(ngModel)]="value" > Open-source budget <custom-list *tuiDataList [items]="items" />
</tui-select>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {
    type TuiContext,
    type TuiIdentityMatcher,
    type TuiStringHandler,
} from '@taiga-ui/cdk';
import {TuiDataList} from '@taiga-ui/core';
import {TuiSelectModule} from '@taiga-ui/legacy';

import {CustomListComponent} from './custom-list';

const INCOME = {
    name: 'Income',
    items: [
        'Donations',
        'Product placement',
        'Sponsorship',
        'Found on the street',
        'Unexpected inheritance',
        'Investments',
        'Color copier',
    ],
};

const EXPENSES = {
    name: 'Expenses',
    items: [
        'Energy drinks',
        'Coffee',
        'Ramen',
        'Bills',
        'Back medicine',
        'Warhammer 40000 figurines',
    ],
};

@Component({
    standalone: true,
    imports: [CustomListComponent, FormsModule, TuiDataList, TuiSelectModule],
    templateUrl: './index.html',
    styles: [
        `
            .control {
                width: 320px;
            }
        `,
    ],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected value = [];

    protected readonly items = [INCOME, EXPENSES];

    protected readonly identityMatcher: TuiIdentityMatcher<readonly string[]> = (
        items1,
        items2,
    ) => items1.length === items2.length && items1.every((item) => items2.includes(item));

    protected readonly valueContent: TuiStringHandler<TuiContext<readonly string[]>> = ({
        $implicit,
    }) => {
        if (!$implicit.length) {
            return 'All';
        }

        const selected = this.items.find(({items}) =>
            this.identityMatcher($implicit, items),
        );

        return selected ? `${selected.name} only` : `Selected: ${$implicit.length}`;
    };
}
```

#### Complex

**Template:**
```html
<button appearance="outline" iconStart="@tui.ellipsis-vertical" size="m" tuiButton tuiDropdownLimitWidth="fixed" type="button" class="example" [tuiDropdown]="content" [(tuiDropdownOpen)]="dropdownOpen" > List of components </button>
<ng-template #content>
<tui-data-list tuiDataListDropdownManager>
<button iconEnd="@tui.chevron-right" tuiDropdownAlign="right" tuiDropdownDirection="top" tuiDropdownSided tuiOption type="button" [tuiDropdown]="money" [tuiDropdownManual]="true" > 💰 Money: </button>
<button automation-id="tui-data-list-calendar-option" iconEnd="@tui.chevron-right" tuiDropdownAlign="right" tuiDropdownLimitWidth="auto" tuiDropdownManual tuiDropdownSided tuiOption type="button" [tuiDropdown]="calendar" > 📅 Calendar: {{ dateValue }} </button>
<button automation-id="tui-data-list-email-option" iconEnd="@tui.chevron-right" tuiDropdownAlign="right" tuiDropdownManual tuiDropdownSided tuiOption type="button" [tuiDropdown]="input" > 📧 Email: {{ emailValue }} </button>
<button automation-id="tui-data-list-range-option" iconEnd="@tui.chevron-right" tuiDropdownAlign="right" tuiDropdownDirection="top" tuiDropdownLimitWidth="auto" tuiDropdownManual tuiDropdownSided tuiOption type="button" [tuiDropdown]="range" > ⌛ Range: {{ rangeValue }} </button>
</tui-data-list>
<ng-template #money>
<tui-input automation-id="tui-data-money-input" [(ngModel)]="moneyValue" > RUB <input name="moneyValue" tuiTextfieldLegacy />
</tui-input>
<tui-data-list tuiDataListDropdownManager>
<button iconEnd="@tui.chevron-right" tuiDropdownAlign="right" tuiDropdownDirection="bottom" tuiDropdownLimitWidth="auto" tuiDropdownSided tuiOption type="button" [tuiDropdown]="currency" [tuiDropdownManual]="true" > Exchange Rates: </button>
</tui-data-list>
</ng-template>
<ng-template #calendar>
<tui-calendar [value]="dateValue" (dayClick)="onDayClick($event)" (mousedown.zoneless.prevent)="(0)" />
</ng-template>
<ng-template #input>
<tui-input automation-id="tui-data-list-email-field" [(ngModel)]="emailValue" > Email <input name="emailValue" tuiTextfieldLegacy />
</tui-input>
</ng-template>
<ng-template #currency>
<div class="example">
<div tuiGroup class="group" >
<tui-input [(ngModel)]="dollar">1 Rub = (X) Dollars</tui-input>
<tui-input [(ngModel)]="euro">1 Rub = (Y) Euros</tui-input>
</div>
<ul class="exchange tui-list tui-list_large">
<li class="tui-list__item">
<span>{{ moneyValue / dollar | tuiAmount: 'USD' | async }}</span>
</li>
<li class="tui-list__item">
<span>{{ moneyValue / euro | tuiAmount: 'EUR' | async }}</span>
</li>
</ul>
</div>
</ng-template>
<ng-template #range>
<tui-input-date-range automation-id="tui-data-list-range-field" class="form" [(ngModel)]="rangeValue" > Range </tui-input-date-range>
</ng-template>
</ng-template>
<div class="example">
<p>Email: {{ emailValue }}</p>
<p>Chosen date: {{ dateValue }}</p>
<p>Range date: {{ rangeValue }}</p>
<p>Dol - {{ dollar }}, Eur - {{ euro }}</p>
</div>
```
**TypeScript:**
```ts
import {AsyncPipe} from '@angular/common';
import {Component} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiAmountPipe} from '@taiga-ui/addon-commerce';
import {TuiDay, TuiDayRange} from '@taiga-ui/cdk';
import {TuiButton, TuiCalendar, TuiDataList, TuiDropdown, TuiGroup} from '@taiga-ui/core';
import {TuiDataListDropdownManager} from '@taiga-ui/kit';
import {TuiInputDateRangeModule, TuiInputModule} from '@taiga-ui/legacy';

@Component({
    standalone: true,
    imports: [
        AsyncPipe,
        FormsModule,
        TuiAmountPipe,
        TuiButton,
        TuiCalendar,
        TuiDataList,
        TuiDataListDropdownManager,
        TuiDropdown,
        TuiGroup,
        TuiInputDateRangeModule,
        TuiInputModule,
    ],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected dropdownOpen = false;
    protected dateValue: TuiDay = new TuiDay(2020, 0, 1);
    protected euro = 87; // 1 euro = 87 rub
    protected dollar = 75; // 1 dollar = 75 rub

    protected emailValue = 'mail@mail.ru';
    protected moneyValue = 1000;

    protected rangeValue = new TuiDayRange(
        TuiDay.currentLocal(),
        TuiDay.currentLocal().append({year: 1}),
    );

    protected onDayClick(day: TuiDay): void {
        this.dateValue = day;
    }
}
```

#### Options with long text

**Template:**
```html
<button appearance="flat" tuiButton tuiChevron type="button" [tuiDropdown]="content" [tuiDropdownLimitWidth]="isMobile ? 'fixed' : 'min'" [tuiDropdownMaxHeight]="700" [(tuiDropdownOpen)]="open" > Why Taiga UI? </button>
<ng-template #content>
<tui-data-list>
<tui-opt-group *ngFor="let group of groups" [label]="group.label" >
<button *ngFor="let item of group.items" tuiOption type="button" class="option" (click)="open = false" > {{ item }} </button>
</tui-opt-group>
</tui-data-list>
</ng-template>
<tui-input [formControl]="control" [tuiDropdownOpen]="((control.valueChanges | async)?.length ?? 0) > 2" > Enter 3 characters <tui-data-list *tuiDataList />
</tui-input>
```
**TypeScript:**
```ts
import {AsyncPipe, NgForOf} from '@angular/common';
import {Component, inject} from '@angular/core';
import {FormControl, ReactiveFormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TUI_IS_MOBILE} from '@taiga-ui/cdk';
import {TuiButton, TuiDataList, TuiDropdown} from '@taiga-ui/core';
import {TuiChevron} from '@taiga-ui/kit';
import {TuiInputModule} from '@taiga-ui/legacy';

@Component({
    standalone: true,
    imports: [
        AsyncPipe,
        NgForOf,
        ReactiveFormsModule,
        TuiButton,
        TuiChevron,
        TuiDataList,
        TuiDropdown,
        TuiInputModule,
    ],
    templateUrl: './index.html',
    styles: [
        `
            .option {
                white-space: normal;
            }
        `,
    ],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected open = false;

    protected readonly groups = [
        {
            label: 'Advantages of Taiga UI',
            items: [
                '🧩 Modular and fully-treeshakable. We harnessed the power of Secondary Entry Points mechanism. You can import even just one entity from our library and be sure that there is no redundant code in your bundle.',
                '🧙 Agnostic. Our components are very flexible and are ready for any use case. But we take care of basic UX aspects to let you focus on your project features.',
                '🦋 Customizable. We use CSS custom properties for all our styling and provide easy methods to customize all UI components.',
                '🛠 Well engineered. We are not afraid to use DI to the max. All our components use OnPush, and the whole project is developed with strict TypeScript mode.',
                '📦 It is big! We have 130+ components, 100+ directives, dozens of tokens, utils and tools. And it is not over yet.',
                '🏗 Maintained! The library started as an internal product in our company. It is used by 50+ projects in production now and it is here to stay.',
            ],
        },
        {
            label: 'Well-engineered Taiga UI components',
            items: ['Calendar', 'Dialog', 'ComboBox', 'Select'],
        },
    ];

    protected readonly isMobile = inject(TUI_IS_MOBILE);

    public control = new FormControl('');
}
```


### TypeScript

```ts
import {Component, inject} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {TuiDemo} from '@demo/utils';
import {TUI_IS_E2E} from '@taiga-ui/cdk';
import {TuiDataList, type TuiSizeL, type TuiSizeS} from '@taiga-ui/core';
import {delay, of} from 'rxjs';

@Component({
    standalone: true,
    imports: [TuiDataList, TuiDemo],
    templateUrl: './index.html',
    changeDetection,
})
export default class Page {
    private readonly items = ['Foo', 'Bar', 'Baz'];
    protected readonly items$ = inject(TUI_IS_E2E)
        ? of(this.items)
        : of(this.items).pipe(delay(1e3));

    protected readonly emptyContentVariants = ['Loading...', ''];
    protected emptyContent = this.emptyContentVariants[0];

    protected readonly sizeVariants: ReadonlyArray<TuiSizeL | TuiSizeS> = ['s', 'm', 'l'];
    protected size = this.sizeVariants[0]!;

    protected readonly example4 = {
        TypeScript: import('./examples/4/index.ts?raw'),
        HTML: import('./examples/4/index.html?raw'),
        'custom-list/index.ts': import('./examples/4/custom-list/index.ts?raw'),
        'custom-list/index.html': import('./examples/4/custom-list/index.html?raw'),
    };
}
```

---
# components/DataListWrapper
- **Package**: `KIT`
- **Type**: components
DataListWrapper
            is an abstraction over
            DataList
            to simplify usage in common cases where precise control is not necessary.

### How to Use (Import)

```ts
import {TuiDataListWrapper} from '@taiga-ui/kit';

// ...

@Component({
  standalone: true,
  imports: [
    // ...
    TuiDataListWrapper,
  ],
  // ...
})
export class Example {}
```

### How to Use (Template)

```html
<tui-input [formControl]="control">
  Account

  <tui-data-list-wrapper
    *tuiDataList
    [items]="items"
  ></tui-data-list-wrapper>
</tui-input>
```

### API

| Property | Type | Description |
|----------|-----|----------|
| [items] | `readonly T[] | ReadonlyArray<readonly T[]> | null` | Items to select |
| [itemContent] | `PolymorpheusContent<TuiValueContentContext<T>>` | Content of an item |
| [emptyContent] | `PolymorpheusContent` | Content to display when there are no options inside |
| [disabledItemHandler] | `TuiBooleanHandler<T>` |  |
| [size] | `TuiSizeL | TuiSizeXS` | Size of items |
| [labels] | `readonly string[]` | Group label |
| (itemClick) | `T` | Emits on click on item from datalist |

### Usage Examples

#### Disables items that start with T

**Template:**
```html
<tui-input [formControl]="control"> Account <tui-data-list-wrapper *tuiDataList emptyContent="No results found" size="s" [disabledItemHandler]="disabledItemHandler" [items]="items | tuiFilterByInput" />
</tui-input>
```
**TypeScript:**
```ts
import {Component, inject} from '@angular/core';
import {FormControl, ReactiveFormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {type TuiBooleanHandler} from '@taiga-ui/cdk';
import {TuiDataListWrapper, TuiFilterByInputPipe} from '@taiga-ui/kit';
import {TuiInputModule} from '@taiga-ui/legacy';

@Component({
    standalone: true,
    imports: [
        ReactiveFormsModule,
        TuiDataListWrapper,
        TuiFilterByInputPipe,
        TuiInputModule,
    ],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly control = new FormControl('');
    protected readonly items = inject<readonly string[]>('Pythons' as any);

    protected readonly disabledItemHandler: TuiBooleanHandler<string> = (v) =>
        v.startsWith('T');
}
```

#### Custom item content

**Template:**
```html
<label> Type a name: <tui-combo-box [formControl]="control" [stringify]="stringify" [tuiTextfieldLabelOutside]="true" > Account <tui-data-list-wrapper *tuiDataList [itemContent]="stringify | tuiStringifyContent" [items]="items | tuiFilterByInput" />
</tui-combo-box>
</label>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {FormControl, ReactiveFormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {
    TuiDataListWrapper,
    TuiFilterByInputPipe,
    TuiStringifyContentPipe,
} from '@taiga-ui/kit';
import {TuiComboBoxModule, TuiTextfieldControllerModule} from '@taiga-ui/legacy';

@Component({
    standalone: true,
    imports: [
        ReactiveFormsModule,
        TuiComboBoxModule,
        TuiDataListWrapper,
        TuiFilterByInputPipe,
        TuiStringifyContentPipe,
        TuiTextfieldControllerModule,
    ],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly control = new FormControl<{name: string; surname: string} | null>(
        null,
    );

    protected readonly items = [
        {name: 'John', surname: 'Cleese'},
        {name: 'Eric', surname: 'Idle'},
        {name: 'Graham', surname: 'Chapman'},
        {name: 'Michael', surname: 'Palin'},
        {name: 'Terry', surname: 'Gilliam'},
        {name: 'Terry', surname: 'Jones'},
    ];

    protected readonly stringify = (item: {name: string; surname: string}): string =>
        `${item.name} ${item.surname}`;
}
```

#### Group by labels

**Template:**
```html
<tui-input [formControl]="control"> Menu <tui-data-list-wrapper *tuiDataList [items]="items" [labels]="labels" />
</tui-input>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {FormControl, ReactiveFormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiDataListWrapper} from '@taiga-ui/kit';
import {TuiInputModule} from '@taiga-ui/legacy';

@Component({
    standalone: true,
    imports: [ReactiveFormsModule, TuiDataListWrapper, TuiInputModule],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly control = new FormControl('');

    protected readonly items = [
        ['Caesar', 'Greek', 'Apple and Chicken'],
        ['Broccoli Cheddar', 'Chicken and Rice', 'Chicken Noodle'],
    ] as const;

    protected labels = ['Salad', 'Soup'] as const;
}
```


### TypeScript

```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {TuiDemo} from '@demo/utils';

@Component({
    standalone: true,
    imports: [TuiDemo],
    templateUrl: './index.html',
    changeDetection,
})
export default class Page {
    protected readonly examples = [
        'Disables items that start with T',
        'Custom item content',
        'Group by labels',
    ];
}
```

---
# components/Dialog
- **Package**: `CORE`
- **Type**: components
Built-in implementation of Taiga UI modals

        
            If you want custom dialogs see
            
                this link
            
            on creating your own implementation
        

        
            Use
            
                TUI_DIALOGS_CLOSE
            
            token if you need to close dialog with from a stream. For example, this way you can close dialogs by logout

### Example

```html
<button size="m" tuiButton type="button" (click)="showDialog(template)" > Show </button>
```

### API

| Property | Type | Description |
|----------|-----|----------|
| [closeable] | `boolean` |  |
| [dismissible] | `boolean` | if you want prevent closing, for example, with a confirmation prompt. |
| [data] | `number` |  |
| [header] | `PolymorpheusContent` | Content above a heading |
| [label] | `string` | Heading of dialog |
| [required] | `boolean` | (you can catch it with "catch" operator or onError handler) |
| [size] | `TuiDialogSize` | Size |
| [appearance] | `string` | Appearance of dialog |

### Usage Examples

#### Dialog from string

**Template:**
```html
<button size="m" tuiButton type="button" (click)="showDialog()" > Default button </button>
<p>
<button size="m" tuiButton type="button" (click)="showDialogWithCustomButton()" > Custom button </button>
</p>
```
**TypeScript:**
```ts
import {Component, inject} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiButton, TuiDialogService} from '@taiga-ui/core';

@Component({
    standalone: true,
    imports: [TuiButton],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    private readonly dialogs = inject(TuiDialogService);

    protected showDialog(): void {
        this.dialogs
            .open(
                '<div>This is a plain string dialog.</div>It supports basic <strong>HTML</strong>',
                {label: 'Heading', size: 's'},
            )
            .subscribe();
    }

    protected showDialogWithCustomButton(): void {
        this.dialogs
            .open('Good, Anakin, Good!', {
                label: 'Star wars. Episode III',
                size: 's',
                data: {button: 'Do it!'},
            })
            .subscribe();
    }
}
```

#### Appearance

**Template:**
```html
<button size="m" tuiButton type="button" (click)="showDialog()" > Show </button>
```
**TypeScript:**
```ts
import {Component, inject, ViewEncapsulation} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {TuiButton, TuiDialogService} from '@taiga-ui/core';

@Component({
    standalone: true,
    imports: [TuiButton],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation: ViewEncapsulation.None,
    changeDetection,
})
export default class Example {
    private readonly dialogs = inject(TuiDialogService);

    protected showDialog(): void {
        this.dialogs
            .open(
                'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry`s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum',
                {
                    label: 'What is Lorem Ipsum?',
                    appearance: 'lorem-ipsum',
                },
            )
            .subscribe();
    }
}
```

#### Theme color

**Template:**
```html
<button size="m" tuiButton type="button" (click)="showDialog()" > Show </button>
```
**TypeScript:**
```ts
import {Component, inject} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiThemeColorService} from '@taiga-ui/cdk';
import {TuiButton, TuiDialogService} from '@taiga-ui/core';

@Component({
    standalone: true,
    imports: [TuiButton],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    private readonly dialogs = inject(TuiDialogService);
    private readonly theme = inject(TuiThemeColorService);

    protected showDialog(): void {
        this.theme.color = '#ffdd2d';
        this.dialogs
            .open(
                'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry`s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum',
                {label: 'What is Lorem Ipsum?'},
            )
            .subscribe({
                complete: () => {
                    this.theme.color = '#ff7043';
                },
            });
    }
}
```

#### Component dialog

**Template:**
```html
<button size="m" tuiButton type="button" (click)="showDialog()" > Show </button>
```
**TypeScript:**
```ts
import {Component, inject, INJECTOR} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiButton, tuiDialog} from '@taiga-ui/core';
import {type Observable} from 'rxjs';

@Component({
    standalone: true,
    imports: [TuiButton],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    private readonly injector = inject(INJECTOR);

    protected async showDialog(): Promise<void> {
        const dialog = await this.lazyLoad();

        dialog(237).subscribe({
            next: (data) => {
                console.info(`Dialog emitted data = ${data}`);
            },
            complete: () => {
                console.info('Dialog closed');
            },
        });
    }

    private async lazyLoad(): Promise<(data: number) => Observable<number>> {
        const {DialogExample} = await import('./dialog-example/dialog-example.component');

        return tuiDialog(DialogExample, {
            injector: this.injector,
            dismissible: true,
            label: 'Heading',
        });
    }
}
```

#### Dialog from template

**Template:**
```html
<p> Your balance: <span>{{ money | tuiAmount: 'RUB' | async }}</span>
</p>
<button size="m" tuiButton type="button" (click)="showDialog(template)" > Show </button>
<ng-template #template let-observer >
<p>You can show a dialog with template</p>
<p> Your balance: <span>{{ money | tuiAmount: 'RUB' | async }}</span>
</p>
<button size="m" tuiButton tuiChevron tuiDropdownOpen type="button" class="tui-space_right-3" [tuiDropdown]="dropdown" > Withdraw <ng-template #dropdown let-close >
<tui-data-list>
<button *ngFor="let sum of [10, 50, 100]" tuiOption (click)="withdraw(sum); close()" > {{ sum | tuiAmount: 'RUB' | async }} </button>
</tui-data-list>
</ng-template>
</button>
<button size="m" tuiButton type="button" (click)="observer.complete()" > Cancel </button>
</ng-template>
```
**TypeScript:**
```ts
import {AsyncPipe, NgForOf} from '@angular/common';
import {Component, inject} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiAmountPipe} from '@taiga-ui/addon-commerce';
import {
    TuiButton,
    TuiDataList,
    type TuiDialogContext,
    TuiDialogService,
    TuiDropdown,
} from '@taiga-ui/core';
import {TuiChevron} from '@taiga-ui/kit';
import {type PolymorpheusContent} from '@taiga-ui/polymorpheus';

@Component({
    standalone: true,
    imports: [
        AsyncPipe,
        NgForOf,
        TuiAmountPipe,
        TuiButton,
        TuiChevron,
        TuiDataList,
        TuiDropdown,
    ],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    private readonly dialogs = inject(TuiDialogService);

    protected money = 1000;

    protected showDialog(content: PolymorpheusContent<TuiDialogContext>): void {
        this.dialogs.open(content).subscribe();
    }

    protected withdraw(sum: number): void {
        this.money -= sum;
    }
}
```

#### Mobile dialog

**Template:**
```html
<h3>Long mobile dialog with filters</h3>
<button size="m" tuiButton type="button" class="tui-space_right-3 tui-space_bottom-2" (click)="showDialog(long, button)" > Show </button>
<ng-template #button>
<button *ngIf="!filters" tuiButton type="button" class="portal" (click)="onFilterClick()" (touchmove.prevent.zoneless)="(0)" > Filters </button>
</ng-template>
<ng-template #long>
<div class="background"></div>
<header #header class="header" (tuiElasticSticky)="onElastic($event, header)" >
<section class="logo">
<label class="date">8 March, 23:51</label>
<tui-avatar size="xl" src="@tui.chevron-down" class="icon" />
</section>
<div class="wrapper">
<p class="description">Card payment</p>
<h3 class="title">Sushi</h3>
<span class="money" [tuiNumberFormat]="{decimalMode: 'always'}" > {{ 300 | tuiAmount: 'RUB' | async }} </span>
</div>
</header>
<blockquote>
<h1>Additional information</h1>
<p> In user interface design for computer applications, a modal window is a graphical control element subordinate to an application's main window. A modal window creates a mode that disables the main window but keeps it visible, with the modal window as a child window in front of it. Users must interact with the modal window before they can return to the parent application. This avoids interrupting the workflow on the main window. Modal windows are sometimes called heavy windows or modal dialogs because they often display a dialog box. </p>
</blockquote>
<blockquote>
<h2>Additional information</h2>
<p> In user interface design for computer applications, a modal window is a graphical control element subordinate to an application's main window. A modal window creates a mode that disables the main window but keeps it visible, with the modal window as a child window in front of it. Users must interact with the modal window before they can return to the parent application. This avoids interrupting the workflow on the main window. Modal windows are sometimes called heavy windows or modal dialogs because they often display a dialog box. </p>
</blockquote>
</ng-template>
```
**TypeScript:**
```ts
import {AsyncPipe, NgIf} from '@angular/common';
import {Component, inject, type TemplateRef} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiAmountPipe} from '@taiga-ui/addon-commerce';
import {TuiElasticSticky} from '@taiga-ui/addon-mobile';
import {tuiClamp} from '@taiga-ui/cdk';
import {
    TuiButton,
    TuiDialogService,
    TuiDropdownService,
    TuiNumberFormat,
} from '@taiga-ui/core';
import {TuiAvatar} from '@taiga-ui/kit';
import {type PolymorpheusContent} from '@taiga-ui/polymorpheus';

@Component({
    standalone: true,
    imports: [
        AsyncPipe,
        NgIf,
        TuiAmountPipe,
        TuiAvatar,
        TuiButton,
        TuiElasticSticky,
        TuiNumberFormat,
    ],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    private readonly dialogs = inject(TuiDialogService);
    private readonly dropdowns = inject(TuiDropdownService);

    protected filters = false;

    protected onElastic(value: number, {style}: HTMLElement): void {
        const scale = tuiClamp(value, 0.7, 1);

        style.setProperty('transform', `scale(${scale})`);
        style.setProperty('width', `calc((100% + 3.5rem) / ${scale})`);
    }

    protected onFilterClick(): void {
        this.filters = true;
        this.dialogs.open('Dialog with filters').subscribe({
            complete: () => {
                this.filters = false;
            },
        });
    }

    protected showDialog(
        content: PolymorpheusContent,
        button: TemplateRef<Record<string, unknown>>,
    ): void {
        const templateRef = this.dropdowns.addTemplate(button);

        this.dialogs.open(content).subscribe({
            complete: () => {
                this.dropdowns.removeTemplate(templateRef);
            },
        });
    }
}
```

#### Dialog with header

**Template:**
```html
<button size="m" tuiButton type="button" class="tui-space_right-2" (click)="onClick(content, header, 'm')" > Show </button>
<button size="m" tuiButton type="button" (click)="onClick(content, header, 'fullscreen')" > Show fullscreen </button>
<ng-template #content let-observer > Take a look <div class="buttons">
<button size="m" tuiButton type="button" (click)="observer.complete()" > Very cool! </button>
</div>
</ng-template>
<ng-template #header>
<div class="header">
<img alt="Cool" src="https://ng-web-apis.github.io/dist/assets/images/web-api.svg" />
</div>
</ng-template>
```
**TypeScript:**
```ts
import {Component, inject} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {
    TuiButton,
    type TuiDialogContext,
    TuiDialogService,
    type TuiDialogSize,
} from '@taiga-ui/core';
import {type PolymorpheusContent} from '@taiga-ui/polymorpheus';

@Component({
    standalone: true,
    imports: [TuiButton],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    private readonly dialogs = inject(TuiDialogService);

    protected onClick(
        content: PolymorpheusContent<TuiDialogContext>,
        header: PolymorpheusContent,
        size: TuiDialogSize,
    ): void {
        this.dialogs
            .open(content, {
                label: 'What a cool library set',
                header,
                size,
            })
            .subscribe();
    }
}
```

#### Dialog with directive

**Template:**
```html
<button size="m" tuiButton tuiHint="Some text" tuiHintDirection="top" type="button" (click)="showDialog()" > Show </button>
<ng-template let-observer [tuiDialogOptions]="{label: 'Declarative directive', size: 's'}" [(tuiDialog)]="open" >
<form [formGroup]="exampleForm" (ngSubmit)="observer.complete()" >
<p>This abstracts away service and subscription</p>
<tui-input formControlName="exampleControl" tuiAutoFocus > Some value </tui-input>
<p>
<button tuiButton type="submit" > Ok </button>
</p>
</form>
</ng-template>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {FormControl, FormGroup, ReactiveFormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiAutoFocus} from '@taiga-ui/cdk';
import {TuiButton, TuiDialog, TuiHint} from '@taiga-ui/core';
import {TuiInputModule} from '@taiga-ui/legacy';

@Component({
    standalone: true,
    imports: [
        ReactiveFormsModule,
        TuiAutoFocus,
        TuiButton,
        TuiDialog,
        TuiHint,
        TuiInputModule,
    ],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    protected exampleForm = new FormGroup({
        exampleControl: new FormControl(''),
    });

    protected open = false;

    protected showDialog(): void {
        this.open = true;
    }
}
```

#### Fullscreen mobile dialog with autofocus

**Template:**
```html
<button size="m" tuiButton type="button" (click)="showDialog()" > Show </button>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiButton, tuiDialog} from '@taiga-ui/core';

import {SearchDialogExample} from './search-example/search-dialog-example.component';

@Component({
    standalone: true,
    imports: [TuiButton],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    private readonly dialog = tuiDialog(SearchDialogExample, {
        size: 'page',
        closeable: true,
        dismissible: true,
    });

    protected showDialog(): void {
        this.dialog().subscribe();
    }
}
```

#### Confirmation

**Template:**
```html
<button size="m" tuiButton type="button" (click)="onClick(content)" > Open </button>
<ng-template #content let-context >
<tui-input class="tui-space_bottom-3" [ngModel]="value" (ngModelChange)="onModelChange($event)" > Your name </tui-input>
<button tuiButton type="button" (click)="context.complete()" > Submit </button>
</ng-template>
```
**TypeScript:**
```ts
import {Component, inject} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiResponsiveDialogService} from '@taiga-ui/addon-mobile';
import {TuiButton, TuiDialogService} from '@taiga-ui/core';
import {TuiConfirmService} from '@taiga-ui/kit';
import {TuiInputModule} from '@taiga-ui/legacy';
import {type PolymorpheusContent} from '@taiga-ui/polymorpheus';

@Component({
    standalone: true,
    imports: [FormsModule, TuiButton, TuiInputModule],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
    providers: [
        // Provide TUI_CONFIRM_DIALOG if you want to override default Confirm dialog
        TuiConfirmService,
        {
            provide: TuiDialogService,
            useExisting: TuiResponsiveDialogService,
        },
    ],
})
export default class Example {
    private readonly confirm = inject(TuiConfirmService);
    private readonly dialogs = inject(TuiDialogService);

    protected value = '';

    protected onModelChange(value: string): void {
        this.value = value;
        this.confirm.markAsDirty();
    }

    protected onClick(content: PolymorpheusContent): void {
        const closeable = this.confirm.withConfirm({
            label: 'Are you sure?',
            data: {
                content: 'Your data will be <strong>lost</strong>',
            },
        });

        this.dialogs
            .open(content, {label: 'Form', closeable, dismissible: closeable})
            .subscribe({
                complete: () => {
                    this.value = '';
                    this.confirm.markAsPristine();
                },
            });
    }
}
```

#### Pay

**Template:**
```html
<div class="container">
<tui-textfield>
<input maxlength="5" placeholder="0 ... 999 ₽" postfix=" ₽" tuiInputNumber [formControl]="amountControl" [min]="0" />
<tui-icon tuiHintDirection="top" tuiTooltip="The amount must be less than 1000 ₽" />
</tui-textfield>
<button tuiButton type="button" class="pay-button" (click)="payByCard()" >
<div class="icon-group">
<img alt="visa" [src]="'@tui.visa' | tuiIcon" />
<img alt="maestro" [src]="'@tui.maestro' | tuiIcon" />
<img alt="mir" [src]="'@tui.mir' | tuiIcon" />
</div> Pay </button>
</div>
```
**TypeScript:**
```ts
import {Component, DestroyRef, inject} from '@angular/core';
import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
import {FormControl, ReactiveFormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {
    TuiButton,
    tuiDialog,
    TuiHint,
    TuiIcon,
    TuiIconPipe,
    TuiTextfield,
} from '@taiga-ui/core';
import {TuiInputNumber, TuiTooltip} from '@taiga-ui/kit';

import {PayModal} from './pay-modal/pay-modal.component';

@Component({
    standalone: true,
    imports: [
        ReactiveFormsModule,
        TuiButton,
        TuiHint,
        TuiIcon,
        TuiIconPipe,
        TuiInputNumber,
        TuiTextfield,
        TuiTooltip,
    ],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    private readonly destroyRef = inject(DestroyRef);
    private readonly payModal = tuiDialog(PayModal, {
        size: 'auto',
        closeable: true,
    });

    protected readonly amountControl = new FormControl(100, {
        nonNullable: true,
    });

    protected payByCard(): void {
        this.payModal({
            amount: this.amountControl.value,
        })
            .pipe(takeUntilDestroyed(this.destroyRef))
            .subscribe();
    }
}
```


### TypeScript

```ts
import {Component, inject, type TemplateRef} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {DemoRoute} from '@demo/routes';
import {TuiDemo} from '@demo/utils';
import {
    TuiAlertService,
    TuiButton,
    type TuiDialogContext,
    TuiDialogService,
    type TuiDialogSize,
} from '@taiga-ui/core';
import {TuiAccordion} from '@taiga-ui/kit';
import {switchMap} from 'rxjs';

@Component({
    standalone: true,
    imports: [TuiAccordion, TuiButton, TuiDemo],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    changeDetection,
})
export default class Page {
    private readonly alerts = inject(TuiAlertService);
    private readonly dialogs = inject(TuiDialogService);

    protected readonly routes = DemoRoute;
    protected readonly method = import('./method.md?raw');

    protected readonly dialogsCloseToken = import(
        './examples/import/dialogs-close-token.md?raw'
    );

    protected readonly example2 = {
        TypeScript: import('./examples/2/index.ts?raw'),
        HTML: import('./examples/2/index.html?raw'),
        'dialog-example/dialog-example.component.ts': import(
            './examples/2/dialog-example/dialog-example.component.ts?raw'
        ),
        'dialog-example/dialog-example.style.less': import(
            './examples/2/dialog-example/dialog-example.style.less?raw'
        ),
        'dialog-example/dialog-example.template.html': import(
            './examples/2/dialog-example/dialog-example.template.html?raw'
        ),
    };

    protected readonly example7 = {
        TypeScript: import('./examples/7/index.ts?raw'),
        HTML: import('./examples/7/index.html?raw'),
        'search-example/search-dialog-example.component.ts': import(
            './examples/7/search-example/search-dialog-example.component.ts?raw'
        ),
        'search-example/search-dialog-example.template.html': import(
            './examples/7/search-example/search-dialog-example.template.html?raw'
        ),
        'search-example/search-dialog-example.component.less': import(
            './examples/7/search-example/search-dialog-example.component.less?raw'
        ),
    };

    protected readonly example9 = {
        TypeScript: import('./examples/9/index.ts?raw'),
        HTML: import('./examples/9/index.html?raw'),
        LESS: import('./examples/9/index.less?raw'),
        'helpers/mock-cards.ts': import('./examples/9/helpers/mock-cards.ts?raw'),
        'helpers/models.ts': import('./examples/9/helpers/models.ts?raw'),
        'helpers/pay.service.ts': import('./examples/9/helpers/pay.service.ts?raw'),
        'helpers/validator.ts': import('./examples/9/helpers/validator.ts?raw'),
        'pay-modal/pay-modal.component.ts': import(
            './examples/9/pay-modal/pay-modal.component.ts?raw'
        ),
        'pay-modal/pay-modal.component.less': import(
            './examples/9/pay-modal/pay-modal.component.less?raw'
        ),
        'pay-modal/pay-modal.component.html': import(
            './examples/9/pay-modal/pay-modal.component.html?raw'
        ),
    };

    protected readonly exampleServiceUsage = import(
        './examples/import/service-usage.md?raw'
    );

    protected readonly exampleCustomDialog = import(
        './examples/import/custom-dialog.md?raw'
    );

    protected readonly exampleLazyDialog = import('./examples/import/lazy-dialog.md?raw');

    protected data = 100;

    protected closeable = true;

    protected dismissible = true;

    protected required = false;

    protected readonly sizeVariants: readonly TuiDialogSize[] = [
        's',
        'm',
        'l',
        'fullscreen',
        'page',
        'auto',
    ];

    protected size: TuiDialogSize = this.sizeVariants[1]!;

    protected label = '';

    protected appearance = '';

    protected showDialog(content: TemplateRef<TuiDialogContext<number, number>>): void {
        const {data, label, required, closeable, dismissible, size, appearance} = this;

        this.dialogs
            .open(content, {
                data,
                label,
                required,
                closeable,
                dismissible,
                size,
                appearance,
            })
            .pipe(switchMap((response) => this.alerts.open(String(response))))
            .subscribe();
    }
}
```

### LESS

```less
.big {
    font-size: 3.125rem;
}
```

---
# components/DialogExperimental
- **Package**: `EXPERIMENTAL`
- **Type**: components
Customizable modal dialogs

### How to Use (Import)

```ts
import {TuiButton} from '@taiga-ui/core';
import {TuiDialog} from '@taiga-ui/experimental';

// ...

@Component({
  standalone: true,
  imports: [
    // ...
    TuiButton,
    TuiDialog,
  ],
  // ...
})
export class Example {}
```

### How to Use (Template)

```html
<ng-template
  [tuiDialogOptions]="{ size: 'm' }"
  [(tuiDialog)]="open"
>
  <header tuiHeader>
    <hgroup tuiTitle>
      <h2>I am a title</h2>
      <p>I am some text</p>
    </hgroup>
  </header>
  <!-- Arbitrary content -->
  <footer>
    <button tuiButton>Primary Button</button>
    <button
      tuiButton
      appearance="secondary"
    >
      Secondary Button
    </button>
  </footer>
</ng-template>
```

### Example

```html
<button size="m" tuiButton type="button" (click)="showDialog(template)" > Show </button>
```

### API

| Property | Type | Description |
|----------|-----|----------|
| [appearance] | `string` | Appearance of dialog |
| [closable] | `boolean` |  |
| [dismissible] | `boolean` | if you want prevent closing, for example, with a confirmation prompt. |
| [data] | `string` |  |
| [label] | `string` | Heading of dialog |
| [required] | `boolean` | (you can catch it with "catch" operator or onError handler) |
| [size] | `TuiSizeS | TuiSizeL` | Size |

### Usage Examples

#### String

**Template:**
```html
<button tuiButton type="button" (click)="default()" > Default button </button>
<br />
<br />
<button tuiButton type="button" (click)="custom()" > Custom button </button>
```
**TypeScript:**
```ts
import {Component, inject} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiButton} from '@taiga-ui/core';
import {TuiDialogService} from '@taiga-ui/experimental';

@Component({
    standalone: true,
    imports: [TuiButton],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    private readonly dialogs = inject(TuiDialogService);

    protected default(): void {
        this.dialogs
            .open(
                'This is a plain string dialog.<br />It supports basic <strong>HTML</strong>',
                {label: 'Heading', size: 's'},
            )
            .subscribe();
    }

    protected custom(): void {
        this.dialogs
            .open('Good, Anakin, Good!', {
                label: 'Star wars. Episode III',
                size: 's',
                data: 'Do it!',
            })
            .subscribe();
    }
}
```

#### Directive

**Template:**
```html
<button tuiButton type="button" (click)="open = true" > Show dialog </button>
<ng-template let-observer [(tuiDialog)]="open" >
<header tuiHeader>
<h2 tuiTitle>Let us know</h2>
</header>
<form tuiForm (submit.prevent)="observer.complete()" >
<tui-textfield>
<label tuiLabel>Your name</label>
<input tuiAutoFocus tuiTextfield />
</tui-textfield>
<footer>
<button appearance="secondary" tuiButton type="button" (click)="observer.complete()" > Cancel </button>
<button tuiButton type="submit" > Submit </button>
</footer>
</form>
</ng-template>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiAutoFocus} from '@taiga-ui/cdk';
import {TuiButton, TuiTextfield, TuiTitle} from '@taiga-ui/core';
import {TuiDialog} from '@taiga-ui/experimental';
import {TuiForm, TuiHeader} from '@taiga-ui/layout';

@Component({
    standalone: true,
    imports: [
        TuiAutoFocus,
        TuiButton,
        TuiDialog,
        TuiForm,
        TuiHeader,
        TuiTextfield,
        TuiTitle,
    ],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    protected open = false;
}
```

#### Component

**Template:**
```html
<button tuiButton type="button" (click)="onClick()" > Show dialog </button>
```
**TypeScript:**
```ts
import {Component, inject} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiAlertService, TuiButton} from '@taiga-ui/core';
import {TuiDialogService} from '@taiga-ui/experimental';
import {PolymorpheusComponent} from '@taiga-ui/polymorpheus';
import {switchMap} from 'rxjs';

import {DialogComponent} from './component';

@Component({
    standalone: true,
    imports: [TuiButton],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    private readonly alerts = inject(TuiAlertService);
    private readonly dialogs = inject(TuiDialogService);

    protected onClick(): void {
        this.dialogs
            .open<string>(new PolymorpheusComponent(DialogComponent), {
                label: 'Edit info',
                size: 's',
                data: 'Alex Inkin',
            })
            .pipe(switchMap((name) => this.alerts.open(name)))
            .subscribe();
    }
}
```

#### Confirmation

**Template:**
```html
<button tuiButton type="button" (click)="onClick()" > Show dialog </button>
```
**TypeScript:**
```ts
import {Component, inject} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiAlertService, TuiButton} from '@taiga-ui/core';
import {TuiDialogService} from '@taiga-ui/experimental';
import {TUI_CONFIRM, type TuiConfirmData} from '@taiga-ui/kit';
import {switchMap} from 'rxjs';

@Component({
    standalone: true,
    imports: [TuiButton],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    private readonly alerts = inject(TuiAlertService);
    private readonly dialogs = inject(TuiDialogService);

    protected onClick(): void {
        const data: TuiConfirmData = {
            content: 'This action cannot be undone',
            yes: 'Sure!',
            no: 'No, thanks',
        };

        this.dialogs
            .open<boolean>(TUI_CONFIRM, {size: 's', label: 'Are you sure?', data})
            .pipe(switchMap((v) => this.alerts.open(v, {label: 'Response'})))
            .subscribe();
    }
}
```

#### Closing

**Template:**
```html
<button tuiButton type="button" (click)="open = true" > Show dialog </button>
<ng-template [tuiDialogOptions]="{size: 's'}" [(tuiDialog)]="open" >
<header tuiHeader>
<hgroup tuiTitle>
<h2>Hello!</h2>
<p>Welcome to the website</p>
</hgroup>
</header>
<footer>
<button tuiButton type="button" (click)="auth.logout()" > Logout </button>
</footer>
</ng-template>
```
**TypeScript:**
```ts
import {Component, inject} from '@angular/core';
import {Router} from '@angular/router';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiAutoFocus} from '@taiga-ui/cdk';
import {TUI_DIALOGS_CLOSE, TuiButton, TuiTextfield, TuiTitle} from '@taiga-ui/core';
import {TuiDialog} from '@taiga-ui/experimental';
import {TuiHeader} from '@taiga-ui/layout';
import {merge} from 'rxjs';

import {AuthService} from './service';

@Component({
    standalone: true,
    imports: [TuiAutoFocus, TuiButton, TuiDialog, TuiHeader, TuiTextfield, TuiTitle],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
    providers: [
        // This has to be added to global providers, shown here for demonstration purposes only
        {
            provide: TUI_DIALOGS_CLOSE,
            useFactory: () => merge(inject(AuthService), inject(Router).events),
        },
    ],
})
export default class Example {
    protected readonly auth = inject(AuthService);
    protected open = false;
}
```

#### Fullscreen

**Template:**
```html
<button tuiButton type="button" (click)="fullscreen = true" > Show fullscreen </button>
<br />
<br />
<button tuiButton type="button" (click)="scrollable = true" > Show scrollable </button>
<ng-template [tuiDialogOptions]="{appearance: 'fullscreen'}" [(tuiDialog)]="fullscreen" >
<header tuiHeader>
<hgroup tuiTitle>
<h2>Fullscreen heading</h2>
<p> This is shown fullscreen regardless of content height, you can use <code>margin-top: auto</code> to make sure footer is at the bottom of the page. </p>
</hgroup>
</header>
<footer tuiFloatingContainer [style.margin-top]="'auto'" >
<button tuiButton type="button" (click)="fullscreen = false" > Got it </button>
<button appearance="flat" tuiButton type="button" (click)="fullscreen = false" > Never mind </button>
</footer>
</ng-template>
<ng-template [tuiDialogOptions]="{appearance: 'fullscreen'}" [(tuiDialog)]="scrollable" >
<tui-app-bar tuiAppBarSize>
<button iconStart="@tui.chevron-left" tuiIconButton tuiSlot="left" type="button" (click)="scrollable = false" > Back </button>
<progress size="s" tuiProgressBar [max]="100" [style.width.rem]="10" [value]="35" ></progress>
<button tuiButton tuiSlot="right" type="button" (click)="scrollable = false" > Action </button>
</tui-app-bar>
<section [style.margin]="'0 -1rem'">
<div *tuiRepeatTimes="let _ of 50" tuiCell >
<tui-avatar appearance="primary" src="@tui.star" />
<div tuiTitle> Title <div tuiSubtitle>Description</div>
</div>
<div tuiTitle> Secondary title <div tuiSubtitle>Another description</div>
</div>
</div>
</section>
<footer tuiFloatingContainer>
<button tuiButton type="button" (click)="scrollable = false" > Got it </button>
<button appearance="flat" tuiButton type="button" (click)="scrollable = false" > Never mind </button>
</footer>
</ng-template>
```
**TypeScript:**
```ts
import {Component, ViewEncapsulation} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {TuiRepeatTimes} from '@taiga-ui/cdk';
import {TuiButton, TuiTitle} from '@taiga-ui/core';
import {TuiDialog} from '@taiga-ui/experimental';
import {TuiAvatar, TuiFloatingContainer, TuiProgress} from '@taiga-ui/kit';
import {TuiAppBar, TuiCell, TuiHeader} from '@taiga-ui/layout';

@Component({
    standalone: true,
    imports: [
        TuiAppBar,
        TuiAvatar,
        TuiButton,
        TuiCell,
        TuiDialog,
        TuiFloatingContainer,
        TuiHeader,
        TuiProgress,
        TuiRepeatTimes,
        TuiTitle,
    ],
    templateUrl: './index.html',
    encapsulation: ViewEncapsulation.None,
    changeDetection,
})
export default class Example {
    protected fullscreen = false;
    protected scrollable = false;
}
```

#### Customization

**Template:**
```html
<button tuiButton type="button" (click)="augmented = true" > Show augmented </button>
<br />
<br />
<button tuiButton type="button" (click)="custom = true" > Show custom </button>
<ng-template [tuiDialogOptions]="{size: 's', appearance: 'taiga compact'}" [(tuiDialog)]="augmented" >
<header tuiHeader>
<hgroup tuiTitle>
<h2>Augmented design</h2>
<p>Using both built-in "taiga" appearance and custom "compact" appearance to alter built-in styles</p>
</hgroup>
</header>
</ng-template>
<ng-template [tuiDialogOptions]="{appearance: 'sheet'}" [(tuiDialog)]="custom" >
<header>Custom design</header>
<p> Overriding default appearance completely and taking the styles of dialog fully upon oneself, leaving only behavior like focus trap and closable/dismissible interactions to Taiga UI </p>
</ng-template>
```
**TypeScript:**
```ts
import {Component, ViewEncapsulation} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {TuiButton, TuiTitle} from '@taiga-ui/core';
import {TuiDialog} from '@taiga-ui/experimental';
import {TuiHeader} from '@taiga-ui/layout';

@Component({
    standalone: true,
    imports: [TuiButton, TuiDialog, TuiHeader, TuiTitle],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation: ViewEncapsulation.None,
    changeDetection,
})
export default class Example {
    protected augmented = false;
    protected custom = false;
}
```


### TypeScript

```ts
import {Component, inject, type TemplateRef} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {DemoRoute} from '@demo/routes';
import {TuiDemo} from '@demo/utils';
import {TuiAutoFocus} from '@taiga-ui/cdk';
import {
    TuiAlertService,
    TuiButton,
    type TuiDialogContext,
    TuiTextfield,
} from '@taiga-ui/core';
import {TUI_DIALOG_OPTIONS, TuiDialogService} from '@taiga-ui/experimental';
import {TuiForm} from '@taiga-ui/layout';
import {switchMap} from 'rxjs';

@Component({
    standalone: true,
    imports: [TuiAutoFocus, TuiButton, TuiDemo, TuiForm, TuiTextfield],
    templateUrl: './index.html',
    changeDetection,
})
export default class Page extends Array {
    private readonly alerts = inject(TuiAlertService);
    private readonly dialogs = inject(TuiDialogService);
    private readonly options = inject(TUI_DIALOG_OPTIONS);

    protected readonly routes = DemoRoute;
    protected readonly examples = [
        'String',
        'Directive',
        'Component',
        'Confirmation',
        'Closing',
        'Fullscreen',
        'Customization',
    ];

    protected readonly [2] = {
        TypeScript: import('./examples/3/index.ts?raw'),
        HTML: import('./examples/3/index.html?raw'),
        'component.ts': import('./examples/3/component.ts?raw'),
    };

    protected readonly [4] = {
        TypeScript: import('./examples/5/index.ts?raw'),
        HTML: import('./examples/5/index.html?raw'),
        'service.ts': import('./examples/5/service.ts?raw'),
    };

    protected data = 'Data';
    protected label = 'Label';
    protected closable = this.options.closable;
    protected required = this.options.required;
    protected dismissible = this.options.dismissible;

    protected readonly appearances = ['taiga', 'fullscreen'] as const;
    protected appearance = this.options.appearance;

    protected readonly sizes = ['s', 'm', 'l'] as const;
    protected size = this.options.size;

    protected showDialog(content: TemplateRef<TuiDialogContext<number, number>>): void {
        const {data, label, required, closable, dismissible, size, appearance} = this;

        this.dialogs
            .open<string>(content, {
                data,
                label,
                required,
                closable,
                dismissible,
                size,
                appearance,
            })
            .pipe(switchMap((response) => this.alerts.open(response)))
            .subscribe();
    }
}
```

---
# components/Drawer
- **Package**: `KIT`
- **Type**: components

### How to Use (Import)

```ts
import {TuiPopup} from '@taiga-ui/core';
import {TuiDrawer} from '@taiga-ui/kit';

// ...

@Component({
  standalone: true,
  imports: [
    // ...
    TuiPopup,
    TuiDrawer,
  ],
  // ...
})
export class Example {}
```

### How to Use (Template)

```html
<tui-drawer *tuiPopup="open()">
  <header>
    <h2 tuiHeader>
      <div tuiTitle>Header</div>
      <div tuiAccessories>
        <button
          tuiButton
          (click)="open.set(false)"
        >
          Close
        </button>
      </div>
    </h2>
    Content
  </header>
</tui-drawer>
```

### Example

```html
<button size="m" tuiButton type="button" (click)="open.set(true)" > Open </button>
<tui-drawer *tuiPopup="open()" [direction]="direction" [overlay]="overlay" (click.self)="onClose()" >
<header>
<h2 tuiHeader>
<div tuiTitle>Header</div>
<div tuiAccessories>
<button tuiButton type="button" (click)="onClose()" > Close </button>
</div>
</h2>
</header>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate perspiciatis exercitationem nemo velit aliquam voluptates non porro, vel, nihil laudantium sapiente ex omnis corrupti assumenda voluptatibus, architecto sequi saepe consectetur ratione qui. Beatae, sapiente explicabo velit facere repudiandae veniam et soluta quia qui expedita voluptate accusamus dolor adipisci. Illo quia sint consequatur unde nulla fuga eum officiis, impedit dolorem? Vel itaque temporibus nihil quia? Provident earum aperiam autem veritatis hic doloremque unde nesciunt accusantium nisi corrupti. </p>
<footer tuiHeader>
<div tuiTitle>Footer</div>
<button appearance="secondary" tuiButton type="button" (click)="onClose()" > Close </button>
</footer>
</tui-drawer>
```

### API

| Property | Type | Description |
|----------|-----|----------|
| [direction] | `TuiHorizontalDirection` | . |
| [overlay] | `boolean` | Show overlay under the drawer. |
| header | `string` | tag inside the drawer. |
| footer | `string` | tag inside the drawer. |

### Usage Examples

#### Full

**Template:**
```html
<button tuiButton type="button" (click)="open.set(!open())" > Toggle </button>
<tui-drawer *tuiPopup="open()">
<header>
<h2 tuiHeader>
<div tuiTitle>
<span tuiCaption>Caption・caption</span>
<span> Drawer title <tui-badge>Label</tui-badge>
</span>
<span tuiSubtitle> In publishing and graphic design, Lorem ipsum is a placeholder text commonly used. </span>
</div>
<div tuiAccessories>
<button iconStart="@tui.search" tuiButton type="button" > More info </button>
<button iconStart="@tui.ellipsis" tuiIconButton type="button" > Actions </button>
<button appearance="icon" iconStart="@tui.x" tuiIconButton type="button" (click)="open.set(false)" > Close </button>
</div>
</h2>
<div>
<button tuiButton type="button" > Action 1 </button>
<a appearance="action" href="#" tuiButton > Action 2 </a>
<button tuiLink type="button" > Action 3 </button>
</div>
<nav tuiNavigationNav>
<tui-tabs>
<button tuiTab type="button" > Default view </button>
<button tuiTab type="button" > Details </button>
<button tuiTab type="button" > Followers </button>
</tui-tabs>
<hr />
<button size="xs" tuiButton type="button" > Primary </button>
<button appearance="secondary" iconStart="@tui.ellipsis" size="xs" tuiIconButton type="button" > More </button>
</nav>
</header>
<p *tuiRepeatTimes="let index of 15">Content</p>
<footer>
<button size="m" tuiButton type="button" [style.margin-inline-end]="'auto'" > Tertiary action </button>
<button size="m" tuiButton type="button" > Secondary action </button>
<button appearance="primary" size="m" tuiButton type="button" > Primary action </button>
</footer>
</tui-drawer>
```
**TypeScript:**
```ts
import {Component, signal} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiRepeatTimes} from '@taiga-ui/cdk';
import {TuiButton, TuiLink, TuiPopup, TuiTitle} from '@taiga-ui/core';
import {TuiBadge, TuiDrawer, TuiTabs} from '@taiga-ui/kit';
import {TuiHeader, TuiNavigation} from '@taiga-ui/layout';

@Component({
    standalone: true,
    imports: [
        TuiBadge,
        TuiButton,
        TuiDrawer,
        TuiHeader,
        TuiLink,
        TuiNavigation,
        TuiPopup,
        TuiRepeatTimes,
        TuiTabs,
        TuiTitle,
    ],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly open = signal(false);
}
```

#### Modal

**Template:**
```html
<button tuiButton type="button" (click)="open.set(true)" > Open </button>
<tui-drawer *tuiPopup="open()" direction="left" class="drawer" [overlay]="true" (click.self)="onClose()" >
<header class="header">
<h2 tuiHeader>
<div tuiTitle>Sticky header</div>
<div tuiAccessories>
<button tuiButton type="button" (click)="onClose()" > Close </button>
</div>
</h2>
</header>
<tui-textfield>
<label tuiLabel>Enter value</label>
<input tuiTextfield [formControl]="control" />
</tui-textfield>
<p *tuiRepeatTimes="let index of 30">Content</p>
</tui-drawer>
```
**TypeScript:**
```ts
import {Component, inject, signal} from '@angular/core';
import {FormControl, ReactiveFormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiRepeatTimes} from '@taiga-ui/cdk';
import {
    TuiButton,
    TuiDialogService,
    TuiPopup,
    TuiTextfield,
    TuiTitle,
} from '@taiga-ui/core';
import {TUI_CONFIRM, TuiDrawer} from '@taiga-ui/kit';
import {TuiHeader} from '@taiga-ui/layout';
import {filter} from 'rxjs';

@Component({
    standalone: true,
    imports: [
        ReactiveFormsModule,
        TuiButton,
        TuiDrawer,
        TuiHeader,
        TuiPopup,
        TuiRepeatTimes,
        TuiTextfield,
        TuiTitle,
    ],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly dialogs = inject(TuiDialogService);
    protected readonly control = new FormControl('Some value');
    protected readonly open = signal(false);

    public onClose(): void {
        if (this.control.pristine) {
            this.open.set(false);

            return;
        }

        this.dialogs
            .open(TUI_CONFIRM, {
                label: 'Cancel editing form?',
                size: 's',
                data: {
                    content: 'You have unsaved changes that will be lost',
                },
            })
            .pipe(filter(Boolean))
            .subscribe(() => {
                this.open.set(false);
                this.control.reset('Some value');
            });
    }
}
```


### TypeScript

```ts
import {Component, signal} from '@angular/core';
import {ReactiveFormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {TuiDemo} from '@demo/utils';
import {
    TuiButton,
    type TuiHorizontalDirection,
    TuiPopup,
    TuiTextfield,
    TuiTitle,
} from '@taiga-ui/core';
import {TuiDrawer} from '@taiga-ui/kit';
import {TuiHeader} from '@taiga-ui/layout';

@Component({
    standalone: true,
    imports: [
        ReactiveFormsModule,
        TuiButton,
        TuiDemo,
        TuiDrawer,
        TuiHeader,
        TuiPopup,
        TuiTextfield,
        TuiTitle,
    ],
    templateUrl: './index.html',
    changeDetection,
})
export default class Page {
    protected readonly examples = ['Full', 'Modal'];
    protected readonly directionVariants: readonly TuiHorizontalDirection[] = [
        'left',
        'right',
    ];

    protected open = signal(false);
    protected overlay = false;
    protected direction: TuiHorizontalDirection = 'right';

    public onClose(): void {
        this.open.set(false);
    }
}
```

---
# components/ElasticContainer
- **Package**: `KIT`
- **Type**: components
A wrapper component that changes its height with transition, depending on the content

### How to Use (Import)

```ts
import {TuiElasticContainer} from '@taiga-ui/kit';

// ...

@Component({
  standalone: true,
  imports: [
    // ...
    TuiElasticContainer,
  ],
  // ...
})
export class Example {}
```

### How to Use (Template)

```html
<tui-elastic-container>
  <h2>Title</h2>
  <p>Your content here</p>
  <button>Add more</button>
</tui-elastic-container>
```

### Usage Examples

#### Show more

**Template:**
```html
<tui-elastic-container> {{ current }} <button tuiLink type="button" (click)="toggle()" > Show {{ current === more ? 'less' : 'more' }} </button>
</tui-elastic-container>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiLink} from '@taiga-ui/core';
import {TuiElasticContainer} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [TuiElasticContainer, TuiLink],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly more =
        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin iaculis ipsum in elit mattis consectetur. Maecenas venenatis ligula libero, lobortis rhoncus eros aliquam a. Vivamus blandit scelerisque urna, eu euismod ipsum ultricies non. Aenean fringilla tincidunt luctus. Phasellus eleifend a enim vel aliquet. Donec accumsan orci ac nunc suscipit posuere in a turpis. Fusce hendrerit in lectus eu egestas. Donec nisl ipsum, faucibus sit amet elit eu, vehicula hendrerit purus. Duis tempus pulvinar pharetra. In volutpat, odio dictum ornare iaculis, arcu turpis blandit quam, sit amet malesuada nisl enim nec tortor. In eleifend arcu diam, ut dignissim risus elementum nec. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque pellentesque elit ac feugiat posuere. Aliquam diam ante, condimentum eget nisi nec, suscipit efficitur velit. Cras sed dolor eu tortor dapibus condimentum.';

    protected readonly less =
        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin iaculis ipsum in elit mattis consectetur. Maecenas venenatis ligula libero, lobortis rhoncus eros aliquam a. Vivamus blandit scelerisque urna, eu euismod ipsum ultricies non. Aenean fringilla tincidunt luctus. Phasellus eleifend a enim vel aliquet. Donec accumsan orci ac nunc suscipit posuere in a turpis. Fusce hendrerit in lectus eu egestas.';

    protected current = this.less;

    protected toggle(): void {
        this.current = this.current === this.less ? this.more : this.less;
    }
}
```

#### contenteditable

**Template:**
```html
<tui-elastic-container class="container">
<div contenteditable class="editable" > Editable content </div>
</tui-elastic-container>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiElasticContainer} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [TuiElasticContainer],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {}
```

#### Add and remove content

**Template:**
```html
<tui-elastic-container class="visible">
<div *tuiRepeatTimes="let index of content" class="tui-space_bottom-4" > I'm content </div>
<button size="s" tuiButton type="button" class="tui-space_right-2" (click)="add()" > Add content </button>
<button size="s" tuiButton type="button" (click)="remove()" > Remove content </button>
</tui-elastic-container>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiRepeatTimes} from '@taiga-ui/cdk';
import {TuiButton} from '@taiga-ui/core';
import {TuiElasticContainer} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [TuiButton, TuiElasticContainer, TuiRepeatTimes],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected content = 1;

    protected add(): void {
        this.content++;
    }

    protected remove(): void {
        this.content--;
    }
}
```

#### With animations inside

**Template:**
```html
<button size="s" tuiButton type="button" (click)="add()" > Add item </button>
<tui-elastic-container class="tui-space_top-4">
<div *ngFor="let item of items; let index = index" class="wrapper" >
<h3 class="title">
<button appearance="secondary" size="s" tuiIconButton type="button" class="tui-space_right-2" [style.border-radius.%]="100" [tuiChevron]="item.expanded" (click)="item.expanded = !item.expanded" > Expand </button> Nested form <button appearance="flat" iconStart="@tui.trash" size="s" tuiIconButton type="button" class="remove" [style.border-radius.%]="100" (click)="remove(index)" > Remove </button>
</h3>
<tui-expand [expanded]="item.expanded">
<tui-input class="tui-space_top-4" [(ngModel)]="item.value" > Some input </tui-input>
</tui-expand>
</div>
</tui-elastic-container>
```
**TypeScript:**
```ts
import {NgForOf} from '@angular/common';
import {Component} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {tuiArrayRemove} from '@taiga-ui/cdk';
import {TuiButton, TuiExpand} from '@taiga-ui/core';
import {TuiChevron, TuiElasticContainer} from '@taiga-ui/kit';
import {TuiInputModule} from '@taiga-ui/legacy';

@Component({
    standalone: true,
    imports: [
        FormsModule,
        NgForOf,
        TuiButton,
        TuiChevron,
        TuiElasticContainer,
        TuiExpand,
        TuiInputModule,
    ],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected items = [
        {
            expanded: false,
            value: 'Test 1',
        },
        {
            expanded: false,
            value: 'Test 2',
        },
    ];

    protected add(): void {
        this.items = this.items.concat({expanded: false, value: 'New value'});
    }

    protected remove(index: number): void {
        this.items = tuiArrayRemove(this.items, index);
    }
}
```


### TypeScript

```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {TuiDemo} from '@demo/utils';

@Component({
    standalone: true,
    imports: [TuiDemo],
    templateUrl: './index.html',
    changeDetection,
})
export default class Page {}
```

---
# components/Error
- **Package**: `CORE`
- **Type**: components
Error
            allows to show an error. If you work with a form, see
            
                tuiFieldError
            
            . The idea of
            tui-error
            is to show arbitrary messages styled as errors, with height or fade transition.

### How to Use (Import)

```ts
import {TuiError} from '@taiga-ui/core';

// ...

@Component({
  standalone: true,
  imports: [
    // ...
    TuiError,
  ],
  // ...
})
export class Example {}
```

### How to Use (Template)

```html
<tui-error [error]="error"></tui-error>
```

### Example

```html
<tui-error [error]="error" />
```

### API

| Property | Type | Description |
|----------|-----|----------|
| error | `TuiValidationError | string | null` | Active state for routerLinkActive , for example |

### Usage Examples

#### Basic

**Template:**
```html
<label tuiLabel>
<input tuiSwitch type="checkbox" [(ngModel)]="enabled" /> Show </label>
<tui-error [error]="computedError" />
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiValidationError} from '@taiga-ui/cdk';
import {TuiError, TuiLabel} from '@taiga-ui/core';
import {TuiSwitch} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [FormsModule, TuiError, TuiLabel, TuiSwitch],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    protected enabled = false;

    protected error = new TuiValidationError('An error');

    protected get computedError(): TuiValidationError | null {
        return this.enabled ? this.error : null;
    }
}
```


### TypeScript

```ts
import {Component, type TemplateRef, ViewChild} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {TuiDemo} from '@demo/utils';
import {TuiValidationError} from '@taiga-ui/cdk';
import {TuiError} from '@taiga-ui/core';

@Component({
    standalone: true,
    imports: [TuiDemo, TuiError],
    templateUrl: './index.html',
    changeDetection,
})
export default class Page {
    @ViewChild('errorContent')
    protected errorContent?: TemplateRef<Record<string, unknown>>;

    protected readonly errorVariants: readonly string[] = [
        'Error as string',
        'Error as HTML content',
    ];

    protected selectedError = this.errorVariants[0]!;

    protected get error(): TuiValidationError | string | null {
        if (this.selectedError === null) {
            return null;
        }

        if (this.selectedError === this.errorVariants[0]) {
            return this.selectedError;
        }

        return new TuiValidationError(this.errorContent || '');
    }
}
```

---
# components/Expand
- **Package**: `EXPERIMENTAL`
- **Type**: components

### How to Use (Import)

```ts
import {TuiExpand} from '@taiga-ui/experimental';

// ...

@Component({
  standalone: true,
  imports: [
    // ...
    TuiExpand,
  ],
  // ...
})
export class Example {}
```

### How to Use (Template)

```html
<tui-expand [expanded]="expanded">Eager content</tui-expand>
```

### Usage Examples

#### Lazy

**Template:**
```html
<p> Chapman: Mr Wentworth just told me to come in here and say that there was trouble at the mill, that's all - I didn't expect a kind of Spanish Inquisition. </p>
<button tuiButton type="button" (click)="expanded = !expanded" > Show/Hide </button>
<tui-expand [expanded]="expanded">
<p *tuiItem>NOBODY expects the Spanish Inquisition!</p>
</tui-expand>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiItem} from '@taiga-ui/cdk';
import {TuiButton} from '@taiga-ui/core';
import {TuiExpand} from '@taiga-ui/experimental';

@Component({
    standalone: true,
    imports: [TuiButton, TuiExpand, TuiItem],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    protected expanded = false;
}
```

#### Eager

**Template:**
```html
<button tuiButton type="button" (click)="expanded = !expanded" > Show/Hide </button>
<tui-expand [expanded]="expanded">
<p *tuiRepeatTimes="let index of 3">I am eagerly loaded but hidden</p>
</tui-expand>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiRepeatTimes} from '@taiga-ui/cdk';
import {TuiButton} from '@taiga-ui/core';
import {TuiExpand} from '@taiga-ui/experimental';

@Component({
    standalone: true,
    imports: [TuiButton, TuiExpand, TuiRepeatTimes],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    protected expanded = false;
}
```

#### Async

**Template:**
```html
<button tuiButton type="button" (click)="expanded = !expanded" > Show/Hide </button>
<tui-expand [expanded]="expanded">
<tui-elastic-container *tuiItem>
<tui-loader *ngIf="loading$ | async; else content" [style.margin.rem]="1" />
<ng-template #content>
<p> You can use <code>ElasticContainer</code> to animate height changes </p>
<p>Just some more content</p> Making this section bigger than loader </ng-template>
</tui-elastic-container>
</tui-expand>
```
**TypeScript:**
```ts
import {AsyncPipe, NgIf} from '@angular/common';
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TUI_FALSE_HANDLER, TuiItem} from '@taiga-ui/cdk';
import {TuiButton, TuiLoader} from '@taiga-ui/core';
import {TuiExpand} from '@taiga-ui/experimental';
import {TuiElasticContainer} from '@taiga-ui/kit';
import {map, startWith, timer} from 'rxjs';

@Component({
    standalone: true,
    imports: [
        AsyncPipe,
        NgIf,
        TuiButton,
        TuiElasticContainer,
        TuiExpand,
        TuiItem,
        TuiLoader,
    ],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly loading$ = timer(2000).pipe(
        map(TUI_FALSE_HANDLER),
        startWith(true),
    );

    protected expanded = false;
}
```

#### Old syntax

**Template:**
```html
<p> Chapman: Mr Wentworth just told me to come in here and say that there was trouble at the mill, that's all - I didn't expect a kind of Spanish Inquisition. </p>
<button tuiButton type="button" (click)="toggle()" > Show/Hide </button>
<tui-expand [expanded]="expanded">
<ng-template tuiExpandContent>
<p>NOBODY expects the Spanish Inquisition!</p>
</ng-template>
</tui-expand>
<tui-expand [expanded]="expanded">
<div *ngFor="let page of subpages">
<div>{{ page }}</div>
</div>
</tui-expand>
```
**TypeScript:**
```ts
import {NgForOf} from '@angular/common';
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiButton, TuiExpand} from '@taiga-ui/core';

@Component({
    standalone: true,
    imports: [NgForOf, TuiButton, TuiExpand],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    protected expanded = false;

    protected subpages = ['page1', 'page2', 'page3'];

    protected toggle(): void {
        this.expanded = !this.expanded;
    }
}
```


### TypeScript

```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {TuiDemo} from '@demo/utils';

@Component({
    standalone: true,
    imports: [TuiDemo],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    changeDetection,
})
export default class Page {
    protected readonly examples = ['Lazy', 'Eager', 'Async', 'Old syntax'];
}
```

### LESS

```less
@import '@taiga-ui/core/styles/taiga-ui-local';

.tooltip {
    position: relative;

    &:hover .bubble {
        opacity: 1;
    }
}

.bubble {
    .transition(opacity);

    position: absolute;
    left: 3.125rem;
    bottom: 1.875rem;
    inline-size: 15.625rem;
    background: var(--tui-text-primary);
    color: var(--tui-background-base);
    border-radius: 0.25rem;
    padding: 0.625rem;
    opacity: 0;

    &::after {
        content: '';
        position: absolute;
        left: 50%;
        bottom: -0.9375rem;
        border-block-start: 0.9375rem solid var(--tui-text-primary);
        border-inline-start: 0.625rem solid transparent;
        border-inline-end: 0.625rem solid transparent;
        transform: translate(-0.625rem, 0);
    }
}
```

---
# components/Filter
- **Package**: `KIT`
- **Type**: components
Components shows separated items that can be used to filter content on the page. There are also an option
            with badges.

### How to Use (Import)

```ts
import {TuiFilter} from '@taiga-ui/kit';

// ...

@Component({
  standalone: true,
  imports: [
    // ...
    TuiFilter,
  ],
  // ...
})
export class Example {}
```

### How to Use (Template)

```html
<form [formGroup]="form">
  <tui-filter
    formControlName="filters"
    [badgeHandler]="badgeHandler"
    [disabledItemHandler]="disabledItemHandler"
    [items]="items"
    [size]="size"
    (toggledItem)="onToggledItemChange($event)"
  ></tui-filter>
</form>
```

### Example

```html
<ng-template>
<tui-filter [badgeHandler]="badgeHandler" [disabledItemHandler]="disabledItemHandler" [formControl]="control" [items]="items" [size]="size" (toggledItem)="itemToggle.emitEvent($event)" />
</ng-template>
```

### API

| Property | Type | Description |
|----------|-----|----------|
| [badgeHandler] | `TuiHandler<T>` | to get a number to show by default |
| [content] | `PolymorpheusContent` | Template for custom content in filter |
| [disabledItemHandler] | `TuiBooleanHandler` |  |
| [identityMatcher] | `TuiIdentityMatcher` |  |
| [items] | `T[]` | for view |
| [size] | `TuiSizeS | TuiSizeL` | Size |
| (toggledItem) | `T` | Toggled event of item |

### Usage Examples

#### Basic

**Template:**
```html
<form [formGroup]="form">
<tui-filter formControlName="filters" size="s" [disabledItemHandler]="disabledItemHandler" [items]="items" />
</form>
<div>
<pre>Form value: {{ form.value | json }}</pre>
</div>
```
**TypeScript:**
```ts
import {JsonPipe} from '@angular/common';
import {Component} from '@angular/core';
import {FormControl, FormGroup, ReactiveFormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {type TuiBooleanHandler} from '@taiga-ui/cdk';
import {TuiFilter} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [JsonPipe, ReactiveFormsModule, TuiFilter],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly form = new FormGroup({
        filters: new FormControl(['Food']),
    });

    protected readonly items = [
        'News',
        'Food',
        'Clothes',
        'Popular',
        'Goods',
        'Furniture',
        'Tech',
        'Building materials',
    ];

    protected disabledItemHandler: TuiBooleanHandler<string> = (item) => item.length < 7;
}
```

#### With badges

**Template:**
```html
<form [formGroup]="form">
<tui-filter formControlName="filters" [badgeHandler]="badgeHandler" [content]="content" [identityMatcher]="identityMatcher" [items]="items" />
</form>
<ng-template #content let-item > {{ item.title }} </ng-template>
<div>
<pre>Form value: {{ form.value | json }}</pre>
</div>
```
**TypeScript:**
```ts
import {JsonPipe} from '@angular/common';
import {Component} from '@angular/core';
import {FormControl, FormGroup, ReactiveFormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {type TuiHandler, type TuiIdentityMatcher} from '@taiga-ui/cdk';
import {TuiFilter} from '@taiga-ui/kit';

interface Operations {
    operations: readonly Operation[];
    title: string;
}

interface Operation {
    amount: number;
}

const COMPLETED = {
    title: 'Done',
    operations: [
        {
            amount: 100,
        },
        {
            amount: 200,
        },
    ],
};

@Component({
    standalone: true,
    imports: [JsonPipe, ReactiveFormsModule, TuiFilter],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly form = new FormGroup({
        filters: new FormControl([
            {
                title: 'Drafts',
            },
        ]),
    });

    protected items: readonly Operations[] = [
        COMPLETED,
        {
            title: 'Drafts',
            operations: [
                {
                    amount: 100,
                },
                {
                    amount: 200,
                },
                {
                    amount: 100,
                },
                {
                    amount: 100,
                },
            ],
        },
        {
            title: 'For sign',
            operations: [],
        },
        {
            title: 'Queue',
            operations: [
                {
                    amount: 100,
                },
                {
                    amount: 200,
                },
                {
                    amount: 100,
                },
                {
                    amount: 200,
                },
                {
                    amount: 100,
                },
                {
                    amount: 200,
                },
            ],
        },
    ];

    protected identityMatcher: TuiIdentityMatcher<Operations> = (
        item1: Operations,
        item2: Operations,
    ) => item1.title === item2.title;

    protected badgeHandler: TuiHandler<Operations, number> = (item) =>
        item.operations.length;
}
```

#### Custom

**Template:**
```html
<form [formGroup]="form">
<tui-filter formControlName="filters" [content]="content" [items]="items" />
</form>
<ng-template #content let-item > {{ item }} <tui-icon class="tui-space_left-2" [icon]="getItemIcon(item)" />
</ng-template>
<div>
<pre>Form value: {{ form.value | json }}</pre>
</div>
```
**TypeScript:**
```ts
import {JsonPipe} from '@angular/common';
import {Component} from '@angular/core';
import {FormControl, FormGroup, ReactiveFormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiIcon} from '@taiga-ui/core';
import {TuiFilter} from '@taiga-ui/kit';

const getIcon: Record<string, string> = {
    Calendar: '@tui.calendar',
    Favorite: '@tui.star',
    Messages: '@tui.message-square',
    FAQ: '@tui.circle-help',
    Settings: '@tui.settings',
};

@Component({
    standalone: true,
    imports: [JsonPipe, ReactiveFormsModule, TuiFilter, TuiIcon],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected items = ['Calendar', 'Favorite', 'Messages', 'FAQ', 'Settings'];

    protected form = new FormGroup({
        filters: new FormControl<string[]>([]),
    });

    protected getItemIcon(title: string): string {
        return getIcon[title] ?? '';
    }
}
```

#### With all button

**Template:**
```html
<div class="tui-space_bottom-4">Choose a department:</div>
<div class="filters-with-all">
<button appearance="outline-grayscale" size="m" tuiButton type="button" class="item tui-space_right-1 tui-space_bottom-1" [tuiAppearanceMode]="checked$ | async" (click)="toggleAll()" > All </button>
<tui-filter size="m" class="item" [items]="items" [ngModel]="model$ | async" (ngModelChange)="onModelChange($event)" />
</div>
```
**TypeScript:**
```ts
import {AsyncPipe} from '@angular/common';
import {Component} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiButton} from '@taiga-ui/core';
import {TuiFilter} from '@taiga-ui/kit';
import {BehaviorSubject, map} from 'rxjs';

const Department = {
    IT: 'IT',
    HR: 'HR',
    HeadOffice: 'Heads',
    Delivery: 'Delivery',
    Admin: 'Administrative',
    Business: 'Business lines',
    MB: 'Business technologies',
    Finance: 'Corporate Finance',
    Payment: 'Payment Systems',
    Operating: 'Operating service lines',
    Marketing: 'Media-marketing',
    Security: 'Security Service',
} as const;

@Component({
    standalone: true,
    imports: [AsyncPipe, FormsModule, TuiButton, TuiFilter],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly items = Object.values(Department);
    protected readonly filters$ = new BehaviorSubject<readonly string[]>([]);

    protected readonly checked$ = this.filters$.pipe(
        map(({length}) => (length === this.items.length ? 'checked' : '')),
    );

    protected readonly model$ = this.filters$.pipe(
        map((value) => (value.length === this.items.length ? [] : value)),
    );

    protected onModelChange(model: readonly string[]): void {
        this.filters$.next(model);
    }

    protected toggleAll(): void {
        this.filters$.next(
            this.items.length === this.filters$.value.length ? [] : [...this.items],
        );
    }
}
```


### TypeScript

```ts
import {Component} from '@angular/core';
import {FormControl, ReactiveFormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {TuiDemo} from '@demo/utils';
import {TUI_FALSE_HANDLER, type TuiBooleanHandler, type TuiHandler} from '@taiga-ui/cdk';
import {type TuiSizeL, type TuiSizeS} from '@taiga-ui/core';
import {TuiFilter} from '@taiga-ui/kit';

class ItemWithBadge {
    constructor(
        public readonly text: string,
        public readonly badgeValue?: number,
    ) {}

    public toString(): string {
        return this.text;
    }

    public valueOf(): number | null {
        return this.badgeValue || null;
    }
}

@Component({
    standalone: true,
    imports: [ReactiveFormsModule, TuiDemo, TuiFilter],
    templateUrl: './index.html',
    changeDetection,
})
export default class Page {
    protected initialItems = ['Alex Inkin', 'Roman Sedov'];

    protected itemsVariants: Array<ReadonlyArray<ItemWithBadge | string>> = [
        ['Alex Inkin', 'Roman Sedov'],
        [
            new ItemWithBadge('Focused Zone', 10),
            new ItemWithBadge('Dropdown', 100),
            new ItemWithBadge('Menu Items', 30),
            new ItemWithBadge('Accordion'),
        ],
    ];

    protected badgeHandlerVariants: ReadonlyArray<TuiHandler<unknown, number>> = [
        (item) => Number(item),
        (item) => String(item).length,
    ];

    protected badgeHandler = this.badgeHandlerVariants[0]!;

    protected disabledItemHandlerVariants: ReadonlyArray<
        TuiBooleanHandler<ItemWithBadge | string>
    > = [
        TUI_FALSE_HANDLER,
        (item) => item === 'Roman Sedov',
        (item) => (Number(item.valueOf()) || 0) >= 30,
    ];

    protected disabledItemHandler = this.disabledItemHandlerVariants[0]!;

    protected items = this.itemsVariants[0]!;

    protected control = new FormControl(this.initialItems);

    protected readonly sizeVariants: ReadonlyArray<TuiSizeL | TuiSizeS> = ['s', 'm', 'l'];

    protected size = this.sizeVariants[2]!;
}
```

---
# components/FloatingContainer
- **Package**: `KIT`
- **Type**: components
FloatingContainer
            is a special container for creating different animated sticky footers

### How to Use (Import)

```ts
// ...
import {tuiFloatingContainer, TuiButton} from '@taiga-ui/kit';

@Component({
  standalone: true,
  imports: [
    // ...
    tuiFloatingContainer,
    TuiButton,
  ],
  // ...
})
export class Example {}
```

### How to Use (Template)

```html
... Some content

<footer
  tuiFloatingContainer
>
  <button
    tuiButton
    type="button"
  >
    Main action
  </button>
  <button
    appearance="flat"
    tuiButton
    type="button"
  >
     Secondary action
  </button>
</label>
```

### Example

```html
<p>
<label tuiLabel>
<input tuiSwitch type="checkbox" [(ngModel)]="floating" /> Floating visibility </label>
</p>
<p>
<label tuiLabel>
<input tuiSwitch type="checkbox" [(ngModel)]="secondAction" /> Second action visibility </label>
</p>
<div class="content">
<div *ngFor="let i of 30 | tuiRepeatTimes" tuiCell >
<tui-avatar appearance="primary" src="@tui.star" />
<div tuiTitle> Title <div tuiSubtitle>Description</div>
</div>
</div>
<footer *ngIf="floating" @tuiSlideInTop [tuiFloatingContainer]="color" >
<button tuiButton type="button" > Main action </button>
<button *ngIf="secondAction" appearance="flat" tuiButton type="button" @tuiHeightCollapse > Secondary action </button>
</footer>
</div>
```

### API

| Property | Type | Description |
|----------|-----|----------|
| [tuiFloatingContainer] | `string` | Background |

### Usage Examples

#### Two actions

**Template:**
```html
<h2>Scroll to see the floating</h2>
<p>
<label tuiLabel>
<input tuiSwitch type="checkbox" [(ngModel)]="floating" /> Floating visibility </label>
</p>
<p>
<label tuiLabel>
<input tuiSwitch type="checkbox" [(ngModel)]="secondAction" /> Second action visibility </label>
</p>
<div #content class="content" (scroll)="onScroll(content)" >
<div *tuiRepeatTimes="let i of 30" tuiCell >
<tui-avatar appearance="primary" src="@tui.star" />
<div tuiTitle> Title <div tuiSubtitle>Description</div>
</div>
</div>
<footer *ngIf="floating" @tuiSlideInTop [tuiFloatingContainer]="secondAction ? '' : 'transparent'" >
<button tuiButton type="button" > Main action </button>
<button *ngIf="secondAction" appearance="flat" tuiButton type="button" @tuiHeightCollapse > Secondary action </button>
</footer>
</div>
```
**TypeScript:**
```ts
import {NgIf} from '@angular/common';
import {Component} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiRepeatTimes} from '@taiga-ui/cdk';
import {
    TuiButton,
    tuiHeightCollapse,
    TuiLabel,
    tuiSlideInTop,
    TuiTitle,
} from '@taiga-ui/core';
import {TuiAvatar, TuiFloatingContainer, TuiSwitch} from '@taiga-ui/kit';
import {TuiCell} from '@taiga-ui/layout';

@Component({
    standalone: true,
    imports: [
        FormsModule,
        NgIf,
        TuiAvatar,
        TuiButton,
        TuiCell,
        TuiFloatingContainer,
        TuiLabel,
        TuiRepeatTimes,
        TuiSwitch,
        TuiTitle,
    ],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
    animations: [tuiSlideInTop, tuiHeightCollapse],
})
export default class Example {
    protected floating = false;

    protected secondAction = false;

    protected onScroll(el: HTMLElement): void {
        this.floating = el.scrollTop > 100;
        this.secondAction = el.scrollTop > 500;
    }
}
```

#### Inside SheetDialog

**Template:**
```html
<button tuiButton type="button" (click)="open = true" > Show </button>
<ng-template #template>
<div tuiHeader>
<div tuiTitle> Title <div tuiSubtitle>Subtitle</div>
</div>
</div>
<label tuiLabel [style.margin-top.rem]="1" >
<input tuiSwitch type="checkbox" [(ngModel)]="floating" /> Floating visibility </label>
<label tuiLabel [style.margin-top.rem]="0.5" >
<input tuiSwitch type="checkbox" [(ngModel)]="secondAction" /> Second action visibility </label>
<input placeholder="Some search" tuiSearch type="search" class="input" [(ngModel)]="search" />
</ng-template>
<ng-template let-observer [tuiSheetDialogOptions]="{label: template, fullscreen: true}" [(tuiSheetDialog)]="open" >
<div class="content">
<section class="items">
<div *ngFor="let item of items | tuiFilter: filter : search" tuiCell >
<tui-avatar appearance="primary" src="@tui.star" />
<div tuiTitle> {{ item.title }} <div tuiSubtitle>{{ item.description }}</div>
</div>
</div>
</section>
<footer *ngIf="floating" tuiFloatingContainer @tuiSlideInTop >
<button tuiButton type="button" (click)="observer.complete()" > Main action </button>
<button *ngIf="secondAction" appearance="flat" tuiButton type="button" @tuiHeightCollapse (click)="observer.complete()" > Secondary action </button>
</footer>
</div>
</ng-template>
```
**TypeScript:**
```ts
import {NgFor, NgIf} from '@angular/common';
import {Component} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiSheetDialog} from '@taiga-ui/addon-mobile';
import {TUI_DEFAULT_MATCHER, TuiFilterPipe, type TuiMatcher} from '@taiga-ui/cdk';
import {
    TuiButton,
    tuiHeightCollapse,
    TuiLabel,
    tuiSlideInTop,
    TuiTitle,
} from '@taiga-ui/core';
import {TuiAvatar, TuiFloatingContainer, TuiSwitch} from '@taiga-ui/kit';
import {TuiCell, TuiHeader, TuiSearch} from '@taiga-ui/layout';

@Component({
    standalone: true,
    imports: [
        FormsModule,
        NgFor,
        NgIf,
        TuiAvatar,
        TuiButton,
        TuiCell,
        TuiFilterPipe,
        TuiFloatingContainer,
        TuiHeader,
        TuiLabel,
        TuiSearch,
        TuiSheetDialog,
        TuiSwitch,
        TuiTitle,
    ],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
    animations: [tuiSlideInTop, tuiHeightCollapse],
})
export default class Example {
    protected open = false;

    protected floating = true;
    protected secondAction = false;

    protected search = '';

    protected readonly items = new Array(15).fill(0).map((_, index) => ({
        title: `Title ${index + 1}`,
        description: `Description ${index + 1}`,
    }));

    protected readonly filter: TuiMatcher<[(typeof this.items)[0], string]> = (
        item,
        search,
    ) => TUI_DEFAULT_MATCHER(item.title, search);
}
```

#### Action and label/button

**Template:**
```html
<p>
<label tuiLabel>
<input tuiSwitch type="checkbox" [(ngModel)]="floating" /> Floating visibility </label>
</p>
<p>
<label tuiLabel>
<input tuiSwitch type="checkbox" [(ngModel)]="additional" /> Additional content </label>
</p>
<div class="content">
<div *ngFor="let i of 30 | tuiRepeatTimes" tuiCell >
<tui-avatar appearance="primary" src="@tui.star" />
<div tuiTitle> Title <div tuiSubtitle>Description</div>
</div>
</div>
<footer *ngIf="floating" tuiFloatingContainer @tuiSlideInTop >
<tui-elastic-container>
<button tuiButton type="button" > Main action </button>
<span *ngIf="!additional" class="clamp" [@tuiCrossFade]="{bottom: '1rem'} | tuiAnimation" >
<tui-icon icon="@tui.settings" [style.font-size.rem]="1" /> Legal text, max 3 lines </span>
<button *ngIf="additional" appearance="flat" tuiButton type="button" [@tuiCrossFade]="{bottom: '1rem'} | tuiAnimation" > Secondary action </button>
</tui-elastic-container>
</footer>
</div>
```
**TypeScript:**
```ts
import {NgFor, NgIf} from '@angular/common';
import {Component} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiAnimationPipe, TuiRepeatTimesPipe} from '@taiga-ui/cdk';
import {
    TuiButton,
    tuiCrossFade,
    TuiIcon,
    TuiLabel,
    tuiSlideInTop,
    TuiTitle,
} from '@taiga-ui/core';
import {
    TuiAvatar,
    TuiElasticContainer,
    TuiFloatingContainer,
    TuiSwitch,
} from '@taiga-ui/kit';
import {TuiCell} from '@taiga-ui/layout';

@Component({
    standalone: true,
    imports: [
        FormsModule,
        NgFor,
        NgIf,
        TuiAnimationPipe,
        TuiAvatar,
        TuiButton,
        TuiCell,
        TuiElasticContainer,
        TuiFloatingContainer,
        TuiIcon,
        TuiLabel,
        TuiRepeatTimesPipe,
        TuiSwitch,
        TuiTitle,
    ],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
    animations: [tuiSlideInTop, tuiCrossFade],
})
export default class Example {
    protected floating = true;
    protected additional = false;
}
```

#### Custom content

**Template:**
```html
<p>
<label tuiLabel>
<input name="test" tuiRadio type="radio" value="primary" [(ngModel)]="value" /> Show primary </label>
</p>
<p>
<label tuiLabel>
<input name="test" tuiRadio type="radio" value="card" [(ngModel)]="value" /> Show card </label>
</p>
<p>
<label tuiLabel>
<input name="test" tuiRadio type="radio" value="actions" [(ngModel)]="value" /> Show actions </label>
</p>
<div class="content">
<div *tuiRepeatTimes="let i of 30" tuiCell >
<tui-avatar appearance="primary" src="@tui.star" />
<div tuiTitle> Title <div tuiSubtitle>Description</div>
</div>
</div>
<footer *ngIf="value === 'primary'" tuiFloatingContainer="transparent" @tuiSlideInTop >
<button appearance="accent" tuiButton type="button" > Main action </button>
</footer>
<footer *ngIf="value === 'card'" tuiFloatingContainer="transparent" @tuiSlideInTop >
<div tuiAppearance="floating" tuiCardLarge="compact" [style.margin-block-end.rem]="0.5" >
<header tuiHeader>
<div tuiTitle> 1000 $ <div tuiSubtitle>With price</div>
</div>
<aside tuiAccessories>
<button tuiButton type="button" > Continue </button>
</aside>
</header>
</div>
</footer>
<footer *ngIf="value === 'actions'" tuiFloatingContainer @tuiSlideInTop >
<button tuiButton type="button" > Main action </button>
<button appearance="flat" tuiButton type="button" > Secondary action </button>
</footer>
</div>
```
**TypeScript:**
```ts
import {NgIf} from '@angular/common';
import {Component} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiRepeatTimes} from '@taiga-ui/cdk';
import {
    TuiAppearance,
    TuiButton,
    TuiLabel,
    tuiSlideInTop,
    TuiTitle,
} from '@taiga-ui/core';
import {TuiAvatar, TuiFloatingContainer, TuiRadio} from '@taiga-ui/kit';
import {TuiCardLarge, TuiCell, TuiHeader} from '@taiga-ui/layout';

@Component({
    standalone: true,
    imports: [
        FormsModule,
        NgIf,
        TuiAppearance,
        TuiAvatar,
        TuiButton,
        TuiCardLarge,
        TuiCell,
        TuiFloatingContainer,
        TuiHeader,
        TuiLabel,
        TuiRadio,
        TuiRepeatTimes,
        TuiTitle,
    ],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
    animations: [tuiSlideInTop],
})
export default class Example {
    protected value = '';
}
```

#### Custom background color

**Template:**
```html
<p>
<label tuiLabel>
<input tuiSwitch type="checkbox" [(ngModel)]="floating" /> Floating visibility </label>
</p>
<p>
<label tuiLabel>
<input tuiSwitch type="checkbox" [(ngModel)]="background" /> Background visibility </label>
</p>
<p>
<label tuiLabel>
<input tuiSwitch type="checkbox" [(ngModel)]="secondAction" /> Second action visibility </label>
</p>
<p>
<tui-input-color [colors]="palette" [tuiDropdownMaxHeight]="375" [(ngModel)]="color" > Background color </tui-input-color>
</p>
<div class="content">
<div *tuiRepeatTimes="let i of 30" tuiCell >
<tui-avatar appearance="primary" src="@tui.star" />
<div tuiTitle> Title <div tuiSubtitle>Description</div>
</div>
</div>
<footer *ngIf="floating" @tuiSlideInTop [tuiFloatingContainer]="background ? color : 'transparent'" >
<button tuiButton type="button" > Main action </button>
<button *ngIf="secondAction" appearance="flat" tuiButton type="button" @tuiHeightCollapse > Secondary action </button>
</footer>
</div>
```
**TypeScript:**
```ts
import {NgIf} from '@angular/common';
import {Component} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiRepeatTimes} from '@taiga-ui/cdk';
import {
    TuiButton,
    tuiHeightCollapse,
    TuiLabel,
    tuiSlideInTop,
    TuiTextfield,
    TuiTitle,
} from '@taiga-ui/core';
import {TuiAvatar, TuiFloatingContainer, TuiSwitch} from '@taiga-ui/kit';
import {TuiCell} from '@taiga-ui/layout';
import {
    TUI_DEFAULT_INPUT_COLORS,
    tuiColorSelectorOptionsProvider,
    TuiInputColorModule,
} from '@taiga-ui/legacy';

@Component({
    standalone: true,
    imports: [
        FormsModule,
        NgIf,
        TuiAvatar,
        TuiButton,
        TuiCell,
        TuiFloatingContainer,
        TuiInputColorModule,
        TuiLabel,
        TuiRepeatTimes,
        TuiSwitch,
        TuiTextfield,
        TuiTitle,
    ],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
    providers: [tuiColorSelectorOptionsProvider({selectorMode: false})],
    animations: [tuiSlideInTop, tuiHeightCollapse],
})
export default class Example {
    protected floating = true;
    protected secondAction = false;

    protected background = true;

    protected readonly palette = TUI_DEFAULT_INPUT_COLORS;
    protected color = 'rgba(255, 221, 45, 0.8)';
}
```

#### Primary button change

**Template:**
```html
<p>
<label tuiLabel>
<input tuiSwitch type="checkbox" [(ngModel)]="floating" /> Floating visibility </label>
</p>
<p>
<label tuiLabel>
<input tuiSwitch type="checkbox" [(ngModel)]="secondAction" /> Second action visibility </label>
</p>
<p>
<label tuiLabel>
<input tuiSwitch type="checkbox" [(ngModel)]="action" /> Primary action </label>
</p>
<div class="content">
<div *tuiRepeatTimes="let i of 30" tuiCell >
<tui-avatar appearance="primary" src="@tui.star" />
<div tuiTitle> Title <div tuiSubtitle>Description</div>
</div>
</div>
<footer *ngIf="floating" @tuiSlideInTop [tuiFloatingContainer]="secondAction ? '' : 'transparent'" >
<button *ngIf="!action" tuiButton type="button" [@tuiCrossFade]="{duration: 0.25} | tuiAnimation" > Main action </button>
<button *ngIf="action" appearance="primary-grayscale" tuiButton type="button" [@tuiCrossFade]="{duration: 0.25} | tuiAnimation" > Add to Apple Wallet </button>
<button *ngIf="secondAction" appearance="flat" tuiButton type="button" @tuiHeightCollapse > Secondary action </button>
</footer>
</div>
```
**TypeScript:**
```ts
import {NgIf} from '@angular/common';
import {Component} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiAnimationPipe, TuiRepeatTimes} from '@taiga-ui/cdk';
import {
    TuiButton,
    tuiCrossFade,
    tuiHeightCollapse,
    TuiLabel,
    tuiSlideInTop,
    TuiTitle,
} from '@taiga-ui/core';
import {TuiAvatar, TuiFloatingContainer, TuiSwitch} from '@taiga-ui/kit';
import {TuiCell} from '@taiga-ui/layout';

@Component({
    standalone: true,
    imports: [
        FormsModule,
        NgIf,
        TuiAnimationPipe,
        TuiAvatar,
        TuiButton,
        TuiCell,
        TuiFloatingContainer,
        TuiLabel,
        TuiRepeatTimes,
        TuiSwitch,
        TuiTitle,
    ],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
    animations: [tuiSlideInTop, tuiCrossFade, tuiHeightCollapse],
})
export default class Example {
    protected floating = true;

    protected action = false;
    protected secondAction = false;
}
```


### TypeScript

```ts
import {NgFor, NgIf} from '@angular/common';
import {Component} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {TuiDemo} from '@demo/utils';
import {TuiRepeatTimesPipe} from '@taiga-ui/cdk';
import {
    TuiButton,
    tuiHeightCollapse,
    TuiLabel,
    tuiSlideInTop,
    TuiTitle,
} from '@taiga-ui/core';
import {TuiAvatar, TuiFloatingContainer, TuiSwitch} from '@taiga-ui/kit';
import {TuiCell} from '@taiga-ui/layout';

@Component({
    standalone: true,
    imports: [
        FormsModule,
        NgFor,
        NgIf,
        TuiAvatar,
        TuiButton,
        TuiCell,
        TuiDemo,
        TuiFloatingContainer,
        TuiLabel,
        TuiRepeatTimesPipe,
        TuiSwitch,
        TuiTitle,
    ],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    changeDetection,
    animations: [tuiSlideInTop, tuiHeightCollapse],
})
export default class Example {
    protected floating = true;

    protected secondAction = false;

    protected readonly examples = [
        'Two actions',
        'Inside SheetDialog',
        'Action and label/button',
        'Custom content',
        'Custom background color',
        'Primary button change',
    ];

    protected readonly colors = [
        '',
        'transparent',
        'var(--tui-background-elevation-1)',
        'var(--tui-background-base-alt)',
        'red',
        '#8a8db5',
        'rgba(255, 221, 45, 0.8)',
    ];

    protected color = this.colors[0]!;
}
```

### LESS

```less
.content {
    position: relative;
    display: block;
    inline-size: 18rem;
    block-size: 22rem;
    overflow: auto;
    box-shadow: 0 0.25rem 1.25rem rgba(0, 0, 0, 0.1);
    background: var(--tui-background-elevation-1);
}

footer {
    margin-inline-start: 1rem;
    margin-inline-end: 1rem;
}
```

---
# components/Form
- **Package**: `LAYOUT`
- **Type**: components

### How to Use (Import)

```ts
import {TuiAppearance} from '@taiga-ui/core';
import {TuiCardLarge, TuiForm} from '@taiga-ui/layout';

// ...

@Component({
  standalone: true,
  imports: [
    // ...
    TuiCardLarge,
    TuiAppearance,
    TuiForm,
  ],
  // ...
})
export class Example {}
```

### How to Use (Template)

```html
<form
  tuiAppearance="floating"
  tuiCardLarge
  tuiForm="l"
>
  <!-- Form content -->
</form>
```

### Usage Examples

#### Basic

**Template:**
```html
<form tuiAppearance="floating" tuiCardLarge tuiForm="m" [formGroup]="form" [style.max-width.rem]="32" >
<header tuiHeader>
<h2 tuiTitle> Registration form <span tuiSubtitle>Tell us about yourself</span>
</h2>
<span tuiAccessories>
<tui-segmented>
<label>
<input formControlName="basic" type="radio" [value]="true" /> Brief </label>
<label>
<input formControlName="basic" type="radio" [value]="false" /> Detailed </label>
</tui-segmented>
</span>
</header>
<tui-notification appearance="warning">
<h3 tuiTitle> Authenticity required <span tuiSubtitle>Please be honest and use your real data</span>
</h3>
</tui-notification>
<tui-textfield>
<label tuiLabel>Name</label>
<input formControlName="name" placeholder="John Wick" tuiTextfield />
</tui-textfield>
<tui-error formControlName="name" [error]="[] | tuiFieldError | async" />
<ng-container *ngIf="!form.controls.basic.value">
<tui-textfield>
<label tuiLabel>Email</label>
<input formControlName="email" placeholder="john@wick.com" tuiTextfield type="email" />
</tui-textfield>
<label tuiLabel>
<input formControlName="subscribe" tuiSwitch type="checkbox" /> Subscribe for newsletter <tui-icon tuiTooltip="We will not send you spam, pinky promise!" />
</label>
</ng-container>
<footer>
<button appearance="secondary" tuiButton type="button" > Cancel </button>
<button tuiButton type="submit" > Submit </button>
</footer>
</form>
```
**TypeScript:**
```ts
import {AsyncPipe, NgIf} from '@angular/common';
import {Component} from '@angular/core';
import {FormControl, FormGroup, ReactiveFormsModule, Validators} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {
    TuiAppearance,
    TuiButton,
    TuiError,
    TuiIcon,
    TuiNotification,
    TuiTextfield,
    TuiTitle,
} from '@taiga-ui/core';
import {TuiFieldErrorPipe, TuiSegmented, TuiSwitch, TuiTooltip} from '@taiga-ui/kit';
import {TuiCardLarge, TuiForm, TuiHeader} from '@taiga-ui/layout';

@Component({
    standalone: true,
    imports: [
        AsyncPipe,
        NgIf,
        ReactiveFormsModule,
        TuiAppearance,
        TuiButton,
        TuiCardLarge,
        TuiError,
        TuiFieldErrorPipe,
        TuiForm,
        TuiHeader,
        TuiIcon,
        TuiNotification,
        TuiSegmented,
        TuiSwitch,
        TuiTextfield,
        TuiTitle,
        TuiTooltip,
    ],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly form = new FormGroup({
        name: new FormControl('', Validators.required),
        email: new FormControl(''),
        subscribe: new FormControl(false),
        basic: new FormControl(true),
    });
}
```

#### Expansive

**Template:**
```html
<form tuiForm="l" [formGroup]="testForm" [style.max-width.rem]="35" >
<header tuiHeader>
<h3 tuiTitle> A header <span tuiSubtitle>Form with large controls</span>
</h3>
</header>
<tui-textfield>
<label tuiLabel>Textfield</label>
<input formControlName="nameValue" placeholder="Field placeholder" tuiTextfield />
<tui-icon tuiTooltip="A tooltip" />
</tui-textfield>
<tui-error formControlName="nameValue" [error]="[] | tuiFieldError | async" />
<tui-input-date formControlName="periodValue"> Input date <input placeholder="Placeholder" tuiTextfieldLegacy />
</tui-input-date>
<tui-error formControlName="periodValue" [error]="[] | tuiFieldError | async" />
<fieldset>
<div class="stack">
<tui-textfield>
<label tuiLabel>Input password</label>
<input formControlName="passwordValue" tuiTextfield type="password" />
<tui-icon tuiPassword />
</tui-textfield>
<tui-error formControlName="passwordValue" [error]="[] | tuiFieldError | async" />
</div>
<div class="stack">
<tui-textfield>
<label tuiLabel>Input money</label>
<input formControlName="moneyValue" tuiInputNumber [postfix]="' ' + 'RUB' | tuiCurrency" />
</tui-textfield>
<tui-error formControlName="moneyValue" [error]="[] | tuiFieldError | async" />
</div>
</fieldset>
<tui-input-slider formControlName="quantityValue" tuiTextfieldPostfix="₽" [max]="3000000" [min]="50000" [segments]="1" > Some slider </tui-input-slider>
<div class="ticks-labels">
<span>from 50 000 ₽</span>
<span>to 3 000 000 ₽</span>
</div>
<fieldset>
<div class="stack">
<tui-textfield tuiChevron [tuiTextfieldCleaner]="false" >
<label tuiLabel>Choose a person</label>
<input formControlName="personValue" tuiSelect />
<tui-data-list-wrapper *tuiTextfieldDropdown new [items]="persons" />
</tui-textfield>
<tui-error formControlName="personValue" [error]="[] | tuiFieldError | async" />
</div>
<div class="stack">
<tui-input-phone formControlName="phoneValue">Input phone</tui-input-phone>
<tui-error formControlName="phoneValue" [error]="[] | tuiFieldError | async" />
</div>
</fieldset>
<div tuiGroup [collapsed]="true" >
<label tuiBlock> Option 1 <input formControlName="radioValue" tuiRadio type="radio" value="with-commission" [style.margin-left]="'auto'" />
</label>
<label tuiBlock> Option 2 <input formControlName="radioValue" tuiRadio type="radio" value="without-commission" [style.margin-left]="'auto'" />
</label>
</div>
<fieldset>
<label tuiLabel>
<input formControlName="osnoValue" tuiCheckbox type="checkbox" /> First option </label>
<label tuiLabel>
<input formControlName="usnValue" tuiCheckbox type="checkbox" /> Easter Egg </label>
</fieldset>
<fieldset>
<label tuiLabel>
<input formControlName="eshnValue" tuiCheckbox type="checkbox" /> Boring option </label>
<label tuiLabel>
<input formControlName="envdValue" tuiCheckbox type="checkbox" /> Interesting option </label>
</fieldset>
<footer>
<button tuiButton type="submit" > Submit </button>
<button appearance="flat" tuiButton type="button" > Cancel </button>
</footer>
</form>
```
**TypeScript:**
```ts
import {AsyncPipe} from '@angular/common';
import {Component} from '@angular/core';
import {FormControl, FormGroup, ReactiveFormsModule, Validators} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {TuiCurrency, TuiCurrencyPipe} from '@taiga-ui/addon-commerce';
import {TuiDay, TuiTime} from '@taiga-ui/cdk';
import {
    TuiButton,
    TuiError,
    TuiGroup,
    TuiIcon,
    TuiLabel,
    TuiTextfield,
    TuiTitle,
} from '@taiga-ui/core';
import {
    TuiBlock,
    TuiCheckbox,
    TuiChevron,
    TuiDataListWrapper,
    TuiFieldErrorPipe,
    TuiInputNumber,
    TuiPassword,
    TuiRadio,
    TuiSelect,
    TuiTooltip,
} from '@taiga-ui/kit';
import {TuiForm, TuiHeader} from '@taiga-ui/layout';
import {
    TuiInputDateModule,
    TuiInputModule,
    TuiInputPhoneModule,
    TuiInputSliderModule,
    TuiInputTimeModule,
    TuiTextfieldControllerModule,
} from '@taiga-ui/legacy';

class User {
    constructor(
        protected readonly firstName: string,
        protected readonly lastName: string,
    ) {}

    protected toString(): string {
        return `${this.firstName} ${this.lastName}`;
    }
}

class Account {
    constructor(
        protected readonly id: string,
        protected readonly name: string,
        protected readonly amount: number,
        protected readonly currency: TuiCurrency,
        protected readonly cardSvg: string,
    ) {}
}

@Component({
    standalone: true,
    imports: [
        AsyncPipe,
        ReactiveFormsModule,
        TuiBlock,
        TuiButton,
        TuiCheckbox,
        TuiChevron,
        TuiCurrencyPipe,
        TuiDataListWrapper,
        TuiError,
        TuiFieldErrorPipe,
        TuiForm,
        TuiGroup,
        TuiHeader,
        TuiIcon,
        TuiInputDateModule,
        TuiInputModule,
        TuiInputNumber,
        TuiInputPhoneModule,
        TuiInputSliderModule,
        TuiInputTimeModule,
        TuiLabel,
        TuiPassword,
        TuiRadio,
        TuiSelect,
        TuiTextfield,
        TuiTextfieldControllerModule,
        TuiTitle,
        TuiTooltip,
    ],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    changeDetection,
})
export default class Example {
    protected readonly svgIcons = {
        common: 'https://ng-web-apis.github.io/dist/assets/images/common.svg',
        universal: 'https://ng-web-apis.github.io/dist/assets/images/universal.svg',
        intersection:
            'https://ng-web-apis.github.io/dist/assets/images/intersection-observer.svg',
        mutation:
            'https://ng-web-apis.github.io/dist/assets/images/mutation-observer.svg',
    };

    protected persons = [new User('Roman', 'Sedov'), new User('Alex', 'Inkin')];

    protected accounts = [
        new Account('1', 'Common', 24876.55, TuiCurrency.Ruble, this.svgIcons.common),
        new Account('2', 'Universal', 335, TuiCurrency.Dollar, this.svgIcons.universal),
        new Account(
            '3',
            'Intersection',
            10000,
            TuiCurrency.Euro,
            this.svgIcons.intersection,
        ),
        new Account('4', 'Mutation', 100, TuiCurrency.Pound, this.svgIcons.mutation),
    ];

    protected testForm = new FormGroup({
        nameValue: new FormControl('', Validators.required),
        textValue: new FormControl('', Validators.required),
        passwordValue: new FormControl('', Validators.required),
        phoneValue: new FormControl('', Validators.required),
        moneyValue: new FormControl('100', Validators.required),
        periodValue: new FormControl(new TuiDay(2017, 2, 15), Validators.required),
        timeValue: new FormControl(new TuiTime(12, 30), Validators.required),
        personValue: new FormControl(this.persons[0]),
        quantityValue: new FormControl(50_000),
        radioValue: new FormControl('with-commission'),
        accountWherefrom: new FormControl<Account | null>(null),
        accountWhere: new FormControl<Account | null>(null),
        checkboxValue: new FormControl(false),
        osnoValue: new FormControl(true),
        usnValue: new FormControl(false),
        eshnValue: new FormControl(false),
        envdValue: new FormControl(false),
    });
}
```

#### Grouped

**Template:**
```html
<tui-segmented size="m" [style.margin-bottom.rem]="2" [style.max-width]="'fit-content'" [(activeItemIndex)]="segmentedIndex" >
<button type="button">Stepper</button>
<button type="button">Tabs</button>
</tui-segmented>
<ng-container [ngSwitch]="segmentedIndex">
<ng-container *ngSwitchCase="0">
<tui-stepper [activeItemIndex]="index()">
<button tuiStep [disabled]="true" > Common </button>
<button tuiStep [disabled]="true" > Network access </button>
</tui-stepper>
</ng-container>
<ng-container *ngSwitchCase="1">
<tui-tabs size="m" underline="var(--tui-background-accent-opposite-pressed)" [activeItemIndex]="index()" (activeItemIndexChange)="index.set($event)" >
<button tuiTab>Common</button>
<button tuiTab>Network access</button>
</tui-tabs>
</ng-container>
</ng-container>
<ng-container [ngSwitch]="index()">
<ng-container *ngSwitchCase="0">
<form tuiAppearance="floating" tuiCardLarge tuiForm="m" [formGroup]="form" >
<header tuiHeader>
<h2 tuiTitle> Registration form <span tuiSubtitle>Tell us about yourself</span>
</h2>
</header>
<tui-textfield>
<label tuiLabel>Name</label>
<input formControlName="name" placeholder="John Wick" tuiTextfield />
</tui-textfield>
</form>
<footer>
<button appearance="secondary" size="m" tuiButton type="button" > Cancel </button>
<button size="m" tuiButton type="submit" (click)="next()" > Next </button>
</footer>
</ng-container>
<ng-container *ngSwitchCase="1">
<form tuiAppearance="floating" tuiCardLarge tuiForm="m" [formGroup]="form" >
<header tuiHeader>
<h2 tuiTitle> Configuration network <span tuiSubtitle>Fill network settings</span>
</h2>
</header>
<tui-textfield>
<label tuiLabel>IP-address</label>
<input formControlName="ip" placeholder="192.0.2.1" tuiTextfield />
</tui-textfield>
</form>
<footer>
<button appearance="secondary" size="m" tuiButton type="button" (click)="previous()" > Back </button>
<button size="m" tuiButton type="submit" > Save </button>
</footer>
</ng-container>
</ng-container>
```
**TypeScript:**
```ts
import {NgSwitch, NgSwitchCase} from '@angular/common';
import {Component, signal} from '@angular/core';
import {FormControl, FormGroup, ReactiveFormsModule, Validators} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {TuiAppearance, TuiButton, TuiTextfield, TuiTitle} from '@taiga-ui/core';
import {TuiSegmented, TuiStepper, TuiTabs} from '@taiga-ui/kit';
import {TuiCardLarge, TuiForm, TuiHeader} from '@taiga-ui/layout';

@Component({
    standalone: true,
    imports: [
        NgSwitch,
        NgSwitchCase,
        ReactiveFormsModule,
        TuiAppearance,
        TuiButton,
        TuiCardLarge,
        TuiForm,
        TuiHeader,
        TuiSegmented,
        TuiStepper,
        TuiTabs,
        TuiTextfield,
        TuiTitle,
    ],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    changeDetection,
})
export default class Example {
    protected readonly index = signal(0);

    protected segmentedIndex = 0;

    protected readonly form = new FormGroup({
        name: new FormControl('', Validators.required),
        ip: new FormControl('', Validators.required),
    });

    protected previous(): void {
        this.index.update((index) => index - 1);
    }

    protected next(): void {
        this.index.update((index) => index + 1);
    }
}
```


### TypeScript

```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {TuiDemo} from '@demo/utils';

@Component({
    standalone: true,
    imports: [TuiDemo],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    changeDetection,
})
export default class Page {
    protected readonly examples = ['Basic', 'Expansive', 'Grouped'];
}
```

### LESS

```less
.bar {
    block-size: 6.25rem;
}
```

---
# components/Group
- **Package**: `CORE`
- **Type**: components
A directive for grouping other components. For example,
            
                textfields
            
            and
            
                buttons
            
            .

### How to Use (Import)

```ts
import {TuiGroup} from '@taiga-ui/core';

// ...

@Component({
  standalone: true,
  imports: [
    // ...
    TuiGroup,
  ],
  // ...
})
export class Example {}
```

### How to Use (Template)

```html
<div
  class="group"
  tuiGroup
>
  <div>
    <tui-input
      formControlName="testValue"
      tuiHintContent="Write a number"
      [style.border-radius]="'inherit'"
    >
      House
      <input
        tuiTextfieldLegacy
        placeholder="House"
      />
    </tui-input>
    <tui-error
      formControlName="testValue"
      [error]="[] | tuiFieldError | async"
    ></tui-error>
  </div>
  <div>
    <tui-input
      formControlName="testValue2"
      tuiHintContent="Write house building"
      [style.border-radius]="'inherit'"
    >
      House building
      <input
        tuiTextfieldLegacy
        placeholder="House building"
      />
    </tui-input>
    <tui-error
      formControlName="testValue2"
      [error]="[] | tuiFieldError | async"
    ></tui-error>
  </div>
  <div>
    <tui-input
      formControlName="testValue3"
      tuiHintContent="Write an apartment number only"
      [style.border-radius]="'inherit'"
    >
      Apartment
      <input
        tuiTextfieldLegacy
        placeholder="Apartment number"
      />
    </tui-input>
    <tui-error
      formControlName="testValue3"
      [error]="[] | tuiFieldError | async"
    ></tui-error>
  </div>
</div>
```

### Example

```html
<div tuiGroup class="group" [collapsed]="collapsed" [orientation]="orientation" [rounded]="rounded" [size]="size" >
<button appearance="outline" size="l" tuiButton type="button" > Button 1 </button>
<button appearance="outline" size="l" tuiButton type="button" > Button 2 </button>
<button appearance="outline" size="l" tuiButton type="button" > Button 3 </button>
</div>
```

### API

| Property | Type | Description |
|----------|-----|----------|
| [collapsed] | `boolean` | by default) |
| [rounded] | `boolean` | The first and the last items are rounded |
| [orientation] | `TuiOrientation` | Horizontal or vertical direction of group |
| [size] | `TuiSizeL` | Size of rounding |

### Usage Examples

#### Inputs

**Template:**
```html
<form class="input-wrapper" [formGroup]="testForm" >
<div tuiGroup class="group" >
<div>
<tui-input formControlName="testValue" tuiHintContent="Write a number" [style.border-radius]="'inherit'" > House <input placeholder="House" tuiTextfieldLegacy />
</tui-input>
<tui-error formControlName="testValue" [error]="[] | tuiFieldError | async" />
</div>
<div>
<tui-multi-select formControlName="multiSelectControl" tuiHintContent="Write house building" [editable]="false" [rows]="1" [style.border-radius]="'inherit'" [tuiTextfieldLabelOutside]="true" > Building <tui-data-list-wrapper *tuiDataList tuiMultiSelectGroup [items]="items" />
</tui-multi-select>
<tui-error formControlName="multiSelectControl" [error]="[] | tuiFieldError | async" />
</div>
<div>
<tui-input formControlName="testValue3" tuiHintContent="Write an apartment number only" [style.border-radius]="'inherit'" > Apartment <input placeholder="Apartment number" tuiTextfieldLegacy />
</tui-input>
<tui-error formControlName="testValue3" [error]="[] | tuiFieldError | async" />
</div>
</div>
</form>
```
**TypeScript:**
```ts
import {AsyncPipe} from '@angular/common';
import {Component} from '@angular/core';
import {FormControl, FormGroup, ReactiveFormsModule, Validators} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiError, TuiGroup, TuiHint} from '@taiga-ui/core';
import {TuiDataListWrapper, TuiFieldErrorPipe} from '@taiga-ui/kit';
import {
    TuiInputModule,
    TuiMultiSelectModule,
    TuiTextfieldControllerModule,
} from '@taiga-ui/legacy';

@Component({
    standalone: true,
    imports: [
        AsyncPipe,
        ReactiveFormsModule,
        TuiDataListWrapper,
        TuiError,
        TuiFieldErrorPipe,
        TuiGroup,
        TuiHint,
        TuiInputModule,
        TuiMultiSelectModule,
        TuiTextfieldControllerModule,
    ],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly items = ['Option 1', 'Option 2', 'Option 3'];

    protected testForm = new FormGroup({
        testValue: new FormControl('', Validators.required),
        multiSelectControl: new FormControl<string[]>([], Validators.required),
        testValue3: new FormControl('', Validators.required),
    });
}
```

#### ButtonGroup

**Template:**
```html
<div tuiGroup class="group" [collapsed]="true" >
<button appearance="outline" tuiButton type="button" > Button 1 </button>
<button appearance="outline" tuiButton type="button" > Button 2 </button>
<button appearance="outline" iconStart="@tui.chevron-down" title="A sample of icon-button in a group" tuiIconButton type="button" [style.flex]="'0 0 auto'" ></button>
</div>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiButton, TuiGroup} from '@taiga-ui/core';

@Component({
    standalone: true,
    imports: [TuiButton, TuiGroup],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {}
```

#### Vertical group

**Template:**
```html
<form orientation="vertical" tuiGroup class="group" [collapsed]="true" [formGroup]="testForm" >
<label tuiBlock [style.justify-content]="'space-between'" > Oranges <input formControlName="testValue" tuiRadio type="radio" value="orange" />
</label>
<label tuiBlock> Apples <input formControlName="testValue" tuiRadio type="radio" value="apple" [style.margin-inline-start]="'auto'" />
</label>
<label tuiBlock> Pineapples <input formControlName="testValue" tuiRadio type="radio" value="pineapple" />
</label>
</form>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {FormControl, FormGroup, ReactiveFormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiGroup} from '@taiga-ui/core';
import {TuiBlock, TuiRadio} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [ReactiveFormsModule, TuiBlock, TuiGroup, TuiRadio],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    protected testForm = new FormGroup({
        testValue: new FormControl('orange'),
    });
}
```

#### Directive

**Template:**
```html
<p>Directive helps to avoid extra layers of HTML</p>
<form tuiGroup [collapsed]="true" [formGroup]="testForm" >
<label tuiBlock>
<span tuiTitle> Orange <span tuiSubtitle>An orange is a fruit of various citrus species in the family Rutaceae</span>
</span>
<input formControlName="testValue" tuiRadio type="radio" value="orange" />
</label>
<label tuiBlock>
<span tuiTitle> Pineapple <span tuiSubtitle> Not to be confused with neither <em>pines</em> nor <em>apples</em>
</span>
</span>
<input formControlName="testValue" tuiRadio type="radio" value="pineapple" />
</label>
</form>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {FormControl, FormGroup, ReactiveFormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiGroup, TuiTitle} from '@taiga-ui/core';
import {TuiBlock, TuiRadio} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [ReactiveFormsModule, TuiBlock, TuiGroup, TuiRadio, TuiTitle],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly testForm = new FormGroup({
        testValue: new FormControl(''),
    });
}
```


### TypeScript

```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {DemoRoute} from '@demo/routes';
import {TuiDemo} from '@demo/utils';
import {TuiButton, TuiGroup, type TuiOrientation, type TuiSizeL} from '@taiga-ui/core';

@Component({
    standalone: true,
    imports: [TuiButton, TuiDemo, TuiGroup],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    changeDetection,
})
export default class Page {
    protected rounded = true;
    protected collapsed = false;

    protected readonly orientationVariants: readonly TuiOrientation[] = [
        'horizontal',
        'vertical',
    ];

    protected orientation: TuiOrientation = this.orientationVariants[0]!;

    protected readonly sizeVariants: readonly TuiSizeL[] = ['m', 'l'];

    protected size: TuiSizeL = this.sizeVariants[1]!;
    protected readonly routes = DemoRoute;
}
```

### LESS

```less
.group {
    max-inline-size: 30.25rem;
}
```

---
# components/Header
- **Package**: `LAYOUT`
- **Type**: components

### How to Use (Import)

```ts
import {Component} from '@angular/core';
import {TuiHeader} from '@taiga-ui/layout';
import {TuiTitle} from '@taiga-ui/core';
// ...

@Component({
  standalone: true,
  imports: [
    // ...
    TuiHeader,
    TuiTitle,
  ],
})
export class Example {}
```

### How to Use (Template)

```html
<header tuiHeader>
  <hgroup tuiTitle>
    <h1>Title</h1>
    <p tuiSubtitle>Subtitle</p>
  </hgroup>
  <aside tuiAccessories>Accessories</aside>
</header>
```

### Usage Examples

#### Sizes

**Template:**
```html
<header tuiHeader="h1">
<hgroup tuiTitle>
<h1>Title</h1>
<p tuiSubtitle>Subtitle</p>
</hgroup>
<aside tuiAccessories>
<tui-badge-notification>1</tui-badge-notification>
<button size="l" tuiButton type="button" > Button </button>
</aside>
</header>
<header tuiHeader="h2">
<hgroup tuiTitle>
<h2>Title</h2>
<p tuiSubtitle>Subtitle</p>
</hgroup>
<aside tuiAccessories>
<tui-badge-notification>1</tui-badge-notification>
<button size="m" tuiButton type="button" > Button </button>
</aside>
</header>
<header tuiHeader="h3">
<hgroup tuiTitle>
<h3>Title</h3>
<p tuiSubtitle>Subtitle</p>
</hgroup>
<aside tuiAccessories>
<tui-badge-notification>1</tui-badge-notification>
<button size="m" tuiButton type="button" > Button </button>
</aside>
</header>
<header tuiHeader="h4">
<hgroup tuiTitle>
<h4>Title</h4>
<p tuiSubtitle>Subtitle</p>
</hgroup>
<aside tuiAccessories>
<tui-badge-notification>1</tui-badge-notification>
<button tuiButton type="button" > Button </button>
</aside>
</header>
<header tuiHeader="h5">
<hgroup tuiTitle>
<h5>Title</h5>
<p tuiSubtitle>Subtitle</p>
</hgroup>
<aside tuiAccessories>
<tui-badge-notification>1</tui-badge-notification>
<button tuiButton type="button" > Button </button>
</aside>
</header>
<header tuiHeader="h6">
<hgroup tuiTitle>
<h6>Title</h6>
<p tuiSubtitle>Subtitle</p>
</hgroup>
<aside tuiAccessories>
<tui-badge-notification size="s">1</tui-badge-notification>
<button size="xs" tuiButton type="button" > Button </button>
</aside>
</header>
<header tuiHeader="body-xl">
<hgroup tuiTitle>
<h6>Title</h6>
<p tuiSubtitle>Subtitle</p>
</hgroup>
<aside tuiAccessories>
<tui-badge-notification size="s">1</tui-badge-notification>
<button size="xs" tuiButton type="button" > Button </button>
</aside>
</header>
<header tuiHeader="body-l">
<hgroup tuiTitle>
<h6>Title</h6>
<p tuiSubtitle>Subtitle</p>
</hgroup>
<aside tuiAccessories>
<tui-badge-notification size="s">1</tui-badge-notification>
<button size="xs" tuiButton type="button" > Button </button>
</aside>
</header>
<header tuiHeader="body-m">
<hgroup tuiTitle>
<h6>Title</h6>
<p tuiSubtitle>Subtitle</p>
</hgroup>
<aside tuiAccessories>
<tui-badge-notification size="s">1</tui-badge-notification>
<button size="xs" tuiButton type="button" > Button </button>
</aside>
</header>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiButton, TuiTitle} from '@taiga-ui/core';
import {TuiBadgeNotification} from '@taiga-ui/kit';
import {TuiHeader} from '@taiga-ui/layout';

@Component({
    standalone: true,
    imports: [TuiBadgeNotification, TuiButton, TuiHeader, TuiTitle],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {}
```

#### Accessories

**Template:**
```html
<section>
<header tuiHeader>
<hgroup tuiTitle>
<p tuiCaption>Opensource</p>
<h5>Taiga UI</h5>
<p tuiSubtitle>Component library</p>
</hgroup>
<aside tuiAccessories>
<tui-badge-notification>1</tui-badge-notification>
<tui-icon tuiTooltip="Angular kit" />
<tui-avatar appearance="accent" src="@tui.star" />
</aside>
</header>
<p class="description"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium ad aliquam asperiores atque autem consequatur cumque cupiditate delectus doloremque doloribus ea earum eius eos error esse est eum eveniet </p>
</section>
<section>
<header tuiHeader>
<hgroup tuiTitle>
<h5>Maskito</h5>
<p tuiSubtitle> Awesome <span [tuiSensitive]="true">one</span>
</p>
</hgroup>
<aside tuiAccessories>
<tui-badge-notification>1</tui-badge-notification>
<tui-icon tuiTooltip="Mask it" />
<a href="https://maskito.dev/" rel="noreferrer" target="_blank" tuiButton > Support </a>
</aside>
</header>
<p class="description"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium ad aliquam asperiores atque autem consequatur cumque cupiditate delectus doloremque doloribus ea earum eius eos error esse est eum eveniet </p>
</section>
<header tuiHeader>
<hgroup tuiTitle>
<h5>Polymorpheus</h5>
<p tuiSubtitle>The power of dreams</p>
</hgroup>
<aside tuiAccessories>
<tui-badge>Free tier</tui-badge>
<a href="https://github.com/taiga-family/ng-polymorpheus" tuiLink > Link </a>
</aside>
</header>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiButton, TuiIcon, TuiLink, TuiTitle} from '@taiga-ui/core';
import {
    TuiAvatar,
    TuiBadge,
    TuiBadgeNotification,
    TuiSensitive,
    TuiTooltip,
} from '@taiga-ui/kit';
import {TuiHeader} from '@taiga-ui/layout';

@Component({
    standalone: true,
    imports: [
        TuiAvatar,
        TuiBadge,
        TuiBadgeNotification,
        TuiButton,
        TuiHeader,
        TuiIcon,
        TuiLink,
        TuiSensitive,
        TuiTitle,
        TuiTooltip,
    ],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {}
```

#### Interactive

**Template:**
```html
<header tuiHeader="h4">
<hgroup tuiTitle>
<h5 class="interactive-title"> Title <tui-icon icon="@tui.chevron-right" />
</h5>
<p tuiSubtitle>Subtitle</p>
</hgroup>
</header>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiIcon, TuiTitle} from '@taiga-ui/core';
import {TuiHeader} from '@taiga-ui/layout';

@Component({
    standalone: true,
    imports: [TuiHeader, TuiIcon, TuiTitle],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {}
```


### TypeScript

```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {TuiDemo} from '@demo/utils';
import {tuiDocExampleOptionsProvider} from '@taiga-ui/addon-doc';

@Component({
    standalone: true,
    imports: [TuiDemo],
    templateUrl: './index.html',
    changeDetection,
    providers: [tuiDocExampleOptionsProvider({fullsize: true})],
})
export default class Page {}
```

---
# components/Icon
- **Package**: `CORE`
- **Type**: components
A component to use icons and color them with CSS. By default,
            tui-icon
            expects the
            
                Lucide icons.
            
            To associate a name with icon you should use that pattern
            &#64;tui.[name]

### How to Use (Import)

```ts
import {Component} from '@angular/core';
import {TuiIcon} from '@taiga-ui/core';
// ...

@Component({
  standalone: true,
  imports: [
    // ...
    TuiIcon,
  ],
})
export class Example {}
```

### How to Use (Template)

```html
<tui-icon icon="@tui.check"></tui-icon>
```

### Example

```html
<tui-icon [background]="backgroundIcon" [icon]="icon" [style.background]="backgroundColor" [style.color]="color" [style.font-size.px]="size" />
```

### API

| Property | Type | Description |
|----------|-----|----------|
| [icon] | `string` | . |
| [background] | `string` | You can limit the area of your icon by shape which refers to removing part of icon area defined by other
                icon. |

### Usage Examples

#### Basic

**Template:**
```html
<tui-icon icon="@tui.heart" [style.color]="'var(--tui-background-accent-1)'" />
<img alt="" [src]="'@tui.heart' | tuiIcon" />
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiIcon, TuiIconPipe} from '@taiga-ui/core';

@Component({
    standalone: true,
    imports: [TuiIcon, TuiIconPipe],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {}
```

#### Inline svg

**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiIcon} from '@taiga-ui/core';

@Component({
    standalone: true,
    imports: [TuiIcon],
    template: '<tui-icon [icon]="icon" />',
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly icon = `data:image/svg+xml;charset=UTF-8,${encodeURIComponent(
        '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m5 12 7-7 7 7"/><path d="M12 19V5"/></svg>',
    )}`;
}
```

#### External

**Template:**
```html
<tui-icon icon="https://raw.githubusercontent.com/MarsiBarsi/readme-icons/main/github.svg" class="red" />
<tui-icon icon="https://cdn-icons-png.flaticon.com/64/12710/12710759.png" class="hover" />
<tui-icon icon="telegram" class="text" />
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiIcon, tuiIconResolverProvider} from '@taiga-ui/core';

@Component({
    standalone: true,
    imports: [TuiIcon],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
    providers: [
        tuiIconResolverProvider((icon) =>
            icon.includes('/') ? icon : `/assets/icons/${icon}.svg`,
        ),
    ],
})
export default class Example {}
```

#### Two colors

**Template:**
```html
<tui-icon background="@tui.info-filled" icon="@tui.info" [style.background]="'pink'" [style.color]="'purple'" />
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiIcon} from '@taiga-ui/core';

@Component({
    standalone: true,
    imports: [TuiIcon],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {}
```

#### Bundled

**Template:**
```html
<div class="icons">
<tui-icon icon="@tui.heart" />
<tui-icon icon="@tui.search" />
</div>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiIcon, tuiIconsProvider} from '@taiga-ui/core';
import heart from '@taiga-ui/icons/src/heart.svg?raw';
import search from '@taiga-ui/icons/src/search.svg?raw';

@Component({
    standalone: true,
    imports: [TuiIcon],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
    providers: [
        tuiIconsProvider({
            '@tui.heart': heart,
            '@tui.search': search,
        }),
    ],
})
export default class Example {}
```

#### Resolver

**Template:**
```html
<tui-icon icon="@tui.heart" />
<tui-icon icon="discord" />
```
**TypeScript:**
```ts
import {Component, SkipSelf} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {type TuiStringHandler} from '@taiga-ui/cdk';
import {TUI_ICON_RESOLVER, TuiIcon} from '@taiga-ui/core';

@Component({
    standalone: true,
    imports: [TuiIcon],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
    providers: [
        {
            provide: TUI_ICON_RESOLVER,
            deps: [[new SkipSelf(), TUI_ICON_RESOLVER]],
            useFactory(defaultResolver: TuiStringHandler<string>) {
                return (name: string) =>
                    name.startsWith('@tui.')
                        ? defaultResolver(name)
                        : `/assets/icons/${name}.svg`;
            },
        },
    ],
})
export default class Example {}
```

#### Lucide

Open source theme for Taiga UI Lucide Icons by default. You can browse all the icons from this pack here. Setup

**Template:**
```html
<input checked tuiSwitch type="checkbox" />
<tui-icon icon="@tui.heart" [style.color]="'var(--tui-status-negative)'" />
<img alt="" [src]="'@tui.trash' | tuiIcon" />
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiIcon, TuiIconPipe} from '@taiga-ui/core';
import {TuiSwitch} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [TuiIcon, TuiIconPipe, TuiSwitch],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {}
```

#### Material

Taiga UI supports Material Icons. You can browse all the icons from this pack and find the one that suits you here. You can replace icons used inside components as well through DI options, see example below. Setup

**Template:**
```html
<input checked tuiSwitch type="checkbox" />
<tui-icon icon="@tui.material.filled.favorite" [style.color]="'var(--tui-status-negative)'" />
<img alt="" [src]="'@tui.material.filled.delete' | tuiIcon" />
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiIcon, TuiIconPipe} from '@taiga-ui/core';
import {TuiSwitch, tuiSwitchOptionsProvider} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [TuiIcon, TuiIconPipe, TuiSwitch],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
    providers: [tuiSwitchOptionsProvider({icon: '@tui.material.filled.check'})],
})
export default class Example {}
```

#### FontAwesome

Taiga UI supports FontAwesome Icons (free pack). You can browse all the icons from this pack here . You can replace icons used inside components as well through DI options, see example below. Setup

**Template:**
```html
<input checked tuiSwitch type="checkbox" />
<tui-icon icon="@tui.fa.solid.heart" [style.color]="'var(--tui-status-negative)'" />
<img alt="" [src]="'@tui.fa.solid.trash' | tuiIcon" />
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiIcon, TuiIconPipe} from '@taiga-ui/core';
import {TuiSwitch, tuiSwitchOptionsProvider} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [TuiIcon, TuiIconPipe, TuiSwitch],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
    providers: [tuiSwitchOptionsProvider({icon: '@tui.fa.solid.check'})],
})
export default class Example {}
```

#### Sizes

**Template:**
```html
<tui-icon icon="@tui.settings" [style.font-size.rem]="4" />
<tui-icon icon="@tui.settings" [style.font-size.rem]="3" />
<tui-icon icon="@tui.settings" [style.font-size.rem]="2" />
<tui-icon icon="@tui.settings" [style.font-size.rem]="1.5" />
<tui-icon icon="@tui.settings" [style.font-size.rem]="1" />
<hr /> Reverse scaling, <br /> container is 24x24 and icon is 16x16 <tui-icon icon="@tui.settings" [style.border-width.rem]="0.25" />
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiIcon} from '@taiga-ui/core';

@Component({
    standalone: true,
    imports: [TuiIcon],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {}
```


### TypeScript

```ts
import {Component, inject} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {DemoRoute} from '@demo/routes';
import {TuiDemo} from '@demo/utils';
import {TuiIcon} from '@taiga-ui/core';
import {
    TUI_PREVIEW_ICONS,
    TuiAccordion,
    tuiInputNumberOptionsProvider,
} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [TuiAccordion, TuiDemo, TuiIcon],
    templateUrl: './index.html',
    changeDetection,
    providers: [tuiInputNumberOptionsProvider({min: 0})],
})
export default class Page {
    protected readonly lucide = import('./examples/import/lucide.md?raw');
    protected readonly material = import('./examples/import/material.md?raw');
    protected readonly fontAwesome = import('./examples/import/font-awesome.md?raw');
    protected readonly used = Object.values(inject(TUI_PREVIEW_ICONS)); // compatibility with proprietary icons
    protected readonly routes = DemoRoute;

    protected readonly iconVariants = [
        '@tui.info',
        '@tui.heart',
        ...this.used,
        'https://raw.githubusercontent.com/MarsiBarsi/readme-icons/main/github.svg',
        "\"data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polygon points='1 6 1 22 8 18 16 22 23 18 23 2 16 6 8 2 1 6'/><line x1='8' y1='2' x2='8' y2='18'/><line x1='16' y1='6' x2='16' y2='22'/></svg>\"",
        '',
    ];

    protected readonly backgroundVariants = [
        '',
        '@tui.info-filled',
        '@tui.heart-filled',
        ...new Set(
            this.used.map((icon) => (icon.includes('filled') ? icon : `${icon}-filled`)),
        ),
    ];

    protected readonly colorVariants = ['', 'var(--tui-text-primary)', 'red', '#3aa981'];

    protected readonly examples = [
        'Basic',
        'External',
        'Two colors',
        'Bundled',
        'Resolver',
    ];

    protected readonly descriptions = [
        '',
        '',
        '',
        'You can provide SVG source code in a dictionary to be bundled with the app',
        'IMPORTANT: Icon names are not allowed to have "/" symbol',
    ];

    protected icon = '@tui.heart';
    protected backgroundIcon = '@tui.heart-filled';
    protected backgroundColor = 'var(--tui-background-accent-2-hover)';
    protected color = '';

    protected size = 48;
}
```

---
# components/InputCard
- **Package**: `ADDON-COMMERCE`
- **Type**: components
InputCard
            can be used with
            InputExpire
            and
            InputCVC
            to input a card. Use
            tuiCreateLuhnValidator(message)
            to create a
            Validator
            that uses Luhn algorithm

### How to Use (Import)

```ts
import {TuiInputCard, TuiInputCVC, TuiInputExpire} from '@taiga-ui/addon-commerce';

// ...

@Component({
  standalone: true,
  imports: [
    // ...
    TuiInputCard,
    TuiInputCVC,
    TuiInputExpire,
  ],
  // ...
})
export class Example {}
```

### How to Use (Template)

```html
<form [formGroup]="form">
  <tui-textfield>
    <label tuiLabel>Card number</label>
    <input
      formControlName="card"
      tuiInputCard
    />
  </tui-textfield>
  <tui-textfield>
    <label tuiLabel>Expire date</label>
    <input
      formControlName="expire"
      tuiInputExpire
    />
  </tui-textfield>
  <tui-textfield>
    <label tuiLabel>CVC/CVV</label>
    <input
      formControlName="cvc"
      tuiInputCVC
    />
  </tui-textfield>
</form>
```

### Example

```html
<tui-textfield [iconEnd]="icons.iconEnd" [iconStart]="icons.iconStart" [tuiTextfieldCleaner]="textfield.cleaner" [tuiTextfieldSize]="textfield.size" >
<label *ngIf="textfield.size !== 's'" tuiLabel > Card number </label>
<input tuiInputCard [disabled]="control.disabled" [icon]="icon" [invalid]="control.invalid" [placeholder]="textfield.size === 's' ? 'Card number' : ''" [readOnly]="control.readonly" [(ngModel)]="card" (binChange)="binChange.emitEvent($event)" />
</tui-textfield>
```

### API

| Property | Type | Description |
|----------|-----|----------|
| [(ngModel)] | `string` | Card number (also works with a reactive control) |
| [icon] | `string | null` | Card icon |
| (binChange) | `string | null` | BIN value (card first 6 symbols) |

### Usage Examples

#### Form

**Template:**
```html
<form [formGroup]="form">
<tui-textfield>
<label tuiLabel>Card number</label>
<input formControlName="card" tuiInputCard [icon]="card" (binChange)="onBinChange($event)" />
</tui-textfield>
<section>
<tui-textfield>
<label tuiLabel>Expires</label>
<input formControlName="expire" tuiInputExpire />
</tui-textfield>
<tui-textfield>
<label tuiLabel>CVC/CVV</label>
<input formControlName="cvc" tuiInputCVC />
</tui-textfield>
</section>
<tui-error formControlName="card" [error]="[] | tuiFieldError | async" />
</form>
<p>{{ form.value | json }}</p>
```
**TypeScript:**
```ts
import {AsyncPipe, JsonPipe} from '@angular/common';
import {Component, inject, signal} from '@angular/core';
import {FormControl, FormGroup, ReactiveFormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {
    tuiCreateLuhnValidator,
    TuiInputCard,
    TuiInputCVC,
    TuiInputExpire,
} from '@taiga-ui/addon-commerce';
import {
    TuiAlertService,
    TuiError,
    TuiTextfield,
    tuiTextfieldOptionsProvider,
} from '@taiga-ui/core';
import {TuiFieldErrorPipe} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [
        AsyncPipe,
        JsonPipe,
        ReactiveFormsModule,
        TuiError,
        TuiFieldErrorPipe,
        TuiInputCard,
        TuiInputCVC,
        TuiInputExpire,
        TuiTextfield,
    ],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
    providers: [tuiTextfieldOptionsProvider({cleaner: signal(true)})],
})
export default class Example {
    private readonly alerts = inject(TuiAlertService);

    protected readonly form = new FormGroup({
        card: new FormControl('', tuiCreateLuhnValidator('Card number is invalid')),
        expire: new FormControl(''),
        cvc: new FormControl(''),
    });

    protected get card(): string | null {
        const value: string | null | undefined = this.form.get('card')?.value;

        if ((value?.length ?? 0) < 7) {
            return null;
        }

        switch (value?.charAt(0)) {
            case '0':
            case '1':
            case '2':
                return 'https://ng-web-apis.github.io/dist/assets/images/common.svg';
            case '3':
            case '4':
            case '5':
                return 'https://ng-web-apis.github.io/dist/assets/images/geolocation.svg';
            case '6':
            case '7':
                return 'https://ng-web-apis.github.io/dist/assets/images/intersection-observer.svg';
            case '8':
            case '9':
            default:
                return 'https://ng-web-apis.github.io/dist/assets/images/payment-request.svg';
        }
    }

    protected onBinChange(bin: string | null): void {
        this.alerts.open(String(bin), {label: '(binChange)'}).subscribe();
    }
}
```

#### Card

**Template:**
```html
<tui-textfield>
<label tuiLabel>Card number</label>
<input icon="" tuiInputCard [(ngModel)]="card" />
<tui-thumbnail-card *ngIf="card === '1234123412341234'" iconStart="@tui.dollar-sign" paymentSystem="mastercard" size="s" [style.background]="'#2b9aff linear-gradient(110deg, transparent 70%, #0780ff 71%, #db028b 100%)'" />
</tui-textfield>
```
**TypeScript:**
```ts
import {NgIf} from '@angular/common';
import {Component} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiInputCard, TuiThumbnailCard} from '@taiga-ui/addon-commerce';
import {TuiTextfield} from '@taiga-ui/core';

@Component({
    standalone: true,
    imports: [FormsModule, NgIf, TuiInputCard, TuiTextfield, TuiThumbnailCard],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    protected card = '1234123412341234';
}
```


### TypeScript

```ts
import {Component} from '@angular/core';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import {TuiDocControl} from '@demo/components/control';
import {TuiDocIcons} from '@demo/components/icons';
import {TuiDocTextfield} from '@demo/components/textfield';
import {changeDetection} from '@demo/emulate/change-detection';
import {TuiDemo} from '@demo/utils';
import {TuiInputCard} from '@taiga-ui/addon-commerce';
import {TuiTextfield} from '@taiga-ui/core';

@Component({
    standalone: true,
    imports: [
        FormsModule,
        ReactiveFormsModule,
        TuiDemo,
        TuiDocControl,
        TuiDocIcons,
        TuiDocTextfield,
        TuiInputCard,
        TuiTextfield,
    ],
    templateUrl: './index.html',
    changeDetection,
})
export default class Page {
    protected card = '';
    protected iconSelected: string | null = null;

    protected readonly cards: Record<string, string> = {
        common: 'https://ng-web-apis.github.io/dist/assets/images/common.svg',
        universal: 'https://ng-web-apis.github.io/dist/assets/images/universal.svg',
        mutation:
            'https://ng-web-apis.github.io/dist/assets/images/mutation-observer.svg',
    };

    protected readonly iconVariants: readonly string[] = Object.keys(this.cards);

    protected get icon(): string | null {
        return (this.iconSelected && this.cards[this.iconSelected]) || null;
    }
}
```

---
# components/InputCardGroup
- **Package**: `ADDON-COMMERCE`
- **Type**: components
InputCardGroup
            is used to input a card as a separated control

### How to Use (Import)

```ts
import {TuiInputCardGroup} from '@taiga-ui/addon-commerce';

// ...

@Component({
  standalone: true,
  imports: [
    // ...
    TuiInputCardGroup,
  ],
  // ...
})
export class Example {}
```

### How to Use (Template)

```html
<tui-input-card-group formControlName="card"></tui-input-card-group>
```

### Example

```html
<ng-template>
<tui-input-card-group [codeLength]="codeLength" [compact]="compact" [formControl]="formControl" [icon]="icon" [id]="id" [inputs]="inputs" [invalid]="control.invalid" [placeholder]="placeholder" [readOnly]="control.readonly" [tuiDisabled]="control.disabled" />
</ng-template>
```

### API

| Property | Type | Description |
|----------|-----|----------|
| [cardValidator] | `TuiBooleanHandler<string>` | Custom card validator for moving focus to the next field |
| [codeLength] | `3 | 4` | Code length |
| [compact] | `boolean` | Manually set compact mode (forced on mobile resolution) |
| [icon] | `PolymorpheusContent` | Custom card icon |
| [id] | `string` | accordingly). Auto-generated when not provided. |
| [inputs] | `TuiCardInputs` | Toggle availability of inputs |
| [placeholder] | `string` | Placeholder |
| (binChange) | `string | null` | BIN value (card first 6 symbols) |

### Usage Examples

#### With validation

**Template:**
```html
<tui-input-card-group [formControl]="control" [icon]="card" />
<tui-error [error]="[] | tuiFieldError | async" [formControl]="control" />
```
**TypeScript:**
```ts
import {AsyncPipe} from '@angular/common';
import {Component} from '@angular/core';
import {FormControl, ReactiveFormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {
    type TuiCard,
    tuiCardExpireValidator,
    tuiCardNumberValidator,
    TuiInputCardGroup,
} from '@taiga-ui/addon-commerce';
import {TuiError} from '@taiga-ui/core';
import {TuiFieldErrorPipe} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [
        AsyncPipe,
        ReactiveFormsModule,
        TuiError,
        TuiFieldErrorPipe,
        TuiInputCardGroup,
    ],
    templateUrl: './index.html',
    changeDetection,
})
export default class Example {
    protected readonly control = new FormControl<TuiCard | null>(null, [
        tuiCardNumberValidator,
        tuiCardExpireValidator,
    ]);

    protected get card(): string | null {
        const value = this.control.value?.card || '';

        if (value.length < 7) {
            return null;
        }

        switch (value.charAt(0)) {
            case '0':
            case '1':
            case '2':
                return 'https://ng-web-apis.github.io/dist/assets/images/common.svg';
            case '3':
            case '4':
            case '5':
                return 'https://ng-web-apis.github.io/dist/assets/images/geolocation.svg';
            case '6':
            case '7':
                return 'https://ng-web-apis.github.io/dist/assets/images/intersection-observer.svg';
            case '8':
            case '9':
            default:
                return 'https://ng-web-apis.github.io/dist/assets/images/payment-request.svg';
        }
    }
}
```

#### With saved cards

**Template:**
```html
<button size="m" tuiButton type="button" class="tui-space_bottom-4" (click)="open = !open" > Toggle dropdown </button>
<form [formGroup]="card">
<tui-input-card-group formControlName="meta" tuiTextfieldSize="m" [(open)]="open" >
<tui-data-list *tuiTextfieldDropdown size="l" >
<button tuiOption type="button" [value]="null" >
<tui-icon icon="@tui.plus" class="new" />
<span class="label">New card</span>
</button>
<button *ngFor="let item of items; let index = index" tuiOption type="button" [value]="item" >
<tui-thumbnail-card size="s" class="card" > {{ item.card.slice(-4) }} </tui-thumbnail-card>
<span tuiTitle class="label" > {{ item.bank }} <span tuiSubtitle>{{ item.name }}</span>
</span>
<span>{{ item.card.slice(-5) }}</span>
</button>
</tui-data-list>
</tui-input-card-group>
</form>
```
**TypeScript:**
```ts
import {NgForOf} from '@angular/common';
import {Component} from '@angular/core';
import {FormControl, FormGroup, ReactiveFormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {TuiInputCardGroup, TuiThumbnailCard} from '@taiga-ui/addon-commerce';
import {TuiButton, TuiDataList, TuiIcon, TuiTextfield, TuiTitle} from '@taiga-ui/core';

@Component({
    standalone: true,
    imports: [
        NgForOf,
        ReactiveFormsModule,
        TuiButton,
        TuiDataList,
        TuiIcon,
        TuiInputCardGroup,
        TuiTextfield,
        TuiThumbnailCard,
        TuiTitle,
    ],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    changeDetection,
})
export default class Example {
    protected readonly items = [
        {card: '4321***1234', expire: '12/21', name: 'Salary', bank: 'Wachovia Bank'},
        {
            card: '8765***5678',
            expire: '03/42',
            cvc: '***',
            name: 'Tips',
            bank: 'Bank of America',
        },
        {card: '4200***9000', name: 'Dogecoins', bank: 'Crypto'},
    ];

    protected readonly card = new FormGroup({meta: new FormControl(this.items[0])});
    protected open = false;
}
```

#### With custom card template

**Template:**
```html
<tui-input-card-group [formControl]="control" [icon]="template" />
<ng-template #template="polymorpheus" polymorpheus >
<img alt="custom-icon" height="32" src="https://ng-web-apis.github.io/dist/assets/images/web-api.svg" width="32" />
</ng-template>
<tui-error [error]="[] | tuiFieldError | async" [formControl]="control" />
```
**TypeScript:**
```ts
import {AsyncPipe} from '@angular/common';
import {Component} from '@angular/core';
import {FormControl, ReactiveFormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {
    type TuiCard,
    tuiCardExpireValidator,
    tuiCardNumberValidator,
    TuiInputCardGroup,
} from '@taiga-ui/addon-commerce';
import {TuiError} from '@taiga-ui/core';
import {TuiFieldErrorPipe} from '@taiga-ui/kit';
import {PolymorpheusTemplate} from '@taiga-ui/polymorpheus';

@Component({
    standalone: true,
    imports: [
        AsyncPipe,
        PolymorpheusTemplate,
        ReactiveFormsModule,
        TuiError,
        TuiFieldErrorPipe,
        TuiInputCardGroup,
    ],
    templateUrl: './index.html',
    changeDetection,
})
export default class Example {
    protected readonly control = new FormControl<TuiCard | null>(null, [
        tuiCardNumberValidator,
        tuiCardExpireValidator,
    ]);
}
```

#### Custom form state

**Template:**
```html
<tui-input-card-group [formControl]="control" />
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {FormControl, ReactiveFormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {type TuiCard, TuiInputCardGroup} from '@taiga-ui/addon-commerce';

@Component({
    standalone: true,
    imports: [ReactiveFormsModule, TuiInputCardGroup],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    protected control = new FormControl<TuiCard | null>({
        card: '',
        expire: '',
        cvc: '***',
    });
}
```

#### Custom labels

**Template:**
```html
<tui-input-card-group [formControl]="control">
<ng-container *ngIf="!control.value">Enter card number</ng-container>
</tui-input-card-group>
```
**TypeScript:**
```ts
import {NgIf} from '@angular/common';
import {Component} from '@angular/core';
import {FormControl, ReactiveFormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {
    TUI_INPUT_CARD_GROUP_TEXTS,
    type TuiCard,
    TuiInputCardGroup,
} from '@taiga-ui/addon-commerce';
import {of} from 'rxjs';

@Component({
    standalone: true,
    imports: [NgIf, ReactiveFormsModule, TuiInputCardGroup],
    templateUrl: './index.html',
    changeDetection,
    providers: [
        {
            provide: TUI_INPUT_CARD_GROUP_TEXTS,
            useValue: of({
                cardNumberText: 'Number',
                expiryText: 'MM/YY',
                cvcText: 'Code',
            }),
        },
    ],
})
export default class Example {
    protected readonly control = new FormControl<Partial<TuiCard>>({
        card: '558620******2158',
        expire: '12/25',
    });
}
```


### TypeScript

```ts
import {Component, inject} from '@angular/core';
import {FormControl, ReactiveFormsModule} from '@angular/forms';
import {TuiDocControl} from '@demo/components/control';
import {changeDetection} from '@demo/emulate/change-detection';
import {TuiDemo} from '@demo/utils';
import {
    TUI_INPUT_CARD_GROUP_OPTIONS,
    type TuiCard,
    type TuiCardInputs,
    TuiInputCardGroup,
    TuiThumbnailCard,
} from '@taiga-ui/addon-commerce';
import {tuiIsString} from '@taiga-ui/cdk';
import {type PolymorpheusContent} from '@taiga-ui/polymorpheus';

@Component({
    standalone: true,
    imports: [
        ReactiveFormsModule,
        TuiDemo,
        TuiDocControl,
        TuiInputCardGroup,
        TuiThumbnailCard,
    ],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    changeDetection,
})
export default class PageComponent {
    private readonly options = inject(TUI_INPUT_CARD_GROUP_OPTIONS);

    protected readonly examples = [
        'With validation',
        'With saved cards',
        'With custom card template',
        'Custom form state',
        'Custom labels',
    ];

    protected readonly cards: Record<string, PolymorpheusContent | string> = {
        common: 'https://ng-web-apis.github.io/dist/assets/images/common.svg',
        universal: 'https://ng-web-apis.github.io/dist/assets/images/universal.svg',
        mutation:
            'https://ng-web-apis.github.io/dist/assets/images/mutation-observer.svg',
    };

    protected iconVariants: readonly string[] = Object.keys(this.cards);
    protected iconSelected: PolymorpheusContent = null;

    protected id = '';
    protected placeholder = this.options.exampleText;

    protected readonly codeLengthVariants = [3, 4] as const;
    protected codeLength: 3 | 4 = this.codeLengthVariants[0];

    protected readonly inputsVariants: readonly TuiCardInputs[] = [
        {cvc: true, expire: true},
        {cvc: false, expire: true},
        {cvc: false, expire: false},
        {cvc: true, expire: false},
    ];

    protected inputs = this.options.inputs;
    protected compact = false;

    protected formControl = new FormControl<TuiCard | null>(null);

    protected get icon(): PolymorpheusContent {
        return tuiIsString(this.iconSelected)
            ? this.cards[this.iconSelected]
            : this.iconSelected;
    }

    protected getContentVariants(
        template: PolymorpheusContent,
    ): readonly PolymorpheusContent[] {
        return [...this.iconVariants, template];
    }
}
```

### LESS

```less
@import '@taiga-ui/core/styles/taiga-ui-local';

.form {
    display: flex;
    flex-wrap: wrap;
}

.control {
    flex: 1;
    margin-block-end: 0.25rem;

    &:not(:last-child) {
        margin-inline-end: 1.25rem;
    }
}

.error {
    min-inline-size: 100%;
}

.title {
    font: var(--tui-font-heading-5);
}

.card {
    background: #87ceeb;
}
```

---
# components/InputChip
- **Package**: `KIT`
- **Type**: components
InputChip
        uses specifically modified
        
            Textfield
        
        to represent array of selectable items.

### How to Use (Import)

```ts
import {FormsModule} from '@angular/forms';
import {TuiTextfield} from '@taiga-ui/core';
import {TuiInputChip} from '@taiga-ui/kit';

@Component({
  standalone: true,
  imports: [
    // ...
    FormsModule,
    TuiTextfield,
    TuiInputChip,
  ],
})
export class Example {
  value = [];
}
```

### How to Use (Template)

```html
<tui-textfield multi>
  <input
    tuiInputChip
    [(ngModel)]="value"
  />
</tui-textfield>
```

### Example

```html
<ng-template>
<tui-textfield multi [iconEnd]="icons.iconEnd" [iconStart]="icons.iconStart" [rows]="textfieldDoc.rows" [tuiTextfieldCleaner]="textfieldDoc.cleaner" [tuiTextfieldSize]="textfieldDoc.size" >
<input placeholder="Enter" tuiInputChip [formControl]="control" [invalid]="controlDoc.invalid" [readOnly]="controlDoc.readonly" [separator]="separator" [tuiDisabled]="controlDoc.disabled" [unique]="unique" />
<tui-input-chip *tuiItem />
</tui-textfield>
</ng-template>
```

### API

| Property | Type | Description |
|----------|-----|----------|
| [unique] | `boolean` | Ability to enter unique or non-unique tags |
| [separator] | `string` | String or RegExp to separate tags |

### Usage Examples

#### Basic

**Template:**
```html
<tui-textfield multi [rows]="1" >
<label tuiLabel>Plain strings</label>
<input placeholder="Placeholder" tuiInputChip [(ngModel)]="value" />
</tui-textfield>
<tui-textfield multi>
<label tuiLabel>Growing height</label>
<input placeholder="Placeholder" tuiInputChip [(ngModel)]="value" />
</tui-textfield>
```
**TypeScript:**
```ts
import {Component, inject} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiTextfield} from '@taiga-ui/core';
import {TuiInputChip} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [FormsModule, TuiInputChip, TuiTextfield],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected value: string[] = inject('Pythons' as any);
}
```

#### Virtual scroll

**Template:**
```html
<tui-textfield multi tuiChevron [content]="content" >
<label tuiLabel>Select items</label>
<input tuiInputChip tuiSelectLike [(ngModel)]="value" />
<ng-template tuiItem />
<ng-container *tuiTextfieldDropdown>
<tui-textfield #filter tuiTextfieldSize="m" [style.margin.rem]="0.25" >
<input placeholder="Type to filter" tuiTextfield />
</tui-textfield>
<cdk-virtual-scroll-viewport tuiScrollable [itemSize]="48" [style.height.px]="filtered().length * 48 + 8" [style.max-height.px]="200" [style.min-height.px]="56" >
<tui-data-list new tuiMultiSelectGroup >
<button *cdkVirtualFor="let item of filtered()" new tuiOption [value]="item" > {{ item }} </button>
</tui-data-list>
</cdk-virtual-scroll-viewport>
</ng-container>
</tui-textfield>
<p>
<button tuiButton type="button" (click)="onClick()" > Select bazillion </button>
</p>
```
**TypeScript:**
```ts
import {
    CdkFixedSizeVirtualScroll,
    CdkVirtualForOf,
    CdkVirtualScrollViewport,
} from '@angular/cdk/scrolling';
import {Component, computed, ViewChild} from '@angular/core';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TUI_DEFAULT_MATCHER} from '@taiga-ui/cdk';
import {
    TuiButton,
    TuiDataList,
    TuiScrollable,
    TuiSelectLike,
    TuiTextfield,
    type TuiTextfieldComponent,
} from '@taiga-ui/core';
import {TuiChevron, TuiInputChip, TuiMultiSelect} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [
        CdkFixedSizeVirtualScroll,
        CdkVirtualForOf,
        CdkVirtualScrollViewport,
        FormsModule,
        ReactiveFormsModule,
        TuiButton,
        TuiChevron,
        TuiDataList,
        TuiInputChip,
        TuiMultiSelect,
        TuiScrollable,
        TuiSelectLike,
        TuiTextfield,
    ],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    @ViewChild('filter')
    protected readonly filter?: TuiTextfieldComponent<string>;

    protected readonly items: string[] = Array.from({length: 3000}).map(
        (_, i) => `Item #${i}`,
    );

    protected value: string[] = [];

    protected readonly filtered = computed((value = this.filter?.value()) =>
        value
            ? this.items.filter((item) => TUI_DEFAULT_MATCHER(item, value))
            : this.items,
    );

    protected get content(): string {
        return this.value.length
            ? `Selected ${this.value.length} out of ${this.items.length}`
            : '';
    }

    protected onClick(): void {
        this.value = this.items.filter((_, i) => i < 2000);
    }
}
```

#### Chips

**Template:**
```html
<tui-textfield multi tuiTextfieldSize="l" >
<input placeholder="Enter" tuiInputChip [unique]="false" [(ngModel)]="value" />
<tui-input-chip *tuiItem />
</tui-textfield>
<tui-textfield multi tuiTextfieldSize="m" >
<input placeholder="Enter" tuiInputChip [unique]="false" [(ngModel)]="value" />
<tui-input-chip *tuiItem />
</tui-textfield>
<tui-textfield multi tuiTextfieldSize="s" >
<input placeholder="Enter" tuiInputChip [unique]="false" [(ngModel)]="value" />
<tui-input-chip *tuiItem />
</tui-textfield>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiTextfield} from '@taiga-ui/core';
import {TuiInputChip} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [FormsModule, TuiInputChip, TuiTextfield],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected value: string[] = ['I', 'love', 'Angular'];
}
```

#### Disabled items

**Template:**
```html
<tui-textfield multi [disabledItemHandler]="handler" [style.width.rem]="19" [tuiTextfieldCleaner]="false" >
<input tuiInputChip [formControl]="control" />
<button *ngIf="control.value.length > 2" appearance="icon" iconStart="@tui.x" size="xs" tabindex="-1" tuiIconButton type="button" (click)="control.setValue(this.required)" > Clear </button>
<tui-input-chip *tuiItem />
</tui-textfield>
```
**TypeScript:**
```ts
import {NgIf} from '@angular/common';
import {Component} from '@angular/core';
import {FormControl, ReactiveFormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {type TuiBooleanHandler} from '@taiga-ui/cdk';
import {TuiButton, TuiTextfield} from '@taiga-ui/core';
import {TuiInputChip} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [NgIf, ReactiveFormsModule, TuiButton, TuiInputChip, TuiTextfield],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly required = ['Required', 'Obligatory'];

    protected readonly control = new FormControl(this.required.concat('Removable'), {
        nonNullable: true,
    });

    protected readonly handler: TuiBooleanHandler<string> = (item) =>
        this.required.includes(item);
}
```

#### MultiSelect

**Template:**
```html
<label tuiLabel> Arbitrary strings with suggestions <tui-textfield multi>
<input placeholder="Type something" tuiInputChip [(ngModel)]="arbitrary" />
<tui-input-chip *tuiItem />
<ng-container *ngIf="items | tuiHideSelected | tuiFilterByInput as items">
<ng-template *ngIf="items.length" tuiTextfieldDropdown >
<tui-data-list-wrapper [items]="items" />
</ng-template>
</ng-container>
</tui-textfield>
</label>
<label tuiLabel> Only allowing items from the list and hiding values when not focused behind a custom content <tui-textfield #input multi [content]="!input.focused() && pythons.length ? 'Selected ' + pythons.length + ' out of ' + items.length : ''" [disabledItemHandler]="disabled" >
<label tuiLabel>Select Pythons</label>
<input tuiInputChip [placeholder]="pythons.length ? '' : 'Type for suggestions'" [(ngModel)]="pythons" />
<ng-template *ngIf="!input.focused()" tuiItem />
<ng-container *ngIf="items | tuiHideSelected | tuiFilterByInput as items">
<ng-template *ngIf="items.length" tuiTextfieldDropdown >
<tui-data-list-wrapper [items]="items" />
</ng-template>
</ng-container>
</tui-textfield>
</label>
<label tuiLabel> Using checkboxes in the dropdown and making the textfield non-writable <tui-textfield multi tuiChevron >
<label tuiLabel>Multi Select</label>
<input tuiInputChip tuiSelectLike [placeholder]="multi.length ? '' : 'Pick from the list'" [(ngModel)]="multi" />
<tui-data-list-wrapper *tuiTextfieldDropdown new tuiMultiSelectGroup [items]="items" />
</tui-textfield>
</label>
<label tuiLabel> Working with objects <tui-textfield multi tuiChevron [disabledItemHandler]="strings" [stringify]="stringify" >
<input tuiInputChip [placeholder]="objects.length ? '' : 'Picking objects'" [(ngModel)]="objects" />
<tui-input-chip *tuiItem />
<tui-data-list *tuiTextfieldDropdown>
<tui-opt-group label="Pythons" tuiMultiSelectGroup >
<button *ngFor="let user of users | tuiFilterByInput" new tuiOption [value]="user" > {{ user.name }} </button>
</tui-opt-group>
<tui-opt-group label="Collaborators" tuiMultiSelectGroup >
<button *ngFor="let user of more | tuiFilterByInput" new tuiOption [value]="user" > {{ user.name }} </button>
</tui-opt-group>
</tui-data-list>
</tui-textfield>
</label>
```
**TypeScript:**
```ts
import {NgForOf, NgIf} from '@angular/common';
import {Component, inject} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {tuiIsString} from '@taiga-ui/cdk';
import {TuiDataList, TuiSelectLike, TuiTextfield} from '@taiga-ui/core';
import {
    TuiChevron,
    TuiDataListWrapper,
    TuiFilterByInputPipe,
    TuiHideSelectedPipe,
    TuiInputChip,
    TuiMultiSelect,
} from '@taiga-ui/kit';

interface User {
    readonly name: string;
    readonly index: number;
}

@Component({
    standalone: true,
    imports: [
        FormsModule,
        NgForOf,
        NgIf,
        TuiChevron,
        TuiDataList,
        TuiDataListWrapper,
        TuiFilterByInputPipe,
        TuiHideSelectedPipe,
        TuiInputChip,
        TuiMultiSelect,
        TuiSelectLike,
        TuiTextfield,
    ],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected arbitrary: string[] = [];
    protected pythons: string[] = [];
    protected multi: string[] = [];
    protected objects: User[] = [];

    protected readonly items: string[] = inject('Pythons' as any);
    protected readonly users = this.items.map((name, index) => ({name, index}));
    protected readonly more = [
        {name: 'Carol Cleveland', index: -1},
        {name: 'Neil Innes', index: -2},
    ];

    protected readonly strings = tuiIsString;
    protected readonly stringify = ({name}: User): string => name;
    protected readonly disabled = (item: string): boolean => !this.items.includes(item);
}
```

#### Customization

**Template:**
```html
<tui-textfield iconStart="@tui.heart" multi [style.width.rem]="19" >
<input tuiInputChip [formControl]="control" [placeholder]="!control.value?.length ? 'Type something' : ''" />
<tui-icon tuiTooltip="Only small words" />
<tui-input-chip *tuiItem="let context" [appearance]="context.item.length > 5 ? 'negative' : 'positive'" [editable]="false" [iconStart]="context.item.length > 5 ? '@tui.info' : ''" [tuiHint]="context.item.length > 5 ? 'Please keep it under 6 chars' : ''" />
</tui-textfield>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {FormControl, ReactiveFormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiHint, TuiIcon, TuiTextfield} from '@taiga-ui/core';
import {TuiInputChip, TuiTooltip} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [
        ReactiveFormsModule,
        TuiHint,
        TuiIcon,
        TuiInputChip,
        TuiTextfield,
        TuiTooltip,
    ],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly control = new FormControl(['Keep', 'it', 'simple']);
}
```

#### Mask

**Template:**
```html
<tui-textfield filler="•••" multi [style.width.rem]="19" >
<input placeholder="Type 3 digits" tuiInputChip [formControl]="control" [maskito]="mask" />
<tui-input-chip *tuiItem [maskito]="mask" />
</tui-textfield>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {FormControl, ReactiveFormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {MaskitoDirective} from '@maskito/angular';
import {type MaskitoOptions} from '@maskito/core';
import {TuiTextfield} from '@taiga-ui/core';
import {TuiInputChip} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [MaskitoDirective, ReactiveFormsModule, TuiInputChip, TuiTextfield],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly control = new FormControl();
    protected readonly mask: MaskitoOptions = {
        mask: [/\d/, /\d/, /\d/],
    };
}
```

#### Direction

**Template:**
```html
<tui-textfield multi [rows]="1" >
<label tuiLabel>كلمات عربية</label>
<input placeholder="مرحبا" tuiInputChip [(ngModel)]="value" />
</tui-textfield>
<tui-textfield multi [rows]="1" >
<input placeholder="مرحبا" tuiInputChip [(ngModel)]="value" />
<tui-input-chip *tuiItem />
</tui-textfield>
<tui-textfield multi [rows]="2" >
<input placeholder="مرحبا" tuiInputChip [(ngModel)]="value" />
<tui-input-chip *tuiItem />
</tui-textfield>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiTextfield} from '@taiga-ui/core';
import {TuiInputChip} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [FormsModule, TuiInputChip, TuiTextfield],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
    host: {
        dir: 'rtl',
    },
})
export default class Example {
    protected value = [
        'حبيبي',
        'صباح الخير',
        'من فضلك',
        'شكرا',
        'أنا آسف',
        'تصبح على خير',
    ];
}
```

#### Mobile

**Template:**
```html
<label tuiLabel> Mobile dropdown with writable input <tui-textfield multi tuiChevron tuiDropdownMobile [disabledItemHandler]="disabled" >
<input placeholder="Type something" tuiInputChip [(ngModel)]="writable" />
<ng-template *ngIf="items | tuiFilterByInput as items" let-close tuiTextfieldDropdown >
<tui-data-list-wrapper new tuiMultiSelectGroup [items]="items" />
<button appearance="accent" size="m" tuiButton tuiDropdownButton type="button" (click)="close()" > Done </button>
</ng-template>
</tui-textfield>
</label>
<label tuiLabel> Mobile sheet with options <tui-textfield multi tuiChevron tuiDropdownMobile="Select Pythons" >
<input tuiInputChip tuiSelectLike [placeholder]="sheet.length ? '' : 'Select Pythons'" [(ngModel)]="sheet" />
<tui-data-list-wrapper *tuiTextfieldDropdown new tuiMultiSelectGroup [items]="items" />
</tui-textfield>
</label>
<label tuiLabel> Native MultiSelect <tui-textfield multi tuiChevron [identityMatcher]="identity" [stringify]="stringify" >
<select tuiMultiSelect [items]="[users]" [labels]="['Pythons']" [placeholder]="native.length ? 'and...' : 'Select Pythons'" [(ngModel)]="native" ></select>
</tui-textfield>
</label>
```
**TypeScript:**
```ts
import {NgIf} from '@angular/common';
import {Component, inject} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiDropdownMobile} from '@taiga-ui/addon-mobile';
import {type TuiIdentityMatcher} from '@taiga-ui/cdk';
import {TuiButton, TuiSelectLike, TuiTextfield} from '@taiga-ui/core';
import {
    TuiChevron,
    TuiDataListWrapper,
    TuiFilterByInputPipe,
    TuiInputChip,
    TuiMultiSelect,
} from '@taiga-ui/kit';

interface User {
    readonly name: string;
    readonly index: number;
}

@Component({
    standalone: true,
    imports: [
        FormsModule,
        NgIf,
        TuiButton,
        TuiChevron,
        TuiDataListWrapper,
        TuiDropdownMobile,
        TuiFilterByInputPipe,
        TuiInputChip,
        TuiMultiSelect,
        TuiSelectLike,
        TuiTextfield,
    ],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly items: string[] = inject('Pythons' as any);
    protected readonly users = this.items.map((name, index) => ({name, index}));

    protected writable: string[] = [];
    protected sheet: string[] = [];
    protected native: User[] = [{name: this.items[0] || '', index: 0}];

    protected readonly disabled = (item: string): boolean => !this.items.includes(item);
    protected readonly identity: TuiIdentityMatcher<User> = (a, b) => a.index === b.index;
    protected readonly stringify = ({name}: User): string => name;
}
```

#### Table

**Template:**
```html
<table tuiTable>
<thead>
<tr>
<th tuiTh>Options</th>
</tr>
</thead>
<tbody tuiTbody>
<tr>
<td tuiTd>
<tui-textfield multi tuiChevron >
<label tuiLabel>Multi Select with dropdown</label>
<input placeholder="Pick from the list" tuiInputChip tuiSelectLike [formControl]="multiControl" [style.width.rem]="5" />
<tui-data-list-wrapper *tuiTextfieldDropdown new tuiMultiSelectGroup [items]="items" />
</tui-textfield>
</td>
</tr>
<tr>
<td tuiTd>
<tui-textfield multi>
<label tuiLabel>Multi Select</label>
<input placeholder="Placeholder" tuiInputChip [formControl]="multiControl2" />
</tui-textfield>
</td>
</tr>
</tbody>
</table>
```
**TypeScript:**
```ts
import {Component, inject} from '@angular/core';
import {FormControl, FormsModule, ReactiveFormsModule, Validators} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiTable} from '@taiga-ui/addon-table';
import {TuiSelectLike, TuiTextfield} from '@taiga-ui/core';
import {
    TuiChevron,
    TuiDataListWrapper,
    TuiInputChip,
    TuiMultiSelect,
} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [
        FormsModule,
        ReactiveFormsModule,
        TuiChevron,
        TuiDataListWrapper,
        TuiInputChip,
        TuiMultiSelect,
        TuiSelectLike,
        TuiTable,
        TuiTextfield,
    ],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly items: string[] = inject('Pythons' as any);

    protected readonly multiControl = new FormControl(null, {
        validators: Validators.required,
    });

    protected readonly multiControl2 = new FormControl(null, {
        validators: Validators.required,
    });
}
```


### TypeScript

```ts
import {Component, ViewEncapsulation} from '@angular/core';
import {FormControl, ReactiveFormsModule} from '@angular/forms';
import {TuiDocControl} from '@demo/components/control';
import {TuiDocIcons} from '@demo/components/icons';
import {TuiDocTextfield} from '@demo/components/textfield';
import {changeDetection} from '@demo/emulate/change-detection';
import {DemoRoute} from '@demo/routes';
import {TuiDemo} from '@demo/utils';
import {TuiTextfield} from '@taiga-ui/core';
import {TuiInputChip} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [
        ReactiveFormsModule,
        TuiDemo,
        TuiDocControl,
        TuiDocIcons,
        TuiDocTextfield,
        TuiInputChip,
        TuiTextfield,
    ],
    templateUrl: './index.html',
    encapsulation: ViewEncapsulation.None,
    changeDetection,
})
export default class PageComponent {
    protected readonly routes = DemoRoute;
    protected readonly control = new FormControl();
    protected unique = true;
    protected separator = ',';

    protected readonly examples = [
        'Basic',
        'Chips',
        'Disabled items',
        'MultiSelect',
        'Customization',
        'Mask',
        'Direction',
        'Mobile',
        'Table',
        'Virtual scroll',
    ];
}
```

---
# components/InputColor
- **Package**: `KIT`
- **Type**: components
InputColor
        =
        Textfield
        +
        type="color"
        +
        
            
                Maskito
            
        
        + ❤️

### How to Use (Import)

```ts
import {TuiTextfield} from '@taiga-ui/core';
import {TuiInputColor} from '@taiga-ui/kit';

// ...

@Component({
  standalone: true,
  imports: [
    // ...
    TuiTextfield,
    TuiInputColor,
  ],
  // ...
})
export class Example {
  readonly testForm = new FormGroup({
    testValue: new FormControl(),
  });
}
```

### How to Use (Template)

```html
<form [formGroup]="testForm">
  <tui-textfield>
    <input
      tuiInputColor
      [formControl]="control"
    />
  </tui-textfield>
</form>
```

### Example

```html
<ng-template>
<tui-textfield [tuiTextfieldCleaner]="textfieldDoc.cleaner" [tuiTextfieldSize]="textfieldDoc.size" >
<label *ngIf="textfieldDoc.size !== 's'" tuiLabel > Choose color </label>
<input list="colors" tuiInputColor [align]="align" [format]="format" [formControl]="control" [invalid]="controlDoc.invalid" [placeholder]="textfieldDoc.size === 's' ? 'Choose color' : ''" [readOnly]="controlDoc.readonly" [tuiDisabled]="controlDoc.disabled" />
<datalist id="colors">
<option value="#800000"></option>
<option value="#8B0000"></option>
<option value="#A52A2A"></option>
<option value="#DC143C"></option>
</datalist>
</tui-textfield>
</ng-template>
```

### API

| Property | Type | Description |
|----------|-----|----------|
| [align] | `TuiHorizontalDirection` | Alignment of the color picker |
| [format] | `'hex' | 'hexa'` | Color format |

### Usage Examples

#### Basic

**Template:**
```html
<tui-textfield iconStart=" ">
<label tuiLabel>Choose color</label>
<input list="colors" placeholder="#000000" tuiInputColor [formControl]="control" />
<datalist id="colors">
<option value="#800000"></option>
<option value="#8B0000"></option>
<option value="#A52A2A"></option>
<option value="#DC143C"></option>
</datalist>
</tui-textfield>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {FormControl, ReactiveFormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiTextfield} from '@taiga-ui/core';
import {TuiInputColor} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [ReactiveFormsModule, TuiInputColor, TuiTextfield],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly control = new FormControl();
}
```

#### Opacity

**Template:**
```html
<tui-textfield [iconStart]="'@tui.paintbrush'">
<label tuiLabel>Choose color</label>
<input placeholder="#00000000" tuiInputColor [(ngModel)]="value" />
</tui-textfield>
<label class="label">
<span>0%</span>
<span>Opacity</span>
<span>100%</span>
</label>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiTextfield} from '@taiga-ui/core';
import {TuiInputColor, tuiInputColorOptionsProvider} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [FormsModule, TuiInputColor, TuiTextfield],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
    providers: [tuiInputColorOptionsProvider({format: 'hexa', align: 'right'})],
})
export default class Example {
    protected value = '#ff7f50cc';
}
```


### TypeScript

```ts
import {Component, inject} from '@angular/core';
import {FormControl, ReactiveFormsModule} from '@angular/forms';
import {TuiDocControl} from '@demo/components/control';
import {TuiDocTextfield} from '@demo/components/textfield';
import {changeDetection} from '@demo/emulate/change-detection';
import {TuiDemo} from '@demo/utils';
import {TuiTextfield} from '@taiga-ui/core';
import {TUI_INPUT_COLOR_OPTIONS, TuiInputColor} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [
        ReactiveFormsModule,
        TuiDemo,
        TuiDocControl,
        TuiDocTextfield,
        TuiInputColor,
        TuiTextfield,
    ],
    templateUrl: './index.html',
    changeDetection,
})
export default class PageComponent {
    protected readonly control = new FormControl();
    protected readonly options = inject(TUI_INPUT_COLOR_OPTIONS);
    protected readonly examples = ['Basic', 'Opacity'];

    protected readonly aligns = ['left', 'right'] as const;
    protected align = this.options.align;

    protected readonly formats = ['hex', 'hexa'] as const;
    protected format: 'hex' | 'hexa' = this.options.format;
}
```

---
# components/InputDate
- **Package**: `KIT`
- **Type**: components
InputDate
        =
        Textfield
        +
        Calendar
        + ❤️

### How to Use (Import)

```ts
import {FormsModule} from '@angular/forms';
import {TuiTextfield} from '@taiga-ui/core';
import {TuiInputDate} from '@taiga-ui/kit';

@Component({
  standalone: true,
  imports: [
    // ...
    FormsModule,
    TuiTextfield,
    TuiInputDate,
  ],
})
export class Example {
  protected value: TuiDay | null = null;
}
```

### How to Use (Template)

```html
<tui-textfield>
  <input
    tuiInputDate
    [(ngModel)]="value"
  />
  <tui-calendar *tuiTextfieldDropdown />
</tui-textfield>
```

### Example

```html
<ng-template>
<tui-textfield [disabledItemHandler]="itemsHandlers.disabledItemHandler()" [iconStart]="icons.iconStart" [tuiDropdownAlign]="dropdown.align" [tuiTextfieldCleaner]="textfieldDoc.cleaner" [tuiTextfieldSize]="textfieldDoc.size" [(open)]="dropdown.open" >
<label *ngIf="textfieldDoc.size !== 's'" tuiLabel > Choose date </label>
<input tuiInputDate [formControl]="control" [invalid]="controlDoc.invalid" [max]="max" [min]="min" [placeholder]="textfieldDoc.size === 's' ? 'Choose date' : ''" [readOnly]="controlDoc.readonly" [tuiDisabled]="controlDoc.disabled" />
<tui-calendar *tuiTextfieldDropdown />
</tui-textfield>
</ng-template>
```

### API

| Property | Type | Description |
|----------|-----|----------|
| [min] | `TuiDay` | Min date |
| [max] | `TuiDay` | Max date |

### Usage Examples

#### Basic

**Template:**
```html
<tui-textfield>
<label tuiLabel>Choose a date</label>
<input tuiInputDate [(ngModel)]="value" />
<tui-calendar *tuiTextfieldDropdown />
</tui-textfield>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiDay} from '@taiga-ui/cdk';
import {TuiTextfield} from '@taiga-ui/core';
import {TuiInputDate} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [FormsModule, TuiInputDate, TuiTextfield],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    protected value = new TuiDay(2017, 0, 15);
}
```

#### Custom dropdown

**Template:**
```html
<tui-textfield [content]="control.value?.daySame(today) ? 'Today' : ''">
<label tuiLabel>Choose a date</label>
<input tuiInputDate [formControl]="control" />
<ng-template let-close tuiTextfieldDropdown >
<tui-calendar />
<button appearance="action" size="m" tuiButton type="button" class="button" (click)="control.setValue(today); close()" > Today </button>
</ng-template>
</tui-textfield>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {FormControl, ReactiveFormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiDay} from '@taiga-ui/cdk';
import {TuiButton, TuiTextfield} from '@taiga-ui/core';
import {TuiInputDate} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [ReactiveFormsModule, TuiButton, TuiInputDate, TuiTextfield],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly control = new FormControl<TuiDay | null>(null);
    protected readonly today = TuiDay.currentLocal();
}
```

#### Validation

If a field is optional, but unfinished field should be marked as invalid, use tuiUnfinishedValidator directive

**Template:**
```html
<form tuiForm="m" [formGroup]="form" >
<tui-textfield>
<label tuiLabel>Required date</label>
<input formControlName="required" tuiInputDate />
<tui-calendar *tuiTextfieldDropdown />
</tui-textfield>
<tui-error formControlName="required" [error]="[] | tuiFieldError | async" />
<tui-textfield>
<label tuiLabel>Optional date</label>
<input formControlName="optional" tuiInputDate tuiUnfinishedValidator />
<tui-calendar *tuiTextfieldDropdown />
</tui-textfield>
<tui-error formControlName="optional" [error]="[] | tuiFieldError | async" />
<footer>
<button tuiButton type="submit" [disabled]="form.invalid" > Submit </button>
</footer>
</form>
```
**TypeScript:**
```ts
import {AsyncPipe} from '@angular/common';
import {Component} from '@angular/core';
import {FormControl, FormGroup, ReactiveFormsModule, Validators} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiButton, TuiError, TuiTextfield} from '@taiga-ui/core';
import {
    TuiFieldErrorPipe,
    TuiInputDate,
    TuiUnfinishedValidator,
    tuiValidationErrorsProvider,
} from '@taiga-ui/kit';
import {TuiForm} from '@taiga-ui/layout';

@Component({
    standalone: true,
    imports: [
        AsyncPipe,
        ReactiveFormsModule,
        TuiButton,
        TuiError,
        TuiFieldErrorPipe,
        TuiForm,
        TuiInputDate,
        TuiTextfield,
        TuiUnfinishedValidator,
    ],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
    providers: [
        tuiValidationErrorsProvider({
            tuiUnfinished: 'Either fill this or leave blank',
            required: 'This field is required',
        }),
    ],
})
export default class Example {
    protected readonly form = new FormGroup({
        required: new FormControl(null, Validators.required),
        optional: new FormControl(),
    });
}
```

#### Value transformer

By default component works with our internal type called TuiDay . If you prefer to use anything else, like a string or native Date you can provide custom transformer in options to store value in different format in form control

**Template:**
```html
<tui-textfield>
<label tuiLabel>Choose a date</label>
<input tuiInputDate [(ngModel)]="value" />
<tui-calendar *tuiTextfieldDropdown />
</tui-textfield>
<p>{{ value | json }}</p>
```
**TypeScript:**
```ts
import {JsonPipe} from '@angular/common';
import {Component} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiDay} from '@taiga-ui/cdk';
import {TuiTextfield} from '@taiga-ui/core';
import {TuiInputDate, tuiInputDateOptionsProviderNew} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [FormsModule, JsonPipe, TuiInputDate, TuiTextfield],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
    providers: [
        tuiInputDateOptionsProviderNew({
            valueTransformer: {
                fromControlValue: (value: Date | null): TuiDay | null =>
                    value && TuiDay.fromUtcNativeDate(value),
                toControlValue: (value: TuiDay | null): Date | null =>
                    value?.toUtcNativeDate() || null,
            },
        }),
    ],
})
export default class Example {
    protected value: Date | null = null;
}
```

#### Format

Formatting relies on TUI_DATE_FORMAT which you can override using tuiDateFormatProvider helper

**Template:**
```html
<tui-textfield>
<label tuiLabel>Choose a date</label>
<input tuiInputDate [(ngModel)]="value" />
<tui-calendar *tuiTextfieldDropdown />
</tui-textfield>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiDay} from '@taiga-ui/cdk';
import {tuiDateFormatProvider, TuiTextfield} from '@taiga-ui/core';
import {TuiInputDate} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [FormsModule, ReactiveFormsModule, TuiInputDate, TuiTextfield],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
    providers: [tuiDateFormatProvider({mode: 'MDY', separator: '/'})],
})
export default class Example {
    protected value = new TuiDay(2017, 0, 15);
}
```

#### Mobile

You can use several different approaches to optimize UX on mobile devices when tapping the icon. Open this on a mobile device or enable emulation in DevTools and refresh the page

**Template:**
```html
<form tuiForm="l" [formGroup]="form" >
<tui-textfield>
<label tuiLabel>Native picker</label>
<input formControlName="native" tuiInputDate type="date" />
<tui-calendar *tuiTextfieldDropdown />
</tui-textfield>
<tui-textfield tuiDropdownMobile="Pick a date">
<label tuiLabel>Mobile dropdown</label>
<input formControlName="mobile" tuiInputDate />
<tui-calendar *tuiTextfieldDropdown />
</tui-textfield>
<tui-textfield tuiMobileCalendar>
<label tuiLabel>Mobile calendar</label>
<input formControlName="fullscreen" tuiInputDate />
<tui-calendar *tuiTextfieldDropdown />
</tui-textfield>
</form>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {FormControl, FormGroup, ReactiveFormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiDropdownMobile, TuiMobileCalendarDropdownNew} from '@taiga-ui/addon-mobile';
import {TuiDay} from '@taiga-ui/cdk';
import {TuiTextfield} from '@taiga-ui/core';
import {TuiInputDate} from '@taiga-ui/kit';
import {TuiForm} from '@taiga-ui/layout';

@Component({
    standalone: true,
    imports: [
        ReactiveFormsModule,
        TuiDropdownMobile,
        TuiForm,
        TuiInputDate,
        TuiMobileCalendarDropdownNew,
        TuiTextfield,
    ],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly form = new FormGroup({
        native: new FormControl(TuiDay.currentLocal()),
        mobile: new FormControl(TuiDay.currentLocal().append({day: 1})),
        fullscreen: new FormControl(TuiDay.currentLocal().append({day: 2})),
    });
}
```

#### Limits

Individual disabled dates still can be typed in manually or picked on mobile in native picker but control will be automatically marked as invalid

**Template:**
```html
<tui-textfield [disabledItemHandler]="handler">
<label tuiLabel>Choose a date</label>
<input tuiInputDate type="date" [max]="max" [min]="min" [(ngModel)]="value" />
<tui-calendar *tuiTextfieldDropdown />
</tui-textfield>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiDay} from '@taiga-ui/cdk';
import {TuiTextfield} from '@taiga-ui/core';
import {TuiInputDate} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [FormsModule, TuiInputDate, TuiTextfield],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    protected value: TuiDay | null = null;

    protected readonly today = TuiDay.currentLocal();
    protected readonly min = new TuiDay(this.today.year, this.today.month, 1);
    protected readonly max = this.min.append({month: 1, day: -1});

    protected readonly handler = (day: TuiDay): boolean => day.daySame(this.today);
}
```

#### Datalist

**Template:**
```html
<tui-textfield>
<label tuiLabel>Select date</label>
<input list="dates" tuiInputDate type="date" [(ngModel)]="value" />
<datalist id="dates">
<option *ngFor="let date of dates | keyvalue: asIs" [value]="date.value.toJSON()" > {{ date.key }} </option>
</datalist>
<section *tuiTextfieldDropdown>
<tui-calendar />
<tui-data-list>
<button *ngFor="let date of dates | keyvalue: asIs" new tuiOption [value]="date.value" > {{ date.key }} </button>
</tui-data-list>
</section>
</tui-textfield>
```
**TypeScript:**
```ts
import {KeyValuePipe, NgForOf} from '@angular/common';
import {Component} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiDay} from '@taiga-ui/cdk';
import {TuiDataList, TuiTextfield} from '@taiga-ui/core';
import {TuiInputDate} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [
        FormsModule,
        KeyValuePipe,
        NgForOf,
        TuiDataList,
        TuiInputDate,
        TuiTextfield,
    ],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly today = TuiDay.currentLocal();
    protected value: TuiDay | null = this.today;
    protected dates = {
        Today: this.today,
        Tomorrow: this.today.append({day: 1}),
        'End of week': this.today.append({day: 6 - this.today.dayOfWeek()}),
        'End of month': new TuiDay(this.today.year, this.today.month, 1).append({
            month: 1,
            day: -1,
        }),
        'End of Year': new TuiDay(this.today.year + 1, 0, 1).append({day: -1}),
    };

    protected asIs(): number {
        return 0;
    }
}
```


### TypeScript

```ts
import {Component} from '@angular/core';
import {FormControl, ReactiveFormsModule} from '@angular/forms';
import {TuiDocControl} from '@demo/components/control';
import {TuiDocDropdown} from '@demo/components/dropdown';
import {TuiDocIcons} from '@demo/components/icons';
import {TuiDocItemsHandlers} from '@demo/components/items-handlers';
import {TuiDocTextfield} from '@demo/components/textfield';
import {changeDetection} from '@demo/emulate/change-detection';
import {TuiDemo} from '@demo/utils';
import {TUI_FIRST_DAY, TUI_LAST_DAY, TuiDay} from '@taiga-ui/cdk';
import {TuiDropdown, TuiTextfield} from '@taiga-ui/core';
import {TuiInputDate} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [
        ReactiveFormsModule,
        TuiDemo,
        TuiDocControl,
        TuiDocDropdown,
        TuiDocIcons,
        TuiDocItemsHandlers,
        TuiDocTextfield,
        TuiDropdown,
        TuiInputDate,
        TuiTextfield,
    ],
    templateUrl: './index.html',
    changeDetection,
})
export default class Example {
    protected readonly control = new FormControl();

    protected readonly dates = [
        TUI_FIRST_DAY,
        TuiDay.currentLocal(),
        TuiDay.currentLocal().append({year: 1, month: 1}),
        TuiDay.currentLocal().append({year: -1, month: -1}),
        TUI_LAST_DAY,
    ] as const;

    protected min = this.dates[0];
    protected max = this.dates[4];

    protected readonly handler = (item: TuiDay): boolean => item.dayOfWeek() > 4;
}
```

---
# components/InputDateMulti
- **Package**: `KIT`
- **Type**: components
InputDateMulti
        uses specifically modified
        
            Textfield
        
        to represent array of dates.

### How to Use (Import)

```ts
import {FormsModule} from '@angular/forms';
import {TuiTextfield} from '@taiga-ui/core';
import {TuiInputDateMulti} from '@taiga-ui/kit';

@Component({
  standalone: true,
  imports: [
    // ...
    FormsModule,
    TuiTextfield,
    TuiInputDate,
  ],
})
export class Example {
  protected value: TuiDay[] = [];
}
```

### How to Use (Template)

```html
<tui-textfield multi>
  <input
    tuiInputDateMulti
    [(ngModel)]="value"
  />
  <tui-calendar *tuiTextfieldDropdown />
</tui-textfield>
```

### Example

```html
<ng-template>
<tui-textfield multi [disabledItemHandler]="itemsHandlers.disabledItemHandler()" [iconStart]="icons.iconStart" [tuiDropdownAlign]="dropdown.align" [tuiTextfieldCleaner]="textfieldDoc.cleaner" [tuiTextfieldSize]="textfieldDoc.size" [(open)]="dropdown.open" >
<input placeholder="Choose date" tuiInputDateMulti [formControl]="control" [invalid]="controlDoc.invalid" [max]="max" [min]="min" [readOnly]="controlDoc.readonly" [tuiDisabled]="controlDoc.disabled" />
<tui-input-chip *tuiItem />
<tui-calendar *tuiTextfieldDropdown />
</tui-textfield>
</ng-template>
```

### API

| Property | Type | Description |
|----------|-----|----------|
| [min] | `TuiDay` | Min date |
| [max] | `TuiDay` | Max date |

### Usage Examples

#### Basic

**Template:**
```html
<tui-textfield multi>
<label tuiLabel>Plain strings</label>
<input tuiInputDateMulti [(ngModel)]="value" />
<tui-calendar *tuiTextfieldDropdown />
</tui-textfield>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiDay} from '@taiga-ui/cdk';
import {TuiTextfield} from '@taiga-ui/core';
import {TuiInputDateMulti} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [FormsModule, TuiInputDateMulti, TuiTextfield],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    protected value = [new TuiDay(2025, 6, 6)];
}
```

#### Chip

**Template:**
```html
<tui-textfield multi>
<input tuiInputDateMulti [(ngModel)]="value" />
<tui-calendar *tuiTextfieldDropdown />
<tui-input-chip *tuiItem />
</tui-textfield>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiDay} from '@taiga-ui/cdk';
import {TuiTextfield} from '@taiga-ui/core';
import {TuiInputDateMulti} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [FormsModule, TuiInputDateMulti, TuiTextfield],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected value = [new TuiDay(2025, 6, 6)];
}
```

#### Disabled items

**Template:**
```html
<tui-textfield multi [disabledItemHandler]="handler" >
<input tuiInputDateMulti [(ngModel)]="value" />
<tui-calendar *tuiTextfieldDropdown />
<tui-input-chip *tuiItem />
</tui-textfield>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiDay} from '@taiga-ui/cdk';
import {TuiTextfield} from '@taiga-ui/core';
import {TuiInputDateMulti} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [FormsModule, TuiInputDateMulti, TuiTextfield],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected value = [new TuiDay(2025, 6, 6)];

    protected readonly handler = (item: TuiDay): boolean => item.dayOfWeek() > 4;
}
```

#### Format

**Template:**
```html
<tui-textfield multi>
<input tuiInputDateMulti [(ngModel)]="value" />
<tui-calendar *tuiTextfieldDropdown />
<tui-input-chip *tuiItem />
</tui-textfield>
<tui-textfield multi>
<input tuiInputDateMulti [(ngModel)]="value" />
<tui-calendar *tuiTextfieldDropdown />
</tui-textfield>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiDay} from '@taiga-ui/cdk';
import {tuiDateFormatProvider, TuiTextfield} from '@taiga-ui/core';
import {TuiInputDateMulti} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [FormsModule, TuiInputDateMulti, TuiTextfield],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
    providers: [tuiDateFormatProvider({mode: 'MDY', separator: '/'})],
})
export default class Example {
    protected value = [new TuiDay(2025, 6, 6)];
}
```

#### customization

**Template:**
```html
<tui-textfield multi>
<input tuiInputDateMulti [(ngModel)]="value" />
<tui-calendar *tuiTextfieldDropdown [markerHandler]="markerHandler" />
<tui-input-chip *tuiItem="let context" [appearance]="context.item.dayOfWeek() > 4 ? 'negative' : 'positive'" [iconStart]="context.item.dayOfWeek() > 4 ? '@tui.heart' : ''" />
</tui-textfield>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {EMPTY_ARRAY, TuiDay} from '@taiga-ui/cdk';
import {type TuiMarkerHandler, TuiTextfield} from '@taiga-ui/core';
import {TuiInputDateMulti} from '@taiga-ui/kit';

const DOT: [string] = ['var(--tui-status-positive)'];

@Component({
    standalone: true,
    imports: [FormsModule, TuiInputDateMulti, TuiTextfield],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected value = [new TuiDay(2025, 6, 4), new TuiDay(2025, 6, 6)];

    protected readonly markerHandler: TuiMarkerHandler = (day: TuiDay) =>
        day.isWeekend ? EMPTY_ARRAY : DOT;
}
```


### TypeScript

```ts
import {Component} from '@angular/core';
import {FormControl, ReactiveFormsModule} from '@angular/forms';
import {TuiDocControl} from '@demo/components/control';
import {TuiDocDropdown} from '@demo/components/dropdown';
import {TuiDocIcons} from '@demo/components/icons';
import {TuiDocItemsHandlers} from '@demo/components/items-handlers';
import {TuiDocTextfield} from '@demo/components/textfield';
import {changeDetection} from '@demo/emulate/change-detection';
import {DemoRoute} from '@demo/routes';
import {TuiDemo} from '@demo/utils';
import {TUI_FIRST_DAY, TUI_LAST_DAY, TuiDay} from '@taiga-ui/cdk';
import {TuiDropdown, TuiTextfield} from '@taiga-ui/core';
import {
    TuiInputChipComponent,
    TuiInputDate,
    TuiInputDateMultiDirective,
} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [
        ReactiveFormsModule,
        TuiDemo,
        TuiDocControl,
        TuiDocDropdown,
        TuiDocIcons,
        TuiDocItemsHandlers,
        TuiDocTextfield,
        TuiDropdown,
        TuiInputChipComponent,
        TuiInputDate,
        TuiInputDateMultiDirective,
        TuiTextfield,
    ],
    templateUrl: './index.html',
    changeDetection,
})
export default class Example {
    protected readonly control = new FormControl();
    protected readonly routes = DemoRoute;

    protected readonly dates = [
        TUI_FIRST_DAY,
        TuiDay.currentLocal(),
        TuiDay.currentLocal().append({year: 1, month: 1}),
        TuiDay.currentLocal().append({year: -1, month: -1}),
        TUI_LAST_DAY,
    ] as const;

    protected min = this.dates[0];
    protected max = this.dates[4];

    protected readonly handler = (item: TuiDay): boolean => item.dayOfWeek() > 4;
}
```

---
# components/InputDateRange
- **Package**: `KIT`
- **Type**: components
InputDateRange
        =
        Textfield
        +
        CalendarRange
        + ❤️

### How to Use (Import)

```ts
import {FormsModule} from '@angular/forms';
import {TuiTextfield} from '@taiga-ui/core';
import {TuiInputDateRange} from '@taiga-ui/kit';

@Component({
  standalone: true,
  imports: [
    // ...
    FormsModule,
    TuiTextfield,
    TuiInputDateRange,
  ],
})
export class Example {
  protected value: TuiDayRange | null = null;
}
```

### How to Use (Template)

```html
<tui-textfield>
  <input
    tuiInputDateRange
    [(ngModel)]="value"
  />
  <tui-calendar-range *tuiTextfieldDropdown />
</tui-textfield>
```

### Example

```html
<ng-template>
<tui-textfield [disabledItemHandler]="itemsHandlers.disabledItemHandler()" [iconStart]="icons.iconStart" [tuiDropdownAlign]="dropdown.align" [tuiTextfieldCleaner]="textfieldDoc.cleaner" [tuiTextfieldSize]="textfieldDoc.size" [(open)]="dropdown.open" >
<label *ngIf="textfieldDoc.size !== 's'" tuiLabel > Choose range </label>
<input tuiInputDateRange [formControl]="control" [invalid]="controlDoc.invalid" [max]="max" [maxLength]="maxLength" [min]="min" [minLength]="minLength" [placeholder]="textfieldDoc.size === 's' ? 'Choose range' : ''" [readOnly]="controlDoc.readonly" [tuiDisabled]="controlDoc.disabled" />
<tui-calendar-range *tuiTextfieldDropdown />
</tui-textfield>
</ng-template>
```

### API

| Property | Type | Description |
|----------|-----|----------|
| [min] | `TuiDay` | Min date |
| [max] | `TuiDay` | Max date |
| [minLength] | `TuiDayLike | null` | Min length of the range |
| [maxLength] | `TuiDayLike | null` | Max length of the range |

### Usage Examples

#### Basic

**Template:**
```html
<tui-textfield [tuiTextfieldCleaner]="false">
<label tuiLabel>Choose range</label>
<input tuiInputDateRange [(ngModel)]="value" />
<tui-calendar-range *tuiTextfieldDropdown />
</tui-textfield>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiDay, TuiDayRange} from '@taiga-ui/cdk';
import {TuiTextfield} from '@taiga-ui/core';
import {TuiInputDateRange} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [FormsModule, TuiInputDateRange, TuiTextfield],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    protected value = new TuiDayRange(new TuiDay(2017, 0, 15), new TuiDay(2017, 0, 20));
}
```

#### DataList

**Template:**
```html
<tui-textfield [content]="content">
<label tuiLabel>Choose range</label>
<input tuiInputDateRange [formControl]="control" />
<tui-calendar-range *tuiTextfieldDropdown [items]="items" />
</tui-textfield>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {FormControl, ReactiveFormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {type TuiDayRange} from '@taiga-ui/cdk';
import {TuiTextfield} from '@taiga-ui/core';
import {tuiCreateDefaultDayRangePeriods, TuiInputDateRange} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [ReactiveFormsModule, TuiInputDateRange, TuiTextfield],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly control = new FormControl<TuiDayRange | null>(null);
    protected readonly items = tuiCreateDefaultDayRangePeriods();

    public get content(): string {
        const {value} = this.control;

        return value
            ? String(this.items.find((period) => period.range.daySame(value)) || '')
            : '';
    }
}
```

#### Validation

If a field is optional, but unfinished field should be marked as invalid, use tuiUnfinishedValidator directive

**Template:**
```html
<form tuiForm="m" [formGroup]="form" >
<tui-textfield>
<label tuiLabel>Required range</label>
<input formControlName="required" tuiInputDateRange />
<tui-calendar-range *tuiTextfieldDropdown />
</tui-textfield>
<tui-error formControlName="required" [error]="[] | tuiFieldError | async" />
<tui-textfield>
<label tuiLabel>Optional range</label>
<input formControlName="optional" tuiInputDateRange tuiUnfinishedValidator />
<tui-calendar-range *tuiTextfieldDropdown />
</tui-textfield>
<tui-error formControlName="optional" [error]="[] | tuiFieldError | async" />
<footer>
<button tuiButton type="submit" [disabled]="form.invalid" > Submit </button>
</footer>
</form>
```
**TypeScript:**
```ts
import {AsyncPipe} from '@angular/common';
import {Component} from '@angular/core';
import {FormControl, FormGroup, ReactiveFormsModule, Validators} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiButton, TuiError, TuiTextfield} from '@taiga-ui/core';
import {
    TuiFieldErrorPipe,
    TuiInputDateRange,
    TuiUnfinishedValidator,
    tuiValidationErrorsProvider,
} from '@taiga-ui/kit';
import {TuiForm} from '@taiga-ui/layout';

@Component({
    standalone: true,
    imports: [
        AsyncPipe,
        ReactiveFormsModule,
        TuiButton,
        TuiError,
        TuiFieldErrorPipe,
        TuiForm,
        TuiInputDateRange,
        TuiTextfield,
        TuiUnfinishedValidator,
    ],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
    providers: [
        tuiValidationErrorsProvider({
            tuiUnfinished: 'Either fill this or leave blank',
            required: 'This field is required',
        }),
    ],
})
export default class Example {
    protected readonly form = new FormGroup({
        required: new FormControl(null, Validators.required),
        optional: new FormControl(),
    });
}
```

#### Value transformer

By default component works with our internal type called TuiDayRange . If you prefer to use anything else, like a string you can provide custom transformer in options to store value in different format in form control

**Template:**
```html
<tui-textfield>
<label tuiLabel>Choose range</label>
<input tuiInputDateRange [(ngModel)]="value" />
<tui-calendar-range *tuiTextfieldDropdown />
</tui-textfield>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiDayRange} from '@taiga-ui/cdk';
import {TuiTextfield} from '@taiga-ui/core';
import {TuiInputDateRange, tuiInputDateRangeOptionsProvider} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [FormsModule, TuiInputDateRange, TuiTextfield],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
    providers: [
        tuiInputDateRangeOptionsProvider({
            valueTransformer: {
                fromControlValue: (value: string): TuiDayRange | null =>
                    value ? TuiDayRange.normalizeParse(value) : null,
                toControlValue: (value: TuiDayRange | null): string =>
                    value?.toString() || '',
            },
        }),
    ],
})
export default class Example {
    protected value = '';
}
```

#### Format

Formatting relies on TUI_DATE_FORMAT which you can override using tuiDateFormatProvider helper

**Template:**
```html
<label tuiLabel> Choose range <tui-textfield tuiTextfieldSize="s">
<input placeholder="Using US format" tuiInputDateRange [(ngModel)]="value" />
<tui-calendar-range *tuiTextfieldDropdown />
</tui-textfield>
</label>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {type TuiDayRange} from '@taiga-ui/cdk';
import {tuiDateFormatProvider, TuiTextfield} from '@taiga-ui/core';
import {TuiInputDateRange} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [FormsModule, ReactiveFormsModule, TuiInputDateRange, TuiTextfield],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
    providers: [tuiDateFormatProvider({mode: 'MDY', separator: '/'})],
})
export default class Example {
    protected value: TuiDayRange | null = null;
}
```

#### Mobile

You can enable a different picker to improve UX on mobile devices when tapping the icon. Open this on a mobile device or enable emulation in DevTools and refresh the page

**Template:**
```html
<form tuiForm="m" [formGroup]="form" >
<tui-textfield tuiDropdownMobile="Pick a range">
<label tuiLabel>Mobile dropdown</label>
<input formControlName="mobile" tuiInputDateRange />
<tui-calendar-range *tuiTextfieldDropdown />
</tui-textfield>
<tui-textfield tuiMobileCalendar>
<label tuiLabel>Mobile calendar</label>
<input formControlName="fullscreen" tuiInputDateRange />
<tui-calendar-range *tuiTextfieldDropdown />
</tui-textfield>
</form>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {FormControl, FormGroup, ReactiveFormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiDropdownMobile, TuiMobileCalendarDropdownNew} from '@taiga-ui/addon-mobile';
import {TuiTextfield} from '@taiga-ui/core';
import {TuiInputDateRange} from '@taiga-ui/kit';
import {TuiForm} from '@taiga-ui/layout';

@Component({
    standalone: true,
    imports: [
        ReactiveFormsModule,
        TuiDropdownMobile,
        TuiForm,
        TuiInputDateRange,
        TuiMobileCalendarDropdownNew,
        TuiTextfield,
    ],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly form = new FormGroup({
        mobile: new FormControl(),
        fullscreen: new FormControl(),
    });
}
```

#### Limits

**Template:**
```html
<tui-textfield [disabledItemHandler]="handler">
<label tuiLabel>Take days off</label>
<input placeholder="Min: 3, Max: 5" tuiInputDateRange [max]="max" [maxLength]="{day: 5}" [min]="min" [minLength]="{day: 3}" [(ngModel)]="value" />
<tui-calendar-range *tuiTextfieldDropdown />
</tui-textfield>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiDay} from '@taiga-ui/cdk';
import {TuiTextfield} from '@taiga-ui/core';
import {TuiInputDateRange} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [FormsModule, TuiInputDateRange, TuiTextfield],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    protected value: TuiDay | null = null;

    protected readonly today = TuiDay.currentLocal();
    protected readonly min = new TuiDay(this.today.year, this.today.month, 1);
    protected readonly max = this.min.append({month: 2, day: -1});

    protected readonly handler = (day: TuiDay): boolean => day.dayOfWeek() > 4;
}
```


### TypeScript

```ts
import {Component} from '@angular/core';
import {FormControl, ReactiveFormsModule} from '@angular/forms';
import {TuiDocControl} from '@demo/components/control';
import {TuiDocDropdown} from '@demo/components/dropdown';
import {TuiDocIcons} from '@demo/components/icons';
import {TuiDocItemsHandlers} from '@demo/components/items-handlers';
import {TuiDocTextfield} from '@demo/components/textfield';
import {changeDetection} from '@demo/emulate/change-detection';
import {TuiDemo} from '@demo/utils';
import {TUI_FIRST_DAY, TUI_LAST_DAY, TuiDay, type TuiDayLike} from '@taiga-ui/cdk';
import {TuiDropdown, TuiTextfield} from '@taiga-ui/core';
import {TuiInputDateRange} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [
        ReactiveFormsModule,
        TuiDemo,
        TuiDocControl,
        TuiDocDropdown,
        TuiDocIcons,
        TuiDocItemsHandlers,
        TuiDocTextfield,
        TuiDropdown,
        TuiInputDateRange,
        TuiTextfield,
    ],
    templateUrl: './index.html',
    changeDetection,
})
export default class Example {
    protected readonly control = new FormControl();

    protected readonly dates = [
        TUI_FIRST_DAY,
        TuiDay.currentLocal(),
        TuiDay.currentLocal().append({year: 1, month: 1}),
        TuiDay.currentLocal().append({year: -1, month: -1}),
        TUI_LAST_DAY,
    ] as const;

    protected min = this.dates[0];
    protected max = this.dates[4];

    protected readonly limits = [{day: 3}, {day: 5}] as const;

    protected minLength: TuiDayLike | null = null;
    protected maxLength: TuiDayLike | null = null;

    protected readonly handler = (item: TuiDay): boolean => item.dayOfWeek() > 4;
}
```

---
# components/InputDateTime
- **Package**: `KIT`
- **Type**: components
InputDateTime
        =
        Textfield
        +
        Calendar
        + ❤️

### How to Use (Import)

```ts
import {FormsModule} from '@angular/forms';
import {TuiTextfield} from '@taiga-ui/core';
import {TuiInputDateTime} from '@taiga-ui/kit';

@Component({
  imports: [
    // ...
    FormsModule,
    TuiTextfield,
    TuiInputDateTime,
  ],
})
export class Example {
  protected value: [TuiDay, TuiTime | null] | null = null;
}
```

### How to Use (Template)

```html
<tui-textfield>
  <input
    tuiInputDateTime
    [(ngModel)]="value"
  />
  <tui-calendar *tuiTextfieldDropdown />
</tui-textfield>
```

### Example

```html
<ng-template>
<tui-textfield [iconStart]="icons.iconStart" [tuiDropdownAlign]="dropdown.align" [tuiDropdownDirection]="dropdown.direction" [tuiDropdownMinHeight]="dropdown.minHeight" [tuiTextfieldCleaner]="textfieldDoc.cleaner" [tuiTextfieldSize]="textfieldDoc.size" [(open)]="dropdown.open" >
<label *ngIf="textfieldDoc.size !== 's'" tuiLabel > Choose date </label>
<input tuiInputDateTime [formControl]="control" [invalid]="controlDoc.invalid" [max]="max" [min]="min" [placeholder]="textfieldDoc.size === 's' ? 'Choose date' : ''" [readOnly]="controlDoc.readonly" [timeMode]="timeMode" [tuiDisabled]="controlDoc.disabled" />
<tui-calendar *tuiTextfieldDropdown />
</tui-textfield>
</ng-template>
```

### API

| Property | Type | Description |
|----------|-----|----------|
| [timeMode] | `MaskitoTimeMode` | Time format mode for SS and MS support |
| [min] | `TuiDay | [TuiDay, TuiTime] | null` | Min date |
| [max] | `TuiDay | [TuiDay, TuiTime] | null` | Max date |

### Usage Examples

#### Basic

**Template:**
```html
<tui-textfield>
<label tuiLabel>Choose a date</label>
<input tuiInputDateTime [(ngModel)]="value" />
<tui-calendar *tuiTextfieldDropdown />
</tui-textfield>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiDay, TuiTime} from '@taiga-ui/cdk';
import {TuiTextfield} from '@taiga-ui/core';
import {TuiInputDateTime} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [FormsModule, TuiInputDateTime, TuiTextfield],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    protected value = [new TuiDay(2020, 8, 20), new TuiTime(19, 19)];
}
```

#### Calendar customization

Feel free to configure Calendar specific properties: disable adjacent months days, adds circled colored markers to some days, control initial opened month and etc. Explore Calendar documentation page for more customization options. Don't set [min] / [max] and [disabledItemHandler] properties for &lt;tui-calendar /&gt; ! Calendar automatically inherits these properties from &lt;input tuiInputDateTime /&gt; and &lt;tui-textfield /&gt; .

**Template:**
```html
<tui-textfield>
<label tuiLabel>Choose a date</label>
<input tuiInputDateTime [(ngModel)]="value" />
<tui-calendar *tuiTextfieldDropdown [markerHandler]="markerHandler" [month]="value?.[0] ?? defaultActiveMonth()" [showAdjacent]="false" (monthChange)="defaultActiveMonth.set($event)" />
</tui-textfield>
```
**TypeScript:**
```ts
import {Component, signal} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {type TuiDay, TuiMonth, type TuiTime} from '@taiga-ui/cdk';
import {type TuiMarkerHandler, TuiTextfield} from '@taiga-ui/core';
import {TuiInputDateTime} from '@taiga-ui/kit';

const CHEAPEST_TICKET: [string] = ['var(--tui-status-positive)'];

@Component({
    standalone: true,
    imports: [FormsModule, TuiInputDateTime, TuiTextfield],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    protected value: [TuiDay, TuiTime] | null = null;

    protected readonly defaultActiveMonth = signal(new TuiMonth(2000, 0));

    protected readonly markerHandler: TuiMarkerHandler = (day: TuiDay) =>
        day.day % 5 === 0 ? CHEAPEST_TICKET : [];
}
```

#### Custom dropdown

**Template:**
```html
<tui-textfield [content]="isSame(control.value, tomorrow) ? 'Next morning' : ''" [open]="open()" (openChange)="open.set($event)" >
<input placeholder="Choose a date" tuiInputDateTime [formControl]="control" />
<ng-container *tuiTextfieldDropdown>
<tui-calendar />
<button appearance="action" size="m" tuiButton type="button" (click)="control.setValue(tomorrow); open.set(false)" > Tomorrow morning </button>
</ng-container>
</tui-textfield>
```
**TypeScript:**
```ts
import {Component, signal} from '@angular/core';
import {FormControl, ReactiveFormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiDay, tuiSum, TuiTime} from '@taiga-ui/cdk';
import {TuiButton, TuiTextfield} from '@taiga-ui/core';
import {TuiInputDateTime} from '@taiga-ui/kit';

type ControlValue = [TuiDay, TuiTime | null] | null;

@Component({
    standalone: true,
    imports: [ReactiveFormsModule, TuiButton, TuiInputDateTime, TuiTextfield],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly open = signal(false);
    protected readonly control = new FormControl<ControlValue>(null);
    protected readonly tomorrow: ControlValue = [
        TuiDay.currentLocal().append({day: 1}),
        new TuiTime(9, 0),
    ];

    protected isSame(a: ControlValue, b: ControlValue): boolean {
        return Boolean(a && b && tuiSum(...a.map(Number)) === tuiSum(...b.map(Number)));
    }
}
```

#### Validation

If a field is optional, but unfinished field should be marked as invalid, use tuiUnfinishedValidator directive

**Template:**
```html
<form tuiForm="m" [formGroup]="form" >
<tui-textfield>
<label tuiLabel>Required</label>
<input formControlName="timeRequired" tuiInputDateTime />
<tui-calendar *tuiTextfieldDropdown />
</tui-textfield>
<tui-error formControlName="timeRequired" [error]="[] | tuiFieldError | async" />
<tui-textfield>
<label tuiLabel>At least day</label>
<input formControlName="dayRequired" tuiInputDateTime />
<tui-calendar *tuiTextfieldDropdown />
</tui-textfield>
<tui-error formControlName="dayRequired" [error]="[] | tuiFieldError | async" />
<tui-textfield>
<label tuiLabel>Optional + UnfinishedValidator</label>
<input formControlName="optional" tuiInputDateTime tuiUnfinishedValidator />
<tui-calendar *tuiTextfieldDropdown />
</tui-textfield>
<tui-error formControlName="optional" [error]="[] | tuiFieldError | async" />
<footer>
<button tuiButton type="submit" [disabled]="form.invalid" > Submit </button>
</footer>
</form>
```
**TypeScript:**
```ts
import {AsyncPipe} from '@angular/common';
import {Component} from '@angular/core';
import {
    FormControl,
    FormGroup,
    ReactiveFormsModule,
    type ValidationErrors,
    type ValidatorFn,
} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiButton, TuiError, TuiTextfield} from '@taiga-ui/core';
import {
    TuiFieldErrorPipe,
    TuiInputDateTime,
    TuiUnfinishedValidator,
    tuiValidationErrorsProvider,
} from '@taiga-ui/kit';
import {TuiForm} from '@taiga-ui/layout';

export function minLengthValidator(minLength: number): ValidatorFn {
    return ({value}): ValidationErrors | null =>
        value?.filter(Boolean).length >= minLength ? null : {required: {value}};
}

@Component({
    standalone: true,
    imports: [
        AsyncPipe,
        ReactiveFormsModule,
        TuiButton,
        TuiError,
        TuiFieldErrorPipe,
        TuiForm,
        TuiInputDateTime,
        TuiTextfield,
        TuiUnfinishedValidator,
    ],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
    providers: [
        tuiValidationErrorsProvider({
            tuiUnfinished: 'Either fill this or leave blank',
            required: 'This field is required',
        }),
    ],
})
export default class Example {
    protected readonly form = new FormGroup({
        timeRequired: new FormControl(null, minLengthValidator(2)),
        dayRequired: new FormControl(
            null,
            minLengthValidator(1), // The same as `Validators.required` (from @angular/forms)
        ),
        optional: new FormControl(),
    });
}
```

#### Value transformer

By default component works with our internal types called TuiDay and TuiTime . If you prefer to use anything else, like a string or native Date you can provide custom transformer in options to store value in different format in form control

**Template:**
```html
<tui-textfield>
<input placeholder="Choose a date" tuiInputDateTime [(ngModel)]="value" />
<tui-calendar *tuiTextfieldDropdown />
</tui-textfield>
<p>{{ value | json }}</p>
```
**TypeScript:**
```ts
import {JsonPipe} from '@angular/common';
import {Component} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiDay, TuiTime} from '@taiga-ui/cdk';
import {TuiTextfield} from '@taiga-ui/core';
import {TuiInputDateTime, tuiInputDateTimeOptionsProvider} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [FormsModule, JsonPipe, TuiInputDateTime, TuiTextfield],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
    providers: [
        tuiInputDateTimeOptionsProvider({
            valueTransformer: {
                fromControlValue: (value: Date | null): [TuiDay, TuiTime | null] | null =>
                    value && [
                        TuiDay.fromUtcNativeDate(value),
                        new TuiTime(value.getUTCHours(), value.getUTCMinutes()),
                    ],
                toControlValue: (value: [TuiDay, TuiTime | null] | null): Date | null => {
                    const {hours = 0, minutes = 0} = value?.[1] ?? {};

                    return (
                        value &&
                        new Date(value[0].toUtcNativeDate().setUTCHours(hours, minutes))
                    );
                },
            },
        }),
    ],
})
export default class Example {
    protected value: Date | null = new Date(Date.UTC(2024, 7, 9, 12, 17));
}
```

#### Date format

Formatting relies on TUI_DATE_FORMAT which you can override using tuiDateFormatProvider helper

**Template:**
```html
<tui-textfield>
<label tuiLabel>ISO 8601 date format</label>
<input tuiInputDateTime [(ngModel)]="value" />
<tui-calendar *tuiTextfieldDropdown />
</tui-textfield>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiDay} from '@taiga-ui/cdk';
import {tuiDateFormatProvider, TuiTextfield} from '@taiga-ui/core';
import {TuiInputDateTime} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [FormsModule, ReactiveFormsModule, TuiInputDateTime, TuiTextfield],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
    providers: [tuiDateFormatProvider({mode: 'YMD', separator: '-'})],
})
export default class Example {
    protected value = [new TuiDay(2017, 0, 15)];
}
```

#### Mobile

Open this on a mobile device or enable emulation in DevTools and refresh the page to explore this example! You can use several different approaches to optimize UX on mobile devices when tapping the icon. Browser support limitations! IOS devices supports only HH:MM mode for native picker. Native picker supports only 24-hour format.

**Template:**
```html
<form tuiForm="l" [formGroup]="form" >
<tui-textfield>
<label tuiLabel>Native picker</label>
<input formControlName="native" timeMode="HH:MM:SS.MSS" tuiInputDateTime type="datetime-local" />
<tui-calendar *tuiTextfieldDropdown />
</tui-textfield>
<tui-textfield tuiDropdownMobile="Pick a date">
<label tuiLabel>Mobile dropdown</label>
<input formControlName="mobile" tuiInputDateTime />
<tui-calendar *tuiTextfieldDropdown />
</tui-textfield>
<tui-textfield tuiMobileCalendar>
<label tuiLabel>Mobile calendar</label>
<input formControlName="fullscreen" tuiInputDateTime />
<tui-calendar *tuiTextfieldDropdown />
</tui-textfield>
</form>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {FormControl, FormGroup, ReactiveFormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiDropdownMobile, TuiMobileCalendarDropdownNew} from '@taiga-ui/addon-mobile';
import {TuiDay, TuiTime} from '@taiga-ui/cdk';
import {TuiTextfield} from '@taiga-ui/core';
import {TuiInputDateTime} from '@taiga-ui/kit';
import {TuiForm} from '@taiga-ui/layout';

@Component({
    standalone: true,
    imports: [
        ReactiveFormsModule,
        TuiDropdownMobile,
        TuiForm,
        TuiInputDateTime,
        TuiMobileCalendarDropdownNew,
        TuiTextfield,
    ],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly form = new FormGroup({
        native: new FormControl([TuiDay.currentLocal(), new TuiTime(12, 34, 56, 789)]),
        mobile: new FormControl([TuiDay.currentLocal().append({day: 1})]),
        fullscreen: new FormControl([
            TuiDay.currentLocal().append({day: 2}),
            new TuiTime(23, 59),
        ]),
    });
}
```

#### Limits

Individual disabled dates still can be typed in manually or picked on mobile in native picker but control will be automatically marked as invalid

**Template:**
```html
<tui-textfield [disabledItemHandler]="handler">
<label tuiLabel>Choose a date</label>
<input tuiInputDateTime type="datetime-local" [max]="max" [min]="min" [(ngModel)]="value" />
<tui-calendar *tuiTextfieldDropdown [showAdjacent]="false" />
</tui-textfield>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiDay, TuiTime} from '@taiga-ui/cdk';
import {TuiTextfield} from '@taiga-ui/core';
import {TuiInputDateTime} from '@taiga-ui/kit';

const TODAY = TuiDay.currentLocal();

@Component({
    standalone: true,
    imports: [FormsModule, TuiInputDateTime, TuiTextfield],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    protected value: [TuiDay, TuiTime | null] | null = null;

    protected readonly min = [
        new TuiDay(TODAY.year, TODAY.month, 1),
        new TuiTime(0, 0),
    ] as const;

    protected readonly max = [
        this.min[0].append({month: 1, day: -1}),
        new TuiTime(23, 59),
    ] as const;

    protected readonly handler = ([day]: [TuiDay, TuiTime | null]): boolean =>
        day.daySame(TODAY);
}
```

#### Datalist

**Template:**
```html
<tui-textfield>
<input list="dates" placeholder="Pick a date" tuiInputDateTime type="datetime-local" [(ngModel)]="value" />
<datalist id="dates">
<option *ngFor="let date of dates | keyvalue: asIs" [value]="toISOString(date.value)" > {{ date.key }} </option>
</datalist>
<section *tuiTextfieldDropdown>
<tui-calendar />
<tui-data-list>
<button *ngFor="let date of dates | keyvalue: asIs" new tuiOption [value]="date.value" > {{ date.key }} </button>
<button new tuiOption [disabled]="true" > v5 </button>
</tui-data-list>
</section>
</tui-textfield>
```
**TypeScript:**
```ts
import {KeyValuePipe, NgForOf} from '@angular/common';
import {Component} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiDay, TuiTime} from '@taiga-ui/cdk';
import {TuiDataList, TuiTextfield} from '@taiga-ui/core';
import {TuiInputDateTime} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [
        FormsModule,
        KeyValuePipe,
        NgForOf,
        TuiDataList,
        TuiInputDateTime,
        TuiTextfield,
    ],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly dates: Record<string, [TuiDay, TuiTime]> = {
        'Taiga UI Birthday': [new TuiDay(2020, 8, 20), new TuiTime(19, 19)],
        '2.0.0 release': [new TuiDay(2020, 11, 29), new TuiTime(19, 5)],
        '3.0.0 release': [new TuiDay(2022, 7, 30), new TuiTime(17, 18)],
        '4.0.0 release': [new TuiDay(2024, 7, 9), new TuiTime(12, 17)],
    };

    protected value: [TuiDay, TuiTime | null] | null = Object.values(this.dates).at(-1)!;

    protected toISOString([day, time]: readonly [TuiDay, TuiTime]): string {
        return `${day.toString('YMD', '-')}T${time.toString()}`;
    }

    protected asIs(): number {
        return 0;
    }
}
```


### TypeScript

```ts
import {Component, inject} from '@angular/core';
import {FormControl, ReactiveFormsModule} from '@angular/forms';
import {TuiDocControl} from '@demo/components/control';
import {TuiDocDropdown} from '@demo/components/dropdown';
import {TuiDocIcons} from '@demo/components/icons';
import {TuiDocTextfield} from '@demo/components/textfield';
import {changeDetection} from '@demo/emulate/change-detection';
import {DemoRoute} from '@demo/routes';
import {TuiDemo} from '@demo/utils';
import {type MaskitoTimeMode} from '@maskito/kit';
import {TUI_FIRST_DAY, TUI_IS_MOBILE, TUI_LAST_DAY, TuiDay, TuiTime} from '@taiga-ui/cdk';
import {TuiDropdown, TuiTextfield} from '@taiga-ui/core';
import {TuiInputDateTime} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [
        ReactiveFormsModule,
        TuiDemo,
        TuiDocControl,
        TuiDocDropdown,
        TuiDocIcons,
        TuiDocTextfield,
        TuiDropdown,
        TuiInputDateTime,
        TuiTextfield,
    ],
    templateUrl: './index.html',
    changeDetection,
})
export default class Example {
    protected readonly routes = DemoRoute;
    protected readonly isMobile = inject(TUI_IS_MOBILE);
    protected readonly control = new FormControl();

    protected readonly dates = [
        TUI_FIRST_DAY,
        TuiDay.currentLocal(),
        TuiDay.currentLocal().append({year: 1, month: 1}),
        TuiDay.currentLocal().append({year: -1, month: -1}),
        [TuiDay.currentLocal().append({day: 1}), new TuiTime(12, 34)],
        TUI_LAST_DAY,
    ] as const satisfies ReadonlyArray<TuiDay | readonly [TuiDay, TuiTime]>;

    protected readonly timeModeVariants = [
        'HH:MM',
        'HH:MM AA',
        'HH:MM:SS',
        'HH:MM:SS AA',
        'HH:MM:SS.MSS',
        'HH:MM:SS.MSS AA',
    ] as const satisfies readonly MaskitoTimeMode[];

    protected min: TuiDay | readonly [TuiDay, TuiTime] | null = this.dates[0];
    protected max: TuiDay | readonly [TuiDay, TuiTime] | null = this.dates.at(-1)!;
    protected timeMode: MaskitoTimeMode = this.timeModeVariants[0];
}
```

---
# components/InputFiles
- **Package**: `KIT`
- **Type**: components
An input for uploading one or several files using native input file capabilities

### How to Use (Import)

```ts
import {TuiFiles} from '@taiga-ui/kit';

// ...

@Component({
  standalone: true,
  imports: [TuiFiles],
  //...
})
export class Example {}
```

### How to Use (Template)

```html
<label tuiInputFiles>
  <input
    tuiInputFiles
    accept="image/*"
    [multiple]="true"
    [formControl]="control"
    (reject)="onReject($event)"
  />
</label>

<tui-files>
  <tui-file
    tuiItem
    [file]="file"
  ></tui-file>
</tui-files>
```

### Example

```html
<label tuiInputFiles>
<input #validator="tuiInputFilesValidator" tuiInputFiles [accept]="accept" [formControl]="control" [invalid]="controlDoc.invalid" [maxFileSize]="maxFileSize" [multiple]="multiple" [tuiDisabled]="controlDoc.disabled" (reject)="updateRejected($event); reject.emitEvent($event)" />
</label>
<tui-files class="tui-space_top-2" [max]="maxFilesCount" [(expanded)]="expanded" >
<ng-container *ngFor="let file of files$ | async">
<tui-file *tuiItem [file]="file" [showDelete]="showDelete" [showSize]="showSize" [size]="size" (remove)="removeFile(file); remove.emitEvent($event)" />
</ng-container>
<ng-container *ngFor="let file of rejected">
<tui-file *tuiItem state="error" [file]="(file | tuiFileRejected: validator | async) || file" [showDelete]="showDelete" [showSize]="showSize" [size]="size" (remove)="removeFile(file); remove.emitEvent($event)" />
</ng-container>
</tui-files>
```

### API

| Property | Type | Description |
|----------|-----|----------|
| [accept] | `string` | Allowed formats |
| [maxFileSize] | `number` | Max file size in bytes (30 MB by default — 30 * 1000 * 1000) |
| [multiple] | `boolean` | Allows to upload several files |
| (reject) | `TuiFileLike[]` | Emits files that were rejected. |

### Usage Examples

#### Single

**Template:**
```html
<label *ngIf="!control.value" tuiInputFiles >
<input accept="image/*" tuiInputFiles [formControl]="control" />
</label>
<tui-files class="tui-space_top-1">
<tui-file *ngIf="control.value | tuiFileRejected: {accept: 'image/*'} | async as file" state="error" [file]="file" (remove)="removeFile()" />
<tui-file *ngIf="loadedFiles$ | async as file" [file]="file" (remove)="removeFile()" />
<tui-file *ngIf="failedFiles$ | async as file" state="error" [file]="file" (remove)="removeFile()" />
<tui-file *ngIf="loadingFiles$ | async as file" state="loading" [file]="file" (remove)="removeFile()" />
</tui-files>
```
**TypeScript:**
```ts
import {AsyncPipe, NgIf} from '@angular/common';
import {Component} from '@angular/core';
import {FormControl, ReactiveFormsModule, Validators} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {type TuiFileLike, TuiFiles} from '@taiga-ui/kit';
import {finalize, map, type Observable, of, Subject, switchMap, timer} from 'rxjs';

@Component({
    standalone: true,
    imports: [AsyncPipe, NgIf, ReactiveFormsModule, TuiFiles],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly control = new FormControl<TuiFileLike | null>(
        null,
        Validators.required,
    );

    protected readonly failedFiles$ = new Subject<TuiFileLike | null>();
    protected readonly loadingFiles$ = new Subject<TuiFileLike | null>();
    protected readonly loadedFiles$ = this.control.valueChanges.pipe(
        switchMap((file) => this.processFile(file)),
    );

    protected removeFile(): void {
        this.control.setValue(null);
    }

    protected processFile(file: TuiFileLike | null): Observable<TuiFileLike | null> {
        this.failedFiles$.next(null);

        if (this.control.invalid || !file) {
            return of(null);
        }

        this.loadingFiles$.next(file);

        return timer(1000).pipe(
            map(() => {
                if (Math.random() > 0.5) {
                    return file;
                }

                this.failedFiles$.next(file);

                return null;
            }),
            finalize(() => this.loadingFiles$.next(null)),
        );
    }
}
```

#### Multiple

**Template:**
```html
<label tuiInputFiles>
<input #validator="tuiInputFilesValidator" accept="image/*" tuiInputFiles [formControl]="control" [multiple]="true" (reject)="onReject($event)" />
</label>
<tui-files class="tui-space_top-1">
<tui-file *ngFor="let file of accepted$ | async" [file]="file" (remove)="onRemove(file)" />
<tui-file *ngFor="let file of rejected" state="error" [file]="(file | tuiFileRejected: validator | async) || file" (remove)="onRemove(file)" />
</tui-files>
<tui-error [error]="['maxLength'] | tuiFieldError | async" [formControl]="control" />
```
**TypeScript:**
```ts
import {AsyncPipe, NgForOf} from '@angular/common';
import {Component} from '@angular/core';
import {
    type AbstractControl,
    FormControl,
    ReactiveFormsModule,
    type ValidatorFn,
} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiValidationError} from '@taiga-ui/cdk';
import {TuiError} from '@taiga-ui/core';
import {TuiFieldErrorPipe, TuiFiles, tuiFilesAccepted} from '@taiga-ui/kit';
import {map} from 'rxjs';

@Component({
    standalone: true,
    imports: [
        AsyncPipe,
        NgForOf,
        ReactiveFormsModule,
        TuiError,
        TuiFieldErrorPipe,
        TuiFiles,
    ],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly control = new FormControl<File[]>([], [maxFilesLength(5)]);
    protected readonly accepted$ = this.control.valueChanges.pipe(
        map(() => tuiFilesAccepted(this.control)),
    );

    protected rejected: readonly File[] = [];

    protected onReject(files: readonly File[]): void {
        this.rejected = Array.from(new Set(this.rejected.concat(files)));
    }

    protected onRemove(file: File): void {
        this.rejected = this.rejected.filter((rejected) => rejected !== file);
        this.control.setValue(
            this.control.value?.filter((current) => current !== file) ?? [],
        );
    }
}

export function maxFilesLength(maxLength: number): ValidatorFn {
    return ({value}: AbstractControl) =>
        value.length > maxLength
            ? {
                  maxLength: new TuiValidationError(
                      'Error: maximum limit - 5 files for upload',
                  ),
              }
            : null;
}
```

#### Standalone

**Template:**
```html
<tui-files>
<tui-file *ngFor="let file of files" state="normal" [file]="file" [showDelete]="control.enabled" />
<tui-file *ngFor="let file of rejectedFiles" state="error" [file]="file" [showDelete]="control.enabled" />
<tui-file *ngIf="loadingFile && !isE2E" state="loading" [file]="loadingFile" [showDelete]="control.enabled" (remove)="removeLoading()" />
</tui-files>
<h4>With link</h4>
<tui-files>
<a *tuiItem rel="noreferrer" state="normal" target="_blank" tuiFile [file]="fileWithLink" [href]="fileWithLink.src" [showDelete]="control.enabled" ></a>
</tui-files>
<h4>With deleted state</h4>
<tui-files>
<tui-file *ngFor="let file of removedFiles" size="l" state="deleted" [file]="file" [showDelete]="control.enabled" >
<button tuiLink type="button" (click)="restore(file)" > Restore </button>
</tui-file>
<tui-file *ngFor="let file of restoredFiles" size="l" state="normal" [file]="file" [leftContent]="icon" [showDelete]="control.enabled" (remove)="remove(file)" />
</tui-files>
<ng-template #icon>
<tui-icon src="@tui.file" />
</ng-template>
```
**TypeScript:**
```ts
import {NgForOf, NgIf} from '@angular/common';
import {Component, inject} from '@angular/core';
import {FormControl} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TUI_IS_E2E, TuiItem} from '@taiga-ui/cdk';
import {TuiIcon, TuiLink} from '@taiga-ui/core';
import {type TuiFileLike, TuiFiles} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [NgForOf, NgIf, TuiFiles, TuiIcon, TuiItem, TuiLink],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly isE2E = inject(TUI_IS_E2E);

    protected readonly control = new FormControl<TuiFileLike | null>(null);

    protected readonly files: readonly TuiFileLike[] = [
        {
            name: 'Loaded.txt',
        },
        {
            name: 'A file with a very very long title to check that it can be cut correctly.txt',
        },
    ];

    protected loadingFile: TuiFileLike | null = {
        name: 'Loading file.txt',
    };

    protected readonly rejectedFiles: readonly TuiFileLike[] = [
        {
            name: 'File with an error.txt',
            content: 'Something went wrong this time',
        },
    ];

    protected readonly fileWithLink: TuiFileLike = {
        name: 'with link.txt',
        src: 'https://tools.ietf.org/html/rfc675',
    };

    protected removedFiles: TuiFileLike[] = [this.loadingFile as unknown as TuiFileLike];
    protected restoredFiles: TuiFileLike[] = [];

    protected removeLoading(): void {
        this.loadingFile = null;
    }

    protected restore(file: TuiFileLike | null): void {
        if (!file) {
            return;
        }

        this.restoredFiles = [...this.restoredFiles, file];
        this.removedFiles = this.removedFiles.filter(
            (removed) => file.name !== removed?.name,
        );
    }

    protected remove(file: TuiFileLike): void {
        this.removedFiles = [...this.removedFiles, file];
        this.restoredFiles = this.restoredFiles.filter(
            (restored) => file.name !== restored?.name,
        );
    }
}
```

#### With button

**Template:**
```html
<tui-files [max]="3">
<ng-container *ngFor="let file of files">
<tui-file *tuiItem state="normal" [file]="file" />
</ng-container>
<ng-container *ngFor="let file of rejectedFiles">
<a *tuiItem rel="noreferrer" state="error" target="_blank" tuiFile [file]="file" ></a>
</ng-container>
</tui-files>
```
**TypeScript:**
```ts
import {NgForOf} from '@angular/common';
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiItem} from '@taiga-ui/cdk';
import {type TuiFileLike, TuiFiles} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [NgForOf, TuiFiles, TuiItem],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    protected height = 3;

    protected readonly files: readonly TuiFileLike[] = [
        {
            name: 'Loaded.txt',
        },
        {
            name: 'one_more_file.txt',
        },
        {
            name: 'one_more_file.txt',
        },
        {
            name: 'one_more_file.txt',
        },
        {
            name: 'one_more_file.txt',
        },
        {
            name: 'one_more_file.txt',
        },
        {
            name: 'last_file.txt',
        },
    ];

    protected readonly rejectedFiles: readonly TuiFileLike[] = [
        {
            name: 'File with an error.txt',
        },
    ];
}
```

#### Custom content

**Template:**
```html
<label tuiInputFiles>
<input tuiInputFiles [formControl]="control" />
<ng-template let-dragged>
<div *ngIf="dragged; else base" class="content" >
<tui-avatar appearance="secondary" src="@tui.droplet" />
<div> Drop it like it's hot! <br />
<br />
</div>
</div>
<ng-template #base>
<div class="content">
<tui-avatar appearance="secondary" src="@tui.cloud-upload" />
<div> Drag and drop file here or <a tuiLink>click to upload</a>
</div>
</div>
</ng-template>
</ng-template>
</label>
<tui-files class="tui-space_top-4">
<tui-file [file]="file" [leftContent]="content" >
<span class="tui-text_body-s-2">file is on checking</span>
</tui-file>
</tui-files>
<ng-template #content>
<tui-icon icon="@tui.clock" />
</ng-template>
```
**TypeScript:**
```ts
import {NgIf} from '@angular/common';
import {Component} from '@angular/core';
import {FormControl, ReactiveFormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiIcon, TuiLink} from '@taiga-ui/core';
import {TuiAvatar, type TuiFileLike, TuiFiles} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [NgIf, ReactiveFormsModule, TuiAvatar, TuiFiles, TuiIcon, TuiLink],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly control = new FormControl<TuiFileLike | null>(null);

    protected readonly file: TuiFileLike = {
        name: 'custom.txt',
    };
}
```

#### Camera capture

**Template:**
```html
<label *ngIf="!control.value" tuiInputFiles >
<input accept="image/*" capture="user" title="Choose files (no limits)" tuiInputFiles [formControl]="control" />
</label>
<tui-files class="tui-space_top-1">
<tui-file *ngIf="control.valueChanges | async as file" [file]="file" (remove)="removeFile()" />
</tui-files>
```
**TypeScript:**
```ts
import {AsyncPipe, NgIf} from '@angular/common';
import {Component} from '@angular/core';
import {FormControl, ReactiveFormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {type TuiFileLike, TuiFiles} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [AsyncPipe, NgIf, ReactiveFormsModule, TuiFiles],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly control = new FormControl<TuiFileLike | null>(null);

    protected removeFile(): void {
        this.control.setValue(null);
    }
}
```

#### Model

**Template:**
```html
<label tuiInputFiles>
<input #validator="tuiInputFilesValidator" accept="image/*" tuiInputFiles [multiple]="true" [ngModel]="files" (ngModelChange)="onChange($event)" (reject)="onReject($event)" />
</label>
<tui-files class="tui-space_top-1">
<tui-file *ngFor="let file of rejected" state="error" [file]="(file | tuiFileRejected: validator | async) || file" (remove)="onRemove(file)" />
<tui-file *ngFor="let file of files" state="normal" [file]="file" (remove)="onRemove(file)" />
</tui-files>
```
**TypeScript:**
```ts
import {AsyncPipe, NgForOf} from '@angular/common';
import {Component} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiFiles} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [AsyncPipe, FormsModule, NgForOf, TuiFiles],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    protected files: File[] = [];
    protected rejected: File[] = [];

    protected onRemove(remove: File): void {
        this.files = this.files.filter((file) => file !== remove);
        this.rejected = this.rejected.filter((file) => file !== remove);
    }

    protected onChange(files: File[]): void {
        this.files = files.filter((file) => !this.rejected.includes(file));
    }

    protected onReject(rejected: File[]): void {
        this.rejected = rejected;
    }
}
```


### TypeScript

```ts
import {Component} from '@angular/core';
import {FormControl, ReactiveFormsModule} from '@angular/forms';
import {TuiDocControl} from '@demo/components/control';
import {changeDetection} from '@demo/emulate/change-detection';
import {TuiDemo} from '@demo/utils';
import {type TuiSizeL} from '@taiga-ui/core';
import {TuiFiles, tuiFilesAccepted} from '@taiga-ui/kit';
import {map} from 'rxjs';

@Component({
    standalone: true,
    imports: [ReactiveFormsModule, TuiDemo, TuiDocControl, TuiFiles],
    templateUrl: './index.html',
    changeDetection,
})
export default class PageComponent {
    protected readonly examples = [
        'Single',
        'Multiple',
        'Standalone',
        'With button',
        'Custom content',
        'Camera capture',
        'Model',
    ];

    protected multiple = true;
    protected showSize = true;
    protected showDelete: boolean | 'always' = true;
    protected expanded = false;
    protected maxFilesCount = 3;
    protected accept = '';
    protected acceptVariants = ['image/*', 'application/pdf', 'image/*,application/pdf'];

    protected readonly showDeleteVariants: Array<boolean | 'always'> = [
        true,
        false,
        'always',
    ];

    protected readonly maxFileSizeVariants = [
        100,
        512000,
        30 * 1000 * 1000,
        2.2 * 1000 * 1000,
    ];

    protected rejected: readonly File[] = [];
    protected maxFileSize = this.maxFileSizeVariants[2]!;

    protected readonly sizeVariants: readonly TuiSizeL[] = ['m', 'l'];
    protected size = this.sizeVariants[0]!;
    protected readonly control = new FormControl<File[] | null>(null);
    protected readonly files$ = this.control.valueChanges.pipe(
        map(() => tuiFilesAccepted(this.control)),
    );

    protected removeFile(file: File): void {
        this.rejected = this.rejected.filter((current) => current !== file);
        this.control.setValue(
            this.control.value?.filter((current) => current !== file) || null,
        );
    }

    protected updateRejected(rejected: readonly File[]): void {
        this.rejected = rejected;
    }

    protected multipleChange(multiple: boolean): void {
        this.rejected = [];
        this.control.setValue(null);
        this.multiple = multiple;
    }
}
```

---
# components/InputInline
- **Package**: `KIT`
- **Type**: components
Inline input field

### How to Use (Import)

```ts
import {ReactiveFormsModule} from '@angular/forms';
import {TuiInputInline} from '@taiga-ui/kit';

// ...

@Component({
  standalone: true,
  imports: [
    // ...
    ReactiveFormsModule,
    TuiInputInline,
  ],
  // ...
})
export class Example {}
```

### How to Use (Template)

```html
<tui-input-inline>
  Placeholder
  <input [formControl]="control" />
</tui-input-inline>
```

### Usage Examples

#### Basic

**Template:**
```html
<form [formGroup]="testForm">
<tui-input-inline class="input1">
<input formControlName="testValue1" />
</tui-input-inline>
<tui-input-inline class="input2">
<input formControlName="testValue2" />
</tui-input-inline>
<tui-input-inline class="input3">
<input formControlName="testValue3" />
</tui-input-inline>
<tui-input-inline class="input4" [class.input4_empty]="input4Empty" > (Show placeholder if control is empty) <input formControlName="testValue4" />
</tui-input-inline>
</form>
<button size="m" tuiButton type="button" (click)="onToggleClick()" > {{ toggleContent }} </button>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {FormControl, FormGroup, ReactiveFormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiButton} from '@taiga-ui/core';
import {TuiInputInline} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [ReactiveFormsModule, TuiButton, TuiInputInline],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected testForm = new FormGroup({
        testValue1: new FormControl('Hello 1'),
        testValue2: new FormControl('Hello 2'),
        testValue3: new FormControl('Hello 3'),
        testValue4: new FormControl(''),
    });

    protected get toggleContent(): string {
        return this.testForm.disabled ? 'enable (allow editing)' : 'disable';
    }

    protected get input4Empty(): boolean {
        return this.testForm.get('testValue4')!.value === '';
    }

    protected onToggleClick(): void {
        if (this.testForm.disabled) {
            this.testForm.enable();
        } else {
            this.testForm.disable();
        }
    }
}
```

#### Heading

**Template:**
```html
<h2 class="header" [class.header_empty]="!heading" >
<tui-input-inline *ngIf="editing; else text"> Type a heading <input tuiAutoFocus [(ngModel)]="heading" (blur)="onBlur()" (keydown.enter.prevent)="toggle()" />
</tui-input-inline>
<ng-template #text>
<span>{{ heading }}</span>
<button appearance="icon" iconStart="@tui.pencil" size="xs" tuiIconButton type="button" class="tui-space_left-1" (click)="toggle()" > Edit heading </button>
</ng-template>
</h2>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa exercitationem, sed? Deserunt dignissimos dolorem doloribus officiis quae repellat rerum? Accusantium fuga hic nam necessitatibus non officiis perferendis repellendus tempore voluptates! </p>
<p> Accusantium adipisci blanditiis esse est et eum fugit id illum, in iste itaque iusto laborum nostrum officia quam quasi quos repellat temporibus tenetur, ullam? Blanditiis fuga iusto maiores omnis quidem! </p>
```
**TypeScript:**
```ts
import {NgIf} from '@angular/common';
import {Component, inject} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiAutoFocus} from '@taiga-ui/cdk';
import {TuiAlertService, TuiButton} from '@taiga-ui/core';
import {TuiInputInline} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [FormsModule, NgIf, TuiAutoFocus, TuiButton, TuiInputInline],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    private readonly alerts = inject(TuiAlertService);

    protected heading = 'Page heading';
    protected editing = false;

    protected toggle(): void {
        this.editing = !this.editing;
    }

    protected onBlur(): void {
        this.editing = false;
        this.saveHeading(this.heading);
    }

    private saveHeading(newHeading: string): void {
        this.alerts.open(newHeading, {label: 'New heading'}).subscribe();
    }
}
```

#### External update

**Template:**
```html
<tui-input-inline class="input1">
<input [(ngModel)]="count" />
</tui-input-inline>
```
**TypeScript:**
```ts
import {
    ChangeDetectorRef,
    Component,
    DestroyRef,
    inject,
    NgZone,
    type OnInit,
} from '@angular/core';
import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TUI_IS_E2E, tuiWatch, tuiZoneOptimized} from '@taiga-ui/cdk';
import {TuiInputInline} from '@taiga-ui/kit';
import {timer} from 'rxjs';

@Component({
    standalone: true,
    imports: [FormsModule, TuiInputInline],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example implements OnInit {
    private readonly cd = inject(ChangeDetectorRef);
    private readonly destroyRef = inject(DestroyRef);
    private readonly zone = inject(NgZone);
    protected readonly isE2E = inject(TUI_IS_E2E);

    protected count = '0';

    public ngOnInit(): void {
        if (this.isE2E) {
            return;
        }

        timer(0, 3000)
            .pipe(
                tuiZoneOptimized(this.zone),
                tuiWatch(this.cd),
                takeUntilDestroyed(this.destroyRef),
            )
            .subscribe((value) => {
                this.count = String(value);
            });
    }
}
```

#### Inside text

**Template:**
```html
<ul class="task">
<li> I <tui-input-inline>
<input ngModel="am" />
</tui-input-inline> funny. </li>
<li> He <tui-input-inline [class._empty]="!answer">
<!-- Any text inside tui-input-inline is placeholder-->
<!-- It will be shown fully even for unset width of InputInline --> ___ <input [(ngModel)]="answer" />
</tui-input-inline> funny. </li>
<li> You <tui-input-inline [style.max-width.ch]="15">
<input ngModel="" placeholder="___" spellcheck="false" />
</tui-input-inline> funny. </li>
</ul>
<section class="task">
<p>
<strong>Writing practice</strong>
<br /> Learning to <s>write</s> type underscore and hyphen </p>
<!-- prettier-ignore -->
<div> ___<tui-input-inline>
<input ngModel="" placeholder="___" />
</tui-input-inline>------<tui-input-inline>
<input ngModel="" placeholder="------" />
</tui-input-inline>
</div>
</section>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiInputInline} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [FormsModule, TuiInputInline],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected answer = '';
}
```


### TypeScript

```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {TuiDemo} from '@demo/utils';

@Component({
    standalone: true,
    imports: [TuiDemo],
    templateUrl: './index.html',
    changeDetection,
})
export default class Page {
    protected readonly examples = ['Basic', 'Heading', 'External update', 'Inside text'];
}
```

---
# components/InputMonth
- **Package**: `KIT`
- **Type**: components
InputMonth
        =
        Textfield
        +
        CalendarMonth
        + ❤️

### How to Use (Import)

```ts
import {FormsModule} from '@angular/forms';
import {TuiTextfield} from '@taiga-ui/core';
import {TuiInputMonth} from '@taiga-ui/kit';

@Component({
  standalone: true,
  imports: [
    // ...
    FormsModule,
    TuiTextfield,
    TuiInputMonth,
  ],
})
export class Example {
  value: TuiMonth | null = null;
}
```

### How to Use (Template)

```html
<tui-textfield>
  <input
    tuiInputMonth
    [(ngModel)]="value"
  />

  <tui-calendar-month
    *tuiTextfieldDropdown
    [min]="min"
    [max]="max"
    [disabledItemHandler]="disabledItemHandler"
    [(year)]="activeYear"
  />
</tui-textfield>
```

### Example

```html
<ng-template>
<tui-textfield [tuiTextfieldCleaner]="textfieldDoc.cleaner" [tuiTextfieldSize]="textfieldDoc.size" >
<input placeholder="Month" tuiInputMonth [formControl]="control" [invalid]="controlDoc.invalid" [readOnly]="controlDoc.readonly" [tuiDisabled]="controlDoc.disabled" />
<tui-calendar-month *tuiTextfieldDropdown [disabledItemHandler]="disabledItemHandler" [max]="max" [min]="min" [(year)]="year" />
</tui-textfield>
</ng-template>
```

### API

| Property | Type | Description |
|----------|-----|----------|
| [min] | `TuiMonth | null` | The lowest value in the range of permitted dates |
| [max] | `TuiMonth | null` | The greatest value in the range of permitted dates |
| [disabledItemHandler] | `TuiBooleanHandler<TuiMonth>` |  |
| [(year)] | `TuiYear` | Current year |

### Usage Examples

#### Basic

**Template:**
```html
<tui-textfield>
<input placeholder="Select vacation month" tuiInputMonth [(ngModel)]="value" />
<tui-calendar-month *tuiTextfieldDropdown [disabledItemHandler]="isSummerHandler" [max]="max" [min]="min" [(year)]="activeYear" />
</tui-textfield>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {type TuiBooleanHandler, TuiMonth, TuiYear} from '@taiga-ui/cdk';
import {TuiTextfield} from '@taiga-ui/core';
import {TuiInputMonth} from '@taiga-ui/kit';

const NEXT_YEAR = TuiMonth.currentLocal().year + 1;

@Component({
    standalone: true,
    imports: [FormsModule, TuiInputMonth, TuiTextfield],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly min = TuiMonth.currentLocal().append({month: 1});
    protected readonly max = new TuiMonth(NEXT_YEAR, 11);
    protected value: TuiMonth | null = null;
    protected activeYear = new TuiYear(NEXT_YEAR);

    protected readonly isSummerHandler: TuiBooleanHandler<TuiMonth> = ({month}) =>
        [5, 6, 7].includes(month);
}
```

#### Form control value

Form control value is TuiMonth or null (for empty textfield only) types. Use Validators.required (built-in validator provided by Angular team) with our FieldError pipe to notify your users about required field.

**Template:**
```html
<tui-textfield>
<input placeholder="Annoying required field" tuiInputMonth [formControl]="control" />
<tui-calendar-month *tuiTextfieldDropdown />
</tui-textfield>
<tui-error [error]="[] | tuiFieldError | async" [formControl]="control" />
```
**TypeScript:**
```ts
import {AsyncPipe} from '@angular/common';
import {Component} from '@angular/core';
import {FormControl, ReactiveFormsModule, Validators} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {type TuiMonth} from '@taiga-ui/cdk';
import {TuiError, TuiTextfield} from '@taiga-ui/core';
import {
    TuiFieldErrorPipe,
    TuiInputMonth,
    tuiValidationErrorsProvider,
} from '@taiga-ui/kit';
import {interval, map, startWith} from 'rxjs';

@Component({
    standalone: true,
    imports: [
        AsyncPipe,
        ReactiveFormsModule,
        TuiError,
        TuiFieldErrorPipe,
        TuiInputMonth,
        TuiTextfield,
    ],
    templateUrl: './index.html',
    styles: [':host {display: block; min-height: 4rem}'],
    encapsulation,
    changeDetection,
    providers: [
        tuiValidationErrorsProvider({
            required: interval(1000).pipe(
                map((i) => (i % 2 ? 'NOW!!!' : 'Enter this!')),
                startWith('Required field!'),
            ),
        }),
    ],
})
export default class Example {
    protected readonly control = new FormControl<TuiMonth | null>(
        null,
        Validators.required,
    );
}
```

#### Textfield customization

Use all powers of Textfield : put any number of Icons and Tooltips inside (and control their order and color), modify the size of the textbox and etc. Explore Textfield documentation page for more customization options.

**Template:**
```html
<tui-textfield iconStart="@tui.calendar" tuiTextfieldSize="m" >
<label tuiLabel>I am a label</label>
<input placeholder="I am placeholder" tuiInputMonth [(ngModel)]="value" />
<tui-calendar-month *tuiTextfieldDropdown />
<tui-icon icon="@tui.circle-alert" style="color: var(--tui-status-negative); pointer-events: none" />
<tui-icon tuiTooltip="I am a hint" />
</tui-textfield>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {type TuiMonth} from '@taiga-ui/cdk';
import {TuiIcon, TuiTextfield} from '@taiga-ui/core';
import {TuiInputMonth, tuiInputMonthOptionsProvider, TuiTooltip} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [FormsModule, TuiIcon, TuiInputMonth, TuiTextfield, TuiTooltip],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
    providers: [
        tuiInputMonthOptionsProvider({
            // Callback has the first argument – size of the textfield box ('s' | 'm' | 'l')
            icon: () => '',
        }),
    ],
})
export default class Example {
    protected value: TuiMonth | null = null;
}
```

#### Dropdown customization

**Template:**
```html
<tui-textfield [open]="open()" (openChange)="open.set($event)" >
<input placeholder="Your happiest life moment" tuiInputMonth [(ngModel)]="value" />
<ng-container *tuiTextfieldDropdown>
<tui-calendar-month />
<button tuiLink type="button" class="option" (click)="chooseTheOnlyCorrectOption()" > My wife's birthday </button>
</ng-container>
</tui-textfield>
```
**TypeScript:**
```ts
import {Component, signal} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiMonth} from '@taiga-ui/cdk';
import {TuiLink, TuiTextfield} from '@taiga-ui/core';
import {TuiInputMonth} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [FormsModule, TuiInputMonth, TuiLink, TuiTextfield],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected value: TuiMonth | null = null;
    protected readonly open = signal(false);

    protected chooseTheOnlyCorrectOption(): void {
        this.value = new TuiMonth(1998, 2);
        this.open.set(false);
    }
}
```

#### Selected value customization

Use TUI_MONTH_FORMATTER to customize view of selected value inside textfield . To switch language inside calendar – read documentation page "Internationalization" .

**Template:**
```html
<tui-textfield>
<input placeholder="Best time to start" tuiInputMonth [(ngModel)]="value" />
<tui-calendar-month *tuiTextfieldDropdown />
</tui-textfield>
```
**TypeScript:**
```ts
import {Component, inject, LOCALE_ID} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiMonth} from '@taiga-ui/cdk';
import {TuiTextfield} from '@taiga-ui/core';
import {TUI_MONTH_FORMATTER, TuiInputMonth} from '@taiga-ui/kit';
import {of} from 'rxjs';

@Component({
    standalone: true,
    imports: [FormsModule, TuiInputMonth, TuiTextfield],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
    providers: [
        {
            provide: TUI_MONTH_FORMATTER,
            useFactory: () => {
                const formatter = Intl.DateTimeFormat(inject(LOCALE_ID), {
                    year: '2-digit',
                    month: 'short',
                });

                return of(
                    (x: TuiMonth | null) =>
                        (x && formatter.format(x.toLocalNativeDate())) ?? '',
                );
            },
        },
    ],
})
export default class Example {
    protected value: TuiMonth | null = TuiMonth.currentLocal().append({month: -1});
}
```

#### Native picker

Add type="month" for &lt;input /&gt; to enable built-in browser picker for mobile devices. Browser support limitations! Native picker does not have [disabledItemHandler] feature. Also, we discourage to use [min] / [max] properties with enabled native picker – it has rather limited browser support.

**Template:**
```html
<tui-textfield>
<input placeholder="Use mobile device" tuiInputMonth type="month" [(ngModel)]="value" />
<tui-calendar-month *tuiTextfieldDropdown />
</tui-textfield>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {type TuiMonth} from '@taiga-ui/cdk';
import {TuiTextfield} from '@taiga-ui/core';
import {TuiInputMonth} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [FormsModule, TuiInputMonth, TuiTextfield],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    protected value: TuiMonth | null = null;
}
```

#### Range mode

Use tuiInputMonthRange to enable possibility to select range of months. All features described above are applicable for it too. Moreover, it provides two additional features: minLength / maxLength – minimal / maximal length of the selected range. Form control value is TuiMonthRange or null (for uncompleted range or empty textfield) types.

**Template:**
```html
<tui-textfield>
<input placeholder="Choose a range of months" tuiInputMonthRange [(ngModel)]="value" />
<tui-calendar-month *tuiTextfieldDropdown [maxLength]="6" [minLength]="3" />
<tui-icon tuiTooltip="Click the same month twice to set a single-day range" />
</tui-textfield>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {type TuiMonthRange} from '@taiga-ui/cdk';
import {TuiIcon, TuiTextfield} from '@taiga-ui/core';
import {TuiInputMonthRange, TuiTooltip} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [FormsModule, TuiIcon, TuiInputMonthRange, TuiTextfield, TuiTooltip],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    protected value: TuiMonthRange | null = null;
}
```


### TypeScript

```ts
import {Component, ViewEncapsulation} from '@angular/core';
import {FormControl, ReactiveFormsModule} from '@angular/forms';
import {TuiDocControl} from '@demo/components/control';
import {TuiDocTextfield} from '@demo/components/textfield';
import {changeDetection} from '@demo/emulate/change-detection';
import {DemoRoute} from '@demo/routes';
import {TuiDemo} from '@demo/utils';
import {
    TUI_FALSE_HANDLER,
    type TuiBooleanHandler,
    TuiDay,
    TuiMonth,
    TuiYear,
} from '@taiga-ui/cdk';
import {TuiTextfield, TuiTitle} from '@taiga-ui/core';
import {TuiInputMonth} from '@taiga-ui/kit';

const TAIGA_BIRTHDAY = new TuiDay(2020, 8, 20);
const TAIGA_V3 = new TuiDay(2022, 7, 30);
const TAIGA_V4 = new TuiDay(2024, 7, 9);

@Component({
    standalone: true,
    imports: [
        ReactiveFormsModule,
        TuiDemo,
        TuiDocControl,
        TuiDocTextfield,
        TuiInputMonth,
        TuiTextfield,
        TuiTitle,
    ],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation: ViewEncapsulation.None,
    changeDetection,
})
export default class PageComponent {
    protected readonly routes = DemoRoute;
    protected readonly control = new FormControl(null);
    protected readonly monthVariants = [
        TuiDay.currentLocal().append({year: -100, month: -1}),
        TuiDay.currentLocal().append({year: -10, month: -1}),
        new TuiMonth(2007, 0),
        TAIGA_BIRTHDAY,
        TAIGA_V3,
        TAIGA_V4,
        TuiDay.currentLocal().append({year: 10, month: 1}),
        TuiDay.currentLocal().append({year: 100, month: 1}),
    ] as const satisfies readonly TuiMonth[];

    protected readonly yearVariants = [
        new TuiYear(TuiDay.currentLocal().year),
        new TuiYear(2077),
        new TuiYear(2007),
    ] as const satisfies readonly TuiYear[];

    protected readonly disabledItemHandlerVariants = [
        TUI_FALSE_HANDLER,
        ({month}) => month % 3 === 0,
    ] as const satisfies ReadonlyArray<TuiBooleanHandler<TuiMonth>>;

    protected min: TuiMonth | null = null;
    protected max: TuiMonth | null = null;
    protected year: TuiYear = this.yearVariants[0];
    protected disabledItemHandler: TuiBooleanHandler<TuiMonth> =
        this.disabledItemHandlerVariants[0];
}
```

### LESS

```less
tui-doc-example tui-textfield:has([tuiInputMonth]) {
    min-inline-size: 18.5rem;
}

tui-doc-example tui-textfield:has([tuiInputMonthRange]) {
    inline-size: min(24rem, 100%);
}
```

---
# components/InputNumber
- **Package**: `KIT`
- **Type**: components
InputNumber
        is a form field to provide numerical input.

### How to Use (Import)

```ts
import {ReactiveFormsModule} from '@angular/forms';
import {TuiNumberFormat} from '@taiga-ui/core';
import {TuiInputNumber, tuiInputNumberOptionsProvider} from '@taiga-ui/kit';

@Component({
  standalone: true,
  imports: [ReactiveFormsModule, TuiInputNumber, TuiNumberFormat],
  providers: [
    /**
     * (Optional)
     * Customize default behavior for all InputNumber-s
     * inside specific Dependency Injection scope
     */
    tuiInputNumberOptionsProvider({
      min: 0,
      max: 100,
      postfix: '%',
    }),
  ],
})
export class Example {
  protected readonly control = new FormControl(42);
}
```

### How to Use (Template)

```html
<tui-textfield>
  <input
    tuiInputNumber
    [formControl]="control"
    [tuiNumberFormat]="{precision: 2}"
  />
</tui-textfield>
```

### Example

```html
<ng-template>
<tui-textfield [iconEnd]="icons.iconEnd" [iconStart]="icons.iconStart" [tuiTextfieldCleaner]="textfieldDoc.cleaner" [tuiTextfieldSize]="textfieldDoc.size" >
<label *ngIf="textfieldDoc.size !== 's'" tuiLabel > Enter a number </label>
<input tuiInputNumber [formControl]="control" [invalid]="controlDoc.invalid" [max]="max" [min]="min" [placeholder]="textfieldDoc.size === 's' ? 'Enter a number' : ''" [postfix]="postfix" [prefix]="prefix" [quantum]="quantum" [readOnly]="controlDoc.readonly" [step]="step" [tuiDisabled]="controlDoc.disabled" [tuiNumberFormat]="{ thousandSeparator: numberFormatDoc.thousandSeparator(), decimalSeparator: numberFormatDoc.decimalSeparator(), precision: numberFormatDoc.precision(), decimalMode: numberFormatDoc.decimalMode(), rounding: numberFormatDoc.rounding(), }" />
</tui-textfield>
</ng-template>
```

### API

| Property | Type | Description |
|----------|-----|----------|
| [min] | `number | null` | value in the range of permitted values |
| [max] | `number | null` | value in the range of permitted values |
| [step] | `number` | Step to increase/decrease value with keyboard and buttons on the side |
| [prefix] | `string` | number |
| [postfix] | `string` | number |
| [quantum] | `number` |  |

### Usage Examples

#### Form control value

Form control value is of null (for empty textfield only) and number (all other cases) types. Use Validators.required (built-in validator provided by Angular team) with our FieldError pipe to notify your users about required field.

**Template:**
```html
<tui-textfield>
<label tuiLabel>Enter a number</label>
<input tuiInputNumber [formControl]="control" />
</tui-textfield>
<tui-error [error]="[] | tuiFieldError | async" [formControl]="control" />
<p><strong>Control value:</strong></p>
<code>{{ control.value | json }}</code>
```
**TypeScript:**
```ts
import {AsyncPipe, JsonPipe} from '@angular/common';
import {Component} from '@angular/core';
import {FormControl, ReactiveFormsModule, Validators} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiError, TuiTextfield} from '@taiga-ui/core';
import {
    TuiFieldErrorPipe,
    TuiInputNumber,
    tuiValidationErrorsProvider,
} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [
        AsyncPipe,
        JsonPipe,
        ReactiveFormsModule,
        TuiError,
        TuiFieldErrorPipe,
        TuiInputNumber,
        TuiTextfield,
    ],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
    providers: [
        tuiValidationErrorsProvider({
            required: 'Required field',
        }),
    ],
})
export default class Example {
    protected readonly control = new FormControl<number | null>(
        null,
        Validators.required,
    );
}
```

#### Textfield-based

Use all powers of Textfield : put any number of Icons and Tooltips inside (and control their order and color), modify the size of the textbox and etc. Explore its documentation page for more customization options.

**Template:**
```html
<tui-textfield iconStart="@tui.euro" tuiTextfieldSize="m" >
<label tuiLabel>I am a label</label>
<input placeholder="I am placeholder" tuiInputNumber [(ngModel)]="value" />
<tui-icon icon="@tui.circle-alert" style="color: var(--tui-status-negative)" />
<tui-icon tuiTooltip="I am a hint" />
</tui-textfield>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiIcon, TuiTextfield} from '@taiga-ui/core';
import {TuiInputNumber, TuiTooltip} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [FormsModule, TuiIcon, TuiInputNumber, TuiTextfield, TuiTooltip],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    protected value: number | null = null;
}
```

#### Localization

TuiNumberFormat allows to customize separators specific for your locale.

**Template:**
```html
<tui-textfield>
<label tuiLabel>Type number like a German</label>
<input tuiInputNumber [tuiNumberFormat]="numberFormat" [(ngModel)]="value" />
<tui-icon tuiHintDirection="right" tuiTooltip="In Germany people use comma as decimal separator and point for thousands" />
</tui-textfield>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {
    TuiIcon,
    TuiNumberFormat,
    type TuiNumberFormatSettings,
    TuiTextfield,
} from '@taiga-ui/core';
import {TuiInputNumber, TuiTooltip} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [
        FormsModule,
        TuiIcon,
        TuiInputNumber,
        TuiNumberFormat,
        TuiTextfield,
        TuiTooltip,
    ],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    protected value: number | null = 1_234_567.89;
    protected numberFormat: Partial<TuiNumberFormatSettings> = {
        decimalSeparator: ',',
        thousandSeparator: '.',
    };
}
```

#### Affixes

Use prefix / postfix parameters to set non-removable text before / after the number. To get currency symbol use Currency pipe.

**Template:**
```html
<tui-textfield>
<label tuiLabel>Price</label>
<input tuiInputNumber [min]="0" [prefix]="'USD' | tuiCurrency" [(ngModel)]="value" />
</tui-textfield>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiCurrencyPipe} from '@taiga-ui/addon-commerce';
import {TuiTextfield} from '@taiga-ui/core';
import {TuiInputNumber} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [FormsModule, TuiCurrencyPipe, TuiInputNumber, TuiTextfield],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    protected value: number | null = null;
}
```

#### Step

Positive value of step property enables sided button to increase / decrease the number by the specified step's value. Moreover, keyboard keys ArrowUp / ArrowDown will also work in the same way.

**Template:**
```html
<tui-textfield>
<label tuiLabel>Percentage</label>
<input postfix="%" tuiInputNumber [max]="100" [min]="0" [step]="1" [(ngModel)]="value" />
</tui-textfield>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiTextfield} from '@taiga-ui/core';
import {TuiInputNumber} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [FormsModule, TuiInputNumber, TuiTextfield],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    protected value: number | null = null;
}
```

#### Custom step buttons

**Template:**
```html
<tui-textfield [tuiTextfieldCleaner]="false">
<input tuiInputNumber [min]="0" [(ngModel)]="value" (keydown.arrowDown)="onStep(-1)" (keydown.arrowUp)="onStep(+1)" />
<button appearance="floating" size="s" tuiButton type="button" (click.prevent)="onStep(+100)" > + 100 </button>
<button appearance="floating" size="s" tuiButton type="button" (click.prevent)="onStep(+1000)" > + 1000 </button>
</tui-textfield>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiButton, TuiTextfield} from '@taiga-ui/core';
import {TuiInputNumber} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [FormsModule, TuiButton, TuiInputNumber, TuiTextfield],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected value: number | null = 1_000;

    protected onStep(step: number): void {
        this.value = Math.max(0, (this.value ?? 0) + step);
    }
}
```

#### Fluid typography

Use FluidTypography directive to adjusts font size for the textfield value to fit in the textfield box.

**Template:**
```html
<tui-textfield [style.width.rem]="10">
<input postfix=" €" tuiFluidTypography tuiInputNumber [min]="0" [(ngModel)]="value" />
</tui-textfield>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiTextfield} from '@taiga-ui/core';
import {TuiFluidTypography, TuiInputNumber} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [FormsModule, TuiFluidTypography, TuiInputNumber, TuiTextfield],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    protected value = 10000;
}
```

#### Value transformer

TuiValueTransformer is a great opportunity to override default form control's value format without breaking component's internal logic. This example demonstrates how to use NaN -value for empty textfield instead of default null -value to keep type strictly "number" .

**Template:**
```html
<tui-textfield>
<input placeholder="Form control contains NaN" tuiInputNumber [(ngModel)]="value" />
</tui-textfield>
<p> Control value: <code>{{ value.toString() }}</code>
</p>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiValueTransformer} from '@taiga-ui/cdk';
import {TuiTextfield} from '@taiga-ui/core';
import {TuiInputNumber, tuiInputNumberOptionsProvider} from '@taiga-ui/kit';

class NaNTransformer extends TuiValueTransformer<number | null, number> {
    public override fromControlValue(value: number): number | null {
        return Number.isNaN(value) ? null : value;
    }

    public override toControlValue(value: number | null): number {
        return value ?? NaN;
    }
}

@Component({
    standalone: true,
    imports: [FormsModule, TuiInputNumber, TuiTextfield],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
    providers: [
        tuiInputNumberOptionsProvider({
            valueTransformer: new NaNTransformer(),
        }),
    ],
})
export default class Example {
    protected value = NaN;
}
```

#### Quantum

Property [quantum] allows to set minimum indivisible value. Form control value never contains a number that is not divisible by value of this property. Even if user enters any invalid number, it will be rounded to the nearest valid one on blur event. In this example, form control value can only contain 0 , 0.05 , 0.1 , 0.15 ... 0.9 , 0.95 , 1 .

**Template:**
```html
<tui-textfield>
<input tuiInputNumber [max]="1" [min]="0" [quantum]="0.05" [(ngModel)]="value" />
</tui-textfield>
<p><strong>Control value:</strong></p>
<code>{{ value | json }}</code>
```
**TypeScript:**
```ts
import {JsonPipe} from '@angular/common';
import {Component} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiTextfield} from '@taiga-ui/core';
import {TuiInputNumber} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [FormsModule, JsonPipe, TuiInputNumber, TuiTextfield],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    protected value = 0.5;
}
```


### TypeScript

```ts
import {Component, ViewEncapsulation} from '@angular/core';
import {FormControl, ReactiveFormsModule, Validators} from '@angular/forms';
import {TuiDocControl} from '@demo/components/control';
import {TuiDocIcons} from '@demo/components/icons';
import {TuiDocNumberFormat} from '@demo/components/number-format';
import {TuiDocTextfield} from '@demo/components/textfield';
import {changeDetection} from '@demo/emulate/change-detection';
import {DemoRoute} from '@demo/routes';
import {TuiDemo} from '@demo/utils';
import {TuiHint, TuiNumberFormat, TuiTextfield} from '@taiga-ui/core';
import {TuiInputNumber} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [
        ReactiveFormsModule,
        TuiDemo,
        TuiDocControl,
        TuiDocIcons,
        TuiDocNumberFormat,
        TuiDocTextfield,
        TuiHint,
        TuiInputNumber,
        TuiNumberFormat,
        TuiTextfield,
    ],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation: ViewEncapsulation.None,
    changeDetection,
})
export default class PageComponent {
    protected readonly routes = DemoRoute;
    protected readonly control = new FormControl(null, Validators.required);
    protected readonly maxVariants: readonly number[] = [Infinity, 10, 500];
    protected readonly minVariants: readonly number[] = [-Infinity, -500, 5, 25];

    protected min = this.minVariants[0]!;
    protected max = this.maxVariants[0]!;
    protected step = 0;
    protected prefix = '';
    protected postfix = '';
    protected quantum = 0;
}
```

### LESS

```less
tui-doc-example tui-textfield:has([tuiInputNumber]) {
    max-inline-size: 22rem;
}
```

---
# components/InputPhone
- **Package**: `KIT`
- **Type**: components
InputPhone
            allows to input a phone number

### How to Use (Import)

```ts
import {TuiTextfield} from '@taiga-ui/core';
import {TuiInputPhone} from '@taiga-ui/kit';

@Component({
  standalone: true,
  imports: [
    // ...
    TuiTextfield,
    TuiInputPhone,
  ],
  // ...
})
export class Example {}
```

### How to Use (Template)

```html
<tui-textfield>
  <input
    tuiInputPhone
    [ngModel]="value"
  />
</tui-textfield>
```

### Example

```html
<ng-template>
<tui-textfield [iconEnd]="icons.iconEnd" [iconStart]="icons.iconStart" [tuiTextfieldCleaner]="textfieldDoc.cleaner" [tuiTextfieldSize]="textfieldDoc.size" >
<label tuiLabel>Type a phone number</label>
<input tuiInputPhone [formControl]="control" [invalid]="controlDoc.invalid" [mask]="phoneMask" [readOnly]="controlDoc.readonly" [tuiDisabled]="controlDoc.disabled" />
</tui-textfield>
</ng-template>
```

### API

| Property | Type | Description |
|----------|-----|----------|
| [mask] | `string` | Text mask. You can use # , - , brackets and spaces as a template symbol |

### Usage Examples

#### Basic

**Template:**
```html
<tui-textfield>
<label tuiLabel>Type a phone number</label>
<input autocomplete="tel" mask="+7 ### ###-##-##" tuiInputPhone [attr.pattern]="pattern" [(ngModel)]="value" />
</tui-textfield>
```
**TypeScript:**
```ts
import {Component, inject} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TUI_IS_IOS} from '@taiga-ui/cdk';
import {TuiTextfield} from '@taiga-ui/core';
import {TuiInputPhone} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [FormsModule, TuiInputPhone, TuiTextfield],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly isIos = inject(TUI_IS_IOS);

    public value = '+71234567890';

    protected get pattern(): string | null {
        return this.isIos ? '+[0-9-]{1,20}' : null;
    }
}
```

#### With autocomplete

**Template:**
```html
<tui-textfield>
<label tuiLabel>{{ user() || 'Phone number or name' }}</label>
<input #input mask="+1 (###)###-####" tuiInputPhone [allowText]="true" [ngModel]="value()" (input)="onInput(input.value)" (ngModelChange)="value.set($event)" />
<ng-container *ngIf="items | tuiFilterByInput: matcher as filtered">
<ng-container *ngIf="!user() && input.value && filtered.length">
<tui-data-list-wrapper *tuiTextfieldDropdown new [itemContent]="template" [items]="filtered" (itemClick)="selectUser($event)" />
</ng-container>
</ng-container>
</tui-textfield>
<ng-template #template let-user >
<div tuiCell>
<tui-avatar size="s" [src]="user.avatarUrl" />
<div tuiTitle> {{ user }} <span tuiSubtitle>{{ user.phone }}</span>
</div>
</div>
</ng-template>
<pre>value: {{ value() }}</pre>
```
**TypeScript:**
```ts
import {NgIf} from '@angular/common';
import {Component, computed, signal} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TUI_DEFAULT_MATCHER, type TuiMatcher} from '@taiga-ui/cdk';
import {TuiTextfield, TuiTitle} from '@taiga-ui/core';
import {
    TuiAvatar,
    TuiDataListWrapper,
    TuiFilterByInputPipe,
    TuiInputPhone,
} from '@taiga-ui/kit';
import {TuiCell} from '@taiga-ui/layout';

class User {
    constructor(
        public readonly firstName: string,
        public readonly lastName: string,
        public readonly phone: string,
        public readonly avatarUrl: string | null = null,
        public readonly disabled = false,
    ) {}

    public toString(): string {
        return `${this.firstName} ${this.lastName}`;
    }
}

const DATA: readonly User[] = [
    new User(
        'Alex',
        'Inkin',
        '+11234567890',
        'https://avatars.githubusercontent.com/u/11832552',
    ),
    new User(
        'Vladimir',
        'Potekhin',
        '+13213213213',
        'https://avatars.githubusercontent.com/u/46284632',
    ),
    new User(
        'Nikita',
        'Barsukov',
        '+18005553535',
        'https://avatars.githubusercontent.com/u/35179038',
    ),
    new User(
        'Roman',
        'Sedov',
        '+18003000600',
        'https://avatars.githubusercontent.com/u/10106368',
    ),
    new User(
        'Yulia',
        'Tsareva',
        '+13332221110',
        'https://avatars.githubusercontent.com/u/8158578',
    ),
];

@Component({
    standalone: true,
    imports: [
        FormsModule,
        NgIf,
        TuiAvatar,
        TuiCell,
        TuiDataListWrapper,
        TuiFilterByInputPipe,
        TuiInputPhone,
        TuiTextfield,
        TuiTitle,
    ],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    public readonly value = signal('');
    public readonly items = DATA;
    public readonly user = computed(() =>
        this.items.find(({phone}) => phone === this.value()),
    );

    protected selectUser(user: User): void {
        this.value.set(user.phone);
    }

    protected onInput(value: string): void {
        const user = this.items.find((user) => this.matcher(user, value));

        if (value === user?.toString() || value === user?.phone) {
            this.value.set(user.phone);
        }
    }

    protected readonly matcher: TuiMatcher<[User, string]> = (item, search) =>
        (search.startsWith('+') &&
            TUI_DEFAULT_MATCHER(item.phone, search.replaceAll(/\D/g, ''))) ||
        TUI_DEFAULT_MATCHER(item.toString(), search);

    private isFullMatch(response: readonly User[], value: string): boolean {
        return (
            response.length === 1 &&
            (String(response[0]) === value || response[0]?.phone === value)
        );
    }
}
```

#### Value transformer

**Template:**
```html
<tui-textfield>
<label tuiLabel>Type a phone number</label>
<input tuiInputPhone [(ngModel)]="value" />
</tui-textfield>
<p>{{ value }}</p>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {type TuiValueTransformer} from '@taiga-ui/cdk';
import {TuiTextfield} from '@taiga-ui/core';
import {TuiInputPhone, tuiInputPhoneOptionsProvider} from '@taiga-ui/kit';

const VALUE_TRANSFORMER: TuiValueTransformer<string, string> = {
    fromControlValue: (value) => `+${value}`,
    toControlValue: (value) => value.slice(1),
};

@Component({
    standalone: true,
    imports: [FormsModule, TuiInputPhone, TuiTextfield],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
    providers: [
        tuiInputPhoneOptionsProvider({
            valueTransformer: VALUE_TRANSFORMER,
        }),
    ],
})
export default class Example {
    public value = '';
}
```

#### With flag

**Template:**
```html
<tui-textfield [tuiTextfieldCleaner]="false">
<label tuiLabel>Type a phone number</label>
<input tuiInputPhone [(ngModel)]="value" />
<img alt="Flag of the United States" width="28" [src]="'US' | tuiFlag" [style.border-radius.%]="50" />
</tui-textfield>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {type TuiValueTransformer} from '@taiga-ui/cdk';
import {TuiFlagPipe, TuiTextfield} from '@taiga-ui/core';
import {TuiInputPhone, tuiInputPhoneOptionsProvider} from '@taiga-ui/kit';

const VALUE_TRANSFORMER: TuiValueTransformer<string, string> = {
    fromControlValue: (value) => `+${value}`,
    toControlValue: (value) => value.slice(1),
};

@Component({
    standalone: true,
    imports: [FormsModule, TuiFlagPipe, TuiInputPhone, TuiTextfield],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
    providers: [
        tuiInputPhoneOptionsProvider({
            valueTransformer: VALUE_TRANSFORMER,
        }),
    ],
})
export default class Example {
    public value = '';
}
```


### TypeScript

```ts
import {Component} from '@angular/core';
import {FormControl, ReactiveFormsModule, Validators} from '@angular/forms';
import {TuiDocControl} from '@demo/components/control';
import {TuiDocIcons} from '@demo/components/icons';
import {TuiDocTextfield} from '@demo/components/textfield';
import {changeDetection} from '@demo/emulate/change-detection';
import {TuiDemo} from '@demo/utils';
import {tuiProvide} from '@taiga-ui/cdk';
import {TuiDropdown, TuiTextfield} from '@taiga-ui/core';
import {TuiInputPhone} from '@taiga-ui/kit';
import {TuiInputPhoneModule, TuiTextfieldControllerModule} from '@taiga-ui/legacy';

import {ABSTRACT_PROPS_ACCESSOR} from '../abstract/abstract-props-accessor';
import {AbstractExampleTuiControl} from '../abstract/control';

@Component({
    standalone: true,
    imports: [
        ReactiveFormsModule,
        TuiDemo,
        TuiDocControl,
        TuiDocIcons,
        TuiDocTextfield,
        TuiDropdown,
        TuiInputPhone,
        TuiInputPhoneModule,
        TuiTextfield,
        TuiTextfieldControllerModule,
    ],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    changeDetection,
    providers: [tuiProvide(ABSTRACT_PROPS_ACCESSOR, PageComponent)],
})
export default class PageComponent extends AbstractExampleTuiControl {
    protected phoneMasks = [
        '+7 (###) ###-##-##',
        '+850 (####)-#############',
        '+1 ### ###-####',
    ];

    protected phoneMask = this.phoneMasks[0]!;

    public control = new FormControl('', [Validators.required, Validators.minLength(12)]);
}
```

### LESS

```less
@import '@taiga-ui/core/styles/taiga-ui-local';

.item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    inline-size: 100%;
    margin: -0.625rem 0;
}

.avatar {
    margin-inline-start: 0.75rem;
}

.name,
.phone {
    margin: 0;
}

.phone {
    font: var(--tui-font-text-s);
    color: var(--tui-text-tertiary);
}
```

---
# components/InputPhoneInternational
- **Package**: `EXPERIMENTAL`
- **Type**: components
Allows to input phone number in international format

        
            InputPhoneInternational
            is based on
            
                &#64;maskito/phone
            
            and
            
                libphonenumber-js
            
            libraries.
        

        
            
                libphonenumber
            
            is an ultimate phone number formatting and parsing library developed by
            Google
            .

            
                This library
                
                    collects
                
                the latest phone number rules from ITU documents, user bug reports, telecom company home pages and
                government telecommunication authorities. It is always up-to-date (for more than 10 years), and releases
                are published almost every month. It means that
                InputPhoneInternational
                has the robust source of truth!

### How to Use (Import)

```ts
import {ReactiveFormsModule} from '@angular/forms';
import type {TuiCountryIsoCode} from '@taiga-ui/i18n';
import {TuiTextfield} from '@taiga-ui/core';
import {TuiInputPhoneInternational} from '@taiga-ui/experimental';

@Component({
  standalone: true,
  imports: [ReactiveFormsModule, TuiInputPhoneInternational],
  // ...
})
export class Example {
  readonly testForm = new FormGroup({
    testValue: new FormControl('+78005553535'),
  });

  readonly countries: ReadonlyArray<TuiCountryIsoCode> = ['RU', 'KZ', 'UA', 'BY'];
}
```

### How to Use (Template)

```html
<form [formGroup]="testForm">
  <tui-textfield>
    <input
      tuiInputPhoneInternational
      formControlName="testValue"
      [countries]="countries"
    />
  </tui-textfield>
</form>
```

### Example

```html
<ng-template>
<tui-textfield [tuiDropdownAlign]="dropdown.align" [tuiDropdownAppearance]="dropdown.appearance" [tuiDropdownDirection]="dropdown.direction" [tuiDropdownLimitWidth]="dropdown.limitWidth" [tuiDropdownMaxHeight]="dropdown.maxHeight" [tuiDropdownMinHeight]="dropdown.minHeight" [tuiDropdownOffset]="dropdown.offset" [tuiTextfieldCleaner]="textfield.cleaner" [tuiTextfieldSize]="textfield.size" >
<label *ngIf="textfield.size !== 's'" tuiLabel > Type a phone number </label>
<input tuiInputPhoneInternational [countries]="countries" [countrySearch]="countrySearch" [formControl]="formControl" [invalid]="control.invalid" [placeholder]="textfield.size === 's' ? 'Type a phone number' : ''" [readOnly]="control.readonly" [tuiDisabled]="control.disabled" [(countryIsoCode)]="countryIsoCode" />
</tui-textfield>
</ng-template>
```

### API

| Property | Type | Description |
|----------|-----|----------|
| [countries] | `ReadonlyArray<TuiCountryIsoCode>` | Array of ISO-codes of countries to choose |
| [countrySearch] | `boolean` | Enable filter input for countries |
| [(countryIsoCode)] | `boolean` | ISO-code of selected country |

### Usage Examples

#### Choose metadata

The first step is to choose the size of metadata Google uses the word "metadata" to refer to all information about phone numbering in a particular country - what the country code, international and national dialling prefixes are, what carrier codes are operational, which phone numbers are possible or valid for a particular country, how to optimally format them, which prefixes represent a particular geographical area, etc.

**Template:**
```html
<tui-textfield>
<input tuiInputPhoneInternational [countries]="countries" [(countryIsoCode)]="countryIsoCode" [(ngModel)]="value" />
</tui-textfield>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiTextfield} from '@taiga-ui/core';
import {TuiInputPhoneInternational} from '@taiga-ui/experimental';
import {type TuiCountryIsoCode} from '@taiga-ui/i18n';
import {tuiInputPhoneInternationalOptionsProvider} from '@taiga-ui/kit';
import {defer} from 'rxjs';

@Component({
    standalone: true,
    imports: [FormsModule, TuiInputPhoneInternational, TuiTextfield],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
    providers: [
        /**
         * You can choose: lazily load metadata or include it in your bundle.
         * Lazy loading:
         */
        tuiInputPhoneInternationalOptionsProvider({
            metadata: defer(async () =>
                import('libphonenumber-js/max/metadata').then((m) => m.default),
            ),
        }),
        /**
         * Eager loading:
         * ```ts
         * import metadata from 'libphonenumber-js/mobile/metadata';
         * import {of} from 'rxjs';
         * // [...]
         * tuiInputPhoneInternationalOptionsProvider({
         *     metadata: of(metadata),
         * }),
         * ```
         */
    ],
})
export default class Example {
    protected readonly countries: readonly TuiCountryIsoCode[] = [
        'IN',
        'CN',
        'US',
        'ID',
        'PK',
    ];

    protected countryIsoCode: TuiCountryIsoCode = 'US';
    protected value = '+12125552368';
}
```

#### Choose any countries

Parameter countries allows you to choose which countries user can select from the dropdown. You can even pick all possible countries by built-in utility getCountries from libphonenumber-js . Use TuiSortCountriesPipe to sort countries according to your current language.

**Template:**
```html
<tui-textfield>
<label tuiLabel>Phone number</label>
<input tuiInputPhoneInternational [countries]="(countries | tuiSortCountries | async) || []" [countrySearch]="true" [(countryIsoCode)]="countryIsoCode" [(ngModel)]="value" />
</tui-textfield>
```
**TypeScript:**
```ts
import {AsyncPipe} from '@angular/common';
import {Component} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiTextfield} from '@taiga-ui/core';
import {TuiInputPhoneInternational} from '@taiga-ui/experimental';
import {type TuiCountryIsoCode} from '@taiga-ui/i18n';
import {
    tuiInputPhoneInternationalOptionsProvider,
    TuiSortCountriesPipe,
} from '@taiga-ui/kit';
import {getCountries} from 'libphonenumber-js';
import {defer} from 'rxjs';

@Component({
    standalone: true,
    imports: [
        AsyncPipe,
        FormsModule,
        TuiInputPhoneInternational,
        TuiSortCountriesPipe,
        TuiTextfield,
    ],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
    providers: [
        tuiInputPhoneInternationalOptionsProvider({
            metadata: defer(async () =>
                import('libphonenumber-js/max/metadata').then((m) => m.default),
            ),
        }),
    ],
})
export default class Example {
    protected readonly countries = getCountries();
    protected countryIsoCode: TuiCountryIsoCode = 'CN';
    protected value = '';
}
```

#### Mobile dropdown

You can enable mobile specific dropdown design on mobile devices by adding TuiDropdownMobile directive.

**Template:**
```html
<tui-textfield tuiDropdownMobile="Select country">
<label tuiLabel>Phone number</label>
<input tuiInputPhoneInternational [countries]="(countries | tuiSortCountries | async) || []" [countrySearch]="true" [(countryIsoCode)]="countryIsoCode" [(ngModel)]="value" />
</tui-textfield>
```
**TypeScript:**
```ts
import {AsyncPipe} from '@angular/common';
import {Component} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiDropdownMobile} from '@taiga-ui/addon-mobile';
import {TuiTextfield} from '@taiga-ui/core';
import {TuiInputPhoneInternational} from '@taiga-ui/experimental';
import {type TuiCountryIsoCode} from '@taiga-ui/i18n';
import {
    tuiInputPhoneInternationalOptionsProvider,
    TuiSortCountriesPipe,
} from '@taiga-ui/kit';
import {getCountries} from 'libphonenumber-js';
import {defer} from 'rxjs';

@Component({
    standalone: true,
    imports: [
        AsyncPipe,
        FormsModule,
        TuiDropdownMobile,
        TuiInputPhoneInternational,
        TuiSortCountriesPipe,
        TuiTextfield,
    ],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
    providers: [
        tuiInputPhoneInternationalOptionsProvider({
            metadata: defer(async () =>
                import('libphonenumber-js/max/metadata').then((m) => m.default),
            ),
        }),
    ],
})
export default class Example {
    protected readonly countries = getCountries();
    protected countryIsoCode: TuiCountryIsoCode = 'CN';
    protected value = '';
}
```

#### Customize with icons

You can put static Icon or even interactive Tooltip at the right side of the textfield.

**Template:**
```html
<tui-textfield [style.inline-size.rem]="19">
<label tuiLabel>Phone number</label>
<input tuiInputPhoneInternational [countries]="countries" [(countryIsoCode)]="countryIsoCode" [(ngModel)]="value" />
<tui-icon appearance="negative" tuiHintAppearance="error" tuiHintDirection="top" tuiTooltip="I am a hint" />
<tui-icon icon="@tui.phone" />
</tui-textfield>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiIcon, TuiTextfield} from '@taiga-ui/core';
import {TuiInputPhoneInternational} from '@taiga-ui/experimental';
import {type TuiCountryIsoCode} from '@taiga-ui/i18n';
import {tuiInputPhoneInternationalOptionsProvider, TuiTooltip} from '@taiga-ui/kit';
import {defer} from 'rxjs';

@Component({
    standalone: true,
    imports: [FormsModule, TuiIcon, TuiInputPhoneInternational, TuiTextfield, TuiTooltip],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
    providers: [
        tuiInputPhoneInternationalOptionsProvider({
            metadata: defer(async () =>
                import('libphonenumber-js/max/metadata').then((m) => m.default),
            ),
        }),
    ],
})
export default class Example {
    protected readonly countries: readonly TuiCountryIsoCode[] = [
        'TR',
        'IR',
        'IQ',
        'SA',
        'YE',
    ];

    protected countryIsoCode: TuiCountryIsoCode = 'TR';
    protected value = '';
}
```

#### Customize separator

Using tuiInputPhoneInternationalOptionsProvider you can provide custom separator for input instead of the default - .

**Template:**
```html
<tui-textfield>
<label tuiLabel>Type your number</label>
<input tuiInputPhoneInternational [countries]="countries" [(countryIsoCode)]="countryIsoCode" [(ngModel)]="value" />
</tui-textfield>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiTextfield} from '@taiga-ui/core';
import {TuiInputPhoneInternational} from '@taiga-ui/experimental';
import {type TuiCountryIsoCode} from '@taiga-ui/i18n';
import {tuiInputPhoneInternationalOptionsProvider} from '@taiga-ui/kit';
import {getCountries} from 'libphonenumber-js';
import {defer} from 'rxjs';

@Component({
    standalone: true,
    imports: [FormsModule, TuiInputPhoneInternational, TuiTextfield],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
    providers: [
        tuiInputPhoneInternationalOptionsProvider({
            metadata: defer(async () =>
                import('libphonenumber-js/max/metadata').then((m) => m.default),
            ),
            separator: ' ',
        }),
    ],
})
export default class Example {
    protected readonly countries = getCountries();
    protected countryIsoCode: TuiCountryIsoCode = 'FR';
    protected value = '';
}
```

#### Use phone format helpers

InputPhoneInternational internally uses Maskito to format phone number. Don't hesitate to use it too to manually format any phone number.

**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {MaskitoPipe} from '@maskito/angular';
import {maskitoTransform} from '@maskito/core';
import {maskitoPhoneOptionsGenerator} from '@maskito/phone';
import metadata from 'libphonenumber-js/max/metadata';

@Component({
    standalone: true,
    imports: [MaskitoPipe],
    template: `
        Phone: {{ rawValue | maskito: mask }}
    `,
    encapsulation,
    changeDetection,
    host: {
        '(click)': 'showUtilityPower()',
    },
})
export default class Example {
    protected rawValue = '12125552368';
    protected readonly mask = maskitoPhoneOptionsGenerator({
        metadata,
        countryIsoCode: 'US',
    });

    protected showUtilityPower(): void {
        console.info(maskitoTransform(this.rawValue, this.mask));
    }
}
```

#### Old syntax

This component has been refactored to maintain uniformity across new textfield components. Newest version is in the &#64;taiga-ui/experimental package and will replace previous syntax in the next major release. Old syntax is displayed in the example below:

**Template:**
```html
<tui-input-phone-international [countries]="countries" [(countryIsoCode)]="countryIsoCode" [(ngModel)]="value" />
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiTextfield} from '@taiga-ui/core';
import {type TuiCountryIsoCode} from '@taiga-ui/i18n';
import {
    TuiInputPhoneInternational,
    tuiInputPhoneInternationalOptionsProvider,
} from '@taiga-ui/kit';
import {defer} from 'rxjs';

@Component({
    standalone: true,
    imports: [FormsModule, TuiInputPhoneInternational, TuiTextfield],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
    providers: [
        /**
         * You can choose: lazily load metadata or include it in your bundle.
         * Lazy loading:
         */
        tuiInputPhoneInternationalOptionsProvider({
            metadata: defer(async () =>
                import('libphonenumber-js/max/metadata').then((m) => m.default),
            ),
        }),
        /**
         * Eager loading:
         * ```ts
         * import metadata from 'libphonenumber-js/mobile/metadata';
         * import {of} from 'rxjs';
         * // [...]
         * tuiInputPhoneInternationalOptionsProvider({
         *     metadata: of(metadata),
         * }),
         * ```
         */
    ],
})
export default class Example {
    protected readonly countries: readonly TuiCountryIsoCode[] = [
        'IN',
        'CN',
        'US',
        'ID',
        'PK',
    ];

    protected countryIsoCode: TuiCountryIsoCode = 'US';
    protected value = '+12125552368';
}
```


### TypeScript

```ts
import {Component} from '@angular/core';
import {FormControl, ReactiveFormsModule, Validators} from '@angular/forms';
import {TuiDocControl} from '@demo/components/control';
import {TuiDocDropdown} from '@demo/components/dropdown';
import {TuiDocTextfield} from '@demo/components/textfield';
import {changeDetection} from '@demo/emulate/change-detection';
import {DemoRoute} from '@demo/routes';
import {TuiDemo} from '@demo/utils';
import {TuiDropdown, TuiIcon, TuiTextfield} from '@taiga-ui/core';
import {TuiInputPhoneInternational} from '@taiga-ui/experimental';
import {type TuiCountryIsoCode} from '@taiga-ui/i18n';
import {tuiInputPhoneInternationalOptionsProvider, TuiTooltip} from '@taiga-ui/kit';
import {getCountries} from 'libphonenumber-js';

@Component({
    standalone: true,
    imports: [
        ReactiveFormsModule,
        TuiDemo,
        TuiDocControl,
        TuiDocDropdown,
        TuiDocTextfield,
        TuiDropdown,
        TuiIcon,
        TuiInputPhoneInternational,
        TuiTextfield,
        TuiTooltip,
    ],
    templateUrl: './index.html',
    changeDetection,
    providers: [
        tuiInputPhoneInternationalOptionsProvider({
            metadata: import('libphonenumber-js/max/metadata').then((m) => m.default),
        }),
    ],
})
export default class PageComponent {
    protected readonly routes = DemoRoute;
    protected readonly countriesVariants: ReadonlyArray<readonly TuiCountryIsoCode[]> = [
        ['RU', 'KZ', 'UA', 'BY'],
        getCountries(),
    ];

    protected countries = this.countriesVariants[0]!;
    protected countrySearch = false;

    protected readonly countryIsoCodeVariants: readonly TuiCountryIsoCode[] = [
        'RU',
        'KZ',
        'UA',
        'BY',
    ];

    protected countryIsoCode = this.countryIsoCodeVariants[0]!;

    protected formControl = new FormControl('', [
        Validators.required,
        Validators.minLength(9),
    ]);
}
```

---
# components/InputPin
- **Package**: `KIT`
- **Type**: components

### How to Use (Import)

```ts
import {TuiTextfield} from '@taiga-ui/core';
import {TuiInputPin} from '@taiga-ui/kit';

// ...

@Component({
  standalone: true,
  imports: [
    // ...
    TuiTextfield,
    TuiInputPin,
  ],
  // ...
})
export class Example {
  readonly testForm = new FormGroup({
    testValue: new FormControl(null),
  });
}
```

### How to Use (Template)

```html
<form [formGroup]="testForm">
  <tui-textfield>
    <input
      maxlength="4"
      tuiInputPin
      [formControl]="control"
    />
  </tui-textfield>
</form>
```

### Usage Examples

#### Basic

**Template:**
```html
<tui-textfield>
<input maxlength="4" placeholder="••••" tuiInputPin [formControl]="control" />
</tui-textfield>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {FormControl, ReactiveFormsModule, Validators} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiTextfield} from '@taiga-ui/core';
import {TuiInputPin} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [ReactiveFormsModule, TuiInputPin, TuiTextfield],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly control = new FormControl('', Validators.minLength(4));
}
```

#### Alphanumeric

**Template:**
```html
<tui-textfield tuiTextfieldSize="m" [style.text-transform]="'uppercase'" >
<input autocapitalize="characters" inputmode="text" mask="^[a-zA-Z0-9]+$" maxlength="5" tuiInputPin [(ngModel)]="value" />
</tui-textfield>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiTextfield} from '@taiga-ui/core';
import {TuiInputPin} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [FormsModule, TuiInputPin, TuiTextfield],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    protected value = '';
}
```

#### Hidden

**Template:**
```html
<tui-textfield tuiTextfieldSize="s" [style.-webkit-text-security]="'disc'" [style.gap.rem]="1" [style.width.rem]="9" >
<input maxlength="3" tuiInputPin [formControl]="control" />
</tui-textfield>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {FormControl, ReactiveFormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiTextfield} from '@taiga-ui/core';
import {TuiInputPin} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [ReactiveFormsModule, TuiInputPin, TuiTextfield],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly control = new FormControl(null);
}
```


### TypeScript

```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {TuiDemo} from '@demo/utils';

@Component({
    standalone: true,
    imports: [TuiDemo],
    templateUrl: './index.html',
    changeDetection,
})
export default class PageComponent {
    protected readonly examples = ['Basic', 'Alphanumeric', 'Hidden'];
}
```

---
# components/InputRange
- **Package**: `KIT`
- **Type**: components
InputRange
        =
        Textfield
        +
        InputNumber
        × 2 +
        Range
        + ❤️
        2

### How to Use (Import)

```ts
import {FormsModule} from '@angular/forms';
import {TuiInputRange} from '@taiga-ui/kit';

@Component({
  imports: [
    // ...
    FormsModule,
    TuiInputRange,
  ],
  // ...
})
export class Example {
  value = [0, 0];
}
```

### How to Use (Template)

```html
<tui-input-range [(ngModel)]="value">
  <label tuiLabel>Text above numbers</label>
</tui-input-range>
```

### Example

```html
<ng-template>
<tui-input-range [content]="content" [formControl]="control" [invalid]="controlDoc.invalid" [keySteps]="keySteps" [max]="max" [min]="min" [postfix]="postfix" [prefix]="prefix" [quantum]="quantum" [readOnly]="controlDoc.readonly" [segments]="segments" [step]="step" [tuiDisabled]="controlDoc.disabled" [tuiNumberFormat]="{ decimalMode: numberFormatDoc.decimalMode(), rounding: numberFormatDoc.rounding(), thousandSeparator: numberFormatDoc.thousandSeparator(), decimalSeparator: numberFormatDoc.decimalSeparator(), precision: numberFormatDoc.precision(), }" [tuiTextfieldSize]="textfieldDoc.size" />
</ng-template>
```

### API

| Property | Type | Description |
|----------|-----|----------|
| [min] | `number` | value in the range of permitted values |
| [max] | `number` | value in the range of permitted values |
| [prefix] | `readonly [string, string] | null` | number |
| [postfix] | `readonly [string, string] | null` | number |
| [content] | `[PolymorpheusContent, PolymorpheusContent]` | A template for custom view of the selected value. |
| [quantum] | `number` |  |
| [segments] | `number` | for no ticks) |
| [step] | `number` |  |
| [keySteps] | `TuiKeySteps` | Anchor points of non-uniform format between value and position |

### Usage Examples

#### Override number format

TuiNumberFormat allows to customize separators specific for your locale.

**Template:**
```html
<tui-input-range [max]="max" [min]="min" [tuiNumberFormat]="numberFormat" [(ngModel)]="value" >
<label tuiLabel>Type number like a German</label>
</tui-input-range>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiNumberFormat, type TuiNumberFormatSettings} from '@taiga-ui/core';
import {TuiInputRange} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [FormsModule, TuiInputRange, TuiNumberFormat],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly max = 1_000_000;
    protected readonly min = 0;
    protected value = [0.42, 123_456.78];

    protected readonly numberFormat: Partial<TuiNumberFormatSettings> = {
        precision: 2,
        decimalSeparator: ',',
        thousandSeparator: '.',
    };
}
```

#### Affixes

Use prefix / postfix parameters to set non-removable text before / after the number. To get currency symbol use Currency pipe.

**Template:**
```html
<tui-input-range *tuiLet="'USD' | tuiCurrency as currency" [max]="999" [min]="0" [postfix]="[' per day', ' per day']" [prefix]="[currency, currency]" [(ngModel)]="value" />
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiCurrencyPipe} from '@taiga-ui/addon-commerce';
import {TuiLet} from '@taiga-ui/cdk';
import {TuiInputRange} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [FormsModule, TuiCurrencyPipe, TuiInputRange, TuiLet],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    protected value = [42, 777];
}
```

#### Visual segments + labels for ticks

Use mixin tui-slider-ticks-labels to arrange ticks' labels (it places them strictly below ticks).

**Template:**
```html
<tui-input-range [formControl]="control" [max]="100" [min]="0" [postfix]="['%', '%']" [segments]="5" [step]="20" >
<label tuiLabel>Select volume range</label>
</tui-input-range>
<div class="ticks-labels">
<span>
<tui-icon icon="@tui.volume-x" />
</span>
<span>20%</span>
<span>40%</span>
<span>60%</span>
<span>80%</span>
<span>
<tui-icon icon="@tui.volume-2" />
</span>
</div>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {FormControl, ReactiveFormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiIcon} from '@taiga-ui/core';
import {TuiInputRange} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [ReactiveFormsModule, TuiIcon, TuiInputRange],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly control = new FormControl([20, 40]);
}
```

#### Custom value content

**Template:**
```html
<tui-input-range [content]="[content, content]" [max]="10" [min]="0" [postfix]="[value[0] | i18nPlural: pluralize, value[1] | i18nPlural: pluralize]" [(ngModel)]="value" >
<label tuiLabel>Desired departure day</label>
</tui-input-range>
<ng-template #content let-value >
<ng-container [ngSwitch]="value">
<span *ngSwitchCase="0">Today</span>
<span *ngSwitchCase="1">Tomorrow</span>
<span *ngSwitchCase="7">In a week</span>
<span *ngSwitchDefault>{{ value }}{{ value | i18nPlural: pluralize }}</span>
</ng-container>
</ng-template>
```
**TypeScript:**
```ts
import {I18nPluralPipe, NgSwitch, NgSwitchCase, NgSwitchDefault} from '@angular/common';
import {Component} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiInputRange} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [
        FormsModule,
        I18nPluralPipe,
        NgSwitch,
        NgSwitchCase,
        NgSwitchDefault,
        TuiInputRange,
    ],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    protected value = [0, 7];

    // See https://angular.dev/api/common/I18nPluralPipe#example
    protected readonly pluralize = {
        '=1': ' day later',
        other: ' days later',
    };
}
```

#### KeySteps

Key steps – anchor points of non-uniform format between control's value and slider's position. When [keySteps] property is enabled, [step] means percentage of total track length.

**Template:**
```html
<tui-input-range [keySteps]="keySteps" [max]="max" [min]="min" [segments]="segments" [step]="step" [(ngModel)]="value" >
<label tuiLabel>Not linear growing sliders</label>
</tui-input-range>
<div class="ticks-labels">
<span *ngFor="let label of ticksLabels">{{ label }}</span>
</div>
<p>
<strong>Control value:</strong>
<output>
<code>{{ value | json }}</code>
</output>
</p>
```
**TypeScript:**
```ts
import {JsonPipe, NgForOf} from '@angular/common';
import {Component} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiInputRange, type TuiKeySteps} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [FormsModule, JsonPipe, NgForOf, TuiInputRange],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected value = [100_000, 500_000];
    protected readonly min = 0;
    protected readonly max = 1_000_000;
    protected readonly step = 5;
    protected readonly ticksLabels = ['0', '10K', '100K', '500k', '1000K'];
    protected readonly segments = this.ticksLabels.length - 1;

    protected readonly keySteps: TuiKeySteps = [
        // [percent, value]
        [0, this.min],
        [25, 10_000],
        [50, 100_000],
        [75, 500_000],
        [100, this.max],
    ];
}
```

#### Quantum

Property [quantum] allows to set minimum indivisible value. Form control value never contains a number that is not divisible by value of this property. Even if user enters any invalid number, it will be rounded to the nearest valid one on blur event. In this example, form control value can only contain 0 , 0.05 , 0.1 , 0.15 ... 0.9 , 0.95 , 1 .

**Template:**
```html
<tui-input-range [max]="1" [min]="0" [quantum]="quantum" [step]="step" [(ngModel)]="value" />
<p>
<strong>Control value:</strong>
<output>
<code>{{ value | json }}</code>
</output>
</p>
```
**TypeScript:**
```ts
import {JsonPipe} from '@angular/common';
import {Component} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiInputRange} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [FormsModule, JsonPipe, TuiInputRange],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    protected value = [0.25, 0.75];
    // Form control can only contain decimal number which is multiple of this constant
    protected quantum = 0.05;

    // But granularity of each discrete slider step equals to this constant
    protected readonly step = 0.25;
}
```

#### Using negative values without minus sign

**Template:**
```html
<tui-input-range [content]="[value[0] ? '' : 'Today', value[1] ? '' : 'Today']" [max]="0" [min]="-30" [postfix]="[value[0] | i18nPlural: pluralize, value[1] | i18nPlural: pluralize]" [(ngModel)]="value" >
<label tuiLabel>How far back to look</label>
</tui-input-range>
<p>
<strong>Control value:</strong>
<output>
<code>{{ value | json }}</code>
</output>
</p>
```
**TypeScript:**
```ts
import {I18nPluralPipe, JsonPipe} from '@angular/common';
import {Component} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {tuiInputNumberOptionsProvider, TuiInputRange} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [FormsModule, I18nPluralPipe, JsonPipe, TuiInputRange],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
    providers: [
        tuiInputNumberOptionsProvider({
            valueTransformer: {
                fromControlValue(value: number | null): number | null {
                    return value && Math.abs(value);
                },
                toControlValue(value: number | null): number | null {
                    return value && -1 * Math.abs(value);
                },
            },
        }),
    ],
})
export default class Example {
    protected value = [-30, 0];

    // See https://angular.dev/api/common/I18nPluralPipe#example
    protected readonly pluralize = {
        '=-1': ' day ago',
        other: ' days ago',
    };
}
```


### TypeScript

```ts
import {Component} from '@angular/core';
import {FormControl, ReactiveFormsModule} from '@angular/forms';
import {TuiDocControl} from '@demo/components/control';
import {TuiDocNumberFormat} from '@demo/components/number-format';
import {TuiDocTextfield} from '@demo/components/textfield';
import {changeDetection} from '@demo/emulate/change-detection';
import {DemoRoute} from '@demo/routes';
import {TuiDemo} from '@demo/utils';
import {type TuiContext} from '@taiga-ui/cdk';
import {TuiLoader, TuiNumberFormat, TuiTextfield, TuiTitle} from '@taiga-ui/core';
import {TuiInputRange, type TuiKeySteps} from '@taiga-ui/kit';
import {PolymorpheusComponent, type PolymorpheusContent} from '@taiga-ui/polymorpheus';

@Component({
    standalone: true,
    imports: [
        ReactiveFormsModule,
        TuiDemo,
        TuiDocControl,
        TuiDocNumberFormat,
        TuiDocTextfield,
        TuiInputRange,
        TuiNumberFormat,
        TuiTextfield,
        TuiTitle,
    ],
    templateUrl: './index.html',
    changeDetection,
})
export default class PageComponent {
    protected readonly routes = DemoRoute;
    protected readonly control = new FormControl([0, 10]);

    protected readonly suffixVariants: Array<[string, string]> = [
        ['$', '$'],
        ['€', '€'],
        [' ₽', ' ₽'],
        ['%', '%'],
        [' kg', ' kg'],
    ];

    protected keyStepsVariants: readonly TuiKeySteps[] = [
        [
            [0, 0],
            [50, 1_000],
            [100, 10_000],
        ],
    ];

    protected readonly contentVariants: Array<
        readonly [
            PolymorpheusContent<TuiContext<number>>,
            PolymorpheusContent<TuiContext<number>>,
        ]
    > = [
        ['', ''],
        ['START', 'END'],
        [
            ({$implicit: val}: TuiContext<number>) =>
                val === this.max ? 'MAX' : `${val}`,
            ({$implicit: val}: TuiContext<number>) =>
                val === this.max ? 'MAX' : `${val}`,
        ],
        [
            ({$implicit: val}: TuiContext<number>) =>
                val === this.min ? 'MIN' : `${val}`,
            ({$implicit: val}: TuiContext<number>) =>
                val === this.min ? 'MIN' : `${val}`,
        ],
        [
            ({$implicit: val}: TuiContext<number>) => (val === 5 ? 'FIVE' : `${val}`),
            ({$implicit: val}: TuiContext<number>) => (val === 5 ? 'FIVE' : `${val}`),
        ],
        ['', new PolymorpheusComponent(TuiLoader)],
    ];

    protected min = 0;
    protected max = 100;
    protected step = 1;
    protected segments = 1;
    protected prefix: [string, string] | null = null;
    protected postfix: [string, string] | null = null;
    protected quantum = 0;
    protected keySteps: TuiKeySteps | null = null;
    protected content = this.contentVariants[0]!;
}
```

---
# components/InputSearch
- **Package**: `LAYOUT`
- **Type**: components

### How to Use (Import)

```ts
import {TuiInputSearch} from '@taiga-ui/layout';
import {TuiTextfield} from '@taiga-ui/core';

// ...

@Component({
  standalone: true,
  imports: [
    // ...
    TuiTextfield,
    TuiInputSearch,
  ],
  // ...
})
export class MyComponent {}
```

### How to Use (Template)

```html
<tui-textfield>
  <input
    [tuiInputSearch]="results"
    [(ngModel)]="value"
  />
  <ng-template #results>
    <!-- ... -->
  </ng-template>
</tui-textfield>
```

### Usage Examples

#### Basic

**Template:**
```html
<header tuiNavigationHeader>
<strong>Taiga UI</strong>
<hr />
<tui-textfield (pointerdown.capture.stop)="(0)">
<input tuiSearchHotkey [formControl]="control" [tuiInputSearch]="search" [(tuiInputSearchOpen)]="open" />
<ng-template #search>
<tui-search-results [results]="results$ | async">
<tui-search-history [popular]="popular" />
<ng-template let-item>
<a tuiCell [href]="item.href" >
<tui-avatar [src]="item.icon || '@tui.file'" />
<span tuiTitle> {{ item.title }} <span tuiSubtitle>{{ item.subtitle }}</span>
</span>
</a>
</ng-template>
</tui-search-results>
</ng-template>
</tui-textfield> Alex Inkin <tui-avatar src="https://avatars.githubusercontent.com/u/11832552" />
</header>
<p>
<button size="m" tuiButton type="button" (click)="open = !open" > Toggle open: {{ open }} </button>
</p>
```
**TypeScript:**
```ts
import {AsyncPipe} from '@angular/common';
import {Component} from '@angular/core';
import {FormControl, ReactiveFormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TUI_DEFAULT_MATCHER} from '@taiga-ui/cdk';
import {TuiButton, TuiTextfield, TuiTitle} from '@taiga-ui/core';
import {TuiSearchResults} from '@taiga-ui/experimental';
import {TuiAvatar} from '@taiga-ui/kit';
import {TuiCell, TuiInputSearch, TuiNavigation} from '@taiga-ui/layout';
import {filter, map, startWith, switchMap, timer} from 'rxjs';

interface Result {
    href: string;
    title: string;
    subtitle?: string;
    icon?: string;
}

const DATA: Record<string, readonly Result[]> = {
    Documents: [
        {
            title: 'Monty Python',
            href: 'https://en.wikipedia.org/wiki/Monty_Python',
        },
    ],
    Code: [
        {
            title: 'Taiga UI',
            href: 'https://github.com/taiga-family/taiga-ui',
            icon: '@tui.github',
        },
        {
            title: 'Maskito',
            href: 'https://github.com/taiga-family/maskito',
            icon: '@tui.github',
        },
        {
            title: 'Web APIs with Angular',
            href: 'https://github.com/taiga-family/ng-web-apis',
            icon: '@tui.github',
        },
    ],
    Links: [
        {
            title: 'Taiga UI',
            subtitle: 'Super awesome library',
            href: 'https://taiga-ui.dev',
            icon: 'assets/images/taiga.svg',
        },
        {
            title: 'Maskito',
            href: 'https://maskito.dev',
            icon: '@tui.external-link',
        },
    ],
};

@Component({
    standalone: true,
    imports: [
        AsyncPipe,
        ReactiveFormsModule,
        TuiAvatar,
        TuiButton,
        TuiCell,
        TuiInputSearch,
        TuiNavigation,
        TuiSearchResults,
        TuiTextfield,
        TuiTitle,
    ],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class ExampleComponent {
    protected readonly popular = ['Taiga UI', 'Maskito', 'Web APIs for Angular'];

    protected readonly control = new FormControl('');

    protected readonly results$ = this.control.valueChanges.pipe(
        filter(Boolean),
        switchMap((value: string) =>
            timer(2000).pipe(
                map(() => this.filter(value)),
                startWith(null),
            ),
        ),
    );

    protected open = false;

    private filter(query: string): Record<string, readonly Result[]> {
        return Object.entries(DATA).reduce(
            (result, [key, value]) => ({
                ...result,
                [key]: value.filter(({title, href, subtitle = ''}) =>
                    TUI_DEFAULT_MATCHER(title + href + subtitle, query),
                ),
            }),
            {},
        );
    }
}
```


### TypeScript

```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {TuiDemo} from '@demo/utils';

@Component({
    standalone: true,
    imports: [TuiDemo],
    templateUrl: './index.html',
    changeDetection,
})
export default class PageComponent {
    protected readonly examples = ['Basic'];
}
```

---
# components/InputSlider
- **Package**: `KIT`
- **Type**: components
InputSlider
        =
        Textfield
        +
        InputNumber
        +
        Slider
        + ❤️

### How to Use (Import)

```ts
import {FormsModule} from '@angular/forms';
import {TuiNumberFormat, TuiTextfield} from '@taiga-ui/core';
import {TuiInputSlider} from '@taiga-ui/kit';

@Component({
  standalone: true,
  imports: [
    // ...
    FormsModule,
    TuiTextfield,
    TuiInputSlider,
    TuiNumberFormat,
  ],
  // ...
})
export class Example {
  value = 0;
}
```

### How to Use (Template)

```html
<tui-textfield>
  <input
    tuiInputSlider
    prefix="$"
    postfix="%"
    [min]="0"
    [max]="100"
    [tuiNumberFormat]="{precision: 3}"
    [(ngModel)]="value"
  />

  <input
    tuiSlider
    type="range"
    [keySteps]="keySteps"
    [segments]="segments"
    [step]="step"
  />
</tui-textfield>
```

### Example

```html
<ng-template>
<tui-textfield #textfield [content]="textfield.focused() ? '' : textfieldContent" [iconEnd]="icons.iconEnd" [iconStart]="icons.iconStart" [tuiTextfieldCleaner]="textfieldDoc.cleaner" [tuiTextfieldSize]="textfieldDoc.size" >
<input tuiInputSlider [attr.placeholder]="'Form control value is still ' + control.value" [formControl]="control" [invalid]="controlDoc.invalid" [max]="max()" [min]="min()" [postfix]="postfix" [prefix]="prefix" [quantum]="quantum" [readOnly]="controlDoc.readonly" [tuiDisabled]="controlDoc.disabled" [tuiNumberFormat]="{ thousandSeparator: numberFormatDoc.thousandSeparator(), decimalSeparator: numberFormatDoc.decimalSeparator(), precision: numberFormatDoc.precision(), decimalMode: numberFormatDoc.decimalMode(), rounding: numberFormatDoc.rounding(), }" />
<input tuiSlider type="range" [keySteps]="keySteps" [segments]="segments" [step]="step" />
</tui-textfield>
</ng-template>
```

### API

| Property | Type | Description |
|----------|-----|----------|
| [min] | `number` | value in the range of permitted values |
| [max] | `number` | value in the range of permitted values |
| [prefix] | `string` | number |
| [postfix] | `string` | number |
| [quantum] | `number` |  |
| [step] | `number` |  |
| [segments] | `number[] | number` | for no ticks) |
| [keySteps] | `TuiKeySteps | null` | Anchor points of non-uniform format between value and position |
| [content] | `PolymorpheusContent` | A template for custom view of textfield value. |

### Usage Examples

#### Textfield customization

Use all powers of Textfield : put any number of Icons and Tooltips inside (and control their order and color), modify the size of the textbox and etc. Explore Textfield 's documentation page for more customization options.

**Template:**
```html
<tui-textfield iconStart="@tui.euro" tuiTextfieldSize="m" >
<input placeholder="I am placeholder" tuiInputSlider [max]="100" [min]="0" [(ngModel)]="value" />
<input tuiSlider type="range" />
<tui-icon icon="@tui.circle-alert" style="color: var(--tui-status-negative)" />
<tui-icon tuiTooltip="I am a hint" />
</tui-textfield>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiIcon, TuiTextfield} from '@taiga-ui/core';
import {TuiInputSlider, TuiTooltip} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [FormsModule, TuiIcon, TuiInputSlider, TuiTextfield, TuiTooltip],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    protected value = 42;
}
```

#### InputNumber customization

InputSlider is just a slight extension of InputNumber – it has completely the same customization: add [prefix] / [postfix] , configure separators specific for your locale via NumberFormat directive or etc.

**Template:**
```html
<tui-textfield>
<input prefix="$" tuiInputSlider [max]="10000" [min]="0" [tuiNumberFormat]="{ decimalSeparator: ',', thousandSeparator: '.', precision: 1, }" [(ngModel)]="value" />
<input tuiSlider type="range" />
</tui-textfield>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiNumberFormat, TuiTextfield} from '@taiga-ui/core';
import {TuiInputSlider} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [FormsModule, TuiInputSlider, TuiNumberFormat, TuiTextfield],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    protected value = 9_999.9;
}
```

#### Slider customization

Slider automatically inherits [min] / [max] properties from [tuiInputSlider] (don't set them for Slider to avoid any possible conflicts!). However, feel free to configure Slider 's-specific properties: [step] , [keySteps] and [segments] . Also, you can use mixin-helper tui-slider-ticks-labels to arrange ticks' labels (it places them strictly below ticks).

**Template:**
```html
<tui-textfield>
<label tuiLabel>Rate your mind</label>
<input tuiInputSlider [max]="max" [min]="min" [(ngModel)]="value" />
<input tuiSlider type="range" [segments]="5" [step]="step" />
</tui-textfield>
<div class="slider-ticks-labels">
<button appearance="icon" iconStart="@tui.thumbs-down" size="xs" tuiIconButton type="button" (click)="decrease()" > Decrease </button>
<span>20%</span>
<span>40%</span>
<span>60%</span>
<span>80%</span>
<button appearance="icon" iconStart="@tui.thumbs-up" size="xs" tuiIconButton type="button" (click)="increase()" > Increase </button>
</div>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiButton, TuiTextfield} from '@taiga-ui/core';
import {TuiInputSlider} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [FormsModule, TuiButton, TuiInputSlider, TuiTextfield],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly max = 100;
    protected readonly min = 0;
    protected readonly step = 20;
    protected value = 20;

    protected increase(): void {
        this.value = Math.min(this.value + this.step, this.max);
    }

    protected decrease(): void {
        this.value = Math.max(this.value - this.step, this.min);
    }
}
```

#### KeySteps

Key steps – anchor points of non-uniform format between control's value and slider's position. When [keySteps] property is enabled, [step] means percentage of total track length.

**Template:**
```html
<tui-textfield>
<label tuiLabel>Not linear growing slider</label>
<input tuiInputSlider [max]="max" [min]="min" [(ngModel)]="value" />
<input tuiSlider type="range" [keySteps]="keySteps" [segments]="ticksLabels.length - 1" [step]="step" />
</tui-textfield>
<div class="slider-ticks-labels">
<span *ngFor="let label of ticksLabels">{{ label }}</span>
</div>
<p> Control value: <code>{{ value }}</code>
</p>
```
**TypeScript:**
```ts
import {NgForOf} from '@angular/common';
import {Component} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiTextfield} from '@taiga-ui/core';
import {TuiInputSlider, type TuiKeySteps} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [FormsModule, NgForOf, TuiInputSlider, TuiTextfield],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected value = 10;
    protected readonly min = 0;
    protected readonly max = 1_000;
    protected readonly step = 5; // 100% / 5% = 20 total steps
    protected readonly ticksLabels = ['0', '10', '100', '500', '1000'];

    protected readonly keySteps: TuiKeySteps = [
        // [percent, value]
        [0, this.min],
        [25, 10],
        [50, 100],
        [75, 500],
        [100, this.max],
    ];
}
```

#### Quantum

Property [quantum] allows to set minimum indivisible value. Form control value never contains a number that is not divisible by value of this property. Even if user enters any invalid number, it will be rounded to the nearest valid one on blur event. In this example, form control value can only contain 0 , 0.05 , 0.1 , 0.15 ... 0.9 , 0.95 , 1 .

**Template:**
```html
<tui-textfield>
<input tuiInputSlider [max]="1" [min]="0" [quantum]="quantum" [(ngModel)]="value" />
<input tuiSlider type="range" [step]="step" />
</tui-textfield>
<p><strong>Control value:</strong></p>
<code>{{ value | json }}</code>
```
**TypeScript:**
```ts
import {JsonPipe} from '@angular/common';
import {Component} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiTextfield} from '@taiga-ui/core';
import {TuiInputSlider} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [FormsModule, JsonPipe, TuiInputSlider, TuiTextfield],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    protected value = 0.5;
    // Form control can only contain decimal number which is multiple of this constant
    protected quantum = 0.05;

    // But granularity of each discrete slider step equals to this constant
    protected readonly step = 0.25;
}
```


### TypeScript

```ts
import {Component, computed, type Signal, signal} from '@angular/core';
import {FormControl, ReactiveFormsModule} from '@angular/forms';
import {TuiDocControl} from '@demo/components/control';
import {TuiDocIcons} from '@demo/components/icons';
import {TuiDocNumberFormat} from '@demo/components/number-format';
import {TuiDocTextfield} from '@demo/components/textfield';
import {changeDetection} from '@demo/emulate/change-detection';
import {DemoRoute} from '@demo/routes';
import {TuiDemo} from '@demo/utils';
import {type TuiContext} from '@taiga-ui/cdk';
import {TuiNumberFormat, TuiTextfield, TuiTitle} from '@taiga-ui/core';
import {TuiInputSlider, type TuiKeySteps} from '@taiga-ui/kit';
import {type PolymorpheusContent} from '@taiga-ui/polymorpheus';

@Component({
    standalone: true,
    imports: [
        ReactiveFormsModule,
        TuiDemo,
        TuiDocControl,
        TuiDocIcons,
        TuiDocNumberFormat,
        TuiDocTextfield,
        TuiInputSlider,
        TuiNumberFormat,
        TuiTextfield,
        TuiTitle,
    ],
    templateUrl: './index.html',
    changeDetection,
})
export default class PageComponent {
    protected readonly routes = DemoRoute;
    protected readonly control = new FormControl(0);

    protected min = signal(0);
    protected max = signal(100);
    protected prefix = '';
    protected postfix = '';
    protected quantum = 0;
    protected segments: number[] | number = 1;
    protected step = 1;
    protected keySteps: TuiKeySteps | null = null;
    protected textfieldContent: PolymorpheusContent = '';
    protected readonly segmentsVariants: Array<number[] | number> = [
        1,
        5,
        3,
        [0.2, 0.5],
        [0.1, 0.3],
    ];

    protected readonly keyStepsVariants: Signal<readonly TuiKeySteps[]> = computed(() => [
        [
            [0, this.min()],
            [50, 0.1 * this.max()],
            [100, this.max()],
        ],
    ]);

    protected readonly textfieldContentVariants = computed(() => [
        '',
        'TOP SECRET',
        ({$implicit: val}: TuiContext<number>) => (val === this.max() ? 'MAX' : val),
        ({$implicit: val}: TuiContext<number>) => (val === this.min() ? 'MIN' : val),
        ({$implicit: val}: TuiContext<number>) => (val === 5 ? 'FIVE' : val),
    ]);
}
```

---
# components/InputTime
- **Package**: `KIT`
- **Type**: components
InputTime
        allows users to enter and edit time values using a keyboard, dropdown or even browser native picker.

### How to Use (Import)

```ts
import {FormsModule} from '@angular/forms';
import {TuiTextfield} from '@taiga-ui/core';
import {TuiInputTime} from '@taiga-ui/kit';

@Component({
  standalone: true,
  imports: [
    // ...
    FormsModule,
    TuiTextfield,
    TuiInputTime,
  ],
})
export class Example {
  value: TuiTime | null = null;
}
```

### How to Use (Template)

```html
<tui-textfield>
  <input
    tuiInputTime
    [(ngModel)]="value"
  />
</tui-textfield>
```

### Example

```html
<ng-template>
<tui-textfield [tuiTextfieldCleaner]="textfieldDoc.cleaner" [tuiTextfieldSize]="textfieldDoc.size" >
<input placeholder="Pick a time" tuiInputTime [accept]="accept" [formControl]="control" [invalid]="controlDoc.invalid" [mode]="mode" [postfix]="postfix" [prefix]="prefix" [readOnly]="controlDoc.readonly" [tuiDisabled]="controlDoc.disabled" />
</tui-textfield>
</ng-template>
```

### API

| Property | Type | Description |
|----------|-----|----------|
| [mode] | `MaskitoTimeMode` | Time format mode |
| [prefix] | `string` | time |
| [postfix] | `string` | time |
| [accept] | `ReadonlyArray<TuiTime>` | values to choose |

### Usage Examples

#### Mode

InputTime supports all possible time segments: hours, minutes, seconds, and even milliseconds. Property mode allows to choose specific combination of the segments. Explore MaskitoTimeMode type to see all available modes.

**Template:**
```html
<tui-textfield>
<input tuiInputTime [mode]="mode" [(ngModel)]="value" />
</tui-textfield>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {type MaskitoTimeMode} from '@maskito/kit';
import {TuiTime} from '@taiga-ui/cdk';
import {TuiTextfield} from '@taiga-ui/core';
import {TuiInputTime} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [FormsModule, TuiInputTime, TuiTextfield],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly mode: MaskitoTimeMode = 'HH:MM:SS.MSS';
    protected value: TuiTime | null = new TuiTime(23, 59, 59, 999);
}
```

#### Native picker with suggestions

Link your &lt;input type="time" /&gt; to a &lt;datalist /&gt; by list attribute to show a list of suggestions inside native picker. The values provided are suggestions, not requirements: users can select from this predefined list or provide a different value. Browser support limitations! IOS devices does not support &lt;datalist /&gt; for time picker.

**Template:**
```html
<tui-textfield>
<input list="suggestions" placeholder="Click on clock icon" tuiInputTime type="time" [(ngModel)]="value" />
<datalist id="suggestions">
<option value="08:00">Morning</option>
<option value="12:00">Noon</option>
<option value="18:00">Evening</option>
</datalist>
</tui-textfield>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {type TuiTime} from '@taiga-ui/cdk';
import {TuiTextfield} from '@taiga-ui/core';
import {TuiInputTime} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [FormsModule, TuiInputTime, TuiTextfield],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    protected value: TuiTime | null = null;
}
```

#### 12-hour format with AM/PM

Any mode ending with AA is 12-hour time format with meridiem part.

**Template:**
```html
<tui-textfield>
<label tuiLabel>Enter 12-hour time format</label>
<input mode="HH:MM AA" tuiInputTime [formControl]="control" />
</tui-textfield>
<p><strong>Control value:</strong></p>
<pre><code>{{ control.value | json }}</code></pre>
```
**TypeScript:**
```ts
import {JsonPipe} from '@angular/common';
import {Component} from '@angular/core';
import {FormControl, ReactiveFormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiTime} from '@taiga-ui/cdk';
import {TuiTextfield} from '@taiga-ui/core';
import {TuiInputTime} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [JsonPipe, ReactiveFormsModule, TuiInputTime, TuiTextfield],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly control = new FormControl<TuiTime | null>(new TuiTime(17, 0));
}
```

#### Form control validation

Form control value is TuiTime or null (for empty textfield only) types. Use Validators.required (built-in validator provided by Angular team) with our FieldError pipe to notify your users about required field. If a field is optional, but unfinished field should be marked as invalid, use tuiUnfinishedValidator directive

**Template:**
```html
<form tuiForm="m" [formGroup]="form" >
<tui-textfield>
<label tuiLabel>Required field</label>
<input formControlName="required" tuiInputTime />
</tui-textfield>
<tui-error formControlName="required" [error]="[] | tuiFieldError | async" />
<tui-textfield>
<label tuiLabel>Optional field</label>
<input formControlName="optional" tuiInputTime tuiUnfinishedValidator />
</tui-textfield>
<tui-error formControlName="optional" [error]="[] | tuiFieldError | async" />
<footer>
<button tuiButton type="submit" [disabled]="form.invalid" > Submit </button>
</footer>
</form>
```
**TypeScript:**
```ts
import {AsyncPipe} from '@angular/common';
import {Component} from '@angular/core';
import {FormControl, FormGroup, ReactiveFormsModule, Validators} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiButton, TuiError, TuiTextfield} from '@taiga-ui/core';
import {
    TuiFieldErrorPipe,
    TuiInputTime,
    TuiUnfinishedValidator,
    tuiValidationErrorsProvider,
} from '@taiga-ui/kit';
import {TuiForm} from '@taiga-ui/layout';

@Component({
    standalone: true,
    imports: [
        AsyncPipe,
        ReactiveFormsModule,
        TuiButton,
        TuiError,
        TuiFieldErrorPipe,
        TuiForm,
        TuiInputTime,
        TuiTextfield,
        TuiUnfinishedValidator,
    ],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
    providers: [
        tuiValidationErrorsProvider({
            tuiUnfinished: 'Either fill this or leave blank',
            required: 'This field is required',
        }),
    ],
})
export default class Example {
    protected readonly form = new FormGroup({
        required: new FormControl(null, Validators.required),
        optional: new FormControl(),
    });
}
```

#### Options

**Template:**
```html
<tui-textfield>
<label tuiLabel>Sale</label>
<input prefix="Ends in " tuiInputTime [(ngModel)]="value" />
</tui-textfield>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiTime} from '@taiga-ui/cdk';
import {TuiTextfield} from '@taiga-ui/core';
import {TuiInputTime, tuiInputTimeOptionsProvider} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [FormsModule, TuiInputTime, TuiTextfield],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
    providers: [
        tuiInputTimeOptionsProvider({
            icon: () => '@tui.timer',
            mode: 'HH:MM:SS.MSS',
            timeSegmentMaxValues: {
                hours: 99,
            },
        }),
    ],
})
export default class Example {
    protected value: TuiTime | null = new TuiTime(99, 59, 59, 999);
}
```

#### Textfield customization

Use all powers of Textfield : put any number of Icons and Tooltips inside (and control their order and color), modify the size of the textbox and etc. Explore Textfield documentation page for more customization options.

**Template:**
```html
<tui-textfield iconStart="@tui.alarm-clock" tuiTextfieldSize="m" [tuiTextfieldCleaner]="false" >
<label tuiLabel>I am a label</label>
<input placeholder="I am placeholder" tuiInputTime [(ngModel)]="value" />
<tui-icon *ngIf="value" [icon]="value.hours < 8 ? '@tui.moon' : '@tui.sun'" />
<tui-icon tuiTooltip="I am a hint" />
</tui-textfield>
```
**TypeScript:**
```ts
import {NgIf} from '@angular/common';
import {Component} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiTime} from '@taiga-ui/cdk';
import {TuiIcon, TuiTextfield} from '@taiga-ui/core';
import {TuiInputTime, tuiInputTimeOptionsProvider, TuiTooltip} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [FormsModule, NgIf, TuiIcon, TuiInputTime, TuiTextfield, TuiTooltip],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
    providers: [
        tuiInputTimeOptionsProvider({
            icon: () => '',
        }),
    ],
})
export default class Example {
    protected value: TuiTime | null = new TuiTime(9, 0);
}
```

#### Strict mode

Property accept allows to limit the set of allowed values. It is useful when you want to restrict user input to a specific set of time periods, for example, to allow only working hours with equally distant time intervals.

**Template:**
```html
<tui-textfield>
<input placeholder="Meeting time" tuiInputTime [accept]="acceptableValues" [(ngModel)]="value" />
<tui-icon tuiTooltip="Only time from 10:00 to 18:00 AND divisible by 30 is permitted" />
</tui-textfield>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiTime} from '@taiga-ui/cdk';
import {TuiIcon, TuiTextfield} from '@taiga-ui/core';
import {tuiCreateTimePeriods, TuiInputTime, TuiTooltip} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [FormsModule, TuiIcon, TuiInputTime, TuiTextfield, TuiTooltip],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    protected value: TuiTime | null = null;
    protected acceptableValues = [
        // Array of TuiTime from 10:00 to 18:00 every half of hour
        ...tuiCreateTimePeriods(10, 18, [0, 30]),
        new TuiTime(18, 0),
    ];
}
```

#### Dropdown with DataList

Use tuiItemsHandlersProvider to override the default behavior of all InputTime -s below the current DI scope. To customize a specific InputTime , use the input properties [identityMatcher] / [stringify] / disabledItemHandler (inherited from Textfield ). Explore Dropdown and DataList documentation pages for more customization options.

**Template:**
```html
<tui-textfield [disabledItemHandler]="disabledItemHandler">
<input placeholder="Click me to open dropdown" tuiInputTime [(ngModel)]="value" />
<tui-data-list-wrapper *tuiTextfieldDropdown new [items]="items | tuiFilterByInput: matcher" />
</tui-textfield>
```
**TypeScript:**
```ts
import {Component, signal} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {type TuiBooleanHandler, type TuiStringMatcher, TuiTime} from '@taiga-ui/cdk';
import {tuiItemsHandlersProvider, TuiTextfield} from '@taiga-ui/core';
import {
    tuiCreateTimePeriods,
    TuiDataListWrapper,
    TuiFilterByInputPipe,
    TuiInputTime,
} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [
        FormsModule,
        TuiDataListWrapper,
        TuiFilterByInputPipe,
        TuiInputTime,
        TuiTextfield,
    ],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
    providers: [
        /**
         * You can also use input props of `Textfield`
         * (they will have more priority):
         * ```html
         * <tui-textfield
         *     [identityMatcher]="..."
         *     [stringify]="..."
         * />
         * ```
         */
        tuiItemsHandlersProvider({
            stringify: signal((x: TuiTime) => x.toString('HH:MM')),
            identityMatcher: signal(
                (a: TuiTime | null, b: TuiTime | null) => a?.valueOf() === b?.valueOf(),
            ),
            // disabledItemHandler: signal((x: TuiTime) => x.hours > 18),
        }),
    ],
})
export default class Example {
    protected value: TuiTime | null = null;
    protected items: readonly TuiTime[] = [
        new TuiTime(16, 20),
        new TuiTime(16, 45),
        new TuiTime(17, 0),
        ...tuiCreateTimePeriods(18, 20, [0, 15, 30, 45]),
    ];

    protected readonly disabledItemHandler: TuiBooleanHandler<TuiTime> = (x) =>
        x?.valueOf() === this.items[0]!.valueOf();

    protected readonly matcher: TuiStringMatcher<TuiTime> = (item, query) =>
        item.toString('HH:MM').startsWith(query);
}
```

#### Transformer

TuiValueTransformer is a great opportunity to override default form control's value format without breaking component's internal logic. This example demonstrates how to use string -type instead of default TuiTime .

**Template:**
```html
<tui-textfield>
<input placeholder="Enter time" tuiInputTime [(ngModel)]="value" />
</tui-textfield>
<p><strong>Control value:</strong></p>
<code>{{ value | json }}</code>
```
**TypeScript:**
```ts
import {JsonPipe} from '@angular/common';
import {Component} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiTime} from '@taiga-ui/cdk';
import {TuiTextfield} from '@taiga-ui/core';
import {TuiInputTime, tuiInputTimeOptionsProvider} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [FormsModule, JsonPipe, TuiInputTime, TuiTextfield],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
    providers: [
        tuiInputTimeOptionsProvider({
            valueTransformer: {
                fromControlValue(controlValue: string): TuiTime | null {
                    return controlValue ? TuiTime.fromString(controlValue) : null;
                },
                toControlValue(time: TuiTime | null): string {
                    return time ? time.toString() : '';
                },
            },
        }),
    ],
})
export default class Example {
    protected value = '';
}
```

#### Native picker

Add type="time" for &lt;input /&gt; to enable built-in browser picker for mobile devices . Touch clock icon to show the picker. Touch other parts of the textfield to show mobile device keyboard. Browser support limitations! IOS devices supports only HH:MM mode. Native picker supports only 24-hour format.

**Template:**
```html
<tui-textfield *ngFor="let mode of supportedModes">
<label tuiLabel>{{ mode }}</label>
<input tuiInputTime type="time" [mode]="mode" [ngModel]="initialValue" />
</tui-textfield>
```
**TypeScript:**
```ts
import {NgFor} from '@angular/common';
import {Component} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiTime, type TuiTimeMode} from '@taiga-ui/cdk';
import {TuiTextfield} from '@taiga-ui/core';
import {TuiInputTime} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [FormsModule, NgFor, TuiInputTime, TuiTextfield],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly supportedModes: readonly TuiTimeMode[] = [
        'HH:MM',
        'HH:MM AA',
        'HH:MM:SS',
        'HH:MM:SS AA',
        'HH:MM:SS.MSS',
        'HH:MM:SS.MSS AA',
    ];

    protected readonly initialValue = new TuiTime(23, 59, 59, 999);
}
```


### TypeScript

```ts
import {Component} from '@angular/core';
import {FormControl, ReactiveFormsModule} from '@angular/forms';
import {TuiDocControl} from '@demo/components/control';
import {TuiDocTextfield} from '@demo/components/textfield';
import {changeDetection} from '@demo/emulate/change-detection';
import {DemoRoute} from '@demo/routes';
import {TuiDemo} from '@demo/utils';
import {type MaskitoTimeMode} from '@maskito/kit';
import {TuiTime} from '@taiga-ui/cdk';
import {TuiTextfield} from '@taiga-ui/core';
import {TuiInputTime} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [
        ReactiveFormsModule,
        TuiDemo,
        TuiDocControl,
        TuiDocTextfield,
        TuiInputTime,
        TuiTextfield,
    ],
    templateUrl: './index.html',
    changeDetection,
})
export default class PageComponent {
    protected readonly routes = DemoRoute;
    protected readonly control = new FormControl(null);

    protected readonly modeVariants = [
        'HH:MM',
        'HH:MM AA',
        'HH:MM:SS',
        'HH:MM:SS AA',
        'HH:MM:SS.MSS',
        'HH:MM:SS.MSS AA',
        'MM:SS',
    ] as const satisfies readonly MaskitoTimeMode[];

    protected readonly acceptVariants = [
        [],
        [12, 13, 14, 15, 16, 17, 18].map((x) => new TuiTime(x, 0)),
    ] as const satisfies ReadonlyArray<readonly TuiTime[]>;

    protected mode: MaskitoTimeMode = this.modeVariants[0];
    protected accept: readonly TuiTime[] = this.acceptVariants[0];
    protected prefix = '';
    protected postfix = '';
}
```

---
# components/InputYear
- **Package**: `KIT`
- **Type**: components
Component to input a single year

### How to Use (Import)

```ts
import {FormsModule} from '@angular/forms';
import {TuiTextfield} from '@taiga-ui/core';
import {TuiInputYear} from '@taiga-ui/kit';

// ...

@Component({
  standalone: true,
  imports: [
    // ...
    FormsModule,
    TuiTextfield,
    TuiInputYear,
  ],
})
export class Example {
  value: number | null = null;
}
```

### How to Use (Template)

```html
<tui-textfield>
  <input
    tuiInputYear
    [(ngModel)]="value"
  />
  <tui-calendar-year *tuiTextfieldDropdown />
</tui-textfield>
```

### Example

```html
<ng-template>
<tui-textfield [disabledItemHandler]="itemsHandlers.disabledItemHandler()" [tuiDropdownAlign]="dropdown.align" [tuiDropdownAppearance]="dropdown.appearance" [tuiDropdownDirection]="dropdown.direction" [tuiDropdownMaxHeight]="dropdown.maxHeight" [tuiDropdownMinHeight]="dropdown.minHeight" [tuiDropdownOffset]="dropdown.offset" [tuiTextfieldCleaner]="textfieldDoc.cleaner" [tuiTextfieldSize]="textfieldDoc.size" >
<input placeholder="Put your birthday" tuiInputYear [formControl]="control" [invalid]="controlDoc.invalid" [max]="max" [min]="min" [readOnly]="controlDoc.readonly" [tuiDisabled]="controlDoc.disabled" />
<tui-calendar-year *tuiTextfieldDropdown />
</tui-textfield>
</ng-template>
```

### API

| Property | Type | Description |
|----------|-----|----------|
| [min] | `number` | Minimum year |
| [max] | `number` | Maximum year |

### Usage Examples

#### Basic

**Template:**
```html
<tui-textfield>
<label tuiLabel>Choose a year</label>
<input placeholder="Not 2022 please" tuiInputYear [(ngModel)]="value" />
<tui-calendar-year *tuiTextfieldDropdown />
</tui-textfield>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiTextfield} from '@taiga-ui/core';
import {TuiInputYear} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [FormsModule, TuiInputYear, TuiTextfield],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    protected value: number | null = null;
}
```

#### Limits

**Template:**
```html
<tui-textfield [disabledItemHandler]="disabledHandler">
<label tuiLabel>Choose a year</label>
<input tuiInputYear [max]="2025" [min]="2018" [(ngModel)]="value" />
<tui-calendar-year *tuiTextfieldDropdown />
</tui-textfield>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {type TuiBooleanHandler} from '@taiga-ui/cdk';
import {TuiTextfield} from '@taiga-ui/core';
import {TuiInputYear} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [FormsModule, TuiInputYear, TuiTextfield],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    protected value: number | null = null;

    protected readonly disabledHandler: TuiBooleanHandler<number> = (value) =>
        [2020, 2022].includes(value);
}
```

#### Transformer

**Template:**
```html
<tui-textfield>
<label tuiLabel>Choose a year</label>
<input tuiInputYear [(ngModel)]="value" />
<tui-calendar-year *tuiTextfieldDropdown />
</tui-textfield>
<p> Control value: <code>{{ value }}</code>
</p>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiYear} from '@taiga-ui/cdk';
import {TuiTextfield} from '@taiga-ui/core';
import {tuiInputInputYearOptionsProvider, TuiInputYear} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [FormsModule, TuiInputYear, TuiTextfield],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
    providers: [
        tuiInputInputYearOptionsProvider({
            valueTransformer: {
                fromControlValue: (date: TuiYear | null): number | null =>
                    date?.year ?? null,
                toControlValue: (year: number | null): TuiYear | null =>
                    typeof year === 'number' ? new TuiYear(year) : null,
            },
        }),
    ],
})
export default class Example {
    protected value: TuiYear | null = new TuiYear(new Date().getFullYear());
}
```


### TypeScript

```ts
import {Component} from '@angular/core';
import {FormControl, FormsModule, ReactiveFormsModule, Validators} from '@angular/forms';
import {TuiDocControl} from '@demo/components/control';
import {TuiDocDropdown} from '@demo/components/dropdown';
import {TuiDocItemsHandlers} from '@demo/components/items-handlers';
import {TuiDocTextfield} from '@demo/components/textfield';
import {changeDetection} from '@demo/emulate/change-detection';
import {DemoRoute} from '@demo/routes';
import {TuiDemo} from '@demo/utils';
import {TUI_FIRST_DAY, TUI_LAST_DAY} from '@taiga-ui/cdk';
import {TuiDropdown, TuiTextfield} from '@taiga-ui/core';
import {TuiInputYear} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [
        FormsModule,
        ReactiveFormsModule,
        TuiDemo,
        TuiDocControl,
        TuiDocDropdown,
        TuiDocItemsHandlers,
        TuiDocTextfield,
        TuiDropdown,
        TuiInputYear,
        TuiTextfield,
    ],
    templateUrl: './index.html',
    changeDetection,
})
export default class PageComponent {
    protected readonly examples = ['Basic', 'Limits', 'Transformer'];

    protected readonly value = new FormControl<number | null>(null);
    protected readonly minVariants = [TUI_FIRST_DAY.year, 2019, 2007];
    protected readonly maxVariants = [TUI_LAST_DAY.year, 2020, 2023];
    protected min = this.minVariants[0]!;
    protected max = this.maxVariants[0]!;
    protected readonly routes = DemoRoute;

    public control = new FormControl<number | null>(null, Validators.required);
    protected readonly handler = (year: number): boolean => year % 3 === 0;
}
```

---
# components/ItemGroup
- **Package**: `LAYOUT`
- **Type**: components

### How to Use (Import)

```ts
import {Component} from '@angular/core';
import {TuiItemGroup} from '@taiga-ui/layout';
// ...

@Component({
  imports: [
    // ...
    TuiItemGroup,
  ],
})
export class Example {}
```

### How to Use (Template)

```html
<div tuiItemGroup>
  <tui-chip appearance="primary">{{ value }}</tui-chip>
</div>
```

### Example

```html
<div tuiItemGroup [autoscroll]="autoscroll" [horizontal]="horizontal" >
<label *ngFor="let chip of chips" tuiChip [appearance]="chip === selected ? 'accent' : 'neutral'" > {{ chip }} <input appearance="" name="radio" tuiChip type="radio" [value]="chip" [(ngModel)]="selected" />
</label>
</div>
```

### API

| Property | Type | Description |
|----------|-----|----------|
| horizontal | `boolean` | Horizontal layout (for mobile devices) |
| autoscroll | `boolean` | Enable scrolling to selected chip (for interactive chips in horizontal layout) |

### Usage Examples

#### Basic

**Template:**
```html
<div tuiItemGroup>
<tui-chip *ngFor="let chip of chips">{{ chip }}</tui-chip>
</div>
```
**TypeScript:**
```ts
import {NgForOf} from '@angular/common';
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiChip} from '@taiga-ui/kit';
import {TuiItemGroup} from '@taiga-ui/layout';

@Component({
    standalone: true,
    imports: [NgForOf, TuiChip, TuiItemGroup],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly chips = [
        'Indian cuisine',
        'Wi-Fi',
        'Free parking',
        'Pets allowed',
        'Pool',
        'Air conditioning',
        'Breakfast',
        'Gym',
        'Kitchen',
        'Laundry',
        'Luggage storage',
        'Outdoor seating',
        'Room service',
        'Smoking allowed',
    ];
}
```

#### Single choice

**Template:**
```html
<div tuiPlatform="ios">
<div tuiItemGroup [autoscroll]="true" [horizontal]="true" >
<label *ngFor="let chip of chips" tuiChip [appearance]="chip === selected ? 'accent' : 'neutral'" > {{ chip }} <input appearance="" name="radio" tuiChip type="radio" [value]="chip" [(ngModel)]="selected" />
</label>
</div>
</div>
```
**TypeScript:**
```ts
import {NgForOf} from '@angular/common';
import {Component} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiPlatform} from '@taiga-ui/cdk';
import {TuiChip} from '@taiga-ui/kit';
import {TuiItemGroup} from '@taiga-ui/layout';

@Component({
    standalone: true,
    imports: [FormsModule, NgForOf, TuiChip, TuiItemGroup, TuiPlatform],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly chips = [
        'Indian cuisine',
        'Wi-Fi',
        'Free parking',
        'Pets allowed',
        'Pool',
        'Air conditioning',
        'Breakfast',
        'Gym',
        'Kitchen',
        'Laundry',
        'Luggage storage',
        'Outdoor seating',
        'Room service',
        'Smoking allowed',
    ];

    protected selected = 'Wi-Fi';
}
```

#### Multiple choice

**Template:**
```html
<div tuiItemGroup [horizontal]="true" >
<label *ngFor="let chip of chips; let i = index" tuiChip [appearance]="checked[i] ? 'accent' : 'neutral'" > {{ chip }} <input appearance="" tuiChip type="checkbox" [(ngModel)]="checked[i]" />
</label>
</div>
```
**TypeScript:**
```ts
import {NgForOf} from '@angular/common';
import {Component} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TUI_FALSE_HANDLER} from '@taiga-ui/cdk';
import {TuiChip} from '@taiga-ui/kit';
import {TuiItemGroup} from '@taiga-ui/layout';

@Component({
    standalone: true,
    imports: [FormsModule, NgForOf, TuiChip, TuiItemGroup],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly chips = [
        'Indian cuisine',
        'Wi-Fi',
        'Free parking',
        'Pets allowed',
        'Pool',
        'Air conditioning',
        'Breakfast',
        'Gym',
        'Kitchen',
        'Laundry',
        'Luggage storage',
        'Outdoor seating',
        'Room service',
        'Smoking allowed',
    ];

    protected checked = this.chips.map(TUI_FALSE_HANDLER);
}
```

#### With more

**Template:**
```html
<div tuiItemGroup>
<tui-items-with-more [linesLimit]="linesLimit">
<ng-container *ngFor="let chip of chips">
<label *tuiItem tuiChip [appearance]="chip === selected ? 'accent' : 'neutral'" > {{ chip }} <input appearance="" name="radio" tuiChip type="radio" [value]="chip" [(ngModel)]="selected" />
</label>
</ng-container>
<ng-template let-index tuiMore >
<button appearance="neutral" iconEnd="@tui.chevron-down" size="s" tuiChip type="button" class="more" (click)="linesLimit = 100" > More {{ chips.length - index - 1 }} </button>
</ng-template>
</tui-items-with-more>
</div>
```
**TypeScript:**
```ts
import {NgForOf} from '@angular/common';
import {Component} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiChip, TuiItemsWithMore} from '@taiga-ui/kit';
import {TuiItemGroup} from '@taiga-ui/layout';

@Component({
    standalone: true,
    imports: [FormsModule, NgForOf, TuiChip, TuiItemGroup, TuiItemsWithMore],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected linesLimit = 2;

    protected readonly chips = [
        'Indian cuisine',
        'Wi-Fi',
        'Free parking',
        'Pets allowed',
        'Pool',
        'Air conditioning',
        'Breakfast',
        'Gym',
        'Kitchen',
        'Laundry',
        'Luggage storage',
        'Outdoor seating',
        'Room service',
        'Smoking allowed',
    ];

    protected selected = 'Wi-Fi';
}
```


### TypeScript

```ts
import {Component} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {TuiDemo} from '@demo/utils';
import {TuiChip} from '@taiga-ui/kit';
import {TuiItemGroup} from '@taiga-ui/layout';

@Component({
    standalone: true,
    selector: 'example-chip',
    imports: [FormsModule, TuiChip, TuiDemo, TuiItemGroup],
    templateUrl: './index.html',
    changeDetection,
})
export default class Example {
    protected readonly examples = [
        'Basic',
        'Single choice',
        'Multiple choice',
        'With more',
    ];

    protected readonly chips = [
        'Indian cuisine',
        'Wi-Fi',
        'Free parking',
        'Pets allowed',
        'Pool',
        'Air conditioning',
        'Breakfast',
        'Gym',
        'Kitchen',
        'Laundry',
        'Luggage storage',
        'Outdoor seating',
        'Room service',
        'Smoking allowed',
    ];

    protected selected = this.chips[7];
    protected horizontal = false;
    protected autoscroll = false;
}
```

---
# components/ItemsWithMore
- **Package**: `KIT`
- **Type**: components
Component to hide overflown items behind custom content.

        Resize the screen to see extra items disappear

### How to Use (Import)

```ts
import {TuiItemsWithMore} from '@taiga-ui/kit';

// ...

@Component({
  standalone: true,
  imports: [
    // ...
    TuiItemsWithMore,
  ],
  // ...
})
export class Example {}
```

### How to Use (Template)

```html
<tui-items-with-more>
  <ng-container *ngFor="let item of items">
    <span *tuiItem>{{ item }}</span>
  </ng-container>
  <ng-template
    tuiMore
    let-index
  >
    and {{ items.length - index - 1 }} more
  </ng-template>
</tui-items-with-more>
```

### Example

```html
<tui-items-with-more [itemsLimit]="itemsLimit" [linesLimit]="linesLimit" [required]="required" [side]="side" >
<ng-container *ngFor="let item of items">
<tui-chip *tuiItem class="tui-space_right-2 tui-space_vertical-1" > {{ item }} </tui-chip>
</ng-container>
<span *tuiMore class="tui-space_right-2 tui-space_vertical-1" >
<tui-chip appearance="secondary">and now!</tui-chip>
</span>
</tui-items-with-more>
```

### API

| Property | Type | Description |
|----------|-----|----------|
| [itemsLimit] | `number` | Artificial limit on visible items |
| [linesLimit] | `number` | Limit on visible lines |
| [required] | `number` | Index of an item that must remain visible |
| [side] | `number` | Side of the "See more" content (for one-line mode only) |

### Usage Examples

#### Basic

**Template:**
```html
<tui-items-with-more [required]="required">
<ng-container *ngFor="let item of items">
<tui-chip *tuiItem appearance="neutral" size="s" class="tui-space_right-1" > {{ item }} </tui-chip>
</ng-container>
<ng-template let-index tuiMore > and {{ getRemaining(index) }} more </ng-template>
</tui-items-with-more>
```
**TypeScript:**
```ts
import {NgForOf} from '@angular/common';
import {Component, inject} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiItem} from '@taiga-ui/cdk';
import {TuiChip, TuiItemsWithMore} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [NgForOf, TuiChip, TuiItem, TuiItemsWithMore],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Page {
    protected readonly items = inject<readonly string[]>('Pythons' as any);
    protected readonly required = 3;

    protected getRemaining(index: number): number {
        const offset = index < this.required ? index + 2 : index + 1;

        return this.items.length - offset;
    }
}
```

#### Dropdown

**Template:**
```html
<tui-items-with-more size="m" tuiGroup [collapsed]="true" >
<ng-container *ngFor="let item of items; let index = index">
<label *tuiItem appearance="" tuiBlock="m" [style.border-radius]="'inherit'" > {{ item }} <input tuiBlock type="checkbox" [(ngModel)]="value[index]" />
</label>
</ng-container>
<ng-template let-lastIndex tuiMore >
<button appearance="outline-grayscale" size="m" tuiButton tuiDropdownAlign="right" tuiDropdownOpen type="button" class="item" [tuiDropdown]="dropdown" > More <tui-badge>{{ items.length - lastIndex - 1 }}</tui-badge>
</button>
<ng-template #dropdown>
<tui-data-list size="l">
<ng-container *ngFor="let item of items; let index = index">
<button *ngIf="index > lastIndex" tuiOption type="button" (click)="value[index] = !value[index]" > {{ item }} <tui-icon icon="@tui.check" class="tui-space_left-2" [class._hidden]="!value[index]" />
</button>
</ng-container>
</tui-data-list>
</ng-template>
</ng-template>
</tui-items-with-more>
```
**TypeScript:**
```ts
import {NgForOf, NgIf} from '@angular/common';
import {Component, inject} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TUI_FALSE_HANDLER, TuiItem} from '@taiga-ui/cdk';
import {TuiButton, TuiDataList, TuiDropdown, TuiGroup, TuiIcon} from '@taiga-ui/core';
import {TuiBadge, TuiBlock, TuiItemsWithMore} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [
        FormsModule,
        NgForOf,
        NgIf,
        TuiBadge,
        TuiBlock,
        TuiButton,
        TuiDataList,
        TuiDropdown,
        TuiGroup,
        TuiIcon,
        TuiItem,
        TuiItemsWithMore,
    ],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Page {
    protected readonly items = inject<readonly string[]>('Pythons' as any);

    protected value = this.items.map(TUI_FALSE_HANDLER) as boolean[];
}
```

#### Side

**Template:**
```html
<tui-items-with-more side="start" [itemsLimit]="3" >
<ng-container *ngFor="let item of items; let first = first">
<ng-container *tuiItem>
<tui-icon *ngIf="!first" icon="@tui.chevron-right" [style.border-width.rem]="0.25" [style.opacity]="0.25" />
<button appearance="flat" size="xs" tuiButton type="button" > {{ item }} </button>
</ng-container>
</ng-container>
<ng-template let-index tuiMore >
<button appearance="flat" iconStart="@tui.ellipsis" size="xs" tuiDropdownOpen tuiIconButton type="button" [tuiDropdown]="dropdown" > More </button>
<ng-template #dropdown>
<tui-data-list size="s">
<ng-container *ngFor="let item of items; let i = index">
<button *ngIf="i < index" tuiOption type="button" > {{ item }} </button>
</ng-container>
</tui-data-list>
</ng-template>
</ng-template>
</tui-items-with-more>
```
**TypeScript:**
```ts
import {NgForOf, NgIf} from '@angular/common';
import {Component, inject} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiButton, TuiDataList, TuiDropdown, TuiIcon} from '@taiga-ui/core';
import {TuiItemsWithMore} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [
        NgForOf,
        NgIf,
        TuiButton,
        TuiDataList,
        TuiDropdown,
        TuiIcon,
        TuiItemsWithMore,
    ],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Page {
    protected readonly items = inject<readonly string[]>('Pythons' as any);
}
```

#### Multiline

**Template:**
```html
<tui-items-with-more class="container" [class.container_expanded]="linesLimit === 100" [linesLimit]="linesLimit" (lastIndexChange)="lastIndex = $event" >
<ng-container *ngFor="let item of items; let i = index">
<tui-chip *tuiItem appearance="neutral" size="s" class="item" [class.item_visible]="i <= lastIndex" > {{ item }} item </tui-chip>
</ng-container>
<ng-template let-index tuiMore >
<button appearance="neutral" iconEnd="@tui.chevron-down" size="s" tuiChip type="button" class="more" (click)="linesLimit = 100" > More {{ getRemaining(index) }} </button>
</ng-template>
</tui-items-with-more>
```
**TypeScript:**
```ts
import {NgForOf} from '@angular/common';
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiItem} from '@taiga-ui/cdk';
import {TuiChip, TuiItemsWithMore} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [NgForOf, TuiChip, TuiItem, TuiItemsWithMore],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Page {
    protected readonly items = [
        'one',
        'two',
        'three',
        'four',
        'five',
        'six',
        'seven',
        'eight',
        'nine',
        'ten',
        'eleven',
        'twelve',
    ];

    protected linesLimit = 2;
    protected lastIndex = Infinity;

    protected getRemaining(index: number): number {
        const offset = index + 1;

        return this.items.length - offset;
    }
}
```

#### Cell

**Template:**
```html
<tui-textfield tuiChevron [content]="content" [tuiTextfieldCleaner]="false" >
<input tuiSelect [(ngModel)]="value" />
<tui-data-list-wrapper *tuiTextfieldDropdown new [itemContent]="content" [items]="items" />
<ng-template #content let-item >
<span tuiCell>
<tui-avatar src="@tui.star" />
<span tuiTitle>
<tui-items-with-more tuiSubtitle>
<span *tuiItem>{{ item.name }}</span>
<span *tuiItem>&nbsp;• {{ item.number }}</span>
<div *tuiMore="let index">
<span *ngIf="index < 0">{{ item.name }}</span>
<span>&nbsp;*{{ item.number.slice(-4) }}</span>
</div>
</tui-items-with-more> ${{ item.value | tuiFormatNumber | async }} </span>
</span>
</ng-template>
</tui-textfield>
```
**TypeScript:**
```ts
import {AsyncPipe, NgIf} from '@angular/common';
import {Component} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiFormatNumberPipe, TuiTextfield, TuiTitle} from '@taiga-ui/core';
import {
    TuiAvatar,
    TuiChevron,
    TuiDataListWrapper,
    TuiItemsWithMore,
    TuiSelect,
} from '@taiga-ui/kit';
import {TuiCell} from '@taiga-ui/layout';

@Component({
    standalone: true,
    imports: [
        AsyncPipe,
        FormsModule,
        NgIf,
        TuiAvatar,
        TuiCell,
        TuiChevron,
        TuiDataListWrapper,
        TuiFormatNumberPipe,
        TuiItemsWithMore,
        TuiSelect,
        TuiTextfield,
        TuiTitle,
    ],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Page {
    protected readonly items = [
        {
            name: 'Very very long account name',
            number: '1234 5678 9101 2345',
            value: 12345678,
        },
        {
            name: 'Short title',
            number: '8888 8888 8888 8888',
            value: 237,
        },
        {
            name: 'Taiga UI is a super awesome library',
            number: '4444 3333 2222 1111',
            value: 76543,
        },
    ];

    protected value = this.items[0];
}
```


### TypeScript

```ts
import {Component, inject} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {DemoRoute} from '@demo/routes';
import {TuiDemo} from '@demo/utils';
import {TuiChip, TuiItemsWithMore} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [TuiChip, TuiDemo, TuiItemsWithMore],
    templateUrl: './index.html',
    changeDetection,
})
export default class Page {
    protected readonly routes = DemoRoute;
    protected readonly examples = ['Basic', 'Dropdown', 'Side', 'Multiline', 'Cell'];
    protected readonly items = inject<readonly string[]>('Pythons' as any);
    protected readonly requiredVariants = [-1, 2, 4];
    protected readonly itemsLimitVariants = [Infinity, 4, 2];
    protected readonly linesLimitVariants = [1, 2, Infinity];
    protected readonly sideVariants = ['start', 'end'] as const;
    protected side: 'end' | 'start' = this.sideVariants[1];
    protected required = this.requiredVariants[0]!;
    protected itemsLimit = this.itemsLimitVariants[0]!;
    protected linesLimit = this.linesLimitVariants[0]!;
}
```

---
# components/Label
- **Package**: `CORE`
- **Type**: components
Label is used to show text related to textfields, checkboxes, toggles and radio buttons

### How to Use (Import)

```ts
import {FormsModule} from '@angular/forms';
import {TuiLabel} from '@taiga-ui/core';
import {TuiCheckbox} from '@taiga-ui/kit';

// ...

@Component({
  standalone: true,
  imports: [
    // ...
    FormsModule,
    TuiCheckbox,
    TuiLabel,
  ],
  // ...
})
export class Example {}
```

### How to Use (Template)

```html
<label tuiLabel>
  <input
    tuiCheckbox
    type="checkbox"
    size="s"
    [(ngModel)]="selected"
  />
  Label text
</label>
```

### Usage Examples

#### Basic

**Template:**
```html
<form [formGroup]="testForm">
<label tuiLabel>
<input formControlName="testValue1" tuiCheckbox type="checkbox" />
<span tuiTitle> Taiga UI <span tuiSubtitle>Angular UI Kit for awesome people</span>
</span>
</label>
<label tuiLabel class="tui-space_vertical-2" >
<input formControlName="testValue2" tuiCheckbox type="checkbox" />
<span tuiTitle>
<span> ng-polymorpheus&nbsp; <tui-icon tuiTooltip="Our first open-source project" />
</span>
<span tuiSubtitle>A tiny library for polymorphic templates in Angular</span>
</span>
</label>
<label tuiLabel>
<input formControlName="testValue3" tuiCheckbox type="checkbox" />
<span tuiTitle> ng-dompurify <span tuiSubtitle>Inclusive Angular API for DOMPurify</span>
</span>
</label>
</form>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {FormControl, FormGroup, ReactiveFormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiIcon, TuiLabel, TuiTitle} from '@taiga-ui/core';
import {TuiCheckbox, TuiTooltip} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [ReactiveFormsModule, TuiCheckbox, TuiIcon, TuiLabel, TuiTitle, TuiTooltip],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    protected testForm = new FormGroup({
        testValue1: new FormControl(true),
        testValue2: new FormControl(false),
        testValue3: new FormControl(false),
    });
}
```

#### Small size

**Template:**
```html
<form [formGroup]="testForm">
<label tuiLabel>
<input formControlName="testValue" size="s" tuiRadio type="radio" value="taiga" />
<small>Taiga UI</small>
</label>
<label tuiLabel class="tui-space_vertical-2" >
<input formControlName="testValue" size="s" tuiRadio type="radio" value="polymorpheus" />
<small>ng-polymorpheus</small>
</label>
<label tuiLabel>
<input formControlName="testValue" size="s" tuiRadio type="radio" value="dompurify" />
<small>ng-dompurify</small>
</label>
</form>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {FormControl, FormGroup, ReactiveFormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiLabel} from '@taiga-ui/core';
import {TuiRadio} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [ReactiveFormsModule, TuiLabel, TuiRadio],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    protected testForm = new FormGroup({
        testValue: new FormControl(),
    });
}
```

#### Switch

**Template:**
```html
<form [formGroup]="testForm">
<label tuiLabel>
<input formControlName="testValue1" tuiSwitch type="checkbox" /> Taiga UI </label>
<label tuiLabel class="tui-space_vertical-2" >
<input formControlName="testValue2" tuiSwitch type="checkbox" /> ng-polymorpheus </label>
<label tuiLabel>
<input formControlName="testValue3" tuiSwitch type="checkbox" /> ng-dompurify </label>
</form>
<form class="tui-space_top-4" [formGroup]="testForm" >
<label tuiLabel>
<input formControlName="testValue1" size="s" tuiSwitch type="checkbox" />
<small>Taiga UI</small>
</label>
<label tuiLabel class="tui-space_vertical-2" >
<input formControlName="testValue2" size="s" tuiSwitch type="checkbox" />
<small>ng-polymorpheus</small>
</label>
<label tuiLabel>
<input formControlName="testValue3" size="s" tuiSwitch type="checkbox" />
<small>ng-dompurify</small>
</label>
</form>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {FormControl, FormGroup, ReactiveFormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiLabel} from '@taiga-ui/core';
import {TuiSwitch} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [ReactiveFormsModule, TuiLabel, TuiSwitch],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    protected testForm = new FormGroup({
        testValue1: new FormControl(true),
        testValue2: new FormControl(false),
        testValue3: new FormControl(false),
    });
}
```

#### Textfield

**Template:**
```html
<form [formGroup]="testForm">
<label tuiLabel> Label can be outside <tui-textfield>
<input formControlName="testValue" tuiTextfield />
</tui-textfield>
</label>
<tui-textfield class="tui-space_top-4">
<label tuiLabel>Or inside textfield</label>
<input formControlName="testValue" tuiTextfield />
</tui-textfield>
</form>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {FormControl, FormGroup, ReactiveFormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiTextfield} from '@taiga-ui/core';

@Component({
    standalone: true,
    imports: [ReactiveFormsModule, TuiTextfield],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    protected testForm = new FormGroup({
        testValue: new FormControl('Input value'),
    });
}
```


### TypeScript

```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {TuiDemo} from '@demo/utils';

@Component({
    standalone: true,
    imports: [TuiDemo],
    templateUrl: './index.html',
    changeDetection,
})
export default class Page {
    protected readonly examples = ['Basic', 'Small size', 'Switch', 'Textfield'];
}
```

---
# components/LegendItem
- **Package**: `ADDON-CHARTS`
- **Type**: components
A button for a legend of ring or pie charts

### How to Use (Import)

```ts
import {TuiLegendItem} from '@taiga-ui/addon-charts';

// ...

@Component({
  standalone: true,
  imports: [
    // ...
    TuiLegendItem,
  ],
  // ...
})
export class Example {}
```

### How to Use (Template)

```html
<tui-legend-item [value]="value">Content</tui-legend-item>
```

### Example

```html
<tui-legend-item [active]="active" [color]="color" [disabled]="disabled" [size]="size" [text]="text" >
<span>{{ 123456 | tuiAmount: 'RUB' | async }}</span>
</tui-legend-item>
<p>
<code>tuiAmount</code> pipe is used to format currency and fraction </p>
```

### API

| Property | Type | Description |
|----------|-----|----------|
| [active] | `boolean` | Active state from outside |
| [color] | `TuiColor | string | null` | Indicator color |
| [disabled] | `boolean` | Disabled item (i.e. hidden from the related chart) |
| [size] | `TuiSizeS` | Size |
| [value] | `string` | Text inside |

### Usage Examples

#### With a ring chart

**Template:**
```html
<div class="wrapper">
<tui-ring-chart [value]="value" [(activeItemIndex)]="activeItemIndex" >
<span>{{ sum | tuiAmount: 'RUB' | async }}</span>
<div>Total</div>
</tui-ring-chart>
<div class="legend">
<tui-legend-item *ngFor="let label of labels; let index = index" size="s" class="item" [active]="isItemActive(index)" [color]="'var(--tui-chart-categorical-' + index.toString().padStart(2, '0') + ')'" [text]="label" (tuiHoveredChange)="onHover(index, $event)" >
<span>{{ value[index] || 0 | tuiAmount: 'RUB' | async }}</span>
</tui-legend-item>
</div>
</div>
```
**TypeScript:**
```ts
import {AsyncPipe, NgForOf} from '@angular/common';
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiLegendItem, TuiRingChart} from '@taiga-ui/addon-charts';
import {TuiAmountPipe} from '@taiga-ui/addon-commerce';
import {TuiHovered, tuiSum} from '@taiga-ui/cdk';

@Component({
    standalone: true,
    imports: [AsyncPipe, NgForOf, TuiAmountPipe, TuiHovered, TuiLegendItem, TuiRingChart],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected activeItemIndex = NaN;

    protected readonly value = [13769, 12367, 10172, 3018, 2592];
    protected readonly sum = tuiSum(...this.value);
    protected readonly labels = ['Food', 'Cafe', 'OSS', 'Taxi', 'Other'];

    protected isItemActive(index: number): boolean {
        return this.activeItemIndex === index;
    }

    protected onHover(index: number, hovered: boolean): void {
        this.activeItemIndex = hovered ? index : NaN;
    }
}
```

#### Toggling

**Template:**
```html
<tui-notification> In case you need to be able to toggle a category by separate action, for example, if clicking on it should expand it for more details </tui-notification>
<div class="wrapper">
<tui-ring-chart size="s" class="chart" [value]="value" />
<div class="legend">
<tui-legend-item *ngFor="let label of labels; let index = index" #item class="item" [color]="'var(--tui-chart-categorical-' + index.toString().padStart(2, '0') + ')'" [disabled]="!isEnabled(index)" [text]="label" (click)="onClick(index)" (keydown.delete)="toggle(index)" >
<input size="s" tuiCheckbox type="checkbox" [checked]="!item.disabled" />
<span>{{ data[index] || 0 | tuiAmount: 'RUB' | async }}</span>
<tui-icon icon="@tui.x" class="disable" [class.disable_rotated]="item.disabled" (click.stop)="toggle(index)" />
</tui-legend-item>
</div>
</div>
```
**TypeScript:**
```ts
import {AsyncPipe, NgForOf} from '@angular/common';
import {Component, inject} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiLegendItem, TuiRingChart} from '@taiga-ui/addon-charts';
import {TuiAmountPipe} from '@taiga-ui/addon-commerce';
import {tuiPure, tuiSum} from '@taiga-ui/cdk';
import {TuiAlertService, tuiFormatNumber, TuiIcon, TuiNotification} from '@taiga-ui/core';
import {TuiCheckbox} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [
        AsyncPipe,
        NgForOf,
        TuiAmountPipe,
        TuiCheckbox,
        TuiIcon,
        TuiLegendItem,
        TuiNotification,
        TuiRingChart,
    ],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    private readonly alerts = inject(TuiAlertService);
    private enabled = new Array(5).fill(true);

    protected readonly data = [13769, 12367, 10172, 3018, 2592];
    protected readonly sum = tuiSum(...this.data);
    protected readonly labels = ['Axes', 'Faxes', 'Taxes', 'Saxes', 'Other'];

    protected get value(): readonly number[] {
        return this.getValue(this.data, this.enabled);
    }

    protected isEnabled(index: number): boolean {
        return this.enabled[index];
    }

    protected toggle(index: number): void {
        this.enabled = this.enabled.map((value, i) => (i === index ? !value : value));
    }

    protected onClick(index: number): void {
        if (this.isEnabled(index)) {
            this.alerts
                .open(`Category spending: ${tuiFormatNumber(this.data[index] ?? 0)} ₽`, {
                    label: this.labels[index],
                })
                .subscribe();
        } else {
            this.toggle(index);
        }
    }

    @tuiPure
    private getValue(
        data: readonly number[],
        enabled: readonly number[],
    ): readonly number[] {
        return data.map((value, index) => (enabled[index] ? value : 0));
    }
}
```


### TypeScript

```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {TuiDemo} from '@demo/utils';
import {TuiLegendItem} from '@taiga-ui/addon-charts';
import {TuiAmountPipe} from '@taiga-ui/addon-commerce';
import {type TuiSizeS} from '@taiga-ui/core';

@Component({
    standalone: true,
    imports: [TuiAmountPipe, TuiDemo, TuiLegendItem],
    templateUrl: './index.html',
    changeDetection,
})
export default class Page {
    protected text = 'Text inside';

    protected active = false;

    protected readonly sizeVariants: readonly TuiSizeS[] = ['s', 'm'];

    protected readonly colorVariants: readonly string[] = [
        'var(--tui-chart-categorical-04)',
        'var(--tui-background-accent-1)',
        'var(--tui-background-neutral-1)',
    ];

    protected size = this.sizeVariants[0]!;

    protected disabled = false;

    protected color = '';
}
```

---
# components/Like
- **Package**: `KIT`
- **Type**: components
A like component based on native checkbox with icons and custom color for icon when
            :checked
            state.

### How to Use (Import)

```ts
import {Component} from '@angular/core';
import {TuiLike} from '@taiga-ui/kit';
// ...

@Component({
  standalone: true,
  imports: [
    // ...
    TuiLike,
  ],
})
export class Example {}
```

### How to Use (Template)

```html
<input
  tuiLike
  type="checkbox"
/>
```

### Usage Examples

#### Basic

**Template:**
```html
<input tuiLike="var(--tui-status-negative)" type="checkbox" />
<input size="s" tuiLike type="checkbox" [checkedIcon]="'@tui.star-filled'" [uncheckedIcon]="'@tui.star'" />
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiLike} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [TuiLike],
    templateUrl: './index.html',
    styles: [':host { display: flex; gap: 1rem; align-items: center; }'],
    encapsulation,
    changeDetection,
})
export default class Example {}
```

#### Icons from DI

**Template:**
```html
<input tuiLike="var(--tui-status-warning)" type="checkbox" />
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiLike, tuiLikeOptionsProvider} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [TuiLike],
    templateUrl: './index.html',
    styles: [':host { display: flex; gap: 1rem; align-items: center; }'],
    encapsulation,
    changeDetection,
    providers: [
        tuiLikeOptionsProvider({
            icons: {unchecked: '@tui.star', checked: '@tui.star-filled'},
        }),
    ],
})
export default class Example {}
```

#### External icons

**Template:**
```html
<input tuiLike type="checkbox" />
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiLike, tuiLikeOptionsProvider} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [TuiLike],
    templateUrl: './index.html',
    styles: [':host { display: flex; gap: 1rem; align-items: center; }'],
    encapsulation,
    changeDetection,
    providers: [
        tuiLikeOptionsProvider({
            icons: {
                unchecked:
                    'https://raw.githubusercontent.com/MarsiBarsi/readme-icons/main/github.svg',
                checked: 'https://cdn-icons-png.flaticon.com/64/12710/12710759.png',
            },
        }),
    ],
})
export default class Example {}
```

#### Other appearances

**Template:**
```html
<input *ngFor="let appearance of appearances" tuiLike type="checkbox" [appearance]="appearance" />
```
**TypeScript:**
```ts
import {NgForOf} from '@angular/common';
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiLike} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [NgForOf, TuiLike],
    templateUrl: './index.html',
    styles: [':host { display: flex; gap: 1rem; align-items: center; }'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly appearances = ['negative', 'positive', 'warning', 'flat'] as const;
}
```

#### With forms

**Template:**
```html
<div>
<p class="tui-text_body-xl">NgModel</p>
<input tuiLike="var(--tui-status-negative)" type="checkbox" [(ngModel)]="liked" />
<p class="tui-text_body-m-2">Liked: {{ liked }}</p>
</div>
<div>
<p class="tui-text_body-xl">Reactive form</p>
<form [formGroup]="likeForm">
<input formControlName="liked" tuiLike="var(--tui-status-negative)" type="checkbox" />
</form>
<p class="tui-text_body-m-2">Liked: {{ likeForm.value.liked }}</p>
</div>
<button size="m" tuiButton type="button" [style.width.%]="100" (click)="changeValue()" > Toggle </button>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {FormControl, FormGroup, FormsModule, ReactiveFormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiButton} from '@taiga-ui/core';
import {TuiLike} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [FormsModule, ReactiveFormsModule, TuiButton, TuiLike],
    templateUrl: './index.html',
    styles: [
        ':host { display: flex; column-gap: 3rem; justify-content: space-between; flex-wrap: wrap; }',
    ],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected liked = false;

    protected likeForm = new FormGroup({
        liked: new FormControl(false),
    });

    protected changeValue(): void {
        this.liked = !this.liked;
        this.likeForm.setValue({liked: !this.likeForm.value.liked});
    }
}
```


### TypeScript

```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {TuiDemo} from '@demo/utils';

@Component({
    standalone: true,
    imports: [TuiDemo],
    templateUrl: './index.html',
    changeDetection,
})
export default class Page {
    protected readonly examples = [
        'Basic',
        'Icons from DI',
        'External icons',
        'Other appearances',
        'With forms',
    ];
}
```

---
# components/LineChart
- **Package**: `ADDON-CHARTS`
- **Type**: components

### How to Use (Import)

```ts
import {TuiLineChart} from '@taiga-ui/addon-charts';

// ...

@Component({
  standalone: true,
  imports: [
    // ...
    TuiLineChart,
  ],
  // ...
})
export class Example {}
```

### How to Use (Template)

```html
<tui-line-chart
  [x]="0"
  [y]="0"
  [width]="200"
  [height]="100"
  [value]="value"
></tui-line-chart>
```

### Example

```html
<tui-axes class="axes" [horizontalLines]="2" [verticalLines]="4" >
<tui-line-chart [dots]="dots" [filled]="filled" [height]="height" [smoothingFactor]="smoothingFactor" [value]="value" [width]="width" [x]="x" [xStringify]="xStringify" [y]="y" [yStringify]="yStringify" />
</tui-axes>
```

### API

| Property | Type | Description |
|----------|-----|----------|
| [dots] | `boolean` | Show dots on chart |
| [filled] | `boolean` | Filled with gradient |
| [height] | `number` | Axis Y range, pixel scale is 1:1 |
| [y] | `number` | Start of Y axis |
| [width] | `number` | Axis X range, pixel scale is 1:1 |
| [x] | `number` | Start of X axis |
| [smoothingFactor] | `number` | Smoothing factor from 0 to 99 |
| [value] | `TuiPoint[]` | Array of data |
| [xStringify] | `TuiStringHandler<number> | null` | Function to stringify a value number to a string in axis X hint |
| [yStringify] | `TuiStringHandler<number> | null` | Function to stringify a value number to a string in axis Y hint |

### Usage Examples

#### Line

**Template:**
```html
<tui-axes class="axes" [horizontalLines]="2" [tuiLineChartHint]="hintContent" [verticalLines]="4" >
<tui-line-chart [dots]="true" [height]="200" [value]="value" [width]="400" [x]="0" [xStringify]="stringify" [y]="0" [yStringify]="stringify" />
</tui-axes>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiAxes, TuiLineChart, TuiLineChartHint} from '@taiga-ui/addon-charts';
import {type TuiContext} from '@taiga-ui/cdk';
import {type TuiPoint} from '@taiga-ui/core';

@Component({
    standalone: true,
    imports: [TuiAxes, TuiLineChart, TuiLineChartHint],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly value: readonly TuiPoint[] = [
        [50, 50],
        [100, 75],
        [150, 50],
        [200, 150],
        [250, 155],
        [300, 190],
        [350, 90],
    ];

    protected readonly stringify = String;

    protected readonly hintContent = ({
        $implicit,
    }: TuiContext<readonly TuiPoint[]>): number => $implicit[0]?.[1] ?? 0;
}
```

#### Smooth

**Template:**
```html
<tui-axes class="axes" [horizontalLines]="2" [verticalLines]="4" >
<tui-line-chart [filled]="true" [height]="200" [smoothingFactor]="50" [value]="value" [width]="400" [x]="0" [y]="0" />
</tui-axes>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiAxes, TuiLineChart} from '@taiga-ui/addon-charts';
import {type TuiPoint} from '@taiga-ui/core';

@Component({
    standalone: true,
    imports: [TuiAxes, TuiLineChart],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly value: readonly TuiPoint[] = [
        [50, 50],
        [100, 75],
        [150, 50],
        [200, 150],
        [250, 155],
        [300, 190],
        [350, 90],
    ];
}
```

#### Dotted

**Template:**
```html
<tui-axes class="axes" [horizontalLines]="2" [verticalLines]="4" >
<tui-line-chart class="chart chart_dotted" [dots]="true" [height]="200" [value]="dotted" [width]="400" [x]="0" [y]="0" />
<tui-line-chart class="chart" [dots]="true" [height]="200" [value]="solid" [width]="400" [x]="0" [y]="0" />
<tui-line-chart class="chart chart_dashed" [dots]="true" [height]="200" [value]="dashed" [width]="400" [x]="0" [y]="0" />
</tui-axes>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiAxes, TuiLineChart} from '@taiga-ui/addon-charts';
import {type TuiPoint} from '@taiga-ui/core';

@Component({
    standalone: true,
    imports: [TuiAxes, TuiLineChart],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly dotted: readonly TuiPoint[] = [
        [50, 50],
        [100, 75],
        [150, 50],
    ];

    protected readonly solid: readonly TuiPoint[] = [
        [150, 50],
        [200, 150],
        [250, 155],
    ];

    protected readonly dashed: readonly TuiPoint[] = [
        [250, 155],
        [300, 190],
        [350, 90],
    ];
}
```

#### Hint

**Template:**
```html
<tui-axes class="axes" [horizontalLines]="2" [verticalLines]="4" >
<tui-line-chart [height]="200" [tuiHintContent]="hint" [value]="value" [width]="400" [x]="0" [y]="0" />
</tui-axes>
<tui-axes class="axes tui-space_top-10" [horizontalLines]="2" [verticalLines]="4" >
<tui-line-chart tuiHintAppearance="error" [dots]="true" [height]="200" [tuiHintContent]="hintContent" [value]="singleValue" [width]="400" [x]="0" [y]="0" />
</tui-axes>
<ng-template #hintContent let-index="index" let-value >
<div>Vertical: {{ value[0] }}</div>
<div>Horizontal: {{ value[1] }}</div>
<div>index: {{ index }}</div>
</ng-template>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiAxes, TuiLineChart} from '@taiga-ui/addon-charts';
import {type TuiContext, type TuiStringHandler} from '@taiga-ui/cdk';
import {TuiHint, type TuiPoint} from '@taiga-ui/core';

@Component({
    standalone: true,
    imports: [TuiAxes, TuiHint, TuiLineChart],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly value: TuiPoint[] = [
        [50, 50],
        [100, 75],
        [150, 50],
        [200, 150],
        [250, 155],
        [300, 190],
        [350, 90],
    ];

    protected readonly singleValue: TuiPoint[] = [[200, 150]];

    protected readonly hint: TuiStringHandler<TuiContext<TuiPoint>> = ({$implicit}) =>
        `Vertical: ${$implicit[1]}\nHorizontal: ${$implicit[0]}`;
}
```

#### Several lines with hints

**Template:**
```html
<tui-axes class="axes" [horizontalLines]="2" [tuiLineChartHint]="hint" [verticalLines]="4" >
<tui-line-chart *ngFor="let value of values" class="chart" [height]="200" [value]="value" [width]="400" [x]="0" [y]="0" />
</tui-axes>
```
**TypeScript:**
```ts
import {NgForOf} from '@angular/common';
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiAxes, TuiLineChart, TuiLineChartHint} from '@taiga-ui/addon-charts';
import {type TuiContext, type TuiStringHandler} from '@taiga-ui/cdk';
import {type TuiPoint} from '@taiga-ui/core';

@Component({
    standalone: true,
    imports: [NgForOf, TuiAxes, TuiLineChart, TuiLineChartHint],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly values: TuiPoint[][] = [
        [
            [50, 50],
            [100, 75],
            [150, 50],
            [200, 150],
            [250, 155],
            [300, 190],
            [350, 90],
        ],
        [
            [50, 40],
            [100, 60],
            [150, 90],
            [200, 120],
            [250, 150],
            [300, 110],
            [350, 130],
        ],
        [
            [50, 0],
            [100, 0],
            [150, 80],
            [200, 50],
            [250, 130],
            [300, 200],
            [350, 200],
        ],
    ];

    protected readonly hint: TuiStringHandler<TuiContext<readonly TuiPoint[]>> = ({
        $implicit,
    }) => `${$implicit[0]?.[0]} items:\n\n${$implicit.map(([_, y]) => y).join('$\n')}$`;
}
```


### TypeScript

```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {TuiDemo} from '@demo/utils';
import {TuiAxes, TuiLineChart} from '@taiga-ui/addon-charts';
import {type TuiStringHandler} from '@taiga-ui/cdk';
import {type TuiPoint} from '@taiga-ui/core';

@Component({
    standalone: true,
    imports: [TuiAxes, TuiDemo, TuiLineChart],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    changeDetection,
})
export default class Page {
    protected readonly examples = [
        'Line',
        'Smooth',
        'Dotted',
        'Hint',
        'Several lines with hints',
    ];

    protected readonly value: readonly TuiPoint[] = [
        [50, 50],
        [100, 75],
        [150, 50],
        [200, 150],
        [250, 155],
        [300, 190],
        [350, 90],
    ];

    protected readonly yStringifyVariants: ReadonlyArray<TuiStringHandler<number>> = [
        (y) => `${(10 * y).toLocaleString('ru-RU', {maximumFractionDigits: 0})} $`,
    ];

    protected readonly xStringifyVariants: ReadonlyArray<TuiStringHandler<number>> = [
        (x) => `${100 * x}`,
    ];

    protected yStringify: TuiStringHandler<number> | null = null;

    protected xStringify: TuiStringHandler<number> | null = null;

    protected x = 0;

    protected y = 0;

    protected width = 400;

    protected height = 200;

    protected smoothingFactor = 0;

    protected filled = false;

    protected dots = false;
}
```

### LESS

```less
.axes {
    block-size: 12.5rem;
    inline-size: 25rem;
    color: #bc71c9;
}
```

---
# components/LineClamp
- **Package**: `KIT`
- **Type**: components
Component cuts overflown text with "..." and shows it by hover

### How to Use (Import)

```ts
import {TuiLineClamp} from '@taiga-ui/kit';

// ...

@Component({
  standalone: true,
  imports: [
    // ...
    TuiLineClamp,
  ],
  // ...
})
export class Example {}
```

### How to Use (Template)

```html
<tui-line-clamp
  [content]="content"
  [linesLimit]="3"
></tui-line-clamp>
<ng-template #content>
  Lorem ipsum
  <br />
  Gaudeamus igitur
  <br />
  <strong>Carpe diem</strong>
  <br />
  Veni, vidi, vici
</ng-template>
```

### Example

```html
<tui-line-clamp [content]="content || defaultExampleContent" [lineHeight]="lineHeight" [linesLimit]="linesLimit" [style.maxWidth.px]="maxWidth" (overflownChange)="overflownChange.emitEvent($event)" />
<ng-template #defaultExampleContent> Lorem ipsum <br /> Gaudeamus igitur <br />
<strong>Carpe diem</strong>
<br /> Veni, vidi, vici </ng-template>
```

### API

| Property | Type | Description |
|----------|-----|----------|
| [content] | `PolymorpheusContent` | Content |
| [lineHeight] | `number` | Height of single line. It used to limit component's height. |
| [linesLimit] | `number` | Number of visible lines |
| [style.max-width.px] | `number` | Value of max-width |
| (overflownChange) | `boolean` | when all content is visible. |

### Usage Examples

#### Styles change

**Template:**
```html
<div class="island">
<tui-line-clamp [content]="daenerys" [lineHeight]="20" [linesLimit]="2" />
</div>
<tui-notification class="tui-space_bottom-4"> Use <code>white-space: nowrap</code> to expand to the right </tui-notification>
<div class="island">
<tui-line-clamp [content]="mormont" [lineHeight]="20" [linesLimit]="1" />
</div>
<ng-template #daenerys>
<div class="hint"> Daenerys of the House Targaryen, the First of Her Name, The Unburnt, Queen of the Andals, the Rhoynar and the First Men, Queen of Meereen, Khaleesi of the Great Grass Sea, Protector of the Realm, Lady Regent of the Seven Kingdoms, Breaker of Chains and Mother of Dragons </div>
</ng-template>
<ng-template #mormont>
<div class="hint no-wrap">Jorah Mormont of House Mormont, Lord of Bear Island</div>
</ng-template>
<div class="island">
<tui-line-clamp [content]="content" />
<ng-template #content>
<tui-chip appearance="negative" size="xxs" > DRAFT </tui-chip> Davis, Julia </ng-template>
</div>
<div *ngIf="value$ | async as value; else loading" class="wrapper" >
<div class="result">
<div class="content">
<tui-line-clamp [content]="value" [lineHeight]="20" [linesLimit]="1" />
</div>
</div>
</div>
<ng-template #loading>Loading...</ng-template>
```
**TypeScript:**
```ts
import {AsyncPipe, NgIf} from '@angular/common';
import {Component, inject} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TUI_IS_E2E, tuiWatch} from '@taiga-ui/cdk';
import {TuiNotification} from '@taiga-ui/core';
import {TuiChip, TuiLineClamp} from '@taiga-ui/kit';
import {map, timer} from 'rxjs';

@Component({
    standalone: true,
    imports: [AsyncPipe, NgIf, TuiChip, TuiLineClamp, TuiNotification],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    private readonly isE2E = inject(TUI_IS_E2E);

    protected value$ = timer(this.isE2E ? 0 : 4000).pipe(
        map(() => `${'async fake value, '.repeat(10)}end!`),
        tuiWatch(),
    );
}
```

#### Expanding

**Template:**
```html
<div class="island">
<tui-line-clamp content="Daenerys of the House Targaryen, the First of Her Name, The Unburnt, Queen of the Andals, the Rhoynar and the First Men, Queen of Meereen, Khaleesi of the Great Grass Sea, Protector of the Realm, Lady Regent of the Seven Kingdoms, Breaker of Chains and Mother of Dragons" class="clamp" [linesLimit]="linesLimit" />
<button tuiButton type="button" class="tui-space_top-4" (click)="toggle()" > Toggle </button>
</div>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiButton} from '@taiga-ui/core';
import {TuiLineClamp} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [TuiButton, TuiLineClamp],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected linesLimit = 2;

    protected toggle(): void {
        this.linesLimit = this.collapsed ? 12 : 2;
    }

    private get collapsed(): boolean {
        return this.linesLimit === 2;
    }
}
```

#### Resize parent container

**Template:**
```html
<div class="example">
<div #parent class="line-clamp-box" (waResizeObserver)="onResize(parent)" >
<tui-line-clamp class="line-clamp" [content]="content" [lineHeight]="lineHeight || getDynamicLineHeight(parent)" [linesLimit]="lineLimit || getDynamicLineLimit(parent)" />
<ng-template #content> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </ng-template>
</div>
</div>
```
**TypeScript:**
```ts
import {ChangeDetectorRef, Component, inject} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {WA_WINDOW} from '@ng-web-apis/common';
import {WaResizeObserver} from '@ng-web-apis/resize-observer';
import {TuiLineClamp} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [TuiLineClamp, WaResizeObserver],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    private readonly win = inject(WA_WINDOW);
    private readonly cdr = inject(ChangeDetectorRef);
    protected lineHeight = NaN;
    protected lineLimit = NaN;

    protected getDynamicLineHeight(element: HTMLDivElement): number {
        return parseInt(this.win.getComputedStyle(element).lineHeight, 10);
    }

    protected getDynamicLineLimit(element: HTMLDivElement): number {
        return Math.floor(element.offsetHeight / 24);
    }

    protected onResize(element: HTMLDivElement): void {
        this.lineHeight = this.getDynamicLineHeight(element);
        this.lineLimit = this.getDynamicLineLimit(element);
        this.cdr.detectChanges();
    }
}
```

#### Clamp inside dropdown

**Template:**
```html
<h3 class="header"> Dropdown&nbsp;&mdash; <button tuiChevron tuiDropdownAlign="left" tuiDropdownLimitWidth="auto" tuiLink type="button" [tuiDropdown]="template" [(tuiDropdownOpen)]="open" > Open </button>
</h3>
<ng-template #template>
<tui-data-list tuiDataListDropdownManager>
<tui-opt-group>
<ng-container *ngFor="let text of texts">
<button tuiOption type="button" class="dropdown-button" >
<tui-line-clamp [content]="text" [linesLimit]="2" />
</button>
</ng-container>
</tui-opt-group>
</tui-data-list>
</ng-template>
```
**TypeScript:**
```ts
import {NgForOf} from '@angular/common';
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiDataList, TuiDropdown, TuiLink} from '@taiga-ui/core';
import {TuiChevron, TuiDataListDropdownManager, TuiLineClamp} from '@taiga-ui/kit';

function randomString(len: number): string {
    const charSet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
    let randomString = '';

    for (let i = 0; i < len; i++) {
        const randomPoz = Math.floor(Math.random() * charSet.length);

        // eslint-disable-next-line unicorn/prefer-string-slice
        randomString += charSet.substring(randomPoz, randomPoz + 1);
    }

    return randomString;
}

@Component({
    standalone: true,
    imports: [
        NgForOf,
        TuiChevron,
        TuiDataList,
        TuiDataListDropdownManager,
        TuiDropdown,
        TuiLineClamp,
        TuiLink,
    ],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected open = false;
    protected texts = [
        randomString(100),
        "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.",
        randomString(500),
    ];
}
```

#### Custom content workaround

**Template:**
```html
<p>1. Display only the first line, in a popup display remaining lines.</p>
<div class="island">
<tui-line-clamp [content]="userAdditionalInfo" [linesLimit]="1" />
</div>
<p>2. Do not use `tui-line-clamp`, use `text-overflow: ellipsis` instead.</p>
<div class="island">
<p class="email" [tuiHint]="userAdditionalInfo" > {{ user.email }} </p>
</div>
<ng-template #userAdditionalInfo>
<span>{{ user.email }}</span>
<p>User ID: {{ user.id }}</p>
<p>First Name: {{ user.firstName }}</p>
<p>Last Name: {{ user.lastName }}</p>
</ng-template>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiHintDirective} from '@taiga-ui/core';
import {TuiLineClamp} from '@taiga-ui/kit';

interface User {
    email: string;
    firstName: string;
    id: string;
    lastName: string;
}

@Component({
    standalone: true,
    imports: [TuiHintDirective, TuiLineClamp],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly user: User = {
        id: '5a006cb3-2b69-4b23',
        email: 'extremely.long.information@example.com',
        firstName: 'John',
        lastName: 'Doe',
    };
}
```

#### Virtual content

**Template:**
```html
<tui-scrollbar>
<cdk-virtual-scroll-viewport appendOnly itemSize="50" tuiScrollable class="tui-zero-scrollbar" >
<div *cdkVirtualFor="let user of users; templateCacheSize: 0">
<tui-line-clamp [content]="info" [lineHeight]="24" [linesLimit]="1" />
<ng-template #info>
<span>#{{ user.id }}:</span>
<span>{{ user.email }}</span>
<br />
<p>User ID: {{ user.id }}</p>
<p>First Name: {{ user.firstName }}</p>
<p>Last Name: {{ user.lastName }}</p>
</ng-template>
</div>
</cdk-virtual-scroll-viewport>
</tui-scrollbar>
```
**TypeScript:**
```ts
import {
    CdkFixedSizeVirtualScroll,
    CdkVirtualForOf,
    CdkVirtualScrollViewport,
} from '@angular/cdk/scrolling';
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiScrollable, TuiScrollbar} from '@taiga-ui/core';
import {TuiLineClamp} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [
        CdkFixedSizeVirtualScroll,
        CdkVirtualForOf,
        CdkVirtualScrollViewport,
        TuiLineClamp,
        TuiScrollable,
        TuiScrollbar,
    ],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    private readonly names = [
        'Time',
        'Past',
        'Future',
        'Dev',
        'Fly',
        'Flying',
        'Soar',
        'Soaring',
        'Power',
        'Falling',
        'Fall',
        'Jump',
        'Cliff',
        'Mountain',
        'Rend',
        'Red',
        'Blue',
        'Green',
        'Yellow',
        'Gold',
        'Demon',
        'Demonic',
        'Panda',
        'Cat',
        'Kitty',
        'Kitten',
        'Zero',
        'Memory',
        'Trooper',
        'XX',
        'Bandit',
        'Fear',
        'Light',
        'Glow',
        'Tread',
        'Deep',
        'Deeper',
        'Deepest',
        'Mine',
        'Your',
        'Worst',
        'Enemy',
        'Hostile',
        'Force',
        'Video',
        'Game',
        'Donkey',
        'Mule',
        'Colt',
        'Cult',
        'Cultist',
        'Magnum',
        'Gun',
        'Assault',
        'Recon',
        'Trap',
        'Trapper',
        'Redeem',
        'Code',
        'Script',
        'Writer',
        'Near',
        'Close',
        'Open',
        'Cube',
        'Circle',
        'Geo',
        'Genome',
        'Germ',
        'Shot',
        'Echo',
        'Beta',
        'Alpha',
        'Gamma',
        'Omega',
        'Seal',
        'Squid',
        'Money',
        'Cash',
        'Lord',
        'King',
        'Duke',
        'Rest',
        'Fire',
        'Flame',
        'Morrow',
        'Break',
        'Breaker',
        'Numb',
        'Ice',
        'Cold',
        'Rotten',
        'Sick',
        'Sickly',
        'Janitor',
        'Camel',
        'Rooster',
        'Sand',
        'Desert',
        'Dessert',
        'Hurdle',
        'Racer',
        'Eraser',
        'Erase',
        'Big',
        'Small',
        'Short',
        'Tall',
        'Sith',
        'Bounty',
        'Hunter',
        'Cracked',
        'Broken',
        'Sad',
        'Happy',
        'Joy',
        'Joyful',
        'Crimson',
        'Destiny',
        'Deceit',
        'Lies',
        'Lie',
        'Honest',
        'Destined',
        'Hawk',
        'Eagle',
        'Hawker',
        'Walker',
        'Zombie',
        'Sarge',
        'Capt',
        'Captain',
        'Punch',
        'One',
        'Two',
        'Uno',
        'Slice',
        'Slash',
        'Melt',
        'Melted',
        'Melting',
        'Fell',
        'Wolf',
        'Hound',
        'Legacy',
        'Sharp',
        'Dead',
        'Mew',
        'Chuckle',
        'Bubba',
        'Bubble',
        'Sandwich',
        'Smasher',
        'Extreme',
        'Multi',
        'Universe',
        'Ultimate',
        'Death',
        'Ready',
        'Monkey',
        'Elevator',
        'Wrench',
        'Grease',
        'Head',
        'Theme',
        'Grand',
        'Cool',
        'Kid',
        'Boy',
        'Girl',
        'Vortex',
        'Paradox',
    ];

    protected readonly users = Array.from(new Array(10_000), (_, index) => {
        const firstName = this.names[Math.floor(Math.random() * this.names.length)] ?? '';
        const lastName =
            this.names[Math.floor((Math.random() * this.names.length) / 2)] ?? '';

        return {
            id: index + 1,
            firstName,
            lastName,
            email: `${firstName}_${lastName}@gmail.com`.toLowerCase(),
        } as const;
    });
}
```

#### Custom font-size and line-height

**Template:**
```html
<button tuiButton type="button" class="tui-space_bottom-4" (click)="toggle()" > Toggle is overflown: {{ hasOverflownContent() }} </button>
<tui-line-clamp [content]="content" [lineHeight]="33" [linesLimit]="linesLimit" (overflownChange)="hasOverflownContent.set($event)" />
<ng-template #content>
<div [style.font-size.px]="24" [style.line-height.px]="33" > Daenerys of the House Targaryen, the First of Her Name, The Unburnt, Queen of the Andals, the Rhoynar and the First Men, Queen of Meereen, Khaleesi </div>
</ng-template>
```
**TypeScript:**
```ts
import {Component, signal} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiButton} from '@taiga-ui/core';
import {TuiLineClamp} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [TuiButton, TuiLineClamp],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    protected hasOverflownContent = signal<boolean | null>(null);
    protected linesLimit = 2;

    protected toggle(): void {
        this.linesLimit = this.collapsed ? 12 : 2;
    }

    private get collapsed(): boolean {
        return this.linesLimit === 2;
    }
}
```


### TypeScript

```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {TuiDemo} from '@demo/utils';
import {TuiLineClamp} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [TuiDemo, TuiLineClamp],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    changeDetection,
})
export default class Page {
    protected linesLimit = 1;
    protected lineHeight = 24;
    protected maxWidth = 100;
    protected content = '';
}
```

### LESS

```less
.text {
    max-inline-size: 60%;
}
```

---
# components/LineDaysChart
- **Package**: `ADDON-CHARTS`
- **Type**: components
Line chart but for days

### How to Use (Import)

```ts
import {TuiLineDaysChart} from '@taiga-ui/addon-charts';

// ...

@Component({
  standalone: true,
  imports: [
    // ...
    TuiLineDaysChart,
  ],
  // ...
})
export class Example {}
```

### How to Use (Template)

```html
<tui-line-days-chart
  [y]="0"
  [height]="100"
  [value]="value"
></tui-line-days-chart>
```

### Example

```html
<tui-axes class="axes" [axisXLabels]="labels()" [horizontalLines]="4" [verticalLines]="3" >
<tui-line-days-chart [dots]="dots" [height]="height" [hintContent]="hintContent" [smoothingFactor]="smoothingFactor" [value]="value" [xStringify]="xStringify" [y]="y" [yStringify]="yStringify" />
</tui-axes>
```

### API

| Property | Type | Description |
|----------|-----|----------|
| [dots] | `boolean` | Show dots on chart |
| [hintContent] | `PolymorpheusContent` |  |
| [height] | `number` | Axis Y range, pixel scale is 1:1 |
| [y] | `number` | Start of Y axis |
| [smoothingFactor] | `number` | Smoothing factor from 0 to 99 |
| [value] | `[TuiDay, number][]` | Array of data |
| [xStringify] | `TuiStringHandler<TuiDay> | null` | Function to stringify a value number to a string in axis X hint |
| [yStringify] | `TuiStringHandler<number> | null` | Function to stringify a value number to a string in axis Y hint |

### Usage Examples

#### Basic

**Template:**
```html
<p>
<tui-input-date-range [maxLength]="maxLength" [(ngModel)]="range" > Range </tui-input-date-range>
</p>
<tui-axes *ngIf="computeLabels$(range) | async as labels" class="axes" [axisXLabels]="labels" [horizontalLines]="4" [verticalLines]="labels.length - 1" >
<tui-line-days-chart class="chart" [height]="200" [value]="value" [xStringify]="xStringify$ | async" [yStringify]="yStringify" />
</tui-axes>
```
**TypeScript:**
```ts
import {AsyncPipe, NgIf} from '@angular/common';
import {Component, inject} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiAxes, TuiLineDaysChart} from '@taiga-ui/addon-charts';
import {
    TUI_IS_E2E,
    TuiDay,
    type TuiDayLike,
    TuiDayRange,
    TuiMonth,
    tuiPure,
    type TuiStringHandler,
} from '@taiga-ui/cdk';
import {TUI_MONTHS} from '@taiga-ui/core';
import {TuiInputDateRangeModule} from '@taiga-ui/legacy';
import {map, type Observable} from 'rxjs';

@Component({
    standalone: true,
    imports: [
        AsyncPipe,
        FormsModule,
        NgIf,
        TuiAxes,
        TuiInputDateRangeModule,
        TuiLineDaysChart,
    ],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    private readonly isE2E = inject(TUI_IS_E2E);
    private readonly months$ = inject(TUI_MONTHS);

    protected range = new TuiDayRange(
        TuiDay.currentLocal(),
        TuiDay.currentLocal().append({year: 1}),
    );

    protected readonly maxLength: TuiDayLike = {month: 12};

    protected readonly xStringify$: Observable<TuiStringHandler<TuiDay>> =
        this.months$.pipe(
            map(
                (months) =>
                    ({month, day}) =>
                        `${months[month]}, ${day}`,
            ),
        );

    protected get value(): ReadonlyArray<[TuiDay, number]> {
        return this.computeValue(this.range);
    }

    @tuiPure
    protected computeLabels$({
        from,
        to,
    }: TuiDayRange): Observable<ReadonlyArray<string | null>> {
        return this.months$.pipe(
            map((months) => [
                ...Array.from(
                    {length: TuiMonth.lengthBetween(from, to) + 1},
                    (_, i) => months[from.append({month: i}).month] ?? '',
                ),
                null,
            ]),
        );
    }

    protected readonly yStringify: TuiStringHandler<number> = (y) =>
        `${(10 * y).toLocaleString('en-US', {maximumFractionDigits: 0})} $`;

    @tuiPure
    private computeValue({from, to}: TuiDayRange): ReadonlyArray<[TuiDay, number]> {
        return new Array(TuiDay.lengthBetween(from, to) + 1)
            .fill(0)
            .reduce<
                ReadonlyArray<[TuiDay, number]>
            >((array, _, i) => [...array, [from.append({day: i}), this.isE2E ? 100 : (i ? (array[i - 1]?.[1] ?? 0) : 100) + Math.random() * 10 - 5]], []);
    }
}
```

#### Complex

**Template:**
```html
<tui-notification>
<code>TuiLineDaysChart</code> is used to show data of several months to simplify working with different number of days in months </tui-notification>
<p class="controls">
<tui-input-date-range [maxLength]="maxLength" [(ngModel)]="data" (ngModelChange)="onDataChange($event)" > Data </tui-input-date-range>
<tui-input-date-range class="tui-space_left-4" [maxLength]="maxLength" [(ngModel)]="show" > Visible range </tui-input-date-range>
</p>
<p class="legend">
<span *ngFor="let chart of days; let index = index" class="item" >
<small class="name">Chart {{ index + 1 }}</small>
</span>
</p>
<tui-axes *ngIf="labels(show) | async as labels" class="axes" [axisXLabels]="labels" [horizontalLines]="4" [tuiLineChartHint]="hint" [verticalLines]="labels.length - 1" >
<ng-container *ngIf="getWidth(show) > 90; else line">
<tui-line-days-chart *ngFor="let chart of days" class="chart" [height]="200" [value]="chart | tuiFilter: filter : range" />
</ng-container>
<ng-template #line>
<tui-line-chart *ngFor="let chart of days" class="chart" [height]="200" [value]="chart | tuiFilter: filter : range | tuiMapper: toNumbers : range" [width]="getWidth(range)" />
</ng-template>
</tui-axes>
<ng-template #hint let-data >
<div class="tui-space_bottom-2">
<strong>{{ getDate(data[0][0], range.from) }}</strong>
</div>
<div>
<div *ngFor="let point of data" class="item" >
<span class="value">${{ point[1].toFixed(0) }}</span>
</div>
</div>
</ng-template>
```
**TypeScript:**
```ts
import {AsyncPipe, NgForOf, NgIf} from '@angular/common';
import {Component, inject} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {
    TuiAxes,
    TuiLineChart,
    TuiLineDaysChart,
    TuiLineDaysChartHint,
} from '@taiga-ui/addon-charts';
import {
    TUI_IS_E2E,
    TuiDay,
    type TuiDayLike,
    TuiDayRange,
    TuiFilterPipe,
    type TuiMapper,
    TuiMapperPipe,
    type TuiMatcher,
    TuiMonth,
    tuiPure,
} from '@taiga-ui/cdk';
import {TUI_MONTHS, TuiNotification, type TuiPoint} from '@taiga-ui/core';
import {TuiInputDateRangeModule} from '@taiga-ui/legacy';
import {map, type Observable, of} from 'rxjs';

@Component({
    standalone: true,
    imports: [
        AsyncPipe,
        FormsModule,
        NgForOf,
        NgIf,
        TuiAxes,
        TuiFilterPipe,
        TuiInputDateRangeModule,
        TuiLineChart,
        TuiLineDaysChart,
        TuiLineDaysChartHint,
        TuiMapperPipe,
        TuiNotification,
    ],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    changeDetection,
})
export default class Example {
    private readonly isE2E = inject(TUI_IS_E2E);
    private readonly months$ = inject(TUI_MONTHS);

    protected data = new TuiDayRange(
        TuiDay.currentLocal(),
        TuiDay.currentLocal().append({month: 5}),
    );

    protected show = this.data;

    protected days = this.random(this.data);

    protected readonly maxLength: TuiDayLike = {month: 6};

    protected get range(): TuiDayRange {
        return this.computeRange(this.show);
    }

    @tuiPure
    protected getWidth({from, to}: TuiDayRange): number {
        return TuiDay.lengthBetween(from, to);
    }

    @tuiPure
    protected getDate(day: TuiDay | number, date: TuiDay): TuiDay {
        return day instanceof TuiDay ? day : date.append({day});
    }

    @tuiPure
    protected labels({from, to}: TuiDayRange): Observable<readonly string[]> {
        const length = TuiDay.lengthBetween(from, to);

        if (length > 90) {
            return this.months$.pipe(
                map((months) => [
                    ...Array.from(
                        {length: TuiMonth.lengthBetween(from, to) + 1},
                        (_, i) => months[from.append({month: i}).month] ?? '',
                    ),
                    '',
                ]),
            );
        }

        const range = Array.from({length}, (_, day) => from.append({day}));
        const mondays = onlyMondays(range);
        const days = range.map(String);

        if (length > 60) {
            return of([...even(mondays), '']);
        }

        if (length > 14) {
            return of([...mondays, '']);
        }

        if (length > 7) {
            return of([...even(days), '']);
        }

        return of([...days, '']);
    }

    protected readonly filter: TuiMatcher<[readonly [TuiDay, number], TuiDayRange]> = (
        [day],
        {from, to},
    ) => day.daySameOrAfter(from) && day.daySameOrBefore(to);

    protected readonly toNumbers: TuiMapper<
        [ReadonlyArray<readonly [TuiDay, number]>, TuiDayRange],
        readonly TuiPoint[]
    > = (days, {from}) =>
        days.map(([day, value]) => [TuiDay.lengthBetween(from, day), value]);

    protected onDataChange(data: TuiDayRange): void {
        this.days = this.random(data);
    }

    @tuiPure
    private computeRange(range: TuiDayRange): TuiDayRange {
        const {from, to} = range;
        const length = TuiDay.lengthBetween(from, to);
        const dayOfWeekFrom = from.dayOfWeek();
        const dayOfWeekTo = to.dayOfWeek();
        const mondayFrom = dayOfWeekFrom ? from.append({day: 7 - dayOfWeekFrom}) : from;
        const mondayTo = dayOfWeekTo ? to.append({day: 7 - dayOfWeekTo}) : to;
        const mondaysLength = TuiDay.lengthBetween(mondayFrom, mondayTo);

        if (length > 90) {
            return range;
        }

        if (length > 60) {
            return new TuiDayRange(
                mondayFrom,
                mondayTo.append({day: mondaysLength % 14}),
            );
        }

        if (length > 14) {
            return new TuiDayRange(mondayFrom, mondayTo);
        }

        return new TuiDayRange(from, to.append({day: length % 2}));
    }

    @tuiPure
    private generateRandomData(
        {from, to}: TuiDayRange,
        initial: number,
    ): ReadonlyArray<[TuiDay, number]> {
        return new Array(TuiDay.lengthBetween(from, to) + 1)
            .fill(0)
            .reduce<ReadonlyArray<[TuiDay, number]>>(
                (array, _, i) => [
                    ...array,
                    [
                        from.append({day: i}),
                        this.isE2E
                            ? initial
                            : Math.max(
                                  (i ? (array[i - 1]?.[1] ?? 0) : initial) +
                                      Math.random() * 10 -
                                      5,
                                  0,
                              ),
                    ],
                ],
                [],
            )
            .filter(([day]) => day.dayOfWeek() < 5);
    }

    private random(data: TuiDayRange): ReadonlyArray<ReadonlyArray<[TuiDay, number]>> {
        return [
            this.generateRandomData(data, 100),
            this.generateRandomData(data, 75),
            this.generateRandomData(data, 50),
        ];
    }
}

function onlyMondays(range: readonly TuiDay[]): readonly string[] {
    return range.filter((day) => !day.dayOfWeek()).map(String);
}

function even<T>(array: readonly T[]): readonly T[] {
    return array.filter((_, i) => !(i % 2));
}
```


### TypeScript

```ts
import {Component, computed, inject} from '@angular/core';
import {toSignal} from '@angular/core/rxjs-interop';
import {changeDetection} from '@demo/emulate/change-detection';
import {TuiDemo} from '@demo/utils';
import {TuiAxes, TuiLineDaysChart} from '@taiga-ui/addon-charts';
import {type TuiContext, TuiDay, type TuiStringHandler} from '@taiga-ui/cdk';
import {TUI_MONTHS} from '@taiga-ui/core';
import {type PolymorpheusContent} from '@taiga-ui/polymorpheus';

@Component({
    standalone: true,
    imports: [TuiAxes, TuiDemo, TuiLineDaysChart],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    changeDetection,
})
export default class Page {
    protected readonly months = toSignal(inject(TUI_MONTHS));

    protected readonly valueVariants: ReadonlyArray<ReadonlyArray<[TuiDay, number]>> = [
        new Array(91)
            .fill(0)
            .reduce<
                ReadonlyArray<[TuiDay, number]>
            >((array, _, i) => [...array, [new TuiDay(2020, 0, 1).append({day: i}), (i ? (array[i - 1]?.[1] ?? 0) : 100) + Math.random() * 20 - 10]], []),
        [
            [new TuiDay(2020, 1, 10), 10],
            [new TuiDay(2020, 1, 15), 150],
            [new TuiDay(2020, 1, 17), 10],
            [new TuiDay(2020, 1, 20), 10],
            [new TuiDay(2020, 1, 25), 150],
            [new TuiDay(2020, 1, 27), 10],
        ],
    ];

    protected value = this.valueVariants[0]!;

    protected readonly labels = computed(() =>
        Array.from({length: 4}, (_, i) => this.months()?.[i] ?? ''),
    );

    protected readonly yStringifyVariants: ReadonlyArray<TuiStringHandler<number>> = [
        (y) => `${(10 * y).toLocaleString('en-US', {maximumFractionDigits: 0})} $`,
    ];

    protected readonly xStringifyVariants = computed(() => [
        ({month, day}: TuiDay) => `${this.months()?.[month]}, ${day}`,
    ]);

    protected readonly hintContentVariants = computed(() => [
        '',
        ({$implicit}: {$implicit: [TuiDay, number]}) =>
            `${this.months()?.[$implicit[0].month]}, ${$implicit[0].day}\n${(
                10 * $implicit[1]
            ).toLocaleString('en-US', {
                maximumFractionDigits: 0,
            })} $`,
    ]);

    protected yStringify: TuiStringHandler<number> | null = null;

    protected xStringify: TuiStringHandler<TuiDay> | null = null;

    protected hintContent: PolymorpheusContent<TuiContext<[TuiDay, number]>> = '';

    protected dots = false;

    protected smoothingFactor = 0;

    protected y = 0;

    protected height = 200;
}
```

### LESS

```less
.axes {
    block-size: 12.5rem;
    inline-size: 45.5rem;
    color: #bc71c9;
}
```

---
# components/Link
- **Package**: `CORE`
- **Type**: components
Link component. It has focus highlight and can be customized with an icon

### How to Use (Import)

```ts
import {TuiLink} from '@taiga-ui/core';

// ...

@Component({
  standalone: true,
  imports: [
    // ...
    TuiLink,
  ],
  // ...
})
export class Example {}
```

### How to Use (Template)

```html
<a
  tuiLink
  href="#"
>
  Link
</a>

<a
  tuiLink
  iconStart="@tui.settings"
  href="#"
>
  Link with an icon on the left
</a>
```

### Usage Examples

#### Basic

**Template:**
```html
<a tuiLink [routerLink]="routes.Link" > Link </a>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {RouterLink} from '@angular/router';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {DemoRoute} from '@demo/routes';
import {TuiLink} from '@taiga-ui/core';

@Component({
    standalone: true,
    imports: [RouterLink, TuiLink],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly routes = DemoRoute;
}
```

#### Icons

**Template:**
```html
<button iconEnd="@tui.settings" tuiLink type="button" [textContent]="'Link with icon right'" ></button>
<p>
<button iconStart="@tui.settings" tuiLink type="button" [textContent]="'Link with icon left'" ></button>
</p>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiLink} from '@taiga-ui/core';

@Component({
    standalone: true,
    imports: [TuiLink],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {}
```

#### Appearances

**Template:**
```html
<tui-notification class="tui-space_bottom-3"> Use textContent binding to avoid extra whitespace introduced by browser when closing tag wraps to a new line — otherwise distance to the icons will be bigger than it should be </tui-notification>
<section>
<button iconEnd="@tui.chevron-down" iconStart="@tui.arrow-right" tuiLink type="button" [textContent]="'Link with icons'" ></button>
<button iconEnd="@tui.chevron-down" iconStart="@tui.arrow-right" tuiLink type="button" [style.text-decoration-line]="'underline'" [textContent]="'Link with icons'" ></button>
</section>
<section>
<button appearance="action-grayscale" iconEnd="@tui.chevron-down" iconStart="@tui.arrow-right" tuiLink type="button" [textContent]="'Link with icons'" ></button>
<button appearance="action-grayscale" iconEnd="@tui.chevron-down" iconStart="@tui.arrow-right" tuiLink type="button" [style.text-decoration-line]="'underline'" [textContent]="'Link with icons'" ></button>
</section>
<section tuiTheme="light" [style.background]="'#fff'" >
<button appearance="" iconEnd="@tui.chevron-down" iconStart="@tui.arrow-right" tuiLink type="button" [textContent]="'Link with icons'" ></button>
<button appearance="" iconEnd="@tui.chevron-down" iconStart="@tui.arrow-right" tuiLink type="button" [style.text-decoration-line]="'underline'" [textContent]="'Link with icons'" ></button>
</section>
<section tuiTheme="dark" [style.background]="'#000'" >
<button appearance="" iconEnd="@tui.chevron-down" iconStart="@tui.arrow-right" tuiLink type="button" [textContent]="'Link with icons'" ></button>
<button appearance="" iconEnd="@tui.chevron-down" iconStart="@tui.arrow-right" tuiLink type="button" [style.text-decoration-line]="'underline'" [textContent]="'Link with icons'" ></button>
</section>
<section>
<button appearance="" iconEnd="@tui.chevron-down" iconStart="@tui.arrow-right" tuiLink type="button" [style.color]="'var(--tui-status-negative)'" [textContent]="'Link with icons'" ></button>
<button appearance="" iconEnd="@tui.chevron-down" iconStart="@tui.arrow-right" tuiLink type="button" [style.color]="'var(--tui-status-negative)'" [style.text-decoration-line]="'underline'" [textContent]="'Link with icons'" ></button>
</section>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiLink, TuiNotification} from '@taiga-ui/core';

@Component({
    standalone: true,
    imports: [TuiLink, TuiNotification],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {}
```

#### Long text

**Template:**
```html
Link can be written inline in text. <!-- prettier-ignore -->
<a href="https://www.lipsum.com/" iconEnd="@tui.external-link" tuiLink > Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the standard dummy text block</a> and here you can see icon wrapping to the next line with the last word, unless you introduce whitespace
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiLink} from '@taiga-ui/core';

@Component({
    standalone: true,
    imports: [TuiLink],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {}
```


### TypeScript

```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {TuiDemo} from '@demo/utils';

@Component({
    standalone: true,
    imports: [TuiDemo],
    templateUrl: './index.html',
    changeDetection,
})
export default class Page {
    protected readonly examples = ['Basic', 'Icons', 'Appearances', 'Long text'];
}
```

---
# components/Loader
- **Package**: `CORE`
- **Type**: components

### How to Use (Import)

```ts
import {TuiLoader} from '@taiga-ui/core';

@Component({
  standalone: true,
  imports: [
    // ...
    TuiLoader,
  ],
  providers: [
    tuiLoaderOptionsProvider({
      size: 'l',
      inheritColor: false,
      overlay: true,
    }),
  ],
})
export class Example {}
```

### How to Use (Template)

```html
<tui-loader [showLoader]="loader">Let off some steam, Bennett</tui-loader>
```

### Example

```html
<div class="example">
<tui-loader [inheritColor]="inheritColor" [overlay]="overlay" [showLoader]="showLoader" [size]="size" [textContent]="template" >
<div>
<b>Colonel Trautman:</b> It's over Johnny. It's over! </div>
<div>
<b>Rambo:</b> Nothing is over! Nothing! You just don't turn it off! It wasn't my war! You asked me I didn't ask you! And I did what I had to do to win, for somebody who wouldn't let us win! Then I come back to the world, and I see all those maggots at the airport, protestin' me, spittin', callin' me a baby killer and all kinds of vile crap! Who are they to protest me?! Huh?! Who are they?! Unless they been me and been there and know what the hell they yellin' about! </div>
</tui-loader>
<ng-template #textTemplate>
<div>Loading</div>
<div> You can use a template with <a tuiLink [routerLink]="routes.Notification" > HTML </a> here </div>
</ng-template>
</div>
```

### API

| Property | Type | Description |
|----------|-----|----------|
| [showLoader] | `boolean` | Show/hide loader |
| [inheritColor] | `boolean` | Inherit parent color |
| [overlay] | `boolean` | Content overlay when loader is showed |
| [size] | `TuiSizeXS | TuiSizeXL` | Size |
| [textContent] | `PolymorpheusContent` | Custom content under loader |

### Usage Examples

#### With inherited background color

**Template:**
```html
<tui-loader [inheritColor]="true"> I don't know who you are. I don't know what you want. If you are looking for ransom, I can tell you I don't have money. But what I do have are a very particular set of skills; skills I have acquired over a very long career. Skills that make me a nightmare for people like you. If you let my daughter go now, that'll be the end of it. I will not look for you, I will not pursue you. But if you don't, I will look for you, I will find you, and I will kill you. </tui-loader>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiLoader} from '@taiga-ui/core';

@Component({
    standalone: true,
    imports: [TuiLoader],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {}
```

#### With content overlay

**Template:**
```html
<tui-loader [overlay]="true"> I don't know who you are. I don't know what you want. If you are looking for ransom, I can tell you I don't have money. But what I do have are a very particular set of skills; skills I have acquired over a very long career. Skills that make me a nightmare for people like you. If you let my daughter go now, that'll be the end of it. I will not look for you, I will not pursue you. But if you don't, I will look for you, I will find you, and I will kill you. </tui-loader>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiLoader} from '@taiga-ui/core';

@Component({
    standalone: true,
    imports: [TuiLoader],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {}
```

#### Options

**Template:**
```html
<tui-loader> This example demonstrates how to configure loader options using tuiLoaderOptionsProvider. The loader is configured with size 'l', overlay enabled, and inheritColor disabled. </tui-loader>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiLoader, tuiLoaderOptionsProvider} from '@taiga-ui/core';

@Component({
    standalone: true,
    imports: [TuiLoader],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
    providers: [
        tuiLoaderOptionsProvider({
            size: 'l',
            inheritColor: false,
            overlay: true,
        }),
    ],
})
export default class Example {}
```

#### Custom stroke width

Use css-variable --tui-thickness to customize width of the circle stroke. By default, it is 1/12 of diameter.

**Template:**
```html
<tui-loader />
<tui-loader />
<tui-loader />
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiLoader, tuiLoaderOptionsProvider} from '@taiga-ui/core';

@Component({
    standalone: true,
    imports: [TuiLoader],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
    providers: [tuiLoaderOptionsProvider({size: 'xl'})],
})
export default class Example {}
```


### TypeScript

```ts
import {Component, ViewChild} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {DemoRoute} from '@demo/routes';
import {TuiDemo} from '@demo/utils';
import {TuiLoader, type TuiSizeXS, type TuiSizeXXL} from '@taiga-ui/core';
import {type PolymorpheusContent} from '@taiga-ui/polymorpheus';

@Component({
    standalone: true,
    imports: [TuiDemo, TuiLoader],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    changeDetection,
})
export default class Page {
    @ViewChild('textTemplate')
    protected readonly textTemplate: PolymorpheusContent;

    protected readonly routes = DemoRoute;

    protected showLoader = true;

    protected inheritColor = false;

    protected overlay = false;

    protected readonly sizeVariants: ReadonlyArray<TuiSizeXS | TuiSizeXXL> = [
        'xs',
        's',
        'm',
        'l',
        'xl',
        'xxl',
    ];

    protected size = this.sizeVariants[2]!;

    protected selectedTemplate = '';

    protected readonly textVariants: string[] = ['', 'template', 'string'];

    protected get template(): PolymorpheusContent {
        switch (this.selectedTemplate) {
            case 'string': {
                return 'string';
            }
            case 'template': {
                return this.textTemplate || '';
            }
            default: {
                return '';
            }
        }
    }
}
```

### LESS

```less
.example {
    padding: 1.25rem;
    background: var(--tui-background-neutral-1);
}
```

---
# components/Message
- **Package**: `KIT`
- **Type**: components
Message component is used to display message block.

### How to Use (Import)

```ts
import {Component} from '@angular/core';
import {TuiMessage} from '@taiga-ui/kit';
// ...

@Component({
  imports: [
    // ...
    TuiMessage,
  ],
})
export class Example {}
```

### How to Use (Template)

```html
<span tuiMessage>{{ value }}</span>
```

### Example

```html
<span tuiMessage [appearance]="appearance.appearance" > Message </span>
```

### Usage Examples

#### Basic

**Template:**
```html
<span tuiMessage>Incoming message</span>
<span appearance="accent" tuiMessage > Outgoing message </span>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiMessage} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [TuiMessage],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {}
```

#### Custom color

**Template:**
```html
<span class="container incoming">
<span tuiMessage>
<span>I'm default 🤘</span>
</span>
</span>
<span class="container outgoing">
<span appearance="custom" tuiMessage >
<span>And I'm colored 🤘🏿</span>
</span>
</span>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiMessage} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [TuiMessage],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {}
```

#### With link

**Template:**
```html
<span tuiMessage> All relevant guides in this&nbsp; <a href="#" tuiLink > project </a> &nbsp;with a lot of examples </span>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiLink} from '@taiga-ui/core';
import {TuiMessage} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [TuiLink, TuiMessage],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {}
```

#### Chat messages

**Template:**
```html
<h3>Fade</h3>
<span class="container incoming">
<span tuiMessage class="fade" >
<span tuiFade>Left Comment with very long content</span>
</span>
</span>
<span class="container outgoing">
<span appearance="accent" tuiMessage class="fade" >
<span tuiFade>Right Comment with very long content</span>
</span>
</span>
<h3>Multiline</h3>
<span class="container incoming">
<span tuiMessage>
<span class="multiline">Very long content that goes on the second line</span>
</span>
</span>
<span class="container outgoing">
<span appearance="accent" tuiMessage >
<span class="multiline">Very long content that goes on the second line</span>
</span>
</span>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiFade, TuiMessage} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [TuiFade, TuiMessage],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {}
```

#### Inside cells

**Template:**
```html
<div tuiCell>
<tui-avatar src="assets/images/avatar.jpg" tuiAccessories />
<div tuiTitle> Alexander I. <div tuiSubtitle>USD</div>
<span tuiMessage>Don't deny yourself anything</span>
</div>
<div tuiAccessories tuiTitle [style.white-space]="'nowrap'" [style.width]="0" > + $123 456 <div tuiSubtitle>June 2</div>
</div>
</div>
<div tuiCell>
<tui-avatar tuiAccessories [src]="'https://avatars.githubusercontent.com/u/87331898' | tuiFallbackSrc: '@tui.user' | async" />
<div tuiAccessories tuiTitle > German P. <div tuiSubtitle>USD</div>
</div>
<div tuiTitle> – $10 000 <div tuiSubtitle>September 6</div>
<span appearance="accent" tuiMessage > For game </span>
</div>
</div>
```
**TypeScript:**
```ts
import {AsyncPipe} from '@angular/common';
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiFallbackSrcPipe, TuiTitle} from '@taiga-ui/core';
import {TuiAvatar, TuiMessage} from '@taiga-ui/kit';
import {TuiCell} from '@taiga-ui/layout';

@Component({
    standalone: true,
    imports: [AsyncPipe, TuiAvatar, TuiCell, TuiFallbackSrcPipe, TuiMessage, TuiTitle],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {}
```


### TypeScript

```ts
import {Component} from '@angular/core';
import {TuiDocAppearance} from '@demo/components/appearance';
import {changeDetection} from '@demo/emulate/change-detection';
import {TuiDemo} from '@demo/utils';
import {TuiMessage} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [TuiDemo, TuiDocAppearance, TuiMessage],
    templateUrl: './index.html',
    changeDetection,
})
export default class Example {
    protected readonly examples = [
        'Basic',
        'Custom color',
        'With link',
        'Chat messages',
        'Inside cells',
    ];
}
```

---
# components/MobileCalendar
- **Package**: `ADDON-MOBILE`
- **Type**: components
A calendar for mobile devices. It is used in date picker controls if provided with
            tuiProvideMobileCalendar()
        
        
            You can use
            TUI_CALENDAR_DATE_STREAM
            token to set value from outside (see samples)

### How to Use (Import)

```ts
import {TuiMobileCalendar, tuiProvideMobileCalendar} from '@taiga-ui/addon-mobile';
import {TuiInputDateModule} from '@taiga-ui/legacy';

// ...

@Component({
  standalone: true,
  imports: [
    // ...
    TuiMobileCalendar,
  ],
  // If you want it in date picker inputs
  providers: [tuiProvideMobileCalendar()],
  // ...
})
export class Example {}
```

### How to Use (Template)

```html
<tui-mobile-calendar
  [min]="min"
  [max]="max"
  [disabledItemHandler]="disabledItemHandler"
></tui-mobile-calendar>
```

### Example

```html
<tui-mobile-calendar class="calendar" [disabledItemHandler]="disabledItemHandler" [max]="max" [min]="min" [multi]="multi" [single]="single" (cancel)="documentationPropertyCancel.emitEvent($event)" (confirm)="documentationPropertyConfirm.emitEvent($event)" />
```

### API

| Property | Type | Description |
|----------|-----|----------|
| value | `TuiDay | TuiDayRange | readonly TuiDay[] | null` | Value |
| disabledItemHandler | `TuiBooleanHandler<TuiDay>` | " [documentationPropertyValues]="disabledItemHandlerVariants" [(documentationPropertyValue)]="disabledItemHandler" > A handler that gets a date and returns true if it is disabled. Must be a pure function |
| max | `TuiDay` | Max date |
| min | `TuiDay` | Min date |
| multi | `boolean` | Array of single dates |
| cancel | `void` | "Cancel" clicked |
| confirm | `TuiDayRange | TuiDay` | "Confirm" button clicked |
| single | `boolean` | Single date or a range Use tuiCalendarSheetOptionsProvider(&#123;rangeMode: boolean"&#125;) instead |

### Usage Examples

#### Custom dropdown

**Template:**
```html
<div class="wrapper">
<button appearance="secondary" iconStart="@tui.calendar" tuiIconButton type="button" [style.border-radius.%]="100" (click)="onClick()" > Choose a date </button>
<span class="date" [class.date_empty]="empty" > {{ date$ | async }} </span>
</div>
```
**TypeScript:**
```ts
import {AsyncPipe} from '@angular/common';
import {Component, inject, INJECTOR, Injector} from '@angular/core';
import {FormControl} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiMobileCalendarDropdown} from '@taiga-ui/addon-mobile';
import {tuiControlValue, TuiDay} from '@taiga-ui/cdk';
import {TUI_MONTHS, TuiButton, TuiDialogService} from '@taiga-ui/core';
import {TUI_CALENDAR_DATE_STREAM} from '@taiga-ui/kit';
import {PolymorpheusComponent} from '@taiga-ui/polymorpheus';
import {combineLatest, map, type Observable} from 'rxjs';

@Component({
    standalone: true,
    imports: [AsyncPipe, TuiButton],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    private readonly dialogs = inject(TuiDialogService);
    private readonly injector = inject(INJECTOR);
    private readonly months$ = inject(TUI_MONTHS);
    private readonly control = new FormControl<TuiDay | null>(null);

    private readonly dialog$: Observable<TuiDay> = this.dialogs.open(
        new PolymorpheusComponent(
            TuiMobileCalendarDropdown,
            Injector.create({
                providers: [
                    {
                        provide: TUI_CALENDAR_DATE_STREAM,
                        useValue: tuiControlValue(this.control),
                    },
                ],
                parent: this.injector,
            }),
        ),
        {
            size: 'fullscreen',
            closeable: false,
            data: {
                single: true,
                min: TuiDay.currentLocal(),
            },
        },
    );

    protected readonly date$ = combineLatest([
        tuiControlValue<TuiDay>(this.control),
        this.months$,
    ]).pipe(
        map(([value, months]) =>
            !value
                ? 'Choose a date'
                : `${months[value.month]} ${value.day}, ${value.year}`,
        ),
    );

    protected get empty(): boolean {
        return !this.control.value;
    }

    protected onClick(): void {
        this.dialog$.subscribe((value) => this.control.setValue(value));
    }
}
```

#### Range

**Template:**
```html
<div class="example">
<tui-mobile-calendar [max]="max" [min]="min" />
</div>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiMobileCalendar} from '@taiga-ui/addon-mobile';
import {TuiDay} from '@taiga-ui/cdk';
import {tuiCalendarSheetOptionsProvider} from '@taiga-ui/core';

@Component({
    standalone: true,
    imports: [TuiMobileCalendar],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
    providers: [tuiCalendarSheetOptionsProvider({rangeMode: true})],
})
export default class Example {
    protected min = new TuiDay(new Date().getFullYear(), new Date().getMonth(), 1);
    protected max = new TuiDay(new Date().getFullYear(), new Date().getMonth(), 10);
}
```

#### Localization

Use TUI_FIRST_DAY_OF_WEEK token to change start day of the week (Monday by default).

**Template:**
```html
<tui-mobile-calendar [min]="min" />
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiMobileCalendar} from '@taiga-ui/addon-mobile';
import {TuiDay, TuiDayOfWeek} from '@taiga-ui/cdk';
import {TUI_FIRST_DAY_OF_WEEK} from '@taiga-ui/core';

@Component({
    standalone: true,
    imports: [TuiMobileCalendar],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
    providers: [
        {
            provide: TUI_FIRST_DAY_OF_WEEK,
            useValue: TuiDayOfWeek.Sunday,
        },
    ],
})
export default class Example {
    protected min = TuiDay.currentLocal();
}
```

#### Custom dropdown (range)

**Template:**
```html
<div class="wrapper">
<button appearance="secondary" iconStart="@tui.calendar" tuiIconButton type="button" [style.border-radius.%]="100" (click)="onClick()" > Calendar </button>
<span class="date" [class.date_empty]="empty" > {{ date$ | async }} </span>
</div>
```
**TypeScript:**
```ts
import {AsyncPipe} from '@angular/common';
import {Component, inject, INJECTOR, Injector} from '@angular/core';
import {FormControl} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiMobileCalendarDropdown} from '@taiga-ui/addon-mobile';
import {tuiControlValue, TuiDay, type TuiDayRange} from '@taiga-ui/cdk';
import {TUI_MONTHS, TuiButton, TuiDialogService} from '@taiga-ui/core';
import {TUI_CALENDAR_DATE_STREAM} from '@taiga-ui/kit';
import {PolymorpheusComponent} from '@taiga-ui/polymorpheus';
import {combineLatest, map, type Observable} from 'rxjs';

@Component({
    standalone: true,
    imports: [AsyncPipe, TuiButton],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    private readonly dialogs = inject(TuiDialogService);
    private readonly injector = inject(INJECTOR);
    private readonly months$ = inject(TUI_MONTHS);
    private readonly control = new FormControl<TuiDayRange | null>(null);

    private readonly dialog$: Observable<TuiDayRange> = this.dialogs.open(
        new PolymorpheusComponent(
            TuiMobileCalendarDropdown,
            Injector.create({
                providers: [
                    {
                        provide: TUI_CALENDAR_DATE_STREAM,
                        useValue: tuiControlValue(this.control),
                    },
                ],
                parent: this.injector,
            }),
        ),
        {
            size: 'fullscreen',
            closeable: false,
            data: {
                min: new TuiDay(2018, 2, 10),
            },
        },
    );

    protected readonly date$ = combineLatest([
        tuiControlValue<TuiDayRange>(this.control),
        this.months$,
    ]).pipe(
        map(([value, months]) => {
            if (!value) {
                return 'Choose a date range';
            }

            return value.isSingleDay
                ? `${months[value.from.month]} ${value.from.day}, ${value.from.year}`
                : `${months[value.from.month]} ${value.from.day}, ${value.from.year} - ${
                      months[value.to.month]
                  } ${value.to.day}, ${value.to.year}`;
        }),
    );

    protected get empty(): boolean {
        return !this.control.value;
    }

    protected onClick(): void {
        this.dialog$.subscribe((value) => this.control.setValue(value));
    }
}
```

#### Custom dropdown (multi)

**Template:**
```html
<div class="wrapper">
<button appearance="secondary" iconStart="@tui.calendar" tuiIconButton type="button" [style.border-radius.%]="100" (click)="onClick()" > Calendar </button>
<span class="date" [class.date_empty]="empty" > {{ date$ | async }} </span>
</div>
```
**TypeScript:**
```ts
import {AsyncPipe} from '@angular/common';
import {Component, inject, INJECTOR, Injector} from '@angular/core';
import {FormControl} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiMobileCalendarDropdown} from '@taiga-ui/addon-mobile';
import {tuiControlValue, TuiDay} from '@taiga-ui/cdk';
import {TUI_MONTHS, TuiButton, TuiDialogService} from '@taiga-ui/core';
import {TUI_CALENDAR_DATE_STREAM} from '@taiga-ui/kit';
import {PolymorpheusComponent} from '@taiga-ui/polymorpheus';
import {combineLatest, map, type Observable} from 'rxjs';

@Component({
    standalone: true,
    imports: [AsyncPipe, TuiButton],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    private readonly dialogs = inject(TuiDialogService);
    private readonly injector = inject(INJECTOR);
    private readonly months$ = inject(TUI_MONTHS);
    private readonly control = new FormControl<readonly TuiDay[] | null>(null);

    private readonly dialog$: Observable<readonly TuiDay[]> = this.dialogs.open(
        new PolymorpheusComponent(
            TuiMobileCalendarDropdown,
            Injector.create({
                providers: [
                    {
                        provide: TUI_CALENDAR_DATE_STREAM,
                        useValue: tuiControlValue(this.control),
                    },
                ],
                parent: this.injector,
            }),
        ),
        {
            size: 'fullscreen',
            closeable: false,
            data: {
                multi: true,
                min: new TuiDay(2018, 2, 10),
            },
        },
    );

    protected readonly date$ = combineLatest([
        tuiControlValue<readonly TuiDay[]>(this.control),
        this.months$,
    ]).pipe(
        map(([value, months]) => {
            if (!value?.length) {
                return 'Choose dates';
            }

            return value
                .map((day) => `${months[day.month]} ${day.day}, ${day.year}`)
                .join('; ');
        }),
    );

    protected get empty(): boolean {
        return !this.control.value?.length;
    }

    protected onClick(): void {
        this.dialog$.subscribe((value) => this.control.setValue(value));
    }
}
```

#### Without header

**Template:**
```html
<tui-mobile-calendar [max]="max" [min]="min" />
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiMobileCalendar} from '@taiga-ui/addon-mobile';
import {TuiDay} from '@taiga-ui/cdk';
import {TUI_CHOOSE_DAY_OR_RANGE_TEXTS} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [TuiMobileCalendar],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
    providers: [
        {
            provide: TUI_CHOOSE_DAY_OR_RANGE_TEXTS,
            useValue: null,
        },
    ],
})
export default class Example {
    protected min = new TuiDay(new Date().getFullYear(), new Date().getMonth(), 1);
    protected max = new TuiDay(new Date().getFullYear(), new Date().getMonth(), 10);
}
```


### TypeScript

```ts
import {Component} from '@angular/core';
import {FormControl} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {DemoRoute} from '@demo/routes';
import {TuiDemo} from '@demo/utils';
import {TuiMobileCalendar} from '@taiga-ui/addon-mobile';
import {
    TUI_FALSE_HANDLER,
    TUI_FIRST_DAY,
    TUI_LAST_DAY,
    type TuiBooleanHandler,
    tuiControlValue,
    TuiDay,
    type TuiDayRange,
} from '@taiga-ui/cdk';
import {TUI_CALENDAR_DATE_STREAM} from '@taiga-ui/kit';
import {type Observable} from 'rxjs';

@Component({
    standalone: true,
    imports: [TuiDemo, TuiMobileCalendar],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    changeDetection,
    providers: [
        {
            deps: [Page],
            provide: TUI_CALENDAR_DATE_STREAM,
            useFactory: (component: Page): Observable<TuiDay> => component.stream,
        },
    ],
})
export default class Page {
    protected minVariants = [
        TUI_FIRST_DAY,
        new TuiDay(2017, 2, 5),
        new TuiDay(1900, 0, 1),
    ];

    protected min = this.minVariants[0]!;

    protected maxVariants = [
        TUI_LAST_DAY,
        new TuiDay(2020, 2, 5),
        new TuiDay(2300, 0, 1),
    ];

    protected max = this.maxVariants[0]!;

    protected single = true;
    protected multi = false;

    protected readonly disabledItemHandlerVariants: ReadonlyArray<
        TuiBooleanHandler<TuiDay>
    > = [TUI_FALSE_HANDLER, ({day}) => day % 3 === 0];

    protected disabledItemHandler = this.disabledItemHandlerVariants[0]!;

    protected control = new FormControl<TuiDay | TuiDayRange | null>(null);

    protected stream = tuiControlValue<TuiDay>(this.control);
    protected readonly routes = DemoRoute;
}
```

### LESS

```less
.calendar {
    block-size: min(28.75rem, 60vh);
}
```

---
# components/MobileDialog
- **Package**: `ADDON-MOBILE`
- **Type**: components
Component for showing a dialog on mobile devices. It emulates appearance of native alerts on iOS and Android

### How to Use (Template)

```ts
constructor(private readonly dialogs: TuiMobileDialogService) {}

// ...

this.dialogs
    .open(
        'Text',
        {
            label: 'Heading',
            actions: ['Button 1', 'Button 2'],
            data: 'Some data'
        },
    )
    .subscribe(index => {
        // Index of clicked button
        console.log(index);
    });
```

### Usage Examples

#### Basic

**Template:**
```html
<p>Choose iPhone into DevTools to see iOS styled dialog.</p>
<button tuiButton type="button" (click)="show()" > Show dialog </button>
```
**TypeScript:**
```ts
import {Component, inject} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiMobileDialogService} from '@taiga-ui/addon-mobile';
import {TUI_IS_IOS} from '@taiga-ui/cdk';
import {TuiAlertService, TuiButton} from '@taiga-ui/core';
import {switchMap} from 'rxjs';

@Component({
    standalone: true,
    imports: [TuiButton],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
    providers: [
        {
            provide: TUI_IS_IOS,
            useValue: false,
        },
    ],
})
export default class Example {
    private readonly dialogs = inject(TuiMobileDialogService);
    private readonly alerts = inject(TuiAlertService);

    protected show(): void {
        const actions = ['No thanks', 'Remind me later', 'Rate now'];

        this.dialogs
            .open(
                'If you like this app, please take a moment to leave a positive rating.',
                {
                    label: 'What do you think?',
                    actions,
                },
            )
            .pipe(switchMap((index) => this.alerts.open(`Selected: ${actions[index]}`)))
            .subscribe();
    }
}
```


### TypeScript

```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {TuiDemo} from '@demo/utils';

@Component({
    standalone: true,
    imports: [TuiDemo],
    templateUrl: './index.html',
    changeDetection,
})
export default class Page {
    protected readonly template = import('./examples/import/template.md?raw');
}
```

---
# components/Navigation
- **Package**: `LAYOUT`
- **Type**: components
A set of basic layout components for global navigation

### How to Use (Import)

```ts
import {TuiNavigation} from '@taiga-ui/layout';

// ...

@Component({
  standalone: true,
  imports: [
    // ...
    TuiNavigation,
  ],
  // ...
})
export class Example {}
```

### How to Use (Template)

```html
<header tuiNavigationHeader>Header content</header>
<aside [tuiNavigationAside]="expanded">Sidebar content</aside>
<main tuiNavigationMain>
  <nav tuiNavigationNav>Breadcrumbs, tabs, buttons</nav>
  Main content
</main>
```

### Usage Examples

#### Full

**Template:**
```html
<!-- Ignore this part, it is only here to position drawer inside the example block -->
<div class="custom-portal">
<ng-container #viewContainer />
</div>
<header tuiNavigationHeader>
<button title="Menu" tuiIconButton tuiNavigationDrawer type="button" [(open)]="open" >
<tui-data-list>
<tui-opt-group *ngFor="let group of drawer | keyvalue" [label]="group.key" >
<button *ngFor="let item of group.value" tuiOption type="button" (click)="open = false" >
<img alt="icon" [src]="item.icon" /> {{ item.name }} </button>
</tui-opt-group>
<tui-opt-group>
<label tuiOption>
<input size="s" tuiSwitch type="checkbox" [(ngModel)]="switch" /> Dark mode </label>
</tui-opt-group>
</tui-data-list>
</button>
<span tuiNavigationLogo>
<tui-icon icon="@tui.home" />
<span tuiFade>A very very long product name</span>
<tui-badge>Test</tui-badge>
</span>
<span tuiNavigationSegments>
<button appearance="secondary-grayscale" tuiButton type="button" > Link 1 </button>
<button appearance="secondary-grayscale" tuiButton type="button" > Link 2 </button>
<button appearance="secondary-grayscale" tuiButton tuiChevron tuiDropdownOpen type="button" [tuiDropdown]="products" >
<span [style.overflow]="'hidden'" [style.text-overflow]="'ellipsis'" > A very very long project </span>
<ng-template #products>
<tui-data-list size="s">
<button tuiOption type="button" > A very very long project <tui-icon icon="@tui.check" [style.font-size.em]="1" [style.margin-left.rem]="0.5" />
</button>
<button tuiOption type="button" > Something else </button>
</tui-data-list>
</ng-template>
</button>
</span>
<hr />
<button appearance="secondary-grayscale" iconStart="@tui.plus" tuiButton type="button" > Create </button>
<button iconStart="@tui.bell" tuiIconButton type="button" > Notifications <tui-badge-notification />
</button>
<button iconStart="@tui.ellipsis" tuiIconButton type="button" > More </button>
<tui-avatar src="AI" />
</header>
<div [style.display]="'flex'">
<aside [style.height.rem]="27" [tuiNavigationAside]="expanded()" >
<header>
<button iconStart="@tui.home" type="button" [tuiAsideItem]="hint" >
<ng-container [ngTemplateOutlet]="hint" />
<ng-template #hint>
<span tuiFade>A very very long product name</span>
<tui-badge appearance="accent">Alpha</tui-badge>
</ng-template>
</button>
</header>
<button iconStart="@tui.search" tuiAsideItem type="button" > Search <ng-container *ngIf="expanded()">
<tui-badge appearance="accent">12</tui-badge>
</ng-container>
</button>
<a iconStart="@tui.users" tuiAsideItem [routerLink]="routes.Navigation" > Groups </a>
<tui-aside-group>
<button automation-id="setting" iconStart="@tui.settings" tuiAsideItem tuiChevron type="button" > Settings <ng-template>
<button tuiAsideItem type="button" > Account </button>
<button tuiAsideItem type="button" > Notifications </button>
<button tuiAsideItem type="button" > Privacy </button>
</ng-template>
</button>
</tui-aside-group>
<button automation-id="hint" iconStart="@tui.heart" tuiAsideItem type="button" >
<span tuiFade>By default ellipsis is used but you can use fade too</span>
</button>
<button iconEnd="@tui.chevron-right" iconStart="@tui.ellipsis" tuiAsideItem tuiDropdownHover tuiDropdownOpen type="button" [tuiDropdown]="more" > More <ng-template #more let-close >
<tui-data-list tuiDataListDropdownManager>
<button iconStart="@tui.pencil" tuiAsideItem type="button" > Write </button>
<button iconStart="@tui.pie-chart" tuiAsideItem type="button" [tuiDropdown]="submenu" > Categories <ng-template #submenu>
<tui-data-list>
<button tuiAsideItem type="button" (click)="close()" > Fiction (will close menu) </button>
<button tuiAsideItem type="button" > Non-Fiction </button>
<button tuiAsideItem type="button" > Children </button>
</tui-data-list>
</ng-template>
</button>
</tui-data-list>
</ng-template>
</button>
<hr />
<button iconStart="@tui.plus" tuiAsideItem type="button" > Add </button>
<footer>
<button iconStart="@tui.star" tuiAsideItem type="button" > Favorites </button>
<button tuiAsideItem type="button" [iconStart]="expanded() ? '@tui.chevron-left' : '@tui.chevron-right'" (click)="handleToggle()" > {{ expanded() ? 'Collapse' : 'Expand' }} </button>
</footer>
</aside>
<main tuiNavigationMain>
<nav compact tuiSubheader [style.position]="'sticky'" >
<tui-breadcrumbs [itemsLimit]="10">
<ng-container *ngFor="let item of breadcrumbs; let last = last">
<ng-container *ngIf="last">
<strong *tuiItem tuiFade > {{ item }} </strong>
</ng-container>
<ng-container *ngIf="!last">
<button *tuiItem tuiLink type="button" > {{ item }} </button>
</ng-container>
</ng-container>
</tui-breadcrumbs>
<tui-tabs tuiFade>
<button tuiTab type="button" > Default view </button>
<button tuiTab type="button" > Details </button>
<button tuiTab type="button" > Followers </button>
</tui-tabs>
<button appearance="secondary" tuiButton type="button" > Secondary </button>
<button tuiButton type="button" > Primary </button>
</nav>
<ng-container *tuiRepeatTimes="let index of 10">
<form tuiAppearance="floating" tuiCardLarge tuiForm="m" [style.grid-column]="'2 / span 7'" [style.margin-top.rem]="1" >
<header tuiHeader>
<h2 tuiTitle> Registration form <span tuiSubtitle>Tell us about yourself</span>
</h2>
</header>
<tui-textfield>
<label tuiLabel>Name</label>
<input placeholder="John Wick" tuiTextfield />
</tui-textfield>
<footer>
<button appearance="secondary" tuiButton type="button" > Cancel </button>
<button tuiButton type="submit" > Ok </button>
</footer>
</form>
<div tuiAppearance="outline-grayscale" tuiCardLarge [style.grid-column]="'span 3'" [style.margin-top.rem]="1" >
<h2 tuiTitle> Sidebar content <span tuiSubtitle>Use CSS grid to position</span>
</h2>
</div>
</ng-container>
</main>
</div>
```
**TypeScript:**
```ts
import {KeyValuePipe, NgForOf, NgIf, NgTemplateOutlet} from '@angular/common';
import {Component, signal} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {RouterLink} from '@angular/router';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {DemoRoute} from '@demo/routes';
import {tuiAsPortal, TuiPortals, TuiRepeatTimes} from '@taiga-ui/cdk';
import {
    TuiAppearance,
    TuiButton,
    TuiDataList,
    TuiDropdown,
    TuiDropdownService,
    TuiIcon,
    TuiLink,
    TuiTextfield,
    TuiTitle,
} from '@taiga-ui/core';
import {
    TuiAvatar,
    TuiBadge,
    TuiBadgeNotification,
    TuiBreadcrumbs,
    TuiChevron,
    TuiDataListDropdownManager,
    TuiFade,
    TuiSwitch,
    TuiTabs,
} from '@taiga-ui/kit';
import {TuiCardLarge, TuiForm, TuiHeader, TuiNavigation} from '@taiga-ui/layout';

const ICON =
    "data:image/svg+xml,%0A%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='32' height='32' rx='8' fill='url(%23paint0_linear_2036_35276)'/%3E%3Cmask id='mask0_2036_35276' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='6' y='5' width='20' height='21'%3E%3Cpath d='M18.2399 9.36607C21.1347 10.1198 24.1992 9.8808 26 7.4922C26 7.4922 21.5645 5 16.4267 5C11.2888 5 5.36726 8.69838 6.05472 16.6053C6.38707 20.4279 6.65839 23.7948 6.65839 23.7948C8.53323 22.1406 9.03427 19.4433 8.97983 16.9435C8.93228 14.7598 9.55448 12.1668 12.1847 10.4112C14.376 8.94865 16.4651 8.90397 18.2399 9.36607Z' fill='url(%23paint1_linear_2036_35276)'/%3E%3Cpath d='M11.3171 20.2647C9.8683 17.1579 10.7756 11.0789 16.4267 11.0789C20.4829 11.0789 23.1891 12.8651 22.9447 18.9072C22.9177 19.575 22.9904 20.2455 23.2203 20.873C23.7584 22.3414 24.7159 24.8946 24.7159 24.8946C23.6673 24.5452 22.8325 23.7408 22.4445 22.7058L21.4002 19.921L21.2662 19.3848C21.0202 18.4008 20.136 17.7104 19.1217 17.7104H17.5319L17.6659 18.2466C17.9119 19.2306 18.7961 19.921 19.8104 19.921L22.0258 26H10.4754C10.7774 24.7006 12.0788 23.2368 11.3171 20.2647Z' fill='url(%23paint2_linear_2036_35276)'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_2036_35276)'%3E%3Crect x='4' y='4' width='24' height='24' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear_2036_35276' x1='0' y1='0' x2='32' y2='32' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23A681D4'/%3E%3Cstop offset='1' stop-color='%237D31D4'/%3E%3C/linearGradient%3E%3ClinearGradient id='paint1_linear_2036_35276' x1='6.0545' y1='24.3421' x2='28.8119' y2='3.82775' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0.0001' stop-opacity='0.996458'/%3E%3Cstop offset='0.317708'/%3E%3Cstop offset='1' stop-opacity='0.32'/%3E%3C/linearGradient%3E%3ClinearGradient id='paint2_linear_2036_35276' x1='6.0545' y1='24.3421' x2='28.8119' y2='3.82775' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0.0001' stop-opacity='0.996458'/%3E%3Cstop offset='0.317708'/%3E%3Cstop offset='1' stop-opacity='0.32'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E%0A";

@Component({
    standalone: true,
    imports: [
        FormsModule,
        KeyValuePipe,
        NgForOf,
        NgIf,
        NgTemplateOutlet,
        RouterLink,
        TuiAppearance,
        TuiAvatar,
        TuiBadge,
        TuiBadgeNotification,
        TuiBreadcrumbs,
        TuiButton,
        TuiCardLarge,
        TuiChevron,
        TuiDataList,
        TuiDataListDropdownManager,
        TuiDropdown,
        TuiFade,
        TuiForm,
        TuiHeader,
        TuiIcon,
        TuiLink,
        TuiNavigation,
        TuiRepeatTimes,
        TuiSwitch,
        TuiTabs,
        TuiTextfield,
        TuiTitle,
    ],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
    // Ignore portal related code, it is only here to position drawer inside the example block
    providers: [TuiDropdownService, tuiAsPortal(TuiDropdownService)],
})
export default class Example extends TuiPortals {
    protected expanded = signal(false);
    protected open = false;
    protected switch = false;
    protected readonly routes = DemoRoute;
    protected readonly breadcrumbs = ['Home', 'Angular', 'Repositories', 'Taiga UI'];

    protected readonly drawer = {
        Components: [
            {name: 'Button', icon: ICON},
            {name: 'Input', icon: ICON},
            {name: 'Tooltip', icon: ICON},
        ],
        Essentials: [
            {name: 'Getting started', icon: ICON},
            {name: 'Showcase', icon: ICON},
            {name: 'Typography', icon: ICON},
        ],
    };

    protected handleToggle(): void {
        this.expanded.update((e) => !e);
    }
}
```

#### Subheader compact

**Template:**
```html
<header tuiNavigationHeader>
<span tuiNavigationLogo> Custom color <input tuiSwitch type="checkbox" [ngModel]="color" (ngModelChange)="onColor($event)" />
</span>
<button tuiButton tuiChevron tuiDropdown="Use TuiThemeColorService to control color" tuiDropdownOpen type="button" > How to? </button>
</header>
<main tuiNavigationMain>
<nav compact tuiSubheader >
<a iconStart="@tui.chevron-left" tuiLink [textContent]="'Repositories'" ></a> / <strong tuiFade>Very long repository name</strong>
<tui-avatar size="xs" src="@tui.lock" />
<tui-tabs>
<a tuiTab>Default view</a>
<a tuiTab>Contributors</a>
<a tuiTab>Code</a>
</tui-tabs>
<button appearance="secondary" tuiButton type="button" > Button </button>
<button tuiButton type="button" > Button </button>
<button appearance="secondary" iconStart="@tui.ellipsis" tuiDropdownOpen tuiIconButton type="button" [tuiDropdown]="menu" > More <ng-template #menu>
<tui-data-list>
<button tuiOption type="button" > Button </button>
<button tuiOption type="button" > Button </button>
<button tuiOption type="button" > Button </button>
</tui-data-list>
</ng-template>
</button>
</nav>
<div *tuiRepeatTimes="let index of 10" tuiAppearance="floating" tuiCardLarge tuiHeader [style.grid-column]="'span 6'" >
<h2 tuiTitle> Some random content <span tuiSubtitle>A subtitle</span>
</h2>
</div>
</main>
```
**TypeScript:**
```ts
import {Component, inject} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiRepeatTimes, TuiThemeColorService} from '@taiga-ui/cdk';
import {
    TuiAppearance,
    TuiButton,
    TuiDataList,
    TuiDropdown,
    TuiLink,
    TuiTitle,
} from '@taiga-ui/core';
import {TuiAvatar, TuiChevron, TuiFade, TuiSwitch, TuiTabs} from '@taiga-ui/kit';
import {TuiCardLarge, TuiHeader, TuiNavigation} from '@taiga-ui/layout';

@Component({
    standalone: true,
    imports: [
        FormsModule,
        TuiAppearance,
        TuiAvatar,
        TuiButton,
        TuiCardLarge,
        TuiChevron,
        TuiDataList,
        TuiDropdown,
        TuiFade,
        TuiHeader,
        TuiLink,
        TuiNavigation,
        TuiRepeatTimes,
        TuiSwitch,
        TuiTabs,
        TuiTitle,
    ],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    private readonly theme = inject(TuiThemeColorService);

    protected color = false;

    protected onColor(color: boolean): void {
        this.theme.color = color ? 'purple' : 'black';
    }
}
```

#### Subheader object

**Template:**
```html
<header tuiNavigationHeader>
<div tuiGroup [collapsed]="true" [style.margin]="'auto'" >
<label appearance="" tuiBlock="s" >
<input tuiBlock="s" type="radio" value="basic" [(ngModel)]="current" /> Basic </label>
<label appearance="" tuiBlock="s" >
<input tuiBlock="s" type="radio" value="input" [(ngModel)]="current" /> Input </label>
<label appearance="" tuiBlock="s" >
<input tuiBlock="s" type="radio" value="card" [(ngModel)]="current" /> Card </label>
</div>
</header>
<main tuiNavigationMain>
<header tuiSubheader>
<ng-container *ngIf="current === 'basic'">
<a iconStart="@tui.chevron-left" tuiLink [textContent]="'Repositories'" ></a>
<h2 tuiHeader>
<div tuiTitle>
<div tuiNavigationLogo>
<tui-icon icon="@tui.gitlab" />
<span tuiFade>Research and Development Platform</span>
<tui-icon icon="@tui.heart" tuiBadge />
</div>
<div tuiSubtitle> Here you can initiate and participate in the review of package objects. Each object have up to 3 groups of reviewers, with one response required from each type, and any other participant can change both positive. </div>
<div tuiSubtitle [style.display]="'flex'" [style.gap.rem]="1" >
<span>
<tui-icon icon="@tui.user" /> Alex Inkin </span> Edited 6 minutes ago <span>
<tui-icon icon="@tui.lock" /> Private </span>
</div>
</div>
<div tuiAccessories>
<button tuiButton type="button" > Button </button>
<button appearance="primary" tuiButton type="button" > Button </button>
<button iconStart="@tui.ellipsis" tuiIconButton type="button" > More </button>
</div>
</h2>
</ng-container>
<ng-container *ngIf="current === 'input'">
<h2 tuiHeader>
<div tuiTitle>Projects</div>
<div tuiAccessories>
<button appearance="primary" tuiButton type="button" > Create </button>
</div>
</h2>
<tui-textfield iconStart="@tui.search">
<input placeholder="Search" tuiTextfield />
</tui-textfield>
</ng-container>
<ng-container *ngIf="current === 'card'">
<tui-breadcrumbs>
<a *tuiItem tuiLink > Code </a>
<a *tuiItem tuiLink > Repositories </a>
<span *tuiItem>Taiga UI</span>
</tui-breadcrumbs>
<div tuiAppearance="floating" tuiCardLarge="compact" tuiHeader >
<h2 tuiTitle> Personal and Development Plan <span tuiSubtitle> Here you can initiate and participate in the review of package objects. Each object have up to 3 groups of reviewers, with one response required from each type, and any other participant can change both positive </span>
</h2>
</div>
</ng-container>
<nav tuiTabs>
<button tuiTab type="button" > First tab </button>
<button tuiTab type="button" > Second tab </button>
<button tuiTab type="button" > Third tab </button>
<button tuiButton type="button" > Button </button>
<button tuiButton type="button" > Button </button>
</nav>
</header>
<div *tuiRepeatTimes="let index of 10" tuiAppearance="floating" tuiCardLarge="compact" tuiHeader [style.grid-column]="'span 6'" >
<h2 tuiTitle> Some random content <span tuiSubtitle>A subtitle</span>
</h2>
</div>
</main>
```
**TypeScript:**
```ts
import {NgIf} from '@angular/common';
import {Component} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiRepeatTimes} from '@taiga-ui/cdk';
import {
    TuiAppearance,
    TuiButton,
    TuiGroup,
    TuiIcon,
    TuiLink,
    TuiTextfield,
    TuiTitle,
} from '@taiga-ui/core';
import {TuiBadge, TuiBlock, TuiBreadcrumbs, TuiFade, TuiTabs} from '@taiga-ui/kit';
import {TuiCardLarge, TuiHeader, TuiNavigation} from '@taiga-ui/layout';

@Component({
    standalone: true,
    imports: [
        FormsModule,
        NgIf,
        TuiAppearance,
        TuiBadge,
        TuiBlock,
        TuiBreadcrumbs,
        TuiButton,
        TuiCardLarge,
        TuiFade,
        TuiGroup,
        TuiHeader,
        TuiIcon,
        TuiLink,
        TuiNavigation,
        TuiRepeatTimes,
        TuiTabs,
        TuiTextfield,
        TuiTitle,
    ],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    protected current = 'basic';
}
```

#### Customization

**Template:**
```html
<!-- Ignore this part, it is only here to position drawer inside the example block -->
<div class="custom-portal">
<ng-container #viewContainer />
</div>
<header tuiNavigationHeader tuiTheme="light" >
<button title="Menu" tuiIconButton tuiNavigationDrawer type="button" >
<div tuiTheme="light" class="drawer" [style.padding.rem]="0.5" >
<span tuiTitle> Drawer content <span tuiSubtitle>Arbitrary content</span>
</span>
</div>
</button>
</header>
<div [style.display]="'flex'">
<aside tuiTheme="light" [style.height.rem]="27" [tuiNavigationAside]="true" >
<header>
<button iconStart="@tui.home" tuiAsideItem type="button" >
<span tuiFade>A very very long product name</span>
</button>
</header>
<button iconStart="@tui.search" tuiAsideItem type="button" > Search </button>
<a iconStart="@tui.users" tuiAsideItem > Groups </a>
<tui-aside-group [(open)]="open">
<button iconStart="@tui.settings" tuiAsideItem tuiChevron type="button" > Settings <ng-template>
<button tuiAsideItem type="button" (click)="open = false" > Account </button>
<button tuiAsideItem type="button" (click)="open = false" > Notifications </button>
<button tuiAsideItem type="button" (click)="open = false" > Privacy </button>
</ng-template>
</button>
</tui-aside-group>
<button iconStart="@tui.heart" tuiAsideItem type="button" >
<span tuiFade>By default ellipsis is used but you can use fade too</span>
</button>
<hr />
<button appearance="accent" iconStart="@tui.plus" tuiAsideItem type="button" > Add </button>
<footer>
<button iconStart="@tui.star" tuiAsideItem type="button" > Favorites </button>
</footer>
</aside>
<main tuiNavigationMain>
<div *tuiRepeatTimes="let index of 10" tuiAppearance="floating" tuiCardLarge tuiHeader >
<h2 tuiTitle> Some random content <span tuiSubtitle>A subtitle</span>
</h2>
</div>
</main>
</div>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {tuiAsPortal, TuiPortals, TuiRepeatTimes} from '@taiga-ui/cdk';
import {TuiAppearance, TuiButton, TuiDropdownService, TuiTitle} from '@taiga-ui/core';
import {TuiChevron, TuiFade} from '@taiga-ui/kit';
import {
    TuiCardLarge,
    TuiHeader,
    tuiLayoutIconsProvider,
    TuiNavigation,
} from '@taiga-ui/layout';

@Component({
    standalone: true,
    imports: [
        TuiAppearance,
        TuiButton,
        TuiCardLarge,
        TuiChevron,
        TuiFade,
        TuiHeader,
        TuiNavigation,
        TuiRepeatTimes,
        TuiTitle,
    ],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
    providers: [
        tuiLayoutIconsProvider({grid: '@tui.align-justify'}),
        // Ignore portal related code, it is only here to position drawer inside the example block
        TuiDropdownService,
        tuiAsPortal(TuiDropdownService),
    ],
})
export default class Example extends TuiPortals {
    protected open = true;
}
```


### TypeScript

```ts
import {Component, inject, type OnDestroy} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiDemo} from '@demo/utils';
import {TuiThemeColorService} from '@taiga-ui/cdk';

@Component({
    standalone: true,
    imports: [TuiDemo],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Page implements OnDestroy {
    protected readonly theme = inject(TuiThemeColorService);
    protected readonly examples = [
        'Full',
        'Subheader compact',
        'Subheader object',
        'Customization',
    ];

    constructor() {
        this.theme.color = 'black';
    }

    public ngOnDestroy(): void {
        this.theme.color = '#ff7043';
    }
}
```

### LESS

```less
:host ::ng-deep header[tuiNavigationHeader][tuiNavigationHeader] {
    inline-size: 100%;
}

.sticky-example ::ng-deep .t-demo {
    block-size: 30rem;
    transform: translate3d(0, 0, 0);
    padding: 0 !important;

    .custom-portal {
        position: sticky;
        top: 0;
        z-index: 10;
        block-size: 30rem;
        margin-block-end: -30rem;
        transform: translate3d(0, 0, 0);
        pointer-events: none;
    }
}
```

---
# components/Notification
- **Package**: `CORE`
- **Type**: components
An inline message with a type (info, positive, warning, negative or neutral) that does not interrupt user
        actions

### How to Use (Import)

```ts
import {TuiNotification} from '@taiga-ui/core';

// ...

@Component({
  standalone: true,
  imports: [
    // ...
    TuiNotification,
  ],
  // ...
})
export class Example {}
```

### How to Use (Template)

```html
<tui-notification appearance="negative">Some content</tui-notification>
```

### Usage Examples

#### Basic

**Template:**
```html
<tui-notification size="l"> Hello world <button iconStart="@tui.x" tuiIconButton type="button" > Close </button>
</tui-notification>
<tui-notification appearance="warning" size="m" >
<div tuiTitle [style.padding-inline-end.rem]="2" > I am title <div tuiSubtitle>I am content of the notification and I can even wrap to multiple lines.</div>
<div>
<button tuiButton type="button" > So what? </button>
<button tuiLink type="button" > Whatever </button>
</div>
</div>
<button iconStart="@tui.x" tuiIconButton type="button" > Close </button>
</tui-notification>
<tui-notification appearance="neutral" icon="" size="s" > Most boring notification </tui-notification>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiButton, TuiLink, TuiNotification, TuiTitle} from '@taiga-ui/core';

@Component({
    standalone: true,
    imports: [TuiButton, TuiLink, TuiNotification, TuiTitle],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {}
```

#### Options

**Template:**
```html
<tui-notification>Works with token options</tui-notification>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiNotification, tuiNotificationOptionsProvider} from '@taiga-ui/core';

@Component({
    standalone: true,
    imports: [TuiNotification],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
    providers: [
        tuiNotificationOptionsProvider({
            icon: '@tui.alarm-clock',
            appearance: 'neutral',
            size: 's',
        }),
    ],
})
export default class Example {}
```

#### Interactive

**Template:**
```html
<button appearance="neutral" iconEnd="@tui.chevron-right" size="m" tuiNotification type="button" > Click here to read more </button>
<a iconEnd="@tui.chevron-right" size="l" tuiNotification [routerLink]="routes.Alert" >
<span tuiTitle> Alerts <span tuiSubtitle>A notification as a toast</span>
</span>
</a>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {RouterLink} from '@angular/router';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {DemoRoute} from '@demo/routes';
import {TuiNotification, TuiTitle} from '@taiga-ui/core';

@Component({
    standalone: true,
    imports: [RouterLink, TuiNotification, TuiTitle],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly routes = DemoRoute;
}
```

#### Icon customization

**Template:**
```html
<button icon="@tui.heart" iconEnd="@tui.chevron-right" size="l" tuiNotification type="button" >
<span tuiTitle> Custom icon color <span tuiSubtitle>Vertically centered</span>
</span>
</button>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiNotification, TuiTitle} from '@taiga-ui/core';

@Component({
    standalone: true,
    imports: [TuiNotification, TuiTitle],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {}
```


### TypeScript

```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {TuiDemo} from '@demo/utils';

@Component({
    standalone: true,
    imports: [TuiDemo],
    templateUrl: './index.html',
    changeDetection,
})
export default class Page {
    protected readonly examples = [
        'Basic',
        'Options',
        'Interactive',
        'Icon customization',
    ];
}
```

---
# components/NotificationMiddle
- **Package**: `KIT`
- **Type**: components
A modal component to indicate an ongoing blocking action

### How to Use (Import)

```ts
import {TuiNotificationMiddle} from '@taiga-ui/kit';

// ...

@Component({
  standalone: true,
  imports: [
    // ...
    TuiNotificationMiddle,
  ],
  // ...
})
export class Example {}
```

### How to Use (Template)

```html
<ng-template [(tuiNotificationMiddle)]="open">Loader with text</ng-template>
```

### Example

```html
<button tuiButton type="button" (click)="open.set(true)" > Show </button>
<ng-template [tuiNotificationMiddle]="open()" [tuiNotificationMiddleOptions]="{closable: closable}" (tuiNotificationMiddleChange)="open.set($event)" > Notification example <button size="s" tuiButton type="button" (click)="open.set(false)" > Close </button>
</ng-template>
```

### API

| Property | Type | Description |
|----------|-----|----------|
| [closable] | `boolean` | Whether the notification can be closed by the user taping outside or pressing Escape |

### Usage Examples

#### Default

**Template:**
```html
<ng-template [tuiNotificationMiddleOptions]="{closable: true}" [(tuiNotificationMiddle)]="open" />
<button tuiButton type="button" (click)="open = true" > Show </button>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiButton} from '@taiga-ui/core';
import {TuiNotificationMiddle} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [TuiButton, TuiNotificationMiddle],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    protected open = false;
}
```

#### Content

**Template:**
```html
<ng-template [tuiNotificationMiddleOptions]="{closable: true}" [(tuiNotificationMiddle)]="text" > Loader with text </ng-template>
<ng-template [tuiNotificationMiddleOptions]="{closable: true}" [(tuiNotificationMiddle)]="icon" >
<img alt="" [src]="'@tui.user' | tuiIcon" /> Custom icon </ng-template>
<button tuiButton type="button" (click)="text = true" > Text </button> &nbsp; <button tuiButton type="button" (click)="icon = true" > Icon </button>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {ReactiveFormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiButton, TuiIconPipe} from '@taiga-ui/core';
import {TuiNotificationMiddle} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [ReactiveFormsModule, TuiButton, TuiIconPipe, TuiNotificationMiddle],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    protected text = false;
    protected icon = false;
}
```

#### Transition

**Template:**
```html
<ng-template [tuiNotificationMiddle]="open()" (tuiNotificationMiddleChange)="open.set($event)" >
<ng-container *ngIf="loading(); else done">
<tui-loader tuiAnimated />
<div tuiAnimated>Please wait...</div>
</ng-container>
<ng-template #done>
<tui-avatar appearance="positive" src="@tui.check" tuiAnimated />
<div tuiAnimated>Operation successful!</div>
</ng-template>
</ng-template>
<button tuiButton type="button" (click)="onClick()" > Show </button>
```
**TypeScript:**
```ts
import {NgIf} from '@angular/common';
import {Component, signal} from '@angular/core';
import {toObservable, toSignal} from '@angular/core/rxjs-interop';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TUI_FALSE_HANDLER, TuiAnimated} from '@taiga-ui/cdk';
import {TuiButton, TuiLoader} from '@taiga-ui/core';
import {TuiAvatar, TuiNotificationMiddle} from '@taiga-ui/kit';
import {filter, map, startWith, switchMap, take, tap, timer} from 'rxjs';

@Component({
    standalone: true,
    imports: [NgIf, TuiAnimated, TuiAvatar, TuiButton, TuiLoader, TuiNotificationMiddle],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly open = signal(false);
    protected readonly loading = toSignal(
        toObservable(this.open).pipe(
            filter(Boolean),
            switchMap(() =>
                timer(3000, 2000).pipe(
                    take(2),
                    map(TUI_FALSE_HANDLER),
                    startWith(true),
                    tap({complete: () => this.open.set(false)}),
                ),
            ),
        ),
    );

    protected onClick(): void {
        this.open.set(true);
    }
}
```

#### Service

**Template:**
```html
<button tuiButton type="button" (click)="onClick()" > Show </button>
```
**TypeScript:**
```ts
import {Component, inject} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiButton} from '@taiga-ui/core';
import {TuiNotificationMiddleService} from '@taiga-ui/kit';
import {bufferTime, first, startWith, switchMap, timer} from 'rxjs';

@Component({
    standalone: true,
    imports: [TuiButton],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    private readonly notification = inject(TuiNotificationMiddleService);

    protected onClick(): void {
        this.notification
            .open('Loading...')
            .pipe(
                startWith(null),
                // Imitating a quick request
                switchMap(() => timer(100)),
                // Using minimal time to show a notification
                bufferTime(600),
                first(),
            )
            .subscribe();
    }
}
```


### TypeScript

```ts
import {Component, signal, ViewEncapsulation} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {DemoRoute} from '@demo/routes';
import {TuiDemo} from '@demo/utils';
import {TuiButton} from '@taiga-ui/core';
import {TuiNotificationMiddle} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [TuiButton, TuiDemo, TuiNotificationMiddle],
    templateUrl: './index.html',
    encapsulation: ViewEncapsulation.None,
    changeDetection,
})
export default class Page {
    protected routes = DemoRoute;
    protected readonly examples = ['Default', 'Content', 'Transition', 'Service'];
    protected readonly open = signal(false);

    protected closable = false;
}
```

---
# components/Pager
- **Package**: `KIT`
- **Type**: components

### How to Use (Import)

```ts
import {Component} from '@angular/core';
import {TuiPager} from '@taiga-ui/kit';
// ...

@Component({
  standalone: true,
  imports: [
    // ...
    TuiPager,
  ],
})
export class Example {}
```

### How to Use (Template)

```html
<tui-pager
  [index]="index"
  [count]="count"
/>
```

### Example

```html
<tui-pager [count]="count" [index]="index" [max]="max" [size]="size" [valueContent]="valueContent" />
<ng-template #templateRef>
<tui-icon icon="@tui.heart-filled" />
</ng-template>
```

### API

| Property | Type | Description |
|----------|-----|----------|
| [size] | `'m' | 's'` | Layout size |
| [index] | `number` | Current active dot |
| [max] | `number` | Max visible dots |
| [count] | `number` | Count of dots |
| [valueContent] | `TemplateRef` | A template for custom view |

### Usage Examples

#### Basic

**Template:**
```html
<tui-pager [count]="count" [index]="index" />
<div class="tui-space_top-3">
<button size="xs" tuiButton type="button" (click)="prev()" > prev </button>
<button size="xs" tuiButton type="button" class="tui-space_left-3" (click)="next()" > next </button>
</div>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiButton} from '@taiga-ui/core';
import {TuiPager} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [TuiButton, TuiPager],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    protected count = 10;
    protected index = 0;

    protected prev(): void {
        this.index = Math.max(this.index - 1, 0);
    }

    protected next(): void {
        this.index = Math.min(this.index + 1, this.count - 1);
    }
}
```

#### Icons

**Template:**
```html
<tui-pager [count]="count" [index]="activeIndex" [valueContent]="content" />
<ng-template #content let-index >
<ng-container *ngIf="index === count - 2">
<tui-icon icon="@tui.view" />
</ng-container>
<ng-container *ngIf="index === count - 1">
<tui-icon icon="@tui.square-plus" />
</ng-container>
</ng-template>
<div class="tui-space_top-3">
<button size="xs" tuiButton type="button" (click)="prev()" > prev </button>
<button size="xs" tuiButton type="button" class="tui-space_left-3" (click)="next()" > next </button>
</div>
```
**TypeScript:**
```ts
import {NgIf} from '@angular/common';
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiButton, TuiIcon} from '@taiga-ui/core';
import {TuiPager} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [NgIf, TuiButton, TuiIcon, TuiPager],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    protected count = 8;
    protected activeIndex = 0;

    protected prev(): void {
        this.activeIndex = Math.max(this.activeIndex - 1, 0);
    }

    protected next(): void {
        this.activeIndex = Math.min(this.activeIndex + 1, this.count - 1);
    }
}
```

#### Dynamic width

**Template:**
```html
<tui-pager [count]="count" [index]="activeIndex()" [valueContent]="content" />
<ng-template #content let-index >
<progress max="100" size="s" tuiProgressBar class="progress" [class.progress_active]="activeIndex() === index" [value]="activeIndex() === index | tuiMapper: toProgress | async" ></progress>
</ng-template>
<div class="tui-space_top-3">
<button size="xs" tuiButton type="button" (click)="prev()" > prev </button>
<button size="xs" tuiButton type="button" class="tui-space_left-3" (click)="next()" > next </button>
</div>
```
**TypeScript:**
```ts
import {AsyncPipe, isPlatformServer} from '@angular/common';
import {Component, inject, PLATFORM_ID, signal} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TUI_IS_E2E, TuiMapperPipe} from '@taiga-ui/cdk';
import {TuiButton} from '@taiga-ui/core';
import {TuiPager, TuiProgress} from '@taiga-ui/kit';
import {map, type Observable, of, takeWhile, tap, timer} from 'rxjs';

@Component({
    standalone: true,
    imports: [AsyncPipe, TuiButton, TuiMapperPipe, TuiPager, TuiProgress],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected static = inject(TUI_IS_E2E) || isPlatformServer(inject(PLATFORM_ID));
    protected count = 10;
    protected activeIndex = signal(0);

    protected readonly toProgress = (active: boolean): Observable<number> =>
        active && !this.static
            ? timer(0, 100).pipe(
                  map((i) => i * 5 + 20),
                  takeWhile((value) => value <= 100),
                  tap({complete: () => this.next()}),
              )
            : of(100);

    protected prev(): void {
        this.activeIndex.update((index) => Math.max(index - 1, 0));
    }

    protected next(): void {
        this.activeIndex.update((index) => Math.min(index + 1, this.count - 1));
    }
}
```


### TypeScript

```ts
import {Component, type TemplateRef, ViewChild} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {TuiDemo} from '@demo/utils';
import {TuiIcon, type TuiSizeS} from '@taiga-ui/core';
import {TuiPager} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [TuiDemo, TuiIcon, TuiPager],
    templateUrl: './index.html',
    changeDetection,
})
export default class Page {
    @ViewChild('templateRef')
    protected templateRef?: TemplateRef<unknown>;

    protected readonly examples = ['Basic', 'Icons', 'Dynamic width'];

    protected index = 0;

    protected max = 6;

    protected sizes: TuiSizeS[] = ['m', 's'];

    protected size = this.sizes[0]!;

    protected countVariants = [10, 15, 1, 2, 3, 4, 5, 6, 8, 100];

    protected count = this.countVariants[0]!;

    protected templateVariants = ['', 'Template'];
    protected selectedTemplate = this.templateVariants[0]!;

    protected get valueContent(): TemplateRef<unknown> | undefined {
        return this.templateRef && this.selectedTemplate ? this.templateRef : undefined;
    }
}
```

---
# components/Pagination
- **Package**: `KIT`
- **Type**: components
Pagination component enables the user to select a specific page from a range of pages

### How to Use (Import)

```ts
import {TuiPagination} from '@taiga-ui/kit';

// ...

@Component({
  standalone: true,
  imports: [
    // ...
    TuiPagination,
  ],
  // ...
})
export class Example {}
```

### How to Use (Template)

```html
<tui-pagination
  [length]="pageCount"
  [index]="currentPage"
  (indexChange)="goToPage($event)"
></tui-pagination>
```

### Example

```html
<tui-pagination [activePadding]="activePadding" [focusable]="focusable" [length]="length" [sidePadding]="sidePadding" [size]="size" [(index)]="index" />
```

### API

| Property | Type | Description |
|----------|-----|----------|
| focusable | `boolean` | Accepts focus with keyboard |
| index | `number` | Active page index |
| length | `number` | Total pages count |
| size | `TuiSizeS | TuiSizeL` | Size |
| activePadding | `number` | Amount of visible pages around active page |
| sidePadding | `number` | Amount of visible pages at the edges |

### Usage Examples

#### Basic

**Template:**
```html
<tui-input-slider tuiTextfieldSize="m" class="slider" [max]="length - 1" [quantum]="1" [tuiTextfieldCustomContent]="inputCustomContent" [tuiTextfieldLabelOutside]="true" [(ngModel)]="index" />
<ng-template #inputCustomContent>index</ng-template>
<tui-pagination [index]="index" [length]="length" (indexChange)="goToPage($event)" />
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiPagination} from '@taiga-ui/kit';
import {TuiInputSliderModule, TuiTextfieldControllerModule} from '@taiga-ui/legacy';

@Component({
    standalone: true,
    imports: [
        FormsModule,
        TuiInputSliderModule,
        TuiPagination,
        TuiTextfieldControllerModule,
    ],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Page {
    protected length = 64;

    protected index = 10;

    protected goToPage(index: number): void {
        this.index = index;
        console.info('New page:', index);
    }
}
```

#### Visible pages around active

**Template:**
```html
<tui-input-slider tuiTextfieldSize="m" class="slider" [max]="6" [quantum]="1" [tuiTextfieldCustomContent]="inputCustomContent" [tuiTextfieldLabelOutside]="true" [(ngModel)]="activePadding" />
<ng-template #inputCustomContent>activePadding</ng-template>
<tui-pagination [activePadding]="activePadding" [index]="10" [length]="64" />
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiPagination} from '@taiga-ui/kit';
import {TuiInputSliderModule, TuiTextfieldControllerModule} from '@taiga-ui/legacy';

@Component({
    standalone: true,
    imports: [
        FormsModule,
        TuiInputSliderModule,
        TuiPagination,
        TuiTextfieldControllerModule,
    ],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Page {
    protected activePadding = 2;
}
```

#### Visible edge pages

**Template:**
```html
<tui-input-slider tuiTextfieldSize="m" class="slider" [max]="6" [quantum]="1" [tuiTextfieldCustomContent]="inputCustomContent" [tuiTextfieldLabelOutside]="true" [(ngModel)]="sidePadding" />
<ng-template #inputCustomContent>sidePadding</ng-template>
<tui-pagination [index]="10" [length]="64" [sidePadding]="sidePadding" />
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiPagination} from '@taiga-ui/kit';
import {TuiInputSliderModule, TuiTextfieldControllerModule} from '@taiga-ui/legacy';

@Component({
    standalone: true,
    imports: [
        FormsModule,
        TuiInputSliderModule,
        TuiPagination,
        TuiTextfieldControllerModule,
    ],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Page {
    protected sidePadding = 3;
}
```

#### Custom

**Template:**
```html
<tui-pagination [content]="test" [length]="7" />
<ng-template #test let-index > {{ days[index] }} </ng-template>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiPagination} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [TuiPagination],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Page {
    protected readonly days = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
}
```


### TypeScript

```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {TuiDemo} from '@demo/utils';
import {type TuiSizeL, type TuiSizeS} from '@taiga-ui/core';
import {TuiPagination} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [TuiDemo, TuiPagination],
    templateUrl: './index.html',
    changeDetection,
})
export default class Page {
    protected focusable = true;
    protected index = 0;
    protected length = 8;
    protected readonly sizeVariants: ReadonlyArray<TuiSizeL | TuiSizeS> = ['s', 'm', 'l'];
    protected size = this.sizeVariants[2]!;
    protected activePadding = 1;
    protected sidePadding = 1;
}
```

---
# components/PdfViewer
- **Package**: `EXPERIMENTAL`
- **Type**: components
Wrapper component for viewing PDF files in an iframe

        
            PDF display in browsers is handled by each browser independently, using their own homegrown or 3rd-party
            code, as this is not part of the HTML spec. Keep in mind most mobile devices do not support displaying PDFs
            in iframe. Check it
            
                here
            
            . The only way to enforce rendering consistency in all browsers is to do the rendering server-side, bundle
            your own JS PDF renderer, or use a 3rd-party rendering service. If you want to display it yourself, so you
            need to rely on
            TUI_IS_MOBILE
            token to provide suitable alternative behavior. For example, you can use third-party service
            https://drive.google.com/viewerng/viewer?embedded=true&url=$YOUR_PUBLIC_PATH_TO_PDF
            or your own service to render PDF by
            
                pdf.js.

### How to Use (Import)

```ts
import {TuiPdfViewer} from '@taiga-ui/experimental';
// ...

@Component({
  standalone: true,
  imports: [
    // ...
    TuiPdfViewer,
  ],
})
export class Example {}
```

### How to Use (Template)

```html
<tui-pdf-viewer>
  <h2 tuiTitle>title</h2>
  <button tuiButton>Action</button>

  <iframe [src]="src"></iframe>
</tui-pdf-viewer>
```

### Usage Examples

#### Basic

**Template:**
```html
<button tuiButton type="button" (click)="open = true" > Open </button>
<ng-template let-observer [tuiDialogOptions]="{appearance: 'fullscreen'}" [(tuiDialog)]="open" >
<tui-pdf-viewer>
<h2 tuiTitle>file.pdf</h2>
<button iconStart="@tui.download" title="download" tuiButton type="button" [style.border-radius.rem]="5" (click)="observer.complete()" > {{ isMobile ? '' : 'Download' }} </button>
<iframe [src]="url"></iframe>
</tui-pdf-viewer>
</ng-template>
```
**TypeScript:**
```ts
import {Component, inject} from '@angular/core';
import {DomSanitizer} from '@angular/platform-browser';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TUI_IS_MOBILE} from '@taiga-ui/cdk';
import {TuiButton, TuiTitle} from '@taiga-ui/core';
import {TuiDialog, TuiPdfViewerComponent} from '@taiga-ui/experimental';

@Component({
    standalone: true,
    imports: [TuiButton, TuiDialog, TuiPdfViewerComponent, TuiTitle],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    private readonly sanitizer = inject(DomSanitizer);
    protected readonly isMobile = inject(TUI_IS_MOBILE);
    protected readonly pdf = 'assets/media/taiga.pdf';
    protected open = false;

    protected readonly url = this.sanitizer.bypassSecurityTrustResourceUrl(
        this.isMobile
            ? `https://drive.google.com/viewerng/viewer?embedded=true&url=https://taiga-ui.dev/${this.pdf}`
            : this.pdf,
    );
}
```

#### With responsive dialog

**Template:**
```html
<button tuiButton type="button" (click)="open = true" > Open </button>
<ng-template let-observer [tuiResponsiveDialogOptions]="{size: 'page', fullscreen: true}" [(tuiResponsiveDialog)]="open" >
<tui-pdf-viewer>
<h2 tuiTitle>file.pdf</h2>
<button *ngIf="!isMobile" iconStart="@tui.pen" title="download" tuiButton type="button" [style.border-radius.rem]="5" (click)="observer.complete(); alerts.open('Document signed').subscribe()" > Sign </button>
<button iconStart="@tui.download" title="download" tuiButton type="button" [style.border-radius.rem]="5" (click)="observer.complete()" > {{ isMobile ? '' : 'Download' }} </button>
<iframe [src]="url"></iframe>
</tui-pdf-viewer>
</ng-template>
```
**TypeScript:**
```ts
import {NgIf} from '@angular/common';
import {Component, inject} from '@angular/core';
import {DomSanitizer} from '@angular/platform-browser';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiResponsiveDialog} from '@taiga-ui/addon-mobile';
import {TUI_IS_MOBILE} from '@taiga-ui/cdk';
import {TuiAlertService, TuiButton, TuiTitle} from '@taiga-ui/core';
import {TuiPdfViewerComponent} from '@taiga-ui/experimental';

@Component({
    standalone: true,
    imports: [NgIf, TuiButton, TuiPdfViewerComponent, TuiResponsiveDialog, TuiTitle],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    private readonly sanitizer = inject(DomSanitizer);
    protected readonly alerts = inject(TuiAlertService);
    protected readonly isMobile = inject(TUI_IS_MOBILE);
    protected readonly pdf = 'assets/media/taiga.pdf';
    protected open = false;

    protected readonly url = this.sanitizer.bypassSecurityTrustResourceUrl(
        this.isMobile
            ? `https://drive.google.com/viewerng/viewer?embedded=true&url=https://taiga-ui.dev/${this.pdf}`
            : this.pdf,
    );
}
```

#### Loading and error states

**Template:**
```html
<button tuiButton type="button" (click)="openPdf()" > Open </button>
<ng-template [tuiDialogOptions]="{appearance: 'fullscreen'}" [(tuiDialog)]="open" >
<tui-pdf-viewer>
<h2 tuiTitle>file.pdf</h2>
<tui-loader *ngIf="loading(); else content" size="xl" [showLoader]="true" />
<ng-template #content>
<iframe *ngIf="!error(); else errorContent" [src]="url" ></iframe>
</ng-template>
<ng-template #errorContent>
<tui-block-status>
<img alt="not found" src="assets/images/not-found.svg" tuiSlot="top" class="image" />
<h4>Something went wrong</h4>
<span>Try again later</span>
<button appearance="secondary" size="s" tuiButton type="button" (click)="load()" > Retry </button>
</tui-block-status>
</ng-template>
</tui-pdf-viewer>
</ng-template>
```
**TypeScript:**
```ts
import {NgIf} from '@angular/common';
import {Component, inject, signal} from '@angular/core';
import {DomSanitizer} from '@angular/platform-browser';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TUI_IS_MOBILE} from '@taiga-ui/cdk';
import {TuiButton, TuiLoader, TuiTitle} from '@taiga-ui/core';
import {TuiDialog, TuiPdfViewerComponent} from '@taiga-ui/experimental';
import {TuiBlockStatus} from '@taiga-ui/layout';

@Component({
    standalone: true,
    imports: [
        NgIf,
        TuiBlockStatus,
        TuiButton,
        TuiDialog,
        TuiLoader,
        TuiPdfViewerComponent,
        TuiTitle,
    ],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    private readonly sanitizer = inject(DomSanitizer);
    protected readonly isMobile = inject(TUI_IS_MOBILE);
    protected readonly pdf = 'assets/media/taiga.pdf';
    protected open = false;

    protected readonly url = this.sanitizer.bypassSecurityTrustResourceUrl(
        'https://app.embedpdf.com/',
    );

    protected readonly loading = signal(true);
    protected readonly error = signal(false);

    protected openPdf(): void {
        this.open = true;
        this.load();
    }

    protected load(): void {
        this.loading.set(true);

        setTimeout(() => {
            this.loading.set(false);
            this.error.set(Math.random() <= 0.5);
        }, 1000);
    }
}
```


### TypeScript

```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {DemoRoute} from '@demo/routes';
import {TuiDemo} from '@demo/utils';

@Component({
    standalone: true,
    imports: [TuiDemo],
    templateUrl: './index.html',
    changeDetection,
})
export default class Page {
    protected readonly routes = DemoRoute;

    protected examples = ['Basic', 'With responsive dialog', 'Loading and error states'];
}
```

---
# components/PdfViewer
- **Package**: `KIT`
- **Type**: components
Custom dialog to preview PDF

        
            This version of the component is deprecated and will be removed in the next major version. Use
            
                new version of PdfViewer
            
            instead!

### Usage Examples

#### Basic

**Template:**
```html
<tui-notification class="tui-space_bottom-3"> Note that you need to bypass sanitizer in order to use the URL so make sure you trust it </tui-notification>
<button tuiButton type="button" (click)="show(actions)" > Taiga </button>
<ng-template #actions let-content="content" >
<a download size="s" tuiButton [href]="content" [style.border-radius.rem]="100" > Download </a>
</ng-template>
```
**TypeScript:**
```ts
import {Component, inject} from '@angular/core';
import {DomSanitizer} from '@angular/platform-browser';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TUI_IS_MOBILE} from '@taiga-ui/cdk';
import {TuiButton, TuiNotification} from '@taiga-ui/core';
import {type TuiPdfViewerOptions, TuiPdfViewerService} from '@taiga-ui/kit';
import {type PolymorpheusContent} from '@taiga-ui/polymorpheus';

@Component({
    standalone: true,
    imports: [TuiButton, TuiNotification],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    private readonly sanitizer = inject(DomSanitizer);
    private readonly pdfService = inject(TuiPdfViewerService);
    private readonly isMobile = inject(TUI_IS_MOBILE);
    private readonly pdf = 'assets/media/taiga.pdf';

    /**
     * @description:
     * Embedded PDFs in mobile doesn't work,
     * so you can use third-party services
     * or your own service to render PDF in mobile iframe
     */
    protected show(actions: PolymorpheusContent<TuiPdfViewerOptions>): void {
        this.pdfService
            .open(
                this.sanitizer.bypassSecurityTrustResourceUrl(
                    this.isMobile
                        ? `https://drive.google.com/viewerng/viewer?embedded=true&url=https://taiga-ui.dev/${this.pdf}`
                        : this.pdf,
                ),
                {
                    label: 'Taiga UI',
                    actions,
                },
            )
            .subscribe();
    }
}
```

#### Component

**Template:**
```html
<button tuiButton type="button" (click)="show()" > Taiga </button>
```
**TypeScript:**
```ts
import {Component, inject} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {type TuiPopover} from '@taiga-ui/cdk';
import {TuiAlertService, TuiButton} from '@taiga-ui/core';
import {type TuiPdfViewerOptions, TuiPdfViewerService} from '@taiga-ui/kit';
import {PolymorpheusComponent} from '@taiga-ui/polymorpheus';
import {switchMap} from 'rxjs';

import {ActionsContent} from './actions-content';
import {PdfContent} from './pdf-content';

export type Buttons = ReadonlyArray<
    Readonly<{
        onClick(context: TuiPopover<TuiPdfViewerOptions<Buttons>, string>): void;
        text: string;
    }>
>;

@Component({
    standalone: true,
    imports: [TuiButton],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    private readonly alerts = inject(TuiAlertService);
    private readonly pdfService = inject(TuiPdfViewerService);

    protected show(): void {
        const options: TuiPdfViewerOptions<Buttons> = {
            label: 'Taiga UI',
            actions: new PolymorpheusComponent(ActionsContent),
            data: [
                {
                    text: 'Sign',
                    onClick: (context) => context.completeWith('Document signed'),
                },
                {
                    text: 'Deny',
                    onClick: (context) => context.completeWith('Document denied'),
                },
            ],
        };

        this.pdfService
            .open<string>(new PolymorpheusComponent(PdfContent), options)
            .pipe(switchMap((response) => this.alerts.open(response)))
            .subscribe();
    }
}
```

#### Directive

**Template:**
```html
<button tuiButton type="button" (click)="open = true" > Taiga </button>
<ng-template [(tuiPdfViewer)]="open">
<iframe title="pdf" class="iframe" [src]="src" ></iframe>
</ng-template>
```
**TypeScript:**
```ts
import {Component, inject} from '@angular/core';
import {DomSanitizer} from '@angular/platform-browser';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TUI_IS_MOBILE} from '@taiga-ui/cdk';
import {TuiButton} from '@taiga-ui/core';
import {TuiPdfViewerDirective} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [TuiButton, TuiPdfViewerDirective],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    private readonly isMobile = inject(TUI_IS_MOBILE);
    private readonly sanitizer = inject(DomSanitizer);
    private readonly pdf = 'assets/media/taiga.pdf';

    protected open = false;

    /**
     * @description:
     * Embedded PDFs in mobile doesn't work,
     * so you can use third-party services
     * or your own service to render PDF in mobile iframe
     */
    protected readonly src = this.sanitizer.bypassSecurityTrustResourceUrl(
        this.isMobile
            ? `https://drive.google.com/viewerng/viewer?embedded=true&url=https://taiga-ui.dev/${this.pdf}`
            : this.pdf,
    );
}
```


### TypeScript

```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {DemoRoute} from '@demo/routes';
import {TuiDemo} from '@demo/utils';

@Component({
    standalone: true,
    imports: [TuiDemo],
    templateUrl: './index.html',
    changeDetection,
})
export default class Page {
    protected readonly exampleService = import('./examples/import/service.md?raw');

    protected readonly example2 = {
        TypeScript: import('./examples/2/index.ts?raw'),
        HTML: import('./examples/2/index.html?raw'),
        'actions-content.component.ts': import(
            './examples/2/actions-content/index.ts?raw'
        ),
        'actions-content.component.html': import(
            './examples/2/actions-content/index.html?raw'
        ),
        'pdf-content.component.ts': import('./examples/2/pdf-content/index.ts?raw'),
        'pdf-content.component.html': import('./examples/2/pdf-content/index.html?raw'),
        'pdf-content.component.less': import('./examples/2/pdf-content/index.less?raw'),
    };

    protected readonly routes = DemoRoute;
}
```

---
# components/PieChart
- **Package**: `ADDON-CHARTS`
- **Type**: components

### How to Use (Import)

```ts
import {TuiPieChart} from '@taiga-ui/addon-charts';

// ...

@Component({
  standalone: true,
  imports: [
    // ...
    TuiPieChart,
  ],
  // ...
})
export class Example {}
```

### How to Use (Template)

```html
<tui-pie-chart [value]="value"></tui-pie-chart>
```

### Example

```html
<tui-pie-chart class="chart" [size]="size" [value]="value" [(activeItemIndex)]="activeItemIndex" />
```

### API

| Property | Type | Description |
|----------|-----|----------|
| [(activeItemIndex)] | `number` | Active fragment |
| [size] | `TuiSizeS | TuiSizeXL` | Size |
| [value] | `readonly number[]` | Value |

### Usage Examples

#### sizes

**Template:**
```html
<div class="wrapper">
<tui-pie-chart size="xs" class="tui-space_right-4" [value]="value" />
<tui-pie-chart size="s" class="tui-space_right-4" [value]="value" />
<tui-pie-chart size="m" class="tui-space_right-4" [value]="value" />
<tui-pie-chart size="l" class="tui-space_right-4" [value]="value" />
<tui-pie-chart size="xl" class="tui-space_right-4" [value]="value" />
</div>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiPieChart} from '@taiga-ui/addon-charts';

@Component({
    standalone: true,
    imports: [TuiPieChart],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly value = [40, 30, 20, 10];
}
```

#### With labels

**Template:**
```html
<tui-pie-chart [tuiHintContent]="content" [value]="value" />
<ng-template #content let-index >
<span>{{ value[index] || 0 | tuiAmount: 'RUB' | async }}</span>
<div>{{ labels[index] }}</div>
</ng-template>
```
**TypeScript:**
```ts
import {AsyncPipe} from '@angular/common';
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiPieChart} from '@taiga-ui/addon-charts';
import {TuiAmountPipe} from '@taiga-ui/addon-commerce';
import {TuiHint} from '@taiga-ui/core';

@Component({
    standalone: true,
    imports: [AsyncPipe, TuiAmountPipe, TuiHint, TuiPieChart],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly value = [13769, 12367, 10172, 3018, 2592];
    protected readonly labels = ['Food', 'Cafe', 'Open Source', 'Taxi', 'Other'];
}
```


### TypeScript

```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {DemoRoute} from '@demo/routes';
import {TuiDemo} from '@demo/utils';
import {TuiPieChart} from '@taiga-ui/addon-charts';
import {TuiCurrency, tuiGetCurrencySymbol} from '@taiga-ui/addon-commerce';
import {type TuiContext, tuiRound, tuiSum} from '@taiga-ui/cdk';
import {tuiFormatNumber, type TuiSizeXL, type TuiSizeXS} from '@taiga-ui/core';
import {type PolymorpheusContent} from '@taiga-ui/polymorpheus';

@Component({
    standalone: true,
    imports: [TuiDemo, TuiPieChart],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    changeDetection,
})
export default class Page {
    protected readonly routes = DemoRoute;
    protected readonly valueVariants = [
        [0, 30, 20, 10],
        [40, 30, 20, 10],
        [13769, 12367, 10172, 3018, 2592],
    ];

    protected value = this.valueVariants[0]!;

    protected readonly activeItemIndexVariants = [NaN, 0, 1, 2];

    protected activeItemIndex = this.activeItemIndexVariants[0]!;

    protected readonly sizeVariants: ReadonlyArray<TuiSizeXL | TuiSizeXS> = [
        'xs',
        's',
        'm',
        'l',
        'xl',
    ];

    protected size = this.sizeVariants[2]!;

    protected readonly contentVariants: ReadonlyArray<
        PolymorpheusContent<TuiContext<number>>
    > = [
        '',
        ({$implicit}) => this.getPercent($implicit),
        ({$implicit}) => this.format($implicit),
    ];

    protected hintContent = this.contentVariants[0]!;

    protected getPercent(index: number): string {
        return `${tuiRound((100 * (this.value[index] ?? 0)) / tuiSum(...this.value), 2)} %`;
    }

    protected format(index: number): string {
        return `${tuiFormatNumber(this.value[index] ?? 0)} ${tuiGetCurrencySymbol(
            TuiCurrency.Ruble,
        )}`;
    }
}
```

### LESS

```less
.chart {
    margin: 0 auto;
}
```

---
# components/Pin
- **Package**: `KIT`
- **Type**: components
Pins are used to show a location on a 2D plane. Use
            color
            ,
            background
            ,
            border
            and
            box-shadow
            to customize the pin
        

        
            Pins are designed to be absolutely positioned on map or similar medium, therefore specifically their center
            is placed where you put them.

### How to Use (Import)

```ts
import {Component} from '@angular/core';
import {TuiPin} from '@taiga-ui/kit';
// ...

@Component({
  standalone: true,
  imports: [
    // ...
    TuiPin,
  ],
})
export class Example {}
```

### How to Use (Template)

```html
<tui-pin [open]="open">16</tui-pin>
```

### Usage Examples

#### Default

**Template:**
```html
<tui-pin>
<img alt="avatar" src="assets/images/avatar.jpg" />
</tui-pin>
<tui-pin>
<tui-icon icon="@tui.dollar-sign" />
</tui-pin>
<tui-pin class="white">
<tui-icon icon="@tui.dollar-sign" />
</tui-pin>
<tui-pin class="white">4.5</tui-pin>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiIcon} from '@taiga-ui/core';
import {TuiPin} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [TuiIcon, TuiPin],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {}
```

#### Dot

**Template:**
```html
<tui-pin class="blue" />
<tui-pin class="yellow" />
<tui-pin class="green" />
<tui-pin class="red" />
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiPin} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [TuiPin],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {}
```

#### Openable

**Template:**
```html
<button tuiPin type="button" [open]="a" (click)="a = !a" >
<img alt="avatar" src="assets/images/avatar.jpg" />
</button>
<button title="dollar" tuiPin type="button" [open]="b" [style.inset-inline-start.rem]="5" (click)="b = !b" >
<tui-icon icon="@tui.dollar-sign" />
</button>
<button title="dollar" tuiPin type="button" class="link" [open]="c" [style.inset-inline-start.rem]="10" (click)="c = !c" >
<tui-icon icon="@tui.dollar-sign" />
</button>
<button tuiPin type="button" class="crazy" [open]="d" [style.inset-inline-start.rem]="15" (click)="d = !d" > 4.5 </button>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiIcon} from '@taiga-ui/core';
import {TuiPin} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [TuiIcon, TuiPin],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected a = true;
    protected b = false;
    protected c = true;
    protected d = false;
}
```


### TypeScript

```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {TuiDemo} from '@demo/utils';

@Component({
    standalone: true,
    imports: [TuiDemo],
    templateUrl: './index.html',
    changeDetection,
})
export default class Page {
    protected readonly examples = ['Default', 'Dot', 'Openable'];
}
```

---
# components/Preview
- **Package**: `KIT`
- **Type**: components
Preview component allows to open modal for viewing some document and to work with it (download, zoom, rotate
            etc)
        

        As a document you can provide images, embeds and other arbitrary content.

        
            The component automatically adjusts to the mobile device

### How to Use (Import)

```ts
import {, inject, TemplateRef, ViewChild} from '@angular/core';
import {TuiPreviewDialogService} from '@taiga-ui/kit';
import {PolymorpheusContent} from '@taiga-ui/polymorpheus';
import {TuiDialogContext} from '@taiga-ui/core';

@Component({
  // ...
})
export class Example {
  private readonly previewDialogService = inject(TuiPreviewDialogService);

  @ViewChild(`preview`)
  readonly preview: TemplateRef<TuiDialogContext<void>>;

  show() {
    this.previewDialogService.open(this.preview).subscribe();
  }
}
```

### How to Use (Template)

```html
<ng-template #preview>
  <tui-preview>
    <tui-preview-title>{{title}}</tui-preview-title>
    <tui-preview-pagination
      [length]="2"
      [(index)]="index"
    ></tui-preview-pagination>

    <button
      tuiIconButton
      tuiPreviewAction
      icon="@tui.trash"
      title="Delete"
      (click)="delete()"
    ></button>
    <button
      tuiIconButton
      tuiPreviewAction
      icon="@tui.download"
      title="Download"
      (click)="download()"
    ></button>

    <img
      *polymorpheusOutlet="previewContent as src"
      alt=""
      [src]="src"
    />
  </tui-preview>
</ng-template>
```

### Usage Examples

#### Full preview

**Template:**
```html
<div class="tui-space_bottom-2">With all features</div>
<button size="m" tuiButton type="button" class="tui-space_bottom-4" (click)="show()" > Show preview </button>
<ng-template #preview let-preview >
<tui-preview [initialScale]="1.0" [rotatable]="true" (tuiSwipe)="onSwipe($event)" >
<tui-preview-title>{{ titles[index] }}</tui-preview-title>
<tui-preview-pagination [length]="length" [(index)]="index" />
<button iconStart="@tui.trash" tuiIconButton tuiPreviewAction type="button" (click)="delete()" > Delete </button>
<button iconStart="@tui.download" tuiIconButton tuiPreviewAction type="button" (click)="download()" > Download </button>
<button iconStart="@tui.x" tuiIconButton tuiPreviewAction type="button" (click)="preview.complete()" > Close </button>
<img *polymorpheusOutlet="previewContent as src" alt="preview" [src]="src" />
</tui-preview>
</ng-template>
<ng-template #contentSample>
<div class="content">
<h1>Important document</h1>
<p>Hello everyone! This is some important document in A4 format, although it is made using html</p>
<p> This shows that the component preview can work with absolutely any content: this way you can show any template, image, pdf or even iframe with your favorite site. We will put this content in the center of the portal and provide the user with control over it, and we will provide you with convenient levers to change it and process actions. </p>
<img alt="logo" src="https://raw.githubusercontent.com/taiga-family/ng-polymorpheus/main/projects/demo/assets/logo.svg" class="polymorpheus" />
</div>
</ng-template>
```
**TypeScript:**
```ts
import {Component, inject, type TemplateRef, ViewChild} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {tuiClamp, TuiSwipe, type TuiSwipeEvent} from '@taiga-ui/cdk';
import {TuiAlertService, TuiButton, type TuiDialogContext} from '@taiga-ui/core';
import {TuiPreview, TuiPreviewDialogService} from '@taiga-ui/kit';
import {type PolymorpheusContent, PolymorpheusOutlet} from '@taiga-ui/polymorpheus';

@Component({
    standalone: true,
    imports: [PolymorpheusOutlet, TuiButton, TuiPreview, TuiSwipe],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    private readonly previewService = inject(TuiPreviewDialogService);
    private readonly alerts = inject(TuiAlertService);

    @ViewChild('preview')
    protected readonly preview?: TemplateRef<TuiDialogContext>;

    @ViewChild('contentSample')
    protected readonly contentSample?: TemplateRef<Record<string, unknown>>;

    protected index = 0;
    protected length = 2;
    protected titles = ['Transaction cert.jpg', 'My face.jpg'];

    protected get previewContent(): PolymorpheusContent {
        return this.index === 0 && this.contentSample
            ? this.contentSample
            : 'https://avatars.githubusercontent.com/u/10106368';
    }

    protected show(): void {
        this.previewService.open(this.preview || '').subscribe({
            complete: () => console.info('complete'),
        });
    }

    protected download(): void {
        this.alerts.open('Downloading...').subscribe();
    }

    protected delete(): void {
        this.alerts.open('Deleting...').subscribe();
    }

    protected onSwipe(swipe: TuiSwipeEvent): void {
        if (swipe.direction === 'left') {
            this.index = tuiClamp(this.index + 1, 0, this.length - 1);
        }

        if (swipe.direction === 'right') {
            this.index = tuiClamp(this.index - 1, 0, this.length - 1);
        }
    }
}
```

#### Preview with directive

**Template:**
```html
<button size="m" tuiButton type="button" class="tui-space_bottom-4" (click)="open = !open" > Show preview </button>
<ng-template [(tuiPreviewDialog)]="open">
<tui-preview>
<tui-preview-title>{{ titles[index] }}</tui-preview-title>
<tui-preview-pagination [length]="length" [(index)]="index" />
<button iconStart="@tui.x" tuiIconButton tuiPreviewAction type="button" (click)="open = false" > Close </button>
<img *polymorpheusOutlet="content[index] as src" alt="preview" [src]="src" />
</tui-preview>
</ng-template>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiButton} from '@taiga-ui/core';
import {TuiPreview, TuiPreviewDialogDirective} from '@taiga-ui/kit';
import {PolymorpheusOutlet} from '@taiga-ui/polymorpheus';

@Component({
    standalone: true,
    imports: [PolymorpheusOutlet, TuiButton, TuiPreview, TuiPreviewDialogDirective],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    protected open = false;
    protected index = 0;
    protected length = 2;
    protected titles = ['pic_1.jpg', 'pic_2.jpg'];
    protected content = [
        'https://picsum.photos/600/500',
        'https://picsum.photos/500/600',
    ];
}
```

#### Simple mode

**Template:**
```html
<button size="m" tuiButton type="button" class="tui-space_bottom-4" (click)="show()" > Show simple preview </button>
<ng-template #preview let-preview >
<tui-preview [rotatable]="false" [zoomable]="false" >
<iframe allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen frameborder="0" src="https://www.youtube.com/embed/dQw4w9WgXcQ?autoplay=1" title="Youtube" class="content" ></iframe>
<button iconStart="@tui.x" tuiIconButton tuiPreviewAction type="button" (click)="preview.complete()" > Close </button>
</tui-preview>
</ng-template>
```
**TypeScript:**
```ts
import {Component, inject, type TemplateRef, ViewChild} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiButton, type TuiDialogContext} from '@taiga-ui/core';
import {TuiPreview, TuiPreviewDialogService} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [TuiButton, TuiPreview],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    private readonly previewDialogService = inject(TuiPreviewDialogService);

    @ViewChild('preview')
    protected readonly preview?: TemplateRef<TuiDialogContext>;

    protected show(): void {
        this.previewDialogService.open(this.preview || '').subscribe();
    }
}
```

#### With loading and unavailable image

**Template:**
```html
<button size="m" tuiButton type="button" class="tui-space_bottom-4" (click)="show()" > Show preview </button>
<ng-template #preview let-preview >
<tui-preview [rotatable]="!(contentUnavailable$ | async)" [zoomable]="!(contentUnavailable$ | async) && !(loading$ | async)" >
<tui-preview-title>{{ title$ | async }}</tui-preview-title>
<tui-preview-pagination [index]="index$$.value" [length]="items.length" (indexChange)="index$$.next($event)" />
<button iconStart="@tui.download" tuiIconButton tuiPreviewAction type="button" (click)="download()" > Download </button>
<button iconStart="@tui.x" tuiIconButton tuiPreviewAction type="button" (click)="preview.complete()" > Close </button>
<ng-container *ngIf="contentUnavailable$ | async">
<div tuiTheme="dark" class="t-container" >
<tui-icon icon="@tui.file" class="t-icon" />
<div>Preview unavailable</div>
</div>
</ng-container>
<img *ngIf="imageSrc$ | async as src" alt="img source" height="512" width="512" [src]="src" />
<tui-loader *ngIf="loading$ | async" size="xl" class="t-loader" />
</tui-preview>
</ng-template>
```
**TypeScript:**
```ts
import {AsyncPipe, NgIf} from '@angular/common';
import {Component, inject, type TemplateRef, ViewChild} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {tuiIsPresent} from '@taiga-ui/cdk';
import {TuiButton, type TuiDialogContext, TuiIcon, TuiLoader} from '@taiga-ui/core';
import {TuiPreview, TuiPreviewDialogService} from '@taiga-ui/kit';
import {
    BehaviorSubject,
    filter,
    map,
    type Observable,
    of,
    startWith,
    switchMap,
    timer,
} from 'rxjs';

@Component({
    standalone: true,
    imports: [AsyncPipe, NgIf, TuiButton, TuiIcon, TuiLoader, TuiPreview],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    private readonly previewDialogService = inject(TuiPreviewDialogService);

    @ViewChild('preview')
    protected readonly preview?: TemplateRef<TuiDialogContext>;

    protected readonly items = [
        {
            title: 'some table.xlsx',
            hasPreview: false,
        },
        {
            title: 'Content #2',
            hasPreview: true,
        },
    ];

    protected readonly index$$ = new BehaviorSubject<number>(0);

    protected readonly item$ = this.index$$.pipe(
        map((index) => this.items[index]),
        filter(tuiIsPresent),
    );

    protected readonly title$ = this.item$.pipe(map((item) => item.title));

    protected readonly contentUnavailable$ = this.item$.pipe(
        map((item) => !item.hasPreview),
    );

    protected readonly imageSrc$ = this.item$.pipe(
        switchMap((item) =>
            item.hasPreview ? this.emulateBackendRequest().pipe(startWith('')) : of(null),
        ),
    );

    protected readonly loading$ = this.imageSrc$.pipe(map((src) => src === ''));

    protected show(): void {
        this.previewDialogService.open(this.preview || '').subscribe();
    }

    protected download(): void {
        console.info('downloading...');
    }

    protected emulateBackendRequest(): Observable<string> {
        return timer(1500).pipe(
            map(() => 'https://ng-web-apis.github.io/dist/assets/images/web-api.svg'),
        );
    }
}
```


### TypeScript

```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {TuiDemo} from '@demo/utils';

@Component({
    standalone: true,
    imports: [TuiDemo],
    templateUrl: './index.html',
    changeDetection,
})
export default class Page {
    protected readonly examples = [
        'Full preview',
        'Preview with directive',
        'Simple mode',
        'With loading and unavailable image',
    ];
}
```

---
# components/ProgressBar
- **Package**: `KIT`
- **Type**: components
tuiProgressBar
            
            
                – attribute component for native html tag
                '">
                .
            
        
        
            Usage:
            '">
            .

### How to Use (Import)

```ts
import {TuiProgress} from '@taiga-ui/kit';

// ...

@Component({
  standalone: true,
  imports: [
    // ...
    TuiProgress,
  ],
})
export class Example {}
```

### How to Use (Template)

```html
<progress
  tuiProgressBar
  [value]="40"
  [max]="100"
></progress>
```

### Example

```html
<progress tuiProgressBar class="api-progress" [color]="color" [max]="max" [size]="size" [value]="value" ></progress>
```

### API

| Property | Type | Description |
|----------|-----|----------|
| value | `number` | Native attribute value of '"> |
| max | `number` | Native attribute max of '"> |
| size | `TuiSizeXS | TuiSizeXXL` | Size of the progress element |
| color | `string` | Color of the progress indicator We recommend set solid color via '"> 's CSS-property color (especially, if you support old not-chromium based Edge) |

### Usage Examples

#### Basic

**Template:**
```html
<progress max="100" tuiProgressBar [value]="value$ | async" ></progress>
```
**TypeScript:**
```ts
import {AsyncPipe, isPlatformServer} from '@angular/common';
import {Component, inject, PLATFORM_ID} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TUI_IS_E2E} from '@taiga-ui/cdk';
import {TuiProgress} from '@taiga-ui/kit';
import {map, of, startWith, timer} from 'rxjs';

@Component({
    standalone: true,
    imports: [AsyncPipe, TuiProgress],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly value$ =
        inject(TUI_IS_E2E) || isPlatformServer(inject(PLATFORM_ID))
            ? of(40)
            : timer(300, 300).pipe(
                  map((i) => i + 30),
                  startWith(30),
              );
}
```

#### Multicolor

**Template:**
```html
<h6 class="description">Single color</h6>
<p> Use <code [textContent]="'<progress />'"></code> 's CSS-property <code>color</code> to set solid color of progress indicator. </p>
<progress max="100" tuiProgressBar class="progress" [value]="fastValue$ | async" ></progress>
<h6 class="description">With fancy color gradient</h6>
<p> Set component's input property <code>color</code> to get more complex color combinations. </p>
<progress color="linear-gradient(to right, var(--tui-chart-categorical-02), var(--tui-chart-categorical-14), var(--tui-chart-categorical-12))" max="100" tuiProgressBar class="progress" [value]="fastValue$ | async" ></progress>
<p> Use directive <code>tuiProgressFixedGradient</code> to make gradient fixed. </p>
<progress color="linear-gradient(to right, var(--tui-chart-categorical-02), var(--tui-chart-categorical-14), var(--tui-chart-categorical-12))" max="100" tuiProgressBar tuiProgressFixedGradient class="progress" [value]="fastValue$ | async" ></progress>
<h6 class="description">Multicolor segments</h6>
<p> Use <code>tuiProgressColorSegments</code> directive to to get multicolor segments. </p>
<progress max="100" tuiProgressBar class="progress" [tuiProgressColorSegments]="colors" [value]="fastValue$ | async" ></progress>
<progress tuiProgressBar class="progress" [max]="colors.length" [tuiProgressColorSegments]="colors" [value]="slowValue$ | async" ></progress>
```
**TypeScript:**
```ts
import {AsyncPipe, isPlatformServer} from '@angular/common';
import {Component, inject, PLATFORM_ID} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TUI_IS_E2E} from '@taiga-ui/cdk';
import {TuiProgress} from '@taiga-ui/kit';
import {of, timer} from 'rxjs';

@Component({
    standalone: true,
    imports: [AsyncPipe, TuiProgress],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    private readonly animationDisabled =
        inject(TUI_IS_E2E) || isPlatformServer(inject(PLATFORM_ID));

    protected readonly fastValue$ = this.animationDisabled ? of(80) : timer(500, 100);
    protected readonly slowValue$ = this.animationDisabled ? of(4) : timer(500, 2000);
    protected readonly colors = [
        'var(--tui-chart-categorical-01)',
        'var(--tui-chart-categorical-21)',
        'lightskyblue',
        '#3682db',
        'var(--tui-background-accent-1)',
    ];
}
```

#### Sizes

**Template:**
```html
<progress max="100" size="xs" tuiProgressBar [value]="55" ></progress>
<progress max="100" size="s" tuiProgressBar [value]="60" ></progress>
<progress max="100" size="m" tuiProgressBar [value]="65" ></progress>
<progress max="100" size="l" tuiProgressBar [value]="70" ></progress>
<progress max="100" size="xl" tuiProgressBar [value]="75" ></progress>
<progress max="100" size="xxl" tuiProgressBar [value]="80" ></progress>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiProgress} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [TuiProgress],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {}
```

#### With label

**Template:**
```html
<label *ngIf="value$ | async as value" tuiProgressLabel class="label-wrapper" > {{ value }}% <progress size="l" tuiProgressBar [max]="max" [value]="value" ></progress>
</label>
```
**TypeScript:**
```ts
import {AsyncPipe, isPlatformServer, NgIf} from '@angular/common';
import {Component, inject, PLATFORM_ID} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TUI_IS_E2E} from '@taiga-ui/cdk';
import {TuiProgress} from '@taiga-ui/kit';
import {map, of, startWith, takeWhile, timer} from 'rxjs';

@Component({
    standalone: true,
    imports: [AsyncPipe, NgIf, TuiProgress],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly max = 100;
    protected readonly value$ =
        inject(TUI_IS_E2E) || isPlatformServer(inject(PLATFORM_ID))
            ? of(30)
            : timer(300, 300).pipe(
                  map((i) => i + 30),
                  startWith(30),
                  takeWhile((value) => value <= this.max),
              );
}
```

#### Stacked progress bars

**Template:**
```html
<label tuiProgressLabel class="label-wrapper" >
<progress max="4" size="s" tuiProgressBar class="progress" [value]="3" ></progress>
<progress max="4" size="s" tuiProgressBar class="progress" [value]="1" ></progress>
</label>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiProgress} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [TuiProgress],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {}
```

#### Indeterminate

Indeterminate state expresses an unspecified amount of wait time. If there is no [value] attribute, the ProgressBar is indeterminate.

**Template:**
```html
<progress max="100" tuiProgressBar ></progress>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiProgress} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [TuiProgress],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {}
```

#### Customizable corners

You can toggle off round corners of the progress bar by setting border-radius: 0 .

**Template:**
```html
<progress new tuiProgressBar [max]="100" [value]="50" ></progress>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiProgress} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [TuiProgress],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {}
```


### TypeScript

```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {TuiDemo} from '@demo/utils';
import {TuiLink, type TuiSizeXS, type TuiSizeXXL} from '@taiga-ui/core';
import {TuiProgress} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [TuiDemo, TuiLink, TuiProgress],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    changeDetection,
})
export default class Page {
    protected value = 6;
    protected max = 10;

    protected readonly sizeVariants: ReadonlyArray<TuiSizeXS | TuiSizeXXL> = [
        'xs',
        's',
        'm',
        'l',
        'xl',
        'xxl',
    ];

    protected size: TuiSizeXS | TuiSizeXXL = this.sizeVariants[2]!;

    protected readonly colorVariants: readonly string[] = [
        'var(--tui-background-accent-1)',
        'lightskyblue',
        '#3682db',
        'rgba(74, 201, 155, 1)',
        'linear-gradient(to right, var(--tui-chart-categorical-02), var(--tui-chart-categorical-14), var(--tui-chart-categorical-12))',
    ];

    protected color = this.colorVariants[0]!;
}
```

### LESS

```less
@import '@taiga-ui/core/styles/taiga-ui-local';

.api-progress {
    inline-size: 50%;

    @media @tui-mobile {
        inline-size: 100%;
    }
}

dt,
dd {
    display: inline;
    margin: 0;
}
```

---
# components/ProgressCircle
- **Package**: `KIT`
- **Type**: components
'">
            
            
                is a component to visually represent the completion of a process or operation (as a partially filled
                circle/ring). It shows how much has been completed and how much remains.

### How to Use (Import)

```ts
import {TuiProgress} from '@taiga-ui/kit';

// ...

@Component({
  standalone: true,
  imports: [
    // ...
    TuiProgress,
  ],
  // ...
})
export class Example {}
```

### How to Use (Template)

```html
<tui-progress-circle
  [max]="100"
  [value]="70"
></tui-progress-circle>
```

### Example

```html
<tui-progress-circle [arc]="arc" [color]="color" [max]="max" [size]="size" [value]="value" />
```

### API

| Property | Type | Description |
|----------|-----|----------|
| [value] | `number` | is omitted. |
| [max] | `number` |  |
| [size] | `TuiSizeXXL | TuiSizeXXS` | Size of the circle. |
| [color] | `string` |  |
| [arc] | `boolean` | Use arc shape with small bottom open arc sector (instead of default circle). |

### Usage Examples

#### Basic

**Template:**
```html
<tui-progress-circle size="xl" [max]="max" [value]="(value$ | async) || 0" />
```
**TypeScript:**
```ts
import {AsyncPipe, isPlatformServer} from '@angular/common';
import {Component, inject, PLATFORM_ID} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TUI_IS_E2E} from '@taiga-ui/cdk';
import {TuiProgress} from '@taiga-ui/kit';
import {map, of, startWith, takeWhile, timer} from 'rxjs';

@Component({
    standalone: true,
    imports: [AsyncPipe, TuiProgress],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly max = 100;
    protected readonly value$ =
        inject(TUI_IS_E2E) || isPlatformServer(inject(PLATFORM_ID))
            ? of(30)
            : timer(300, 200).pipe(
                  map((i) => i + 30),
                  startWith(30),
                  takeWhile((value) => value <= this.max),
              );
}
```

#### Sizes

**Template:**
```html
<tui-progress-circle *ngFor="let size of sizes" [max]="100" [size]="size" [value]="60" />
```
**TypeScript:**
```ts
import {NgForOf} from '@angular/common';
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiProgress} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [NgForOf, TuiProgress],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly sizes = ['xxs', 'xs', 's', 'm', 'l', 'xl', 'xxl'] as const;
}
```

#### With label

**Template:**
```html
<label *ngIf="value$ | async as value" tuiProgressLabel >
<span class="text">COMPLETED</span>
<span class="percent">{{ value }}%</span>
<tui-progress-circle size="xl" [max]="max" [value]="value" />
</label>
```
**TypeScript:**
```ts
import {AsyncPipe, isPlatformServer, NgIf} from '@angular/common';
import {Component, inject, PLATFORM_ID} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TUI_IS_E2E} from '@taiga-ui/cdk';
import {TuiProgress} from '@taiga-ui/kit';
import {map, of, startWith, takeWhile, timer} from 'rxjs';

@Component({
    standalone: true,
    imports: [AsyncPipe, NgIf, TuiProgress],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly max = 100;
    protected readonly value$ =
        inject(TUI_IS_E2E) || isPlatformServer(inject(PLATFORM_ID))
            ? of(30)
            : timer(300, 200).pipe(
                  map((i) => i + 30),
                  startWith(30),
                  takeWhile((value) => value <= this.max),
              );
}
```

#### Colors

**Template:**
```html
<tui-progress-circle color="url(#gradient)" size="xl" [max]="4" [value]="3" />
<tui-progress-circle size="l" class="progress" [max]="4" [value]="3" />
<tui-progress-circle size="m" class="progress" [max]="4" [value]="3" />
<tui-progress-circle size="s" class="progress" [max]="4" [value]="3" />
<svg height="0" width="0" >
<defs>
<linearGradient id="gradient" gradientTransform="rotate(95)" >
<stop offset="0%" stop-color="var(--tui-chart-categorical-02)" />
<stop offset="45%" stop-color="var(--tui-chart-categorical-14)" />
<stop offset="100%" stop-color="var(--tui-chart-categorical-12)" />
</linearGradient>
</defs>
</svg>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiProgress} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [TuiProgress],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {}
```

#### Dynamic color

**Template:**
```html
<tui-progress-circle size="xl" [max]="max" [style.color]="color$ | async" [value]="(value$ | async) || 0" />
```
**TypeScript:**
```ts
import {AsyncPipe, isPlatformServer} from '@angular/common';
import {Component, inject, PLATFORM_ID} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TUI_IS_E2E} from '@taiga-ui/cdk';
import {TuiProgress} from '@taiga-ui/kit';
import {map, of, repeat, share, takeWhile, timer} from 'rxjs';

@Component({
    standalone: true,
    imports: [AsyncPipe, TuiProgress],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly max = 100;

    protected readonly value$ =
        inject(TUI_IS_E2E) || isPlatformServer(inject(PLATFORM_ID))
            ? of(30)
            : timer(300, 200).pipe(
                  takeWhile((value) => value <= this.max),
                  share(),
                  repeat(),
              );

    protected readonly color$ = this.value$.pipe(
        map((value) => {
            if (value < 33) {
                return 'red';
            }

            if (value < 66) {
                return 'yellow';
            }

            return 'green';
        }),
    );
}
```

#### Anti-clockwise direction

Use power of CSS property transform to customize direction and starting point of progress circle. By default, ProgressCircle has clockwise direction and starts from the top (i.e. it already contains transform: rotate(-90deg) ).

**Template:**
```html
<tui-progress-circle size="xl" [max]="max" [value]="(value$ | async) || 0" />
```
**TypeScript:**
```ts
import {AsyncPipe, isPlatformServer} from '@angular/common';
import {Component, inject, PLATFORM_ID} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TUI_IS_E2E} from '@taiga-ui/cdk';
import {TuiProgress} from '@taiga-ui/kit';
import {of, repeat, takeWhile, timer} from 'rxjs';

@Component({
    standalone: true,
    imports: [AsyncPipe, TuiProgress],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly max = 100;
    protected readonly value$ =
        inject(TUI_IS_E2E) || isPlatformServer(inject(PLATFORM_ID))
            ? of(30)
            : timer(300, 200).pipe(
                  takeWhile((value) => value <= this.max),
                  repeat(),
              );
}
```

#### Thickness

Use css-variable --tui-thickness to customize width of the circle's stroke.

**Template:**
```html
<tui-progress-circle *tuiRepeatTimes="let _ of 4" size="l" [max]="100" [value]="60" />
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiRepeatTimes} from '@taiga-ui/cdk';
import {TuiProgress} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [TuiProgress, TuiRepeatTimes],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {}
```

#### Arc mode

Set arc attribute to transform default circular shape into arc with small bottom open arc sector (gap between arc ends).

**Template:**
```html
<tui-progress-circle *ngFor="let size of sizes" arc [size]="size" [value]="0.5" />
```
**TypeScript:**
```ts
import {NgForOf} from '@angular/common';
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiProgress} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [NgForOf, TuiProgress],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly sizes = ['xxs', 'xs', 's', 'm', 'l', 'xl', 'xxl'] as const;
}
```


### TypeScript

```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {TuiDemo} from '@demo/utils';
import {TuiLink, type TuiSizeXXL, type TuiSizeXXS} from '@taiga-ui/core';
import {tuiInputNumberOptionsProvider, TuiProgress} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [TuiDemo, TuiLink, TuiProgress],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    changeDetection,
    providers: [tuiInputNumberOptionsProvider({min: 0})],
})
export default class Page {
    protected value = 6;
    protected max = 10;
    protected arc = false;

    protected readonly sizeVariants: ReadonlyArray<TuiSizeXXL | TuiSizeXXS> = [
        'xxs',
        'xs',
        's',
        'm',
        'l',
        'xl',
        'xxl',
    ];

    protected size: TuiSizeXXL | TuiSizeXXS = 'm';

    protected readonly colorVariants: readonly string[] = [
        'var(--tui-background-accent-1)',
        'lightskyblue',
        '#3682db',
        'rgba(74, 201, 155, 1)',
        'url(#gradient)',
    ];

    protected color = this.colorVariants[0]!;
}
```

### LESS

```less
dt,
dd {
    display: inline;
    margin: 0;
}
```

---
# components/PullToRefresh
- **Package**: `ADDON-MOBILE`
- **Type**: components
Component to refresh content after pull top. It emulates appearance of native iOS and Android components

        
            It emits
            (pulled)
            event when the pull threshold is reached.
        
        
            You can set that threshold in pixels by
            TUI_PULL_TO_REFRESH_THRESHOLD
            DI token.
        
        
            You can finish loading with
            TUI_PULL_TO_REFRESH_LOADED
            stream token that can be provided in DI.
        

        
            Use
            overscroll-behavior: none;
            CSS on your scrolling container to stop elastic scrolling on iOS

### How to Use (Import)

```ts
import {TuiPullToRefresh} from '@taiga-ui/addon-mobile';

// ...

@Component({
  standalone: true,
  imports: [
    // ...
    TuiPullToRefresh,
  ],
  // ...
})
export class Example {}
```

### How to Use (Template)

```html
<tui-pull-to-refresh (pulled)="onPulled()">content</tui-pull-to-refresh>
```

### Usage Examples

#### Android

**Template:**
```html
<tui-pull-to-refresh (pulled)="onPull()">
<button tuiButton type="button" (click)="finishLoading()" > Finish loading </button>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
</tui-pull-to-refresh>
```
**TypeScript:**
```ts
import {Component, inject} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {
    TUI_ANDROID_LOADER,
    TUI_PULL_TO_REFRESH_COMPONENT,
    TUI_PULL_TO_REFRESH_LOADED,
    TuiPullToRefresh,
} from '@taiga-ui/addon-mobile';
import {TUI_IS_ANDROID, TUI_IS_IOS} from '@taiga-ui/cdk';
import {TuiAlertService, TuiButton} from '@taiga-ui/core';
import {Subject} from 'rxjs';

@Component({
    standalone: true,
    imports: [TuiButton, TuiPullToRefresh],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
    providers: [
        {
            provide: TUI_IS_IOS,
            useValue: false,
        },
        {
            provide: TUI_IS_ANDROID,
            useValue: true,
        },
        {
            provide: TUI_PULL_TO_REFRESH_COMPONENT,
            useValue: TUI_ANDROID_LOADER,
        },
        {
            provide: TUI_PULL_TO_REFRESH_LOADED,
            useClass: Subject,
        },
    ],
})
export default class Example {
    private readonly alerts = inject(TuiAlertService);
    private readonly loaded$ = inject<Subject<void>>(TUI_PULL_TO_REFRESH_LOADED);

    protected onPull(): void {
        this.alerts.open('Loading...').subscribe();
    }

    protected finishLoading(): void {
        this.loaded$.next();
    }
}
```

#### iOS

**Template:**
```html
<tui-pull-to-refresh (pulled)="onPull()">
<button tuiButton type="button" (click)="finishLoading()" > Finish loading </button>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
</tui-pull-to-refresh>
```
**TypeScript:**
```ts
import {Component, inject} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {
    TUI_IOS_LOADER,
    TUI_PULL_TO_REFRESH_COMPONENT,
    TUI_PULL_TO_REFRESH_LOADED,
    TuiPullToRefresh,
} from '@taiga-ui/addon-mobile';
import {TUI_IS_ANDROID, TUI_IS_IOS} from '@taiga-ui/cdk';
import {TuiAlertService, TuiButton} from '@taiga-ui/core';
import {Subject} from 'rxjs';

@Component({
    standalone: true,
    imports: [TuiButton, TuiPullToRefresh],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
    providers: [
        {
            provide: TUI_IS_IOS,
            useValue: true,
        },
        {
            provide: TUI_IS_ANDROID,
            useValue: false,
        },
        {
            provide: TUI_PULL_TO_REFRESH_COMPONENT,
            useValue: TUI_IOS_LOADER,
        },
        {
            provide: TUI_PULL_TO_REFRESH_LOADED,
            useClass: Subject,
        },
    ],
})
export default class Example {
    private readonly alerts = inject(TuiAlertService);
    private readonly loaded$ = inject<Subject<void>>(TUI_PULL_TO_REFRESH_LOADED);

    protected onPull(): void {
        this.alerts.open('Loading...').subscribe();
    }

    protected finishLoading(): void {
        this.loaded$.next();
    }
}
```

#### Virtual scroll

**Template:**
```html
<tui-scrollbar>
<tui-pull-to-refresh (pulled)="onPull()">
<cdk-virtual-scroll-viewport appendOnly itemSize="50" tuiScrollable class="example-viewport tui-zero-scrollbar" >
<div *cdkVirtualFor="let item of items" class="example-item" > {{ item }} </div>
</cdk-virtual-scroll-viewport>
</tui-pull-to-refresh>
</tui-scrollbar>
```
**TypeScript:**
```ts
import {
    CdkFixedSizeVirtualScroll,
    CdkVirtualForOf,
    CdkVirtualScrollViewport,
} from '@angular/cdk/scrolling';
import {Component, inject} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {
    TUI_ANDROID_LOADER,
    TUI_PULL_TO_REFRESH_COMPONENT,
    TUI_PULL_TO_REFRESH_LOADED,
    TuiPullToRefresh,
} from '@taiga-ui/addon-mobile';
import {TUI_IS_ANDROID, TUI_IS_IOS} from '@taiga-ui/cdk';
import {TuiAlertService, TuiScrollable, TuiScrollbar} from '@taiga-ui/core';
import {Subject} from 'rxjs';

@Component({
    standalone: true,
    imports: [
        CdkFixedSizeVirtualScroll,
        CdkVirtualForOf,
        CdkVirtualScrollViewport,
        TuiPullToRefresh,
        TuiScrollable,
        TuiScrollbar,
    ],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
    providers: [
        {
            provide: TUI_IS_IOS,
            useValue: false,
        },
        {
            provide: TUI_IS_ANDROID,
            useValue: true,
        },
        {
            provide: TUI_PULL_TO_REFRESH_COMPONENT,
            useValue: TUI_ANDROID_LOADER,
        },
        {
            provide: TUI_PULL_TO_REFRESH_LOADED,
            useClass: Subject,
        },
    ],
})
export default class Example {
    private readonly alerts = inject(TuiAlertService);

    protected items = Array.from({length: 10000}).map((_, i) => `Item #${i}`);

    protected onPull(): void {
        this.alerts.open('Loading...').subscribe();
    }
}
```


### TypeScript

```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {TuiDemo} from '@demo/utils';
import {TuiScrollbar} from '@taiga-ui/core';
import {PolymorpheusComponent, PolymorpheusOutlet} from '@taiga-ui/polymorpheus';

@Component({
    standalone: true,
    imports: [PolymorpheusOutlet, TuiDemo, TuiScrollbar],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    changeDetection,
})
export default class Page {
    protected readonly example1 = import('./examples/1').then(
        ({default: component}) => new PolymorpheusComponent(component),
    );

    protected readonly example2 = import('./examples/2').then(
        ({default: component}) => new PolymorpheusComponent(component),
    );
}
```

### LESS

```less
.scrollbar {
    max-block-size: 20rem;
    overscroll-behavior: none;
}
```

---
# components/Pulse
- **Package**: `KIT`
- **Type**: components

### How to Use (Import)

```ts
import {TuiPulse} from '@taiga-ui/kit';
// ...

@Component({
  standalone: true,
  imports: [
    // ...
    TuiPulse,
  ],
})
export class Example {}
```

### How to Use (Template)

```html
<tui-pulse [playing]="value"></tui-pulse>
```

### Usage Examples

#### Basic

**Template:**
```html
<button appearance="outline" tuiButton type="button" (click)="playing = !playing" > Pulse <tui-pulse [playing]="playing" />
</button>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiButton} from '@taiga-ui/core';
import {TuiPulse} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [TuiButton, TuiPulse],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    protected playing = true;
}
```

#### Popover

**Template:**
```html
<tui-avatar appearance="positive" src="AI" >
<tui-pulse *ngIf="step()" tuiHintAppearance="floating" class="step-2" [tuiHint]="step2" [tuiHintManual]="step() === 2" >
<ng-template #step2>
<button appearance="icon" iconStart="@tui.x" size="xs" tuiIconButton type="button" (click)="step.set(0)" > Close </button>
<h3 tuiTitle> You can have images! <div tuiSubtitle>Or any content really</div>
</h3>
<img alt="Alex Inkin" src="https://avatars.githubusercontent.com/u/11832552" class="avatar" />
<footer>
<button appearance="secondary-grayscale" tuiButton type="button" (click)="step.set(1)" > Back </button>
<button tuiButton type="button" (click)="step.set(0)" > Got it! </button>
</footer>
</ng-template>
</tui-pulse>
</tui-avatar>
<button appearance="outline" size="m" tuiButton type="button" (click)="step.set(1)" > Start tutorial <tui-pulse *ngIf="step()" tuiHintAppearance="accent" tuiHintDirection="right" tuiTheme="dark" class="step-1" [tuiHint]="step1" [tuiHintManual]="step() === 1" >
<ng-template #step1>
<button appearance="icon" iconStart="@tui.x" size="xs" tuiIconButton type="button" (click)="step.set(0)" > Close </button>
<h3 tuiTitle> Welcome to the tutorial! <div tuiSubtitle>This is the first step.</div>
</h3>
<footer>
<button appearance="secondary-grayscale" tuiButton type="button" (click)="step.set(0)" > Close </button>
<button tuiButton type="button" (click)="step.set(2)" > Next </button>
</footer>
</ng-template>
</tui-pulse>
</button>
```
**TypeScript:**
```ts
import {NgIf} from '@angular/common';
import {Component, signal} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiButton, TuiHint, TuiTitle} from '@taiga-ui/core';
import {tuiProvideExperimentalHint} from '@taiga-ui/experimental';
import {TuiAvatar, TuiPulse} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [NgIf, TuiAvatar, TuiButton, TuiHint, TuiPulse, TuiTitle],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
    providers: [tuiProvideExperimentalHint()],
})
export default class Example {
    protected readonly step = signal(0);
}
```


### TypeScript

```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {TuiDemo} from '@demo/utils';

@Component({
    standalone: true,
    imports: [TuiDemo],
    templateUrl: './index.html',
    changeDetection,
})
export default class Page {
    protected readonly examples = ['Basic', 'Popover'];
}
```

---
# components/Push
- **Package**: `KIT`
- **Type**: components
Notifications in style of native browser push

### How to Use (Import)

```ts
import {TuiPush} from '@taiga-ui/kit';

// ...

@Component({
  standalone: true,
  imports: [
    // ...
    TuiPush,
  ],
  // ...
})
export class Example {}
```

### How to Use (Template)

```html
<tui-push heading="1.21 Gigawatts!?!">
  <tui-icon icon="@tui.clock" />
  This is heavy!
  <button tuiLink>Great Scott!</button>
</tui-push>
```

### Example

```html
<tui-push [heading]="heading" [lines]="lines" [timestamp]="timestamp" [type]="type" (close)="close.emitEvent($event)" >
<img alt="" src="assets/images/roy.jpg" />
<tui-icon icon="@tui.settings" /> I've seen things you people wouldn't believe. Attack ships on fire off The Shoulder Of Orion. I watched C-Beams glitter in the dark near The Tannhauser Gate. All those moments will be lost in time, like tears in rain. <button tuiButton type="button" > I want more life </button>
<button tuiLink type="button" > Time to die </button>
</tui-push>
```

### API

| Property | Type | Description |
|----------|-----|----------|
| [heading] | `string` | Heading of the push |
| [type] | `string` | Small text near icon, typically, category of the message |
| [lines] | `number` | A number of visible lines |
| [timestamp] | `number | string` | pipe if the number is passed. |
| (close) | `void` | Output for close button clicks. If you do not listen to this output, close button is hidden. |

### Usage Examples

#### Basic

**Template:**
```html
<div class="wrapper">
<tui-push heading="Rachael" type="Replicant" class="push" [timestamp]="1661358075379" (close)="onClose()" >
<tui-icon icon="@tui.settings" /> Do you like our owl? <button tuiButton type="button" > It's artificial? </button>
<button tuiLink type="button" > Nice hooters! </button>
</tui-push>
<tui-push heading="Deckard" type="Human?" class="push" [timestamp]="1661357000000" >
<tui-icon icon="@tui.eye" class="human" /> I've had people walk out on me before, but not when I was being so charming. </tui-push>
</div>
<tui-push heading="Roy" type="Replicant" (close)="onClose()" >
<img alt="" src="assets/images/roy.jpg" />
<tui-icon icon="@tui.settings" /> I’ve seen things you people wouldn't believe. Attack ships on fire off The Shoulder Of Orion. I watched C-Beams glitter in the dark near The Tannhauser Gate. All those moments will be lost in time, like tears in rain. <button tuiLink type="button" > Time to die </button>
</tui-push>
```
**TypeScript:**
```ts
import {Component, inject} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiAlertService, TuiButton, TuiIcon, TuiLink} from '@taiga-ui/core';
import {TuiPush} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [TuiButton, TuiIcon, TuiLink, TuiPush],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    private readonly alert = inject(TuiAlertService);

    protected onClose(): void {
        this.alert
            .open('Close button is visible when you subscribe to (close) output')
            .subscribe();
    }
}
```

#### Service

**Template:**
```html
<button tuiButton type="button" (click)="onClick()" > Show push </button>
```
**TypeScript:**
```ts
import {Component, inject} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiAlertService, TuiButton} from '@taiga-ui/core';
import {TuiPushService} from '@taiga-ui/kit';
import {switchMap, take} from 'rxjs';

@Component({
    standalone: true,
    imports: [TuiButton],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly push = inject(TuiPushService);
    protected readonly alert = inject(TuiAlertService);

    protected onClick(): void {
        this.push
            .open('This is <strong>heavy</strong>!', {
                heading: 'Great Scott!',
                type: 'Quote',
                icon: '@tui.video',
                buttons: ['Roads?', '1.21 Gigawatts!?!'],
            })
            .pipe(
                take(1),
                switchMap((button) => this.alert.open(button)),
            )
            .subscribe();
    }
}
```

#### Directive

**Template:**
```html
<button tuiButton type="button" (click)="toggle(true)" > Show push </button>
<tui-push *tuiPush="open" heading="Indiana Jones" type="Dr. Henry Walton Jones, Jr." (close)="toggle(false)" >
<tui-icon icon="@tui.message-square" /> I have a bad feeling about this... <button tuiButton type="button" (click)="toggle(false)" > Fortune </button>
<button tuiLink type="button" (click)="toggle(false)" > Glory </button>
</tui-push>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiButton, TuiIcon, TuiLink} from '@taiga-ui/core';
import {TuiPush} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [TuiButton, TuiIcon, TuiLink, TuiPush],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    protected open = false;

    protected toggle(open: boolean): void {
        this.open = open;
    }
}
```


### TypeScript

```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {DemoRoute} from '@demo/routes';
import {TuiDemo} from '@demo/utils';
import {TuiButton, TuiIcon} from '@taiga-ui/core';
import {TuiPush} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [TuiButton, TuiDemo, TuiIcon, TuiPush],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Page {
    protected readonly examples = ['Basic', 'Service', 'Directive'];
    protected heading = '';
    protected type = '';
    protected lines = 2;

    protected readonly timestampVars = ['', 'A moment ago', 123456789];
    protected timestamp = this.timestampVars[0]!;
    protected readonly routes = DemoRoute;
}
```

---
# components/Radio
- **Package**: `KIT`
- **Type**: components
A radio component that is able to imitate native control on mobile platforms.

        
            Use
            --tui-background-accent-2
            CSS variable to customize color of native control emulation
        

        
            Due to internal Angular implementation of radio buttons, you are required to add
            name
            attribute to your
            input
            tag, unless you are using
            formControlName

### How to Use (Import)

```ts
import {Component} from '@angular/core';
import {TuiRadio} from '@taiga-ui/kit';
// ...

@Component({
  standalone: true,
  imports: [
    // ...
    TuiRadio,
  ],
})
export class Example {}
```

### How to Use (Template)

```html
<input
  tuiRadio
  type="radio"
  [(ngModel)]="value"
/>
```

### Usage Examples

#### Platforms

**Template:**
```html
<div *ngFor="let platform of platforms; let first = first" class="wrapper" [class.wrapper_web]="platform === 'web'" [tuiPlatform]="platform" > {{ platform }} <input ngModel="checked" tuiRadio type="radio" value="checked" [size]="getSize(first)" />
<input ngModel="checked" tuiRadio type="radio" value="checked" [disabled]="true" [size]="getSize(first)" />
<input tuiRadio type="radio" [size]="getSize(first)" />
<input ngModel="checked" tuiRadio type="radio" [disabled]="true" [size]="getSize(first)" />
<input tuiRadio type="radio" [formControl]="invalidTrue" [size]="getSize(first)" [value]="true" />
<input tuiRadio type="radio" [formControl]="invalidFalse" [size]="getSize(first)" [value]="true" />
</div>
```
**TypeScript:**
```ts
import {NgForOf} from '@angular/common';
import {Component, type OnInit} from '@angular/core';
import {FormControl, FormsModule, ReactiveFormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiPlatform} from '@taiga-ui/cdk';
import {type TuiSizeS} from '@taiga-ui/core';
import {TuiRadio} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [FormsModule, NgForOf, ReactiveFormsModule, TuiPlatform, TuiRadio],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example implements OnInit {
    protected readonly platforms: ReadonlyArray<'android' | 'ios' | 'web'> = [
        'web',
        'web',
        'ios',
        'android',
    ];

    protected readonly invalidTrue = new FormControl(true, () => ({invalid: true}));
    protected readonly invalidFalse = new FormControl(false, () => ({invalid: true}));

    public ngOnInit(): void {
        this.invalidTrue.markAsTouched();
        this.invalidFalse.markAsTouched();
    }

    protected getSize(first: boolean): TuiSizeS {
        return first ? 'm' : 's';
    }
}
```

#### Identity matcher

**Template:**
```html
<button tuiButton type="button" (click)="value = {test: 'value'}" > Set copy </button>
<p>
<label tuiLabel>
<input name="test" tuiRadio type="radio" [identityMatcher]="identityMatcher" [value]="{test: 'value'}" [(ngModel)]="value" /> value </label>
</p>
<p>
<label tuiLabel>
<input name="test" tuiRadio type="radio" [identityMatcher]="identityMatcher" [value]="{test: 'test'}" [(ngModel)]="value" /> test </label>
</p>
<p>
<label tuiLabel>
<input name="test" tuiRadio type="radio" [identityMatcher]="identityMatcher" [value]="{test: 'item'}" [(ngModel)]="value" /> item </label>
</p>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiButton, TuiLabel} from '@taiga-ui/core';
import {TuiRadio} from '@taiga-ui/kit';

interface TestValue {
    test: string;
}

@Component({
    standalone: true,
    imports: [FormsModule, TuiButton, TuiLabel, TuiRadio],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    protected value: TestValue | null = null;
    protected identityMatcher = (a: TestValue, b: TestValue): boolean =>
        a?.test === b?.test;
}
```

#### List

**Template:**
```html
<form [formGroup]="form">
<tui-radio-list formControlName="vertical" [itemContent]="content" [items]="objects" />
<ng-template #content let-data >
<span tuiTitle> {{ data.name }} <span tuiSubtitle>{{ data.description }}</span>
</span>
</ng-template>
<hr class="tui-space_vertical-4" />
<tui-radio-list formControlName="disabled" [items]="strings" />
<hr class="tui-space_vertical-4" />
</form>
<tui-radio-list size="s" [disabledItemHandler]="handler" [items]="strings" [style.flex-direction]="'row'" [style.width]="'max-content'" [(ngModel)]="horizontal" />
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {
    FormControl,
    FormGroup,
    FormsModule,
    ReactiveFormsModule,
    Validators,
} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {type TuiBooleanHandler} from '@taiga-ui/cdk';
import {TuiTitle} from '@taiga-ui/core';
import {TuiRadioList} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [FormsModule, ReactiveFormsModule, TuiRadioList, TuiTitle],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly form = new FormGroup({
        vertical: new FormControl(null, Validators.required),
        disabled: new FormControl({value: null, disabled: true}),
    });

    protected readonly objects = [
        {
            name: 'King Arthur',
            description: 'Graham Chapman',
        },
        {
            name: "It's Man",
            description: 'Michael Palin',
        },
        {
            name: 'Silly Walks',
            description: 'John Cleese',
        },
    ];

    protected readonly strings = ['King Arthur', "It's Man", 'Silly Walks'];

    protected horizontal = this.strings[0]!;

    protected readonly handler: TuiBooleanHandler<string> = (item) =>
        item === this.strings[2]!;
}
```


### TypeScript

```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {TuiDemo} from '@demo/utils';

@Component({
    standalone: true,
    imports: [TuiDemo],
    templateUrl: './index.html',
    changeDetection,
})
export default class Page {
    protected readonly examples = ['Platforms', 'Identity matcher', 'List'];
}
```

---
# components/Range
- **Package**: `KIT`
- **Type**: components
A two-thumb slider for selecting a range of values

### How to Use (Import)

```ts
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import {TuiRange} from '@taiga-ui/kit';

// ...

@Component({
  standalone: true,
  imports: [
    // ...
    FormsModule,
    ReactiveFormsModule,
    TuiRange,
  ],
})
class Example {
  testForm = new FormGroup({
    testValue: new FormControl(0),
  });
}
```

### How to Use (Template)

```html
<tui-range
  [max]="10"
  [(ngModel)]="model"
></tui-range>

<tui-range
  [formControl]="testValue"
  [max]="10"
></tui-range>
```

### Example

```html
<ng-template>
<tui-range [formControl]="control" [keySteps]="keySteps" [limit]="limit" [margin]="margin" [max]="max" [min]="min" [segments]="segments" [size]="size" [step]="step" />
</ng-template>
```

### API

| Property | Type | Description |
|----------|-----|----------|
| [disabled] | `boolean` | ) |
| [min] | `number` |  |
| [max] | `number` |  |
| [step] | `number` |  |
| [size] | `TuiSizeS` |  |
| [segments] | `number` |  |
| [keySteps] | `TuiKeySteps | null` |  |
| [limit] | `number` |  |
| [margin] | `number` |  |

### Usage Examples

#### Sizes

**Template:**
```html
<tui-range size="s" [max]="10" [(ngModel)]="value" />
<tui-range size="m" [formControl]="formControl" [max]="10" />
<p>Custom thickness</p>
<tui-range size="m" [formControl]="formControl" [max]="10" [style.--tui-thickness.rem]="0.25" />
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {FormControl, FormsModule, ReactiveFormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiRange} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [FormsModule, ReactiveFormsModule, TuiRange],
    templateUrl: './index.html',
    styles: [':host {display: flex; flex-direction: column;}'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected value = [4, 6];

    protected readonly formControl = new FormControl([4, 6]);
}
```

#### Segments

**Template:**
```html
<tui-range id="range-with-segments" size="m" class="range" [max]="max" [min]="min" [segments]="segments" [step]="step" [(ngModel)]="value" />
<div class="ticks-labels">
<div *ngFor="let label of labels">
<ng-container *ngIf="label !== 75; else labelWithIcon"> {{ label | i18nPlural: pluralMap }} </ng-container>
</div>
<ng-template #labelWithIcon>
<tui-icon icon="@tui.arrow-up" />
<div>3/4</div>
</ng-template>
</div>
<p class="tui-space_top-12 tui-space_bottom-0"> Control value: <output for="range-with-segments">
<code>{{ value | json }}</code>
</output>
</p>
```
**TypeScript:**
```ts
import {I18nPluralPipe, JsonPipe, NgForOf, NgIf} from '@angular/common';
import {Component} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiIcon} from '@taiga-ui/core';
import {TuiRange} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [FormsModule, I18nPluralPipe, JsonPipe, NgForOf, NgIf, TuiIcon, TuiRange],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly min = 0;
    protected readonly max = 100;
    protected readonly step = 25;
    protected readonly segments = 4;
    protected readonly labels = [...new Array(this.segments + 1).keys()].map(
        (i) => this.min + this.step * i,
    );

    protected value = [0, 25];

    // https://angular.dev/api/common/I18nPluralPipe#example
    protected pluralMap = {'=0': '0', '=1': '# item', '=100': 'MAX', other: '# items'};
}
```

#### KeySteps

**Template:**
```html
<tui-range id="range-with-key-steps" size="m" class="range" [keySteps]="keySteps" [segments]="segments" [step]="stepPercentage" [(ngModel)]="value" />
<div class="ticks-labels">
<span *ngFor="let label of ticksLabels">{{ label }}</span>
</div>
<p class="tui-space_top-12 tui-space_bottom-0"> Control value: <output for="range-with-key-steps">
<code>{{ value | json }}</code>
</output>
</p>
```
**TypeScript:**
```ts
import {JsonPipe, NgForOf} from '@angular/common';
import {Component} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {type TuiKeySteps, TuiRange} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [FormsModule, JsonPipe, NgForOf, TuiRange],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly ticksLabels = ['0', '10K', '100K', '500k', '1000K'];
    protected readonly segments = this.ticksLabels.length - 1;

    // 12.5% (of total distance) per step
    protected readonly stepPercentage = 100 / (2 * this.segments);

    protected value = [0, 100_000];

    protected readonly keySteps: TuiKeySteps = [
        // [percent, value]
        [0, 0],
        [25, 10_000],
        [50, 100_000],
        [75, 500_000],
        [100, 1_000_000],
    ];
}
```


### TypeScript

```ts
import {Component} from '@angular/core';
import {FormControl, ReactiveFormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {TuiDemo} from '@demo/utils';
import {type TuiSizeS} from '@taiga-ui/core';
import {type TuiKeySteps, TuiRange} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [ReactiveFormsModule, TuiDemo, TuiRange],
    templateUrl: './index.html',
    changeDetection,
})
export default class Page {
    protected readonly examples = ['Sizes', 'Segments', 'KeySteps'];
    protected readonly control = new FormControl([0, 0]);

    protected readonly sizeVariants: readonly TuiSizeS[] = ['s', 'm'];
    protected readonly limitVariants: readonly number[] = [Infinity, 100, 50, 10, 5, 1];

    protected size: TuiSizeS = this.sizeVariants[1]!;

    protected min = 0;

    protected max = 100;

    protected margin = 0;

    protected limit = Infinity;

    protected step = 1;

    protected segments = 1;

    protected readonly keyStepsVariants: readonly TuiKeySteps[] = [
        [
            [0, 0],
            [50, 1_000],
            [100, 10_000],
        ],
    ];

    protected keySteps: TuiKeySteps | null = null;

    protected get disabled(): boolean {
        return this.control.disabled;
    }

    protected set disabled(value: boolean) {
        if (value) {
            this.control.disable();

            return;
        }

        this.control.enable();
    }
}
```

---
# components/Rating
- **Package**: `KIT`
- **Type**: components

### How to Use (Import)

```ts
import {Component} from '@angular/core';
import {TuiRating} from '@taiga-ui/kit';
// ...

@Component({
  standalone: true,
  imports: [
    // ...
    TuiRating,
  ],
})
export class Example {}
```

### How to Use (Template)

```html
<tui-rating [(ngModel)]="value"></tui-rating>
```

### Usage Examples

#### Basic

**Template:**
```html
<label> Rate Taiga UI <tui-rating class="rating" [(ngModel)]="value" />
</label>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiRating} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [FormsModule, TuiRating],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected value = 0;
}
```

#### Custom icons

**Template:**
```html
<label> Are you satisfied with Taiga UI? <tui-rating class="rating" [attr.data-value]="value" [icon]="icon" [max]="3" [(ngModel)]="value" />
<button *ngIf="value" appearance="icon" iconStart="@tui.x" size="s" tuiIconButton type="button" class="button" (click)="value = 0" > Clear </button>
</label>
```
**TypeScript:**
```ts
import {NgIf} from '@angular/common';
import {Component} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {type TuiContext} from '@taiga-ui/cdk';
import {TuiButton} from '@taiga-ui/core';
import {TuiRating} from '@taiga-ui/kit';
import {type PolymorpheusContent} from '@taiga-ui/polymorpheus';

@Component({
    standalone: true,
    imports: [FormsModule, NgIf, TuiButton, TuiRating],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected value = 0;

    protected readonly icon: PolymorpheusContent<TuiContext<number>> = ({$implicit}) => {
        switch ($implicit) {
            case 1:
                return '@tui.frown';
            case 2:
                return '@tui.meh';
            default:
                return '@tui.smile';
        }
    };
}
```

#### Static

**Template:**
```html
<label> Back to the Future <tui-rating [icon]="icon" [max]="10" [ngModel]="8.5" [readOnly]="true" />
</label>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiRating, type TuiRatingContext} from '@taiga-ui/kit';
import {type PolymorpheusContent} from '@taiga-ui/polymorpheus';

@Component({
    standalone: true,
    imports: [FormsModule, TuiRating],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly icon: PolymorpheusContent<TuiRatingContext> = ({filled}) =>
        filled ? '@tui.star-filled' : '@tui.star';
}
```


### TypeScript

```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {TuiDemo} from '@demo/utils';

@Component({
    standalone: true,
    imports: [TuiDemo],
    templateUrl: './index.html',
    changeDetection,
})
export default class Page {
    protected readonly examples = ['Basic', 'Custom icons', 'Static'];
}
```

---
# components/Reorder
- **Package**: `ADDON-TABLE`
- **Type**: components
Component to change order of elements in an array

### How to Use (Import)

```ts
import {TuiReorder} from '@taiga-ui/addon-table';

// ...

@Component({
  standalone: true,
  imports: [
    // ...
    TuiReorder,
  ],
  // ...
})
export class Example {}
```

### How to Use (Template)

```html
<tui-reorder
  [(items)]="items"
  [(enabled)]="enabled"
></tui-reorder>
```

### Usage Examples

#### Usage

**Template:**
```html
<tui-reorder class="list" [(enabled)]="enabled" [(items)]="items" />
<p>{{ items | json }}</p>
<p>{{ enabled | json }}</p>
```
**TypeScript:**
```ts
import {JsonPipe} from '@angular/common';
import {Component, inject} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiReorder} from '@taiga-ui/addon-table';

@Component({
    standalone: true,
    imports: [JsonPipe, TuiReorder],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected items = inject<readonly string[]>('Pythons' as any);
    protected enabled = this.items;
}
```


### TypeScript

```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {TuiDemo} from '@demo/utils';

@Component({
    standalone: true,
    imports: [TuiDemo],
    templateUrl: './index.html',
    changeDetection,
})
export default class Page {}
```

---
# components/RingChart
- **Package**: `ADDON-CHARTS`
- **Type**: components

### How to Use (Import)

```ts
import {TuiRingChart} from '@taiga-ui/addon-charts';

// ...

@Component({
  standalone: true,
  imports: [
    // ...
    TuiRingChart,
  ],
  // ...
})
export class Example {}
```

### How to Use (Template)

```html
<tui-ring-chart [value]="value"></tui-ring-chart>
```

### Example

```html
<tui-ring-chart class="chart" [size]="size" [value]="value" [(activeItemIndex)]="activeItemIndex" />
```

### API

| Property | Type | Description |
|----------|-----|----------|
| [(activeItemIndex)] | `number` | Active fragment |
| [size] | `TuiSizeXS | TuiSizeXL` | Size |
| [value] | `readonly number[]` | Value |

### Usage Examples

#### sizes

**Template:**
```html
<div class="wrapper">
<tui-ring-chart size="s" class="tui-space_right-4" [value]="value" />
<tui-ring-chart size="m" class="tui-space_right-4" [value]="value" />
<tui-ring-chart size="l" class="tui-space_right-4" [value]="value" />
<tui-ring-chart size="xl" class="tui-space_right-4" [value]="value" />
</div>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiRingChart} from '@taiga-ui/addon-charts';

@Component({
    standalone: true,
    imports: [TuiRingChart],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly value = [40, 30, 20, 10];
}
```

#### With labels

**Template:**
```html
<tui-ring-chart [value]="value" [(activeItemIndex)]="index" >
<span>{{ sum | tuiAmount: 'RUB' | async }}</span>
<div>{{ label }}</div>
</tui-ring-chart>
```
**TypeScript:**
```ts
import {AsyncPipe} from '@angular/common';
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiRingChart} from '@taiga-ui/addon-charts';
import {TuiAmountPipe} from '@taiga-ui/addon-commerce';
import {tuiSum} from '@taiga-ui/cdk';

@Component({
    standalone: true,
    imports: [AsyncPipe, TuiAmountPipe, TuiRingChart],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    private readonly labels = ['Food', 'Cafe', 'Open Source', 'Taxi', 'other'];
    protected readonly value = [13769, 12367, 10172, 3018, 2592];
    protected readonly total = tuiSum(...this.value);

    protected index = NaN;

    protected get sum(): number {
        return (Number.isNaN(this.index) ? this.total : this.value[this.index]) ?? 0;
    }

    protected get label(): string {
        return (Number.isNaN(this.index) ? 'Total' : this.labels[this.index]) ?? '';
    }
}
```


### TypeScript

```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {TuiDemo} from '@demo/utils';
import {TuiRingChart} from '@taiga-ui/addon-charts';
import {type TuiSizeXL, type TuiSizeXS} from '@taiga-ui/core';

@Component({
    standalone: true,
    imports: [TuiDemo, TuiRingChart],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    changeDetection,
})
export default class Page {
    protected readonly valueVariants = [
        [40, 30, 20, 10],
        [13769, 10172, 3018, 2592],
    ];

    protected value = this.valueVariants[0]!;

    protected readonly activeItemIndexVariants = [NaN, 0, 1, 2];

    protected activeItemIndex = this.activeItemIndexVariants[0]!;

    protected readonly sizeVariants: ReadonlyArray<TuiSizeXL | TuiSizeXS> = [
        'xs',
        's',
        'm',
        'l',
        'xl',
    ];

    protected size = this.sizeVariants[2]!;
}
```

### LESS

```less
.chart {
    margin: 0 auto;
}
```

---
# components/Scrollbar
- **Package**: `CORE`
- **Type**: components
Scrollbar
            implements a custom scrollbar in Taiga UI style.
        

        Native scrollbar is hidden to keep native platform scroll experience

        
            Use
            TUI_SCROLL_REF
            token to get a scrollable container. For example, when working with virtual scroll.

### How to Use (Import)

```ts
import {TuiScrollbar} from '@taiga-ui/core';

// ...

@Component({
  standalone: true,
  // ...
  imports: [
    //  ...
    TuiScrollbar,
  ],
  // ...
})
export class Example {}
```

### How to Use (Template)

```html
<tui-scrollbar>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
</tui-scrollbar>
```

### Usage Examples

#### Vertical

**Template:**
```html
<tui-scrollbar class="box">
<div class="content">
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab assumenda delectus dolor eveniet maiores nobis quaerat quo velit vero voluptatem? Aliquam at deserunt excepturi id officiis porro quo quos voluptatum? </p>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab assumenda delectus dolor eveniet maiores nobis quaerat quo velit vero voluptatem? Aliquam at deserunt excepturi id officiis porro quo quos voluptatum? </p>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab assumenda delectus dolor eveniet maiores nobis quaerat quo velit vero voluptatem? Aliquam at deserunt excepturi id officiis porro quo quos voluptatum? </p>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab assumenda delectus dolor eveniet maiores nobis quaerat quo velit vero voluptatem? Aliquam at deserunt excepturi id officiis porro quo quos voluptatum? </p>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab assumenda delectus dolor eveniet maiores nobis quaerat quo velit vero voluptatem? Aliquam at deserunt excepturi id officiis porro quo quos voluptatum? </p>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab assumenda delectus dolor eveniet maiores nobis quaerat quo velit vero voluptatem? Aliquam at deserunt excepturi id officiis porro quo quos voluptatum? </p>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab assumenda delectus dolor eveniet maiores nobis quaerat quo velit vero voluptatem? Aliquam at deserunt excepturi id officiis porro quo quos voluptatum? </p>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab assumenda delectus dolor eveniet maiores nobis quaerat quo velit vero voluptatem? Aliquam at deserunt excepturi id officiis porro quo quos voluptatum? </p>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab assumenda delectus dolor eveniet maiores nobis quaerat quo velit vero voluptatem? Aliquam at deserunt excepturi id officiis porro quo quos voluptatum? </p>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab assumenda delectus dolor eveniet maiores nobis quaerat quo velit vero voluptatem? Aliquam at deserunt excepturi id officiis porro quo quos voluptatum? </p>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab assumenda delectus dolor eveniet maiores nobis quaerat quo velit vero voluptatem? Aliquam at deserunt excepturi id officiis porro quo quos voluptatum? </p>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab assumenda delectus dolor eveniet maiores nobis quaerat quo velit vero voluptatem? Aliquam at deserunt excepturi id officiis porro quo quos voluptatum? </p>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab assumenda delectus dolor eveniet maiores nobis quaerat quo velit vero voluptatem? Aliquam at deserunt excepturi id officiis porro quo quos voluptatum? </p>
<p> Ab aperiam beatae consequatur magnam mollitia necessitatibus quam qui quibusdam soluta, suscipit. Aut doloremque eum, hic quae ratione sunt suscipit! Eaque esse illo libero minima molestiae neque, nobis velit voluptates? </p>
<p> Animi est facere maxime porro quae quibusdam quos totam? Consectetur eligendi, explicabo magnam maxime sit voluptatibus. Assumenda beatae deserunt dolorem earum et eum harum in maxime quae, quam quos rem. </p>
<p> Adipisci commodi consectetur id iure praesentium quam quisquam unde veniam. Corporis cum dicta distinctio error excepturi, impedit quidem veritatis? Cupiditate eos illum ipsum labore, modi omnis repudiandae velit veniam voluptatem. </p>
<p> Asperiores dolorum, ex facilis hic maiores modi neque nisi nobis nostrum numquam placeat quod repellendus sequi velit voluptate! Adipisci atque deleniti eligendi ex tenetur. Beatae cumque dolore impedit perferendis repellat. </p>
</div>
</tui-scrollbar>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiScrollbar} from '@taiga-ui/core';

@Component({
    standalone: true,
    imports: [TuiScrollbar],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {}
```

#### Horizontal

**Template:**
```html
<tui-scrollbar class="box">
<div class="line"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab assumenda delectus dolor eveniet maiores nobis quaerat quo velit vero voluptatem? Aliquam at deserunt excepturi id officiis porro quo quos voluptatum? </div>
<div class="line"> Ab aperiam beatae consequatur magnam mollitia necessitatibus quam qui quibusdam soluta, suscipit. Aut doloremque eum, hic quae ratione sunt suscipit! Eaque esse illo libero minima molestiae neque, nobis velit voluptates? </div>
<div class="line"> Animi est facere maxime porro quae quibusdam quos totam? Consectetur eligendi, explicabo magnam maxime sit voluptatibus. Assumenda beatae deserunt dolorem earum et eum harum in maxime quae, quam quos rem. </div>
<div class="line"> Adipisci commodi consectetur id iure praesentium quam quisquam unde veniam. Corporis cum dicta distinctio error excepturi, impedit quidem veritatis? Cupiditate eos illum ipsum labore, modi omnis repudiandae velit veniam voluptatem. </div>
<div class="line"> Asperiores dolorum, ex facilis hic maiores modi neque nisi nobis nostrum numquam placeat quod repellendus sequi velit voluptate! Adipisci atque deleniti eligendi ex tenetur. Beatae cumque dolore impedit perferendis repellat. </div>
</tui-scrollbar>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiScrollbar} from '@taiga-ui/core';

@Component({
    standalone: true,
    imports: [TuiScrollbar],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {}
```

#### All

**Template:**
```html
<div>
<code>top: {{ scrollTop }}</code>
</div>
<div>
<code>left: {{ scrollLeft }}</code>
</div>
<button size="m" tuiButton type="button" class="tui-space_vertical-3" (click)="onClick()" > Scroll {{ scrollTop < someOffsetConst ? 'bottom' : 'top' }} </button>
<tui-scrollbar class="box">
<div class="content">
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti dignissimos, doloremque. Aperiam assumenda atque aut blanditiis corporis, eum, facilis harum laudantium magni necessitatibus nobis quas repudiandae sint ut voluptatem! Optio. </p>
<p> Accusamus aperiam assumenda aut consectetur, corporis delectus, dolor eaque eius est hic impedit labore possimus provident quas rem, rerum sequi sint tempora tempore ut? Debitis esse neque odio odit provident? </p>
<p> Cum eum illo, ipsa iure nostrum ut voluptates? Autem blanditiis corporis debitis deserunt ex expedita facilis fuga, illum iusto magnam praesentium provident recusandae repudiandae, totam, voluptatem. Minima numquam sapiente sunt. </p>
<p> Beatae consectetur cupiditate dignissimos ducimus eos excepturi labore pariatur placeat quia similique. Architecto aspernatur cumque debitis distinctio esse, facere fugit harum ipsum libero minus neque numquam omnis quidem, tempora, ut! </p>
<p> Mollitia, perspiciatis sunt! Architecto aspernatur assumenda beatae, blanditiis commodi consequuntur debitis et id, laboriosam maxime molestiae neque nihil officiis omnis, quam quos sint veritatis voluptate? Alias deserunt distinctio modi perferendis? </p>
<p> Ab aspernatur aut cumque cupiditate deleniti, dolorem ducimus eligendi eos facere harum hic ipsam ipsum iste itaque modi nam necessitatibus nostrum nulla omnis quae repellat, sapiente sit tempore. Ipsam, quidem! </p>
<p> Ab debitis deleniti distinctio est ex facere magni nemo numquam placeat quia, quibusdam sequi! Aliquid at consectetur culpa ea enim facilis, harum hic, inventore iste possimus praesentium quas tempora voluptates. </p>
<p> Aliquam eligendi ipsam modi nemo numquam obcaecati officia, quidem unde? Accusantium amet, animi deleniti dolorum ea earum eos, expedita ipsa minima modi, pariatur perspiciatis porro quibusdam quo repellat tempore voluptates! </p>
<p> Ab assumenda fugiat magni natus officiis perferendis ratione rem repellendus tenetur. At commodi laudantium modi, natus nobis nulla odio odit sed sint tempora tenetur voluptas? At odio praesentium quas ut! </p>
<p> Atque aut consectetur consequuntur debitis eius facere ipsa ipsam maiores minima minus mollitia qui quos repudiandae sapiente, soluta? Ad, amet dolore doloribus ducimus eos exercitationem molestiae quisquam soluta ullam voluptate. </p>
</div>
</tui-scrollbar>
```
**TypeScript:**
```ts
import {Component, ElementRef, ViewChild} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiButton, TuiScrollbar} from '@taiga-ui/core';

const SOME_OFFSET_CONST = 20;

@Component({
    standalone: true,
    imports: [TuiButton, TuiScrollbar],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    @ViewChild(TuiScrollbar, {read: ElementRef})
    private readonly scrollBar?: ElementRef<HTMLElement>;

    protected someOffsetConst = SOME_OFFSET_CONST;

    protected get scrollTop(): number {
        return this.scrollBar ? this.scrollBar.nativeElement.scrollTop : 0;
    }

    protected get scrollLeft(): number {
        return this.scrollBar ? this.scrollBar.nativeElement.scrollLeft : 0;
    }

    protected onClick(): void {
        if (!this.scrollBar) {
            return;
        }

        const {nativeElement} = this.scrollBar;

        nativeElement.scrollTop =
            nativeElement.scrollTop < SOME_OFFSET_CONST ? nativeElement.scrollHeight : 0;
    }
}
```

#### Hidden

**Template:**
```html
<tui-scrollbar class="box" [hidden]="true" >
<div class="content">
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti dignissimos, doloremque. Aperiam assumenda atque aut blanditiis corporis, eum, facilis harum laudantium magni necessitatibus nobis quas repudiandae sint ut voluptatem! Optio. </p>
<p> Accusamus aperiam assumenda aut consectetur, corporis delectus, dolor eaque eius est hic impedit labore possimus provident quas rem, rerum sequi sint tempora tempore ut? Debitis esse neque odio odit provident? </p>
<p> Cum eum illo, ipsa iure nostrum ut voluptates? Autem blanditiis corporis debitis deserunt ex expedita facilis fuga, illum iusto magnam praesentium provident recusandae repudiandae, totam, voluptatem. Minima numquam sapiente sunt. </p>
<p> Beatae consectetur cupiditate dignissimos ducimus eos excepturi labore pariatur placeat quia similique. Architecto aspernatur cumque debitis distinctio esse, facere fugit harum ipsum libero minus neque numquam omnis quidem, tempora, ut! </p>
<p> Mollitia, perspiciatis sunt! Architecto aspernatur assumenda beatae, blanditiis commodi consequuntur debitis et id, laboriosam maxime molestiae neque nihil officiis omnis, quam quos sint veritatis voluptate? Alias deserunt distinctio modi perferendis? </p>
<p> Ab aspernatur aut cumque cupiditate deleniti, dolorem ducimus eligendi eos facere harum hic ipsam ipsum iste itaque modi nam necessitatibus nostrum nulla omnis quae repellat, sapiente sit tempore. Ipsam, quidem! </p>
<p> Ab debitis deleniti distinctio est ex facere magni nemo numquam placeat quia, quibusdam sequi! Aliquid at consectetur culpa ea enim facilis, harum hic, inventore iste possimus praesentium quas tempora voluptates. </p>
<p> Aliquam eligendi ipsam modi nemo numquam obcaecati officia, quidem unde? Accusantium amet, animi deleniti dolorum ea earum eos, expedita ipsa minima modi, pariatur perspiciatis porro quibusdam quo repellat tempore voluptates! </p>
<p> Ab assumenda fugiat magni natus officiis perferendis ratione rem repellendus tenetur. At commodi laudantium modi, natus nobis nulla odio odit sed sint tempora tenetur voluptas? At odio praesentium quas ut! </p>
<p> Atque aut consectetur consequuntur debitis eius facere ipsa ipsam maiores minima minus mollitia qui quos repudiandae sapiente, soluta? Ad, amet dolore doloribus ducimus eos exercitationem molestiae quisquam soluta ullam voluptate. </p>
</div>
</tui-scrollbar>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiScrollbar} from '@taiga-ui/core';

@Component({
    standalone: true,
    imports: [TuiScrollbar],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {}
```

#### Light scrollbar

**Template:**
```html
<tui-scrollbar tuiTheme="dark" class="box" >
<div class="content">
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti dignissimos, doloremque. Aperiam assumenda atque aut blanditiis corporis, eum, facilis harum laudantium magni necessitatibus nobis quas repudiandae sint ut voluptatem! Optio. </p>
<p> Accusamus aperiam assumenda aut consectetur, corporis delectus, dolor eaque eius est hic impedit labore possimus provident quas rem, rerum sequi sint tempora tempore ut? Debitis esse neque odio odit provident? </p>
<p> Cum eum illo, ipsa iure nostrum ut voluptates? Autem blanditiis corporis debitis deserunt ex expedita facilis fuga, illum iusto magnam praesentium provident recusandae repudiandae, totam, voluptatem. Minima numquam sapiente sunt. </p>
<p> Beatae consectetur cupiditate dignissimos ducimus eos excepturi labore pariatur placeat quia similique. Architecto aspernatur cumque debitis distinctio esse, facere fugit harum ipsum libero minus neque numquam omnis quidem, tempora, ut! </p>
<p> Mollitia, perspiciatis sunt! Architecto aspernatur assumenda beatae, blanditiis commodi consequuntur debitis et id, laboriosam maxime molestiae neque nihil officiis omnis, quam quos sint veritatis voluptate? Alias deserunt distinctio modi perferendis? </p>
<p> Ab aspernatur aut cumque cupiditate deleniti, dolorem ducimus eligendi eos facere harum hic ipsam ipsum iste itaque modi nam necessitatibus nostrum nulla omnis quae repellat, sapiente sit tempore. Ipsam, quidem! </p>
<p> Ab debitis deleniti distinctio est ex facere magni nemo numquam placeat quia, quibusdam sequi! Aliquid at consectetur culpa ea enim facilis, harum hic, inventore iste possimus praesentium quas tempora voluptates. </p>
<p> Aliquam eligendi ipsam modi nemo numquam obcaecati officia, quidem unde? Accusantium amet, animi deleniti dolorum ea earum eos, expedita ipsa minima modi, pariatur perspiciatis porro quibusdam quo repellat tempore voluptates! </p>
<p> Ab assumenda fugiat magni natus officiis perferendis ratione rem repellendus tenetur. At commodi laudantium modi, natus nobis nulla odio odit sed sint tempora tenetur voluptas? At odio praesentium quas ut! </p>
<p> Atque aut consectetur consequuntur debitis eius facere ipsa ipsam maiores minima minus mollitia qui quos repudiandae sapiente, soluta? Ad, amet dolore doloribus ducimus eos exercitationem molestiae quisquam soluta ullam voluptate. </p>
</div>
</tui-scrollbar>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiScrollbar} from '@taiga-ui/core';

@Component({
    standalone: true,
    imports: [TuiScrollbar],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {}
```

#### Virtual scroll

**Template:**
```html
<button type="button" (click)="add()" > Add </button>
<tui-scrollbar>
<cdk-virtual-scroll-viewport appendOnly itemSize="50" tuiScrollable class="example-viewport tui-zero-scrollbar" >
<div *cdkVirtualFor="let item of items" class="example-item" > {{ item }} </div>
</cdk-virtual-scroll-viewport>
</tui-scrollbar>
```
**TypeScript:**
```ts
import {
    CdkFixedSizeVirtualScroll,
    CdkVirtualForOf,
    CdkVirtualScrollViewport,
} from '@angular/cdk/scrolling';
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiScrollable, TuiScrollbar} from '@taiga-ui/core';

@Component({
    standalone: true,
    imports: [
        CdkFixedSizeVirtualScroll,
        CdkVirtualForOf,
        CdkVirtualScrollViewport,
        TuiScrollable,
        TuiScrollbar,
    ],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected items = Array.from({length: 10000}).map((_, i) => `Item #${i}`);

    protected add(): void {
        this.items = [...this.items, `Item #${this.items.length}`];
    }
}
```

#### Show scroll bars on hover

**Template:**
```html
<tui-scrollbar class="box">
<div class="content">
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti dignissimos, doloremque. Aperiam assumenda atque aut blanditiis corporis, eum, facilis harum laudantium magni necessitatibus nobis quas repudiandae sint ut voluptatem! Optio. </p>
<p> Accusamus aperiam assumenda aut consectetur, corporis delectus, dolor eaque eius est hic impedit labore possimus provident quas rem, rerum sequi sint tempora tempore ut? Debitis esse neque odio odit provident? </p>
<p> Cum eum illo, ipsa iure nostrum ut voluptates? Autem blanditiis corporis debitis deserunt ex expedita facilis fuga, illum iusto magnam praesentium provident recusandae repudiandae, totam, voluptatem. Minima numquam sapiente sunt. </p>
<p> Beatae consectetur cupiditate dignissimos ducimus eos excepturi labore pariatur placeat quia similique. Architecto aspernatur cumque debitis distinctio esse, facere fugit harum ipsum libero minus neque numquam omnis quidem, tempora, ut! </p>
<p> Mollitia, perspiciatis sunt! Architecto aspernatur assumenda beatae, blanditiis commodi consequuntur debitis et id, laboriosam maxime molestiae neque nihil officiis omnis, quam quos sint veritatis voluptate? Alias deserunt distinctio modi perferendis? </p>
<p> Ab aspernatur aut cumque cupiditate deleniti, dolorem ducimus eligendi eos facere harum hic ipsam ipsum iste itaque modi nam necessitatibus nostrum nulla omnis quae repellat, sapiente sit tempore. Ipsam, quidem! </p>
<p> Ab debitis deleniti distinctio est ex facere magni nemo numquam placeat quia, quibusdam sequi! Aliquid at consectetur culpa ea enim facilis, harum hic, inventore iste possimus praesentium quas tempora voluptates. </p>
<p> Aliquam eligendi ipsam modi nemo numquam obcaecati officia, quidem unde? Accusantium amet, animi deleniti dolorum ea earum eos, expedita ipsa minima modi, pariatur perspiciatis porro quibusdam quo repellat tempore voluptates! </p>
<p> Ab assumenda fugiat magni natus officiis perferendis ratione rem repellendus tenetur. At commodi laudantium modi, natus nobis nulla odio odit sed sint tempora tenetur voluptas? At odio praesentium quas ut! </p>
<p> Atque aut consectetur consequuntur debitis eius facere ipsa ipsam maiores minima minus mollitia qui quos repudiandae sapiente, soluta? Ad, amet dolore doloribus ducimus eos exercitationem molestiae quisquam soluta ullam voluptate. </p>
</div>
</tui-scrollbar>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiScrollbar, tuiScrollbarOptionsProvider} from '@taiga-ui/core';

@Component({
    standalone: true,
    imports: [TuiScrollbar],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
    providers: [
        tuiScrollbarOptionsProvider({
            mode: 'hover',
        }),
    ],
})
export default class Example {}
```

#### Native scrollbar

**Template:**
```html
<tui-scrollbar class="box">
<div class="content">
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti dignissimos, doloremque. Aperiam assumenda atque aut blanditiis corporis, eum, facilis harum laudantium magni necessitatibus nobis quas repudiandae sint ut voluptatem! Optio. </p>
<p> Accusamus aperiam assumenda aut consectetur, corporis delectus, dolor eaque eius est hic impedit labore possimus provident quas rem, rerum sequi sint tempora tempore ut? Debitis esse neque odio odit provident? </p>
<p> Cum eum illo, ipsa iure nostrum ut voluptates? Autem blanditiis corporis debitis deserunt ex expedita facilis fuga, illum iusto magnam praesentium provident recusandae repudiandae, totam, voluptatem. Minima numquam sapiente sunt. </p>
<p> Beatae consectetur cupiditate dignissimos ducimus eos excepturi labore pariatur placeat quia similique. Architecto aspernatur cumque debitis distinctio esse, facere fugit harum ipsum libero minus neque numquam omnis quidem, tempora, ut! </p>
<p> Mollitia, perspiciatis sunt! Architecto aspernatur assumenda beatae, blanditiis commodi consequuntur debitis et id, laboriosam maxime molestiae neque nihil officiis omnis, quam quos sint veritatis voluptate? Alias deserunt distinctio modi perferendis? </p>
<p> Ab aspernatur aut cumque cupiditate deleniti, dolorem ducimus eligendi eos facere harum hic ipsam ipsum iste itaque modi nam necessitatibus nostrum nulla omnis quae repellat, sapiente sit tempore. Ipsam, quidem! </p>
<p> Ab debitis deleniti distinctio est ex facere magni nemo numquam placeat quia, quibusdam sequi! Aliquid at consectetur culpa ea enim facilis, harum hic, inventore iste possimus praesentium quas tempora voluptates. </p>
<p> Aliquam eligendi ipsam modi nemo numquam obcaecati officia, quidem unde? Accusantium amet, animi deleniti dolorum ea earum eos, expedita ipsa minima modi, pariatur perspiciatis porro quibusdam quo repellat tempore voluptates! </p>
<p> Ab assumenda fugiat magni natus officiis perferendis ratione rem repellendus tenetur. At commodi laudantium modi, natus nobis nulla odio odit sed sint tempora tenetur voluptas? At odio praesentium quas ut! </p>
<p> Atque aut consectetur consequuntur debitis eius facere ipsa ipsam maiores minima minus mollitia qui quos repudiandae sapiente, soluta? Ad, amet dolore doloribus ducimus eos exercitationem molestiae quisquam soluta ullam voluptate. </p>
</div>
</tui-scrollbar>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiScrollbar, tuiScrollbarOptionsProvider} from '@taiga-ui/core';

@Component({
    standalone: true,
    imports: [TuiScrollbar],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
    providers: [
        tuiScrollbarOptionsProvider({
            mode: 'native',
        }),
    ],
})
export default class Example {}
```


### TypeScript

```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {TuiDemo} from '@demo/utils';

@Component({
    standalone: true,
    imports: [TuiDemo],
    templateUrl: './index.html',
    changeDetection,
})
export default class Page {
    protected readonly examples = [
        'Vertical',
        'Horizontal',
        'All',
        'Hidden',
        'Light scrollbar',
        'Virtual scroll',
        'Show scroll bars on hover',
        'Native scrollbar',
    ];
}
```

---
# components/Search
- **Package**: `LAYOUT`
- **Type**: components
A wrapping component for search or filtering the table

### How to Use (Import)

```ts
import {TuiSearch} from '@taiga-ui/layout';

// ...

@Component({
  standalone: true,
  imports: [
    // ...
    TuiSearch,
  ],
  // ...
})
export class Example {}
```

### How to Use (Template)

```html
<search tuiSearch>
  <form [formGroup]="form">
    <fieldset>
      <tui-textfield iconStart="@tui.search">
        <label tuiLabel>Search</label>
        <input
          placeholder="Search"
          tuiTextfield
          formControlName="search"
        />
      </tui-textfield>
      <button tuiButton>Search</button>
    </fieldset>
  </form>
</search>
```

### Usage Examples

#### Filters

**Template:**
```html
<search tuiSearch>
<form [formGroup]="form">
<fieldset formArrayName="filters">
<tui-search-filters> Filters <button tuiButton type="reset" > Reset </button>
<ng-container *ngFor="let control of filters.controls; let i = index">
<tui-textfield *tuiItem>
<label tuiLabel>Filter {{ i + 1 }}</label>
<input placeholder="Search" tuiTextfield [formControlName]="i" />
</tui-textfield>
</ng-container>
</tui-search-filters>
<button tuiButton type="button" > Search </button>
</fieldset>
</form>
</search>
<p>
<code>{{ form.value | json }}</code>
</p>
```
**TypeScript:**
```ts
import {JsonPipe, NgForOf} from '@angular/common';
import {Component} from '@angular/core';
import {FormArray, FormControl, FormGroup, ReactiveFormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {EMPTY_QUERY} from '@taiga-ui/cdk';
import {TuiButton, TuiTextfield} from '@taiga-ui/core';
import {TuiItemsWithMore} from '@taiga-ui/kit';
import {TuiSearch} from '@taiga-ui/layout';

@Component({
    standalone: true,
    imports: [
        JsonPipe,
        NgForOf,
        ReactiveFormsModule,
        TuiButton,
        TuiItemsWithMore,
        TuiSearch,
        TuiTextfield,
    ],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly filters = new FormArray(
        Array.from({length: 5}, () => new FormControl()),
    );

    protected readonly form = new FormGroup({filters: this.filters});
    protected readonly controls = EMPTY_QUERY;
}
```

#### Small

**Template:**
```html
<search tuiSearch>
<form [formGroup]="form">
<fieldset tuiTextfieldSize="s">
<tui-textfield iconStart="@tui.search">
<input formControlName="search" placeholder="Search" tuiTextfield />
</tui-textfield>
<tui-textfield tuiChevron>
<select formControlName="select" placeholder="User" tuiTextfield ></select>
<tui-data-list-wrapper *tuiTextfieldDropdown [items]="items" />
</tui-textfield>
<button size="s" tuiButton type="button" > Search </button>
</fieldset>
<fieldset>
<tui-segmented>
<label *ngFor="let segment of segments">
<input formControlName="segmented" type="radio" [value]="segment" /> {{ segment || 'All' }} </label>
</tui-segmented>
<tui-filter formControlName="filter" size="s" [items]="filters" /> Results: 999 <hr />
<label tuiLabel>
<input formControlName="switch" tuiSwitch type="checkbox" /> Assigned to me </label>
<hr />
<button appearance="flat" iconStart="@tui.rotate-cw" size="xs" tuiButton type="reset" [disabled]="!count()" > Clear {{ count() ? '(' + count() + ')' : '' }} </button>
<button iconStart="@tui.cloud-download" tuiLink type="button" [style.margin-inline-start]="'auto'" > Download </button>
</fieldset>
</form>
</search>
```
**TypeScript:**
```ts
import {NgForOf} from '@angular/common';
import {Component, inject} from '@angular/core';
import {toSignal} from '@angular/core/rxjs-interop';
import {FormControl, FormGroup, ReactiveFormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {tuiCountFilledControls} from '@taiga-ui/cdk';
import {TuiButton, TuiLink, TuiTextfield} from '@taiga-ui/core';
import {
    TuiChevron,
    TuiDataListWrapper,
    TuiFilter,
    TuiSegmented,
    TuiSwitch,
} from '@taiga-ui/kit';
import {TuiSearch} from '@taiga-ui/layout';
import {map} from 'rxjs';

@Component({
    standalone: true,
    imports: [
        NgForOf,
        ReactiveFormsModule,
        TuiButton,
        TuiChevron,
        TuiDataListWrapper,
        TuiFilter,
        TuiLink,
        TuiSearch,
        TuiSegmented,
        TuiSwitch,
        TuiTextfield,
    ],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly form = new FormGroup({
        search: new FormControl(),
        select: new FormControl(),
        date: new FormControl(),
        switch: new FormControl(),
        filter: new FormControl(),
        segmented: new FormControl(),
    });

    protected readonly items = inject<readonly string[]>('Pythons' as any);
    protected readonly filters = ['Python', 'JavaScript', 'TypeScript'];
    protected readonly segments = [null, 'Unread', 'Archived'];

    protected readonly count = toSignal(
        this.form.valueChanges.pipe(map(() => tuiCountFilledControls(this.form))),
        {initialValue: 0},
    );
}
```


### TypeScript

```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiDemo} from '@demo/utils';

@Component({
    standalone: true,
    imports: [TuiDemo],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Page {
    protected readonly examples = ['Filters', 'Small'];
}
```

---
# components/Segmented
- **Package**: `KIT`
- **Type**: components
Segmented is used for links and buttons to navigate within the application. It can also work as a radio
            button to toggle between different states.

### How to Use (Import)

```ts
import {Component} from '@angular/core';
import {TuiSegmented} from '@taiga-ui/kit';
// ...

@Component({
  standalone: true,
  imports: [
    // ...
    TuiSegmented,
  ],
})
export class Example {}
```

### How to Use (Template)

```html
<tui-segmented [(activeItemIndex)]="index">
  <button>Tab 1</button>
  <button>Tab 2</button>
  <button>Tab 3</button>
</tui-segmented>
```

### Usage Examples

#### Sizes

**Template:**
```html
<tui-segmented *ngFor="let size of sizes" [size]="size" >
<button type="button">
<tui-icon icon="@tui.sun" /> All <tui-badge-notification [size]="size">3</tui-badge-notification>
<tui-icon icon="@tui.moon" />
</button>
<button type="button">Incoming</button>
<button type="button">Outgoing</button>
</tui-segmented>
```
**TypeScript:**
```ts
import {NgFor} from '@angular/common';
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiIcon} from '@taiga-ui/core';
import {TuiBadgeNotification, TuiSegmented} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [NgFor, TuiBadgeNotification, TuiIcon, TuiSegmented],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly sizes = ['s', 'm', 'l'] as const;
}
```

#### Width

**Template:**
```html
<tui-segmented>
<button type="button">Dynamic width</button>
<button type="button">Items</button>
</tui-segmented>
<tui-segmented class="full">
<button type="button">Fixed width</button>
<button type="button">
<span tuiFade>With fadeout overflow effect</span>
</button>
</tui-segmented>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiFade, TuiSegmented} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [TuiFade, TuiSegmented],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {}
```

#### Customization

**Template:**
```html
<header>
<tui-segmented class="colors" [(activeItemIndex)]="active" >
<button *ngFor="let button of buttons; let index = index" type="button" [class.active]="index === active" > {{ button }} </button>
</tui-segmented>
</header>
<tui-segmented [style.border-radius.rem]="10">
<button type="button">Border radius</button>
<button type="button">Can be</button>
<button type="button">Customized</button>
</tui-segmented>
<tui-segmented [style.flex-direction]="'column'" [style.font-weight]="'bold'" >
<button type="button">Fonts</button>
<button type="button">Can also be</button>
<button type="button">Overridden</button>
</tui-segmented>
```
**TypeScript:**
```ts
import {NgFor} from '@angular/common';
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiSegmented} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [NgFor, TuiSegmented],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly buttons = ['Track active index', 'To color tabs', 'Differently'];
    protected active = 0;
}
```

#### Content

**Template:**
```html
<strong>Buttons</strong>
<tui-segmented>
<button type="button">Buttons</button>
<button type="button">Can be</button>
<button type="button">Used</button>
</tui-segmented>
<hr />
<strong>Links</strong>
<tui-segmented>
<a routerLinkActive [routerLink]="routes.Link" > Use routerLink </a>
<a routerLinkActive [routerLink]="routes.Segmented" [routerLinkActiveOptions]="options" > And routerLinkActive </a>
<a fragment="content" routerLinkActive [routerLink]="routes.Segmented" [routerLinkActiveOptions]="options" > To work with links </a>
</tui-segmented>
<hr />
<strong>Icons</strong>
<tui-segmented>
<button title="light" type="button" >
<tui-icon icon="@tui.sun" />
</button>
<button title="dark" type="button" >
<tui-icon icon="@tui.moon" />
</button>
</tui-segmented>
<hr />
<strong>Control</strong>
<tui-segmented>
<label>
<input name="radio" type="radio" value="a" [(ngModel)]="selected" /> Use radio inside </label>
<label>
<input name="radio" type="radio" value="b" [(ngModel)]="selected" /> It would be hidden </label>
<label>
<input name="radio" type="radio" value="c" [(ngModel)]="selected" /> Automatically </label>
</tui-segmented>
<button appearance="floating" size="s" tuiButton type="button" (click)="selected = 'b'" > Select second option </button>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {type IsActiveMatchOptions, RouterLink, RouterLinkActive} from '@angular/router';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {DemoRoute} from '@demo/routes';
import {TuiButton, TuiIcon} from '@taiga-ui/core';
import {TuiSegmented} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [
        FormsModule,
        RouterLink,
        RouterLinkActive,
        TuiButton,
        TuiIcon,
        TuiSegmented,
    ],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected selected = 'a';

    protected readonly options: IsActiveMatchOptions = {
        matrixParams: 'exact',
        queryParams: 'exact',
        paths: 'exact',
        fragment: 'exact',
    };

    protected readonly routes = DemoRoute;
}
```


### TypeScript

```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {TuiDemo} from '@demo/utils';

@Component({
    standalone: true,
    imports: [TuiDemo],
    templateUrl: './index.html',
    changeDetection,
})
export default class Example {
    protected readonly examples = ['Sizes', 'Width', 'Customization', 'Content'];
}
```

---
# components/Select
- **Package**: `KIT`
- **Type**: components
Select
        is a form control for selecting a
        single
        value from a set of options, similar to the native
        
            &lt;select&gt;
        
        element.

### How to Use (Import)

```ts
import {FormsModule} from '@angular/forms';
import {TuiTextfield} from '@taiga-ui/core';
import {TuiSelect} from '@taiga-ui/kit';

@Component({
  standalone: true,
  imports: [
    // ...
    FormsModule,
    TuiTextfield,
    TuiSelect,
  ],
})
export class Example {
  value: null = null;
}
```

### How to Use (Template)

```html
<tui-textfield tuiChevron>
  <input
    tuiSelect
    [(ngModel)]="value"
  />

  <tui-data-list-wrapper
    *tuiTextfieldDropdown
    [items]="items"
  />
</tui-textfield>
```

### Example

```html
<ng-template>
<tui-textfield *tuiLet="textfieldDoc.size === 's' || !control.value as showPlaceholder" tuiChevron [content]="control.value && textfieldContent" [disabledItemHandler]="itemsHandlers.disabledItemHandler()" [identityMatcher]="itemsHandlers.identityMatcher()" [stringify]="itemsHandlers.stringify()" [tuiDropdownAlign]="dropdown.align" [tuiDropdownAppearance]="dropdown.appearance" [tuiDropdownDirection]="dropdown.direction" [tuiDropdownLimitWidth]="dropdown.limitWidth" [tuiDropdownMaxHeight]="dropdown.maxHeight" [tuiDropdownMinHeight]="dropdown.minHeight" [tuiDropdownOffset]="dropdown.offset" [tuiTextfieldCleaner]="textfieldDoc.cleaner" [tuiTextfieldSize]="textfieldDoc.size" [(open)]="dropdown.open" >
<label *ngIf="!showPlaceholder" tuiLabel > Choose country </label>
<input tuiSelect [formControl]="control" [invalid]="controlDoc.invalid" [placeholder]="showPlaceholder ? 'Choose country' : ''" [readOnly]="controlDoc.readonly" [tuiDisabled]="controlDoc.disabled" />
<tui-data-list-wrapper *tuiTextfieldDropdown new [items]="countries$ | async" />
</tui-textfield>
</ng-template>
```

### API

| Property | Type | Description |
|----------|-----|----------|
| [content] | `PolymorpheusContent` | A template for custom view of textfield value. |

### Usage Examples

#### Textfield customization

Use all powers of Textfield : put any number of Icons and Tooltips inside (and control their order and color), modify the size of the textbox and etc. Explore Textfield documentation page for more customization options.

**Template:**
```html
<label tuiLabel> I am a label <tui-textfield iconStart="@tui.user-round" tuiChevron tuiTextfieldSize="m" [tuiTextfieldCleaner]="false" >
<input placeholder="I am placeholder" tuiSelect [(ngModel)]="value" />
<tui-data-list-wrapper *tuiTextfieldDropdown new [items]="users" />
<tui-icon *ngIf="value" icon="@tui.badge-check" style="color: var(--tui-status-info); pointer-events: none" />
<tui-icon tuiTooltip="I am a hint" />
</tui-textfield>
</label>
```
**TypeScript:**
```ts
import {NgIf} from '@angular/common';
import {Component} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiIcon, TuiTextfield} from '@taiga-ui/core';
import {TuiChevron, TuiDataListWrapper, TuiSelect, TuiTooltip} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [
        FormsModule,
        NgIf,
        TuiChevron,
        TuiDataListWrapper,
        TuiIcon,
        TuiSelect,
        TuiTextfield,
        TuiTooltip,
    ],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly users = [
        'Dmitriy Demenskiy',
        'Alex Inkin',
        'Vladimir Potekhin',
        'Nikita Barsukov',
        'Maxim Ivanov',
        'German Panov',
    ];

    protected value: string | null = null;
}
```

#### Override option component

You can override default behavior and appearance of all options inside dropdown. Just provide your custom component by tuiAsOptionContent -utility. Double check if you really need this feature! For the most cases &lt;tui-data-list-wrapper [itemContent]="..." /&gt; can be enough for your task. Explore this example for more details.

**Template:**
```html
<tui-textfield tuiChevron>
<input placeholder="Select something" tuiSelect [formControl]="control" />
<tui-data-list-wrapper *tuiTextfieldDropdown new [items]="items" />
</tui-textfield>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {FormControl, ReactiveFormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {tuiAsOptionContent, TuiTextfield} from '@taiga-ui/core';
import {TuiChevron, TuiDataListWrapper, TuiSelect} from '@taiga-ui/kit';

import {Option} from './option';

@Component({
    standalone: true,
    imports: [
        ReactiveFormsModule,
        TuiChevron,
        TuiDataListWrapper,
        TuiSelect,
        TuiTextfield,
    ],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
    providers: [tuiAsOptionContent(Option)],
})
export default class Example {
    protected readonly items = [
        'Option 1',
        'Option 2',
        'Option 3',
        'Option 4',
        'Option 5',
    ] as const;

    protected readonly control = new FormControl<string | null>(this.items[2]);
}
```

#### Items handlers

Use tuiItemsHandlersProvider to override default behavior of all Select -s below the current DI scope. Use input properties [identityMatcher] / [stringify] / disabledItemHandler (from Textfield ) to do the same for the specific Select only.

**Template:**
```html
<tui-textfield tuiChevron>
<input tuiSelect [(ngModel)]="value" />
<tui-data-list-wrapper *tuiTextfieldDropdown new [items]="users" />
</tui-textfield>
```
**TypeScript:**
```ts
import {Component, signal} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {tuiItemsHandlersProvider, TuiTextfield} from '@taiga-ui/core';
import {TuiChevron, TuiDataListWrapper, TuiSelect} from '@taiga-ui/kit';

interface Character {
    readonly id: number;
    readonly name: string;
}

@Component({
    standalone: true,
    imports: [FormsModule, TuiChevron, TuiDataListWrapper, TuiSelect, TuiTextfield],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
    providers: [
        /**
         * You can also use input props of `Textfield`
         * (they will have more priority):
         * ```html
         * <tui-textfield
         *     [identityMatcher]="..."
         *     [stringify]="..."
         *     [disabledItemHandler]="..."
         * />
         * ```
         */
        tuiItemsHandlersProvider({
            stringify: signal((x: Character) => x.name),
            identityMatcher: signal((a: Character, b: Character) => a.id === b.id),
            disabledItemHandler: signal((x: Character) => x.name.includes('Trevor')),
        }),
    ],
})
export default class Example {
    protected readonly users: Character[] = [
        {id: 42, name: 'Tommy Vercetti'},
        {id: 237, name: 'Carl Johnson'},
        {id: 666, name: 'Niko Bellic'},
        {id: 999, name: 'Trevor Philips'},
        {id: 123, name: 'Michael De Santa'},
        {id: 777, name: 'Franklin Clinton'},
    ];

    protected value: Character | null = {id: 42, name: 'Tommy Vercetti'}; // !== this.users[0]
}
```

#### Customize content

DataListWrapper provides an opportunity to customize appearance of options inside dropdown by [itemContent] -property. Also, Textfield has [content] -property to customize appearance of selected option inside textbox. Both properties accept PolymorpheusContent – it empowers you with extremely large possibilities for customization.

**Template:**
```html
<tui-textfield tuiChevron [content]="value && content" [stringify]="stringify" >
<input placeholder="Choose a card" tuiSelect [(ngModel)]="value" />
<tui-data-list-wrapper *tuiTextfieldDropdown new [itemContent]="content" [items]="cards" />
</tui-textfield>
<ng-template #content let-card >
<div class="card">
<tui-thumbnail-card [paymentSystem]="card.paymentSystem"> {{ card.number.slice(-4) }} </tui-thumbnail-card> {{ card.name }} </div>
</ng-template>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {type TuiPaymentSystem, TuiThumbnailCard} from '@taiga-ui/addon-commerce';
import {type TuiStringHandler} from '@taiga-ui/cdk';
import {TuiTextfield} from '@taiga-ui/core';
import {TuiChevron, TuiDataListWrapper, TuiSelect} from '@taiga-ui/kit';

interface Card {
    name: string;
    number: string;
    paymentSystem: TuiPaymentSystem;
}

@Component({
    standalone: true,
    imports: [
        FormsModule,
        TuiChevron,
        TuiDataListWrapper,
        TuiSelect,
        TuiTextfield,
        TuiThumbnailCard,
    ],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected cards: Card[] = [
        {name: 'Bitcoin', number: '5555555555554444', paymentSystem: 'mastercard'},
        {name: 'Salary', number: '4242424242424242', paymentSystem: 'visa'},
        {name: 'Charity', number: '2201382000000013', paymentSystem: 'mir'},
        {name: 'Subscriptions', number: '6200000000000005', paymentSystem: 'unionpay'},
    ];

    protected value: Card | null = null;
    protected stringify: TuiStringHandler<Card> = (x) => x.name;
}
```

#### With DataList

DataListWrapper is just a helper to solve most popular use cases. Use DataList for more complex cases when great flexibility is required. DataList documentation page for more customization options.

**Template:**
```html
<tui-textfield tuiChevron>
<input placeholder="Install library" tuiSelect [(ngModel)]="value" />
<tui-data-list *tuiTextfieldDropdown tuiDataListDropdownManager >
<button *ngFor="let group of taigaFamilyLibs" iconEnd="@tui.chevron-right" new tuiDropdownAlign="right" tuiDropdownLimitWidth="auto" tuiDropdownManual tuiDropdownSided tuiOption type="button" [tuiDropdown]="options" > {{ group.name }} <ng-template #options>
<tui-data-list>
<button *ngFor="let lib of group.libraries" new tuiOption type="button" [value]="lib" > {{ lib }} </button>
</tui-data-list>
</ng-template>
</button>
</tui-data-list>
</tui-textfield>
```
**TypeScript:**
```ts
import {NgForOf} from '@angular/common';
import {Component} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiDataList, TuiDropdown, TuiTextfield} from '@taiga-ui/core';
import {TuiChevron, TuiDataListDropdownManager, TuiSelect} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [
        FormsModule,
        NgForOf,
        TuiChevron,
        TuiDataList,
        TuiDataListDropdownManager,
        TuiDropdown,
        TuiSelect,
        TuiTextfield,
    ],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    protected taigaFamilyLibs = [
        {
            name: 'Taiga UI',
            libraries: [
                '@taiga-ui/cdk',
                '@taiga-ui/core',
                '@taiga-ui/kit',
                '@taiga-ui/addon-doc',
                '@taiga-ui/addon-charts',
                '@taiga-ui/addon-commerce',
                '@taiga-ui/addon-table',
                '@taiga-ui/addon-mobile',
            ],
        },
        {
            name: 'Maskito',
            libraries: [
                '@maskito/core',
                '@maskito/kit',
                '@maskito/phone',
                '@maskito/react',
                '@maskito/angular',
                '@maskito/vue',
            ],
        },
        {
            name: 'Web APIs for Angular',
            libraries: [
                '@ng-web-apis/common',
                '@ng-web-apis/platform',
                '@ng-web-apis/intersection-observer',
                '@ng-web-apis/resize-observer',
                '@ng-web-apis/mutation-observer',
                '@ng-web-apis/view-transition',
                '@ng-web-apis/universal',
                '@ng-web-apis/storage',
                '@ng-web-apis/geolocation',
            ],
        },
    ];

    protected value: string | null = null;
}
```

#### Choose form control output

DataList exposes Option -directives – it provides you with an opportunity to decide which data type put inside its [value] . This example demonstrates how every option can be a complex object with any structure but form control contains a single id-property as number -type.

**Template:**
```html
<tui-textfield tuiChevron [stringify]="stringify" >
<input tuiSelect [formControl]="control" />
<tui-data-list *tuiTextfieldDropdown>
<button *ngFor="let item of items" new tuiOption type="button" [value]="item.id" > {{ item.name }} </button>
</tui-data-list>
</tui-textfield>
<p>
<strong>Form control:</strong>
<code>{{ control.value | json }}</code>
</p>
```
**TypeScript:**
```ts
import {JsonPipe, NgForOf} from '@angular/common';
import {Component} from '@angular/core';
import {FormControl, ReactiveFormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {type TuiStringHandler} from '@taiga-ui/cdk';
import {TuiDataList, TuiTextfield} from '@taiga-ui/core';
import {TuiChevron, TuiSelect} from '@taiga-ui/kit';

interface Python {
    readonly id: number;
    readonly name: string;
}

@Component({
    standalone: true,
    imports: [
        JsonPipe,
        NgForOf,
        ReactiveFormsModule,
        TuiChevron,
        TuiDataList,
        TuiSelect,
        TuiTextfield,
    ],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly control = new FormControl<number | null>(777);

    protected readonly items: readonly Python[] = [
        {id: 42, name: 'John Cleese'},
        {id: 237, name: 'Eric Idle'},
        {id: 666, name: 'Michael Palin'},
        {id: 123, name: 'Terry Gilliam'},
        {id: 777, name: 'Terry Jones'},
        {id: 999, name: 'Graham Chapman'},
    ];

    protected readonly stringify: TuiStringHandler<number> = (id) =>
        this.items.find((item) => item.id === id)?.name ?? '';
}
```

#### Virtual scroll

You can use Select with virtual scrolling from &#64;angular/cdk/scrolling .

**Template:**
```html
<tui-textfield tuiChevron>
<input placeholder="Country" tuiSelect [(ngModel)]="value" />
<cdk-virtual-scroll-viewport *tuiTextfieldDropdown tuiScrollable class="scroll" [itemSize]="44" >
<tui-data-list>
<button *cdkVirtualFor="let item of countries | async" new tuiOption type="button" [value]="item" > {{ item }} </button>
</tui-data-list>
</cdk-virtual-scroll-viewport>
</tui-textfield>
```
**TypeScript:**
```ts
import {ScrollingModule} from '@angular/cdk/scrolling';
import {AsyncPipe} from '@angular/common';
import {Component, inject} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiDataList, TuiScrollable, TuiTextfield} from '@taiga-ui/core';
import {TUI_COUNTRIES, TuiChevron, TuiSelect} from '@taiga-ui/kit';
import {map} from 'rxjs';

@Component({
    standalone: true,
    imports: [
        AsyncPipe,
        FormsModule,
        ScrollingModule,
        TuiChevron,
        TuiDataList,
        TuiScrollable,
        TuiSelect,
        TuiTextfield,
    ],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly countries = inject(TUI_COUNTRIES).pipe(map(Object.values));
    protected value = null;
}
```

#### With DropdownMobile

Use real mobile device or enable mobile emulation in DevTools to explore this example! Put tuiDropdownMobile="..." on &lt;tui-textfield /&gt; to enable sheet dialog (instead of default dropdown) with special appearance of options (similar to native controls) for mobile devices . This example demonstrates different appearances of options for different platforms (using TuiPlatform directive). By default, it detects ios / android / web platforms automatically (by parsing user agent) – it is not required to specify it explicitly.

**Template:**
```html
<tui-textfield tuiChevron tuiDropdownMobile="Select platform" [disabledItemHandler]="disabledItemHandler" >
<label tuiLabel>Platform</label>
<input tuiSelect [(ngModel)]="value" />
<tui-data-list-wrapper *tuiTextfieldDropdown new [items]="platforms" [tuiPlatform]="value ?? 'ios'" />
</tui-textfield>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiDropdownMobile} from '@taiga-ui/addon-mobile';
import {type TuiBooleanHandler, TuiPlatform} from '@taiga-ui/cdk';
import {TuiTextfield} from '@taiga-ui/core';
import {TuiChevron, TuiDataListWrapper, TuiSelect} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [
        FormsModule,
        TuiChevron,
        TuiDataListWrapper,
        TuiDropdownMobile,
        TuiPlatform,
        TuiSelect,
        TuiTextfield,
    ],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly platforms = ['web', 'ios', 'android'] as const;
    protected value: 'android' | 'ios' | 'web' | null = 'ios';
    protected readonly disabledItemHandler: TuiBooleanHandler<string> = (x) =>
        x === 'web';
}
```

#### Native picker with disabled option

Put &lt;select tuiSelect/&gt; (instead of &lt;input tuiSelect/&gt; ) to enable native browser picker. This example demonstrates how enable this feature for mobile devices only.

**Template:**
```html
<tui-textfield tuiChevron [disabledItemHandler]="disabledItemHandler" [stringify]="stringify" >
<select *ngIf="isMobile; else desktopFallback" aria-label="Choose your side" placeholder="Choose your side" tuiSelect [formControl]="control" [items]="items" ></select>
<ng-template #desktopFallback>
<input placeholder="Choose your side" tuiSelect [formControl]="control" />
<tui-data-list-wrapper *tuiTextfieldDropdown new [items]="items" />
</ng-template>
</tui-textfield>
```
**TypeScript:**
```ts
import {NgIf} from '@angular/common';
import {Component, inject} from '@angular/core';
import {FormControl, ReactiveFormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {
    TUI_IS_MOBILE,
    type TuiBooleanHandler,
    type TuiStringHandler,
} from '@taiga-ui/cdk';
import {TuiTextfield} from '@taiga-ui/core';
import {TuiChevron, TuiDataListWrapper, TuiSelect} from '@taiga-ui/kit';

interface Character {
    id: number;
    name: string;
}

@Component({
    standalone: true,
    imports: [
        NgIf,
        ReactiveFormsModule,
        TuiChevron,
        TuiDataListWrapper,
        TuiSelect,
        TuiTextfield,
    ],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly isMobile = inject(TUI_IS_MOBILE);
    protected readonly control = new FormControl(null);
    protected items: readonly Character[] = [
        {name: 'Luke Skywalker', id: 1},
        {name: 'Leia Organa Solo', id: 2},
        {name: 'Darth Vader', id: 3},
        {name: 'Han Solo', id: 4},
        {name: 'Obi-Wan Kenobi', id: 5},
        {name: 'Yoda', id: 6},
    ];

    protected stringify: TuiStringHandler<Character> = (item) => item.name;
    protected readonly disabledItemHandler: TuiBooleanHandler<Character> = (item) =>
        item.name === 'Darth Vader';
}
```

#### Native picker with grouping options

**Template:**
```html
<tui-textfield tuiChevron>
<select aria-label="Select food" placeholder="Select food" tuiSelect [formControl]="control" [items]="groupItems" [labels]="labels" ></select>
</tui-textfield>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {FormControl, ReactiveFormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiTextfield} from '@taiga-ui/core';
import {TuiChevron, TuiSelect} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [ReactiveFormsModule, TuiChevron, TuiSelect, TuiTextfield],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    protected groupItems: ReadonlyArray<readonly string[]> = [
        ['Caesar', 'Greek', 'Apple and Chicken'],
        ['Broccoli Cheddar', 'Chicken and Rice', 'Chicken Noodle'],
    ];

    protected readonly labels = ['Salad', 'Soup'];
    protected readonly control = new FormControl<string | null>(null);
}
```


### TypeScript

```ts
import {Component, computed, inject} from '@angular/core';
import {FormControl, ReactiveFormsModule} from '@angular/forms';
import {TuiDocControl} from '@demo/components/control';
import {TuiDocDropdown} from '@demo/components/dropdown';
import {TuiDocItemsHandlers} from '@demo/components/items-handlers';
import {TuiDocTextfield} from '@demo/components/textfield';
import {changeDetection} from '@demo/emulate/change-detection';
import {DemoRoute} from '@demo/routes';
import {TuiDemo} from '@demo/utils';
import {type TuiRawLoaderContent} from '@taiga-ui/addon-doc';
import {TUI_IS_MOBILE, type TuiContext, TuiLet} from '@taiga-ui/cdk';
import {TuiDropdown, TuiTextfield} from '@taiga-ui/core';
import {TUI_COUNTRIES, TuiChevron, TuiDataListWrapper, TuiSelect} from '@taiga-ui/kit';
import {type PolymorpheusContent} from '@taiga-ui/polymorpheus';
import {map, type Observable} from 'rxjs';

interface Country {
    id: string;
    name: string;
}

@Component({
    standalone: true,
    imports: [
        ReactiveFormsModule,
        TuiChevron,
        TuiDataListWrapper,
        TuiDemo,
        TuiDocControl,
        TuiDocDropdown,
        TuiDocItemsHandlers,
        TuiDocTextfield,
        TuiDropdown,
        TuiLet,
        TuiSelect,
        TuiTextfield,
    ],
    templateUrl: './index.html',
    changeDetection,
})
export default class PageComponent {
    protected readonly routes = DemoRoute;

    protected readonly isMobile = inject(TUI_IS_MOBILE);
    protected readonly control = new FormControl<Country | null>({
        id: 'US',
        name: 'USA',
    });

    protected textfieldContent: PolymorpheusContent = '';

    protected readonly countries$: Observable<Country[]> = inject(TUI_COUNTRIES).pipe(
        map((x) => Object.entries(x).map(([id, name]) => ({id, name}))),
    );

    protected readonly textfieldContentVariants = computed(() => [
        '',
        'TOP SECRET',
        ({$implicit: x}: TuiContext<any>) =>
            x?.name.includes('i') ? `->${x.name}<-` : x?.name,
    ]);

    protected selectOptionExample: TuiRawLoaderContent = import(
        './examples/10/option.ts?raw'
    );

    protected readonly handler = (item: Country): boolean =>
        item.id.charCodeAt(1) % 3 === 0;
}
```

---
# services/BreakpointService
- **Package**: `CORE`
- **Type**: components/services
Service to observe changes in the current breakpoint.

### Usage Examples

#### Basic

**Template:**
```html
<p>Change the viewport of this window to see changes in breakpoint</p>
<table class="tui-space_top-4">
<thead>
<tr>
<th>CSS</th>
<th>Service</th>
</tr>
</thead>
<tbody>
<td>
<div class="mobile">Mobile</div>
<div class="desktop-small">Desktop small</div>
<div class="desktop-large">Desktop large</div>
</td>
<td *ngIf="breakpoint$ | async as breakpoint">
<div *ngIf="breakpoint === 'mobile'">Mobile</div>
<div *ngIf="breakpoint === 'desktopSmall'">Desktop small</div>
<div *ngIf="breakpoint === 'desktopLarge'">Desktop large</div>
</td>
</tbody>
</table>
```
**TypeScript:**
```ts
import {AsyncPipe, NgIf} from '@angular/common';
import {Component, inject} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiBreakpointService} from '@taiga-ui/core';

@Component({
    standalone: true,
    imports: [AsyncPipe, NgIf],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly breakpoint$ = inject(TuiBreakpointService);
}
```


### TypeScript

```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {TuiDemo} from '@demo/utils';

@Component({
    standalone: true,
    imports: [TuiDemo],
    templateUrl: './index.html',
    changeDetection,
})
export default class Page {
    protected injectService = import('./examples/inject-service.md?raw');
}
```

---
# services/KeyboardService
- **Package**: `ADDON-MOBILE`
- **Type**: components/services
A service that allows hiding and showing virtual keyboard programmatically on both Android and iOS devices
        
        
            Does nothing on devices with no virtual keyboard or when input is not focused

### Usage Examples

#### Basic

**Template:**
```html
<tui-input [(ngModel)]="value">Type something</tui-input>
<p>
<button tuiButton type="button" (mousedown.prevent.zoneless)="keyboard.toggle()" > Toggle </button>
</p>
```
**TypeScript:**
```ts
import {Component, inject} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiKeyboardService} from '@taiga-ui/addon-mobile';
import {TuiButton} from '@taiga-ui/core';
import {TuiInputModule} from '@taiga-ui/legacy';

@Component({
    standalone: true,
    imports: [FormsModule, TuiButton, TuiInputModule],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly keyboard = inject(TuiKeyboardService);
    protected value = '';
}
```


### TypeScript

```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {TuiDemo} from '@demo/utils';

@Component({
    standalone: true,
    imports: [TuiDemo],
    templateUrl: './index.html',
    changeDetection,
})
export default class Page {
    protected readonly inject = import('./examples/inject.md?raw');
}
```

---
# components/SheetDialog
- **Package**: `ADDON-MOBILE`
- **Type**: components
A mobile draggable sheet dialog

### Example

```html
<ng-container *tuiLet="label === 'Template' ? labelTemplate : label as dialogLabel">
<button tuiButton type="button" (click)="showDialog(sheetTemplate, dialogLabel)" > Click </button>
<button tuiButton type="button" class="tui-space_left-4" (longtap)="showDialog(sheetTemplate, dialogLabel)" > Long tap </button>
</ng-container>
<ng-template #labelTemplate>
<div class="label">
<tui-avatar size="m">KG</tui-avatar>
<label tuiTitle>
<span tuiSubtitle>Terry Jones</span>
<b>Karl Gambolputty</b>
</label>
</div>
</ng-template>
<ng-template #sheetTemplate let-completeWith="completeWith" let-observer >
<p [style.flex-grow]="1"> Karl Gambolputty de von Ausfern-schplenden-schlitter-crasscrenbon-fried-digger-dingle-dangle-dongle-dungle-burstein-von-knacker-thrasher-apple-banger-horowitz-ticolensic-grander-knotty-spelltinkle-grandlich-grumblemeyer-spelterwasser-kurstlich-himbleeisen-bahnwagen-gutenabend-bitte-ein-nürnburger-bratwustle-gerspurten-mitzweimache-luber von Hautkopft of Ulm was the last-surviving relative of Johann Gambolputty de von. </p>
<footer tuiFloatingContainer>
<button tuiButton type="button" class="tui-space_right-1" (click)="observer.next('Hi')" > Say "Hi" </button>
<button tuiButton type="button" class="tui-space_right-1" (click)="completeWith('Hi and bye!')" > Say "Hi and bye!" </button>
<button tuiButton type="button" (click)="navigate()" > Navigate to Examples </button>
</footer>
</ng-template>
```

### API

| Property | Type | Description |
|----------|-----|----------|
| [closeable] | `boolean` | Whether or not a sheet can be closed by user. |
| [fullscreen] | `boolean` | Fullscreen |
| [bar] | `boolean` | Show bar |
| [data] | `I` | Optional data to be passed to the sheet. |
| [label] | `PolymorpheusContent` | Sheet label. |
| [stops] | `string[]` | An array of stop points in any units for the sheet. |
| [initial] | `number` | means to stop on top of the sheet's content. |
| [offset] | `number` | ) |
| [required] | `boolean` | (you can catch it with "catch" operator or onError handler) |

### Usage Examples

#### String

**Template:**
```html
<button tuiButton type="button" (click)="onClick()" > Show </button>
```
**TypeScript:**
```ts
import {Component, inject} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiSheetDialogService} from '@taiga-ui/addon-mobile';
import {TuiButton} from '@taiga-ui/core';

@Component({
    standalone: true,
    imports: [TuiButton],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    private readonly service = inject(TuiSheetDialogService);

    protected onClick(): void {
        this.service
            .open('Supports <b>basic</b> HTML', {label: 'Simple sheet'})
            .subscribe();
    }
}
```

#### Basic

**Template:**
```html
<button tuiButton type="button" (click)="open = true" > Show </button>
<ng-template let-observer [tuiSheetDialogOptions]="options" [(tuiSheetDialog)]="open" >
<a appearance="secondary" href="mailto:alexander@inkin.ru" iconStart="@tui.mail" size="m" tuiIconButton class="tui-space_right-2" > Email </a>
<a appearance="secondary" href="https://t.me/waterplea" iconStart="@tui.phone-forwarded" size="m" tuiIconButton class="tui-space_right-2" > Telegram </a>
<a appearance="secondary" href="https://waterplea.bandcamp.com/" iconStart="@tui.music" size="m" tuiIconButton > Music </a>
<p>Passionate Angular dev, musician and OSS author.</p>
<footer tuiFloatingContainer class="footer" >
<button size="m" tuiButton type="button" (click)="observer.complete()" > Give a raise </button>
<button appearance="secondary" size="m" tuiButton type="button" (click)="observer.complete()" > Fire </button>
</footer>
</ng-template>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiSheetDialog, type TuiSheetDialogOptions} from '@taiga-ui/addon-mobile';
import {TuiButton} from '@taiga-ui/core';
import {TuiFloatingContainer} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [TuiButton, TuiFloatingContainer, TuiSheetDialog],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    protected open = false;

    protected readonly options: Partial<TuiSheetDialogOptions> = {
        label: 'Alexander Inkin',
        closeable: false,
    };
}
```

#### Advanced

**Template:**
```html
<button tuiButton type="button" (click)="open = true" > Show/Hide </button>
<ng-template #label>
<label tuiTitle>
<span tuiSubtitle>Monty Python</span>
<b>And the Holy Grail</b>
</label>
</ng-template>
<ng-template [tuiSheetDialogOptions]="{ label: label, stops: ['5.5rem', '13rem'], }" [(tuiSheetDialog)]="open" >
<p class="buttons">
<button appearance="secondary" size="m" tuiButton type="button" > Buy {{ 12.99 | tuiAmount: 'USD' | async }} </button>
<button appearance="secondary" size="m" tuiButton type="button" > Rent {{ 4.99 | tuiAmount: 'USD' | async }} </button>
</p>
<h3>Cast:</h3>
<p>John Cleese</p>
<p>Eric Idle</p>
<p>Michael Palin</p>
<p>Graham Chapman</p>
<p>Terry Gilliam</p>
<p>Terry Jones</p>
<p>Carol Cleveland</p>
<hr />
<h3>Directed by:</h3>
<p>Terry Gilliam</p>
<p>Terry Jones</p>
<hr />
<h3>Produced by:</h3>
<p>Mark Forstater</p>
<p>Michael White</p>
<hr />
<h3>Written by:</h3>
<p>John Cleese</p>
<p>Eric Idle</p>
<p>Michael Palin</p>
<p>Graham Chapman</p>
<p>Terry Gilliam</p>
<p>Terry Jones</p>
<hr />
<h3>Budget:</h3>
<p>{{ 400000 | tuiAmount: 'USD' | async }}</p>
<hr />
<h3>Box office:</h3>
<p>{{ 5000000 | tuiAmount: 'USD' | async }}</p>
<hr />
<h3>Release date</h3>
<p>April 3, 1975</p>
<hr />
<h3>Running time</h3>
<p>92 minutes</p>
<footer class="footer">© EMI Films</footer>
<div tuiFloatingContainer class="floating" >
<button size="m" tuiButton type="button" > Add to Watch List </button>
</div>
</ng-template>
```
**TypeScript:**
```ts
import {AsyncPipe} from '@angular/common';
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiAmountPipe} from '@taiga-ui/addon-commerce';
import {TuiSheetDialog} from '@taiga-ui/addon-mobile';
import {TuiButton, TuiTitle} from '@taiga-ui/core';
import {TuiFloatingContainer} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [
        AsyncPipe,
        TuiAmountPipe,
        TuiButton,
        TuiFloatingContainer,
        TuiSheetDialog,
        TuiTitle,
    ],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected open = false;
}
```

#### Sticky elements

**Template:**
```html
<button tuiButton type="button" (click)="toggle(true)" > Show/Hide </button>
<ng-template [tuiSheetDialog]="open" [tuiSheetDialogOptions]="{stops: ['29rem'], offset: offset, fullscreen: true}" (tuiSheetDialogChange)="toggle($event)" >
<header class="header">
<tui-input tuiTextfieldIconLeft="@tui.search" [formControl]="search" > Find user </tui-input>
</header>
<div class="container">
<button *ngFor="let user of users$ | async" type="button" class="item" (click)="toggle(false)" >
<tui-avatar size="s" [src]="user | tuiInitials" [style.background]="user | tuiAutoColor" /> {{ user }} </button>
</div>
<footer tuiFloatingContainer>
<button tuiButton type="button" (click)="toggle(false)" > Invite more users </button>
<span class="legal">Opens a separate app</span>
</footer>
</ng-template>
```
**TypeScript:**
```ts
import {AsyncPipe, NgForOf} from '@angular/common';
import {Component} from '@angular/core';
import {FormControl, ReactiveFormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiSheetDialog} from '@taiga-ui/addon-mobile';
import {TUI_DEFAULT_MATCHER, tuiControlValue} from '@taiga-ui/cdk';
import {TuiAutoColorPipe, TuiButton, TuiInitialsPipe} from '@taiga-ui/core';
import {TuiAvatar, TuiFloatingContainer} from '@taiga-ui/kit';
import {TuiInputModule, TuiTextfieldControllerModule} from '@taiga-ui/legacy';
import {map} from 'rxjs';

const USERS = [
    'John Doe',
    'Jane Doe',
    'John Smith',
    'Jane Smith',
    'John Johnson',
    'Jane Johnson',
    'John Williams',
    'Jane Williams',
    'John Brown',
    'Jane Brown',
    'John Davis',
    'Jane Davis',
    'John Miller',
    'Jane Miller',
    'John Wilson',
    'Jane Wilson',
];

@Component({
    standalone: true,
    imports: [
        AsyncPipe,
        NgForOf,
        ReactiveFormsModule,
        TuiAutoColorPipe,
        TuiAvatar,
        TuiButton,
        TuiFloatingContainer,
        TuiInitialsPipe,
        TuiInputModule,
        TuiSheetDialog,
        TuiTextfieldControllerModule,
    ],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected open = false;

    protected readonly offset = 16;

    protected readonly search = new FormControl('');

    protected readonly users$ = tuiControlValue<string>(this.search).pipe(
        map((search) => USERS.filter((user) => TUI_DEFAULT_MATCHER(user, search))),
    );

    protected toggle(open: boolean): void {
        this.open = open;

        if (open) {
            this.search.setValue('');
        }
    }
}
```

#### Responsive

**Template:**
```html
<button tuiButton type="button" (click)="open = true" > Show </button>
<ng-template let-observer [tuiResponsiveDialogOptions]="options" [(tuiResponsiveDialog)]="open" > This dialog would show up as regular <a tuiLink [routerLink]="routes.Dialog" > Dialog </a> on desktop and as a <code>SheetDialog</code> on a mobile device. <footer class="footer">
<button size="m" tuiButton type="button" (click)="observer.complete()" > This is really cool </button>
<button appearance="secondary" size="m" tuiButton type="button" (click)="observer.complete()" > Glad to know that </button>
</footer>
</ng-template>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {RouterLink} from '@angular/router';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {DemoRoute} from '@demo/routes';
import {
    TuiResponsiveDialog,
    type TuiResponsiveDialogOptions,
} from '@taiga-ui/addon-mobile';
import {TuiButton, TuiLink} from '@taiga-ui/core';

@Component({
    standalone: true,
    imports: [RouterLink, TuiButton, TuiLink, TuiResponsiveDialog],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly routes = DemoRoute;
    protected open = false;

    protected readonly options: Partial<TuiResponsiveDialogOptions> = {
        label: 'Responsive',
        size: 's',
    };
}
```

#### AppBar

**Template:**
```html
<tui-notification> When mobile styles are enabled you can use <code style="white-space: nowrap">input[type='search'][tuiSearch]</code> to imitate iOS native input </tui-notification>
<p>
<button tuiButton type="button" (click)="open.set(true)" > Show </button>
</p>
<ng-template #bar>
<tui-app-bar>
<button tuiButton tuiSlot="left" type="button" (click)="open.set(false)" > Close </button> Search contacts </tui-app-bar>
<input placeholder="Search contacts" tuiSearch type="search" class="input" [(ngModel)]="search" />
</ng-template>
<ng-template [tuiSheetDialog]="open()" [tuiSheetDialogOptions]="{label: bar, bar: false, fullscreen: true}" (tuiSheetDialogChange)="open.set($event)" >
<div class="favorites">
<tui-avatar-labeled *ngFor="let item of items | slice: 0 : 6" [label]="item.name" >
<tui-avatar [src]="item.avatar | tuiFallbackSrc: '@tui.user' | async" />
</tui-avatar-labeled>
</div>
<div class="items">
<button *ngFor="let item of items | tuiFilter: filter : search" tuiCell type="button" class="cell" (click)="open.set(false)" >
<tui-avatar [src]="item.avatar | tuiFallbackSrc: '@tui.user' | async" />
<span tuiTitle>
<span tuiFade>{{ item.name }}</span>
<span tuiSubtitle>{{ item.email }}</span>
</span>
</button>
</div>
<footer tuiFloatingContainer>
<button tuiButton type="button" class="button" (click)="open.set(false)" > Add contact </button>
</footer>
</ng-template>
```
**TypeScript:**
```ts
import {AsyncPipe, NgForOf, SlicePipe} from '@angular/common';
import {Component, inject, signal} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiSheetDialog} from '@taiga-ui/addon-mobile';
import {TUI_DEFAULT_MATCHER, TuiFilterPipe, type TuiMatcher} from '@taiga-ui/cdk';
import {TuiButton, TuiFallbackSrcPipe, TuiNotification, TuiTitle} from '@taiga-ui/core';
import {TuiAvatar, TuiAvatarLabeled, TuiFade, TuiFloatingContainer} from '@taiga-ui/kit';
import {TuiAppBar, TuiCell} from '@taiga-ui/layout';

@Component({
    standalone: true,
    imports: [
        AsyncPipe,
        FormsModule,
        NgForOf,
        SlicePipe,
        TuiAppBar,
        TuiAvatar,
        TuiAvatarLabeled,
        TuiButton,
        TuiCell,
        TuiFade,
        TuiFallbackSrcPipe,
        TuiFilterPipe,
        TuiFloatingContainer,
        TuiNotification,
        TuiSheetDialog,
        TuiTitle,
    ],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected open = signal(false);
    protected search = '';

    protected readonly items = [
        {
            name: 'Grigori Constantinopolsky',
            avatar: 'https://avatars.githubusercontent.com/u/10106368',
            email: 'grigori@gmail.com',
        },
        {
            name: 'Nikolai Rimsky-Korsakov',
            avatar: 'https://avatars.githubusercontent.com/u/11832552',
            email: 'nikolai@gmail.com',
        },
        {
            name: 'Hubert Wolfflegelstainhausenbergedorf',
            avatar: 'https://avatars.githubusercontent.com/u/46284632',
            email: 'hubert@gmail.com',
        },
        {
            name: 'Arkhangelsky Constantine',
            avatar: 'https://avatars.githubusercontent.com/u/35179038',
            email: 'contantine@gmail.com',
        },
        {
            name: 'Zoya Kosmodemyanskaya',
            avatar: 'https://avatars.githubusercontent.com/u/8158578',
            email: 'zoya@gmail.com',
        },
        {
            name: 'Johann Gambolputty',
            avatar: '',
            email: 'johann@gmail.com',
        },
        ...inject<readonly string[]>('Pythons' as any).map((name) => ({
            name,
            avatar: '',
            email: `${name.split(' ')[0]}@gmail.com`,
        })),
    ];

    protected readonly filter: TuiMatcher<[(typeof this.items)[0], string]> = (
        item,
        search,
    ) => TUI_DEFAULT_MATCHER(item.name, search);
}
```

#### Fullscreen

**Template:**
```html
<button tuiButton type="button" (click)="open = true" > Show </button>
<ng-template let-observer [tuiSheetDialogOptions]="options" [(tuiSheetDialog)]="open" >
<span>
<a appearance="secondary" href="mailto:alexander@inkin.ru" iconStart="@tui.mail" size="m" tuiIconButton class="tui-space_right-2" > Email </a>
<a appearance="secondary" href="https://t.me/waterplea" iconStart="@tui.phone-forwarded" size="m" tuiIconButton class="tui-space_right-2" > Telegram </a>
<a appearance="secondary" href="https://waterplea.bandcamp.com/" iconStart="@tui.music" size="m" tuiIconButton > Music </a>
</span>
<p [style.flex-grow]="1">Passionate Angular dev, musician and OSS author.</p>
<footer tuiFloatingContainer>
<button size="m" tuiButton type="button" (click)="observer.complete()" > Give a raise </button>
<button appearance="secondary" size="m" tuiButton type="button" (click)="observer.complete()" > Fire </button>
</footer>
</ng-template>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiSheetDialog, type TuiSheetDialogOptions} from '@taiga-ui/addon-mobile';
import {TuiButton} from '@taiga-ui/core';
import {TuiFloatingContainer} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [TuiButton, TuiFloatingContainer, TuiSheetDialog],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    protected open = false;

    protected readonly options: Partial<TuiSheetDialogOptions> = {
        label: 'Alexander Inkin',
        closeable: true,
        fullscreen: true,
    };
}
```


### TypeScript

```ts
import {Component, inject, type TemplateRef} from '@angular/core';
import {ActivatedRoute, Router} from '@angular/router';
import {changeDetection} from '@demo/emulate/change-detection';
import {TuiDemo} from '@demo/utils';
import {
    TUI_SHEET_DIALOG_DEFAULT_OPTIONS,
    type TuiSheetDialogOptions,
    TuiSheetDialogService,
} from '@taiga-ui/addon-mobile';
import {TuiLet} from '@taiga-ui/cdk';
import {
    TuiAlertService,
    TuiButton,
    type TuiDialogContext,
    TuiTitle,
} from '@taiga-ui/core';
import {TuiAvatar, TuiFloatingContainer} from '@taiga-ui/kit';
import {type PolymorpheusContent} from '@taiga-ui/polymorpheus';
import {switchMap} from 'rxjs';

@Component({
    standalone: true,
    imports: [TuiAvatar, TuiButton, TuiDemo, TuiFloatingContainer, TuiLet, TuiTitle],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    changeDetection,
})
export default class Page {
    private readonly router = inject(Router);
    private readonly route = inject(ActivatedRoute);
    private readonly sheetDialogs = inject(TuiSheetDialogService);
    private readonly alerts = inject(TuiAlertService);

    protected readonly exampleComponent = import('./examples/import/component.md?raw');
    protected readonly examples = [
        'String',
        'Basic',
        'Advanced',
        'Sticky elements',
        'Responsive',
        'AppBar',
        'Fullscreen',
    ];

    protected closeable = TUI_SHEET_DIALOG_DEFAULT_OPTIONS.closeable;
    protected fullscreen = TUI_SHEET_DIALOG_DEFAULT_OPTIONS.fullscreen;
    protected bar = TUI_SHEET_DIALOG_DEFAULT_OPTIONS.bar;
    protected initial = TUI_SHEET_DIALOG_DEFAULT_OPTIONS.initial;
    protected stops = TUI_SHEET_DIALOG_DEFAULT_OPTIONS.stops;
    protected label = TUI_SHEET_DIALOG_DEFAULT_OPTIONS.label;
    protected offset = TUI_SHEET_DIALOG_DEFAULT_OPTIONS.offset;
    protected required = TUI_SHEET_DIALOG_DEFAULT_OPTIONS.required;

    protected open = false;

    protected readonly stopsVariants = [this.stops, ['100px'], ['10rem', '20rem']];
    protected readonly labelVariants = [this.label, 'String label', 'Template'];

    protected showDialog(
        content: TemplateRef<TuiDialogContext<number, number>>,
        label?: PolymorpheusContent<TuiSheetDialogOptions>,
    ): void {
        const {required, closeable, fullscreen, stops, initial, bar, offset} = this;

        this.sheetDialogs
            .open(content, {
                label,
                fullscreen,
                stops,
                initial,
                bar,
                offset,
                required,
                closeable,
            })
            .pipe(switchMap((response) => this.alerts.open(String(response))))
            .subscribe();
    }

    protected navigate(): void {
        void this.router.navigate(['./'], {relativeTo: this.route});
    }
}
```

### LESS

```less
.label {
    display: flex;
    gap: 0.75rem;
}
```

---
# components/Slider
- **Package**: `KIT`
- **Type**: components
Taiga UI styling of native html tag
        '">
        to choose a value from a limited range
        
            Read more about this input type in
            
                MDN Docs

### How to Use (Import)

```ts
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import {TuiSlider} from '@taiga-ui/kit';

// ...

@Component({
  standalone: true,
  imports: [
    // ...
    FormsModule,
    ReactiveFormsModule,
    TuiSlider,
  ],
  // ...
})
export class Example {
  readonly control = new FormControl(1);
}
```

### How to Use (Template)

```html
<input
  tuiSlider
  type="range"
  [formControl]="control"
/>
```

### Example

```html
<ng-template>
<input tuiSlider type="range" [formControl]="control" [max]="max" [min]="min" [segments]="segments" [size]="size" [step]="step" />
</ng-template>
```

### API

| Property | Type | Description |
|----------|-----|----------|
| [disabled] | `boolean` | ) |
| [max] | `number` |  |
| [min] | `number` |  |
| [step] | `number` |  |
| [size] | `TuiSizeS` | Size |
| [segments] | `number[] | number` | for no ticks) |

### Usage Examples

#### Sizes

**Template:**
```html
<input max="10" size="s" step="1" tuiSlider type="range" [(ngModel)]="value" />
<input size="m" tuiSlider type="range" [formControl]="formControl" />
<p>Custom thickness</p>
<input size="m" tuiSlider type="range" [formControl]="formControl" [style.--tui-thickness.rem]="0.25" />
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {FormControl, FormsModule, ReactiveFormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiSliderComponent} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [FormsModule, ReactiveFormsModule, TuiSliderComponent],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    protected value = 4;
    protected formControl = new FormControl(60);
}
```

#### Colors

**Template:**
```html
<input tuiSlider type="range" value="65" class="first" />
<input tuiSlider type="range" value="80" class="second" />
<input tuiSlider type="range" value="40" class="third" />
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiSliderComponent} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [TuiSliderComponent],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {}
```

#### Segments

**Template:**
```html
<input size="m" tuiSlider type="range" [formControl]="formControl" [max]="1000" [segments]="4" [step]="250" />
<div class="ticks-labels">
<button *ngFor="let label of labels" type="button" class="tick-label" (click)="patchValue(label)" > ${{ label }} </button>
</div>
<p> Control value: <code>{{ formControl.value }}</code>
</p>
```
**TypeScript:**
```ts
import {NgForOf} from '@angular/common';
import {Component} from '@angular/core';
import {FormControl, ReactiveFormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiSliderComponent} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [NgForOf, ReactiveFormsModule, TuiSliderComponent],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly labels: number[] = [0, 250, 500, 750, 1000];
    protected readonly formControl = new FormControl(250);

    protected patchValue(newValue: number): void {
        this.formControl.patchValue(newValue);
    }
}
```

#### Disabled

**Template:**
```html
<input disabled tuiSlider type="range" value="80" />
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiSliderComponent} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [TuiSliderComponent],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {}
```

#### KeySteps

**Template:**
```html
<input tuiSlider type="range" [formControl]="formControl" [keySteps]="keySteps" [max]="10 * segments" [segments]="segments" />
<div class="ticks-labels">
<span *ngFor="let label of labels">{{ label }}</span>
</div>
<p automation-id="key-steps-example-control-value"> Control value: <code>{{ formControl.value | number }}</code>
</p>
```
**TypeScript:**
```ts
import {DecimalPipe, NgForOf} from '@angular/common';
import {Component} from '@angular/core';
import {FormControl, ReactiveFormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {type TuiKeySteps, TuiSlider} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [DecimalPipe, NgForOf, ReactiveFormsModule, TuiSlider],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly labels: string[] = ['5 000', '100 000', '300 000', '1 000 000'];
    protected readonly formControl = new FormControl(720_000);
    protected readonly segments = this.labels.length - 1;

    protected readonly keySteps: TuiKeySteps = [
        [0, 5_000],
        [100 / 3, 100_000],
        [(100 / 3) * 2, 300_000],
        [100, 1_000_000],
    ];
}
```

#### Complex

**Template:**
```html
<section class="zoom-controller">
<button appearance="icon" iconStart="@tui.minus" size="xs" tuiIconButton type="button" class="minus" (click)="change(-0.25)" > Minus </button>
<label tuiSliderThumbLabel class="slider-wrapper" >
<div [tuiHint]="value | percent" [tuiHintManual]="!!(showHint$ | async)" ></div>
<input step="any" tuiSlider type="range" [max]="max" [min]="min" [(ngModel)]="value" />
</label>
<button appearance="icon" iconStart="@tui.plus" size="xs" tuiIconButton type="button" class="plus" (click)="change(+0.25)" > Plus </button>
</section>
```
**TypeScript:**
```ts
import {AsyncPipe, PercentPipe} from '@angular/common';
import {Component} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TUI_FALSE_HANDLER, tuiClamp} from '@taiga-ui/cdk';
import {TuiButton, TuiHint} from '@taiga-ui/core';
import {TuiSlider} from '@taiga-ui/kit';
import {BehaviorSubject, distinctUntilChanged, map, of, switchMap, timer} from 'rxjs';

@Component({
    standalone: true,
    imports: [AsyncPipe, FormsModule, PercentPipe, TuiButton, TuiHint, TuiSlider],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
    host: {
        '(pointerdown)': 'onKeydown(true)',
        '(document:pointerup)': 'onKeydown(false)',
    },
})
export default class Example {
    protected min = 0.5;
    protected max = 2;
    protected value = 1;

    protected readonly active$ = new BehaviorSubject(false);
    protected readonly showHint$ = this.active$.pipe(
        distinctUntilChanged(),
        switchMap((active) =>
            active ? of(true) : timer(1000).pipe(map(TUI_FALSE_HANDLER)),
        ),
    );

    protected onKeydown(show: boolean): void {
        this.active$.next(show);
    }

    protected change(step: number): void {
        this.value = tuiClamp(this.value + step, this.min, this.max);
    }
}
```


### TypeScript

```ts
import {ChangeDetectionStrategy, Component} from '@angular/core';
import {FormControl, ReactiveFormsModule} from '@angular/forms';
import {TuiDemo} from '@demo/utils';
import {type TuiSizeS} from '@taiga-ui/core';
import {TuiSlider} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [ReactiveFormsModule, TuiDemo, TuiSlider],
    templateUrl: './index.html',
    changeDetection: ChangeDetectionStrategy.OnPush,
})
export default class Page {
    protected readonly examples = [
        'Sizes',
        'Colors',
        'Segments',
        'Disabled',
        'KeySteps',
        'Complex',
    ];

    protected readonly sizeVariants: readonly TuiSizeS[] = ['s', 'm'];
    protected readonly segmentsVariants: Array<number[] | number> = [
        1,
        5,
        3,
        [0.2, 0.5],
        [0.1, 0.3],
    ];

    protected readonly control = new FormControl(1);

    protected max = 5;
    protected min = 0;
    protected step = 1;
    protected size: TuiSizeS = this.sizeVariants[1]!;
    protected segments: number[] | number = this.max;

    protected get disabled(): boolean {
        return this.control.disabled;
    }

    protected set disabled(value: boolean) {
        if (value) {
            this.control.disable();

            return;
        }

        this.control.enable();
    }
}
```

---
# components/Slides
- **Package**: `KIT`
- **Type**: components
A component for displaying dynamic content animated between states. Use negative value for
        tuiSlides
        to indicate backward direction, positive for forward direction and 0 for static crossfade.
        
            Important:
            each child must be exactly one DOM element.

### How to Use (Import)

```ts
import {TuiSlides} from '@taiga-ui/kit';

// ...

@Component({
  standalone: true,
  imports: [
    // ...
    TuiSlides,
  ],
  // ...
})
export class Example {}
```

### How to Use (Template)

```html
<section [tuiSlides]="direction">// Content</section>
```

### Example

```html
<tui-textfield [style.width.rem]="15">
<label tuiLabel>Current slide</label>
<input tuiInputNumber [max]="0" [min]="2" [step]="1" [(ngModel)]="current" />
</tui-textfield>
<p [tuiSlides]="direction">
<ng-container *tuiRepeatTimes="let index of 3">
<div *ngIf="index === current">Slide #{{ index }}</div>
</ng-container>
</p>
```

### API

| Property | Type | Description |
|----------|-----|----------|
| [tuiSlides] | `number` | Transition direction |

### Usage Examples

#### Crossfade

**Template:**
```html
<div tuiGroup>
<button appearance="secondary" iconStart="@tui.chevron-left" size="m" tuiIconButton type="button" [disabled]="!index" (click)="index = index - 1" > Previous </button>
<button appearance="secondary" iconStart="@tui.chevron-right" size="m" tuiIconButton type="button" [disabled]="index === items.length - 1" (click)="index = index + 1" > Next </button>
</div>
<tui-elastic-container>
<section tuiSlides>
<ng-container *ngFor="let item of items; let i = index">
<div *ngIf="i === index" tuiTitle > {{ item }} <div tuiSubtitle>{{ item.repeat(10) }}</div>
</div>
</ng-container>
</section>
</tui-elastic-container>
```
**TypeScript:**
```ts
import {NgForOf, NgIf} from '@angular/common';
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiButton, TuiGroup, TuiTitle} from '@taiga-ui/core';
import {TuiElasticContainer, TuiSlides} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [
        NgForOf,
        NgIf,
        TuiButton,
        TuiElasticContainer,
        TuiGroup,
        TuiSlides,
        TuiTitle,
    ],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly items = ['First slide ', 'Second slide ', 'Third slide '];

    protected index = 0;
}
```

#### Stepper

**Template:**
```html
<tui-stepper [activeItemIndex]="index" (activeItemIndexChange)="onStep($event)" >
<button tuiStep>Personal details</button>
<button tuiStep>Shipping address</button>
<button tuiStep>Payment info</button>
</tui-stepper>
<section [tuiSlides]="direction">
<ng-container *ngFor="let form of forms; let i = index">
<form *ngIf="i === index" tuiAppearance="floating" tuiCardLarge tuiForm [formGroup]="form" [id]="'form_' + i" (ngSubmit)="onSubmit()" >
<header tuiHeader>
<h2 tuiTitle> Registration form <span tuiSubtitle>Tell us about yourself</span>
</h2>
</header>
<tui-textfield *ngFor="let control of form.controls | keyvalue; let j = index">
<label tuiLabel>{{ control.key }}</label>
<input tuiTextfield [formControlName]="control.key" [tuiAutoFocus]="!!index && !j" />
</tui-textfield>
</form>
</ng-container>
</section>
<footer>
<button appearance="secondary" tuiButton type="button" [disabled]="!index" (click)="index = index - 1" > Back </button>
<button tuiButton type="submit" [attr.form]="'form_' + index" > Next </button>
</footer>
```
**TypeScript:**
```ts
import {KeyValuePipe, NgForOf, NgIf} from '@angular/common';
import {Component} from '@angular/core';
import {FormControl, FormGroup, ReactiveFormsModule, Validators} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiAutoFocus, tuiMarkControlAsTouchedAndValidate} from '@taiga-ui/cdk';
import {TuiAppearance, TuiButton, TuiTextfield, TuiTitle} from '@taiga-ui/core';
import {TuiSlides, TuiStepper} from '@taiga-ui/kit';
import {TuiCard, TuiForm, TuiHeader} from '@taiga-ui/layout';

@Component({
    standalone: true,
    imports: [
        KeyValuePipe,
        NgForOf,
        NgIf,
        ReactiveFormsModule,
        TuiAppearance,
        TuiAutoFocus,
        TuiButton,
        TuiCard,
        TuiForm,
        TuiHeader,
        TuiSlides,
        TuiStepper,
        TuiTextfield,
        TuiTitle,
    ],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected index = 0;
    protected direction = 0;

    protected readonly forms = [
        new FormGroup({
            Name: new FormControl('', Validators.required),
            Surname: new FormControl('', Validators.required),
        }),
        new FormGroup({
            Country: new FormControl('', Validators.required),
            City: new FormControl('', Validators.required),
            Address: new FormControl('', Validators.required),
        }),
        new FormGroup({
            Card: new FormControl('', Validators.required),
            Value: new FormControl('', Validators.required),
        }),
    ];

    protected onStep(step: number): void {
        this.direction = step - this.index;
        this.index = step;
    }

    protected onSubmit(): void {
        tuiMarkControlAsTouchedAndValidate(this.forms[this.index]!);

        if (this.forms[this.index]?.invalid) {
            return;
        }

        this.direction = 1;
        this.index = Math.min(this.index + 1, this.forms.length - 1);
    }
}
```

#### Routing

**Template:**
```html
<tui-tabs [activeItemIndex]="-1">
<a routerLink="1" routerLinkActive tuiTab > Home </a>
<a routerLink="2" routerLinkActive tuiTab > Notifications </a>
<a routerLink="3" routerLinkActive tuiTab > Settings </a>
</tui-tabs>
<p [tuiSlides]="direction()">
<router-outlet />
</p>
```
**TypeScript:**
```ts
import {Component, inject} from '@angular/core';
import {toSignal} from '@angular/core/rxjs-interop';
import {
    NavigationStart,
    Router,
    RouterLink,
    RouterLinkActive,
    RouterOutlet,
} from '@angular/router';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiSlides, TuiTabs} from '@taiga-ui/kit';
import {filter, map, pairwise} from 'rxjs';

@Component({
    standalone: true,
    imports: [RouterLink, RouterLinkActive, RouterOutlet, TuiSlides, TuiTabs],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly direction = toSignal(
        inject(Router).events.pipe(
            filter((event) => event instanceof NavigationStart),
            map(({url}: any) => Number(url.split('/').at(-1))),
            pairwise(),
            map(([prev, next]) => next - prev),
        ),
        {initialValue: 1},
    );
}
```

#### Dialog

**Template:**
```html
<button tuiButton type="button" (click)="onClick()" > Show dialog </button>
<ng-template let-observer>
<tui-app-bar tuiAppBarSize>
<button *ngIf="step > 1" tuiButton tuiSlot="left" type="button" (click)="onStep(-1)" > Back </button>
<progress size="s" tuiProgressBar [max]="3" [style.width.rem]="10" [value]="step" ></progress>
<button tuiButton tuiSlot="right" type="button" (click)="observer.complete()" > Close </button>
</tui-app-bar>
<section [ngSwitch]="step" [tuiSlides]="direction" >
<div *ngSwitchCase="1">
<header>Welcome to the slides demo</header>
<p> These wrapping components will be animated upon navigating this modal dialog. This works well on both desktop and mobile. In your own layouts watch out for unwanted scrollbars. </p>
</div>
<div *ngSwitchCase="2">
<header>Header is optional</header>
<section [style.margin]="'0 -1rem'">
<div *tuiRepeatTimes="let _ of 5" tuiCell >
<tui-avatar appearance="primary" src="@tui.star" />
<div tuiTitle> Title <div tuiSubtitle>Description</div>
</div>
</div>
</section>
</div>
<div *ngSwitchCase="3" tuiAppearance="floating" tuiCardLarge >
<header tuiHeader>
<h1 tuiTitle> Title <span tuiSubtitle>Subtitle</span>
</h1>
<aside tuiAccessories>
<tui-avatar appearance="primary" src="@tui.star" />
</aside>
</header>
<footer>
<button appearance="secondary" size="m" tuiButton type="button" > Label </button>
</footer>
</div>
</section>
<footer tuiFloatingContainer [style.margin-block-start]="'auto'" >
<button tuiButton type="button" (click)="step < 3 ? onStep(1) : observer.complete()" > {{ step < 3 ? 'Next' : 'OK' }} </button>
</footer>
</ng-template>
```
**TypeScript:**
```ts
import {NgIf, NgSwitch, NgSwitchCase} from '@angular/common';
import {Component, inject, TemplateRef, ViewChild} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiSheetDialogService} from '@taiga-ui/addon-mobile';
import {TUI_IS_MOBILE, TuiRepeatTimes} from '@taiga-ui/cdk';
import {TuiAppearance, TuiButton, TuiTitle} from '@taiga-ui/core';
import {TuiDialogService} from '@taiga-ui/experimental';
import {TuiAvatar, TuiFloatingContainer, TuiProgressBar, TuiSlides} from '@taiga-ui/kit';
import {TuiAppBar, TuiCard, TuiCell, TuiHeader} from '@taiga-ui/layout';

@Component({
    standalone: true,
    imports: [
        NgIf,
        NgSwitch,
        NgSwitchCase,
        TuiAppBar,
        TuiAppearance,
        TuiAvatar,
        TuiButton,
        TuiCard,
        TuiCell,
        TuiFloatingContainer,
        TuiHeader,
        TuiProgressBar,
        TuiRepeatTimes,
        TuiSlides,
        TuiTitle,
    ],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    @ViewChild(TemplateRef)
    private readonly template?: TemplateRef<any>;

    private readonly dialogs = inject(TUI_IS_MOBILE)
        ? inject(TuiSheetDialogService)
        : inject(TuiDialogService);

    protected step = 1;
    protected direction = 0;

    protected onClick(): void {
        this.step = 1;
        this.direction = 0;
        this.dialogs.open(this.template, {appearance: 'fullscreen'}).subscribe();
    }

    protected onStep(step: number): void {
        this.direction = step;
        this.step += step;
    }
}
```


### TypeScript

```ts
import {ViewportScroller} from '@angular/common';
import {Component, inject, ViewEncapsulation} from '@angular/core';
import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import {Router, Scroll} from '@angular/router';
import {changeDetection} from '@demo/emulate/change-detection';
import {DemoRoute} from '@demo/routes';
import {TuiDemo} from '@demo/utils';
import {TuiRepeatTimes} from '@taiga-ui/cdk';
import {TuiTextfield} from '@taiga-ui/core';
import {TuiInputNumber, TuiSlides} from '@taiga-ui/kit';
import {filter, map} from 'rxjs';

import {Home} from './examples/3/home';
import {Notifications} from './examples/3/notifications';
import {Settings} from './examples/3/settings';

@Component({
    standalone: true,
    imports: [
        FormsModule,
        ReactiveFormsModule,
        TuiDemo,
        TuiInputNumber,
        TuiRepeatTimes,
        TuiSlides,
        TuiTextfield,
    ],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation: ViewEncapsulation.None,
    changeDetection,
    host: {class: 'tui-slides'},
})
export default class Page {
    protected readonly routes = DemoRoute;
    protected readonly examples = ['Crossfade', 'Stepper', 'Routing', 'Dialog'];
    protected readonly directions = [-1, 0, 1];

    protected direction = 0;
    protected current = 0;

    constructor() {
        const scroller = inject(ViewportScroller);
        const router = inject(Router);
        const route = router.config.find(
            ({path}) => path === this.routes.Slides.replace('/', ''),
        );
        const length = route?.children?.length ?? 0;

        router.events
            .pipe(
                filter((event) => event instanceof Scroll),
                map(() => scroller.getScrollPosition()),
                takeUntilDestroyed(),
            )
            .subscribe((position) => {
                setTimeout(() => scroller.scrollToPosition(position));
            });

        if (length > 1) {
            return;
        }

        route?.children?.unshift({path: '1', component: Home});
        route?.children?.unshift({path: '2', component: Notifications});
        route?.children?.unshift({path: '3', component: Settings});

        router.resetConfig(router.config);
    }
}
```

### LESS

```less
[tuiSlides] ng-component {
    display: block;

    &.tui-slides {
        display: none;
    }
}
```

---
# components/Status
- **Package**: `KIT`
- **Type**: components

### How to Use (Import)

```ts
import {Component} from '@angular/core';
import {TuiStatus} from '@taiga-ui/kit';
// ...

@Component({
  standalone: true,
  imports: [
    // ...
    TuiStatus,
  ],
})
export class Example {}
```

### How to Use (Template)

```html
<span tuiStatus="var(--tui-status-positive)">Success</span>
```

### Usage Examples

#### Basic

**Template:**
```html
<span tuiStatus="var(--tui-status-positive)">Success</span>
<p>Status is automatically colored within some badge appearances</p>
<tui-badge appearance="positive" tuiStatus > Success </tui-badge>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiBadge, TuiStatus} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [TuiBadge, TuiStatus],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {}
```


### TypeScript

```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {TuiDemo} from '@demo/utils';

@Component({
    standalone: true,
    imports: [TuiDemo],
    templateUrl: './index.html',
    changeDetection,
})
export default class Page {}
```

---
# components/Stepper
- **Package**: `KIT`
- **Type**: components

### How to Use (Import)

```ts
import {TuiStepper} from '@taiga-ui/kit';

// ...

@Component({
  standalone: true,
  imports: [
    // ...
    TuiStepper,
  ],
  // ...
})
export class Example {}
```

### How to Use (Template)

```html
<tui-stepper>
  <a
    routerLink="/step-1"
    routerLinkActive
    tuiStep
  >
    One 1
  </a>
  <a
    routerLink="/step-2"
    routerLinkActive
    tuiStep
  >
    Two 2
  </a>
  <a
    routerLink="/step-3"
    routerLinkActive
    tuiStep
  >
    Three 3
  </a>
</tui-stepper>
```

### Example

```html
<tui-stepper [orientation]="orientation" [(activeItemIndex)]="activeItemIndex" >
<button tuiStep>Simple step</button>
<button tuiStep>Simple step</button>
<button tuiStep [icon]="icon" [stepState]="state" > Simple step </button>
<button tuiStep>Simple step</button>
<button tuiStep>Simple step</button>
</tui-stepper>
```

### API

| Property | Type | Description |
|----------|-----|----------|
| [orientation] | `TuiOrientation` | Steps direction |
| [(activeItemIndex)] | `number` | Active step index |

### Usage Examples

#### Basic

**Template:**
```html
<tui-stepper [activeItemIndex]="1">
<button stepState="pass" tuiStep > Finished step </button>
<button tuiStep>Simple step</button>
<button stepState="error" tuiStep > Error step </button>
<button disabled tuiStep > Disabled step </button>
<button icon="@tui.clock" tuiStep > Step with an icon </button>
</tui-stepper>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiStepper} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [TuiStepper],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {}
```

#### Vertical

**Template:**
```html
<tui-stepper orientation="vertical" [activeItemIndex]="1" >
<button *ngFor="let step of steps" tuiStep > {{ step }} </button>
</tui-stepper>
```
**TypeScript:**
```ts
import {NgForOf} from '@angular/common';
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiStepper} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [NgForOf, TuiStepper],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly steps = ['Start Up', 'Cash In', 'Sell Out', 'Bro Down'];
}
```

#### Vertical autoscroll

**Template:**
```html
<tui-stepper orientation="vertical" class="stepper" [activeItemIndex]="5" >
<button *ngFor="let step of steps" tuiStep > {{ step }} </button>
</tui-stepper>
```
**TypeScript:**
```ts
import {NgForOf} from '@angular/common';
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiStepper} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [NgForOf, TuiStepper],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly steps = ['One', 'Two', 'Three', 'Four', 'Five', 'Six', 'Seven'];
}
```

#### Vertical connected

**Template:**
```html
<tui-stepper orientation="vertical" tuiConnected [activeItemIndex]="1" >
<button *ngFor="let step of steps" tuiStep > {{ step }} </button>
</tui-stepper>
```
**TypeScript:**
```ts
import {NgForOf} from '@angular/common';
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiConnected, TuiStepper} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [NgForOf, TuiConnected, TuiStepper],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly steps = [
        'Start Up',
        'Cash In',
        'Sell out this huge amount that you have been saving up for many years of hard work',
        'Bro Down',
    ];
}
```


### TypeScript

```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {TuiDemo} from '@demo/utils';
import {type TuiOrientation} from '@taiga-ui/core';
import {TuiStepper} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [TuiDemo, TuiStepper],
    templateUrl: './index.html',
    changeDetection,
})
export default class Page {
    protected activeItemIndex = 0;

    protected readonly examples = [
        'Basic',
        'Vertical',
        'Vertical autoscroll',
        'Vertical connected',
    ];

    protected readonly orientationVariants: readonly TuiOrientation[] = [
        'horizontal',
        'vertical',
    ];

    protected orientation: TuiOrientation = this.orientationVariants[0]!;

    protected readonly iconVariants = ['', '@tui.clock', '@tui.heart'];

    protected icon = this.iconVariants[0]!;

    protected readonly stateVariants = ['normal', 'pass', 'error'] as const;

    protected state: 'error' | 'normal' | 'pass' = this.stateVariants[0];
}
```

---
# components/Surface
- **Package**: `CORE`
- **Type**: components
General purpose container used in Taiga UI interfaces. Often used in conjunction with
            
                Card
            
            component.

### How to Use (Import)

```ts
import {Component} from '@angular/core';
import {TuiSurface} from '@taiga-ui/core';
// ...

@Component({
  standalone: true,
  imports: [
    // ...
    TuiSurface,
  ],
})
export class Example {}
```

### How to Use (Template)

```html
<div tuiSurface>
  <!-- Content -->
</div>
```

### Usage Examples

#### Behaviors

**Template:**
```html
<button tuiSurface type="button" class="scale" > Scale </button>
<button tuiSurface type="button" class="overlay" > Overlay </button>
<button tuiSurface="primary" type="button" class="highlight" > Highlight </button>
<button tuiSurface type="button" class="offset" > Offset </button>
<button tuiSurface type="button" class="background" > Background </button>
<button tuiSurface type="button" class="shadow" > Shadow </button>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiAppearance, TuiSurface} from '@taiga-ui/core';

@Component({
    standalone: true,
    imports: [TuiAppearance, TuiSurface],
    templateUrl: './index.html',
    styleUrls: ['./base.less', './index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {}
```

#### Presets

**Template:**
```html
<button tuiSurface="floating" type="button" > Elevated </button>
<button tuiSurface="neutral" type="button" > Flat </button>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiSurface} from '@taiga-ui/core';

@Component({
    standalone: true,
    imports: [TuiSurface],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {}
```

#### Blur

**Template:**
```html
<div tuiSurface tuiTheme="dark" class="blur" >
<h2 class="title">backdrop-filter</h2>
<p>You can use backdrop-filter on tuiSurface element to blur the background behind it.</p> Never use this mode with shadow </div>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiSurface} from '@taiga-ui/core';

@Component({
    standalone: true,
    imports: [TuiSurface],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {}
```

#### Video

**Template:**
```html
<div tuiSurface class="surface" >
<video autoplay loop playsinline tuiSurfaceLayer [muted]="true" >
<source src="assets/media/bbb.mp4" type="video/mp4" />
</video>
<p>
<b>Big Buck Bunny</b>
</p>
</div>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiSurface} from '@taiga-ui/core';

@Component({
    standalone: true,
    imports: [TuiSurface],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {}
```

#### Selectable

**Template:**
```html
<label *tuiRepeatTimes="let index of 4" tuiSurface [style.border-radius.rem]="0.75" [style.padding.rem]="1.25" > Item {{ index + 1 }} <input tuiSurfaceLayer type="radio" [value]="index" [(ngModel)]="value" />
<div tuiRipple tuiSurfaceLayer [style.background-color]="'var(--tui-background-neutral-1)'" ></div>
</label>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiRepeatTimes} from '@taiga-ui/cdk';
import {TuiSurface} from '@taiga-ui/core';

@Component({
    standalone: true,
    imports: [FormsModule, TuiRepeatTimes, TuiSurface],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected value = null;
}
```

#### Spacing compensation

**Template:**
```html
<button tuiSurface="floating" type="button" class="button" >
<span>
<span class="title">That looks good!</span> Apply manual compensation for a more balanced look. </span>
<tui-avatar appearance="accent" size="s" src="@tui.thumbs-up" />
</button>
<button tuiSurface="floating" type="button" class="button bad" >
<span>
<span class="title">This looks bad...</span> Use negative margin or reduced padding on specific sides to fix it. </span>
<tui-avatar appearance="accent" size="s" src="@tui.thumbs-down" />
</button>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiSurface} from '@taiga-ui/core';
import {TuiAvatar} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [TuiAvatar, TuiSurface],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {}
```

#### Examples

**Template:**
```html
<button tuiSurface type="button" class="card" [style.background-image]="'url(assets/images/tickets.svg)'" [style.color]="'#d45d8c'" >
<h3 class="heading">Tickets</h3>
<div class="content">Concerts, theater, sports and movies</div>
<tui-badge appearance="primary" size="s" class="badge" > 20% off </tui-badge>
</button>
<button tuiSurface type="button" class="card" [style.background-image]="'url(assets/images/gas.svg)'" [style.color]="'#7caeff'" >
<h3 class="heading">Gas</h3>
<tui-badge appearance="primary" size="s" class="badge" > +2000% </tui-badge>
</button>
<div tuiSurface class="restaurant" >
<header tuiTheme="dark" class="header" >
<label tuiTitle>
<span tuiSubtitle>RESTAURANT</span> Eat all you can </label>
<button appearance="icon" iconStart="@tui.ellipsis" size="xs" tuiIconButton type="button" > More </button>
</header>
<footer class="footer">
<button appearance="glass" size="m" tuiButton type="button" [style.border-radius.rem]="5" > Book a table </button>
<button appearance="glass" iconStart="@tui.heart" size="m" tuiIconButton type="button" [style.border-radius.rem]="5" > Favorite </button>
</footer>
</div>
<div tuiSurface tuiTheme="dark" class="blur" >
<tui-avatar src="assets/images/avatar.jpg" />
<label tuiLabel="Taiga UI">Alex Inkin</label>
<button appearance="glass" iconStart="@tui.mail" size="m" tuiIconButton type="button" class="button" > Message </button>
</div>
<div tuiCardLarge tuiSurface="floating" class="reviews" >
<h3 class="heading"> Taiga UI reviews <button tuiLink type="button" class="link" > Hide </button>
</h3>
<tui-scrollbar class="scrollbar" [hidden]="true" >
<div class="wrapper">
<div *ngFor="let review of reviews" tuiSurface="neutral" class="review" > {{ review.body }} <footer class="footer">
<tui-avatar size="m" src="assets/images/avatar.jpg" />
<label tuiTitle> {{ review.name }} <span tuiSubtitle>{{ review.time }}</span>
</label>
</footer>
</div>
</div>
</tui-scrollbar>
<button appearance="secondary" size="m" tuiButton type="button" > See all </button>
</div>
<div tuiSurface tuiTheme="dark" class="mask" >
<h3 class="heading"> My bank account <button appearance="secondary" iconStart="@tui.pencil" size="s" tuiIconButton type="button" class="button" > Edit name </button>
</h3>
<span class="sum">{{ 23742 | tuiAmount: 'USD' : 'left' | async }}</span>
<footer class="footer">
<tui-thumbnail-card paymentSystem="mastercard" [style.background]="'#337'" > 1234 </tui-thumbnail-card>
<tui-thumbnail-card paymentSystem="visa" [style.background]="'#e33'" > 5678 </tui-thumbnail-card>
<button appearance="secondary" iconStart="@tui.plus" size="s" tuiIconButton type="button" class="add" > Add card </button>
</footer>
</div>
```
**TypeScript:**
```ts
import {AsyncPipe, NgFor} from '@angular/common';
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiAmountPipe, TuiThumbnailCard} from '@taiga-ui/addon-commerce';
import {
    TuiAppearance,
    TuiButton,
    TuiLabel,
    TuiLink,
    TuiScrollbar,
    TuiSurface,
    TuiTitle,
} from '@taiga-ui/core';
import {TuiAvatar, TuiBadge} from '@taiga-ui/kit';
import {TuiCardLarge} from '@taiga-ui/layout';

@Component({
    standalone: true,
    imports: [
        AsyncPipe,
        NgFor,
        TuiAmountPipe,
        TuiAppearance,
        TuiAvatar,
        TuiBadge,
        TuiButton,
        TuiCardLarge,
        TuiLabel,
        TuiLink,
        TuiScrollbar,
        TuiSurface,
        TuiThumbnailCard,
        TuiTitle,
    ],
    templateUrl: './index.html',
    styleUrls: ['./index.less', './surface.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly reviews = [
        {
            name: 'Alex Inkin',
            time: '2 days ago',
            body: 'It is an absolute blast!',
        },
        {
            name: 'Alex Inkin',
            time: '3 days ago',
            body: 'I am starting to kind of enjoy this library.',
        },
        {
            name: 'Alex Inkin',
            time: '4 days ago',
            body: 'This library seems interesting but I hesitate refactoring our entire codebase...',
        },
    ];
}
```


### TypeScript

```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {DemoRoute} from '@demo/routes';
import {TuiDemo} from '@demo/utils';

@Component({
    standalone: true,
    imports: [TuiDemo],
    templateUrl: './index.html',
    changeDetection,
})
export default class Example {
    protected readonly examples = [
        'Behaviors',
        'Presets',
        'Blur',
        'Video',
        'Selectable',
        'Spacing compensation',
    ];

    protected readonly layerExample = {
        HTML: import('./examples/7/index.html?raw'),
        'surface.less': import('./examples/7/surface.less?raw'),
        LESS: import('./examples/7/index.less?raw'),
    };

    protected readonly routes = DemoRoute;
}
```

---
# components/SwipeAction
- **Package**: `ADDON-MOBILE`
- **Type**: components
Component should be used on mobile devices only.

### How to Use (Import)

```ts
import {Component} from '@angular/core';
import {TuiSwipeActions} from '@taiga-ui/addon-mobile';
// ...

@Component({
  standalone: true,
  imports: [
    // ...
    TuiSwipeActions,
  ],
})
export class Example {}
```

### How to Use (Template)

```html
<tui-swipe-actions>
  <div>Card content</div>

  <button
    iconStart="@tui.eye"
    size="m"
    tuiIconButton
    tuiSwipeAction
  ></button>
</tui-swipe-actions>
```

### Usage Examples

#### Basic

**Template:**
```html
<tui-swipe-actions>
<div tuiAppearance="floating" tuiCardLarge tuiCell >
<tui-avatar appearance="primary" src="@tui.dollar-sign" />
<div tuiTitle>
<strong>{{ 10000 | tuiAmount: 'USD' | async }}</strong>
<div tuiSubtitle>Dollar account</div>
</div>
</div>
<button iconStart="@tui.eye" size="m" tuiIconButton tuiSwipeAction type="button" > Show </button>
<button iconStart="@tui.pencil-line" size="m" tuiIconButton tuiSwipeAction type="button" > Edit </button>
<button appearance="secondary" iconStart="@tui.share" size="m" tuiIconButton tuiSwipeAction type="button" > Share </button>
</tui-swipe-actions>
<tui-swipe-actions>
<div tuiAppearance="floating" tuiCardLarge tuiCell >
<tui-avatar appearance="primary" src="@tui.gift" />
<div tuiTitle>
<strong>{{ 23000 | tuiAmount: 'EUR' | async }}</strong>
<div tuiSubtitle>Goal</div>
</div>
</div>
<button iconStart="@tui.eye" size="m" tuiIconButton tuiSwipeAction type="button" > Show </button>
</tui-swipe-actions>
<tui-swipe-actions [style.--tui-action-gap]="16" [style.--tui-item-size]="32" >
<div tuiAppearance="floating" tuiCardLarge tuiCell >
<tui-avatar appearance="primary" src="@tui.briefcase" />
<div tuiTitle>
<strong>{{ 5000 | tuiAmount: 'EUR' | async }}</strong>
<div tuiSubtitle>Vacations</div>
</div>
</div>
<button iconStart="@tui.eye" size="s" tuiIconButton tuiSwipeAction type="button" > Show </button>
<button iconStart="@tui.pencil-line" size="s" tuiIconButton tuiSwipeAction type="button" > Edit </button>
<button appearance="secondary" iconStart="@tui.share" size="s" tuiIconButton tuiSwipeAction type="button" > Share </button>
<button appearance="secondary-destructive" iconStart="@tui.trash" size="s" tuiIconButton tuiSwipeAction type="button" > Delete </button>
</tui-swipe-actions>
```
**TypeScript:**
```ts
import {AsyncPipe} from '@angular/common';
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiAmountPipe} from '@taiga-ui/addon-commerce';
import {TuiSwipeActions} from '@taiga-ui/addon-mobile';
import {TuiAppearance, TuiButton, TuiTitle} from '@taiga-ui/core';
import {TuiAvatar} from '@taiga-ui/kit';
import {TuiCardLarge, TuiCell} from '@taiga-ui/layout';

@Component({
    standalone: true,
    imports: [
        AsyncPipe,
        TuiAmountPipe,
        TuiAppearance,
        TuiAvatar,
        TuiButton,
        TuiCardLarge,
        TuiCell,
        TuiSwipeActions,
        TuiTitle,
    ],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {}
```

#### Custom

**Template:**
```html
<tui-swipe-actions [style.--tui-actions-padding.rem]="0.5">
<div tuiSurface class="blur" >
<tui-avatar src="assets/images/avatar.jpg" />
<h3 tuiTitle="m">Alex Inkin</h3>
<button appearance="glass" iconStart="@tui.mail" size="m" tuiIconButton type="button" class="button" > Message </button>
</div>
<input tuiSwipeAction tuiSwitch type="checkbox" [(ngModel)]="checkbox" />
<button appearance="secondary-destructive" iconStart="@tui.trash" size="m" tuiIconButton tuiSwipeAction type="button" [style.borderRadius.%]="100" > Trash </button>
</tui-swipe-actions>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiSwipeActions} from '@taiga-ui/addon-mobile';
import {TuiButton, TuiSurface, TuiTitle} from '@taiga-ui/core';
import {TuiAvatar, TuiSwitch} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [
        FormsModule,
        TuiAvatar,
        TuiButton,
        TuiSurface,
        TuiSwipeActions,
        TuiSwitch,
        TuiTitle,
    ],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected checkbox = false;
}
```

#### Autoclose

**Template:**
```html
<tui-swipe-actions [autoClose]="true">
<div tuiAppearance="floating" tuiCardLarge tuiCell >
<tui-avatar appearance="primary" src="@tui.dollar-sign" />
<div tuiTitle>
<strong>{{ 10000 | tuiAmount: 'USD' | async }}</strong>
<div tuiSubtitle>Dollar account</div>
</div>
</div>
<button iconStart="@tui.eye" size="m" tuiIconButton tuiSwipeAction type="button" > Show </button>
<button iconStart="@tui.pencil-line" size="m" tuiIconButton tuiSwipeAction type="button" > Edit </button>
<button appearance="secondary" iconStart="@tui.share" size="m" tuiIconButton tuiSwipeAction type="button" > Share </button>
</tui-swipe-actions>
<tui-swipe-actions [autoClose]="true">
<div tuiAppearance="floating" tuiCardLarge tuiCell >
<tui-avatar appearance="primary" src="@tui.gift" />
<div tuiTitle>
<strong>{{ 23000 | tuiAmount: 'EUR' | async }}</strong>
<div tuiSubtitle>Goal</div>
</div>
</div>
<button iconStart="@tui.eye" size="m" tuiIconButton tuiSwipeAction type="button" > Show </button>
<button iconStart="@tui.pencil-line" size="m" tuiIconButton tuiSwipeAction type="button" > Edit </button>
<button appearance="secondary" iconStart="@tui.share" size="m" tuiIconButton tuiSwipeAction type="button" > Share </button>
</tui-swipe-actions>
```
**TypeScript:**
```ts
import {AsyncPipe} from '@angular/common';
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiAmountPipe} from '@taiga-ui/addon-commerce';
import {TuiSwipeActions, TuiSwipeActionsAutoClose} from '@taiga-ui/addon-mobile';
import {TuiAppearance, TuiButton, TuiTitle} from '@taiga-ui/core';
import {TuiAvatar} from '@taiga-ui/kit';
import {TuiCardLarge, TuiCell} from '@taiga-ui/layout';

@Component({
    standalone: true,
    imports: [
        AsyncPipe,
        TuiAmountPipe,
        TuiAppearance,
        TuiAvatar,
        TuiButton,
        TuiCardLarge,
        TuiCell,
        TuiSwipeActions,
        TuiSwipeActionsAutoClose,
        TuiTitle,
    ],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {}
```

#### Dynamic actions

**Template:**
```html
<tui-swipe-actions>
<div tuiAppearance="floating" tuiCardLarge tuiCell >
<tui-avatar appearance="primary" src="@tui.dollar-sign" />
<div tuiTitle>
<strong>{{ 10000 | tuiAmount: 'USD' | async }}</strong>
<div tuiSubtitle>Dollar account</div>
</div>
</div>
<button *ngIf="editButton" iconStart="@tui.pencil-line" size="m" tuiIconButton tuiSwipeAction type="button" > Edit </button>
<button *ngIf="shareButton" appearance="secondary" iconStart="@tui.share" size="m" tuiIconButton tuiSwipeAction type="button" > Share </button>
</tui-swipe-actions>
<label>
<input tuiCheckbox type="checkbox" [(ngModel)]="shareButton" /> Share button </label>
<label>
<input tuiCheckbox type="checkbox" [(ngModel)]="editButton" /> Edit button </label>
```
**TypeScript:**
```ts
import {AsyncPipe, NgIf} from '@angular/common';
import {Component} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiAmountPipe} from '@taiga-ui/addon-commerce';
import {TuiSwipeActions} from '@taiga-ui/addon-mobile';
import {TuiAppearance, TuiButton, TuiTitle} from '@taiga-ui/core';
import {TuiAvatar, TuiCheckbox} from '@taiga-ui/kit';
import {TuiCardLarge, TuiCell} from '@taiga-ui/layout';

@Component({
    standalone: true,
    imports: [
        AsyncPipe,
        FormsModule,
        NgIf,
        TuiAmountPipe,
        TuiAppearance,
        TuiAvatar,
        TuiButton,
        TuiCardLarge,
        TuiCell,
        TuiCheckbox,
        TuiSwipeActions,
        TuiTitle,
    ],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected shareButton = false;
    protected editButton = true;
}
```

#### Fallback for desktop

**Template:**
```html
<tui-swipe-actions>
<div tuiAppearance="floating" tuiCardLarge tuiCell >
<tui-avatar appearance="primary" src="@tui.dollar-sign" />
<div tuiTitle>
<strong>{{ 10000 | tuiAmount: 'USD' | async }}</strong>
<div tuiSubtitle>Dollar account</div>
</div>
</div>
<button appearance="flat" iconStart="@tui.ellipsis-vertical" size="s" tuiDropdownOpen tuiIconButton type="button" class="fallback" [tuiDropdown]="content" > Actions </button>
<ng-template #content>
<tui-data-list>
<button tuiOption type="button" > Hide </button>
<button tuiOption type="button" > Edit </button>
</tui-data-list>
</ng-template>
<button iconStart="@tui.eye" size="m" tuiIconButton tuiSwipeAction type="button" > Show </button>
<button iconStart="@tui.pencil-line" size="m" tuiIconButton tuiSwipeAction type="button" > Edit </button>
</tui-swipe-actions>
```
**TypeScript:**
```ts
import {AsyncPipe} from '@angular/common';
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiAmountPipe} from '@taiga-ui/addon-commerce';
import {TuiSwipeActions} from '@taiga-ui/addon-mobile';
import {
    TuiAppearance,
    TuiButton,
    TuiDataList,
    TuiDropdown,
    TuiTitle,
} from '@taiga-ui/core';
import {TuiAvatar} from '@taiga-ui/kit';
import {TuiCardLarge, TuiCell} from '@taiga-ui/layout';

@Component({
    standalone: true,
    imports: [
        AsyncPipe,
        TuiAmountPipe,
        TuiAppearance,
        TuiAvatar,
        TuiButton,
        TuiCardLarge,
        TuiCell,
        TuiDataList,
        TuiDropdown,
        TuiSwipeActions,
        TuiTitle,
    ],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {}
```


### TypeScript

```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {TuiDemo} from '@demo/utils';

@Component({
    standalone: true,
    imports: [TuiDemo],
    templateUrl: './index.html',
    changeDetection,
})
export default class Page {}
```

---
# components/Switch
- **Package**: `KIT`
- **Type**: components
A switch component that is able to imitate native control on mobile platforms.

        
            Use
            --tui-background-accent-2
            CSS variable to customize color of native control emulation

### How to Use (Import)

```ts
import {Component} from '@angular/core';
import {TuiSwitch} from '@taiga-ui/kit';
// ...

@Component({
  standalone: true,
  imports: [
    // ...
    TuiSwitch,
  ],
})
export class Example {}
```

### How to Use (Template)

```html
<input
  tuiSwitch
  type="checkbox"
  [(ngModel)]="value"
/>
```

### Usage Examples

#### Platforms

**Template:**
```html
<div *ngFor="let platform of platforms; let first = first" class="wrapper" [class.wrapper_web]="platform === 'web'" [tuiPlatform]="platform" >
<input tuiSwitch type="checkbox" [ngModel]="true" [showIcons]="first" [size]="getSize(first)" />
<input tuiSwitch type="checkbox" [disabled]="true" [ngModel]="true" [showIcons]="first" [size]="getSize(first)" />
<input tuiSwitch type="checkbox" [showIcons]="first" [size]="getSize(first)" />
<input tuiSwitch type="checkbox" [disabled]="true" [ngModel]="false" [showIcons]="first" [size]="getSize(first)" />
<input tuiSwitch type="checkbox" [formControl]="invalidTrue" [showIcons]="first" [size]="getSize(first)" />
<input tuiSwitch type="checkbox" [formControl]="invalidFalse" [showIcons]="first" [size]="getSize(first)" />
</div>
```
**TypeScript:**
```ts
import {NgFor} from '@angular/common';
import {Component, type OnInit} from '@angular/core';
import {FormControl, FormsModule, ReactiveFormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiPlatform} from '@taiga-ui/cdk';
import {type TuiSizeS} from '@taiga-ui/core';
import {TuiSwitch} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [FormsModule, NgFor, ReactiveFormsModule, TuiPlatform, TuiSwitch],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example implements OnInit {
    protected readonly platforms: ReadonlyArray<'android' | 'ios' | 'web'> = [
        'web',
        'web',
        'android',
        'ios',
    ];

    protected readonly invalidTrue = new FormControl(true, () => ({invalid: true}));
    protected readonly invalidFalse = new FormControl(false, () => ({invalid: true}));

    public ngOnInit(): void {
        this.invalidTrue.markAsTouched();
        this.invalidFalse.markAsTouched();
    }

    protected getSize(first: boolean): TuiSizeS {
        return first ? 'm' : 's';
    }
}
```

#### Same color

**Template:**
```html
<input tuiSwitch type="checkbox" [(ngModel)]="value" />
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiSwitch, tuiSwitchOptionsProvider} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [FormsModule, TuiSwitch],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
    providers: [
        tuiSwitchOptionsProvider({showIcons: false, appearance: () => 'primary'}),
    ],
})
export default class Example {
    protected value = false;
}
```


### TypeScript

```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {TuiDemo} from '@demo/utils';

@Component({
    standalone: true,
    imports: [TuiDemo],
    templateUrl: './index.html',
    changeDetection,
})
export default class Page {
    protected readonly examples = ['Platforms', 'Same color'];
}
```

---
# components/TabBar
- **Package**: `ADDON-MOBILE`
- **Type**: components
Component for creating mobile navigation.

### How to Use (Import)

```ts
import {TuiTabBar} from '@taiga-ui/addon-mobile';

// ...

@Component({
  standalone: true,
  imports: [
    // ...
    TuiTabBar,
  ],
  // ...
})
export class Example {}
```

### How to Use (Template)

```html
<!--
    Add to the template inside your root component
    at the required layer and position with CSS:
-->
<tui-root>
  Your app
  <nav
    tuiTabBar
    ngProjectAs="tuiOverContent"
  >
    <a
      *ngFor="let item of items"
      tuiTabBarItem
      routerLinkActive
      [routerLink]="item.path"
      [icon]="item.icon"
    >
      {{ item.text}}
    </a>
  </nav>
</tui-root>
```

### Usage Examples

#### Buttons

**Template:**
```html
<nav tuiTabBar class="tabs" [(activeItemIndex)]="activeItemIndex" >
<button *ngFor="let item of items" tuiTabBarItem type="button" [badge]="item.badge" [icon]="item.icon" (click)="onClick(item)" > {{ item.text }} </button>
</nav>
```
**TypeScript:**
```ts
import {NgForOf} from '@angular/common';
import {Component, inject} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiTabBar} from '@taiga-ui/addon-mobile';
import {TuiAlertService, TuiButton} from '@taiga-ui/core';

interface Item {
    badge?: number;
    icon: string;
    text: string;
}

@Component({
    standalone: true,
    selector: 'tui-tab-bar-example',
    imports: [NgForOf, TuiButton, TuiTabBar],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    private readonly alerts = inject(TuiAlertService);

    protected activeItemIndex = 1;

    protected readonly items = [
        {
            text: 'Favorites',
            icon: '@tui.heart',
            badge: 3,
        },
        {
            text: 'Calls',
            icon: '@tui.phone',
            badge: 1234,
        },
        {
            text: 'Profile',
            icon: '@tui.user',
        },
        {
            text: 'Settings and configuration',
            icon: '@tui.settings',
            badge: 100,
        },
        {
            text: 'More',
            icon: '@tui.ellipsis',
        },
    ];

    protected onClick(item: Item): void {
        item.badge = 0;
        this.alerts.open(this.activeItemIndex, {label: item.text}).subscribe();
    }
}
```

#### Links

**Template:**
```html
<nav tuiTabBar>
<a icon="@tui.ellipsis" routerLinkActive tuiTabBarItem [routerLink]="routes.Breadcrumbs" > Breadcrumbs </a>
<a icon="@tui.code" routerLinkActive tuiTabBarItem [routerLink]="routes.Pagination" > Pagination </a>
<a icon="@tui.terminal" routerLinkActive tuiTabBarItem [routerLink]="routes.Stepper" > Stepper </a>
<a icon="@tui.minus" routerLinkActive tuiTabBarItem [routerLink]="routes.TabBar" > TabBar </a>
<a icon="@tui.menu" routerLinkActive tuiTabBarItem [routerLink]="routes.Tabs" > Tabs </a>
</nav>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {RouterLink, RouterLinkActive} from '@angular/router';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {DemoRoute} from '@demo/routes';
import {TuiTabBar} from '@taiga-ui/addon-mobile';

@Component({
    standalone: true,
    imports: [RouterLink, RouterLinkActive, TuiTabBar],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly routes = DemoRoute;
}
```

#### Customization

**Template:**
```html
<nav tuiTabBar class="tabs" >
<button *ngFor="let item of items" tuiTabBarItem type="button" [icon]="item.icon" > {{ item.text }} </button>
</nav>
```
**TypeScript:**
```ts
import {NgForOf} from '@angular/common';
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiTabBar} from '@taiga-ui/addon-mobile';
import {TuiButton} from '@taiga-ui/core';

@Component({
    standalone: true,
    imports: [NgForOf, TuiButton, TuiTabBar],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly items = [
        {
            text: 'Home',
            icon: '@tui.home',
        },
        {
            text: 'Photos',
            icon: '@tui.image',
        },
        {
            text: 'Navigation',
            icon: '@tui.map-pin',
        },
    ];
}
```

#### Skeleton

**Template:**
```html
<p>
<button size="m" tuiButton type="button" (click)="load$.next()" > Reload </button>
</p>
<nav tuiTabBar>
<button *ngFor="let item of items$ | async" tuiTabBarItem type="button" [icon]="item.icon" > {{ item.text }} </button>
</nav>
```
**TypeScript:**
```ts
import {AsyncPipe, NgForOf} from '@angular/common';
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiTabBar} from '@taiga-ui/addon-mobile';
import {TuiButton} from '@taiga-ui/core';
import {map, startWith, Subject, switchMap, timer} from 'rxjs';

@Component({
    standalone: true,
    imports: [AsyncPipe, NgForOf, TuiButton, TuiTabBar],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly load$ = new Subject<void>();

    protected readonly items$ = this.load$.pipe(
        startWith(null),
        switchMap(() =>
            timer(3000).pipe(
                map(() => [
                    {
                        text: 'Favorites',
                        icon: '@tui.heart',
                    },
                    {
                        text: 'Calls',
                        icon: '@tui.phone',
                    },
                    {
                        text: 'Profile',
                        icon: '@tui.user',
                    },
                    {
                        text: 'Settings and configuration',
                        icon: '@tui.settings',
                    },
                ]),
                startWith([]),
            ),
        ),
    );
}
```


### TypeScript

```ts
import {Component} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {TuiDemo} from '@demo/utils';
import {TuiDropdown, TuiLabel} from '@taiga-ui/core';
import {TuiCheckbox} from '@taiga-ui/kit';

import TuiTabBarExample from './examples/1';

@Component({
    standalone: true,
    imports: [FormsModule, TuiCheckbox, TuiDemo, TuiDropdown, TuiLabel, TuiTabBarExample],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    changeDetection,
})
export default class Page {
    protected fixed = false;
}
```

### LESS

```less
.bar {
    inline-size: 25rem;
}

.fixed {
    position: fixed;
    bottom: 0;
    inline-size: 100%;
}
```

---
# components/Table
- **Package**: `ADDON-TABLE`
- **Type**: components
This module allows you to create various tables, both static and editable.

### How to Use (Import)

```ts
import {TuiTable} from '@taiga-ui/addon-table';

@Component({
  standalone: true,
  imports: [
    // ...
    TuiTable,
  ],
  // ...
})
export class Example {}
```

### How to Use (Template)

```html
<table
  tuiTable
  [columns]="columns"
>
  <thead tuiThead>
    <tr tuiThGroup>
      <th
        *tuiHead="'name'"
        tuiTh
      >
        Name
      </th>
      <th
        *tuiHead="'email'"
        tuiTh
      >
        E-mail
      </th>
      <th
        *tuiHead="'status'"
        tuiTh
      >
        Status
      </th>
      <th
        *tuiHead="'tags'"
        tuiTh
        [sorter]="null"
      >
        Tags
      </th>
    </tr>
  </thead>
  <tbody
    *tuiLet="users | tuiTableSort as sortedUsers"
    tuiTbody
    [data]="sortedUsers"
  >
    <tr
      *ngFor="let item of sortedUsers"
      tuiTr
    >
      <td
        *tuiCell="'name'"
        tuiTd
      >
        {{ item.name }}
      </td>
      <td
        *tuiCell="'email'"
        tuiTd
      >
        <a
          *ngIf="item.email"
          tuiLink
          [href]="'mailto:' + item.email"
        >
          {{ item.email }}
        </a>
      </td>
      <td
        *tuiCell="'status'"
        tuiTd
      >
        <div [class]="item.status">{{ item.status }}</div>
      </td>
      <td
        *tuiCell="'tags'"
        tuiTd
      >
        <tui-tag
          class="tui-space_right-1"
          *ngFor="let tag of item.tags"
          [value]="tag"
          [autoColor]="true"
        ></tui-tag>
      </td>
    </tr>
  </tbody>
</table>
```

### API

| Property | Type | Description |
|----------|-----|----------|
| columns | `readonly string[]` | An array of keys to set up columns order |
| size | `TuiSizeS | TuiSizeL` | Cells size |
| sorter | `TuiComparator<T>` | " > Sort function (basic JavaScript array sort API) |
| direction | `-1 | 1` | Direction for sorting |

### Usage Examples

#### Basic

**Template:**
```html
<table tuiTable class="table" [columns]="columns" >
<thead>
<tr tuiThGroup>
<th tuiTh [maxWidth]="500" [minWidth]="200" [resizable]="true" > Name </th>
<th tuiTh>Balance</th>
</tr>
</thead>
<tbody tuiTbody [data]="data" >
<tr *ngFor="let item of data" tuiTr >
<td *tuiCell="'balance'" tuiTd > {{ item.balance | tuiFormatNumber | async }} </td>
</tr>
</tbody>
</table>
```
**TypeScript:**
```ts
import {AsyncPipe, NgForOf} from '@angular/common';
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiTable} from '@taiga-ui/addon-table';
import {TuiFormatNumberPipe} from '@taiga-ui/core';

@Component({
    standalone: true,
    imports: [AsyncPipe, NgForOf, TuiFormatNumberPipe, TuiTable],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly data = [
        {
            name: 'Alex Inkin',
            balance: 1323525,
        },
        {
            name: 'Roman Sedov',
            balance: 423242,
        },
    ] as const;

    protected readonly columns = Object.keys(this.data[0]);
}
```

#### Expandable rows: different ways to toggle rows

**Template:**
```html
<table size="l" tuiTable class="table" [columns]="columns" >
<thead>
<tr tuiThGroup>
<th *tuiHead="'action'" tuiTh [sorter]="null" ></th>
<th *tuiHead="'firstName'" tuiTh [sorter]="null" > First name </th>
<th *tuiHead="'lastName'" tuiTh class="last-name-col" [sorter]="null" > Last name </th>
<th *tuiHead="'role'" tuiTh [sorter]="null" > Role </th>
<th *tuiHead="'balance'" tuiTh [sorter]="null" > Balance </th>
</tr>
</thead>
<tbody tuiTbody>
<tr tuiTr class="expand-heading-row" (click)="expand.toggle()" >
<td *tuiCell="'action'" tuiTd >
<button appearance="icon" size="xs" tuiIconButton type="button" [tuiChevron]="expand.expanded()" > Toggle </button>
</td>
<td *tuiCell="'firstName'" tuiTd [colSpan]="2" > {{ basicData.length }} Developers (basic usage) </td>
<ng-container *tuiCell="'lastName'" />
<td *tuiCell="'role'" tuiTd > dev </td>
<td *tuiCell="'balance'" tuiTd > {{ basicData | tuiMapper: getSumBalance | tuiFormatNumber | async }} </td>
</tr>
<tui-table-expand #expand [expanded]="true" >
<tr *ngFor="let item of basicData" tuiTr >
<td *tuiCell="'action'" tuiTd ></td>
<td *tuiCell="'firstName'" tuiTd >
<div>
<tui-chip size="s" [appearance]="item.role === 'dev' ? 'primary' : 'secondary'" > {{ item.firstName }} </tui-chip>
</div>
</td>
<td *tuiCell="'lastName'" tuiTd > {{ item.lastName }} </td>
<td *tuiCell="'role'" tuiTd > {{ item.role }} </td>
<td *tuiCell="'balance'" tuiTd > {{ item.balance | tuiFormatNumber | async }} </td>
</tr>
</tui-table-expand>
</tbody>
<tbody tuiTbody>
<tr tuiTr class="expand-heading-row" (click)="manualToggle()" >
<td *tuiCell="'action'" tuiTd >
<button appearance="icon" size="xs" tuiIconButton type="button" [tuiChevron]="manualOpen" > Toggle </button>
</td>
<td *tuiCell="'firstName'" tuiTd [colSpan]="2" > {{ manualOpenData.length }} Designers (manual handling) </td>
<ng-container *tuiCell="'lastName'" />
<td *tuiCell="'role'" tuiTd > design </td>
<td *tuiCell="'balance'" tuiTd > {{ manualOpenData | tuiMapper: getSumBalance | tuiFormatNumber | async }} </td>
</tr>
<tui-table-expand [expanded]="manualOpen">
<tr *ngFor="let item of manualOpenData" tuiTr >
<td *tuiCell="'action'" tuiTd ></td>
<td *tuiCell="'firstName'" tuiTd > {{ item.firstName }} </td>
<td *tuiCell="'lastName'" tuiTd > {{ item.lastName }} </td>
<td *tuiCell="'role'" tuiTd > {{ item.role }} </td>
<td *tuiCell="'balance'" tuiTd > {{ item.balance | tuiFormatNumber | async }} </td>
</tr>
</tui-table-expand>
</tbody>
<tbody tuiTbody>
<tr tuiTr>
<td *tuiCell="'action'" tuiTd >
<button appearance="flat-grayscale" size="xs" tuiIconButton type="button" [style.border-radius]="'100%'" [tuiChevron]="customOpen" (click)="customToggle()" > Toggle </button>
</td>
<td *tuiCell="'firstName'" tuiTd [colSpan]="2" > Custom content (click on chevron) </td>
<ng-container *tuiCell="'lastName'" />
<td *tuiCell="'role'" tuiTd > all </td>
<td *tuiCell="'balance'" tuiTd > {{ customContentData | tuiMapper: getSumBalance | tuiFormatNumber | async }} </td>
</tr>
<tr>
<td [colSpan]="columns.length">
<tui-expand [expanded]="customOpen">
<div class="chips">
<tui-chip *ngFor="let item of customContentData" size="s" [appearance]="item.role === 'dev' ? 'primary' : 'secondary'" [tuiHint]="'Balance: ' + item.balance + '. Role: ' + item.role" > {{ item.firstName }} {{ item.lastName }} </tui-chip>
</div>
</tui-expand>
</td>
</tr>
</tbody>
</table>
```
**TypeScript:**
```ts
import {AsyncPipe, NgForOf} from '@angular/common';
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiTable, TuiTableExpand} from '@taiga-ui/addon-table';
import {TuiMapperPipe} from '@taiga-ui/cdk';
import {TuiButton, TuiFormatNumberPipe, TuiHint} from '@taiga-ui/core';
import {TuiExpand} from '@taiga-ui/experimental';
import {TuiChevron, TuiChip} from '@taiga-ui/kit';

interface Item {
    firstName: string;
    lastName: string;
    role: string;
    balance: number;
}

@Component({
    standalone: true,
    imports: [
        AsyncPipe,
        NgForOf,
        TuiButton,
        TuiChevron,
        TuiChip,
        TuiExpand,
        TuiFormatNumberPipe,
        TuiHint,
        TuiMapperPipe,
        TuiTable,
        TuiTableExpand,
    ],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly basicData: Item[] = [
        {
            firstName: 'Alex',
            lastName: 'Inkin',
            role: 'dev',
            balance: 1323525,
        },
        {
            firstName: 'Roman',
            lastName: 'Sedov',
            role: 'dev',
            balance: 423242,
        },
        {
            firstName: 'Andrei',
            lastName: 'Serebrennikov',
            role: 'dev',
            balance: 4223242,
        },
    ];

    protected manualOpenData: Item[] = [
        {
            firstName: 'Joe',
            lastName: 'Wilson',
            role: 'design',
            balance: 423242,
        },
        {
            firstName: 'Julia',
            lastName: 'Johnson',
            role: 'design',
            balance: 4223242,
        },
    ];

    protected readonly customContentData: Item[] = [
        ...this.basicData,
        ...this.manualOpenData,
    ];

    protected readonly columns = ['action', 'firstName', 'lastName', 'role', 'balance'];

    protected manualOpen = false;
    protected customOpen = false;

    public getSumBalance(people: Item[]): number {
        return people.reduce((res, item) => {
            res += item.balance;

            return res;
        }, 0);
    }

    protected manualToggle(): void {
        this.manualOpen = !this.manualOpen;
    }

    protected customToggle(): void {
        this.customOpen = !this.customOpen;
    }
}
```

#### Manual sorting

**Template:**
```html
<table tuiTable [columns]="columns" [direction]="direction()" [tuiSortBy]="sortBy()" (tuiSortChange)="sortChange($event)" >
<thead>
<tr tuiThGroup>
<th *tuiHead="'name'" tuiSortable tuiTh [maxWidth]="500" [minWidth]="200" [resizable]="true" > Name </th>
<th *tuiHead="'id'" tuiSortable tuiTh > ID </th>
<th *tuiHead="'color'" tuiSortable tuiTh > Color </th>
</tr>
</thead>
<tbody tuiTbody [data]="data()" >
<tr *ngFor="let item of data()" tuiTr >
<td *tuiCell="'id'" tuiTd > {{ item.id }} </td>
</tr>
</tbody>
</table>
```
**TypeScript:**
```ts
import {NgForOf} from '@angular/common';
import {Component, computed, signal} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {type TuiSortChange, TuiTable} from '@taiga-ui/addon-table';

interface Data {
    id: number;
    name: string;
    color: string;
}

@Component({
    standalone: true,
    imports: [NgForOf, TuiTable],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly initial = [
        {
            name: 'Apple',
            id: 1,
            color: 'red',
        },
        {
            name: 'Banana',
            id: 2,
            color: 'yellow',
        },
        {
            name: 'Kiwi',
            id: 3,
            color: 'green',
        },
        {
            name: 'Orange',
            id: 4,
            color: 'orange',
        },
        {
            name: 'Grapes',
            id: 5,
            color: 'purple',
        },
        {
            name: 'Strawberry',
            id: 6,
            color: 'red',
        },
        {
            name: 'Blueberry',
            id: 7,
            color: 'blue',
        },
        {
            name: 'Pineapple',
            id: 8,
            color: 'yellow',
        },
        {
            name: 'Mango',
            id: 9,
            color: 'orange',
        },
        {
            name: 'Watermelon',
            id: 10,
            color: 'green',
        },
        {
            name: 'Peach',
            id: 11,
            color: 'orange',
        },
        {
            name: 'Pear',
            id: 12,
            color: 'green',
        },
        {
            name: 'Cherry',
            id: 13,
            color: 'red',
        },
        {
            name: 'Lemon',
            id: 14,
            color: 'yellow',
        },
        {
            name: 'Lime',
            id: 15,
            color: 'green',
        },
        {
            name: 'Pomegranate',
            id: 16,
            color: 'red',
        },
        {
            name: 'Raspberry',
            id: 17,
            color: 'red',
        },
        {
            name: 'Blackberry',
            id: 18,
            color: 'purple',
        },
        {
            name: 'Cantaloupe',
            id: 19,
            color: 'orange',
        },
        {
            name: 'Plum',
            id: 20,
            color: 'purple',
        },
    ] as const;

    protected readonly columns = Object.keys(this.initial[0]);
    protected readonly direction = signal<-1 | 1>(-1);
    protected readonly sortBy = signal<keyof Data | null>('color');
    protected readonly data = computed<readonly Data[]>(() => {
        const direction = this.direction();
        const key = this.sortBy();

        return key
            ? [...this.initial].sort((a, b) => {
                  const valA = a[key];
                  const valB = b[key];

                  if (typeof valA === 'string' && typeof valB === 'string') {
                      return valA.localeCompare(valB) * direction;
                  }

                  if (typeof valA === 'number' && typeof valB === 'number') {
                      return (valA - valB) * direction;
                  }

                  return 0;
              })
            : this.initial;
    });

    protected sortChange({sortKey, sortDirection}: TuiSortChange<Data>): void {
        this.sortBy.set(sortKey);
        this.direction.set(sortDirection);
    }
}
```

#### Custom

**Template:**
```html
<div [style.margin-bottom.rem]="2">
<tui-radio-list [itemContent]="content" [items]="sizes" [style.flex-direction]="'row'" [style.width]="'max-content'" [(ngModel)]="size" />
<ng-template #content let-value > {{ value === 's' ? 'Small' : value === 'm' ? 'Medium' : 'Large' }} </ng-template>
</div>
<table tuiTable [size]="size" [style.width.rem]="58" [(ngModel)]="selected" >
<thead>
<tr>
<th tuiTh>
<div [tuiCell]="size">
<input tuiCheckbox tuiCheckboxTable type="checkbox" [size]="size === 'l' ? 'm' : 's'" />
<span tuiTitle>Checkbox</span>
</div>
</th>
<th tuiTh>Title</th>
<th tuiTh>Cell</th>
<th tuiTh>Status</th>
<th tuiTh [style.width.rem]="10" > Items </th>
<th tuiTh>Progress</th>
<th tuiTh>Actions</th>
</tr>
</thead>
<tbody tuiTbody>
<tr *ngFor="let item of data">
<td tuiTd>
<div [tuiCell]="size">
<input tuiCheckbox type="checkbox" [size]="size === 'l' ? 'm' : 's'" [tuiCheckboxRow]="item" />
<span tuiTitle> {{ item.checkbox.title }} <span tuiSubtitle>{{ item.checkbox.subtitle }}</span>
</span>
</div>
</td>
<td tuiTd>
<div [tuiCell]="size">
<span tuiTitle>
<span tuiStatus>
<tui-icon [icon]="item.title.icon" /> {{ item.title.title }} <tui-chip *ngIf="item.title.chip && item.title.subtitle">{{ item.title.chip }}</tui-chip>
</span>
<tui-chip *ngIf="!item.title.subtitle && item.title.chip; else subtitle"> {{ item.title.chip }} </tui-chip>
<ng-template #subtitle>
<span tuiSubtitle> {{ item.title.subtitle }} </span>
</ng-template>
</span>
</div>
</td>
<td tuiTd>
<div [tuiCell]="size">
<tui-avatar [src]="item.cell.name | tuiInitials" [style.background]="item.cell.name | tuiAutoColor" />
<span tuiTitle> {{ item.cell.name }} <span tuiSubtitle>{{ item.cell.email }}</span>
</span>
</div>
</td>
<td tuiTd>
<span [tuiStatus]="item.status.color">{{ item.status.value }}</span>
</td>
<td tuiTd>
<tui-items-with-more [style.gap.rem]="0.25">
<ng-container *ngFor="let chip of item.items">
<tui-badge *tuiItem>{{ chip }}</tui-badge>
</ng-container>
<ng-template let-number tuiMore >
<button appearance="action-grayscale" tuiDropdownAlign="right" tuiDropdownOpen tuiLink type="button" [pseudo]="true" [tuiDropdown]="dropdown" > + {{ item.items.length - number - 1 }} </button>
<ng-template #dropdown>
<div tuiStatus [style.padding.rem]="1" >
<ng-container *ngFor="let chip of item.items; let index = index">
<tui-badge *ngIf="index > number">{{ chip }}</tui-badge>
</ng-container>
</div>
</ng-template>
</ng-template>
</tui-items-with-more>
</td>
<td tuiTd>
<span tuiStatus>
<progress tuiProgressBar [style.width.rem]="6" [value]="item.progress / 100" ></progress> {{ item.progress }}ms </span>
</td>
<td tuiTd>
<span tuiStatus>
<button appearance="action" iconStart="@tui.pencil" size="xs" tuiIconButton type="button" > Edit </button>
<button appearance="action" iconStart="@tui.ellipsis" size="xs" tuiIconButton type="button" > More </button>
</span>
</td>
</tr>
</tbody>
</table>
```
**TypeScript:**
```ts
import {NgForOf, NgIf} from '@angular/common';
import {Component} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiTable, TuiTableControl} from '@taiga-ui/addon-table';
import {
    TuiAutoColorPipe,
    TuiButton,
    TuiDropdown,
    TuiIcon,
    TuiInitialsPipe,
    TuiLink,
    TuiTitle,
} from '@taiga-ui/core';
import {
    TuiAvatar,
    TuiBadge,
    TuiCheckbox,
    TuiChip,
    TuiItemsWithMore,
    TuiProgressBar,
    TuiRadioList,
    TuiStatus,
} from '@taiga-ui/kit';
import {TuiCell} from '@taiga-ui/layout';

@Component({
    standalone: true,
    imports: [
        FormsModule,
        NgForOf,
        NgIf,
        TuiAutoColorPipe,
        TuiAvatar,
        TuiBadge,
        TuiButton,
        TuiCell,
        TuiCheckbox,
        TuiChip,
        TuiDropdown,
        TuiIcon,
        TuiInitialsPipe,
        TuiItemsWithMore,
        TuiLink,
        TuiProgressBar,
        TuiRadioList,
        TuiStatus,
        TuiTable,
        TuiTableControl,
        TuiTitle,
    ],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly sizes = ['l', 'm', 's'] as const;

    protected size = this.sizes[0];
    protected selected = [];

    protected readonly data = [
        {
            checkbox: {
                title: 'Data point 1',
                subtitle: 'The first element',
            },
            title: {
                icon: '@tui.file',
                title: 'This is title',
                chip: 'Chip',
                subtitle: 'More information ・ Data',
            },
            cell: {
                name: 'John Cleese',
                email: 'silly@walk.uk',
            },
            status: {
                value: 'Success',
                color: 'var(--tui-status-positive)',
            },
            items: ['Some', 'items', 'displayed', 'here', 'and', 'can', 'overflow'],
            progress: 78,
        },
        {
            checkbox: {
                title: 'Some title',
                subtitle: 'Some more text',
            },
            title: {
                icon: '@tui.heart',
                title: 'More info',
                chip: 'Chips can be here',
            },
            cell: {
                name: 'Eric Idle',
                email: 'cool@dude.com',
            },
            status: {
                value: 'Failure',
                color: 'var(--tui-status-negative)',
            },
            items: ['One', 'Item'],
            progress: 91,
        },
        {
            checkbox: {
                title: 'And now',
                subtitle: 'Completely different',
            },
            title: {
                icon: '@tui.star',
                title: 'Wow',
            },
            cell: {
                name: 'Michael Palin',
                email: 'its@man.com',
            },
            status: {
                value: 'Pending',
                color: 'var(--tui-status-warning)',
            },
            items: [],
            progress: 32,
        },
    ];
}
```

#### Editable

**Template:**
```html
<tui-scrollbar waIntersectionRoot class="scrollbar" [hidden]="true" >
<table size="l" tuiTable class="table" [columns]="columns" [direction]="-1" [sorter]="totalSorter" >
<thead tuiThead>
<tr tuiThGroup>
<th *tuiHead="'name'" rowspan="2" tuiTh class="first" [sorter]="null" [sticky]="true" > Name </th>
<th *tuiHead="'price'" rowspan="2" tuiTh class="number second" [sticky]="true" > Price,&nbsp;$ </th>
<th *tuiHead="'quantity'" colspan="2" tuiTh [sorter]="null" > Purchase </th>
<ng-container *tuiHead="'unit'" />
<th *tuiHead="'date'" rowspan="2" tuiTh > Date </th>
<th *tuiHead="'total'" rowspan="2" tuiTh class="number" [sorter]="totalSorter" > Total </th>
</tr>
<tr tuiThGroup>
<th *tuiHead="'quantity'" tuiTh class="number border" > Quantity </th>
<th *tuiHead="'unit'" tuiTh > Units </th>
</tr>
</thead>
<tbody *tuiLet="pythons | tuiTableSort as sortedPythons" heading="Monty Python" tuiTbody [data]="sortedPythons" >
<tr *ngFor="let item of sortedPythons; trackBy: trackByIndex" tuiTr >
<th *tuiCell="'name'" tuiTd [colSpan]="item.price > 1000 ? 2 : 0" >
<tui-textfield>
<textarea tuiTextarea [ngModel]="item.name" [ngModelOptions]="options" (ngModelChange)="onValueChange($event, 'name', item, pythons)" ></textarea>
</tui-textfield>
</th>
<ng-container *tuiCell="'price'">
<th *ngIf="item.price <= 1000" tuiTd class="second" >
<tui-textfield>
<input tuiInputNumber class="number" [ngModel]="item.price" [ngModelOptions]="options" [tuiValidator]="minPrice" (ngModelChange)="onValueChange($event, 'price', item, pythons)" />
</tui-textfield>
</th>
</ng-container>
<td *tuiCell="'quantity'" tuiTd >
<tui-textfield>
<input tuiInputNumber [ngModel]="item.quantity" [ngModelOptions]="options" [tuiNumberFormat]="{precision: 0}" (ngModelChange)="onValueChange($event, 'quantity', item, pythons)" />
</tui-textfield>
</td>
<td *tuiCell="'unit'" tuiTd >
<tui-textfield tuiChevron class="select" >
<select placeholder="Units" tuiTextfield [ngModel]="item.unit" [ngModelOptions]="options" (ngModelChange)="onValueChange($event, 'unit', item, pythons)" ></select>
<tui-data-list-wrapper *tuiTextfieldDropdown [items]="units" />
</tui-textfield>
</td>
<td *tuiCell="'date'" tuiTd >
<tui-input-date [ngModel]="item.date" [ngModelOptions]="options" (ngModelChange)="onValueChange($event, 'date', item, pythons)" />
</td>
<td *tuiCell="'total'" tuiTd class="number text" > {{ getTotal(item) | tuiFormatNumber | async }} </td>
</tr>
</tbody>
<tbody *tuiLet="starwars | tuiTableSort as sortedStarwars" tuiTbody [data]="sortedStarwars" [heading]="template" >
<tr *ngFor="let item of sortedStarwars; trackBy: trackByIndex" tuiTr >
<th *tuiCell="'name'" tuiTd >
<tui-textfield>
<textarea tuiTextarea [ngModel]="item.name" [ngModelOptions]="options" (ngModelChange)="onValueChange($event, 'name', item, starwars)" ></textarea>
</tui-textfield>
</th>
<th *tuiCell="'price'" tuiTd class="second" >
<tui-textfield>
<input tuiInputNumber [ngModel]="item.price" [ngModelOptions]="options" [tuiValidator]="minPrice" (ngModelChange)="onValueChange($event, 'price', item, starwars)" />
</tui-textfield>
</th>
<td *tuiCell="'quantity'" tuiTd >
<tui-textfield>
<input tuiInputNumber [ngModel]="item.quantity" [ngModelOptions]="options" [tuiNumberFormat]="{precision: 0}" (ngModelChange)="onValueChange($event, 'quantity', item, starwars)" />
</tui-textfield>
</td>
<td *tuiCell="'unit'" tuiTd >
<tui-textfield tuiChevron class="select" >
<select placeholder="Units" tuiTextfield [ngModel]="item.unit" [ngModelOptions]="options" (ngModelChange)="onValueChange($event, 'unit', item, starwars)" ></select>
<tui-data-list-wrapper *tuiTextfieldDropdown [items]="units" />
</tui-textfield>
</td>
<td *tuiCell="'date'" tuiTd >
<tui-input-date [ngModel]="item.date" [ngModelOptions]="options" (ngModelChange)="onValueChange($event, 'date', item, starwars)" />
</td>
<td *tuiCell="'total'" tuiTd class="number text" > {{ getTotal(item) | tuiFormatNumber | async }} </td>
</tr>
</tbody>
</table>
</tui-scrollbar>
<ng-template #template>
<tui-icon icon="@tui.star" class="tui-space_right-3" /> Star Wars </ng-template>
```
**TypeScript:**
```ts
import {AsyncPipe, NgForOf, NgIf} from '@angular/common';
import {Component} from '@angular/core';
import {FormsModule, type ValidatorFn} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {WaIntersectionObserver} from '@ng-web-apis/intersection-observer';
import {type TuiComparator, TuiTable} from '@taiga-ui/addon-table';
import {TuiDay, tuiDefaultSort, TuiLet, TuiValidator} from '@taiga-ui/cdk';
import {
    TuiFormatNumberPipe,
    TuiIcon,
    TuiNumberFormat,
    TuiScrollbar,
    TuiTextfield,
} from '@taiga-ui/core';
import {TuiChevron, TuiDataListWrapper, TuiInputNumber, TuiTextarea} from '@taiga-ui/kit';
import {TuiInputDateModule} from '@taiga-ui/legacy';

interface Item {
    readonly date: TuiDay;
    readonly name: string;
    readonly price: number;
    readonly quantity: number;
    readonly unit: string;
}

@Component({
    standalone: true,
    imports: [
        AsyncPipe,
        FormsModule,
        NgForOf,
        NgIf,
        TuiChevron,
        TuiDataListWrapper,
        TuiFormatNumberPipe,
        TuiIcon,
        TuiInputDateModule,
        TuiInputNumber,
        TuiLet,
        TuiNumberFormat,
        TuiScrollbar,
        TuiTable,
        TuiTextarea,
        TuiTextfield,
        TuiValidator,
        WaIntersectionObserver,
    ],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly options = {updateOn: 'blur'} as const;

    protected readonly units = ['items', 'kg', 'm'];

    protected pythons: readonly Item[] = [
        {
            name: 'Holy Grail',
            price: 999999,
            quantity: 1,
            unit: this.units[0] ?? '',
            date: TuiDay.currentLocal(),
        },
        {
            name: 'Foot',
            price: 29.95,
            quantity: 5,
            unit: this.units[2] ?? '',
            date: TuiDay.currentLocal().append({day: -42}),
        },
        {
            name: 'Shed',
            price: 499,
            quantity: 2,
            unit: this.units[0] ?? '',
            date: TuiDay.currentLocal().append({day: -237}),
        },
    ];

    protected starwars: readonly Item[] = [
        {
            name: 'Lightsaber',
            price: 4999,
            quantity: 3,
            unit: this.units[0] ?? '',
            date: TuiDay.currentLocal(),
        },
        {
            name: 'Spaceship',
            price: 19999,
            quantity: 1,
            unit: this.units[0] ?? '',
            date: TuiDay.currentLocal().append({day: -237}),
        },
        {
            name: 'Stormtrooper helmet',
            price: 14.95,
            quantity: 5,
            unit: this.units[0] ?? '',
            date: TuiDay.currentLocal().append({day: -42}),
        },
    ];

    protected readonly columns = ['name', 'price', 'quantity', 'unit', 'total'] as const;

    protected readonly minPrice: ValidatorFn = ({value}) =>
        value > 400 ? null : {minPrice: 'Price must be above $400'};

    protected readonly totalSorter: TuiComparator<Item> = (a, b) =>
        tuiDefaultSort(a.price * a.quantity, b.price * b.quantity);

    protected trackByIndex(index: number): number {
        return index;
    }

    protected getTotal({price, quantity}: Item): number {
        return price * quantity;
    }

    protected onValueChange<K extends keyof Item>(
        value: Item[K],
        key: K,
        current: Item,
        data: readonly Item[],
    ): void {
        const updated = {...current, [key]: value};

        this.pythons =
            data === this.pythons
                ? this.pythons.map((item) => (item === current ? updated : item))
                : this.pythons;

        this.starwars =
            data === this.starwars
                ? this.starwars.map((item) => (item === current ? updated : item))
                : this.starwars;
    }
}
```

#### With tuiSortBy directive to work with column titles instead of sorters

**Template:**
```html
<p tuiTextfieldSize="m" class="filters" >
<tui-textfield class="input">
<label tuiLabel>Find on page</label>
<input tuiTextfield [(ngModel)]="search" />
</tui-textfield>
<tui-textfield>
<label tuiLabel>Minimum age</label>
<input tuiInputNumber [formControl]="minAge" [tuiNumberFormat]="{precision: 0}" />
</tui-textfield>
</p>
<p class="filters">
<label tuiLabel>
<input tuiCheckbox type="checkbox" [(ngModel)]="dob" /> Enable sorting by DOB </label>
<button size="m" tuiButton tuiChevron tuiDropdownOpen type="button" [tuiDropdown]="dropdown" > Columns </button>
<ng-template #dropdown>
<tui-reorder class="columns" [enabled]="enabled" [(items)]="initial" (enabledChange)="onEnabled($event)" />
</ng-template>
</p>
<tui-loader [overlay]="true" [showLoader]="!!(loading$ | async)" >
<p>
<b>Sort key:</b> {{ sortKey$ | async }}, <b>direction:</b> {{ direction$ | async }} </p>
<table *ngIf="data$ | async as data" tuiTable class="table" [columns]="columns" [direction]="(direction$ | async) ?? -1" [tuiSortBy]="sortKey$ | async" (tuiSortChange)="change($event)" >
<thead>
<tr tuiThGroup>
<th *tuiHead="'name'" tuiSortable tuiTh [requiredSort]="true" > Name </th>
<th *tuiHead="'dob'" tuiTh [tuiSortable]="dob" > Date of Birth </th>
<th *tuiHead="'age'" tuiSortable tuiTh [requiredSort]="true" > Age </th>
</tr>
</thead>
<tbody *tuiLet="data | tuiTableSort as sortedData" tuiTbody [data]="sortedData" >
<tr *ngFor="let item of sortedData" tuiTr >
<td *tuiCell="'name'" tuiTd [class.match]="isMatch(item.name)" > {{ item.name }} </td>
<td *tuiCell="'dob'" tuiTd [class.match]="isMatch(item.dob)" > {{ item.dob }} </td>
<td *tuiCell="'age'" tuiTd [class.match]="isMatch(item.age)" > {{ item.age }} </td>
</tr>
</tbody>
<tfoot>
<tr>
<td [colSpan]="columns.length">
<tui-table-pagination class="tui-space_top-2" [page]="(page$ | async) || 0" [total]="(total$ | async) || 0" (paginationChange)="onPagination($event)" />
</td>
</tr>
</tfoot>
</table>
</tui-loader>
```
**TypeScript:**
```ts
import {AsyncPipe, NgForOf, NgIf} from '@angular/common';
import {Component} from '@angular/core';
import {FormControl, FormsModule, ReactiveFormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {
    type TuiComparator,
    TuiReorder,
    type TuiSortChange,
    TuiSortDirection,
    TuiTable,
    TuiTablePagination,
    type TuiTablePaginationEvent,
} from '@taiga-ui/addon-table';
import {
    TUI_DEFAULT_MATCHER,
    tuiControlValue,
    TuiDay,
    tuiDefaultSort,
    tuiIsFalsy,
    tuiIsPresent,
    TuiLet,
    tuiToInt,
} from '@taiga-ui/cdk';
import {
    TuiButton,
    TuiDropdown,
    TuiLabel,
    TuiLoader,
    TuiNumberFormat,
    TuiTextfield,
} from '@taiga-ui/core';
import {TuiCheckbox, TuiChevron, TuiInputNumber} from '@taiga-ui/kit';
import {
    BehaviorSubject,
    combineLatest,
    debounceTime,
    filter,
    map,
    type Observable,
    share,
    startWith,
    switchMap,
    tap,
    timer,
} from 'rxjs';

interface User {
    readonly dob: TuiDay;
    readonly name: string;
    readonly age: number;
}

const TODAY = TuiDay.currentLocal();

const FIRST = [
    'John',
    'Jane',
    'Jack',
    'Jill',
    'James',
    'Joan',
    'Jim',
    'Julia',
    'Joe',
    'Julia',
];

const LAST = [
    'Smith',
    'West',
    'Brown',
    'Jones',
    'Davis',
    'Miller',
    'Johnson',
    'Jackson',
    'Williams',
    'Wilson',
];

const DATA: readonly User[] = Array.from({length: 300}, () => {
    const dob = TODAY.append({day: -Math.floor(Math.random() * 4000) - 7500}),
        age = getAge(dob),
        name = `${LAST[Math.floor(Math.random() * 10)]}, ${FIRST[Math.floor(Math.random() * 10)]}`;

    return {name, dob, age};
});

const KEYS: Record<string, keyof User> = {
    Name: 'name',
    Age: 'age',
    'Date of Birth': 'dob',
};

function sortBy(key: keyof User, direction: TuiSortDirection): TuiComparator<User> {
    return (a, b) => direction * tuiDefaultSort(a[key], b[key]);
}

function getAge(dob: TuiDay): number {
    const years = TODAY.year - dob.year;
    const months = TODAY.month - dob.month;
    const days = TODAY.day - dob.day;
    const offset = tuiToInt(months > 0 || (!months && days > 9));

    return years + offset;
}

@Component({
    standalone: true,
    imports: [
        AsyncPipe,
        FormsModule,
        NgForOf,
        NgIf,
        ReactiveFormsModule,
        TuiButton,
        TuiCheckbox,
        TuiChevron,
        TuiDropdown,
        TuiInputNumber,
        TuiLabel,
        TuiLet,
        TuiLoader,
        TuiNumberFormat,
        TuiReorder,
        TuiTable,
        TuiTablePagination,
        TuiTextfield,
    ],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    private readonly size$ = new BehaviorSubject(10);
    protected readonly page$ = new BehaviorSubject(0);

    protected readonly direction$ = new BehaviorSubject<TuiSortDirection>(
        TuiSortDirection.Desc,
    );

    protected readonly sortKey$ = new BehaviorSubject<keyof User>('name');

    protected readonly minAge = new FormControl(21);
    protected readonly minAge$ = tuiControlValue<number>(this.minAge).pipe(
        debounceTime(1000),
        tap(() => this.page$.next(0)),
    );

    protected readonly request$ = combineLatest([
        this.sortKey$,
        this.direction$,
        this.page$,
        this.size$,
        this.minAge$,
    ]).pipe(
        // zero time debounce for a case when both key and direction change
        debounceTime(0),
        switchMap((query) => this.getData(...query).pipe(startWith(null))),
        share(),
    );

    protected initial: readonly string[] = ['Name', 'Date of Birth', 'Age'];

    protected enabled = this.initial;

    protected columns = ['name', 'dob', 'age'];

    protected dob = false;

    protected search = '';

    protected readonly loading$ = this.request$.pipe(map(tuiIsFalsy));

    protected readonly total$ = this.request$.pipe(
        filter(tuiIsPresent),
        map(({length}) => length),
        startWith(1),
    );

    protected readonly data$: Observable<readonly User[]> = this.request$.pipe(
        filter(tuiIsPresent),
        map((users) => users.filter(tuiIsPresent)),
        startWith([]),
    );

    protected onEnabled(enabled: readonly string[]): void {
        this.enabled = enabled;
        this.columns = this.initial
            .filter((column) => enabled.includes(column))
            .map((column) => KEYS[column] ?? '');
    }

    protected onPagination({page, size}: TuiTablePaginationEvent): void {
        this.page$.next(page);
        this.size$.next(size);
    }

    protected isMatch(value: unknown): boolean {
        return !!this.search && TUI_DEFAULT_MATCHER(value, this.search);
    }

    protected change({sortKey, sortDirection}: TuiSortChange<User>): void {
        this.sortKey$.next(sortKey!);
        this.direction$.next(sortDirection);
    }

    private getData(
        key: keyof User,
        direction: TuiSortDirection,
        page: number,
        size: number,
        minAge: number,
    ): Observable<ReadonlyArray<User | null>> {
        console.info(`Sort by ${key} , direction : ${direction}`);

        const start = page * size;
        const end = start + size;
        const result = [...DATA]
            .sort(sortBy(key, direction))
            .filter((user) => user.age >= minAge)
            .map((user, index) => (index >= start && index < end ? user : null));

        // Imitating server response
        return timer(Math.random() * 1e3 + 1e3).pipe(map(() => result));
    }
}
```

#### Virtual scroll

**Template:**
```html
<tui-scrollbar>
<cdk-virtual-scroll-viewport #viewport appendOnly tuiScrollable class="viewport tui-zero-scrollbar" [itemSize]="45" [maxBufferPx]="500" [minBufferPx]="400" >
<table tuiTable [columns]="columns" >
<thead>
<tr tuiThGroup>
<th *tuiHead="'name'" tuiTh [sticky]="true" [style.top.px]="-(viewport.getOffsetToRenderedContentStart() || 0)" > Name </th>
<th *tuiHead="'dob'" tuiTh [sticky]="true" [style.top.px]="-(viewport.getOffsetToRenderedContentStart() || 0)" > Date of Birth </th>
<th *tuiHead="'age'" tuiTh [sorter]="ageSorter" [sticky]="true" [style.top.px]="-(viewport.getOffsetToRenderedContentStart() || 0)" > Age </th>
</tr>
</thead>
<tbody tuiTbody>
<tr *cdkVirtualFor="let item of data | tuiTableSort" tuiTr >
<td *tuiCell="'name'" tuiTd > {{ item.name }} </td>
<td *tuiCell="'dob'" tuiTd > {{ item.dob }} </td>
<td *tuiCell="'age'" tuiTd > {{ getAge(item) }} </td>
</tr>
</tbody>
</table>
</cdk-virtual-scroll-viewport>
</tui-scrollbar>
```
**TypeScript:**
```ts
import {
    CdkFixedSizeVirtualScroll,
    CdkVirtualForOf,
    CdkVirtualScrollViewport,
} from '@angular/cdk/scrolling';
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {type TuiComparator, TuiTable} from '@taiga-ui/addon-table';
import {TuiDay, tuiToInt} from '@taiga-ui/cdk';
import {TuiScrollable, TuiScrollbar} from '@taiga-ui/core';

interface User {
    readonly dob: TuiDay;
    readonly name: string;
}

const TODAY = TuiDay.currentLocal();
const FIRST = [
    'John',
    'Jane',
    'Jack',
    'Jill',
    'James',
    'Joan',
    'Jim',
    'Julia',
    'Joe',
    'Julia',
];

const LAST = [
    'Smith',
    'West',
    'Brown',
    'Jones',
    'Davis',
    'Miller',
    'Johnson',
    'Jackson',
    'Williams',
    'Wilson',
];

const DATA: readonly User[] = Array.from({length: 300}, () => ({
    name: `${LAST[Math.floor(Math.random() * 10)]}, ${
        FIRST[Math.floor(Math.random() * 10)]
    }`,
    dob: TODAY.append({day: -Math.floor(Math.random() * 4000) - 7500}),
}));

function getAge({dob}: User): number {
    const years = TODAY.year - dob.year;
    const months = TODAY.month - dob.month;
    const days = TODAY.day - dob.day;
    const offset = tuiToInt(months > 0 || (!months && days > 9));

    return years + offset;
}

@Component({
    standalone: true,
    imports: [
        CdkFixedSizeVirtualScroll,
        CdkVirtualForOf,
        CdkVirtualScrollViewport,
        TuiScrollable,
        TuiScrollbar,
        TuiTable,
    ],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly data = DATA;

    protected readonly columns = ['name', 'dob', 'age'];

    protected readonly getAge = getAge;

    protected readonly ageSorter: TuiComparator<User> = (a: User, b: User) =>
        getAge(a) - getAge(b);
}
```

#### Dynamic columns

**Template:**
```html
<button size="s" tuiButton type="button" (click)="addColumn()" > Add column </button>
<button size="s" tuiButton type="button" class="tui-space_left-2" (click)="addRows()" > Add row </button>
<table tuiTable class="table tui-space_top-3" [columns]="columns" >
<thead>
<tr tuiThGroup>
<ng-container *ngFor="let col of columns">
<th *tuiHead="col" tuiTh > {{ col }} </th>
</ng-container>
</tr>
</thead>
<tbody *tuiLet="data | tuiTableSort as sortedData" tuiTbody [data]="sortedData" >
<tr *ngFor="let item of sortedData" tuiTr >
<ng-container *ngFor="let col of columns">
<td *tuiCell="col" tuiTd > {{ item[col] }} </td>
</ng-container>
</tr>
</tbody>
</table>
```
**TypeScript:**
```ts
import {NgForOf} from '@angular/common';
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiTable} from '@taiga-ui/addon-table';
import {TuiLet} from '@taiga-ui/cdk';
import {TuiButton} from '@taiga-ui/core';

@Component({
    standalone: true,
    imports: [NgForOf, TuiButton, TuiLet, TuiTable],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected data: Array<Record<string, number | string>> = [{id: 1, name: 'name'}];

    protected get columns(): string[] {
        return Object.keys(this.data[0] ?? {});
    }

    protected addColumn(): void {
        this.data = this.data.map((item) => ({
            ...item,
            [`extra-${this.columns.length + 1}`]: `extra column ${
                this.columns.length + 1
            }`,
        }));
    }

    protected addRows(): void {
        this.data = [...this.data, {...this.data[0], id: this.data.length + 1}];
    }
}
```

#### Footer

**Template:**
```html
<table tuiTable [style.width.rem]="36" >
<caption tuiCaption>
<span>999 rows</span>
<button appearance="flat" tuiButton tuiButtonSelect type="button" [(ngModel)]="size" > {{ index * size + 1 }}-{{ (index + 1) * size }} rows <tui-data-list-wrapper *tuiTextfieldDropdown new [itemContent]="content" [items]="items" />
</button>
<tui-pagination [length]="length" [style.float]="'right'" [(index)]="index" />
</caption>
<thead>
<tr tuiThGroup>
<th tuiTh>Name</th>
<th tuiTh>Balance</th>
</tr>
</thead>
<tbody tuiTbody>
<tr *ngFor="let item of data">
<td tuiTd>{{ item.name }}</td>
<td tuiTd>{{ item.balance | tuiFormatNumber | async }}</td>
</tr>
</tbody>
</table>
```
**TypeScript:**
```ts
import {AsyncPipe, NgForOf} from '@angular/common';
import {Component} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiTable} from '@taiga-ui/addon-table';
import {type TuiContext, type TuiStringHandler} from '@taiga-ui/cdk';
import {TuiButton, TuiFormatNumberPipe, TuiTextfield} from '@taiga-ui/core';
import {TuiButtonSelect, TuiDataListWrapper, TuiPagination} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [
        AsyncPipe,
        FormsModule,
        NgForOf,
        TuiButton,
        TuiButtonSelect,
        TuiDataListWrapper,
        TuiFormatNumberPipe,
        TuiPagination,
        TuiTable,
        TuiTextfield,
    ],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly data = [
        {
            name: 'Alex Inkin',
            balance: 1323525,
        },
        {
            name: 'Roman Sedov',
            balance: 423242,
        },
    ] as const;

    protected index = 4;
    protected length = 10;
    protected size = 10;
    protected readonly items = [10, 50, 100];
    protected readonly content: TuiStringHandler<TuiContext<number>> = ({$implicit}) =>
        `${$implicit} items per page`;
}
```

#### Resize a large table

**Template:**
```html
<table tuiTable>
<thead>
<tr tuiThGroup>
<th tuiTh [resizable]="true" > Name </th>
<th tuiTh [resizable]="true" > Items </th>
<th tuiTh [resizable]="true" > Balance </th>
<th tuiTh>Description</th>
</tr>
</thead>
<tbody tuiTbody>
<tr *ngFor="let item of data">
<td tuiTd>{{ item.name }}</td>
<td tuiTd>
<tui-input-tag [(ngModel)]="item.items">Items</tui-input-tag>
</td>
<td tuiTd>
<tui-input tuiTextfieldPrefix="$" [(ngModel)]="item.balance" > Value </tui-input>
</td>
<td tuiTd [style.white-space]="'nowrap'" > {{ item.description }} </td>
</tr>
</tbody>
</table>
```
**TypeScript:**
```ts
import {NgForOf} from '@angular/common';
import {Component} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiTable} from '@taiga-ui/addon-table';
import {
    TuiInputModule,
    TuiInputTagModule,
    TuiTextfieldControllerModule,
} from '@taiga-ui/legacy';

@Component({
    standalone: true,
    imports: [
        FormsModule,
        NgForOf,
        TuiInputModule,
        TuiInputTagModule,
        TuiTable,
        TuiTextfieldControllerModule,
    ],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly data = [
        {
            name: 'Alex Inkin',
            balance: 1323525,
            items: ['Wallet', 'Phone'],
            description:
                'Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.',
        },
        {
            name: 'Roman Sedov',
            balance: '',
            items: ['Wallet'],
            description:
                'Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.',
        },
    ];
}
```

#### Expandable rows

**Template:**
```html
<table tuiTable class="table" [columns]="columns" >
<thead>
<tr tuiThGroup>
<th tuiTh></th>
<th tuiTh [minWidth]="50" > # </th>
<th tuiTh [minWidth]="150" > Name </th>
<th tuiTh [minWidth]="150" > Date of Birth </th>
<th tuiTh>Age</th>
</tr>
</thead>
<tbody tuiTbody [data]="data" >
<ng-container *ngFor="let item of data; index as i">
<tr tuiTr>
<td *tuiCell="'children'" tuiTd >
<button appearance="flat-grayscale" size="xs" tuiIconButton type="button" class="chevron-btn" [attr.title]="item.children?.length ? '' : 'No children'" [disabled]="!item.children?.length" [style.border-radius]="'100%'" [tuiChevron]="rowState[i] ?? false" (click)="toggleRow(i)" > Toggle </button>
</td>
<td *tuiCell="'#'" tuiTd > {{ i + 1 }} </td>
<td *tuiCell="'name'" tuiTd > {{ item.name }} </td>
<td *tuiCell="'dob'" tuiTd > {{ item.dob }} </td>
<td *tuiCell="'age'" tuiTd > {{ item.age }} </td>
</tr>
<tui-table-expand *ngIf="item.children?.length" [expanded]="rowState[i] ?? false" >
<tr *ngFor="let child of item.children; index as j" tuiTr class="child" >
<td *tuiCell="'children'" tuiTd ></td>
<td *tuiCell="'#'" tuiTd > {{ i + 1 }}.{{ j + 1 }} </td>
<td *tuiCell="'name'" tuiTd > {{ child.name }} </td>
<td *tuiCell="'dob'" tuiTd > {{ child.dob }} </td>
<td *tuiCell="'age'" tuiTd > {{ child.age }} </td>
</tr>
</tui-table-expand>
</ng-container>
</tbody>
</table>
```
**TypeScript:**
```ts
import {NgForOf, NgIf} from '@angular/common';
import {Component} from '@angular/core';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiTable} from '@taiga-ui/addon-table';
import {TuiDay, tuiToInt} from '@taiga-ui/cdk';
import {TuiButton} from '@taiga-ui/core';
import {TuiChevron} from '@taiga-ui/kit';

interface User {
    readonly dob: TuiDay;
    readonly name: string;
    readonly age: number;
    children?: User[];
}

const TODAY = TuiDay.currentLocal();

const FIRST = [
    'John',
    'Jane',
    'Jack',
    'Jill',
    'James',
    'Joan',
    'Jim',
    'Julia',
    'Joe',
    'Julia',
];

const LAST = [
    'Smith',
    'West',
    'Brown',
    'Jones',
    'Davis',
    'Miller',
    'Johnson',
    'Jackson',
    'Williams',
    'Wilson',
];

const DATA: readonly User[] = Array.from({length: 10}, (_, index) => {
    // From 5 to 0 children
    const childrenCount = 5 - (index % 6),
        user = generateUser();

    user.children = Array.from({length: childrenCount}, () => generateUser());

    return user;
});

function getAge(dob: TuiDay): number {
    const years = TODAY.year - dob.year;
    const months = TODAY.month - dob.month;
    const days = TODAY.day - dob.day;
    const offset = tuiToInt(months > 0 || (!months && days > 9));

    return years + offset;
}

function generateUser(): User {
    const dob = TODAY.append({day: -Math.floor(Math.random() * 4000) - 7500}),
        age = getAge(dob),
        name = `${LAST[getRandom(0, 9)]}, ${FIRST[getRandom(0, 9)]}`;

    return {name, dob, age};
}

function getRandom(min: number, max: number): number {
    return Math.floor(Math.random() * (max - min) + min);
}

@Component({
    standalone: true,
    imports: [
        FormsModule,
        NgForOf,
        NgIf,
        ReactiveFormsModule,
        TuiButton,
        TuiChevron,
        TuiTable,
    ],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected columns = ['children', '#', 'name', 'dob', 'age'];
    protected readonly data = DATA;

    protected readonly rowState: Record<number, boolean> = {};

    protected toggleRow(index: number): void {
        this.rowState[index] = !this.rowState[index];
    }
}
```


### TypeScript

```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {TuiDemo} from '@demo/utils';
import {TuiLink} from '@taiga-ui/core';
import {TuiAccordion} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [TuiAccordion, TuiDemo, TuiLink],
    templateUrl: './index.html',
    changeDetection,
})
export default class Page {
    protected readonly examples = [
        'Basic',
        'Custom',
        'Editable',
        'With tuiSortBy directive to work with column titles instead of sorters',
        'Virtual scroll',
        'Dynamic columns',
        'Footer',
        'Resize a large table',
        'Expandable rows',
        'Expandable rows: different ways to toggle rows',
        'Manual sorting',
    ];
}
```

---
# components/TableFilters
- **Package**: `ADDON-TABLE`
- **Type**: components
This module allows you to filter table data in a flexible way.

### How to Use (Import)

```ts
import {TuiTableFilters} from '@taiga-ui/addon-table';

@Component({
  standalone: true,
  imports: [
    // ...
    TuiTableFilters,
  ],
  // ...
})
export class Example {}
```

### How to Use (Template)

```html
<table
  tuiTableFilters
  tuiTable
  [columns]="columns"
>
  <thead tuiThead>
    <tr tuiThGroup>
      <th
        *tuiHead="'name'"
        tuiTh
      >
        Name
      </th>
      <th
        *tuiHead="'balance'"
        tuiTh
      >
        <tui-textfield>
          <label tuiLabel>Minimal balance</label>
          <input
            tuiInputNumber
            tuiTableFilter
            [tuiGenericFilter]="filter"
            [formControl]="balance"
          />
        </tui-textfield>
      </th>
    </tr>
  </thead>
  <tbody tuiTbody>
    <tr
      *ngFor="let item of users | tuiTableFilters"
      tuiTr
    >
      <td
        *tuiCell="'name'"
        tuiTd
      >
        {{item.name}}
      </td>
      <td
        *tuiCell="'balance'"
        tuiTd
      >
        {{ item.balance}}
      </td>
    </tr>
  </tbody>
</table>
```

### Usage Examples

#### Basic

**Template:**
```html
<ng-container tuiTableFilters>
<form [formGroup]="form">
<tui-textfield>
<label tuiLabel>Minimal balance</label>
<input formControlName="balance" tuiInputNumber tuiTableFilter="balance" [tuiGenericFilter]="filter" />
</tui-textfield>
<label class="toggle">
<input size="s" tuiSwitch type="checkbox" [ngModel]="form.enabled" [ngModelOptions]="{standalone: true}" [showIcons]="false" (ngModelChange)="onToggle($event)" /> Enable filtering </label>
</form>
<table tuiTable class="table" [columns]="columns" >
<thead>
<tr tuiThGroup>
<th tuiTh>Name</th>
<th tuiTh>Balance</th>
</tr>
</thead>
<tbody tuiTbody>
<tr *ngFor="let item of data | tuiTableFilters | async" tuiTr >
<td *tuiCell="'name'" tuiTd > {{ item.name }} </td>
<td *tuiCell="'balance'" tuiTd > {{ item.balance | tuiFormatNumber | async }} </td>
</tr>
</tbody>
</table>
</ng-container>
```
**TypeScript:**
```ts
import {AsyncPipe, NgForOf} from '@angular/common';
import {Component} from '@angular/core';
import {FormControl, FormGroup, FormsModule, ReactiveFormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiTable, TuiTableFilters} from '@taiga-ui/addon-table';
import {TuiFormatNumberPipe, TuiTextfield} from '@taiga-ui/core';
import {TuiInputNumber, TuiSwitch} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [
        AsyncPipe,
        FormsModule,
        NgForOf,
        ReactiveFormsModule,
        TuiFormatNumberPipe,
        TuiInputNumber,
        TuiSwitch,
        TuiTable,
        TuiTableFilters,
        TuiTextfield,
    ],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly form = new FormGroup({
        balance: new FormControl(0),
    });

    protected readonly data = [
        {name: 'Alex Inkin', balance: 1323525},
        {name: 'Roman Sedov', balance: 523242},
        {name: 'Vladimir Potekhin', balance: 645465},
        {name: 'Nikita Barsukov', balance: 468468},
        {name: 'Maxim Ivanov', balance: 498654},
    ] as const;

    protected readonly columns = Object.keys(this.data[0]);

    protected readonly filter = (item: number, value: number): boolean => item >= value;

    protected onToggle(enabled: boolean): void {
        if (enabled) {
            this.form.enable();
        } else {
            this.form.disable();
        }
    }
}
```

#### FormArray

**Template:**
```html
<ng-container tuiTableFilters>
<form [formGroup]="filterForm">
<tui-textfield>
<label tuiLabel>Minimal balance</label>
<input formControlName="balance" tuiInputNumber tuiTableFilter="controls" [tuiGenericFilter]="filter" />
</tui-textfield>
<label class="toggle">
<input size="s" tuiSwitch type="checkbox" [ngModel]="filterForm.enabled" [ngModelOptions]="{standalone: true}" [showIcons]="false" (ngModelChange)="onToggle($event)" /> Enable filtering </label>
</form>
<table tuiTable class="table" [columns]="columns" >
<thead>
<tr tuiThGroup>
<th tuiTh>Name</th>
<th tuiTh>Balance</th>
</tr>
</thead>
<tbody tuiTbody>
<tr *ngFor="let item of items() | tuiTableFilters | async" tuiTr [formGroup]="item" >
<td *tuiCell="'name'" tuiTd >
<tui-textfield>
<input autocomplete="name" formControlName="name" placeholder="Type an name" tuiTextfield />
</tui-textfield>
</td>
<td *tuiCell="'balance'" tuiTd >
<tui-textfield>
<input formControlName="balance" placeholder="Type a balance" tuiInputNumber />
</tui-textfield>
</td>
</tr>
</tbody>
</table>
<button tuiButton type="button" class="tui-space_top-2" (click)="addRow()" > Add </button>
</ng-container>
```
**TypeScript:**
```ts
import {AsyncPipe, NgForOf} from '@angular/common';
import {Component} from '@angular/core';
import {toSignal} from '@angular/core/rxjs-interop';
import {
    FormArray,
    FormControl,
    FormGroup,
    FormsModule,
    ReactiveFormsModule,
} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiTable, TuiTableFilters} from '@taiga-ui/addon-table';
import {TuiButton, TuiFormatNumberPipe, TuiTextfield} from '@taiga-ui/core';
import {TuiInputNumber, TuiSwitch} from '@taiga-ui/kit';
import {map} from 'rxjs';

@Component({
    standalone: true,
    imports: [
        AsyncPipe,
        FormsModule,
        NgForOf,
        ReactiveFormsModule,
        TuiButton,
        TuiFormatNumberPipe,
        TuiInputNumber,
        TuiSwitch,
        TuiTable,
        TuiTableFilters,
        TuiTextfield,
    ],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    private readonly testData = [
        {name: 'James', balance: 10000},
        {name: 'Michael', balance: 20000},
        {name: 'Richard', balance: 30000},
        {name: 'Robert', balance: 40000},
        {name: 'Daniel', balance: 50000},
    ] as const;

    protected readonly filterForm = new FormGroup({
        balance: new FormControl(0),
    });

    protected readonly array = new FormArray<FormGroup>([]);

    protected readonly items = toSignal(
        this.array.valueChanges.pipe(map(() => [...this.array.controls])),
        {initialValue: []},
    );

    protected testIndex = 0;

    protected readonly columns = ['name', 'balance'];

    public addRow(): void {
        const name = this.testData[this.testIndex]?.name ?? '';
        const balance = this.testData?.[this.testIndex]?.balance ?? 0;

        this.array.push(
            new FormGroup({
                name: new FormControl(name),
                balance: new FormControl(balance, {updateOn: 'blur'}),
            }),
        );
        this.testIndex++;
    }

    protected readonly filter = (
        {balance}: Record<string, FormControl>,
        value: number,
    ): boolean => balance?.value >= value;

    protected onToggle(enabled: boolean): void {
        if (enabled) {
            this.filterForm.enable();
        } else {
            this.filterForm.disable();
        }
    }
}
```


### TypeScript

```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {TuiDemo} from '@demo/utils';

@Component({
    standalone: true,
    imports: [TuiDemo],
    templateUrl: './index.html',
    changeDetection,
})
export default class Page {}
```

---
# components/TablePagination
- **Package**: `ADDON-TABLE`
- **Type**: components
Component to show pagination in table footer

### How to Use (Import)

```ts
import {TuiTablePagination} from '@taiga-ui/addon-table';

// ...

@Component({
  standalone: true,
  imports: [
    // ...
    TuiTablePagination,
  ],
})
export class Example {}
```

### How to Use (Template)

```html
<tui-table-pagination
  [total]="total"
  [(page)]="page"
  [(size)]="size"
></tui-table-pagination>
```

### Example

```html
<tui-table-pagination [items]="items" [page]="page" [size]="size" [total]="total" (paginationChange)="documentationPropertyPaginationChange.emitEvent($event); update($event)" />
```

### API

| Property | Type | Description |
|----------|-----|----------|
| total | `number` | Total amount of items/lines in the table. |
| size | `number` | Items/Lines per page. Uses the first element inside items by default. |
| page | `number` | Current page. Indexing starts at zero. |
| items | `readonly number[]` | Options to select amount of lines per page. |
| paginationChange | `TuiTablePagination` | Event emits when page or size changes. |

### Usage Examples

#### Usage

**Template:**
```html
<tui-table-pagination [page]="page" [size]="size" [total]="237" (paginationChange)="onPagination($event)" />
<p>Current page: {{ page }}</p>
<p>Items per page: {{ size }}</p>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiTablePagination, type TuiTablePaginationEvent} from '@taiga-ui/addon-table';

@Component({
    standalone: true,
    imports: [TuiTablePagination],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    protected page = 3;
    protected size = 10;

    protected onPagination({page, size}: TuiTablePaginationEvent): void {
        this.page = page;
        this.size = size;
    }
}
```

#### Custom size-option content

You can customize the component via DI-token TUI_TABLE_PAGINATION_OPTIONS . Use function tuiTablePaginationOptionsProvider to provide new value of this token.

**Template:**
```html
<tui-table-pagination [items]="sizeOptions" [total]="total" />
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {
    TuiTablePagination,
    tuiTablePaginationOptionsProvider,
} from '@taiga-ui/addon-table';

@Component({
    standalone: true,
    imports: [TuiTablePagination],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
    providers: [
        tuiTablePaginationOptionsProvider({
            sizeOptionContent: ({$implicit, total}) => {
                switch ($implicit) {
                    case 10:
                        return 'Ten';
                    case total:
                        return 'Show all rows';
                    default:
                        return $implicit;
                }
            },
        }),
    ],
})
export default class Example {
    protected total = 350;
    protected sizeOptions = [10, 50, 100, this.total];
}
```

#### Toggle pages label

**Template:**
```html
<tui-table-pagination [items]="sizeOptions" [total]="total" />
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {
    TuiTablePagination,
    tuiTablePaginationOptionsProvider,
} from '@taiga-ui/addon-table';

@Component({
    standalone: true,
    imports: [TuiTablePagination],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
    providers: [
        tuiTablePaginationOptionsProvider({
            showPages: false,
        }),
    ],
})
export default class Example {
    protected total = 350;
    protected sizeOptions = [10, 50, 100, this.total];
}
```


### TypeScript

```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiDemo} from '@demo/utils';
import {TuiTablePagination, type TuiTablePaginationEvent} from '@taiga-ui/addon-table';

@Component({
    standalone: true,
    imports: [TuiDemo, TuiTablePagination],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Page {
    protected readonly itemsVariants = [
        [10, 20, 50, 100],
        [10, 100, 500],
    ];

    protected total = 1000;
    protected page = 5;
    protected items = this.itemsVariants[0]!;
    protected size = this.items[0]!;

    protected update({page, size}: TuiTablePaginationEvent): void {
        this.page = page;
        this.size = size;
    }

    protected totalChange(total: number): void {
        this.total = total;
        this.size = Math.min(this.size, Math.max(total, 1));
    }
}
```

---
# components/Tabs
- **Package**: `KIT`
- **Type**: components
Component for creating tabs.

        
            If you use
            routerLink
            you must also add
            routerLinkActive
            directive.

### How to Use (Import)

```ts
import {TuiTabs} from '@taiga-ui/kit';

// ...

@Component({
  standalone: true,
  imports: [
    // ...
    TuiTabs,
  ],
  // ...
})
export class Example {}
```

### How to Use (Template)

```html
Router links:
<tui-tabs>
  <a
    tuiTab
    routerLink="/page-1"
    routerLinkActive
  >
    Page 1
  </a>
  <a
    tuiTab
    routerLink="/page-2"
    routerLinkActive
  >
    Page 2
  </a>
</tui-tabs>

Buttons:
<tui-tabs [(activeItemIndex)]="activeItemIndex">
  <button
    tuiTab
    (click)="onTabClick(1)"
  >
    Page 1
  </button>
  <button
    tuiTab
    (click)="onTabClick(2)"
  >
    Page 2
  </button>
</tui-tabs>
```

### Example

```html
<tui-tabs-with-more [itemsLimit]="itemsLimit" [moreContent]="moreContent" [size]="size" [underline]="underline" [(activeItemIndex)]="activeItemIndex" >
<ng-container *ngFor="let button of buttons">
<button *tuiItem tuiTab type="button" > {{ button }} </button>
</ng-container>
</tui-tabs-with-more>
```

### API

| Property | Type | Description |
|----------|-----|----------|
| [(activeItemIndex)] | `number` | Active index item |
| [size] | `TuiSizeM | TuiSizeL` | Size |
| [itemsLimit] | `number` |  |
| [moreContent] | `PolymorpheusContent` |  |
| [dropdownContent] | `PolymorpheusContent` |  |

### Usage Examples

#### Basic

**Template:**
```html
<tui-tabs [(activeItemIndex)]="activeItemIndex">
<button iconStart="@tui.credit-card" tuiTab type="button" (click)="onClick('Maps')" > Maps </button>
<button disabled iconStart="@tui.phone" tuiTab type="button" (click)="onClick('Calls')" > Calls </button>
<button iconStart="@tui.settings" tuiTab type="button" (click)="onClick('Settings')" > Settings </button>
</tui-tabs>
<tui-textfield class="tui-space_top-4">
<label tuiLabel>activeItemIndex</label>
<input tuiInputNumber [max]="2" [min]="0" [step]="1" [(ngModel)]="activeItemIndex" />
</tui-textfield>
```
**TypeScript:**
```ts
import {Component, inject} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiAlertService, TuiTextfield} from '@taiga-ui/core';
import {TuiInputNumber, TuiTabs} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [FormsModule, TuiInputNumber, TuiTabs, TuiTextfield],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    private readonly alerts = inject(TuiAlertService);

    protected activeItemIndex = 0;

    protected onClick(item: string): void {
        this.alerts.open(item).subscribe();
    }
}
```

#### TabsWithMore

**Template:**
```html
<tui-tabs-with-more [itemsLimit]="3" [(activeItemIndex)]="activeItemIndex" >
<button *tuiItem iconStart="@tui.credit-card" tuiTab type="button" (click)="onClick('Maps')" > Maps </button>
<button *tuiItem disabled iconStart="@tui.phone" tuiTab type="button" (click)="onClick('Calls')" > Calls </button>
<button *tuiItem iconStart="@tui.settings" tuiTab type="button" (click)="onClick('Settings')" > Settings </button>
<button *tuiItem iconStart="@tui.heart" tuiTab type="button" (click)="onClick('Favorite')" > Favorite </button>
<button *tuiItem iconStart="@tui.trash" tuiTab type="button" (click)="onClick('Trash')" > Trash </button>
</tui-tabs-with-more>
<tui-textfield class="tui-space_top-4">
<label tuiLabel>activeItemIndex</label>
<input tuiInputNumber [max]="4" [min]="0" [step]="1" [(ngModel)]="activeItemIndex" />
</tui-textfield>
```
**TypeScript:**
```ts
import {Component, inject} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiAlertService, TuiTextfield} from '@taiga-ui/core';
import {TuiInputNumber, TuiTabs} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [FormsModule, TuiInputNumber, TuiTabs, TuiTextfield],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    private readonly alerts = inject(TuiAlertService);

    protected activeItemIndex = 0;

    protected onClick(item: string): void {
        this.alerts.open(item).subscribe();
    }
}
```

#### Complex

**Template:**
```html
<div tuiTheme="dark" class="wrapper" >
<h1 class="tui-text_h3 title">Monty Python</h1>
<tui-tabs-with-more underline="#fff" class="tabs" [activeItemIndex]="activeItemIndex" [moreContent]="more" >
<ng-container *ngFor="let tab of tabs">
<ng-container *ngIf="isString(tab); else submenu">
<button *tuiItem tuiTab type="button" (click)="onClick(tab)" > {{ tab }} </button>
</ng-container>
<ng-template #submenu>
<button *tuiItem tuiChevron tuiDropdownOpen tuiTab type="button" [tuiDropdown]="dropdown" (tui-tab-activate)="stop($event)" > Collaborators </button>
</ng-template>
</ng-container>
</tui-tabs-with-more>
</div>
<section class="content">Currently active: {{ activeElement }}</section>
<ng-template #dropdown let-close >
<tui-data-list tuiDataListDropdownManager>
<button *ngFor="let collaborator of collaborators" tuiOption type="button" (click)="onClick(collaborator); close()" > {{ collaborator }} </button>
</tui-data-list>
</ng-template>
<ng-template #more>
<tui-icon aria-label="More" icon="@tui.ellipsis" />
</ng-template>
```
**TypeScript:**
```ts
import {NgForOf, NgIf} from '@angular/common';
import {Component, inject} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {tuiIsString} from '@taiga-ui/cdk';
import {TuiButton, TuiDataList, TuiDropdown, TuiIcon} from '@taiga-ui/core';
import {TuiChevron, TuiDataListDropdownManager, TuiTabs} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [
        NgForOf,
        NgIf,
        TuiButton,
        TuiChevron,
        TuiDataList,
        TuiDataListDropdownManager,
        TuiDropdown,
        TuiIcon,
        TuiTabs,
    ],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly collaborators = ['Carol Cleveland', 'Neil Innes'];

    protected readonly tabs = [
        this.collaborators,
        ...inject<readonly string[]>('Pythons' as any),
    ];

    protected activeElement = String(this.collaborators[0]);

    protected get activeItemIndex(): number {
        if (this.collaborators.includes(this.activeElement)) {
            return this.tabs.indexOf(this.collaborators);
        }

        return this.tabs.indexOf(this.activeElement);
    }

    protected stop(event: Event): void {
        // We need to stop tab custom event so parent component does not think its active
        event.stopPropagation();
    }

    protected onClick(activeElement: string): void {
        this.activeElement = activeElement;
    }

    protected isString(tab: unknown): tab is string {
        return tuiIsString(tab);
    }
}
```

#### Stepper

**Template:**
```html
<tui-tabs [(activeItemIndex)]="activeItemIndex">
<ng-container *ngFor="let step of steps; let last = last">
<button tuiTab type="button" class="step" [disabled]="last" (click)="onClick(step)" > {{ step }} </button>
<tui-icon *ngIf="!last" icon="@tui.chevron-right" class="separator" />
</ng-container>
</tui-tabs>
<tui-textfield class="tui-space_top-4">
<label tuiLabel>activeItemIndex</label>
<input tuiInputNumber [max]="2" [min]="0" [step]="1" [tuiNumberFormat]="{precision: 0}" [(ngModel)]="activeItemIndex" />
</tui-textfield>
```
**TypeScript:**
```ts
import {NgForOf, NgIf} from '@angular/common';
import {Component, inject} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiAlertService, TuiIcon, TuiNumberFormat, TuiTextfield} from '@taiga-ui/core';
import {TuiInputNumber, TuiTabs} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [
        FormsModule,
        NgForOf,
        NgIf,
        TuiIcon,
        TuiInputNumber,
        TuiNumberFormat,
        TuiTabs,
        TuiTextfield,
    ],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    private readonly alerts = inject(TuiAlertService);

    protected activeItemIndex = 0;

    protected readonly steps = ['Sales', 'Settings', 'News'];

    protected onClick(item: string): void {
        this.alerts.open(item).subscribe();
    }
}
```

#### Closing

**Template:**
```html
<tui-tabs-with-more size="m" [itemsLimit]="3" [(activeItemIndex)]="activeItemIndex" >
<ng-container *ngFor="let item of items">
<button *tuiItem tuiTab type="button" (keydown.delete)="remove(item)" > {{ item }} <tui-icon icon="@tui.x" class="tui-space_left-2" [style.font-size.rem]="1" (click.stop)="remove(item)" />
</button>
</ng-container>
</tui-tabs-with-more>
<p>{{ items[activeItemIndex] }}</p>
<button tuiButton type="button" (click)="add()" > Add one more </button>
<tui-textfield class="tui-space_top-4">
<label tuiLabel>activeItemIndex</label>
<input tuiInputNumber [max]="4" [min]="0" [step]="1" [tuiNumberFormat]="{precision: 0}" [(ngModel)]="activeItemIndex" />
</tui-textfield>
```
**TypeScript:**
```ts
import {NgForOf} from '@angular/common';
import {Component} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiButton, TuiIcon, TuiNumberFormat, TuiTextfield} from '@taiga-ui/core';
import {TuiInputNumber, TuiTabs} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [
        FormsModule,
        NgForOf,
        TuiButton,
        TuiIcon,
        TuiInputNumber,
        TuiNumberFormat,
        TuiTabs,
        TuiTextfield,
    ],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    protected open = false;
    protected activeItemIndex = 0;

    protected items = Array.from({length: 5}, (_, i) => `Item #${i}`);

    protected add(): void {
        this.items = this.items.concat(`Item #${Date.now()}`);
    }

    protected remove(removed: string): void {
        const index = this.items.indexOf(removed);

        this.items = this.items.filter((item) => item !== removed);

        if (index <= this.activeItemIndex) {
            this.activeItemIndex = Math.max(this.activeItemIndex - 1, 0);
        }
    }
}
```

#### Vertical

**Template:**
```html
<section class="content">
<nav tuiTabs vertical="left" class="left" >
<button tuiTab type="button" > Item 1 </button>
<button tuiTab type="button" > Item 2 </button>
<button tuiTab type="button" > Item 3 with name so long it spans multiple lines </button>
</nav>
<div>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce nec ultricies enim, vel molestie orci. In finibus diam ac nulla accumsan, vel condimentum lorem ultricies. In feugiat mauris sem, ac ultricies metus aliquet nec. Ut a iaculis metus, id vestibulum justo. Nulla id ante semper, aliquam augue vitae, sollicitudin massa. Sed congue nisi sed ullamcorper mollis. Vivamus volutpat non est a vestibulum. Sed in elementum odio. Proin a lectus ac quam vulputate ornare nec id mi. Maecenas pharetra ultricies efficitur. Etiam sit amet vulputate elit. Donec ut dapibus nunc. Nullam vestibulum diam eros, ac euismod velit porta ac. Ut ut auctor velit. Nulla ac lobortis erat, ut tempor neque. </p>
<p> Donec quis lacus leo. Mauris quis vestibulum mauris. Sed hendrerit odio id blandit iaculis. Nulla ac gravida ligula, tristique tempus eros. Mauris efficitur risus quis arcu pharetra, eu semper ex rutrum. Aenean justo felis, imperdiet non justo vel, fringilla maximus nibh. Vestibulum ut imperdiet ex, vel varius odio. Nunc nec lorem non odio mollis porta. In gravida accumsan lacus, vitae egestas lectus aliquet sed. Morbi justo orci, fringilla sit amet consectetur vel, consectetur a nibh. Sed eu porttitor ante. Morbi imperdiet ligula id velit dignissim malesuada. Vestibulum blandit posuere sem. </p>
</div>
</section>
<section class="content">
<div>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce nec ultricies enim, vel molestie orci. In finibus diam ac nulla accumsan, vel condimentum lorem ultricies. In feugiat mauris sem, ac ultricies metus aliquet nec. Ut a iaculis metus, id vestibulum justo. Nulla id ante semper, aliquam augue vitae, sollicitudin massa. Sed congue nisi sed ullamcorper mollis. Vivamus volutpat non est a vestibulum. Sed in elementum odio. Proin a lectus ac quam vulputate ornare nec id mi. Maecenas pharetra ultricies efficitur. Etiam sit amet vulputate elit. Donec ut dapibus nunc. Nullam vestibulum diam eros, ac euismod velit porta ac. Ut ut auctor velit. Nulla ac lobortis erat, ut tempor neque. </p>
<p> Donec quis lacus leo. Mauris quis vestibulum mauris. Sed hendrerit odio id blandit iaculis. Nulla ac gravida ligula, tristique tempus eros. Mauris efficitur risus quis arcu pharetra, eu semper ex rutrum. Aenean justo felis, imperdiet non justo vel, fringilla maximus nibh. Vestibulum ut imperdiet ex, vel varius odio. Nunc nec lorem non odio mollis porta. In gravida accumsan lacus, vitae egestas lectus aliquet sed. Morbi justo orci, fringilla sit amet consectetur vel, consectetur a nibh. Sed eu porttitor ante. Morbi imperdiet ligula id velit dignissim malesuada. Vestibulum blandit posuere sem. </p>
</div>
<tui-tabs size="m" vertical="right" class="right" >
<a routerLinkActive tuiTab [routerLink]="routes.Button" > Button </a>
<a routerLinkActive tuiTab [routerLink]="routes.Tabs" > Tabs </a>
<a routerLinkActive tuiTab [routerLink]="routes.Input" > Input </a>
</tui-tabs>
</section>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {RouterLink, RouterLinkActive} from '@angular/router';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {DemoRoute} from '@demo/routes';
import {TuiTabs} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [RouterLink, RouterLinkActive, TuiTabs],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly routes = DemoRoute;
}
```

#### Styles

**Template:**
```html
<tui-tabs-with-more class="custom" [itemsLimit]="3" [underline]="false" [(activeItemIndex)]="activeItemIndex" >
<button *tuiItem tuiTab type="button" > Maps </button>
<button *tuiItem tuiTab type="button" > Calls </button>
<button *tuiItem tuiTab type="button" > Settings </button>
<button *tuiItem tuiTab type="button" > Favorite </button>
<button *tuiItem tuiTab type="button" > Trash </button>
</tui-tabs-with-more>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiTabs} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [TuiTabs],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected activeItemIndex = 0;
}
```

#### Tabs with routing

**Template:**
```html
<tui-tabs-with-more>
<ng-container *ngFor="let url of urls; let index = index">
<a *tuiItem routerLinkActive="active" tuiTab [routerLink]="url" > Example {{ index + 1 }} </a>
</ng-container>
</tui-tabs-with-more>
<router-outlet />
```
**TypeScript:**
```ts
import {NgForOf} from '@angular/common';
import {ChangeDetectionStrategy, Component} from '@angular/core';
import {RouterLink, RouterLinkActive, RouterOutlet, type Routes} from '@angular/router';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiTabs} from '@taiga-ui/kit';

@Component({
    standalone: true,
    selector: 'example-1',
    template: 'example-1',
    changeDetection: ChangeDetectionStrategy.OnPush,
})
class Nav1 {}

@Component({
    standalone: true,
    selector: 'example-2',
    template: 'example-2',
    changeDetection: ChangeDetectionStrategy.OnPush,
})
class Nav2 {}

@Component({
    standalone: true,
    selector: 'example-3',
    template: 'example-3',
    changeDetection: ChangeDetectionStrategy.OnPush,
})
class Nav3 {}

@Component({
    standalone: true,
    selector: 'example-4',
    template: 'example-4',
    changeDetection: ChangeDetectionStrategy.OnPush,
})
class Nav4 {}

@Component({
    standalone: true,
    selector: 'example-5',
    template: 'example-5',
    changeDetection: ChangeDetectionStrategy.OnPush,
})
class Nav5 {}

export const routes: Routes = [
    {
        path: '',
        component: Nav1,
    },
    {
        path: 'nav-1',
        component: Nav1,
    },
    {
        path: 'nav-2',
        component: Nav2,
    },
    {
        path: 'nav-3',
        component: Nav3,
    },
    {
        path: 'nav-4',
        component: Nav4,
    },
    {
        path: 'nav-5',
        component: Nav5,
    },
];

@Component({
    standalone: true,
    imports: [NgForOf, RouterLink, RouterLinkActive, RouterOutlet, TuiTabs],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly urls = ['nav-1', 'nav-2', 'nav-3', 'nav-4', 'nav-5'];
}
```


### TypeScript

```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {TuiDemo} from '@demo/utils';
import {tuiDocExampleOptionsProvider} from '@taiga-ui/addon-doc';
import {type TuiSizeL} from '@taiga-ui/core';
import {TuiTabs} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [TuiDemo, TuiTabs],
    templateUrl: './index.html',
    changeDetection,
    providers: [tuiDocExampleOptionsProvider({fullsize: true})],
})
export default class Page {
    protected readonly examples = [
        'Basic',
        'TabsWithMore',
        'Complex',
        'Stepper',
        'Closing',
        'Vertical',
        'Styles',
    ];

    protected buttons = ['Button 1', 'Button 2', 'Button 3', 'Button 4'];

    protected readonly moreContentVariants = ['', 'And more'];

    protected moreContent = this.moreContentVariants[0]!;

    protected underline = true;

    protected activeItemIndex = 0;

    protected itemsLimit = 999;

    protected sizes: readonly TuiSizeL[] = ['m', 'l'];

    protected size = this.sizes[1]!;
}
```

---
# components/Textarea
- **Package**: `KIT`
- **Type**: components
Textarea
        uses
        
            Textfield
        
        to create a multi-line string input.

### How to Use (Import)

```ts
import {FormsModule} from '@angular/forms';
import {TuiTextfield} from '@taiga-ui/core';
import {TuiTextarea} from '@taiga-ui/kit';

@Component({
  standalone: true,
  imports: [
    // ...
    FormsModule,
    TuiTextfield,
    TuiTextarea,
  ],
})
export class Example {
  value = 'Value';
}
```

### How to Use (Template)

```html
<tui-textfield>
  <label tuiLabel>Label</label>
  <textarea
    tuiTextarea
    [(ngModel)]="value"
  ></textarea>
</tui-textfield>
```

### Example

```html
<ng-template>
<tui-textfield [iconEnd]="icons.iconEnd" [iconStart]="icons.iconStart" [tuiTextfieldCleaner]="textfieldDoc.cleaner" [tuiTextfieldSize]="textfieldDoc.size" >
<label *ngIf="textfieldDoc.size !== 's'" tuiLabel > Label </label>
<textarea placeholder="Placeholder" tuiTextarea [formControl]="control" [invalid]="controlDoc.invalid" [max]="max" [min]="min" [readOnly]="controlDoc.readonly" [tuiDisabled]="controlDoc.disabled" ></textarea>
</tui-textfield>
</ng-template>
```

### API

| Property | Type | Description |
|----------|-----|----------|
| [min] | `number` | Minimum number of rows in height |
| [max] | `number` | Maximum number of rows before scroll appears |

### Usage Examples

#### Basic

**Template:**
```html
<tui-textfield>
<label tuiLabel>Large with label inside</label>
<textarea placeholder="Placeholder" tuiTextarea ></textarea>
</tui-textfield>
<tui-textfield tuiTextfieldSize="m">
<label tuiLabel>Medium with label inside</label>
<textarea placeholder="Placeholder" tuiTextarea ></textarea>
</tui-textfield>
<label tuiLabel> Large with label outside <tui-textfield>
<textarea placeholder="Placeholder" tuiTextarea ></textarea>
</tui-textfield>
</label>
<label tuiLabel> Medium with label outside <tui-textfield tuiTextfieldSize="m">
<textarea placeholder="Placeholder" tuiTextarea ></textarea>
</tui-textfield>
</label>
<label tuiLabel> Small with label outside <tui-textfield tuiTextfieldSize="s">
<textarea placeholder="Placeholder" tuiTextarea ></textarea>
</tui-textfield>
</label>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiTextfield} from '@taiga-ui/core';
import {TuiTextarea} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [TuiTextarea, TuiTextfield],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {}
```

#### Limit

**Template:**
```html
<tui-textfield [style.margin-block-end.rem]="1">
<label tuiLabel>Limit</label>
<textarea placeholder="Placeholder" tuiTextarea [formControl]="control" [limit]="100" [max]="6" [min]="3" ></textarea>
</tui-textfield>
<button tuiButton type="button" (click)="control.setValue('Short text')" > Programmatically update </button>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {FormControl, ReactiveFormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiButton, TuiTextfield} from '@taiga-ui/core';
import {TuiTextarea, TuiTextareaLimit} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [
        ReactiveFormsModule,
        TuiButton,
        TuiTextarea,
        TuiTextareaLimit,
        TuiTextfield,
    ],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    protected control = new FormControl(
        'Adding [limit] directive allows you to display a counter of symbols inside the textarea, highlight excessive characters in red and also automatically add Validators.maxlength(x) validator',
    );

    constructor() {
        this.control.markAsTouched();
    }
}
```

#### Custom highlight

**Template:**
```html
<tui-textfield>
<label tuiLabel>Custom highlight</label>
<textarea placeholder="Type 'width' or 'height'" tuiTextarea [content]="highlight" [(ngModel)]="value" ></textarea>
</tui-textfield>
<ng-template #highlight let-text >
<span [innerHTML]="process(text)"></span>
</ng-template>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiTextfield} from '@taiga-ui/core';
import {TuiTextarea, tuiTextareaOptionsProvider} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [FormsModule, TuiTextarea, TuiTextfield],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
    providers: [
        tuiTextareaOptionsProvider({
            min: 4,
            max: 4,
        }),
    ],
})
export default class Example {
    protected value =
        'You can implement your own highlight, just make sure you do not alter font width or height';

    protected process(text: string): string {
        return text
            .replaceAll('width', '<span class="width">width</span>')
            .replaceAll('height', '<span class="height">height</span>');
    }
}
```

#### Icons

**Template:**
```html
<tui-textfield iconStart="@tui.pencil">
<label tuiLabel>Your best thought</label>
<textarea placeholder="Write something..." tuiTextarea [max]="4" [min]="4" [(ngModel)]="value" ></textarea>
</tui-textfield>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiTextfield} from '@taiga-ui/core';
import {TuiTextarea} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [FormsModule, TuiTextarea, TuiTextfield],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    protected value = '';
}
```


### TypeScript

```ts
import {Component, inject} from '@angular/core';
import {FormControl, ReactiveFormsModule} from '@angular/forms';
import {TuiDocControl} from '@demo/components/control';
import {TuiDocIcons} from '@demo/components/icons';
import {TuiDocTextfield} from '@demo/components/textfield';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {DemoRoute} from '@demo/routes';
import {TuiDemo} from '@demo/utils';
import {TuiTextfield} from '@taiga-ui/core';
import {TUI_TEXTAREA_OPTIONS, TuiTextarea} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [
        ReactiveFormsModule,
        TuiDemo,
        TuiDocControl,
        TuiDocIcons,
        TuiDocTextfield,
        TuiTextarea,
        TuiTextfield,
    ],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class PageComponent {
    protected readonly routes = DemoRoute;
    protected readonly options = inject(TUI_TEXTAREA_OPTIONS);
    protected readonly examples = ['Basic', 'Limit', 'Custom highlight', 'Icons'];
    protected readonly control = new FormControl(null);

    protected min = this.options.min;
    protected max = this.options.max;
}
```

---
# components/Textfield
- **Package**: `CORE`
- **Type**: components
Textfield
        is a low level component that other more complex controls are based upon.

### How to Use (Import)

```ts
import {Component} from '@angular/core';
import {TuiTextfield} from '@taiga-ui/core';
// ...

@Component({
  standalone: true,
  imports: [
    // ...
    TuiTextfield,
  ],
})
export class Example {}
```

### How to Use (Template)

```html
<tui-textfield>
  <input
    tuiTextfield
    [(ngModel)]="value"
  />
</tui-textfield>
```

### Example

```html
<tui-textfield [filler]="filler" [iconEnd]="icons.iconEnd" [iconStart]="icons.iconStart" [tuiTextfieldCleaner]="textfield.cleaner" [tuiTextfieldSize]="textfield.size" >
<label *ngIf="textfield.size !== 's'" tuiLabel > I am a label </label>
<input placeholder="I am placeholder" tuiTextfield [disabled]="control.disabled" [invalid]="control.invalid" [readOnly]="control.readonly" [(ngModel)]="value" />
<tui-icon tuiTooltip="I am a hint" />
</tui-textfield>
```

### API

| Property | Type | Description |
|----------|-----|----------|
| [(ngModel)] | `string` | Value (or reactive control directives) |
| [filler] | `string` | Filler |

### Usage Examples

#### Basic

**Template:**
```html
<tui-textfield iconEnd="@tui.settings" iconStart="@tui.search" >
<label tuiLabel>I am a label</label>
<input placeholder="I am placeholder" tuiTextfield [(ngModel)]="value" />
<tui-icon icon="@tui.bell" />
<tui-icon tuiTooltip="I am a hint" />
</tui-textfield>
<label tuiLabel> For long labels it is better to use label outside as it can wrap to multiple lines <tui-textfield #m iconEnd="@tui.settings" iconStart="@tui.search" tuiTextfieldSize="m" >
<input tuiTextfield [placeholder]="m.focused() ? 'I am placeholder' : 'I am a label'" [(ngModel)]="value" />
<tui-icon icon="@tui.bell" />
<tui-icon tuiTooltip="I am a hint" />
</tui-textfield>
</label>
<tui-textfield #s iconEnd="@tui.settings" iconStart="@tui.search" tuiTextfieldSize="s" >
<input tuiTextfield [placeholder]="s.focused() ? 'I am placeholder' : 'I am a label'" [(ngModel)]="value" />
<tui-icon icon="@tui.bell" />
<tui-icon tuiTooltip="I am a hint" />
</tui-textfield>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiIcon, TuiTextfield} from '@taiga-ui/core';
import {TuiTooltip} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [FormsModule, TuiIcon, TuiTextfield, TuiTooltip],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected value = '';
}
```

#### States

**Template:**
```html
<tui-textfield iconStart="@tui.search">
<label tuiLabel>Disabled</label>
<input tuiTextfield [disabled]="true" [(ngModel)]="value" />
<tui-icon tuiTooltip="Disabled does not show tooltip" />
</tui-textfield>
<tui-textfield iconStart="@tui.search">
<label tuiLabel>Read-only</label>
<input placeholder="I am placeholder" tuiTextfield [readOnly]="true" [(ngModel)]="value" />
<tui-icon tuiTooltip="Readonly shows tooltip" />
</tui-textfield>
<tui-textfield iconStart="@tui.search">
<label tuiLabel>Invalid</label>
<input placeholder="I am placeholder" tuiTextfield [invalid]="true" [(ngModel)]="value" />
<tui-icon tuiTooltip="Can also follow Angular validation" />
</tui-textfield>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiIcon, TuiTextfield} from '@taiga-ui/core';
import {TuiTooltip} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [FormsModule, TuiIcon, TuiTextfield, TuiTooltip],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected value = 'Test';
}
```

#### Dropdown

**Template:**
```html
<tui-textfield iconEnd="@tui.search">
<label tuiLabel>Start typing</label>
<input #input placeholder="I am placeholder" tuiTextfield [(ngModel)]="value" />
<tui-icon tuiTooltip="Autocomplete suggestions" />
<ng-container *ngIf="items | tuiFilterByInput as filtered">
<ng-container *ngIf="input.value && filtered.length">
<tui-data-list-wrapper *tuiTextfieldDropdown [items]="filtered" />
</ng-container>
</ng-container>
</tui-textfield>
<tui-textfield>
<label tuiLabel>Select option</label>
<input placeholder="I am placeholder" tuiSelectLike tuiTextfield [(ngModel)]="value" />
<tui-icon tuiTooltip="Fixed choice select" />
<tui-data-list-wrapper *tuiTextfieldDropdown [items]="items" />
</tui-textfield>
<tui-textfield tuiChevron tuiDropdownDirection="top" tuiDropdownLimitWidth="auto" >
<label tuiLabel>Dropdown settings</label>
<input placeholder="I am placeholder" tuiSelectLike tuiTextfield [(ngModel)]="value" />
<tui-icon tuiTooltip="Fixed choice select" />
<tui-data-list-wrapper *tuiTextfieldDropdown [items]="items" />
</tui-textfield>
```
**TypeScript:**
```ts
import {NgIf} from '@angular/common';
import {Component, inject} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiDropdown, TuiIcon, TuiSelectLike, TuiTextfield} from '@taiga-ui/core';
import {
    TuiChevron,
    TuiDataListWrapper,
    TuiFilterByInputPipe,
    TuiTooltip,
} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [
        FormsModule,
        NgIf,
        TuiChevron,
        TuiDataListWrapper,
        TuiDropdown,
        TuiFilterByInputPipe,
        TuiIcon,
        TuiSelectLike,
        TuiTextfield,
        TuiTooltip,
    ],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected value = '';

    protected readonly items = inject<readonly string[]>('Pythons' as any);
}
```

#### InputPassword

**Template:**
```html
<tui-textfield>
<label tuiLabel>Click icon to toggle</label>
<input placeholder="I am placeholder" tuiTextfield type="password" [(ngModel)]="value" />
<tui-icon tuiPassword />
</tui-textfield>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiIcon, TuiTextfield} from '@taiga-ui/core';
import {TuiPassword} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [FormsModule, TuiIcon, TuiPassword, TuiTextfield],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    protected value = '';
}
```

#### Mask

**Template:**
```html
<tui-textfield [tuiTextfieldCleaner]="false">
<label tuiLabel>Flat angle</label>
<input #input placeholder="3,14" tuiTextfield [maskito]="options" [(ngModel)]="value" />
<button *ngIf="value" iconStart="@tui.x" tabindex="-1" tuiIconButton type="button" (click)="clear()" (pointerdown.zoneless.prevent)="input.focus()" > Clear </button>
</tui-textfield>
```
**TypeScript:**
```ts
import {NgIf} from '@angular/common';
import {Component} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {MaskitoDirective} from '@maskito/angular';
import {type MaskitoOptions} from '@maskito/core';
import {
    maskitoAddOnFocusPlugin,
    maskitoCaretGuard,
    maskitoNumberOptionsGenerator,
    maskitoRemoveOnBlurPlugin,
} from '@maskito/kit';
import {TuiButton, TuiTextfield} from '@taiga-ui/core';

const postfix = ' rad';
const numberOptions = maskitoNumberOptionsGenerator({
    postfix,
    decimalSeparator: ',',
    maximumFractionDigits: 8,
    min: 0,
});

@Component({
    standalone: true,
    imports: [FormsModule, MaskitoDirective, NgIf, TuiButton, TuiTextfield],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    protected value = Math.PI.toFixed(8);
    protected readonly options: MaskitoOptions = {
        ...numberOptions,
        plugins: [
            ...numberOptions.plugins,
            maskitoCaretGuard((value) => [0, value.length - postfix.length]),
            maskitoAddOnFocusPlugin(postfix),
            maskitoRemoveOnBlurPlugin(postfix),
        ],
    };

    protected clear(): void {
        this.value = postfix;
    }
}
```

#### Email

**Template:**
```html
<tui-textfield>
<label tuiLabel>Email</label>
<input placeholder="Enter your email" tuiTextfield type="email" [(ngModel)]="email" />
<tui-icon icon="@tui.mail" />
</tui-textfield>
<tui-textfield>
<label tuiLabel>Email</label>
<input inputmode="email" placeholder="Enter your email" tuiTextfield type="text" [(ngModel)]="email" />
<tui-icon icon="@tui.mail" />
</tui-textfield>
<tui-textfield>
<label tuiLabel>Email</label>
<input autocomplete="new-password" placeholder="Enter your email" tuiTextfield type="email" [(ngModel)]="email" />
<tui-icon icon="@tui.mail" />
</tui-textfield>
<p> Email: <code>{{ email }}</code>
</p>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiIcon, TuiTextfield} from '@taiga-ui/core';

@Component({
    standalone: true,
    imports: [FormsModule, ReactiveFormsModule, TuiIcon, TuiTextfield],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected email = '';
}
```


### TypeScript

```ts
import {Component} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {TuiDocControl} from '@demo/components/control';
import {TuiDocIcons} from '@demo/components/icons';
import {TuiDocTextfield} from '@demo/components/textfield';
import {changeDetection} from '@demo/emulate/change-detection';
import {DemoRoute} from '@demo/routes';
import {TuiDemo} from '@demo/utils';
import {TuiIcon, TuiTextfield} from '@taiga-ui/core';
import {TuiTooltip} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [
        FormsModule,
        TuiDemo,
        TuiDocControl,
        TuiDocIcons,
        TuiDocTextfield,
        TuiIcon,
        TuiTextfield,
        TuiTooltip,
    ],
    templateUrl: './index.html',
    changeDetection,
})
export default class Page {
    protected routes = DemoRoute;
    protected readonly examples = [
        'Basic',
        'States',
        'Dropdown',
        'InputPassword',
        'Mask',
        'Email',
    ];

    protected value = '';
    protected filler = '';
}
```

---
# components/ThumbnailCard
- **Package**: `ADDON-COMMERCE`
- **Type**: components
Customizable credit card thumbnail

### How to Use (Import)

```ts
import {TuiThumbnailCard} from '@taiga-ui/addon-commerce';

// ...

@Component({
  standalone: true,
  imports: [
    // ...
    TuiThumbnailCard,
  ],
  // ...
})
export class Example {}
```

### How to Use (Template)

```html
<tui-thumbnail-card
  class="logo"
  paymentSystem="visa"
>
  {{ 1234 }}
</tui-thumbnail-card>
```

### Example

```html
<tui-thumbnail-card [iconEnd]="controlIcons.iconEnd" [iconStart]="controlIcons.iconStart" [monoHandler]="monoHandler" [paymentSystem]="paymentSystem" [size]="size" [style.background]="background" > {{ contentProjection }} </tui-thumbnail-card>
```

### API

| Property | Type | Description |
|----------|-----|----------|
| [monoHandler] | `TuiBooleanHandler<TuiPaymentSystem>` | Whether to use colored icon for particular payment system |
| [paymentSystem] | `TuiPaymentSystem | null` | Payment system |
| [size] | `TuiSizeXS | TuiSizeL` | Size |

### Usage Examples

#### Sizes

**Template:**
```html
<tui-thumbnail-card *ngFor="let size of sizes" iconEnd="@tui.cloud" iconStart="@tui.lock" paymentSystem="mastercard" [size]="size" > 4572 </tui-thumbnail-card>
```
**TypeScript:**
```ts
import {NgFor} from '@angular/common';
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiThumbnailCard} from '@taiga-ui/addon-commerce';

@Component({
    standalone: true,
    imports: [NgFor, TuiThumbnailCard],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly sizes = ['xs', 's', 'm', 'l'] as const;
}
```

#### A cool one

**Template:**
```html
<tui-thumbnail-card paymentSystem="mir" class="logo" > 7777 </tui-thumbnail-card>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiThumbnailCard} from '@taiga-ui/addon-commerce';

@Component({
    standalone: true,
    imports: [TuiThumbnailCard],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {}
```

#### Backgrounds

**Template:**
```html
<tui-thumbnail-card iconEnd="@tui.user" paymentSystem="visa" size="l" class="star" > 1234 </tui-thumbnail-card>
<tui-thumbnail-card iconEnd="@tui.user" paymentSystem="mastercard" size="l" class="gradient" > 5678 </tui-thumbnail-card>
<tui-thumbnail-card paymentSystem="maestro" size="l" class="retrowave" > 9000 </tui-thumbnail-card>
<tui-thumbnail-card paymentSystem="unionpay" size="l" class="radial" > 7777 </tui-thumbnail-card>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiThumbnailCard} from '@taiga-ui/addon-commerce';

@Component({
    standalone: true,
    imports: [TuiThumbnailCard],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {}
```

#### External colored icon

**Template:**
```html
<tui-thumbnail-card iconEnd="@tui.user" paymentSystem="visa" >
<img alt="external" src="https://github.com/waterplea.png?size=200" /> 1234 </tui-thumbnail-card>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiThumbnailCard} from '@taiga-ui/addon-commerce';

@Component({
    standalone: true,
    imports: [TuiThumbnailCard],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {}
```

#### Textfield

**Template:**
```html
<tui-segmented>
<button *ngFor="let state of statuses" type="button" (click)="status = state" > {{ state }} </button>
</tui-segmented>
<tui-textfield>
<label tuiLabel>Card number</label>
<input icon="" tuiInputCard [disabled]="status === 'disabled'" [invalid]="status === 'invalid'" [readOnly]="status === 'readOnly'" [(ngModel)]="card" />
<tui-thumbnail-card *ngIf="card.startsWith('1234')" iconStart="@tui.dollar-sign" paymentSystem="visa" size="s" [style.background]="background" />
</tui-textfield>
```
**TypeScript:**
```ts
import {NgForOf, NgIf} from '@angular/common';
import {Component} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiInputCard, TuiThumbnailCard} from '@taiga-ui/addon-commerce';
import {TuiButton, TuiTextfield} from '@taiga-ui/core';
import {TuiSegmented} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [
        FormsModule,
        NgForOf,
        NgIf,
        TuiButton,
        TuiInputCard,
        TuiSegmented,
        TuiTextfield,
        TuiThumbnailCard,
    ],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected statuses = ['normal', 'disabled', 'readOnly', 'invalid'] as const;
    protected status: string = this.statuses[0];
    protected card = '1234123412341234';
    protected background =
        '#2b9aff linear-gradient(110deg, transparent 70%, #0780ff 71%, #db028b 100%)';
}
```


### TypeScript

```ts
import {Component, inject} from '@angular/core';
import {TuiDocIcons} from '@demo/components/icons';
import {changeDetection} from '@demo/emulate/change-detection';
import {TuiDemo} from '@demo/utils';
import {
    TUI_PAYMENT_SYSTEM_ICONS,
    type TuiPaymentSystem,
    TuiThumbnailCard,
} from '@taiga-ui/addon-commerce';
import {TUI_TRUE_HANDLER, type TuiBooleanHandler} from '@taiga-ui/cdk';

@Component({
    standalone: true,
    imports: [TuiDemo, TuiDocIcons, TuiThumbnailCard],
    templateUrl: './index.html',
    changeDetection,
})
export default class Example {
    protected readonly examples = [
        'Sizes',
        'A cool one',
        'Backgrounds',
        'External colored icon',
        'Textfield',
    ];

    protected readonly paymentSystemVariants = Object.keys(
        inject(TUI_PAYMENT_SYSTEM_ICONS),
    ) as readonly TuiPaymentSystem[];

    protected readonly sizeVariants: ReadonlyArray<TuiThumbnailCard['size']> = [
        'l',
        'm',
        's',
        'xs',
    ];

    protected size = this.sizeVariants[0]!;

    protected readonly monoHandlerVariants: ReadonlyArray<
        TuiBooleanHandler<TuiPaymentSystem>
    > = [(ps) => ps === 'mir' || ps === 'visa' || ps === 'electron', TUI_TRUE_HANDLER];

    protected monoHandler = this.monoHandlerVariants[0]!;

    protected paymentSystem = this.paymentSystemVariants[0]!;

    protected contentProjection = '1234';
    protected background =
        '#2b9aff linear-gradient(110deg, transparent 70%, #0780ff 71%, #db028b 100%)';
}
```

---
# components/Tiles
- **Package**: `KIT`
- **Type**: components
Tiles
            is a light-weight touch-friendly tiles grid drag and drop component with no predefined styles.

### How to Use (Import)

```ts
import {TuiTiles} from '@taiga-ui/kit';

// ...

@Component({
  standalone: true,
  imports: [
    // ...
    TuiTiles,
  ],
  // ...
})
export class Example {}
```

### How to Use (Template)

```html
<tui-tiles [(order)]="order">
  <tui-tile
    *ngFor="let item of items"
    [width]="item.w"
    [height]="item.h"
  >
    <tui-icon
      tuiTileHandle
      icon="@tui.grip-vertical"
    />
    {{ item.content }}
  </tui-tile>
</tui-tiles>
```

### Example

```html
<tui-tiles class="tiles" [(order)]="order" >
<tui-tile *ngFor="let item of items; let index = index" tuiTileHandle [style.order]="order.get(index)" >
<div class="content">{{ item.name }}</div>
</tui-tile>
</tui-tiles>
```

### API

| Property | Type | Description |
|----------|-----|----------|
| [debounce] | `number` | Debounce for the tile order change output. |
| [(order)] | `Map<number, number>` | The order of the tiles. |
| (orderChange) | `Map<number, number>` | Output for tile order change. |
| [width] | `number` | Width of the tile. |
| [height] | `number` | Height of the tile. |
| [tuiTileHandle] | `Directive` | Directive to determine the handle of the tui-tile. |

### Usage Examples

#### Basic

**Template:**
```html
<tui-tiles class="tiles" [debounce]="500" [(order)]="order" >
<tui-tile *ngFor="let item of items; let index = index" class="tile" [height]="item.h" [style.order]="order.get(index)" [width]="item.w" >
<div class="content" [class.rick]="item.content === 'rick'" >
<iframe *ngIf="item.content === 'rick'; else default" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen frameborder="0" src="https://www.youtube.com/embed/dQw4w9WgXcQ?modestbranding=1&autohide=1&showinfo=0&controls=0" title="YouTube video player" class="rick" ></iframe>
<tui-icon icon="@tui.grip-vertical" tuiTileHandle class="handle" />
<tui-icon icon="@tui.grip-vertical" tuiTileHandle class="handle" />
<ng-template #default>
<h2 class="title">{{ item.content }}</h2> Order - {{ order.get(index) ?? index }} </ng-template>
</div>
</tui-tile>
</tui-tiles>
```
**TypeScript:**
```ts
import {NgForOf, NgIf} from '@angular/common';
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiIcon} from '@taiga-ui/core';
import {TuiTiles} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [NgForOf, NgIf, TuiIcon, TuiTiles],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected items = [
        {w: 1, h: 1, content: 'Item 1'},
        {w: 1, h: 1, content: 'Item 2'},
        {w: 2, h: 1, content: 'Item 3'},
        {w: 1, h: 1, content: 'Item 4'},
        {w: 3, h: 1, content: 'Item 5'},
        {w: 1, h: 1, content: 'Item 6'},
        {w: 2, h: 2, content: 'rick'},
        {w: 1, h: 1, content: 'Item 8'},
        {w: 1, h: 1, content: 'Item 9'},
    ];

    protected order = new Map();
}
```

#### Vertical

**Template:**
```html
<tui-tiles class="tiles" [(order)]="order" >
<tui-tile *ngFor="let item of items; let index = index" tuiTileHandle class="tile" [class.tile_tall]="item === 'John Cleese'" [style.order]="order.get(index)" >
<div class="content">{{ item }}</div>
</tui-tile>
</tui-tiles>
```
**TypeScript:**
```ts
import {NgForOf} from '@angular/common';
import {Component, inject} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiTiles} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [NgForOf, TuiTiles],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly items = inject<readonly string[]>('Pythons' as any);
    protected order = new Map();
}
```

#### Nested tiles

**Template:**
```html
<tui-tiles class="tiles" [debounce]="500" [(order)]="order" >
<ng-container *ngFor="let item of items; let i = index">
<tui-tile class="tile" [style.order]="order.get(i)" >
<div class="content">
<tui-icon icon="@tui.grip-vertical" tuiTileHandle class="handle" />
<strong>{{ item.content }}</strong>
<p>Order - {{ order.get(i) ?? i }}</p>
<tui-tiles class="nested" [(order)]="item.order" >
<ng-container *ngFor="let child of items; let j = index">
<tui-tile tuiTileHandle class="tile" [style.order]="item.order.get(j)" >
<div class="content"> {{ child.content }} </div>
</tui-tile>
</ng-container>
</tui-tiles>
</div>
</tui-tile>
</ng-container>
</tui-tiles>
```
**TypeScript:**
```ts
import {NgForOf} from '@angular/common';
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiIcon} from '@taiga-ui/core';
import {TuiTiles} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [NgForOf, TuiIcon, TuiTiles],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected items = [
        {content: 'Item 1', order: new Map()},
        {content: 'Item 2', order: new Map()},
        {content: 'Item 3', order: new Map()},
        {content: 'Item 4', order: new Map()},
    ];

    protected order = new Map();
}
```


### TypeScript

```ts
import {NgForOf} from '@angular/common';
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {TuiDemo} from '@demo/utils';
import {TuiTitle} from '@taiga-ui/core';
import {TuiTiles} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [NgForOf, TuiDemo, TuiTiles, TuiTitle],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    changeDetection,
})
export default class Page {
    protected debounce = 0;
    protected order = new Map<number, number>();

    protected width = 1;
    protected height = 1;

    protected readonly items = [
        {id: 1, name: 'John Cleese'},
        {id: 2, name: 'Eric Idle'},
        {id: 3, name: 'Graham Chapman'},
    ];
}
```

### LESS

```less
@import '@taiga-ui/core/styles/taiga-ui-local';

.tiles {
    inline-size: 10rem;
    gap: 1rem;
    grid-auto-rows: minmax(var(--tui-height-m), auto);
}

@media @tui-mobile {
    .tile_tall {
        --tui-height: 2;
    }
}

.content {
    .transition(box-shadow);

    display: flex;
    block-size: 100%;
    align-items: center;
    padding: 0 1rem;
    background: var(--tui-background-base);
    border-radius: var(--tui-radius-l);
    border: 1px solid var(--tui-border-normal);
    cursor: ns-resize;

    tui-tile._dragged & {
        box-shadow: var(--tui-shadow-small-hover);
    }
}
```

---
# components/Toast
- **Package**: `KIT`
- **Type**: components

### How to Use (Import)

```ts
import {TuiToast} from '@taiga-ui/kit';

// ...

@Component({
  standalone: true,
  imports: [
    // ...
    TuiToast,
  ],
  // ...
})
export class Example {}
```

### How to Use (Template)

```html
<!-- Inline -->
<div tuiToast>
  Notification
  <button
    tuiButton
    type="button"
  >
    Action
  </button>
</div>

<!-- Portal -->
<ng-template [(tuiToast)]="open">
  <button tuiToast>Interactive toast</button>
</ng-template>
```

### Example

```html
<button tuiButton type="button" (click)="toast.set(true)" > Show toast </button>
<ng-template [tuiToast]="toast()" [tuiToastOptions]="{appearance: appearance, autoClose: autoClose, closable: closable}" (tuiToastChange)="toast.set($event)" >
<div tuiToast>I am a toast</div>
</ng-template>
```

### API

| Property | Type | Description |
|----------|-----|----------|
| [appearance] | `string` | Appearance of a toast |
| [autoClose] | `number` | Automatic close timeout, 0 for a permanent toast |
| [closable] | `boolean` | Show close button on desktop and close on swipe on mobile |
| [data] | `I` |  |

### Usage Examples

#### Basic

**Template:**
```html
<ng-container *ngFor="let platform of platforms">
<h2>{{ platform === 'web' ? 'Desktop' : 'Mobile' }}</h2>
<section [tuiPlatform]="platform">
<button tuiToast type="button" > Plain text interactive </button>
<div tuiToast> With action <button tuiButton type="button" > Action </button>
</div>
</section>
<section [tuiPlatform]="platform">
<div iconStart="@tui.info" tuiToast > With icon </div>
<div tuiToast>
<tui-icon appearance="accent" icon="@tui.box" tuiBadge /> With badge <button appearance="icon" iconStart="@tui.x" size="xs" tuiIconButton type="button" > Close </button>
</div>
</section>
<section [tuiPlatform]="platform">
<div tuiToast>
<tui-avatar [src]="'https://github.com/waterplea.png' | tuiFallbackSrc: '@tui.user' | async" /> Avatar </div>
<div tuiToast>
<tui-avatar [src]="'https://github.com/marsibarsi.png' | tuiFallbackSrc: '@tui.user' | async" /> Everything <button tuiButton type="button" > Action </button>
<button *ngIf="platform === 'web'" appearance="icon" iconStart="@tui.x" size="xs" tuiIconButton type="button" > Close </button>
</div>
</section>
<section [tuiPlatform]="platform">
<div iconStart="@tui.alarm-clock" tuiToast > The text of the notification telling what happened is in three lines because there is a lot of information <button tuiButton type="button" > Action </button>
</div>
</section>
</ng-container>
```
**TypeScript:**
```ts
import {AsyncPipe, NgForOf, NgIf} from '@angular/common';
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiPlatform} from '@taiga-ui/cdk';
import {TuiButton, TuiFallbackSrcPipe, TuiIcon} from '@taiga-ui/core';
import {TuiAvatar, TuiBadge, TuiToast} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [
        AsyncPipe,
        NgForOf,
        NgIf,
        TuiAvatar,
        TuiBadge,
        TuiButton,
        TuiFallbackSrcPipe,
        TuiIcon,
        TuiPlatform,
        TuiToast,
    ],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly platforms = ['web', 'ios'] as const;
}
```

#### Customization

**Template:**
```html
<h2>Desktop</h2>
<section tuiPlatform="web">
<div tuiToast>
<tui-progress-circle size="xxs" [max]="100" [value]="value()" /> Sending to printer <button size="s" tuiButton type="button" (click)="trigger$.next(0)" > Restart </button>
</div>
<div tuiTheme="dark" tuiToast [style.background]="'#575B61'" >
<tui-loader [inheritColor]="true" /> Updating... </div>
</section>
<h2>Mobile</h2>
<section tuiPlatform="ios">
<div tuiToast>
<tui-loader /> Updating... </div>
<div iconStart="@tui.circle-check" tuiTheme="dark" tuiToast [style.background]="'var(--tui-text-action)'" > Added <button appearance="secondary-grayscale" size="s" tuiButton type="button" > Label </button>
</div>
</section>
```
**TypeScript:**
```ts
import {isPlatformServer} from '@angular/common';
import {Component, inject, PLATFORM_ID} from '@angular/core';
import {toSignal} from '@angular/core/rxjs-interop';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TUI_IS_E2E, TuiPlatform} from '@taiga-ui/cdk';
import {TuiButton, TuiLoader} from '@taiga-ui/core';
import {TuiProgressCircle, TuiToast} from '@taiga-ui/kit';
import {BehaviorSubject, of, switchMap, take, timer} from 'rxjs';

@Component({
    standalone: true,
    imports: [TuiButton, TuiLoader, TuiPlatform, TuiProgressCircle, TuiToast],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly trigger$ = new BehaviorSubject(0);
    protected readonly value = toSignal(
        inject(TUI_IS_E2E) || isPlatformServer(inject(PLATFORM_ID))
            ? of(30)
            : this.trigger$.pipe(switchMap(() => timer(0, 200).pipe(take(100)))),
        {initialValue: 0},
    );
}
```

#### Service

**Template:**
```html
<button tuiButton type="button" (click)="primitive()" > String </button>
<button tuiButton type="button" (click)="template.set(true)" > Template </button>
<button tuiButton type="button" (click)="component()" > Component </button>
<ng-template [tuiToast]="template()" [tuiToastOptions]="{closable: false}" (tuiToastChange)="template.set($event)" >
<a href="https://github.com/taiga-family/taiga-ui" iconEnd="@tui.external-link" iconStart="@tui.github" rel="noreferrer noopener" target="_blank" tuiToast > Check out source code </a>
</ng-template>
```
**TypeScript:**
```ts
import {ChangeDetectionStrategy, Component, inject, signal} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {type TuiPopover} from '@taiga-ui/cdk';
import {type TuiAlertOptions, TuiButton, TuiIcon} from '@taiga-ui/core';
import {TuiToast, TuiToastService} from '@taiga-ui/kit';
import {injectContext, PolymorpheusComponent} from '@taiga-ui/polymorpheus';

@Component({
    standalone: true,
    imports: [TuiIcon, TuiToast],
    template: `
        <div tuiToast>
            <tui-icon
                icon="@tui.triangle-alert"
                [style.color]="'var(--tui-status-negative)'"
            />
            Lost connection.
            <br />
            Restore your internet to continue
        </div>
    `,
    changeDetection: ChangeDetectionStrategy.OnPush,
})
export class Toast {
    protected readonly context =
        injectContext<TuiPopover<TuiAlertOptions<void>, boolean>>();
}

@Component({
    standalone: true,
    imports: [TuiButton, TuiToast],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly toast = inject(TuiToastService);
    protected readonly template = signal(false);

    protected primitive(): void {
        this.toast
            .open('Alarm saved', {autoClose: 0, data: '@tui.alarm-clock'})
            .subscribe();
    }

    protected component(): void {
        this.toast.open(new PolymorpheusComponent(Toast), {closable: false}).subscribe();
    }
}
```


### TypeScript

```ts
import {Component, inject, signal} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {TuiDemo} from '@demo/utils';
import {TuiButton} from '@taiga-ui/core';
import {TUI_TOAST_OPTIONS, TuiToast} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [TuiButton, TuiDemo, TuiToast],
    templateUrl: './index.html',
    changeDetection,
})
export default class Example {
    private readonly options = inject(TUI_TOAST_OPTIONS);

    protected readonly examples = ['Basic', 'Customization', 'Service'];
    protected readonly toast = signal(false);
    protected readonly autoCloseVariants = [0, 3000, 5000, 1000, 500];
    protected autoClose = this.options.autoClose;
    protected content = 'Notification';
    protected appearance = '';
    protected closable = this.options.closable;
}
```

---
# components/Tooltip
- **Package**: `KIT`
- **Type**: components
Component to show icons with a hint by hover

### How to Use (Import)

```ts
import {TuiHint} from '@taiga-ui/core';
import {TuiTooltip} from '@taiga-ui/kit';

// ...

@Component({
  standalone: true,
  imports: [
    // ...
    TuiTooltip,
    TuiHint,
  ],
  // ...
})
export class Example {}
```

### How to Use (Template)

```html
<tui-icon tuiTooltip="Please don't touch this" />
```

### Usage Examples

#### Basic

**Template:**
```html
<p>Component with a static text...</p>
<tui-icon tuiHintDirection="right" tuiTooltip="Supports basic <strong>HTML</strong>" />
<p> ...or any custom HTML or logic with <code>PolymorpheusContent</code> : </p>
<tui-icon tuiHintDirection="bottom-right" [tuiTooltip]="tooltip" />
<p class="wrapping-tooltip"> Example of wrapping tooltip <tui-icon tuiHintDirection="bottom-right" [tuiTooltip]="tooltip" />
</p>
<ng-template #tooltip>
<tui-loader *tuiLet="(isLoading$ | async)! as isLoading" size="s" class="tooltip" [inheritColor]="true" [showLoader]="isLoading" > {{ isLoading ? '' : 'Error 502: Bad Gateway' }} </tui-loader>
</ng-template>
```
**TypeScript:**
```ts
import {AsyncPipe} from '@angular/common';
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiLet} from '@taiga-ui/cdk';
import {TuiIcon, TuiLoader} from '@taiga-ui/core';
import {TuiTooltip} from '@taiga-ui/kit';
import {interval, map, startWith} from 'rxjs';

@Component({
    standalone: true,
    imports: [AsyncPipe, TuiIcon, TuiLet, TuiLoader, TuiTooltip],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected isLoading$ = interval(2000).pipe(
        map((i) => Boolean(i % 2)),
        startWith(true),
    );
}
```

#### Custom host

**Template:**
```html
<p> Custom host can be set with <a tuiLink [routerLink]="['/tui-hint']" >
<code>tuiHint</code>
</a> directive </p>
<tui-avatar size="l" tabindex="0" tuiHintAppearance="dark" tuiHintDirection="right" [style.background]="'❤️' | tuiAutoColor" [tuiHint]="tooltip" > ❤️ </tui-avatar>
<ng-template #tooltip>
<div> What is <strong>love</strong> ? </div>
<div>Baby don't hurt me</div>
<div>Don't hurt me</div>
<div>No more...</div>
</ng-template>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {RouterLink} from '@angular/router';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiAutoColorPipe, TuiHintDirective, TuiLink} from '@taiga-ui/core';
import {TuiAvatar} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [RouterLink, TuiAutoColorPipe, TuiAvatar, TuiHintDirective, TuiLink],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {}
```

#### Repeating template

**Template:**
```html
<ng-template #tooltip>Allowed symbols: ♠ ♣ ♦ ♥</ng-template>
<tui-input tuiTextfieldSize="m" class="input" [tuiTextfieldLabelOutside]="true" />
<tui-icon tuiHintDirection="bottom" [tuiTooltip]="tooltip" />
<tui-input tuiTextfieldSize="m" class="input" [tuiTextfieldLabelOutside]="true" />
<tui-icon appearance="" tuiHintDirection="bottom" tuiTooltip="Set icon color with 'color' after resetting appearance" class="primary" />
<tui-input tuiTextfieldSize="m" class="input" />
<tui-icon tuiHintDirection="right" [tuiTooltip]="tooltip" />
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiIcon, TuiTextfield} from '@taiga-ui/core';
import {TuiTooltip} from '@taiga-ui/kit';
import {TuiInputModule, TuiTextfieldControllerModule} from '@taiga-ui/legacy';

@Component({
    standalone: true,
    imports: [
        TuiIcon,
        TuiInputModule,
        TuiTextfield,
        TuiTextfieldControllerModule,
        TuiTooltip,
    ],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {}
```

#### Options

**Template:**
```html
<p>Modified icon</p>
<tui-icon tuiTooltip="Oh, snap!" />
<p>Modified appearance</p>
<tui-icon appearance="negative" icon="@tui.info" tuiTooltip="Oh, snap!" />
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {tuiHintOptionsProvider, TuiIcon} from '@taiga-ui/core';
import {TuiTooltip} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [TuiIcon, TuiTooltip],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
    providers: [
        tuiHintOptionsProvider({
            icon: '@tui.camera',
        }),
    ],
})
export default class Example {}
```


### TypeScript

```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {TuiDemo} from '@demo/utils';

@Component({
    standalone: true,
    imports: [TuiDemo],
    templateUrl: './index.html',
    changeDetection,
})
export default class Page {}
```

---
# components/Tree
- **Package**: `KIT`
- **Type**: components
Component to display tree-like data structure

### How to Use (Import)

```ts
import {TuiTree} from '@taiga-ui/kit';

// ...

@Component({
  standalone: true,
  imports: [
    // ...
    TuiTree,
  ],
  // ...
})
export class Example {}
```

### How to Use (Template)

```html
<tui-tree
  [value]="value"
  [childrenHandler]="handler"
></tui-tree>
```

### API

| Property | Type | Description |
|----------|-----|----------|
| [tuiTreeController] | `boolean` | input is the default state. |

### Usage Examples

#### Manual

**Template:**
```html
<div role="tree" [tuiTreeController]="true" >
<tui-tree-item> Fruits <tui-tree-item> Apples <tui-tree-item>Granny Smith</tui-tree-item>
<tui-tree-item>Red Delicious</tui-tree-item>
</tui-tree-item>
<tui-tree-item>Oranges</tui-tree-item>
</tui-tree-item>
<tui-tree-item> Animals <tui-tree-item>Cats</tui-tree-item>
<tui-tree-item>Dogs</tui-tree-item>
</tui-tree-item>
</div>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiTree} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [TuiTree],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {}
```

#### Array

**Template:**
```html
<tui-tree [value]="data" />
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiTree} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [TuiTree],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly data = [
        'Top level 1',
        ['Second level item', ['Third level 1', 'Third level 2', 'Third level 3']],
        'Top level 2',
        'Top level 3',
        ['Second 1', 'Second 2'],
    ];
}
```

#### Template

**Template:**
```html
<tui-tree [childrenHandler]="handler" [content]="content" [tuiTreeController]="true" [value]="data" />
<ng-template #content let-node="node" let-value >
<div class="wrapper" [style.opacity]="1 / node.level" >
<tui-icon *ngIf="value.icon" class="t-icon" [icon]="value.icon" /> {{ value.text }} </div>
</ng-template>
```
**TypeScript:**
```ts
import {NgIf} from '@angular/common';
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {EMPTY_ARRAY, type TuiHandler} from '@taiga-ui/cdk';
import {TuiIcon} from '@taiga-ui/core';
import {TuiTree} from '@taiga-ui/kit';

interface TreeNode {
    readonly children?: readonly TreeNode[];
    readonly icon?: string;
    readonly text: string;
}

@Component({
    standalone: true,
    imports: [NgIf, TuiIcon, TuiTree],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly data: TreeNode = {
        text: 'Topmost',
        children: [
            {
                text: 'Top level 1',
                icon: '@tui.heart',
                children: [
                    {
                        text: 'Another item',
                        children: [
                            {text: 'Next level 1', icon: '@tui.heart'},
                            {text: 'Next level 2', icon: '@tui.heart'},
                            {text: 'Next level 3'},
                        ],
                    },
                ],
            },
            {text: 'Top level 2'},
            {
                text: 'Top level 3',
                children: [{text: 'Test 1'}, {text: 'Test 2', icon: '@tui.heart'}],
            },
        ],
    };

    protected readonly handler: TuiHandler<TreeNode, readonly TreeNode[]> = (item) =>
        item.children || EMPTY_ARRAY;
}
```

#### Programmatic control

**Template:**
```html
<tui-tree [childrenHandler]="handler" [content]="content" [map]="map" [tuiTreeController]="false" [value]="data" />
<ng-template #content let-item > {{ item.text }} </ng-template>
<p>
<button size="s" tuiButton type="button" class="programmatic tui-space_right-2" (click)="toggleTopmost()" > Toggle Topmost </button>
</p>
<p>
<button size="s" tuiButton type="button" class="programmatic" (click)="toggleLevel(0)" > Toggle Top level 1 </button>
</p>
<button size="s" tuiButton type="button" class="programmatic" (click)="toggleLevel(2)" > Toggle Top level 3 </button>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {EMPTY_ARRAY, type TuiHandler} from '@taiga-ui/cdk';
import {TuiButton} from '@taiga-ui/core';
import {TuiTree} from '@taiga-ui/kit';

interface TreeNode {
    readonly children?: readonly TreeNode[];
    readonly text: string;
}

@Component({
    standalone: true,
    imports: [TuiButton, TuiTree],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly data: TreeNode = {
        text: 'Topmost',
        children: [
            {
                text: 'Top level 1',
                children: [
                    {
                        text: 'Another item',
                        children: [
                            {text: 'Next level 1'},
                            {text: 'Next level 2'},
                            {text: 'Next level 3'},
                        ],
                    },
                ],
            },
            {text: 'Top level 2'},
            {
                text: 'Top level 3',
                children: [{text: 'Test 1'}, {text: 'Test 2'}],
            },
        ],
    };

    protected readonly map = new Map<TreeNode, boolean>();

    protected readonly handler: TuiHandler<TreeNode, readonly TreeNode[]> = (item) =>
        item.children || EMPTY_ARRAY;

    protected toggleTopmost(): void {
        this.map.set(this.data, !this.map.get(this.data));
    }

    protected toggleLevel(index: number): void {
        const nodes: readonly TreeNode[] = this.data.children || [];
        const key = nodes[index];

        if (key) {
            this.map.set(key, !this.map.get(key));
        }
    }
}
```

#### Custom

**Template:**
```html
<tui-tree *ngFor="let item of data.children" [childrenHandler]="handler" [content]="content" [tuiTreeController]="true" [value]="item" />
<ng-template #content let-item > {{ item.text }} </ng-template>
```
**TypeScript:**
```ts
import {NgForOf} from '@angular/common';
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {EMPTY_ARRAY, type TuiHandler} from '@taiga-ui/cdk';
import {TUI_TREE_CONTENT, TuiTree} from '@taiga-ui/kit';
import {PolymorpheusComponent} from '@taiga-ui/polymorpheus';

import {Folders} from './content';

interface TreeNode {
    readonly children?: readonly TreeNode[];
    readonly text: string;
}

@Component({
    standalone: true,
    imports: [NgForOf, TuiTree],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
    providers: [
        {
            provide: TUI_TREE_CONTENT,
            useValue: new PolymorpheusComponent(Folders),
        },
    ],
})
export default class Example {
    protected readonly data: TreeNode = {
        text: 'Topmost',
        children: [
            {
                text: 'Top level 1',
                children: [
                    {
                        text: 'Another item',
                        children: [
                            {text: 'Next level 1'},
                            {text: 'Next level 2'},
                            {text: 'Next level 3'},
                        ],
                    },
                ],
            },
            {text: 'Top level 2'},
            {
                text: 'Top level 3',
                children: [{text: 'Test 1'}, {text: 'Test 2'}],
            },
        ],
    };

    protected readonly handler: TuiHandler<TreeNode, readonly TreeNode[]> = (item) =>
        item.children || EMPTY_ARRAY;
}
```

#### Checkbox

**Template:**
```html
<tui-tree *ngFor="let item of data.children" [childrenHandler]="handler" [content]="content" [tuiTreeController]="true" [value]="item" />
<ng-template #content let-item >
<label tuiLabel class="tui-space_vertical-2 tui-space_left-1" >
<input size="s" tuiCheckbox type="checkbox" [ngModel]="item | tuiMapper: getValue : map" (ngModelChange)="onChecked(item, $event)" />
<small>{{ item.text }}</small>
</label>
</ng-template>
```
**TypeScript:**
```ts
import {NgForOf} from '@angular/common';
import {Component} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {EMPTY_ARRAY, type TuiHandler, TuiMapperPipe} from '@taiga-ui/cdk';
import {TuiLabel} from '@taiga-ui/core';
import {TuiCheckbox, TuiTree} from '@taiga-ui/kit';

interface TreeNode {
    readonly children?: readonly TreeNode[];
    readonly text: string;
}

function flatten(item: TreeNode): readonly TreeNode[] {
    return item.children
        ? item.children.map(flatten).reduce((arr, item) => [...arr, ...item], [])
        : [item];
}

@Component({
    standalone: true,
    imports: [FormsModule, NgForOf, TuiCheckbox, TuiLabel, TuiMapperPipe, TuiTree],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    protected map = new Map<TreeNode, boolean>();

    protected readonly data: TreeNode = {
        text: 'Topmost',
        children: [
            {
                text: 'Top level 1',
                children: [
                    {
                        text: 'Another item',
                        children: [
                            {text: 'Next level 1'},
                            {text: 'Next level 2'},
                            {text: 'Next level 3'},
                        ],
                    },
                ],
            },
            {text: 'Top level 2'},
            {
                text: 'Top level 3',
                children: [{text: 'Test 1'}, {text: 'Test 2'}],
            },
        ],
    };

    protected readonly handler: TuiHandler<TreeNode, readonly TreeNode[]> = (item) =>
        item.children || EMPTY_ARRAY;

    protected readonly getValue = (
        item: TreeNode,
        map: Map<TreeNode, boolean>,
    ): boolean | null => {
        let result: boolean | null = null;
        const flat = flatten(item);
        const key = flat[0]!;

        if (key) {
            result = !!map.get(key);
        }

        for (const item of flat) {
            if (result !== !!map.get(item)) {
                return null;
            }
        }

        return result;
    };

    protected onChecked(node: TreeNode, value: boolean): void {
        flatten(node).forEach((item) => this.map.set(item, value));

        this.map = new Map(this.map.entries());
    }
}
```

#### Asynchronous

**Template:**
```html
<tui-tree [childrenHandler]="childrenHandler" [content]="content" [map]="map" [tuiTreeController]="false" [value]="service.data$ | async" (toggled)="onToggled($event)" />
<ng-template #content let-item >
<tui-loader *ngIf="item === loading; else text" class="loader" />
<ng-template #text>{{ item.text }}</ng-template>
</ng-template>
```
**TypeScript:**
```ts
import {AsyncPipe, NgIf} from '@angular/common';
import {Component, inject, Injectable} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {type TuiHandler} from '@taiga-ui/cdk';
import {TuiLoader} from '@taiga-ui/core';
import {
    TUI_TREE_LOADER,
    TUI_TREE_LOADING,
    TUI_TREE_START,
    TuiTree,
    type TuiTreeLoader,
    TuiTreeService,
} from '@taiga-ui/kit';
import {map, type Observable, timer} from 'rxjs';

interface Item {
    readonly children?: boolean;
    readonly text: string;
}

@Injectable()
class TreeLoader implements TuiTreeLoader<Item> {
    public loadChildren({text}: Item): Observable<Item[]> {
        return timer(3000).pipe(
            map(() => [
                {text: `${text} 1`, children: Math.random() > 0.5},
                {text: `${text} 2`, children: Math.random() > 0.5},
                {text: `${text} 3`, children: Math.random() > 0.5},
            ]),
        );
    }

    public hasChildren({children}: Item): boolean {
        return !!children;
    }
}

@Component({
    standalone: true,
    imports: [AsyncPipe, NgIf, TuiLoader, TuiTree],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
    providers: [
        TuiTreeService,
        {
            provide: TUI_TREE_START,
            useValue: {text: 'Topmost'},
        },
        {
            provide: TUI_TREE_LOADER,
            useClass: TreeLoader,
        },
    ],
})
export default class Example {
    protected readonly loading = inject(TUI_TREE_LOADING);
    protected readonly service = inject(TuiTreeService<Item>);

    protected map = new Map<Item, boolean>();

    protected childrenHandler: TuiHandler<Item, readonly Item[]> = (item) =>
        this.service.getChildren(item);

    protected onToggled(item: Item): void {
        this.service.loadChildren(item);
    }
}
```

#### Drag and drop

**Template:**
```html
<tui-tree class="tree" [childrenHandler]="handler" [class._dragged]="drag()" [content]="content" [tuiTreeController]="true" [value]="data" >
<ng-template #content let-value >
<ng-template #parent> {{ value.text }} </ng-template>
<div *ngIf="!value.children; else parent" class="wrapper" >
<div class="drop" (pointerup)="onDrop(value)" ></div>
<tui-tiles class="tiles">
<tui-tile>
<div tuiTileHandle class="content" (pointerdown)="onDrag(value)" > {{ value.text }} </div>
</tui-tile>
</tui-tiles>
<div class="drop" (pointerup)="onDrop(value, 1)" ></div>
</div>
</ng-template>
</tui-tree>
```
**TypeScript:**
```ts
import {NgIf} from '@angular/common';
import {ChangeDetectorRef, Component, inject, signal} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {EMPTY_ARRAY, type TuiHandler} from '@taiga-ui/cdk';
import {TuiTiles, TuiTree} from '@taiga-ui/kit';

interface TreeNode {
    children?: readonly TreeNode[];
    text: string;
}

@Component({
    standalone: true,
    imports: [NgIf, TuiTiles, TuiTree],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected drag = signal<TreeNode | null>(null);

    protected readonly cd = inject(ChangeDetectorRef);

    protected readonly data: TreeNode = {
        text: 'Topmost',
        children: [
            {
                text: 'Top level 1',
                children: [
                    {
                        text: 'Another item',
                        children: [
                            {text: 'Next level 1'},
                            {text: 'Next level 2'},
                            {text: 'Next level 3'},
                        ],
                    },
                ],
            },
            {text: 'Top level 2'},
            {
                text: 'Top level 3',
                children: [{text: 'Test 1'}, {text: 'Test 2'}],
            },
        ],
    };

    protected readonly handler: TuiHandler<TreeNode, readonly TreeNode[]> = (item) =>
        item.children || EMPTY_ARRAY;

    protected onDrag(drag: TreeNode): void {
        this.drag.set(drag);
    }

    protected onDrop(target: TreeNode, position = 0): void {
        const drag = this.drag();

        if (!drag) {
            return;
        }

        const dragParent = findParent(drag, this.data);
        const targetParent = findParent(target, this.data);

        if (dragParent) {
            dragParent.children = dragParent?.children?.filter((item) => item !== drag);
        }

        const index = (targetParent?.children?.indexOf(target) ?? 0) + position;

        if (targetParent?.children) {
            targetParent.children = [
                ...targetParent.children.slice(0, index),
                drag,
                ...targetParent.children.slice(index),
            ];
        }

        this.drag.set(null);
    }
}

function findParent(item: TreeNode, node: TreeNode): TreeNode | null {
    if (!node.children) {
        return null;
    }

    if (node.children.includes(item)) {
        return node;
    }

    for (const iterateItem of node.children) {
        const parent = findParent(item, iterateItem);

        if (parent) {
            return parent;
        }
    }

    return null;
}
```


### TypeScript

```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {DemoRoute} from '@demo/routes';
import {TuiDemo} from '@demo/utils';

@Component({
    standalone: true,
    imports: [TuiDemo],
    templateUrl: './index.html',
    changeDetection,
})
export default class Page {
    protected readonly example5 = {
        TypeScript: import('./examples/5/index.ts?raw'),
        HTML: import('./examples/5/index.html?raw'),
        LESS: import('./examples/5/index.less?raw'),
        'content.ts': import('./examples/5/content.ts?raw'),
        'content.less': import('./examples/5/content.less?raw'),
    };

    protected readonly routes = DemoRoute;
}
```

---
# utils/Browser
- **Package**: `CDK`
- **Type**: components/utils
A set of tools for work with browser

### How to Use (Import)

```ts
import {tuiIsEdge} from '@taiga-ui/cdk';
import {WA_USER_AGENT} from '@ng-web-apis/common';

// ...
export class Example {
  private readonly userAgent = inject(WA_USER_AGENT);

  areThereProblems = tuiIsEdge(this.userAgent);
}
// ...
```

### Usage Examples

#### Browser detection

**Template:**
```html
<label>
<b>Your browser is:</b>
</label>
<p>{{ aboutMyBrowser }}</p>
```
**TypeScript:**
```ts
import {Component, inject} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {WA_USER_AGENT} from '@ng-web-apis/common';
import {tuiInjectElement, tuiIsEdge, tuiIsFirefox, tuiIsSafari} from '@taiga-ui/cdk';

@Component({
    standalone: true,
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    private readonly userAgent = inject(WA_USER_AGENT);
    private readonly el = tuiInjectElement();

    protected get aboutMyBrowser(): string {
        if (tuiIsEdge(this.userAgent)) {
            return 'Edge';
        }

        if (tuiIsFirefox(this.userAgent)) {
            return 'Okay, you have Firefox!';
        }

        if (tuiIsSafari(this.el)) {
            return 'Okay, you have Safari!';
        }

        return 'You have Chromium based browser, cool!';
    }
}
```


### TypeScript

```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {TuiDemo} from '@demo/utils';

@Component({
    standalone: true,
    imports: [TuiDemo],
    templateUrl: './index.html',
    changeDetection,
})
export default class Page {
    protected readonly component = import('./examples/import/import.md?raw');
}
```

---
# utils/DOM utils
- **Package**: `CDK`
- **Type**: components/utils

### How to Use (Import)

```ts
import {isElementAtPoint} from '@taiga-ui/cdk';

//...
isAtPoint = isElementAtPoint(element, point.x, point.y);
//...
```

### TypeScript

```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {TuiDemo} from '@demo/utils';
import {TuiLink} from '@taiga-ui/core';

@Component({
    standalone: true,
    imports: [TuiDemo, TuiLink],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    changeDetection,
})
export default class Page {
    protected readonly component = import('./examples/import/import.md?raw');
}
```

### LESS

```less
@import '@taiga-ui/core/styles/taiga-ui-local';

.description-header {
    font: var(--tui-font-text-l);
    font-weight: bold;
    line-height: 2.875rem;
    block-size: 2.1875rem;
}
```

---
# utils/format
- **Package**: `CDK / CORE`
- **Type**: components/utils
A set of format utils

### Usage Examples

#### px

**Template:**
```html
'{{ px }}' = px(value); <form [formGroup]="parametersForm">
<div class="parameters">
<tui-textfield class="tui-space_top-2">
<label tuiLabel>value</label>
<input formControlName="value" tuiInputNumber />
</tui-textfield>
</div>
</form>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {FormControl, FormGroup, ReactiveFormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {tuiPx} from '@taiga-ui/cdk';
import {TuiTextfield} from '@taiga-ui/core';
import {TuiInputNumber} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [ReactiveFormsModule, TuiInputNumber, TuiTextfield],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected parametersForm = new FormGroup({
        value: new FormControl(11),
    });

    protected get px(): string {
        const {value} = this.parametersForm.value;

        return tuiPx(value ?? 0);
    }
}
```

#### getCurrencySymbol

**Template:**
```html
{{ currency }} = getCurrencySymbol(currency); <form [formGroup]="parametersForm">
<div class="parameters">
<tui-textfield tuiChevron class="tui-space_top-2" >
<label tuiLabel>currency</label>
<input formControlName="currency" tuiSelect />
<tui-data-list-wrapper *tuiTextfieldDropdown new [items]="items" />
</tui-textfield>
</div>
</form>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {FormControl, FormGroup, ReactiveFormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {type TuiCurrencyVariants, tuiGetCurrencySymbol} from '@taiga-ui/addon-commerce';
import {TuiTextfield} from '@taiga-ui/core';
import {TuiChevron, TuiDataListWrapper, TuiSelect} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [
        ReactiveFormsModule,
        TuiChevron,
        TuiDataListWrapper,
        TuiSelect,
        TuiTextfield,
    ],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly items = [
        'USD',
        'RUB',
        '643',
        'KZT',
        '051',
        'KRW',
        'CHF',
        'EUR',
        'GBP',
    ];

    protected parametersForm = new FormGroup({
        currency: new FormControl<TuiCurrencyVariants>(null),
    });

    protected get currency(): string | null {
        const {currency} = this.parametersForm.value;

        return currency ? tuiGetCurrencySymbol(currency) : null;
    }
}
```

#### formatNumber

**Template:**
```html
'{{ formattedNumber }}' = tuiFormatNumber(value, precision, decimalSeparator, thousandSeparator); <form [formGroup]="parametersForm">
<div class="parameters">
<tui-input formControlName="value" class="tui-space_top-2" > value </tui-input>
<tui-input formControlName="precision" class="tui-space_top-2" > precision </tui-input>
<tui-input formControlName="decimalSeparator" class="tui-space_top-2" > decimalSeparator </tui-input>
<tui-input formControlName="thousandSeparator" class="tui-space_top-2" > thousandSeparator </tui-input>
</div>
</form>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {FormControl, FormGroup, ReactiveFormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {type TuiDecimalSymbol, tuiFormatNumber} from '@taiga-ui/core';
import {TuiInputModule} from '@taiga-ui/legacy';

@Component({
    standalone: true,
    imports: [ReactiveFormsModule, TuiInputModule],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected parametersForm = new FormGroup({
        value: new FormControl(123456.789),
        precision: new FormControl(2),
        decimalSeparator: new FormControl<TuiDecimalSymbol>('.'),
        thousandSeparator: new FormControl(' '),
    });

    protected get formattedNumber(): string {
        const {value, precision, decimalSeparator, thousandSeparator} =
            this.parametersForm.value;

        return tuiFormatNumber(value ?? 123456.789, {
            precision: precision ?? 2,
            decimalSeparator: decimalSeparator ?? '.',
            thousandSeparator: thousandSeparator ?? ' ',
        });
    }
}
```


### TypeScript

```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {TuiDemo} from '@demo/utils';

@Component({
    standalone: true,
    imports: [TuiDemo],
    templateUrl: './index.html',
    changeDetection,
})
export default class Page {}
```

---
# utils/Math
- **Package**: `CDK`
- **Type**: components/utils
A set of utils to calculate math

### Usage Examples

#### round

**Template:**
```html
<p>{{ rounded }} = round(value, precision);</p>
<p>{{ floored }} = floor(value, precision);</p>
<p>{{ ceiled }} = ceil(value, precision);</p>
<form [formGroup]="parametersForm">
<div class="parameters">
<tui-textfield class="tui-space_top-2">
<label tuiLabel>value</label>
<input formControlName="value" tuiInputNumber [tuiNumberFormat]="{precision: 3}" />
</tui-textfield>
<tui-textfield class="tui-space_top-2">
<label tuiLabel>precision</label>
<input formControlName="precision" tuiInputNumber />
</tui-textfield>
</div>
</form>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {FormControl, FormGroup, ReactiveFormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {tuiCeil, tuiFloor, tuiRound} from '@taiga-ui/cdk';
import {TuiNumberFormat, TuiTextfield} from '@taiga-ui/core';
import {TuiInputNumber} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [ReactiveFormsModule, TuiInputNumber, TuiNumberFormat, TuiTextfield],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected parametersForm = new FormGroup({
        value: new FormControl(1.005),
        precision: new FormControl(2),
    });

    protected get rounded(): number {
        const {value, precision} = this.parametersForm.value;

        return tuiRound(value ?? 1.005, precision ?? 2);
    }

    protected get floored(): number {
        const {value, precision} = this.parametersForm.value;

        return tuiFloor(value ?? 1.005, precision ?? 2);
    }

    protected get ceiled(): number {
        const {value, precision} = this.parametersForm.value;

        return tuiCeil(value ?? 1.005, precision ?? 2);
    }
}
```

#### inRange

**Template:**
```html
{{ ranged }} = inRange(value, fromInclude, toExclude); <form [formGroup]="parametersForm">
<div class="parameters">
<tui-textfield *ngFor="let parameter of ['value', 'fromInclude', 'toExclude']" class="tui-space_top-2" >
<label tuiLabel>{{ parameter }}</label>
<input tuiInputNumber [formControlName]="parameter" />
</tui-textfield>
</div>
</form>
```
**TypeScript:**
```ts
import {NgForOf} from '@angular/common';
import {Component} from '@angular/core';
import {FormControl, FormGroup, ReactiveFormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {tuiInRange} from '@taiga-ui/cdk';
import {TuiTextfield} from '@taiga-ui/core';
import {TuiInputNumber} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [NgForOf, ReactiveFormsModule, TuiInputNumber, TuiTextfield],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected parametersForm = new FormGroup({
        value: new FormControl(13),
        fromInclude: new FormControl(5),
        toExclude: new FormControl(42),
    });

    protected get ranged(): boolean {
        const {value, fromInclude, toExclude} = this.parametersForm.value;

        return tuiInRange(value ?? 13, fromInclude ?? 5, toExclude ?? 42);
    }
}
```

#### normalizeToIntNumber

**Template:**
```html
{{ normalized }} = normalizeToIntNumber(value, min, max); <form [formGroup]="parametersForm">
<div class="parameters">
<tui-textfield *ngFor="let parameter of ['value', 'min', 'max']" class="tui-space_top-2" >
<label tuiLabel>{{ parameter }}</label>
<input tuiInputNumber [formControlName]="parameter" />
</tui-textfield>
</div>
</form>
```
**TypeScript:**
```ts
import {NgForOf} from '@angular/common';
import {Component} from '@angular/core';
import {FormControl, FormGroup, ReactiveFormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {tuiNormalizeToIntNumber} from '@taiga-ui/cdk';
import {TuiTextfield} from '@taiga-ui/core';
import {TuiInputNumber} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [NgForOf, ReactiveFormsModule, TuiInputNumber, TuiTextfield],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected parametersForm = new FormGroup({
        value: new FormControl(0),
        min: new FormControl(5),
        max: new FormControl(42),
    });

    protected get normalized(): number {
        const {value, min, max} = this.parametersForm.value;

        return tuiNormalizeToIntNumber(value ?? 0, min ?? 5, max ?? 42);
    }
}
```

#### quantize

**Template:**
```html
{{ quantized }} = quantize(value, quantum); <form [formGroup]="parametersForm">
<div class="parameters">
<tui-textfield *ngFor="let parameter of ['value', 'quantum']" class="tui-space_top-2" >
<label tuiLabel>{{ parameter }}</label>
<input tuiInputNumber [formControlName]="parameter" />
</tui-textfield>
</div>
</form>
```
**TypeScript:**
```ts
import {NgForOf} from '@angular/common';
import {Component} from '@angular/core';
import {FormControl, FormGroup, ReactiveFormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {tuiQuantize} from '@taiga-ui/cdk';
import {TuiTextfield} from '@taiga-ui/core';
import {TuiInputNumber} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [NgForOf, ReactiveFormsModule, TuiInputNumber, TuiTextfield],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected parametersForm = new FormGroup({
        value: new FormControl(3),
        quantum: new FormControl(2),
    });

    protected get quantized(): number {
        const {value, quantum} = this.parametersForm.value;

        return tuiQuantize(value ?? 3, quantum ?? 2);
    }
}
```

#### clamp

**Template:**
```html
{{ clamped }} = clamp(value, min, max); <form [formGroup]="parametersForm">
<div class="parameters">
<tui-textfield *ngFor="let parameter of ['value', 'min', 'max']" class="tui-space_top-2" >
<label tuiLabel>{{ parameter }}</label>
<input tuiInputNumber [formControlName]="parameter" />
</tui-textfield>
</div>
</form>
```
**TypeScript:**
```ts
import {NgForOf} from '@angular/common';
import {Component} from '@angular/core';
import {FormControl, FormGroup, ReactiveFormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {tuiClamp} from '@taiga-ui/cdk';
import {TuiTextfield} from '@taiga-ui/core';
import {TuiInputNumber} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [NgForOf, ReactiveFormsModule, TuiInputNumber, TuiTextfield],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected parametersForm = new FormGroup({
        value: new FormControl(0),
        min: new FormControl(5),
        max: new FormControl(42),
    });

    protected get clamped(): number {
        const {value, min, max} = this.parametersForm.value;

        return tuiClamp(value ?? 0, min ?? 5, max ?? 42);
    }
}
```


### TypeScript

```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {TuiDemo} from '@demo/utils';

@Component({
    standalone: true,
    imports: [TuiDemo],
    templateUrl: './index.html',
    changeDetection,
})
export default class Page {
    protected readonly component = import('./examples/import/component.md?raw');
}
```

---
# utils/Miscellaneous
- **Package**: `CDK`
- **Type**: components/utils
Some utils to simplify the development process

### Usage Examples

#### assert

**Template:**
```html
<p [innerHTML]="assertResult"></p>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';

@Component({
    standalone: true,
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    protected get assertResult(): string {
        const dayOfWeek = new Date().getDay();
        const isFriday = dayOfWeek === 5;

        ngDevMode && console.assert(isFriday, 'Today is not a friday');

        return isFriday
            ? 'Nothing in console'
            : 'There is a console assert: <br> "Today is not a friday"';
    }
}
```

#### flatLength

**Template:**
```html
<p>{{ flatted }} = flatLength([[1, 2], [3, 4], [5, 6]]);</p>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {tuiFlatLength} from '@taiga-ui/cdk';

@Component({
    standalone: true,
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    protected get flatted(): number {
        return tuiFlatLength([
            [1, 2],
            [3, 4],
            [5, 6],
        ]);
    }
}
```

#### getPaymentSystem

**Template:**
```html
'{{ paymentSystem }}' = getPaymentSystem(cardNumber); <form [formGroup]="parametersForm">
<tui-textfield tuiChevron class="parameters" [tuiTextfieldCleaner]="false" >
<input formControlName="cardNumber" placeholder="Choose card number" tuiSelect />
<tui-data-list-wrapper *tuiTextfieldDropdown new [items]="items" />
</tui-textfield>
</form>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {FormControl, FormGroup, ReactiveFormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {tuiGetPaymentSystem} from '@taiga-ui/addon-commerce';
import {TuiTextfield} from '@taiga-ui/core';
import {TuiChevron, TuiDataListWrapper, TuiSelect} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [
        ReactiveFormsModule,
        TuiChevron,
        TuiDataListWrapper,
        TuiSelect,
        TuiTextfield,
    ],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly items = [
        '6734567890123456',
        '5536567890123456',
        '2202567890123456',
        '4405567890123456',
        '4000567890123456',
    ];

    protected parametersForm = new FormGroup({
        cardNumber: new FormControl(''),
    });

    protected get paymentSystem(): string | null {
        const {cardNumber} = this.parametersForm.value;

        return tuiGetPaymentSystem(cardNumber ?? '');
    }
}
```

#### isPresent

**Template:**
```html
{{ isPresent }} = isPresent(value); <tui-textfield tuiChevron class="parameters" >
<label tuiLabel>value</label>
<input tuiSelect [(ngModel)]="value" />
<tui-data-list-wrapper *tuiTextfieldDropdown new [items]="items" />
</tui-textfield>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {tuiIsPresent} from '@taiga-ui/cdk';
import {TuiTextfield} from '@taiga-ui/core';
import {TuiChevron, TuiDataListWrapper, TuiSelect} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [FormsModule, TuiChevron, TuiDataListWrapper, TuiSelect, TuiTextfield],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly items = ['String', 'null', 'undefined'];
    protected value: 'null' | 'String' | 'undefined' | null = null;

    protected get isPresent(): boolean {
        return tuiIsPresent(this.objectifyValue(this.value ?? 'null'));
    }

    private objectifyValue(value: string): string | null | undefined {
        switch (value) {
            case 'null':
                return null;
            case 'undefined':
                return undefined;
            default:
                return value;
        }
    }
}
```

#### markControlAsTouchedAndValidate

**Template:**
```html
<form [formGroup]="userDetailsForm">
<p>
<tui-input formControlName="name">Name</tui-input>
<tui-error formControlName="name" [error]="[] | tuiFieldError | async" />
</p>
<div formGroupName="address">
<p>
<tui-input formControlName="street">Street</tui-input>
<tui-error formControlName="street" [error]="[] | tuiFieldError | async" />
</p>
<p>
<tui-input formControlName="zipCode">Zip code</tui-input>
<tui-error formControlName="zipCode" [error]="[] | tuiFieldError | async" />
</p>
<p>
<tui-input formControlName="city">City</tui-input>
<tui-error formControlName="city" [error]="[] | tuiFieldError | async" />
</p>
</div>
</form>
```
**TypeScript:**
```ts
import {AsyncPipe} from '@angular/common';
import {Component, type OnInit} from '@angular/core';
import {FormControl, FormGroup, ReactiveFormsModule, Validators} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {tuiMarkControlAsTouchedAndValidate} from '@taiga-ui/cdk';
import {TuiError} from '@taiga-ui/core';
import {TuiFieldErrorPipe} from '@taiga-ui/kit';
import {TuiInputModule} from '@taiga-ui/legacy';

@Component({
    standalone: true,
    imports: [
        AsyncPipe,
        ReactiveFormsModule,
        TuiError,
        TuiFieldErrorPipe,
        TuiInputModule,
    ],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example implements OnInit {
    protected userDetailsForm = new FormGroup({
        name: new FormControl('', Validators.required),
        address: new FormGroup({
            street: new FormControl('', Validators.required),
            city: new FormControl('', Validators.required),
            zipCode: new FormControl('', Validators.required),
        }),
    });

    public ngOnInit(): void {
        tuiMarkControlAsTouchedAndValidate(this.userDetailsForm);
    }
}
```


### TypeScript

```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {TuiDemo} from '@demo/utils';

@Component({
    standalone: true,
    imports: [TuiDemo],
    templateUrl: './index.html',
    changeDetection,
})
export default class Page {
    protected readonly component = import('./examples/import/component.md?raw');
}
```

---
# utils/Pure
- **Package**: `CDK`
- **Type**: components/utils
Decorator for memoization of pure methods and getters

        
            Decorator can help to cache result of methods or getters that can be computed once in the first call. The
            next calls to getter will just use computed static value.
        

        
            If you use decorator with methods, it does not compute the result again if arguments did not change after
            the last call (concept similar to Angular pure pipes)

### Usage Examples

#### Getter

**Template:**
```html
<div *ngIf="show" class="tui-space_bottom-2" > fibonacci(42) = {{ fibonacci42 }} </div>
<button tuiButton type="button" (click)="show = !show" > Show/hide </button>
```
**TypeScript:**
```ts
import {NgIf} from '@angular/common';
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {tuiPure} from '@taiga-ui/cdk';
import {TuiButton} from '@taiga-ui/core';

@Component({
    standalone: true,
    imports: [NgIf, TuiButton],
    templateUrl: './index.html',
    changeDetection,
})
export default class Example {
    protected show = false;

    @tuiPure
    protected get fibonacci42(): number {
        return this.fibonacci(42);
    }

    private fibonacci(num: number): number {
        return num <= 1 ? num : this.fibonacci(num - 1) + this.fibonacci(num - 2);
    }
}
```

#### Function

**Template:**
```html
<tui-input [(ngModel)]="text">Type a text to start computing</tui-input>
<div class="tui-space_top-2">Called times: {{ counter.count }}</div>
<div *ngIf="show" class="tui-space_top-2" > Result: {{ calculate(counter, text) | json }} </div>
<button tuiButton type="button" class="tui-space_top-2" (click)="show = !show" > Show/hide </button>
```
**TypeScript:**
```ts
import {JsonPipe, NgIf} from '@angular/common';
import {Component} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {tuiPure} from '@taiga-ui/cdk';
import {TuiButton} from '@taiga-ui/core';
import {TuiInputModule} from '@taiga-ui/legacy';

@Component({
    standalone: true,
    imports: [FormsModule, JsonPipe, NgIf, TuiButton, TuiInputModule],
    templateUrl: './index.html',
    changeDetection,
})
export default class Example {
    protected text = '';

    protected show = false;

    protected counter = {
        count: 0,
    };

    @tuiPure
    protected calculate(counter: {count: number}, text: string): {text: string} {
        counter.count++;

        return {
            text,
        };
    }
}
```


### TypeScript

```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {TuiDemo} from '@demo/utils';

@Component({
    standalone: true,
    imports: [TuiDemo],
    templateUrl: './index.html',
    changeDetection,
})
export default class Page {
    protected readonly example = import('./import/import.md?raw');
}
```

---
# utils/Tokens
- **Package**: `CDK`
- **Type**: components/utils

### Usage Examples

#### TUI_DIALOGS

**Template:**
```html
<p> A stream of modal dialogs displayed by <a tuiLink [routerLink]="routes.Dialog" > TuiDialogsComponent </a> . </p>
<p> You can create your own service extending <a tuiLink [routerLink]="routes.DialogCustom" > TuiPopoverService </a> to easily add another modal dialogs behavior to your application. </p>
```
**TypeScript:**
```ts
import {Component, inject} from '@angular/core';
import {RouterLink} from '@angular/router';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {DemoRoute} from '@demo/routes';
import {TUI_DIALOGS, TuiLink} from '@taiga-ui/core';

@Component({
    standalone: true,
    imports: [RouterLink, TuiLink],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly dialogs = inject(TUI_DIALOGS);
    protected readonly routes = DemoRoute;
}
```

#### TUI_IS_ANDROID

**Template:**
```html
<p> A token with a factory. It takes <a fragment="is-mobile" routerLink="." tuiLink > TUI_IS_MOBILE </a> and <a fragment="is-ios" routerLink="." tuiLink > TUI_IS_IOS </a> , returns true if the device is mobile but not iOS (technically includes Windows Phone, Blackberry etc.) </p>
```
**TypeScript:**
```ts
import {Component, inject} from '@angular/core';
import {RouterLink} from '@angular/router';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TUI_IS_ANDROID} from '@taiga-ui/cdk';
import {TuiLink} from '@taiga-ui/core';

@Component({
    standalone: true,
    imports: [RouterLink, TuiLink],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly isAndroid = inject(TUI_IS_ANDROID);
}
```

#### TUI_IS_IOS

**Template:**
```html
<p> A token with a factory. It takes <a fragment="is-mobile" routerLink="." tuiLink > TUI_IS_MOBILE </a> and if it is true detects iOS devices with a regex </p>
```
**TypeScript:**
```ts
import {Component, inject} from '@angular/core';
import {RouterLink} from '@angular/router';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TUI_IS_IOS} from '@taiga-ui/cdk';
import {TuiLink} from '@taiga-ui/core';

@Component({
    standalone: true,
    imports: [RouterLink, TuiLink],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly isIos = inject(TUI_IS_IOS);
}
```

#### TUI_IS_MOBILE

**Template:**
```html
<p> A token with a factory. It takes WA_USER_AGENT token and parses it with a complex Regex to detect users with mobile devices </p>
```
**TypeScript:**
```ts
import {Component, inject} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TUI_IS_MOBILE} from '@taiga-ui/cdk';

@Component({
    standalone: true,
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly isMobile = inject(TUI_IS_MOBILE);
}
```

#### TUI_NUMBER_FORMAT

**Template:**
```html
<div>
<div> Using <strong>TUI_NUMBER_FORMAT</strong> injection token you can customize numbers formatting. </div>
<div>For example: 10 500,33</div>
<div>Can be customized as: 10/500.33</div>
<section>
<h3>Defaults:</h3>
<ul class="tui-list tui-list_small">
<li class="tui-list__item"> decimalSeparator = <code>,</code>
</li>
<li class="tui-list__item"> thousandSeparator = <code>CHAR_NO_BREAK_SPACE</code>
</li>
<li class="tui-list__item"> zeroPadding = <code>true</code>
</li>
<li class="tui-list__item"> rounding = <code>truncate</code>
</li>
</ul>
</section>
<section>
<h3>Components that are customizable:</h3>
<ul class="tui-list tui-list_small">
<li class="tui-list__item">
<a tuiLink [routerLink]="routes.Amount" > TuiAmount </a>
</li>
<li class="tui-list__item">
<a tuiLink [routerLink]="routes.FormatNumber" > TuiFormatNumberPipe </a>
</li>
<li class="tui-list__item">
<a tuiLink [routerLink]="routes.InputNumber" > TuiInputNumberComponent </a>
</li>
<li class="tui-list__item">
<a tuiLink [routerLink]="routes.InputSlider" > TuiInputSliderComponent </a>
</li>
<li class="tui-list__item">
<a tuiLink [routerLink]="routes.InputRangeLegacy" > TuiInputRangeComponent </a>
</li>
</ul>
</section>
</div>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {RouterLink} from '@angular/router';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {DemoRoute} from '@demo/routes';
import {TuiLink} from '@taiga-ui/core';

@Component({
    standalone: true,
    imports: [RouterLink, TuiLink],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly routes = DemoRoute;
}
```

#### TUI_DATE_FORMAT

**Template:**
```html
<div>
<div> Using <strong>TUI_DATE_FORMAT</strong> injection token you can customize numbers formatting. </div>
<div>For example: 10.01.2024</div>
<div>Can be customized as: 2024/01/10</div>
<section>
<h3>Description:</h3>
<dl>
<dt>
<code>mode</code>
</dt>
<dd class="tui-space_bottom-5"> active date format ( <code>'DMY' | 'MDY' | 'YMD'</code> ) </dd>
<dt>
<code>separator</code>
</dt>
<dd>single-character date's separator (dot, slash etc.)</dd>
</dl>
</section>
<section>
<h3>Defaults:</h3>
<ul class="tui-list tui-list_small">
<li class="tui-list__item"> mode = <code>DMY</code>
</li>
<li class="tui-list__item"> separator = <code>.</code>
</li>
</ul>
</section>
<section>
<h3>Components that are customizable:</h3>
<ul class="tui-list tui-list_small">
<li class="tui-list__item">
<a tuiLink [routerLink]="routes.InputDateLegacy" > TuiInputDate </a>
</li>
<li class="tui-list__item">
<a tuiLink [routerLink]="routes.InputDateRangeLegacy" > TuiInputDateRange </a>
</li>
<li class="tui-list__item">
<a tuiLink [routerLink]="routes.InputDateTimeLegacy" > TuiInputDateTime </a>
</li>
<li class="tui-list__item">
<a tuiLink [routerLink]="routes.InputDateMultiLegacy" > TuiInputDateMulti </a>
</li>
</ul>
</section>
</div>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {RouterLink} from '@angular/router';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {DemoRoute} from '@demo/routes';
import {TuiLink} from '@taiga-ui/core';

@Component({
    standalone: true,
    imports: [RouterLink, TuiLink],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly routes = DemoRoute;
}
```

#### TUI_FIRST_DAY_OF_WEEK

**Template:**
```html
<p class="tui-space_top-0"> Use <code>TUI_FIRST_DAY_OF_WEEK</code> injection token to change start day of the week (Monday by default). </p>
<tui-doc-code [code]="provideFirstDayOfWeekToken" />
<section>
<h3>This token can customize the following components:</h3>
<ul class="tui-list tui-list_small">
<li *ngFor="let component of customizableComponentsViaThisToken" class="tui-list__item" >
<a tuiLink [fragment]="component.fragment" [routerLink]="component.link" > {{ component.name }} </a>
</li>
</ul>
</section>
```
**TypeScript:**
```ts
import {NgForOf} from '@angular/common';
import {Component} from '@angular/core';
import {RouterLink} from '@angular/router';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiDocCode} from '@taiga-ui/addon-doc';
import {TuiDayOfWeek} from '@taiga-ui/cdk';
import {TUI_FIRST_DAY_OF_WEEK, TuiLink} from '@taiga-ui/core';

@Component({
    standalone: true,
    imports: [NgForOf, RouterLink, TuiDocCode, TuiLink],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
    providers: [
        {
            provide: TUI_FIRST_DAY_OF_WEEK,
            useValue: TuiDayOfWeek.Sunday,
        },
    ],
})
export default class Example {
    protected readonly provideFirstDayOfWeekToken = import(
        './provide-first-day-of-week-token.md?raw'
    );

    protected readonly customizableComponentsViaThisToken = [
        {
            name: 'Calendar',
            link: '/components/calendar',
            fragment: 'localization',
        },
        {
            name: 'CalendarRange',
            link: '/components/calendar-range',
            fragment: 'localization',
        },
        {
            name: 'MobileCalendar',
            link: '/components/mobile-calendar',
            fragment: 'localization',
        },
    ] as const;
}
```


### TypeScript

```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {TuiDemo} from '@demo/utils';
import {TUI_DOC_CODE_EDITOR} from '@taiga-ui/addon-doc';

@Component({
    standalone: true,
    imports: [TuiDemo],
    templateUrl: './index.html',
    changeDetection,
    providers: [
        {
            provide: TUI_DOC_CODE_EDITOR,
            useValue: null,
        },
    ],
})
export default class Page {}
```

---
# directives/ActiveZone
- **Package**: `CDK`
- **Type**: directives
tuiActiveZone
            allows to track a scope that user interacts with. For example, for closing dropdown on blur

### How to Use (Import)

```ts
import {TuiActiveZone} from '@taiga-ui/cdk';

// ...

@Component({
  standalone: true,
  imports: [
    // ...
    TuiActiveZone,
  ],
  // ...
})
export class Example {
  active = false;

  onActiveZone(active: boolean) {
    this.active = active;
  }
}
```

### How to Use (Template)

```html
<div (tuiActiveZoneChange)="onActiveZone($event)">
  <button
    tuiButton
    type="button"
  >
    Button 1
  </button>
  <button
    tuiButton
    type="button"
  >
    Button 2
  </button>
</div>
```

### Usage Examples

#### Composite zone

**Template:**
```html
<p>Parent zone: {{ parentActive }}</p>
<p>Child zone: {{ childActive }}</p>
<p>
<input placeholder="input outside a zone" />
</p>
<div #parent="tuiActiveZone" class="active-zone" [class.active-zone_active]="parentActive" (tuiActiveZoneChange)="onParentActiveZone($event)" >
<h2>Parent zone</h2>
<button tuiButton type="button" > A button inside zone </button>
</div>
<p>
<button type="button">A button outside of zone</button>
</p>
<div class="active-zone" [class.active-zone_active]="childActive" [tuiActiveZoneParent]="parent" (tuiActiveZoneChange)="onChildActiveZone($event)" >
<h2>Child zone</h2>
<tui-input #input [formControl]="control" > Input inside zone </tui-input>
<p> You can bind different elements with <code>[tuiActiveZoneParent]</code> directive </p>
</div>
<p>
<input placeholder="input outside zone" />
<button type="button" (click)="onClick(input)" > Focus input in zone </button>
</p>
<p>Zone keeps active after browser tab change</p>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {FormControl, ReactiveFormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiActiveZone} from '@taiga-ui/cdk';
import {TuiButton} from '@taiga-ui/core';
import {type TuiInputComponent, TuiInputModule} from '@taiga-ui/legacy';

@Component({
    standalone: true,
    imports: [ReactiveFormsModule, TuiActiveZone, TuiButton, TuiInputModule],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly control = new FormControl('');

    protected childActive = false;

    protected parentActive = false;

    protected items = [1, 2, 3];

    protected onParentActiveZone(active: boolean): void {
        this.parentActive = active;
    }

    protected onChildActiveZone(active: boolean): void {
        this.childActive = active;
    }

    protected onClick({nativeFocusableElement}: TuiInputComponent): void {
        if (nativeFocusableElement) {
            nativeFocusableElement.focus();
        }
    }
}
```

#### Dialogs

**Template:**
```html
<p>Zone: {{ active }}</p>
<p>
<tui-textfield>
<label tuiLabel>I'm outside</label>
<input tuiTextfield />
</tui-textfield>
</p>
<div class="active-zone" [class.active-zone_active]="active" (tuiActiveZoneChange)="onZone($event)" >
<h2>Zone</h2>
<button tuiButton type="button" (click)="onClick()" > Show dialog </button>
</div>
<p>
<button tuiButton type="button" > I'm outside too </button>
</p>
```
**TypeScript:**
```ts
import {Component, inject} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiActiveZone} from '@taiga-ui/cdk';
import {TuiButton, TuiDialogService, TuiTextfield} from '@taiga-ui/core';

@Component({
    standalone: true,
    imports: [TuiActiveZone, TuiButton, TuiTextfield],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    private readonly dialog = inject(TuiDialogService);

    protected active = false;

    protected onZone(active: boolean): void {
        console.info(active);
        this.active = active;
    }

    protected onClick(): void {
        this.dialog
            .open(
                'Dialogs automatically attach themselves to the currently active zone',
                {label: "I'm inside", size: 's'},
            )
            .subscribe();
    }
}
```


### TypeScript

```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {TuiDemo} from '@demo/utils';

@Component({
    standalone: true,
    imports: [TuiDemo],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    changeDetection,
})
export default class Page {}
```

### LESS

```less
.dropdown {
    max-inline-size: 20rem;
    padding: 0.5rem 1.25rem;
}
```

---
# directives/Animated
- **Package**: `CDK`
- **Type**: directives
TuiAnimated
            allows adding animation to DOM elements.

### How to Use (Import)

```ts
import {TuiAnimated} from '@taiga-ui/cdk';

// ...

@Component({
  standalone: true,
  import: [
    // ...
    TuiAnimated,
  ],
  // ...
})
export class Example {}
```

### How to Use (Template)

```html
<span
  *ngIf="isOpen"
  tuiAnimated
>
  Active
</span>
```

### Usage Examples

#### Usage

**Template:**
```html
<button appearance="outline" tuiButton type="button" class="button" (click)="isOpen = !isOpen" > {{ isOpen ? 'Hide me' : 'Show opening crawl' }} </button>
<div *ngIf="isOpen" tuiAnimated class="container" > A long time ago in a galaxy far, far away.... </div>
```
**TypeScript:**
```ts
import {NgIf} from '@angular/common';
import {Component} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiAnimated} from '@taiga-ui/cdk';
import {TuiAppearance, TuiButton} from '@taiga-ui/core';

@Component({
    standalone: true,
    imports: [FormsModule, NgIf, TuiAnimated, TuiAppearance, TuiButton],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected isOpen = false;
}
```


### TypeScript

```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {TuiDemo} from '@demo/utils';

@Component({
    standalone: true,
    imports: [TuiDemo],
    templateUrl: './index.html',
    changeDetection,
})
export default class Page {
    protected readonly exampleImport = import('./examples/import/import.md?raw');

    protected readonly exampleTemplate = import('./examples/import/template.md?raw');

    protected readonly exampleStyle = import('./examples/import/style.md?raw');
}
```

---
# directives/Appearance
- **Package**: `CORE`
- **Type**: directives
A directive for visual presets of interactive components

### How to Use (Import)

```ts
import {Component} from '@angular/core';
import {TuiAppearance} from '@taiga-ui/core';
// ...

@Component({
  standalone: true,
  imports: [
    // ...
    TuiAppearance,
  ],
})
export class Example {}
```

### How to Use (Template)

```html
<button
  tuiButton
  tuiAppearance="secondary"
>
  Press me
</button>
```

### Example

```html
<button tuiButton type="button" [appearance]="appearance" [tuiAppearanceFocus]="focus" [tuiAppearanceState]="state" > Appearance </button>
```

### API

| Property | Type | Description |
|----------|-----|----------|
| tuiAppearance | `string` | Appearance (use appearance selector instead of tuiAppearance when used on a component that has such input due to hostDirectives ) |
| tuiAppearanceFocus | `boolean | null` | Manual override of focused state |
| tuiAppearanceState | `TuiInteractiveState | null` | Manual override of interactive state |

### Usage Examples

#### Basic

**Template:**
```html
<div tuiAppearance="secondary" type="button" > Non-interactive elements do not react to pointer </div>
<button tuiAppearance="secondary" type="button" > Hovered state is only triggered on devices with pointer </button>
<button tuiAppearance="secondary" tuiDropdown="Button looks hovered when dropdown is open" type="button" [tuiAppearanceState]="open ? 'hover' : null" [(tuiDropdownOpen)]="open" > Triggering state manually </button>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiAppearance, TuiDropdown} from '@taiga-ui/core';

@Component({
    standalone: true,
    imports: [TuiAppearance, TuiDropdown],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected open = false;
}
```

#### Custom

**Template:**
```html
<button tuiAppearance="acid" type="button" > SCSS mixins have the same names </button>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiAppearance} from '@taiga-ui/core';

@Component({
    standalone: true,
    imports: [TuiAppearance],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {}
```

#### Checkbox

**Template:**
```html
<input tuiAppearance="secondary" type="checkbox" class="like" />
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiAppearance} from '@taiga-ui/core';

@Component({
    standalone: true,
    imports: [TuiAppearance],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {}
```

#### Bundled

**Template:**
```html
<ng-container *ngFor="let group of appearances | keyvalue: asIs">
<h3>{{ group.key }}</h3>
<section class="section">
<button *ngFor="let appearance of group.value" iconStart="@tui.star" tuiButton type="button" [appearance]="appearance" [cdkCopyToClipboard]="appearance" (cdkCopyToClipboardCopied)="$event && onCopy(appearance)" > {{ appearance }} </button>
</section>
</ng-container>
```
**TypeScript:**
```ts
import {ClipboardModule} from '@angular/cdk/clipboard';
import {KeyValuePipe, NgForOf} from '@angular/common';
import {Component, inject} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiAlertService, TuiButton} from '@taiga-ui/core';

@Component({
    standalone: true,
    imports: [ClipboardModule, KeyValuePipe, NgForOf, TuiButton],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    private readonly alerts = inject(TuiAlertService);

    protected readonly appearances = {
        Primary: ['primary', 'primary-destructive', 'primary-grayscale'],
        Secondary: ['secondary', 'secondary-destructive', 'secondary-grayscale'],
        Flat: ['flat', 'flat-destructive', 'flat-grayscale'],
        Outline: ['outline', 'outline-destructive', 'outline-grayscale'],
        Action: ['action', 'action-destructive', 'action-grayscale'],
        Status: ['neutral', 'negative', 'positive', 'warning', 'info'],
        Others: ['icon', 'floating', 'textfield', 'glass', 'accent'],
    };

    protected asIs(): number {
        return 0;
    }

    protected onCopy(name: string): void {
        this.alerts
            .open(`Appearance ${name} copied`, {appearance: 'positive'})
            .subscribe();
    }
}
```


### TypeScript

```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {TuiDemo} from '@demo/utils';
import {TuiButton, type TuiInteractiveState} from '@taiga-ui/core';

@Component({
    standalone: true,
    imports: [TuiButton, TuiDemo],
    templateUrl: './index.html',
    changeDetection,
})
export default class Page {
    protected examples = ['Basic', 'Custom', 'Checkbox', 'Bundled'];
    protected descriptions = [
        'Interactive elements react to pointer natively but you can override state with inputs',
        'Use LESS or SCSS mixins to create your own appearances in global styles',
        'You can use it on input[type="checkbox"] to create a custom toggle component easily',
        'You can create your own appearances or use one of the bundled options',
    ];

    protected appearances = ['primary', 'secondary', 'flat'];
    protected appearance = this.appearances[0]!;

    protected states: readonly TuiInteractiveState[] = ['hover', 'active', 'disabled'];
    protected state: TuiInteractiveState | null = null;

    protected focus: boolean | null = null;
}
```

---
# directives/AutoFocus
- **Package**: `CDK`
- **Type**: directives
tuiAutoFocus
            allows to focus HTML-element right after its appearance. It works also with focusable Taiga UI components

### How to Use (Import)

```ts
@Component({
  standalone: true,
  imports: [
    // ...
    TuiAutoFocus,
  ],
  providers: [
    tuiAutoFocusOptionsProvider({
      delay: 300, // NaN = no delay/sync
      preventScroll: true,
    }),
  ],
})
export class Example {}
```

### How to Use (Template)

```html
<!-- Usual HTML element -->
<div
  tuiAutoFocus
  tabindex="0"
></div>

<!-- Or focusable component of Taiga UI -->
<tui-input
  tuiAutoFocus
  [(ngModel)]="model"
>
  Input
</tui-input>
```

### Usage Examples

#### Basic

**Template:**
```html
<button tuiButton type="button" class="tui-space_bottom-5" (click)="onClick()" > Show input </button>
<tui-input *ngIf="showInput" tuiAutoFocus [(ngModel)]="model" > Focusable tui-input </tui-input>
```
**TypeScript:**
```ts
import {NgIf} from '@angular/common';
import {Component} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiAutoFocus} from '@taiga-ui/cdk';
import {TuiButton} from '@taiga-ui/core';
import {TuiInputModule} from '@taiga-ui/legacy';

@Component({
    standalone: true,
    imports: [FormsModule, NgIf, TuiAutoFocus, TuiButton, TuiInputModule],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    protected showInput = false;
    protected model = 'Focused after its appearance';

    protected onClick(): void {
        this.showInput = true;
    }
}
```


### TypeScript

```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {TuiDemo} from '@demo/utils';
import {TuiLink} from '@taiga-ui/core';

@Component({
    standalone: true,
    imports: [TuiDemo, TuiLink],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    changeDetection,
})
export default class Page {}
```

### LESS

```less
.t-image {
    inline-size: 100%;
}
```

---
# directives/Comment
- **Package**: `KIT`
- **Type**: directives

### How to Use (Import)

```ts
import {Component} from '@angular/core';
import {TuiComment} from '@taiga-ui/kit';
// ...

@Component({
  standalone: true,
  imports: [
    // ...
    TuiComment,
  ],
})
export class Example {}
```

### How to Use (Template)

```html
<div tuiComment="bottom">comment</div>
```

### Usage Examples

#### Basic

**Template:**
```html
<span tuiComment>Birthday gift</span>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiComment} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [TuiComment],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {}
```

#### Customization

**Template:**
```html
<div tuiComment="top">Good job</div>
<div tuiComment="bottom" class="success" > Cashback </div>
<div tuiComment="left" class="primary" > Extra payment </div>
<div tuiComment="right">Check it out</div>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiComment} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [TuiComment],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {}
```


### TypeScript

```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {TuiDemo} from '@demo/utils';

@Component({
    standalone: true,
    imports: [TuiDemo],
    templateUrl: './index.html',
    changeDetection,
})
export default class Page {}
```

---
# directives/CopyProcessor
- **Package**: `CDK`
- **Type**: directives
Directive is used to processed text when coping

### How to Use (Import)

```ts
import {TuiCopyProcessor} from '@taiga-ui/core';

// ...

@Component({
  standalone: true,
  imports: [
    // ...
    TuiCopyProcessor,
  ],
  // ...
})
export class Example {}
```

### How to Use (Template)

```html
<span [tuiCopyProcessor]="processor">
  ...
</div>
```

### Usage Examples

#### Usage

**Template:**
```html
<tui-textfield class="tui-space_bottom-2">
<label tuiLabel>Copy this</label>
<input tuiInputNumber [tuiCopyProcessor]="(numberProcessor$ | async)!" [(ngModel)]="value" />
</tui-textfield>
<div [tuiCopyProcessor]="textProcessor">Try copy this text</div>
```
**TypeScript:**
```ts
import {AsyncPipe} from '@angular/common';
import {Component, inject} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiCopyProcessor, type TuiStringHandler} from '@taiga-ui/cdk';
import {TUI_NUMBER_FORMAT, TuiAlertService, TuiTextfield} from '@taiga-ui/core';
import {TuiInputNumber} from '@taiga-ui/kit';
import {map} from 'rxjs';

@Component({
    standalone: true,
    imports: [AsyncPipe, FormsModule, TuiCopyProcessor, TuiInputNumber, TuiTextfield],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
    host: {
        '(copy)': 'onCopy($event)',
    },
})
export default class Example {
    private readonly alerts = inject(TuiAlertService);

    protected value = 12345.67;

    protected numberProcessor$ = inject(TUI_NUMBER_FORMAT).pipe(
        map(
            ({decimalSeparator, thousandSeparator}) =>
                (text: string) =>
                    text.replace(decimalSeparator, '.').replaceAll(thousandSeparator, ''),
        ),
    );

    protected onCopy(event: ClipboardEvent): void {
        this.alerts.open(event.clipboardData?.getData('text/plain') ?? '').subscribe();
    }

    protected readonly textProcessor: TuiStringHandler<string> = (text) =>
        text.toUpperCase();
}
```


### TypeScript

```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {TuiDemo, TuiDocSetup} from '@demo/utils';

@Component({
    standalone: true,
    imports: [TuiDemo, TuiDocSetup],
    templateUrl: './index.html',
    changeDetection,
})
export default class Page {}
```

---
# directives/DateFormat
- **Package**: `CORE`
- **Type**: directives
Directive allows to customize
            TuiInputDate
            ,
            TuiInputDateRange
            ,
            TuiInputDateMulti
            and
            TuiInputDateTime
            date format.

### How to Use (Import)

```ts
import {TuiDateFormat} from '@taiga-ui/core';

// ...

@Component({
  standalone: true,
  imports: [
    // ...
    TuiDateFormat,
  ],
  // ...
})
export class Example {}
```

### How to Use (Template)

```html
<tui-input-date [tuiDateFormat]="{mode, separator}"></tui-input-date>
```

### Usage Examples

#### Basic

**Template:**
```html
<!-- Works in several levels-->
<div class="wrapper tui-space_top-3" [tuiDateFormat]="{mode: 'YMD'}" >
<!-- You can also put directive directly on input-date -->
<tui-input-date [formControl]="control" [tuiDateFormat]="{separator: '-'}" > Cool <input tuiTextfieldLegacy />
</tui-input-date>
</div>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {FormControl, ReactiveFormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiDateFormat} from '@taiga-ui/core';
import {TuiInputDateModule} from '@taiga-ui/legacy';

@Component({
    standalone: true,
    imports: [ReactiveFormsModule, TuiDateFormat, TuiInputDateModule],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly control = new FormControl();
}
```


### TypeScript

```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {TuiDemo} from '@demo/utils';

@Component({
    standalone: true,
    imports: [TuiDemo],
    templateUrl: './index.html',
    changeDetection,
})
export default class Page {}
```

---
# directives/Dropdown
- **Package**: `CORE`
- **Type**: directives
tuiDropdown
            shows a dropdown with custom template. Use
            
                ActiveZone
            
            directive to hide dropdown.
        

        
            See also
            
                DropdownOpen

### How to Use (Import)

```ts
import {TuiDropdown} from '@taiga-ui/core';

// ...

@Component({
  standalone: true,
  imports: [
    // ...
    TuiDropdown,
  ],
  // ...
})
export class Example {}
```

### How to Use (Template)

```html
<div
  [tuiDropdown]="dropdownContent"
  [tuiDropdownManual]="open"
>
  Host element
</div>

<ng-template #dropdownContent>Dropdown content</ng-template>
```

### Example

```html
<span (tuiActiveZoneChange)="onActiveZone($event)">
<button tuiButton type="button" [tuiDropdown]="dropdownContent" [tuiDropdownAlign]="dropdown.align" [tuiDropdownDirection]="dropdown.direction" [tuiDropdownLimitWidth]="dropdown.limitWidth" [tuiDropdownManual]="open" [tuiDropdownMaxHeight]="dropdown.maxHeight" [tuiDropdownMinHeight]="dropdown.minHeight" [tuiDropdownOffset]="dropdown.offset" [tuiDropdownSided]="dropdown.dropdownSided" [tuiDropdownSidedOffset]="dropdown.dropdownSidedOffset" (click)="onClick()" (tuiObscured)="onObscured($event)" > PRESS! <i>* There is also a pretty long text to check its width limitations</i>
</button>
<ng-template #dropdownContent>
<div [style.padding.rem]="1"> Here can be any content <p>You can even insert other components:</p>
<button tuiButton type="button" > Do not touch! </button>
<p>Everything you want... *</p>
<sub>* except cases of human rights violation</sub>
</div>
</ng-template>
</span>
```

### API

| Property | Type | Description |
|----------|-----|----------|
| [tuiDropdownManual] | `boolean` | Show dropdown (basic manual implementation, see related pages for other options) |
| [tuiDropdown] | `PolymorpheusContent` | Content |

### Usage Examples

#### Basic

**Template:**
```html
<button tuiButton tuiChevron type="button" [tuiDropdown]="dropdownContent" [tuiDropdownManual]="open" [tuiObscuredEnabled]="open" (click)="onClick()" (tuiActiveZoneChange)="onActiveZone($event)" (tuiObscured)="onObscured($event)" > Choose <ng-template #dropdownContent>
<div class="dropdown">But there is nothing to choose...</div>
</ng-template>
</button>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiActiveZone, TuiObscured} from '@taiga-ui/cdk';
import {TuiButton, TuiDropdown} from '@taiga-ui/core';
import {TuiChevron} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [TuiActiveZone, TuiButton, TuiChevron, TuiDropdown, TuiObscured],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected open = false;

    protected onClick(): void {
        this.open = !this.open;
    }

    protected onObscured(obscured: boolean): void {
        if (obscured) {
            this.open = false;
        }
    }

    protected onActiveZone(active: boolean): void {
        this.open = active && this.open;
    }
}
```

#### Interesting

**Template:**
```html
<p>
<label class="toggle">
<input tuiSwitch type="checkbox" [(ngModel)]="open" /> Show help </label>
</p> You can ask any questions about <code tuiDropdown="A directive to show content in a dropdown" tuiDropdownDirection="bottom" [textContent]="'tuiDropdown'" [tuiDropdownManual]="open" ></code> and <button tuiDropdownDirection="top" tuiLink type="button" [tuiDropdown]="dropdownContent" [tuiDropdownManual]="open" > Alex </button> will gladly answer! <ng-template #dropdownContent>
<div class="dropdown">
<tui-avatar size="l" [src]="avatarUrl" />
<div class="text">
<div class="label">Taiga UI developer</div>
<div class="name">Alex Inkin</div>
<div class="account">a.inkin</div>
</div>
</div>
</ng-template>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {assets} from '@demo/utils';
import {TuiDropdown, TuiLink} from '@taiga-ui/core';
import {TuiAvatar, TuiSwitch} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [FormsModule, TuiAvatar, TuiDropdown, TuiLink, TuiSwitch],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected open = false;
    protected avatarUrl = assets`/images/avatar.jpg`;
}
```

#### Change detection

**Template:**
```html
<tui-input [(ngModel)]="value">Changes propagate both ways</tui-input>
<label class="flex" [tuiDropdown]="dropdownContent" [tuiDropdownManual]="open" >
<input size="s" tuiSwitch type="checkbox" [showIcons]="false" [(ngModel)]="open" /> Open dropdown </label>
<ng-template #dropdownContent="polymorpheus" polymorpheus >
<div class="dropdown">
<tui-input [(ngModel)]="value">Changes propagate both ways</tui-input>
<p> Use <code>polymorpheus</code> directive on the template to make changes propagate both ways </p>
<p *ngIf="showBigText$ | async"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab assumenda at corporis ea hic illo ipsa laboriosam laudantium nemo neque officiis pariatur quidem quos rerum sunt, temporibus tenetur ullam vitae? </p>
</div>
</ng-template>
```
**TypeScript:**
```ts
import {AsyncPipe, NgIf} from '@angular/common';
import {Component} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiDropdown} from '@taiga-ui/core';
import {TuiSwitch} from '@taiga-ui/kit';
import {TuiInputModule} from '@taiga-ui/legacy';
import {PolymorpheusOutlet, PolymorpheusTemplate} from '@taiga-ui/polymorpheus';
import {interval, map} from 'rxjs';

@Component({
    standalone: true,
    imports: [
        AsyncPipe,
        FormsModule,
        NgIf,
        PolymorpheusOutlet,
        PolymorpheusTemplate,
        TuiDropdown,
        TuiInputModule,
        TuiSwitch,
    ],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected open = false;

    protected value = 'some data';

    protected showBigText$ = interval(3000).pipe(map((i) => !(i % 2)));
}
```

#### Appearance

**Template:**
```html
<label tuiDropdownAlign="center" tuiDropdownAppearance="round" tuiDropdownDirection="top" tuiLabel [tuiDropdown]="content" [tuiDropdownManual]="open" >
<input tuiSwitch type="checkbox" class="tui-space_right-2" [showIcons]="false" [(ngModel)]="open" /> Show dropdown <ng-template #content>
<blockquote>I'm a customized dropdown!</blockquote>
</ng-template>
</label>
```
**TypeScript:**
```ts
import {Component, ViewEncapsulation} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {TuiDropdown, TuiLabel} from '@taiga-ui/core';
import {TuiSwitch} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [FormsModule, TuiDropdown, TuiLabel, TuiSwitch],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation: ViewEncapsulation.None,
    changeDetection,
})
export default class Example {
    protected open = false;
}
```

#### Mobile

**Template:**
```html
<tui-combo-box tuiDropdownMobile [tuiTextfieldCleaner]="true" [(ngModel)]="country" > Country <tui-data-list-wrapper *tuiDataList [items]="countries$ | async | tuiFilterByInput" />
</tui-combo-box>
<tui-textfield tuiChevron tuiDropdownMobile="Select user" class="tui-space_vertical-4" [content]="template" >
<input placeholder="Select user" tuiSelect [(ngModel)]="user" />
<tui-data-list-wrapper *tuiTextfieldDropdown new [itemContent]="template" [items]="users" />
</tui-textfield>
<tui-multi-select tuiDropdownMobile class="tui-space_vertical-4" [stringify]="stringify" [tuiDropdownOpen]="open()" [tuiTextfieldCleaner]="true" [tuiTextfieldLabelOutside]="true" [(ngModel)]="selected" (tuiDropdownOpenChange)="open.set($event)" > Pick more users <ng-container *tuiDataList>
<tui-data-list-wrapper tuiMultiSelectGroup [itemContent]="template" [items]="users | tuiFilterByInput" />
<button appearance="accent" size="m" tuiButton tuiDropdownButton type="button" (click)="open.set(false)" > Done </button>
</ng-container>
</tui-multi-select>
<tui-textfield class="tui-space_vertical-4">
<label tuiLabel>Sum</label>
<input prefix="$" tuiInputNumber [(ngModel)]="sum" />
</tui-textfield>
<ng-template #template let-user >
<span tuiCell>
<tui-avatar [src]="user.url" />
<span tuiTitle>
<span tuiFade>{{ user.name }}</span>
<span tuiSubtitle> {{ user.balance | tuiAmount: '$' : 'left' | async }} </span>
</span>
</span>
</ng-template>
```
**TypeScript:**
```ts
import {AsyncPipe} from '@angular/common';
import {Component, inject, signal} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {assets} from '@demo/utils';
import {TuiAmountPipe} from '@taiga-ui/addon-commerce';
import {TuiDropdownMobile} from '@taiga-ui/addon-mobile';
import {TuiButton, TuiDropdown, TuiTextfield, TuiTitle} from '@taiga-ui/core';
import {
    TUI_COUNTRIES,
    TuiAvatar,
    TuiChevron,
    TuiDataListWrapper,
    TuiFade,
    TuiFilterByInputPipe,
    TuiInputNumber,
    TuiSelect,
} from '@taiga-ui/kit';
import {TuiCell} from '@taiga-ui/layout';
import {
    TuiComboBoxModule,
    TuiMultiSelectModule,
    TuiTextfieldControllerModule,
} from '@taiga-ui/legacy';
import {map} from 'rxjs';

interface User {
    readonly url: string;
    readonly name: string;
    readonly balance: number;
}

@Component({
    standalone: true,
    imports: [
        AsyncPipe,
        FormsModule,
        TuiAmountPipe,
        TuiAvatar,
        TuiButton,
        TuiCell,
        TuiChevron,
        TuiComboBoxModule,
        TuiDataListWrapper,
        TuiDropdown,
        TuiDropdownMobile,
        TuiFade,
        TuiFilterByInputPipe,
        TuiInputNumber,
        TuiMultiSelectModule,
        TuiSelect,
        TuiTextfield,
        TuiTextfieldControllerModule,
        TuiTitle,
    ],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    protected country = null;
    protected selected: readonly User[] = [];
    protected sum = null;
    protected user: User | null = null;

    protected readonly open = signal(false);

    protected readonly countries$ = inject(TUI_COUNTRIES).pipe(map(Object.values));

    protected readonly users: readonly User[] = [
        {name: 'Alex Inkin', balance: 1323525, url: assets`/images/avatar.jpg`},
        {name: 'Roman Sedov', balance: 523242, url: 'RS'},
        {name: 'Vladimir Potekhin', balance: 645465, url: 'VP'},
        {name: 'Nikita Barsukov', balance: 468468, url: 'NB'},
        {name: 'Maxim Ivanov', balance: 498654, url: 'MI'},
    ];

    protected readonly stringify = ({name}: User): string => name;
}
```


### TypeScript

```ts
import {Component, forwardRef} from '@angular/core';
import {TuiDocDropdown} from '@demo/components/dropdown';
import {changeDetection} from '@demo/emulate/change-detection';
import {DemoRoute} from '@demo/routes';
import {TuiDemo} from '@demo/utils';
import {TuiActiveZone, TuiObscured} from '@taiga-ui/cdk';
import {TuiButton, TuiDropdown} from '@taiga-ui/core';

import {ABSTRACT_PROPS_ACCESSOR} from '../../components/abstract/abstract-props-accessor';
import {AbstractExampleTuiDropdown} from '../../components/abstract/dropdown';
import {DropdownDocumentation} from '../../components/abstract/dropdown-documentation';

@Component({
    standalone: true,
    imports: [
        DropdownDocumentation,
        TuiActiveZone,
        TuiButton,
        TuiDemo,
        TuiDocDropdown,
        TuiDropdown,
        TuiObscured,
    ],
    templateUrl: './index.html',
    changeDetection,
    providers: [
        {
            provide: ABSTRACT_PROPS_ACCESSOR,
            useExisting: forwardRef(() => PageComponent),
        },
    ],
})
export default class PageComponent extends AbstractExampleTuiDropdown {
    protected readonly routes = DemoRoute;
    protected readonly examples = [
        'Basic',
        'Interesting',
        'Change detection',
        'Appearance',
        'Mobile',
    ];

    protected open = false;

    protected onClick(): void {
        this.open = !this.open;
    }

    protected onObscured(obscured: boolean): void {
        if (obscured) {
            this.open = false;
        }
    }

    protected onActiveZone(active: boolean): void {
        this.open = active && this.open;
    }
}
```

---
# directives/DropdownContext
- **Package**: `CORE`
- **Type**: directives
DropdownContext
            allows to show custom right click context dropdown.
        
        To close dropdown:
        
            
                Use
                Esc
            
            
                Make
                mouse left/right click
                outside of dropdown content
            
            
                Manually toggle
                tuiDropdown
                to
                false
                using template reference variable (see first example)

### How to Use (Import)

```ts
import {TuiDropdown} from '@taiga-ui/core';

// ...

@Component({
  standalone: true,
  imports: [
    // ...
    TuiDropdown,
  ],
  // ...
})
export class Example {}
```

### How to Use (Template)

```html
<div
  tuiDropdownContext
  [tuiDropdown]="content"
>
  Host element
</div>

<ng-template
  #content
  let-close
>
  Dropdown content
  <button (click)="close()"></button>
</ng-template>
```

### Example

```html
<p tuiDropdownContext [tuiDropdown]="dropdownContent" [tuiDropdownAlign]="dropdown.align" [tuiDropdownDirection]="dropdown.direction" [tuiDropdownMaxHeight]="dropdown.maxHeight" [tuiDropdownMinHeight]="dropdown.minHeight" [tuiDropdownOffset]="dropdown.offset" [tuiDropdownSided]="dropdown.dropdownSided" [tuiDropdownSidedOffset]="dropdown.dropdownSidedOffset" > Right click on me to <strong>see a dropdown</strong>
<ng-template #dropdownContent>Hello there!</ng-template>
</p>
```

### API

| Property | Type | Description |
|----------|-----|----------|
| [tuiDropdown] | `PolymorpheusContent` | Content |

### Usage Examples

#### Basic

**Template:**
```html
<p> Make right click on this icon ->
<tui-icon #dropdown="tuiDropdown" icon="@tui.settings" tuiDropdownContext class="icon" [tuiDropdown]="content" >
<ng-template #content>
<span class="text">Nothing special</span>
<button appearance="icon" iconStart="@tui.x" size="xs" tuiIconButton type="button" (click)="dropdown.toggle(false)" > Close </button>
</ng-template>
</tui-icon>
</p>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiButton, TuiDropdown, TuiIcon} from '@taiga-ui/core';

@Component({
    standalone: true,
    imports: [TuiButton, TuiDropdown, TuiIcon],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {}
```

#### Context menu

**Template:**
```html
<p>Right-click any table row.</p>
<table tuiTable>
<thead tuiTHead>
<tr tuiThGroup>
<th *ngFor="let column of tableColumns" tuiTh > {{ column }} </th>
</tr>
</thead>
<tbody tuiTbody>
<tr *ngFor="let rowInfo of tableData" #dropdown="tuiDropdown" tuiDropdownContext [tuiDropdown]="contextMenu" >
<td *ngFor="let value of getObjectValues(rowInfo)" tuiTd > {{ value }} </td>
<ng-template #contextMenu>
<tui-data-list role="menu" tuiDataListDropdownManager class="context-menu" >
<button *ngFor="let item of menuItems" tuiOption type="button" (click)="printToConsole(item.title, rowInfo); dropdown.toggle(false)" > {{ item.title }} <tui-icon class="icon" [icon]="item.iconName" />
</button>
<button iconEnd="@tui.chevron-right" tuiDropdownAlign="right" tuiDropdownSided tuiOption type="button" [tuiDropdown]="nestedMenu" > More </button>
</tui-data-list>
<ng-template #nestedMenu>
<tui-data-list>
<button *ngFor="let option of moreOptions" tuiOption type="button" > {{ option }} </button>
</tui-data-list>
</ng-template>
</ng-template>
</tr>
</tbody>
</table>
```
**TypeScript:**
```ts
import {NgForOf} from '@angular/common';
import {Component, inject} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiTable} from '@taiga-ui/addon-table';
import {TuiDataList, TuiDialogService, TuiDropdown, TuiIcon} from '@taiga-ui/core';
import {TuiDataListDropdownManager} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [
        NgForOf,
        TuiDataList,
        TuiDataListDropdownManager,
        TuiDropdown,
        TuiIcon,
        TuiTable,
    ],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    private readonly dialogs = inject(TuiDialogService);

    protected readonly menuItems = [
        {title: 'View', iconName: '@tui.eye'},
        {title: 'Copy', iconName: '@tui.copy'},
        {title: 'Delete', iconName: '@tui.trash'},
        {title: 'Move', iconName: '@tui.folder'},
    ] as const;

    protected readonly tableData = [
        {character: 'Ross Geller', actor: 'David Schwimmer'},
        {character: 'Chandler Bing', actor: 'Matthew Perry'},
        {character: 'Joey Tribbiani', actor: 'Matt LeBlanc'},
        {character: 'Phoebe Buffay', actor: 'Lisa Kudrow'},
        {character: 'Monica Geller', actor: 'Courteney Cox'},
        {character: 'Rachel Green', actor: 'Jennifer Aniston'},
    ] as const;

    protected readonly tableColumns = Object.keys(this.tableData[0]);

    protected readonly moreOptions = ['Option 1', 'Option 2', 'Option 3'];

    protected getObjectValues = (obj: Record<string, unknown>): unknown[] =>
        Object.values(obj);

    protected printToConsole(action: string, contextInfo: unknown): void {
        this.dialogs.open(`[${action}]: ${JSON.stringify(contextInfo)}`).subscribe();
    }
}
```

#### Report mistake form

**Template:**
```html
<p tuiDropdownContext [tuiDropdown]="reportForm" > Some text with a mistake. Right-click it. </p>
<p tuiDropdownContext [tuiDropdown]="reportForm" > Another text </p>
<ng-template #reportForm let-close >
<form class="container" [formGroup]="testForm" >
<tui-textfield>
<label tuiLabel>Have you found a mistake?</label>
<textarea formControlName="reportText" tuiTextarea [max]="3" [min]="3" ></textarea>
</tui-textfield>
<button tuiButton type="button" class="button" (click)="report(); close()" > SEND IT </button>
</form>
</ng-template>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {FormControl, FormGroup, ReactiveFormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiButton, TuiDropdown, TuiTextfield} from '@taiga-ui/core';
import {TuiTextarea} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [ReactiveFormsModule, TuiButton, TuiDropdown, TuiTextarea, TuiTextfield],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected testForm = new FormGroup({
        reportText: new FormControl('Misspell HERE!'),
    });

    protected report(): void {
        console.info(this.testForm.value);
    }
}
```


### TypeScript

```ts
import {Component, forwardRef} from '@angular/core';
import {TuiDocDropdown} from '@demo/components/dropdown';
import {changeDetection} from '@demo/emulate/change-detection';
import {TuiDemo} from '@demo/utils';
import {TuiDropdown} from '@taiga-ui/core';

import {ABSTRACT_PROPS_ACCESSOR} from '../../components/abstract/abstract-props-accessor';

@Component({
    standalone: true,
    imports: [TuiDemo, TuiDocDropdown, TuiDropdown],
    templateUrl: './index.html',
    changeDetection,
    providers: [
        {
            provide: ABSTRACT_PROPS_ACCESSOR,
            useExisting: forwardRef(() => PageComponent),
        },
    ],
})
export default class PageComponent {}
```

---
# directives/DropdownHover
- **Package**: `CORE`
- **Type**: directives
DropdownHover
            shows dropdown with custom template upon hover

### How to Use (Import)

```ts
import {TuiDropdown} from '@taiga-ui/core';

// ...

@Component({
  standalone: true,
  imports: [
    // ...
    TuiDropdown,
  ],
  // ...
})
export class Example {}
```

### How to Use (Template)

```html
<div
  tuiDropdownHover
  [tuiDropdown]="content"
>
  Host element
</div>

<ng-template #content>Dropdown content</ng-template>
```

### Example

```html
<p tuiDropdownHover [tuiDropdown]="dropdownContent" [tuiDropdownAlign]="dropdown.align" [tuiDropdownDirection]="dropdown.direction" [tuiDropdownHideDelay]="hideDelay" [tuiDropdownLimitWidth]="dropdown.limitWidth" [tuiDropdownMaxHeight]="dropdown.maxHeight" [tuiDropdownMinHeight]="dropdown.minHeight" [tuiDropdownOffset]="dropdown.offset" [tuiDropdownShowDelay]="showDelay" [tuiDropdownSided]="dropdown.dropdownSided" [tuiDropdownSidedOffset]="dropdown.dropdownSidedOffset" > Hover pointer over <strong>to see a dropdown</strong>
</p>
<ng-template #dropdownContent>
<div [style.padding.rem]="1"> Here you can have any content <p>You can select a text inside a dropdown and it will not close a dropdown</p>
<button tuiButton type="button" > Button </button>
</div>
</ng-template>
```

### API

| Property | Type | Description |
|----------|-----|----------|
| [tuiDropdown] | `PolymorpheusContent` | Content |
| [tuiDropdownShowDelay] | `number` | Show delay for dropdown appearance after hover |
| [tuiDropdownHideDelay] | `number` | Show delay for dropdown appearance after hover |

### Usage Examples

#### Basic

**Template:**
```html
<span tuiDropdown="Great Scott!" tuiDropdownHover > This is heavy! </span>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiDropdown} from '@taiga-ui/core';

@Component({
    standalone: true,
    imports: [TuiDropdown],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {}
```

#### With DropdownOpen

**Template:**
```html
<nav tuiTabs [(activeItemIndex)]="index" >
<button tuiTab type="button" > Just a tab </button>
<button tuiChevron tuiDropdownHover tuiTab type="button" [tuiDropdown]="content" [(tuiDropdownOpen)]="open" (tui-tab-activate.stop)="(0)" > Hoverable/Clickable <ng-template #content>
<tui-data-list (click)="onClick()">
<button tuiOption type="button" > Option 1 </button>
<button tuiOption type="button" > Option 2 </button>
<button tuiOption type="button" > Option 3 </button>
</tui-data-list>
</ng-template>
</button>
<button tuiTab type="button" > Another tab </button>
<button iconStart="@tui.settings" title="Open settings" tuiDropdownHover tuiTab type="button" [tuiDropdown]="settings" [(tuiDropdownOpen)]="openSettings" (tui-tab-activate.stop)="(0)" ></button>
<ng-template #settings>
<div class="settings" [formGroup]="testForm" >
<input formControlName="option" tuiSwitch type="checkbox" /> Turn option </div>
</ng-template>
</nav>
<p>Current state: {{ open ? 'open' : 'closed' }}</p>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {FormControl, FormGroup, ReactiveFormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiDataList, TuiDropdown} from '@taiga-ui/core';
import {TuiChevron, TuiSwitch, TuiTabs} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [
        ReactiveFormsModule,
        TuiChevron,
        TuiDataList,
        TuiDropdown,
        TuiSwitch,
        TuiTabs,
    ],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly testForm = new FormGroup({
        option: new FormControl(false),
    });

    protected open = false;
    protected openSettings = false;

    protected index = 0;

    protected onClick(): void {
        this.open = false;
        this.index = 1;
    }
}
```

#### Nested

**Template:**
```html
<button tuiButton tuiDropdownHover type="button" [tuiDropdown]="dropdown" [(tuiDropdownOpen)]="open" > Dropdown hover <ng-template #dropdown>
<div [style.padding]="'0 1rem'">
<tui-textfield tuiChevron class="margin" [tuiTextfieldCleaner]="false" >
<label tuiLabel>Nested select</label>
<input tuiSelect [formControl]="selected" />
<tui-data-list-wrapper *tuiTextfieldDropdown new [items]="selectItems" />
</tui-textfield>
<p>
<button size="s" tuiButton tuiDropdownHover tuiDropdownOpen type="button" [tuiDropdown]="content" > Nested dropdown hover </button>
<ng-template #content>
<p class="tui-space_horizontal-2">Nested content!</p>
</ng-template>
</p>
</div>
<tui-data-list>
<button *ngFor="let item of items" tuiOption type="button" > {{ item }} </button>
</tui-data-list>
</ng-template>
</button>
```
**TypeScript:**
```ts
import {NgForOf} from '@angular/common';
import {Component} from '@angular/core';
import {FormControl, ReactiveFormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiButton, TuiDataList, TuiDropdown, TuiTextfield} from '@taiga-ui/core';
import {TuiChevron, TuiDataListWrapper, TuiSelect} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [
        NgForOf,
        ReactiveFormsModule,
        TuiButton,
        TuiChevron,
        TuiDataList,
        TuiDataListWrapper,
        TuiDropdown,
        TuiSelect,
        TuiTextfield,
    ],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly items = ['Edit', 'Download', 'Rename', 'Delete'];

    protected readonly selectItems = ['Item 1', 'Item 2'];

    protected open = false;

    protected selected = new FormControl<string | null>(null);
}
```

#### With custom host

**Template:**
```html
<div tuiDropdown="Dropdown content" tuiDropdownHover tuiDropdownLimitWidth="fixed" tuiDropdownOpen tuiGroup >
<button tuiButton type="button" > Won't open here </button>
<button #tuiDropdownHost tuiButton type="button" > Will open here </button>
</div>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiButton, TuiDropdown, TuiGroup} from '@taiga-ui/core';

@Component({
    standalone: true,
    imports: [TuiButton, TuiDropdown, TuiGroup],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {}
```

#### With DropdownMobile

**Template:**
```html
<button appearance="outline-grayscale" iconStart="@tui.ellipsis" tuiDropdownHover tuiDropdownMobile="Contact Us" tuiIconButton type="button" [tuiDropdown]="dropdown" > More </button>
<ng-template #dropdown>
<tui-data-list>
<a href="https://github.com/taiga-family/taiga-ui" iconStart="assets/icons/github.svg" new rel="noreferrer" target="_blank" tuiOption > GitHub </a>
<a href="https://t.me/taiga_ui" iconStart="assets/icons/telegram.svg" new rel="noreferrer" target="_blank" tuiOption > Telegram </a>
<a href="https://discord.gg/zrB2EdJjEy" iconStart="assets/icons/discord.svg" new rel="noreferrer" target="_blank" tuiOption > Discord </a>
</tui-data-list>
</ng-template>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiDropdownMobile} from '@taiga-ui/addon-mobile';
import {TuiButton, TuiDataList, TuiDropdown} from '@taiga-ui/core';

@Component({
    standalone: true,
    imports: [TuiButton, TuiDataList, TuiDropdown, TuiDropdownMobile],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {}
```


### TypeScript

```ts
import {Component, forwardRef} from '@angular/core';
import {TuiDocDropdown} from '@demo/components/dropdown';
import {changeDetection} from '@demo/emulate/change-detection';
import {TuiDemo} from '@demo/utils';
import {TuiButton, TuiDropdown} from '@taiga-ui/core';

import {ABSTRACT_PROPS_ACCESSOR} from '../../components/abstract/abstract-props-accessor';

@Component({
    standalone: true,
    imports: [TuiButton, TuiDemo, TuiDocDropdown, TuiDropdown],
    templateUrl: './index.html',
    changeDetection,
    providers: [
        {
            provide: ABSTRACT_PROPS_ACCESSOR,
            useExisting: forwardRef(() => PageComponent),
        },
    ],
})
export default class PageComponent {
    protected showDelay = 200;

    protected hideDelay = 500;
}
```

---
# directives/DropdownOpen
- **Package**: `CORE`
- **Type**: directives
DropdownOpen
            is a composite dropdown directive, similar to manual dropdown, but it also takes care of opening and closing
            on its own.
        

        
            If an element is a textfield (
            input
            or
            textarea
            ), arrow down press opens a dropdown. The next press focuses the first item from the list.
        

        
            If it is not a textfield, click opens and closes a dropdown. By default directive is applied to the first
            focusable element inside. If you want another element to be the host, use
            #tuiDropdownHost
            reference.

### How to Use (Import)

```ts
import {TuiDropdown} from '@taiga-ui/core';
// ...

@Component({
  standalone: true,
  imports: [
    // ...
    TuiDropdown,
  ],
  // ...
})
export class Example {}
```

### How to Use (Template)

```html
<button
  tuiButton
  type="button"
  [tuiDropdown]="dropdown"
  [(tuiDropdownOpen)]="open"
>
  Open menu
  <ng-template #dropdown>
    <tui-data-list>
      <button
        *ngFor="let item of items"
        tuiOption
        (click)="onClick()"
      >
        {{item}}
      </button>
    </tui-data-list>
  </ng-template>
</button>
```

### Example

```html
<tui-input class="input" [ngModel]="input" [tuiDropdown]="template ? dropdownContent : content" [tuiDropdownAlign]="dropdown.align" [tuiDropdownDirection]="dropdown.direction" [tuiDropdownEnabled]="enabled" [tuiDropdownLimitWidth]="dropdown.limitWidth" [tuiDropdownMaxHeight]="dropdown.maxHeight" [tuiDropdownMinHeight]="dropdown.minHeight" [tuiDropdownOffset]="dropdown.offset" [tuiDropdownSided]="dropdown.dropdownSided" [tuiDropdownSidedOffset]="dropdown.dropdownSidedOffset" [(tuiDropdownOpen)]="open" (ngModelChange)="onInput($event)" > Start typing </tui-input>
```

### API

| Property | Type | Description |
|----------|-----|----------|
| [tuiDropdown] | `PolymorpheusContent` | Content inside a dropdown |
| [(tuiDropdownOpen)] | `boolean` | Content inside a dropdown |

### Usage Examples

#### Menu

**Template:**
```html
<button appearance="flat" iconEnd="@tui.chevron-right" size="m" tuiButton tuiDropdownAlign="right" type="button" [tuiAppearanceState]="open ? 'active' : null" [tuiDropdown]="dropdown" [tuiDropdownSided]="true" [(tuiDropdownOpen)]="open" > Button </button>
<ng-template #dropdown let-close >
<tui-data-list>
<tui-opt-group>
<button *ngFor="let item of items" tuiOption type="button" (click)="onClick()" > {{ item }} </button>
</tui-opt-group>
<tui-opt-group>
<button tuiOption type="button" (click)="close()" > Nevermind </button>
</tui-opt-group>
</tui-data-list>
</ng-template>
```
**TypeScript:**
```ts
import {NgForOf} from '@angular/common';
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiButton, TuiDataList, TuiDropdown} from '@taiga-ui/core';
import {TuiStep} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [NgForOf, TuiButton, TuiDataList, TuiDropdown, TuiStep],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly items = ['Edit', 'Download', 'Rename', 'Delete'];

    protected open = false;

    protected onClick(): void {
        this.open = false;
    }
}
```

#### With custom host

**Template:**
```html
<div tuiDropdownLimitWidth="fixed" tuiGroup [tuiDropdown]="dropdown" [(tuiDropdownOpen)]="open" >
<button size="l" tuiButton type="button" > Button that does not open dropdown </button>
<button #tuiDropdownHost size="l" tuiChevron tuiIconButton type="button" [style.flex]="'0 0 auto'" > Menu </button>
</div>
<ng-template #dropdown>
<tui-textfield tuiChevron class="margin" >
<label tuiLabel>Nested Select</label>
<input tuiSelect [(ngModel)]="selected" />
<tui-data-list-wrapper *tuiTextfieldDropdown new [items]="selectItems" />
</tui-textfield>
<tui-data-list>
<button *ngFor="let item of items" tuiOption type="button" (click)="onClick()" > {{ item }} </button>
</tui-data-list>
</ng-template>
```
**TypeScript:**
```ts
import {NgForOf} from '@angular/common';
import {Component} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {
    TuiButton,
    TuiDataList,
    TuiDropdown,
    TuiGroup,
    TuiTextfield,
} from '@taiga-ui/core';
import {TuiChevron, TuiDataListWrapper, TuiSelect} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [
        FormsModule,
        NgForOf,
        TuiButton,
        TuiChevron,
        TuiDataList,
        TuiDataListWrapper,
        TuiDropdown,
        TuiGroup,
        TuiSelect,
        TuiTextfield,
    ],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly items = ['Edit', 'Download', 'Rename', 'Delete'];

    protected readonly selectItems = ['Item 1', 'Item 2'];

    protected open = false;

    protected selected = null;

    protected onClick(): void {
        this.open = false;
    }
}
```

#### With link

**Template:**
```html
<button tuiChevron tuiDropdownAlign="right" tuiLink type="button" class="link" [iconStart]="ascending ? '@tui.chevron-up' : '@tui.chevron-down'" [textContent]="primary" [tuiDropdown]="dropdown" [(tuiDropdownOpen)]="open" ></button>
<ng-template #dropdown>
<tui-data-list>
<tui-opt-group *ngFor="let group of items">
<button *ngFor="let item of group" tuiOption type="button" class="item" (click)="onClick(item)" > {{ item }} <tui-icon *ngIf="itemIsActive(item)" icon="@tui.check" />
</button>
</tui-opt-group>
</tui-data-list>
</ng-template>
```
**TypeScript:**
```ts
import {NgForOf, NgIf} from '@angular/common';
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiDataList, TuiDropdown, TuiIcon, TuiLink} from '@taiga-ui/core';
import {TuiChevron, TuiStep} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [
        NgForOf,
        NgIf,
        TuiChevron,
        TuiDataList,
        TuiDropdown,
        TuiIcon,
        TuiLink,
        TuiStep,
    ],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected open = false;

    protected readonly items = [
        ['By interest', 'By genre', 'By release year', 'By subject'],
        ['Ascending', 'Descending'],
    ];

    protected primary = 'By genre';

    protected ascending = false;

    protected onClick(item: string): void {
        if (this.items[0]?.includes(item)) {
            this.primary = item;

            return;
        }

        this.ascending = item === this.items[1]?.[0];
    }

    protected itemIsActive(item: string): boolean {
        return (
            item === this.primary ||
            (this.ascending && item === this.items[1]?.[0]) ||
            (!this.ascending && item === this.items[1]?.[1])
        );
    }
}
```

#### Complex example

**Template:**
```html
<form [formGroup]="form">
<button appearance="outline-grayscale" tuiButton type="button" [tuiAppearanceMode]="length ? 'checked' : null" [tuiDropdown]="dropdown" [(tuiDropdownOpen)]="open" (keydown.delete)="form.reset()" > {{ text }} <button appearance="icon" size="xs" tabindex="-1" tuiChevron tuiIconButton type="reset" [iconStart]="length ? '@tui.x' : ''" (mousedown.zoneless.prevent)="(0)" > Reset </button>
</button>
<ng-template #dropdown>
<tui-data-list-wrapper formControlName="control" tuiMultiSelectGroup [items]="items" />
</ng-template>
</form>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {FormControl, FormGroup, ReactiveFormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiButton, TuiDropdown} from '@taiga-ui/core';
import {TuiChevron, TuiDataListWrapper} from '@taiga-ui/kit';
import {TuiMultiSelectModule} from '@taiga-ui/legacy';

@Component({
    standalone: true,
    imports: [
        ReactiveFormsModule,
        TuiButton,
        TuiChevron,
        TuiDataListWrapper,
        TuiDropdown,
        TuiMultiSelectModule,
    ],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly form = new FormGroup({
        control: new FormControl<string[]>([]),
    });

    protected open = false;

    protected readonly items = ['Drafts', 'In Progress', 'Completed'];

    protected get length(): number {
        return this.value.length || 0;
    }

    protected get text(): string {
        switch (this.length) {
            case 0:
                return 'Select';
            case 1:
                return this.value[0] ?? '';
            default:
                return `${this.length} selected`;
        }
    }

    private get value(): readonly string[] {
        return this.form.get('control')?.value || [];
    }
}
```

#### Custom positioning

**Template:**
```html
<button iconStart="@tui.arrow-up-right" size="s" topRight tuiDropdownOpen tuiIconButton type="button" [tuiDropdown]="content" > Show details </button>
<ng-template #content>
<div class="dropdown">
<h2 class="tui-text_h6">Custom positioning</h2> You can achieve this with <code>tuiAsPositionAccessor</code> helper and a custom directive </div>
</ng-template>
```
**TypeScript:**
```ts
import {Component, Directive} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {tuiInjectElement} from '@taiga-ui/cdk';
import {
    tuiAsPositionAccessor,
    TuiButton,
    TuiDropdown,
    TuiDropdownOpen,
    type TuiPoint,
    TuiPositionAccessor,
} from '@taiga-ui/core';

@Directive({
    standalone: true,
    selector: '[topRight]',
    providers: [tuiAsPositionAccessor(TopRightDirective)],
})
class TopRightDirective extends TuiPositionAccessor {
    private readonly el = tuiInjectElement();

    public readonly type = 'dropdown';

    public getPosition({height}: DOMRect): TuiPoint {
        const {right, top} = this.el.getBoundingClientRect();

        return [top - height, right];
    }
}

@Component({
    standalone: true,
    imports: [TopRightDirective, TuiButton, TuiDropdown, TuiDropdownOpen],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {}
```


### TypeScript

```ts
import {Component, forwardRef} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {TuiDocDropdown} from '@demo/components/dropdown';
import {changeDetection} from '@demo/emulate/change-detection';
import {TuiDemo} from '@demo/utils';
import {TuiButton, TuiDropdown} from '@taiga-ui/core';
import {TuiInputModule} from '@taiga-ui/legacy';

import {ABSTRACT_PROPS_ACCESSOR} from '../../components/abstract/abstract-props-accessor';

@Component({
    standalone: true,
    imports: [
        FormsModule,
        TuiButton,
        TuiDemo,
        TuiDocDropdown,
        TuiDropdown,
        TuiInputModule,
    ],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    changeDetection,
    providers: [
        {
            provide: ABSTRACT_PROPS_ACCESSOR,
            useExisting: forwardRef(() => PageComponent),
        },
    ],
})
export default class PageComponent {
    protected open = false;

    protected input = '';

    protected enabledVariants = [true, 'getter this.input.length > 2'];

    protected enabledSelected = this.enabledVariants[0]!;

    protected readonly contentVariants = ['Template', 'Custom string'];

    protected content = this.contentVariants[0]!;

    protected get template(): boolean {
        return this.content === 'Template';
    }

    protected get enabled(): boolean {
        return this.enabledSelected === true || this.input.length > 2;
    }

    protected onInput(input: string): void {
        this.input = input;
        this.open = this.enabled;
    }

    protected onClick(): void {
        this.open = false;
    }
}
```

### LESS

```less
.input {
    inline-size: 15.625rem;
}

.dropdown {
    padding: 1.25rem;
}

.buttons {
    display: flex;
    margin-block-end: 0;
}

.button {
    flex: 1;

    &:first-child {
        margin-inline-end: 0.75rem;
    }
}
```

---
# directives/DropdownSelection
- **Package**: `CORE`
- **Type**: directives
DropdownSelection
            shows dropdown with custom template on selected text

### How to Use (Import)

```ts
import {TuiDropdown} from '@taiga-ui/core';

// ...

@Component({
  standalone: true,
  imports: [
    // ...
    TuiDropdown,
  ],
  // ...
})
export class Example {}
```

### How to Use (Template)

```html
<div
  tuiDropdownSelection
  [tuiDropdown]="content"
>
  Host element
</div>

<ng-template #content>Dropdown content</ng-template>
```

### Example

```html
<p tuiDropdownSelection [tuiDropdown]="dropdownContent" [tuiDropdownAlign]="dropdown.align" [tuiDropdownDirection]="dropdown.direction" [tuiDropdownMaxHeight]="dropdown.maxHeight" [tuiDropdownMinHeight]="dropdown.minHeight" [tuiDropdownOffset]="dropdown.offset" [tuiDropdownSelectionPosition]="position" [tuiDropdownSided]="dropdown.dropdownSided" [tuiDropdownSidedOffset]="dropdown.dropdownSidedOffset" > Select a text to <strong>see a dropdown</strong>
</p>
<ng-template #dropdownContent>
<div class="dropdown"> Here you can have any content <p>You can select a text inside a dropdown and it will not close a dropdown</p>
<button tuiButton type="button" > Button </button>
</div>
</ng-template>
```

### API

| Property | Type | Description |
|----------|-----|----------|
| [tuiDropdownSelection] | `TuiBooleanHandler<Range>` | and returns show/close dropdown |
| [tuiDropdownSelectionPosition] | `'selection' | 'word' | 'tag'` | Position of dropdown near text selection |

### Usage Examples

#### Sample

**Template:**
```html
Dropdown will be shown text selection: <p tuiDropdown="&nbsp;&nbsp;Dropdown text&nbsp;&nbsp;" tuiDropdownSelection tuiDropdownSelectionPosition="selection" > Select a text to see dropdown </p>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiDropdown} from '@taiga-ui/core';

@Component({
    standalone: true,
    imports: [TuiDropdown],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {}
```

#### textarea

**Template:**
```html
<tui-textfield tuiDropdownLimitWidth="auto" tuiDropdownSelectionPosition="word" [tuiDropdownSelection]="predicate" >
<label tuiLabel>Type a message</label>
<textarea tuiTextarea [focused]="(driver | async) || null" [max]="4" [min]="4" [(ngModel)]="value" (keydown.stop.arrowDown)="onArrow($event, 'first')" (keydown.stop.arrowUp)="onArrow($event, 'last')" ></textarea>
<tui-data-list *tuiTextfieldDropdown>
<button *ngFor="let item of items | tuiMapper: filter : search.replace('@', '')" new tuiOption type="button" (click)="onClick(item.login)" >
<tui-avatar size="s" [src]="item.avatar" > {{ item.name | tuiInitials }} </tui-avatar> {{ item.name }} </button>
</tui-data-list>
</tui-textfield>
```
**TypeScript:**
```ts
import {AsyncPipe, NgForOf} from '@angular/common';
import {
    Component,
    ElementRef,
    type QueryList,
    ViewChild,
    ViewChildren,
} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {assets} from '@demo/utils';
import {
    EMPTY_QUERY,
    type TuiBooleanHandler,
    type TuiMapper,
    TuiMapperPipe,
} from '@taiga-ui/cdk';
import {
    TuiDataList,
    TuiDriver,
    TuiDropdown,
    tuiGetWordRange,
    TuiInitialsPipe,
    TuiOptionNew,
    TuiTextfield,
} from '@taiga-ui/core';
import {TuiAvatar, TuiTextarea} from '@taiga-ui/kit';
import {TuiTextareaModule} from '@taiga-ui/legacy';
import {type Observable} from 'rxjs';

export interface User {
    readonly avatar: string;
    readonly login: string;
    readonly name: string;
}

@Component({
    standalone: true,
    imports: [
        AsyncPipe,
        FormsModule,
        NgForOf,
        TuiAvatar,
        TuiDataList,
        TuiDropdown,
        TuiInitialsPipe,
        TuiMapperPipe,
        TuiTextarea,
        TuiTextareaModule,
        TuiTextfield,
    ],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    @ViewChildren(TuiOptionNew, {read: ElementRef})
    private readonly options: QueryList<ElementRef<HTMLElement>> = EMPTY_QUERY;

    @ViewChild(TuiTextarea, {read: ElementRef})
    private readonly textarea?: ElementRef<HTMLTextAreaElement>;

    @ViewChild(TuiDriver)
    protected readonly driver?: Observable<boolean>;

    protected value = 'Type @ to see a dropdown';

    protected readonly items = [
        {
            name: 'Alexander Inkin',
            avatar: assets`/images/avatar.jpg`,
            login: 'a.inkin',
        },
        {
            name: 'Roman Sedov',
            avatar: '',
            login: 'r.sedov',
        },
    ];

    protected get search(): string {
        const el = this.textarea?.nativeElement;

        return el?.value.slice(el.value.indexOf('@'), el.selectionStart) || '';
    }

    protected readonly filter: TuiMapper<[readonly User[], string], readonly User[]> = (
        items,
        search,
    ) =>
        items.filter(
            ({name, login}) => login.startsWith(search) || name.startsWith(search),
        );

    protected predicate: TuiBooleanHandler<Range> = (range) =>
        String(tuiGetWordRange(range)).startsWith('@');

    protected onArrow(event: Event, which: 'first' | 'last'): void {
        const item = this.options[which];

        if (!item) {
            return;
        }

        event.preventDefault();
        item.nativeElement.focus();
    }

    protected onClick(login: string): void {
        if (!this.textarea) {
            return;
        }

        const search = this.search;
        const value = this.value.replace(search, login);
        const caret = value.indexOf(login) + login.length;

        this.value = value;
        this.textarea.nativeElement.focus();
        this.textarea.nativeElement.value = value;
        this.textarea.nativeElement.setSelectionRange(caret, caret);
    }
}
```


### TypeScript

```ts
import {Component, forwardRef} from '@angular/core';
import {TuiDocDropdown} from '@demo/components/dropdown';
import {changeDetection} from '@demo/emulate/change-detection';
import {TuiDemo} from '@demo/utils';
import {TuiButton, TuiDropdown} from '@taiga-ui/core';

import {ABSTRACT_PROPS_ACCESSOR} from '../../components/abstract/abstract-props-accessor';

@Component({
    standalone: true,
    imports: [TuiButton, TuiDemo, TuiDocDropdown, TuiDropdown],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    changeDetection,
    providers: [
        {
            provide: ABSTRACT_PROPS_ACCESSOR,
            useExisting: forwardRef(() => PageComponent),
        },
    ],
})
export default class PageComponent {
    protected positionVariants = ['selection', 'word', 'tag'] as const;

    protected position: 'selection' | 'tag' | 'word' = this.positionVariants[0];
}
```

### LESS

```less
.dropdown {
    max-inline-size: 20rem;
    padding: 0.5rem 1.25rem;
}
```

---
# directives/ElasticSticky
- **Package**: `ADDON-MOBILE`
- **Type**: directives
Directive allows to scale "stuck" sticky heading. It can also be used as service
            TuiElasticStickyService

### How to Use (Import)

```ts
import {TuiElasticSticky} from '@taiga-ui/addon-mobile';
import {TuiScrollbar} from '@taiga-ui/core';

// ...

@Component({
  standalone: true,
  imports: [
    // ...
    TuiScrollbar,
    TuiElasticSticky,
  ],
  // ...
})
export class Example {
  scale = 1;

  // ...

  onElastic(scale: number) {
    this.scale = clamp(scale, 0.5, 1); // We do not want to scale below 50%
  }
}
```

### How to Use (Template)

```html
<tui-scrollbar>
  <header (tuiElasticSticky)="onElastic($event)">I'm sticky</header>
  ...
</tui-scrollbar>
```

### Usage Examples

#### Basic

**Template:**
```html
<tui-scrollbar class="scrollbar">
<p>I never wanted to do this in the first place!</p>
<header tuiElasticSticky class="header" >
<div class="wrapper">
<span class="money" [style.fontSize.em]="scale$ | async" > {{ 237000 | tuiAmount: 'RUB' | async }} </span>
</div>
</header>
<p>I always wanted to be... a lumberjack!</p>
<p>I always wanted to be... a lumberjack!</p>
<p>I always wanted to be... a lumberjack!</p>
<p>I always wanted to be... a lumberjack!</p>
<p>I always wanted to be... a lumberjack!</p>
<p>I always wanted to be... a lumberjack!</p>
<p>I always wanted to be... a lumberjack!</p>
<p>I always wanted to be... a lumberjack!</p>
</tui-scrollbar>
```
**TypeScript:**
```ts
import {AsyncPipe} from '@angular/common';
import {type AfterViewInit, Component, ViewChild} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiAmountPipe} from '@taiga-ui/addon-commerce';
import {TuiElasticSticky} from '@taiga-ui/addon-mobile';
import {tuiClamp} from '@taiga-ui/cdk';
import {TuiScrollbar} from '@taiga-ui/core';
import {distinctUntilChanged, map, type Observable, startWith} from 'rxjs';

@Component({
    standalone: true,
    imports: [AsyncPipe, TuiAmountPipe, TuiElasticSticky, TuiScrollbar],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example implements AfterViewInit {
    @ViewChild(TuiElasticSticky)
    protected readonly elasticSticky?: TuiElasticSticky;

    protected scale$?: Observable<number>;

    public ngAfterViewInit(): void {
        if (!this.elasticSticky) {
            return;
        }

        // If we use it like that instead of (tuiElasticSticky)="onElasticSticky($event)"
        // we will not trigger unnecessary change detection when scale is less than 0.5
        this.scale$ = this.elasticSticky.tuiElasticSticky.pipe(
            map((scale) => tuiClamp(scale, 0.5, 1)),
            startWith(1),
            distinctUntilChanged(),
        );
    }
}
```

#### Dynamic inner content

**Template:**
```html
<tui-scrollbar class="scrollbar">
<p>I never wanted to do this in the first place!</p>
<header class="header" (tuiElasticSticky)="onElastic1($event)" >
<div class="wrapper" [style.padding.rem]="scale1 * 2" > 1 </div>
</header>
<p>I always wanted to be... a lumberjack!</p>
<p>I always wanted to be... a lumberjack!</p>
<p>I always wanted to be... a lumberjack!</p>
<p>I always wanted to be... a lumberjack!</p>
<p>I always wanted to be... a lumberjack!</p>
<p>I always wanted to be... a lumberjack!</p>
<p>I always wanted to be... a lumberjack!</p>
<p>I always wanted to be... a lumberjack!</p>
<p>I always wanted to be... a lumberjack!</p>
<p>I always wanted to be... a lumberjack!</p>
<p>I always wanted to be... a lumberjack!</p>
<p>I always wanted to be... a lumberjack!</p>
<p>I always wanted to be... a lumberjack!</p>
<p>I always wanted to be... a lumberjack!</p>
<p>I always wanted to be... a lumberjack!</p>
<p>I always wanted to be... a lumberjack!</p>
<button tuiButton type="button" (click)="show = !show" > show/hide content </button>
<p>I always wanted to be... a lumberjack!</p>
<p>I always wanted to be... a lumberjack!</p>
<ng-container *ngIf="show">
<p>I always wanted to be... a lumberjack!</p>
<p>I always wanted to be... a lumberjack!</p>
<p>I always wanted to be... a lumberjack!</p>
<p>I always wanted to be... a lumberjack!</p>
<p>I always wanted to be... a lumberjack!</p>
<p>I always wanted to be... a lumberjack!</p>
<p>I always wanted to be... a lumberjack!</p>
<p>I always wanted to be... a lumberjack!</p>
<p>I always wanted to be... a lumberjack!</p>
<p>I always wanted to be... a lumberjack!</p>
<p>I always wanted to be... a lumberjack!</p>
<p>I always wanted to be... a lumberjack!</p>
<p>I always wanted to be... a lumberjack!</p>
<p>I always wanted to be... a lumberjack!</p>
<p>I always wanted to be... a lumberjack!</p>
<p>I always wanted to be... a lumberjack!</p>
<p>I always wanted to be... a lumberjack!</p>
<p>I always wanted to be... a lumberjack!</p>
<p>I always wanted to be... a lumberjack!</p>
<p>I always wanted to be... a lumberjack!</p>
<p>I always wanted to be... a lumberjack!</p>
<p>I always wanted to be... a lumberjack!</p>
<p>I always wanted to be... a lumberjack!</p>
<p>I always wanted to be... a lumberjack!</p>
<p>I always wanted to be... a lumberjack!</p>
<p>I always wanted to be... a lumberjack!</p>
<p>I always wanted to be... a lumberjack!</p>
<p>I always wanted to be... a lumberjack!</p>
<p>I always wanted to be... a lumberjack!</p>
<p>I always wanted to be... a lumberjack!</p>
<p>I always wanted to be... a lumberjack!</p>
<p>I always wanted to be... a lumberjack!</p>
<p>I always wanted to be... a lumberjack!</p>
<p>I always wanted to be... a lumberjack!</p>
<p>I always wanted to be... a lumberjack!</p>
<p>I always wanted to be... a lumberjack!</p>
<p>I always wanted to be... a lumberjack!</p>
<p>I always wanted to be... a lumberjack!</p>
<p>I always wanted to be... a lumberjack!</p>
<p>I always wanted to be... a lumberjack!</p>
</ng-container>
<header class="header" (tuiElasticSticky)="onElastic2($event)" >
<div class="wrapper" [style.padding.rem]="scale2 * 2" > 2 </div>
</header>
<p>I always wanted to be... a lumberjack!</p>
<p>I always wanted to be... a lumberjack!</p>
<p>I always wanted to be... a lumberjack!</p>
<p>I always wanted to be... a lumberjack!</p>
<p>I always wanted to be... a lumberjack!</p>
<p>I always wanted to be... a lumberjack!</p>
<p>I always wanted to be... a lumberjack!</p>
<p>I always wanted to be... a lumberjack!</p>
<p>I always wanted to be... a lumberjack!</p>
<p>I always wanted to be... a lumberjack!</p>
<p>I always wanted to be... a lumberjack!</p>
<p>I always wanted to be... a lumberjack!</p>
<p>I always wanted to be... a lumberjack!</p>
<p>I always wanted to be... a lumberjack!</p>
<p>I always wanted to be... a lumberjack!</p>
<p>I always wanted to be... a lumberjack!</p>
<p>I always wanted to be... a lumberjack!</p>
<p>I always wanted to be... a lumberjack!</p>
<p>I always wanted to be... a lumberjack!</p>
<p>I always wanted to be... a lumberjack!</p>
<p>I always wanted to be... a lumberjack!</p>
<p>I always wanted to be... a lumberjack!</p>
<p>I always wanted to be... a lumberjack!</p>
<p>I always wanted to be... a lumberjack!</p>
<p>I always wanted to be... a lumberjack!</p>
<p>I always wanted to be... a lumberjack!</p>
<p>I always wanted to be... a lumberjack!</p>
<p>I always wanted to be... a lumberjack!</p>
<p>I always wanted to be... a lumberjack!</p>
<p>I always wanted to be... a lumberjack!</p>
<p>I always wanted to be... a lumberjack!</p>
<p>I always wanted to be... a lumberjack!</p>
<p>I always wanted to be... a lumberjack!</p>
<p>I always wanted to be... a lumberjack!</p>
<p>I always wanted to be... a lumberjack!</p>
<p>I always wanted to be... a lumberjack!</p>
<p>I always wanted to be... a lumberjack!</p>
<p>I always wanted to be... a lumberjack!</p>
<p>I always wanted to be... a lumberjack!</p>
<p>I always wanted to be... a lumberjack!</p>
</tui-scrollbar>
```
**TypeScript:**
```ts
import {NgIf} from '@angular/common';
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiElasticSticky} from '@taiga-ui/addon-mobile';
import {tuiClamp} from '@taiga-ui/cdk';
import {TuiButton, TuiScrollbar} from '@taiga-ui/core';

@Component({
    standalone: true,
    imports: [NgIf, TuiButton, TuiElasticSticky, TuiScrollbar],
    templateUrl: './index.html',
    styleUrls: ['../1/index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected show = false;
    protected scale1 = 1;
    protected scale2 = 1;

    protected onElastic1(scale: number): void {
        this.scale1 = tuiClamp(scale, 0.2, 1);
    }

    protected onElastic2(scale: number): void {
        this.scale2 = tuiClamp(scale, 0.2, 1);
    }
}
```


### TypeScript

```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {TuiDemo} from '@demo/utils';

@Component({
    standalone: true,
    imports: [TuiDemo],
    templateUrl: './index.html',
    changeDetection,
})
export default class Page {}
```

---
# directives/Element
- **Package**: `CDK`
- **Type**: directives
Directive is used to get a link to a native element as template reference variable (analogue of
            &#64;ViewChild(&#39;ref&#39;, &#123;read: ElementRef&#125;
            for template)

### How to Use (Import)

```ts
import {TuiElement} from '@taiga-ui/cdk';

// ...

@Component({
  standalone: true,
  imports: [
    // ...
    TuiElement,
  ],
  // ...
})
export class Example {}
```

### How to Use (Template)

```html
<tui-scrollbar
  #element="elementRef"
  tuiElement
>
  <some-infinite-scroll-library [scrollingElement]="element.nativeElement" />
</tui-scrollbar>
```

### Usage Examples

#### Usage

**Template:**
```html
<button #component tuiAvatar type="button" class="tui-space_right-3" > C </button>
<button #element="elementRef" tuiAvatar tuiElement type="button" class="tui-space_right-3" > E </button>
<p> component instanceof <code>TuiAvatar</code> : <b>{{ isLink(component) }}</b>
</p>
<p> element instanceof <code>ElementRef</code> : <b>{{ isElement(element) }}</b>
</p>
<button tuiButton type="button" (click)="element.nativeElement.focus()" > Focus element </button>
```
**TypeScript:**
```ts
import {Component, ElementRef} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiElement} from '@taiga-ui/cdk';
import {TuiButton} from '@taiga-ui/core';
import {TuiAvatar} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [TuiAvatar, TuiButton, TuiElement],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    protected isLink(component: unknown): boolean {
        return component instanceof TuiAvatar;
    }

    protected isElement(element: unknown): boolean {
        return element instanceof ElementRef;
    }
}
```


### TypeScript

```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {TuiDemo} from '@demo/utils';

@Component({
    standalone: true,
    imports: [TuiDemo],
    templateUrl: './index.html',
    changeDetection,
})
export default class Page {}
```

---
# directives/Fade
- **Package**: `KIT`
- **Type**: directives
Directive that uses masking to fade out overflown content

### How to Use (Import)

```ts
import {Component} from '@angular/core';
import {TuiFade} from '@taiga-ui/kit';
// ...

@Component({
  standalone: true,
  imports: [
    // ...
    TuiFade,
  ],
})
export class Example {}
```

### How to Use (Template)

```html
<div tuiFade>
  <!-- long text here -->
</div>
```

### Example

```html
<div tuiFade class="fade" [tuiFadeHeight]="lineHeight" [tuiFadeOffset]="offset" [tuiFadeSize]="size" > I am a very long text with <code>white-space: nowrap</code> that fades </div>
```

### API

| Property | Type | Description |
|----------|-----|----------|
| tuiFade | `TuiOrientation` | Orientation of the fade |
| tuiFadeHeight | `string` | Line height (required for multiline text fade) |
| tuiFadeOffset | `string` | Offset from the edge for the fade to start |
| tuiFadeSize | `string` | Size of the fade |

### Usage Examples

#### Basic

**Template:**
```html
<tui-scrollbar class="scrollbar">
<div tuiFade tuiScrollable class="fade" > I am a very long text that overflows with a single line fade </div>
</tui-scrollbar>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiScrollable, TuiScrollbar} from '@taiga-ui/core';
import {TuiFade} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [TuiFade, TuiScrollable, TuiScrollbar],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {}
```

#### Multiline

**Template:**
```html
<div class="wrapper">
<div tuiFade tuiFadeHeight="1.25rem" tuiFadeOffset="4.5rem" class="fade" [class.fade_expanded]="expanded" > Daenerys of the House Targaryen, the First of Her Name, The Unburnt, Queen of the Andals, the Rhoynar and the First Men, Queen of Meereen, Khaleesi of the Great Grass Sea, Protector of the Realm, Lady Regent of the Seven Kingdoms, Breaker of Chains and Mother of Dragons. <button *ngIf="expanded" tuiLink type="button" (click)="toggle()" > Show less </button>
</div>
<button tuiLink type="button" class="expand" [class.expand_hidden]="expanded" (click)="toggle()" > Read more </button>
</div>
```
**TypeScript:**
```ts
import {NgIf} from '@angular/common';
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiLink} from '@taiga-ui/core';
import {TuiFade} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [NgIf, TuiFade, TuiLink],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected expanded = false;

    protected toggle(): void {
        this.expanded = !this.expanded;
    }
}
```

#### Vertical

**Template:**
```html
<tui-scrollbar>
<div tuiFade="vertical" tuiScrollable class="fade" > Daenerys of the House Targaryen, the First of Her Name, The Unburnt, Queen of the Andals, the Rhoynar and the First Men, Queen of Meereen, Khaleesi of the Great Grass Sea, Protector of the Realm, Lady Regent of the Seven Kingdoms, Breaker of Chains and Mother of Dragons. </div>
</tui-scrollbar>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiScrollable, TuiScrollbar} from '@taiga-ui/core';
import {TuiFade} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [TuiFade, TuiScrollable, TuiScrollbar],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {}
```

#### Hyphens

**Template:**
```html
<tui-notification> Use CSS hyphens and declare <code>lang</code> on your <code>html</code> tag so that you don't get a situation where a whole long word is shifted to the new line and you observe no fade effect </tui-notification>
<p tuiFade tuiFadeHeight="1.25rem" tuiFadeOffset="4.5rem" > Daenerys of the House Targaryen, the First of Her Name, The Unburnt, Queen of the pneumonoultramicroscopicsilicovolcanoconiosis Men, Queen of Meereen, Khaleesi of the Great Grass Sea, Protector of the Realm, Lady Regent of the Seven Kingdoms, Breaker of Chains and Mother of Dragons. </p>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiNotification} from '@taiga-ui/core';
import {TuiFade} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [TuiFade, TuiNotification],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {}
```


### TypeScript

```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {TuiDemo} from '@demo/utils';
import {TuiFade} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [TuiDemo, TuiFade],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    changeDetection,
})
export default class Page {
    protected readonly examples = ['Basic', 'Multiline', 'Vertical', 'Hyphens'];

    protected lineHeight = '100%';
    protected size = '1.5em';
    protected offset = '0em';
}
```

### LESS

```less
.fade {
    font: var(--tui-font-heading-6);
    white-space: nowrap;
}
```

---
# directives/FluidTypography
- **Package**: `KIT`
- **Type**: directives
A directive that adjusts font size for the text to fit in the container

### How to Use (Import)

```ts
import {Component} from '@angular/core';
import {TuiTextfield} from '@taiga-ui/core';
import {TuiFluidTypography} from '@taiga-ui/kit';
// ...

@Component({
  standalone: true,
  imports: [
    // ...
    TuiTextfield,
    TuiFluidTypography,
  ],
})
export class Example {}
```

### How to Use (Template)

```html
<tui-textfield>
  <input
    tuiTextfield
    tuiFluidTypography
  />
</tui-textfield>
```

### Usage Examples

#### Text

**Template:**
```html
<div style="resize: horizontal; overflow: hidden; white-space: nowrap; line-height: 2rem; margin-bottom: 1rem" tuiFluidTypography [textContent]="text" ></div>
<button tuiButton type="button" (click)="randomize()" > Randomize </button>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiButton} from '@taiga-ui/core';
import {TuiFluidTypography} from '@taiga-ui/kit';

const WORDS = ['Rock', 'Paper', 'Scissor'];

@Component({
    standalone: true,
    imports: [TuiButton, TuiFluidTypography],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    protected text = 'There is some text in here';

    protected randomize(): void {
        this.text = Array.from(
            {length: Math.ceil(10 * Math.random())},
            () => WORDS[Math.floor(Math.random() * WORDS.length)],
        ).join(', ');
    }
}
```

#### Textfield

**Template:**
```html
<tui-textfield>
<input placeholder="Type in long value" tuiFluidTypography tuiTextfield [(ngModel)]="value" />
</tui-textfield>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiTextfield} from '@taiga-ui/core';
import {TuiFluidTypography} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [FormsModule, TuiFluidTypography, TuiTextfield],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    protected value = '';
}
```

#### Options

**Template:**
```html
<tui-textfield>
<input placeholder="Type in long value" tuiTextfield [tuiFluidTypography]="scale()" [(ngModel)]="value" />
</tui-textfield>
<tui-input-range class="tui-space_top-4" [max]="30" [min]="1" [ngModel]="range()" (ngModelChange)="range.set($event)" > Min/Max (converted to pixels) </tui-input-range>
```
**TypeScript:**
```ts
import {Component, computed, inject, signal} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiTextfield} from '@taiga-ui/core';
import {TUI_FLUID_TYPOGRAPHY_OPTIONS, TuiFluidTypography} from '@taiga-ui/kit';
import {TuiInputRangeModule} from '@taiga-ui/legacy';

@Component({
    standalone: true,
    imports: [FormsModule, TuiFluidTypography, TuiInputRangeModule, TuiTextfield],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    private readonly options = inject(TUI_FLUID_TYPOGRAPHY_OPTIONS);

    protected value = 'I am a very long value';
    protected range = signal([this.options.min * 16, this.options.max * 16]);
    protected scale = computed<[number, number]>(() => [
        (this.range()[0] ?? 0) / 16,
        (this.range()[1] ?? 0) / 16,
    ]);
}
```


### TypeScript

```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {TuiDemo} from '@demo/utils';

@Component({
    standalone: true,
    imports: [TuiDemo],
    templateUrl: './index.html',
    changeDetection,
})
export default class Page {
    protected examples = ['Text', 'Textfield', 'Options'];
}
```

---
# directives/Highlight
- **Package**: `KIT`
- **Type**: directives
Directive is used to highlight text in element.

        
            You can configure the directive with
            TUI_HIGHLIGHT_OPTIONS
            token.
            
            Allowed options:
        
        
            
                highlightColor:
            
            The default color for the highlight.
        

        
            Use function
            tuiHighlightOptionsProvider
            to provide new value of this token.
        

        Does not work with inline elements

### How to Use (Import)

```ts
import {TuiHighlight} from '@taiga-ui/kit';

// ...

@Component({
  standalone: true,
  imports: [
    // ...
    TuiHighlight,
  ],
  // ...
})
export class Example {}
```

### How to Use (Template)

```html
<div
  [tuiHighlight]="query"
  [tuiHighlightColor]="'#228B22'"
>
  ...
</div>
```

### Usage Examples

#### Usage

**Template:**
```html
<tui-input tuiTextfieldIconLeft="@tui.search" [(ngModel)]="search" > Search </tui-input>
<table class="tui-space_top-4">
<thead>
<tr>
<th>Member</th>
<th>Nickname</th>
<th>Fate</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let row of rows">
<td *ngFor="let cell of row" [tuiHighlight]="search" [tuiHighlightColor]="'#228B22'" > {{ cell }} </td>
</tr>
</tbody>
</table>
```
**TypeScript:**
```ts
import {NgForOf} from '@angular/common';
import {Component} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiHighlight} from '@taiga-ui/kit';
import {TuiInputModule, TuiTextfieldControllerModule} from '@taiga-ui/legacy';

@Component({
    standalone: true,
    imports: [
        FormsModule,
        NgForOf,
        TuiHighlight,
        TuiInputModule,
        TuiTextfieldControllerModule,
    ],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected search = '';

    protected readonly rows = [
        ['King Arthur', '-', 'Arrested'],
        ['Sir Bedevere', 'The Wise', 'Arrested'],
        ['Sir Lancelot', 'The Brave', 'Arrested'],
        ['Sir Galahad', 'The Chaste', 'Killed'],
        ['Sir Robin', 'The Not-Quite-So-Brave-As-Sir-Lancelot', 'Killed'],
    ];
}
```


### TypeScript

```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {TuiDemo} from '@demo/utils';

@Component({
    standalone: true,
    imports: [TuiDemo],
    templateUrl: './index.html',
    changeDetection,
})
export default class Page {}
```

---
# directives/Hint
- **Package**: `CORE`
- **Type**: directives
Directive to show a hint by hover of an element

### How to Use (Import)

```ts
import {TuiHint} from '@taiga-ui/core';

// ...

@Component({
  standalone: true,
  imports: [
    // ...
    TuiHint,
  ],
  // ...
})
export class Example {}
```

### How to Use (Template)

```html
<button
  tuiButton
  type="button"
  tuiHint="Custom host with text tooltip"
>
  Press me
</button>
<button
  tuiButton
  type="button"
  [tuiHint]="template"
>
  Press him ↑
</button>

<ng-template #template>Reusable template</ng-template>
```

### Example

```html
<ng-template #hint> To be accessible, hint should be set to a focusable element. See <a tuiLink [routerLink]="routes.HintDescribe" >
<code>HintDescribe</code>
</a>
</ng-template>
<span [tuiHint]="hint" [tuiHintAppearance]="appearance" [tuiHintDescribe]="'qwerty'" [tuiHintDirection]="direction" [tuiHintHideDelay]="hideDelay" [tuiHintShowDelay]="showDelay" > Hover it! </span>
<input id="qwerty" />
```

### API

| Property | Type | Description |
|----------|-----|----------|
| tuiHint | `PolymorpheusContent` | Content |
| tuiHintShowDelay | `number` | Show Delay |
| tuiHintHideDelay | `number` | Hide Delay |

### Usage Examples

#### Basic

**Template:**
```html
<tui-avatar size="l" tuiHintAppearance="dark" tuiHintDirection="right" [style.background]="'❤️' | tuiAutoColor" [tuiHint]="tooltip" > ❤️ </tui-avatar>
<ng-template #tooltip>
<div> What is <strong>love</strong> ? </div>
<div>Baby don't hurt me</div>
<div>Don't hurt me</div>
<div>No more...</div>
</ng-template>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiAutoColorPipe, TuiHint} from '@taiga-ui/core';
import {TuiAvatar} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [TuiAutoColorPipe, TuiAvatar, TuiHint],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {}
```

#### Customizing

**Template:**
```html
<tui-avatar size="l" tuiHint tuiHintDirection="right" [style.background]="'❤️' | tuiAutoColor" > ❤️ <tui-hint *tuiHint class="hint" [@.disabled]="true" > You can expose the bubble component with <code>*tuiHint</code> directive to customize it </tui-hint>
</tui-avatar>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiAutoColorPipe, TuiHint} from '@taiga-ui/core';
import {TuiAvatar} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [TuiAutoColorPipe, TuiAvatar, TuiHint],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {}
```

#### Nested

**Template:**
```html
<tui-badge appearance="accent" size="l" class="badge tui-space_left-2" [tuiHint]="badgeHint" > Hover me <ng-template #badgeHint>
<a tuiHintAppearance="dark" [tuiHint]="linkHint" > Hover me again <ng-template #linkHint>Nested hint</ng-template>
</a>
</ng-template>
</tui-badge>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiHint} from '@taiga-ui/core';
import {TuiBadge} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [TuiBadge, TuiHint],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {}
```

#### Auto

**Template:**
```html
<div tuiHintOverflow>Resize so text overflows</div>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiHint} from '@taiga-ui/core';

@Component({
    standalone: true,
    imports: [TuiHint],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {}
```

#### Form

**Template:**
```html
<form [formGroup]="form">
<tui-textfield tuiChevron tuiTextfieldSize="m" [content]="stringify | tuiStringifyContent" >
<label tuiLabel>Term</label>
<input formControlName="period" tuiSelect />
<tui-data-list-wrapper *tuiTextfieldDropdown new [itemContent]="stringify | tuiStringifyContent" [items]="items | tuiFilterByInput" />
<tui-icon tuiHintDirection="top-left" [tuiTooltip]="periodHint" />
</tui-textfield>
<ng-template #periodHint> You will pay in equal installments on a monthly basis You will pay in equal installments on a monthly basis </ng-template>
</form>
<button tuiHintAppearance="dark" tuiHintDirection="top-left" tuiLink type="button" class="tui-space_top-4" [pseudo]="true" [tuiHint]="howToBuyTooltip" > How to buy <ng-template #howToBuyTooltip>
<ol class="tui-list tui-list_ordered tui-list_small">
<li class="tui-list__item">Choose an installment plan</li>
<li class="tui-list__item">Fill in the application</li>
<li class="tui-list__item"> When the bank approves, sign the contract via SMS or get it delivered to sign </li>
</ol>
</ng-template>
</button>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {FormControl, FormGroup, ReactiveFormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiHint, TuiIcon, TuiLink, TuiTextfield} from '@taiga-ui/core';
import {
    TuiChevron,
    TuiDataListWrapper,
    TuiFilterByInputPipe,
    TuiSelect,
    TuiStringifyContentPipe,
    TuiTooltip,
} from '@taiga-ui/kit';
import {TuiTextfieldControllerModule} from '@taiga-ui/legacy';

@Component({
    standalone: true,
    imports: [
        ReactiveFormsModule,
        TuiChevron,
        TuiDataListWrapper,
        TuiFilterByInputPipe,
        TuiHint,
        TuiIcon,
        TuiLink,
        TuiSelect,
        TuiStringifyContentPipe,
        TuiTextfield,
        TuiTextfieldControllerModule,
        TuiTooltip,
    ],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly items = [
        {name: 'John', surname: 'Cleese'},
        {name: 'Eric', surname: 'Idle'},
        {name: 'Graham', surname: 'Chapman'},
        {name: 'Michael', surname: 'Palin'},
        {name: 'Terry', surname: 'Gilliam'},
        {name: 'Terry', surname: 'Jones'},
    ];

    protected readonly form = new FormGroup({
        period: new FormControl(),
    });

    protected readonly stringify = (item: {name: string; surname: string}): string =>
        `${item.name} ${item.surname}`;
}
```


### TypeScript

```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {DemoRoute} from '@demo/routes';
import {TuiDemo} from '@demo/utils';
import {tuiProvide} from '@taiga-ui/cdk';
import {TuiHint} from '@taiga-ui/core';

import {ABSTRACT_PROPS_ACCESSOR} from '../../components/abstract/abstract-props-accessor';
import {AbstractExampleTuiHint} from '../../components/abstract/hint';
import {InheritedDocumentation} from '../../components/abstract/inherited-documentation';

@Component({
    standalone: true,
    imports: [InheritedDocumentation, TuiDemo, TuiHint],
    templateUrl: './index.html',
    changeDetection,
    providers: [tuiProvide(ABSTRACT_PROPS_ACCESSOR, PageComponent)],
})
export default class PageComponent extends AbstractExampleTuiHint {
    protected readonly examples = ['Basic', 'Customizing', 'Nested', 'Auto', 'Form'];

    protected showDelay = 500;
    protected hideDelay = 200;
    protected readonly routes = DemoRoute;
}
```

---
# directives/HintDescribe
- **Package**: `CORE`
- **Type**: directives
Directive to show a hint in accessible way upon keyboard focus

### How to Use (Import)

```ts
import {TuiHint} from '@taiga-ui/core';

// ...

@Component({
  standalone: true,
  imports: [
    // ...
    TuiHint,
  ],
  // ...
})
export class Example {}
```

### How to Use (Template)

```html
<button
  tuiButton
  tuiHint="I'm a hint"
  tuiHintDescribe
>
  Press me
</button>
```

### Example

```html
<input placeholder="My id is 'qwerty'" tuiHint="I will be visible upon keyboard focus" tuiHintDescribe="qwerty" [tuiHintAppearance]="appearance" [tuiHintDirection]="direction" />
```

### API

| Property | Type | Description |
|----------|-----|----------|
| tuiHint | `PolymorpheusContent` | Content |
| tuiHintDescribe | `string` | Id of the element |

### Usage Examples

#### Basic

**Template:**
```html
<p>
<button appearance="secondary" iconStart="@tui.circle-help" tuiHint="Works well with icon buttons" tuiHintDescribe tuiHintDirection="right" tuiIconButton type="button" ></button>
</p>
<p>
<button id="button" appearance="secondary" iconStart="@tui.circle-help" tuiButton type="button" > Hint </button>
<tui-icon tuiHintDirection="right" tuiTooltip="Or with external tooltip" tuiTooltipDescribe="button" class="tui-space_top-4 tui-space_left-4" />
</p>
<tui-input tuiHintContent="This is built-in with controls" [(ngModel)]="value" > Input with accessible hint </tui-input>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {TuiButton, TuiHint, TuiHintDirective, TuiIcon} from '@taiga-ui/core';
import {TuiTooltip} from '@taiga-ui/kit';
import {TuiInputModule} from '@taiga-ui/legacy';

@Component({
    standalone: true,
    imports: [
        FormsModule,
        TuiButton,
        TuiHint,
        TuiHintDirective,
        TuiIcon,
        TuiInputModule,
        TuiTooltip,
    ],
    templateUrl: './index.html',
    changeDetection,
})
export default class Example {
    protected value = '';
}
```


### TypeScript

```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {TuiDemo} from '@demo/utils';
import {tuiProvide} from '@taiga-ui/cdk';
import {TuiHint} from '@taiga-ui/core';

import {ABSTRACT_PROPS_ACCESSOR} from '../../components/abstract/abstract-props-accessor';
import {AbstractExampleTuiHint} from '../../components/abstract/hint';
import {InheritedDocumentation} from '../../components/abstract/inherited-documentation';

@Component({
    standalone: true,
    imports: [InheritedDocumentation, TuiDemo, TuiHint],
    templateUrl: './index.html',
    changeDetection,
    providers: [tuiProvide(ABSTRACT_PROPS_ACCESSOR, PageComponent)],
})
export default class PageComponent extends AbstractExampleTuiHint {
    protected id = '';
}
```

---
# directives/HintManual
- **Package**: `CORE`
- **Type**: directives
Directive to show a hint manually

### How to Use (Import)

```ts
import {TuiHint} from '@taiga-ui/core';

// ...

@Component({
  standalone: true,
  imports: [
    // ...
    TuiHint,
  ],
  // ...
})
export class Example {}
```

### How to Use (Template)

```html
<button
  tuiButton
  type="button"
  tuiHint="Custom host with text tooltip"
  [tuiHintManual]="true"
>
  Press me
</button>

<button
  tuiButton
  type="button"
  [tuiHint]="template"
  [tuiHintManual]="true"
>
  Press that ↑
</button>

<ng-template #template>Reusable template</ng-template>
```

### Example

```html
<button tuiButton tuiHint="It says 'Hi all!' into console" type="button" [tuiHintAppearance]="appearance" [tuiHintDirection]="direction" [tuiHintManual]="show" (click)="sayHi()" > A strange button </button>
```

### API

| Property | Type | Description |
|----------|-----|----------|
| tuiHint | `PolymorpheusContent` | Content |
| tuiHintManual | `boolean` | Show/hide hint |

### Usage Examples

#### Basic

**Template:**
```html
<button tuiButton type="button" [tuiHint]="template" [tuiHintManual]="hintShown" (click)="toggleHint()" > Hint </button>
<ng-template #template> Use <a appearance="action-grayscale" routerLink="hint" tuiLink tuiTheme="dark" class="link" > Hint </a>
</ng-template>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {RouterLink} from '@angular/router';
import {changeDetection} from '@demo/emulate/change-detection';
import {TuiButton, TuiHint, TuiHintDirective, TuiLink} from '@taiga-ui/core';

@Component({
    standalone: true,
    imports: [RouterLink, TuiButton, TuiHint, TuiHintDirective, TuiLink],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    changeDetection,
})
export default class Example {
    protected hintShown = false;

    protected toggleHint(): void {
        this.hintShown = !this.hintShown;
    }
}
```


### TypeScript

```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {TuiDemo} from '@demo/utils';
import {tuiProvide} from '@taiga-ui/cdk';
import {TuiButton, TuiHint} from '@taiga-ui/core';

import {ABSTRACT_PROPS_ACCESSOR} from '../../components/abstract/abstract-props-accessor';
import {AbstractExampleTuiHint} from '../../components/abstract/hint';
import {InheritedDocumentation} from '../../components/abstract/inherited-documentation';

@Component({
    standalone: true,
    imports: [InheritedDocumentation, TuiButton, TuiDemo, TuiHint],
    templateUrl: './index.html',
    changeDetection,
    providers: [tuiProvide(ABSTRACT_PROPS_ACCESSOR, PageComponent)],
})
export default class PageComponent extends AbstractExampleTuiHint {
    protected show = false;

    protected sayHi(): void {
        console.info('Hi all!');
    }
}
```

---
# directives/HintPointer
- **Package**: `CORE`
- **Type**: directives
A directive to show a hint above the cursor

### How to Use (Import)

```ts
import {TuiHint} from '@taiga-ui/core';

// ...

@Component({
  standalone: true,
  imports: [
    // ...
    TuiHint,
  ],
  // ...
})
export class Example {}
```

### How to Use (Template)

```html
<div
  tuiHintPointer
  tuiHint="Hint text"
>
  Block with pointer hint
</div>
```

### Example

```html
<div tuiHint="Some information" tuiHintPointer [tuiHintAppearance]="appearance" [tuiHintDirection]="direction" [tuiHintHideDelay]="hideDelay" [tuiHintShowDelay]="showDelay" > It is followed inside the block </div>
```

### API

| Property | Type | Description |
|----------|-----|----------|
| tuiHint | `PolymorpheusContent` | Hint content |
| tuiHintShowDelay | `number` | Show Delay |
| tuiHintHideDelay | `number` | Hide Delay |

### Usage Examples

#### Basic

**Template:**
```html
<div tuiHint="Wow! How exciting!" tuiHintDirection="top-left" tuiHintPointer class="block" >
<p>In this block hint follows cursor</p>
</div>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {TuiHint} from '@taiga-ui/core';

@Component({
    standalone: true,
    imports: [TuiHint],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    changeDetection,
})
export default class Example {}
```


### TypeScript

```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {TuiDemo} from '@demo/utils';
import {tuiProvide} from '@taiga-ui/cdk';
import {TuiHint, TuiHintDirective} from '@taiga-ui/core';

import {ABSTRACT_PROPS_ACCESSOR} from '../../components/abstract/abstract-props-accessor';
import {AbstractExampleTuiHint} from '../../components/abstract/hint';
import {InheritedDocumentation} from '../../components/abstract/inherited-documentation';

@Component({
    standalone: true,
    imports: [InheritedDocumentation, TuiDemo, TuiHint, TuiHintDirective],
    templateUrl: './index.html',
    changeDetection,
    providers: [tuiProvide(ABSTRACT_PROPS_ACCESSOR, PageComponent)],
})
export default class PageComponent extends AbstractExampleTuiHint {
    protected showDelay = 0;
    protected hideDelay = 0;
}
```

---
# directives/HoveredChange
- **Package**: `CDK`
- **Type**: directives
tuiHoveredChange
            is used for emitting true/false when users hovers over an element or moves cursor away from it.

### How to Use (Import)

```ts
import {TuiHovered} from '@taiga-ui/cdk';

// ...

@Component({
  standalone: true,
  imports: [
    // ...
    TuiHovered,
  ],
  // ...
})
export class Example {}
```

### How to Use (Template)

```html
<button
  tuiButton
  type="button"
  (tuiHoveredChange)="onHovered($event)"
>
  Hover over me to reveal hidden text!
</button>
```

### Usage Examples

#### Basic

**Template:**
```html
<button tuiButton type="button" class="tui-space_bottom-5" (tuiHoveredChange)="onHovered($event)" > Hover to reveal hidden text! </button>
<p> Hidden Text Appears Here: <span class="text-style" [class.hidden]="!hovered" > You Just Hovered Over The Button! </span>
</p>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiHovered} from '@taiga-ui/cdk';
import {TuiButton} from '@taiga-ui/core';

@Component({
    standalone: true,
    imports: [TuiButton, TuiHovered],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected hovered = false;

    protected onHovered(hovered: boolean): void {
        this.hovered = hovered;
    }
}
```


### TypeScript

```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {TuiDemo} from '@demo/utils';

@Component({
    standalone: true,
    imports: [TuiDemo],
    templateUrl: './index.html',
    changeDetection,
})
export default class Page {}
```

---
# directives/Media
- **Package**: `CDK`
- **Type**: directives
Directive for declarative work with HTML5 video and audio

### How to Use (Import)

```ts
import {TuiMedia} from '@taiga-ui/cdk';

// ...

@Component({
  standalone: true,
  imports: [
    // ...
    TuiMedia,
  ],
  // ...
})
export class Example {}
```

### How to Use (Template)

```html
<video
  tuiMedia
  controls
>
  <source
    *tuiHdpi
    src="4k.mp4"
    type="video/mp4"
  />
  <source
    src="1080p.mp4"
    type="video/mp4"
  />
</video>
```

### API

| Property | Type | Description |
|----------|-----|----------|
| currentTime | `number` | Current time |
| paused | `boolean` | Paused state |
| playbackRate | `number` | Playback speed |
| volume | `number` | Volume |

### Usage Examples

#### Native controls

**Template:**
```html
<video controls tuiMedia width="320" class="video" [(currentTime)]="currentTime" [(paused)]="paused" [(volume)]="volume" >
<source *tuiHighDpi src="assets/media/bbb_dpi.ogv" type="video/ogg" />
<source src="assets/media/bbb.mp4" type="video/mp4" />
</video>
<p>currentTime: {{ currentTime }}</p>
<p>volume: {{ volume }}</p>
<p>paused: {{ paused }}</p>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiHighDpi, TuiMedia} from '@taiga-ui/cdk';

@Component({
    standalone: true,
    imports: [TuiHighDpi, TuiMedia],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected currentTime = 0;
    protected volume = 1;
    protected paused = true;
}
```

#### Video

**Template:**
```html
<div class="player">
<video #video tuiMedia width="320" class="video" [(currentTime)]="currentTime" [(paused)]="paused" (click)="toggleState()" >
<source src="assets/media/bbb.mp4" type="video/mp4" />
</video>
<div class="controls">
<button appearance="glass" size="s" title="Play/Pause" tuiIconButton tuiTheme="dark" type="button" [iconStart]="icon" [style.border-radius.%]="100" (click)="toggleState()" ></button>
<input step="any" tuiSlider type="range" class="slider" [max]="video.duration" [(ngModel)]="currentTime" />
<div class="time">
<time [attr.datetime]="getTime(currentTime)"> {{ getTime(currentTime) }} </time> / <time [attr.datetime]="getTime(video.duration)"> {{ getTime(video.duration) }} </time>
</div>
</div>
</div>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {SECONDS_IN_MINUTE, TuiMedia} from '@taiga-ui/cdk';
import {TuiButton} from '@taiga-ui/core';
import {TuiSlider} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [FormsModule, TuiButton, TuiMedia, TuiSlider],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected currentTime = 0;
    protected paused = true;

    protected get icon(): string {
        return this.paused ? '@tui.play' : '@tui.pause';
    }

    protected getTime(time: number): string {
        const integer = Math.round(time || 0);
        const seconds = integer % SECONDS_IN_MINUTE;
        const minutes = (integer - seconds) / SECONDS_IN_MINUTE;
        const secondsString = String(seconds);
        const minutesString = String(minutes);
        const paddedSeconds =
            secondsString.length === 1 ? `0${secondsString}` : secondsString;
        const paddedMinutes =
            minutesString.length === 1 ? `0${minutesString}` : minutesString;

        return `${paddedMinutes}:${paddedSeconds}`;
    }

    protected toggleState(): void {
        this.paused = !this.paused;
    }
}
```

#### Audio

**Template:**
```html
<div class="tui-player">
<audio #audio src="assets/media/strays.mp3" tuiMedia [(currentTime)]="currentTime" [(paused)]="paused" ></audio>
<button appearance="secondary" title="Play/Pause" tuiIconButton type="button" [iconStart]="icon" [style.border-radius.%]="100" (click)="toggleState()" ></button>
<div>
<a href="https://waterplea.bandcamp.com/" tuiLink > Waterplea </a> — Strays <input step="any" tuiSlider type="range" class="slider" [max]="audio.duration" [(ngModel)]="currentTime" />
</div>
</div>
```
**TypeScript:**
```ts
import {Component, ViewEncapsulation} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {TuiMedia} from '@taiga-ui/cdk';
import {TuiButton, TuiLink} from '@taiga-ui/core';
import {TuiSlider} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [FormsModule, TuiButton, TuiLink, TuiMedia, TuiSlider],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation: ViewEncapsulation.None,
    changeDetection,
})
export default class Example {
    protected currentTime = 0;
    protected paused = true;

    protected get icon(): string {
        return this.paused ? '@tui.play' : '@tui.pause';
    }

    protected toggleState(): void {
        this.paused = !this.paused;
    }
}
```


### TypeScript

```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {TuiDemo} from '@demo/utils';
import {TuiMedia} from '@taiga-ui/cdk';

@Component({
    standalone: true,
    imports: [TuiDemo, TuiMedia],
    templateUrl: './index.html',
    changeDetection,
})
export default class Page {
    protected readonly volumeVariants: readonly number[] = [1, 0.5, 0.25, 0];

    protected playbackRate = 1;
    protected currentTime = 0;
    protected volume = this.volumeVariants[0]!;
    protected paused = true;
}
```

---
# directives/NumberFormat
- **Package**: `CORE`
- **Type**: directives
Directive allows to customize
            TuiInputNumber
            ,
            TuiInputSlider
            ,
            TuiInputRange
            number format.

### How to Use (Import)

```ts
import {TuiNumberFormat} from '@taiga-ui/core';

// ...

@Component({
  standalone: true,
  imports: [
    // ...
    TuiNumberFormat,
  ],
  // ...
})
export class Example {}
```

### How to Use (Template)

```html
<tui-textfield>
  <input
    tuiInputNumber
    [tuiNumberFormat]="{decimal, precision, zeroPadding, rounding, thousandSeparator, decimalSeparator}"
  />
</tui-textfield>
```

### Usage Examples

#### Basic

**Template:**
```html
<!-- Works in several levels-->
<tui-textfield [tuiNumberFormat]="{precision: 1, thousandSeparator: '_'}">
<label tuiLabel>Label: {{ value | tuiFormatNumber | async }}</label>
<!-- You can also put directive directly on [tuiInputNumber] -->
<input tuiInputNumber [tuiNumberFormat]="{precision: 2}" [(ngModel)]="value" />
</tui-textfield>
```
**TypeScript:**
```ts
import {AsyncPipe} from '@angular/common';
import {Component} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiFormatNumberPipe, TuiNumberFormat, TuiTextfield} from '@taiga-ui/core';
import {TuiInputNumber} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [
        AsyncPipe,
        FormsModule,
        TuiFormatNumberPipe,
        TuiInputNumber,
        TuiNumberFormat,
        TuiTextfield,
    ],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    protected value = 123456.789;
}
```


### TypeScript

```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {TuiDemo} from '@demo/utils';

@Component({
    standalone: true,
    imports: [TuiDemo],
    templateUrl: './index.html',
    changeDetection,
})
export default class Page {}
```

---
# directives/Pan
- **Package**: `CDK`
- **Type**: directives
tuiPan
            The directive emits delta between mousemove / touchmove events. You can use it to change the coordinates of
            an element as in example below

### How to Use (Import)

```ts
import {TuiPan} from '@taiga-ui/cdk';

// ...

@Component({
  standalone: true,
  imports: [
    // ...
    TuiPan,
  ],
  // ...
})
export class Example {}
```

### How to Use (Template)

```html
<div (tuiPan)="..."></div>
```

### Usage Examples

#### Basic

**Template:**
```html
<div class="container tui-text_body-l">
<div class="circle" [style.transform]="transform$ | async" (tuiPan)="onPan($event)" ></div>
</div>
```
**TypeScript:**
```ts
import {AsyncPipe} from '@angular/common';
import {Component, inject} from '@angular/core';
import {DomSanitizer} from '@angular/platform-browser';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiPan} from '@taiga-ui/cdk';
import {BehaviorSubject, map} from 'rxjs';

@Component({
    standalone: true,
    imports: [AsyncPipe, TuiPan],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    private readonly sanitizer = inject(DomSanitizer);

    protected readonly coordinates$ = new BehaviorSubject([0, 0]);

    protected readonly transform$ = this.coordinates$.pipe(
        map((coords) =>
            this.sanitizer.bypassSecurityTrustStyle(
                `translate(${coords[0]}px, ${coords[1]}px)`,
            ),
        ),
    );

    protected get currentCoords(): number[] {
        return this.coordinates$.value;
    }

    protected onPan(delta: readonly [number, number]): void {
        this.coordinates$.next([
            (this.currentCoords[0] ?? 0) + delta[0],
            (this.currentCoords[1] ?? 0) + delta[1],
        ]);
    }
}
```


### TypeScript

```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {TuiDemo} from '@demo/utils';

@Component({
    standalone: true,
    imports: [TuiDemo],
    templateUrl: './index.html',
    changeDetection,
})
export default class Page {}
```

---
# directives/Present
- **Package**: `KIT`
- **Type**: directives
tuiPresentChange
            allows to detect appearance of elements in DOM

### How to Use (Import)

```ts
import {TuiPresent} from '@taiga-ui/kit';

// ...

@Component({
  standalone: true,
  imports: [
    // ...
    TuiPresent,
  ],
  // ...
})
export class Example {}
```

### How to Use (Template)

```html
<div
  [class.hidden]="!visible"
  (tuiPresentChange)="onPresentChange($event)"
>
  I am a component hidden with CSS
</div>
or
<div
  *ngIf="visible"
  (tuiPresentChange)="onPresentChange($event)"
>
  I am a component hidden with *ngIf
</div>
```

### Usage Examples

#### Basic

**Template:**
```html
<p (tuiHoveredChange)="onHovered($event)"> Hover <span [class.hidden]="!hovered" (tuiPresentChange)="onCSS($event)" > I am a component hidden with CSS </span>
<span *ngIf="hovered" (tuiPresentChange)="onIf($event)" > I am a component hidden with *ngIf </span>
</p>
<p>Counter of component appearance minus counter of its disappearance:</p>
<p> CSS: <tui-badge>{{ counterCSS }}</tui-badge>
</p>
<p> ngIf: <tui-badge>{{ counterIf }}</tui-badge>
</p>
```
**TypeScript:**
```ts
import {NgIf} from '@angular/common';
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiHovered} from '@taiga-ui/cdk';
import {TuiBadge, TuiPresent} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [NgIf, TuiBadge, TuiHovered, TuiPresent],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected counterCSS = 0;

    protected counterIf = 0;

    protected hovered = false;

    protected onHovered(hovered: boolean): void {
        this.hovered = hovered;
    }

    protected onCSS(visible: boolean): void {
        this.counterCSS += visible ? 1 : -1;
    }

    protected onIf(visible: boolean): void {
        this.counterIf += visible ? 1 : -1;
    }
}
```


### TypeScript

```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {TuiDemo} from '@demo/utils';

@Component({
    standalone: true,
    imports: [TuiDemo],
    templateUrl: './index.html',
    changeDetection,
})
export default class Page {}
```

---
# directives/ProgressSegmented
- **Package**: `KIT`
- **Type**: directives
ProgressSegmented
        is a component to visually represent the completion of a process or operation (as a segmented bar). It shows how
        much has been completed and how much remains.

        
            Actually, this component is the same
            
                ProgressBar
            
            processed by css-property
            
                mask
            
            .

### How to Use (Import)

```ts
import {TuiProgress} from '@taiga-ui/kit';

// ...

@Component({
  standalone: true,
  imports: [
    // ...
    TuiProgress,
  ],
  // ...
})
export class Example {}
```

### How to Use (Template)

```html
<progress
  tuiProgressBar
  [max]="5"
  [segments]="5"
  [value]="3"
></progress>
```

### Example

```html
<progress tuiProgressBar [max]="max" [segments]="segments" [size]="size" [tuiProgressColorSegments]="computedColors" [value]="value" ></progress>
```

### API

| Property | Type | Description |
|----------|-----|----------|
| segments | `number` | A number of visual segments. It must be a valid integer number between 0 and max . |
| value | `number` | This property specifies how much of the task that has been completed. It must be a valid integer number between 0 and max . |
| max | `number` | This property describes how much work the task indicated by the progress element requires. It must be a valid positive integer number. The default value is 1 . |
| size | `TuiSizeXS | TuiSizeXXL` | Height of the progress. |
| tuiProgressColorSegments | `string[]` | Colors of the progress segments. Use CSS-property color to set single solid color of progress indicator. |

### Usage Examples

#### Basic

**Template:**
```html
<progress tuiProgressBar [max]="5" [segments]="5" [value]="3" ></progress>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiProgress} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [TuiProgress],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {}
```

#### Sizes

**Template:**
```html
<progress size="xs" tuiProgressBar [max]="7" [segments]="7" [value]="3" ></progress>
<progress size="s" tuiProgressBar [max]="10" [segments]="10" [value]="6" ></progress>
<progress size="m" tuiProgressBar [max]="5" [segments]="5" [value]="4" ></progress>
<progress size="l" tuiProgressBar [max]="3" [segments]="3" [value]="1" ></progress>
<progress size="xl" tuiProgressBar [max]="3" [segments]="3" [value]="2" ></progress>
<progress size="xxl" tuiProgressBar [max]="3" [segments]="3" [value]="3" ></progress>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiProgress} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [TuiProgress],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {}
```

#### Colors

**Template:**
```html
<progress size="s" tuiProgressBar class="green" [max]="8" [segments]="8" [value]="6" ></progress>
<progress size="s" tuiProgressBar [max]="arrayColors.length" [segments]="arrayColors.length" [tuiProgressColorSegments]="arrayColors" [value]="arrayColors.length" ></progress>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiProgress} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [TuiProgress],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly arrayColors = [
        '#39b54a',
        '#ffd450',
        '#ffd450',
        '#fcc521',
        '#fab619',
        '#f8a34d',
        '#e01f19',
    ];
}
```

#### With labels

**Template:**
```html
<progress tuiProgressBar [max]="5" [segments]="5" [value]="3" ></progress>
<div class="description tui-space_top-2">
<label tuiTitle>
<span tuiSubtitle>Step</span>
<span>{{ 100500 | tuiAmount: 'RUB' | async }}</span>
</label>
<label tuiTitle>
<span tuiSubtitle>New apartment</span> 2 times left </label>
</div>
```
**TypeScript:**
```ts
import {AsyncPipe} from '@angular/common';
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiAmountPipe} from '@taiga-ui/addon-commerce';
import {TuiTitle} from '@taiga-ui/core';
import {TuiProgress} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [AsyncPipe, TuiAmountPipe, TuiProgress, TuiTitle],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {}
```

#### No round corners

**Template:**
```html
<progress tuiProgressBar [max]="5" [segments]="5" [value]="3" ></progress>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiProgress} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [TuiProgress],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {}
```


### TypeScript

```ts
import {ChangeDetectionStrategy, Component} from '@angular/core';
import {RouterLink} from '@angular/router';
import {DemoRoute} from '@demo/routes';
import {TuiDemo} from '@demo/utils';
import {TuiLink} from '@taiga-ui/core';
import {TuiProgress, type TuiProgressBar} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [RouterLink, TuiDemo, TuiLink, TuiProgress],
    templateUrl: './index.html',
    changeDetection: ChangeDetectionStrategy.OnPush,
})
export default class Page {
    protected readonly routes = DemoRoute;
    protected value = 3;
    protected max = 5;
    protected segments = this.max;

    protected examples = ['Basic', 'Sizes', 'Colors', 'With labels', 'No round corners'];

    protected readonly sizeVariants: ReadonlyArray<TuiProgressBar['size']> = [
        'xs',
        's',
        'm',
        'l',
        'xl',
        'xxl',
    ];

    protected size: TuiProgressBar['size'] = this.sizeVariants[2]!;

    protected readonly colorsVariants: readonly string[][] = [
        ['var(--tui-background-accent-1)'],
        ['#39b54a', '#ffd450', '#ffd450', '#fcc521', '#fab619', '#f8a34d', '#e01f19'],
        new Array(20)
            .fill('')
            .map((_, index) => `var(--tui-chart-categorical-0${index + 1})`),
    ];

    protected colors: string[] = this.colorsVariants[0] ?? [];

    protected get computedColors(): string[] {
        return this.colors.slice(0, this.segments);
    }
}
```

---
# directives/Resizer
- **Package**: `CDK`
- **Type**: directives
Directive to resize container in multiple directions.

### How to Use (Import)

```ts
import {TuiResizable, TuiResizer} from '@taiga-ui/cdk';

// ...

@Component({
  standalone: true,
  imports: [
    // ...
    TuiResizable,
    TuiResizer,
  ],
  // ...
})
export class Example {}
```

### How to Use (Template)

```html
<div tuiResizable>
  <div [tuiResizer]="[1, 0]"></div>
</div>
```

### Usage Examples

#### Basic

**Template:**
```html
<div tuiResizable class="left-top item" > [1, 1] <div class="right-bottom-handle handle" [tuiResizer]="[1, 1]" ></div>
</div>
<div tuiResizable class="top-middle item" > [0, 1] <div class="top-middle-handle handle" [tuiResizer]="[0, 1]" ></div>
</div>
<div tuiResizable class="top-right item" > [-1, 1] <div class="top-right-handle handle" [tuiResizer]="[-1, 1]" ></div>
</div>
<div tuiResizable class="middle-right item" > [-1, 0] <div class="middle-right-handle handle" [tuiResizer]="[-1, 0]" ></div>
</div>
<div tuiResizable class="bottom-right item" > [-1, -1] <div class="bottom-right-handle handle" [tuiResizer]="[-1, -1]" ></div>
</div>
<div tuiResizable class="middle-bottom item" > [0, -1] <div class="middle-bottom-handle handle" [tuiResizer]="[0, -1]" ></div>
</div>
<div tuiResizable class="bottom-left item" > [1, -1] <div class="bottom-left-handle handle" [tuiResizer]="[1, -1]" ></div>
</div>
<div tuiResizable class="left-middle item" > [1, 0] <div class="left-middle-handle handle" [tuiResizer]="[1, 0]" ></div>
</div>
<div tuiResizable class="middle-middle item" > All <div class="middle-middle-top-handle handle" [tuiResizer]="[0, -2]" ></div>
<div class="middle-middle-right-handle handle" [tuiResizer]="[2, 0]" ></div>
<div class="middle-middle-bottom-handle handle" [tuiResizer]="[0, 2]" ></div>
<div class="middle-middle-left-handle handle" [tuiResizer]="[-2, 0]" ></div>
</div>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiResizable, TuiResizer} from '@taiga-ui/cdk';

@Component({
    standalone: true,
    imports: [TuiResizable, TuiResizer],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {}
```


### TypeScript

```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {TuiDemo} from '@demo/utils';

@Component({
    standalone: true,
    imports: [TuiDemo],
    templateUrl: './index.html',
    changeDetection,
})
export default class Page {}
```

---
# directives/Ripple
- **Package**: `ADDON-MOBILE`
- **Type**: directives
Directive for «ripple» effect on mobile devices

### How to Use (Import)

```ts
import {TuiRipple} from '@taiga-ui/addon-mobile';

// ...

@Component({
  standalone: true,
  imports: [
    // ...
    TuiRipple,
  ],
  // ...
})
export class Example {}
```

### How to Use (Template)

```html
<div tuiRipple>...</div>
```

### Usage Examples

#### Basic

**Template:**
```html
<div tuiRipple [style.--tui-ripple-background]="'radial-gradient(circle, #5c0067 0%, #00d4ff 100%)'" > I've seen things you people wouldn't believe. Attack ships on fire off the shoulder of Orion. I watched C-beams glitter in the dark near the Tannhauser gate. All those moments will be lost in time... like tears in rain... Time to die. </div>
<div tuiRipple [style.--tui-ripple-background]="'skyblue'" > I've seen things you people wouldn't believe. Attack ships on fire off the shoulder of Orion. I watched C-beams glitter in the dark near the Tannhauser gate. All those moments will be lost in time... like tears in rain... Time to die. </div>
<div tuiRipple [style.--tui-ripple-background]="'red'" > I've seen things you people wouldn't believe. Attack ships on fire off the shoulder of Orion. I watched C-beams glitter in the dark near the Tannhauser gate. All those moments will be lost in time... like tears in rain... Time to die. </div>
<div tuiRipple> I've seen things you people wouldn't believe. Attack ships on fire off the shoulder of Orion. I watched C-beams glitter in the dark near the Tannhauser gate. All those moments will be lost in time... like tears in rain... Time to die. </div>
<div tuiRipple [style.--tui-ripple-background]="'blue'" > I've seen things you people wouldn't believe. Attack ships on fire off the shoulder of Orion. I watched C-beams glitter in the dark near the Tannhauser gate. All those moments will be lost in time... like tears in rain... Time to die. </div>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiRipple} from '@taiga-ui/addon-mobile';

@Component({
    standalone: true,
    imports: [TuiRipple],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {}
```

#### Global Ripple

**Template:**
```html
<div tuiRipple="button,.block">
<button tuiButton type="button" > Button </button>
<div class="block">Content</div>
</div>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiRipple} from '@taiga-ui/addon-mobile';
import {TuiButton} from '@taiga-ui/core';

@Component({
    standalone: true,
    imports: [TuiButton, TuiRipple],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {}
```


### TypeScript

```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {TuiDemo} from '@demo/utils';

@Component({
    standalone: true,
    imports: [TuiDemo],
    templateUrl: './index.html',
    changeDetection,
})
export default class Example {}
```

---
# directives/Sensitive
- **Package**: `KIT`
- **Type**: directives
A directive that allows you to hide sensitive data under a pixel mask. This can be account balances,
            write-off amounts and any other content

### How to Use (Import)

```ts
import {Component} from '@angular/core';
import {TuiSensitive} from '@taiga-ui/kit';

// ...

@Component({
  standalone: true,
  imports: [
    // ...
    TuiSensitive,
  ],
})
export class Example {}
```

### How to Use (Template)

```html
<span [tuiSensitive]="true">text</span>
```

### Example

```html
<span [tuiSensitive]="sensitive">Confidential information</span>
```

### API

| Property | Type | Description |
|----------|-----|----------|
| tuiSensitive | `boolean` | Sensitive mode |

### Usage Examples

#### Basic

**Template:**
```html
<span class="small"> Balance: <span [tuiSensitive]="sensitive">100 000$</span>
</span>
<span class="medium"> Balance: <span [tuiSensitive]="sensitive">100 000$</span>
</span>
<span class="big"> Balance: <span [tuiSensitive]="sensitive">100 000$</span>
</span>
<label tuiLabel>
<input tuiSwitch type="checkbox" [(ngModel)]="sensitive" /> hide </label>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiLabel} from '@taiga-ui/core';
import {TuiSensitive, TuiSwitch} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [FormsModule, TuiLabel, TuiSensitive, TuiSwitch],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected sensitive = true;
}
```

#### Components

**Template:**
```html
<button appearance="secondary-destructive" size="m" tuiButton type="button" >
<span> Pay <span [tuiSensitive]="sensitive">1000$</span>
</span>
</button>
<button appearance="flat" size="m" tuiButton type="button" class="tui-space_left-2" >
<span> Pay <span [tuiSensitive]="sensitive">1000$</span>
</span>
</button>
<p>
<tui-badge [style.background]="'var(--tui-status-positive)'" [tuiSensitive]="sensitive" > 12 000$ </tui-badge>
<tui-badge appearance="primary" class="tui-space_left-2" >
<span [tuiSensitive]="sensitive">12 000$</span>
</tui-badge>
<tui-badge appearance="accent" size="xl" class="tui-space_left-2" [tuiSensitive]="sensitive" > 12 000$ </tui-badge>
</p>
<label tuiLabel>
<input tuiSwitch type="checkbox" [(ngModel)]="sensitive" /> Hide </label>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiButton, TuiLabel} from '@taiga-ui/core';
import {TuiBadge, TuiSensitive, TuiSwitch} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [FormsModule, TuiBadge, TuiButton, TuiLabel, TuiSensitive, TuiSwitch],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    protected sensitive = true;
}
```


### TypeScript

```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {TuiDemo} from '@demo/utils';
import {TuiSensitive} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [TuiDemo, TuiSensitive],
    templateUrl: './index.html',
    changeDetection,
})
export default class Page {
    protected sensitive = true;
}
```

---
# directives/Shimmer
- **Package**: `KIT`
- **Type**: directives
tuiShimmer
            directive visually implements the "Shimmer" UI pattern — an animated loading indicator that simulates
            content appearance while data is being fetched. This pattern enhances the user experience by providing
            visual feedback during loading states, helping users understand that the interface is active and content is
            on its way.
        

        When to Use

        
            To indicate loading states in cards, headers, lists, avatars, and other UI elements. When you want to
            visually communicate that content is loading, rather than missing or frozen. Shimmer is used when you have
            cached data that is currently being refreshed and if you have no data at all — a better choice would be
            
                Skeleton

### How to Use (Import)

```ts
@Component({
  standalone: true,
  imports: [
    // ...
    TuiShimmer,
  ],
})
export class Example {
  protected shimmer = true;
}
```

### How to Use (Template)

```html
<!-- Usual HTML element -->
<div [tuiShimmer]="shimmer">I'm shimmering</div>

<!-- Or other component of Taiga UI -->
<tui-calendar [tuiShimmer]="shimmer" />
```

### Example

```html
<section tuiAppearance="floating" tuiCardLarge >
<header tuiHeader>
<hgroup tuiTitle [tuiShimmer]="shimmer" >
<h5>You got $237&nbsp;000,42 left</h5>
<p tuiSubtitle>Where's the money, Lebowski?</p>
</hgroup>
<aside tuiAccessories>
<tui-avatar appearance="primary" src="@tui.star" />
</aside>
</header>
<tui-avatar-stack [tuiShimmer]="shimmer">
<tui-avatar src="https://avatars.githubusercontent.com/u/87331898" />
<tui-avatar src="https://avatars.githubusercontent.com/u/12021443" />
<tui-avatar src="https://avatars.githubusercontent.com/u/35179038" />
<tui-avatar src="https://avatars.githubusercontent.com/u/46284632" />
<tui-avatar src="https://avatars.githubusercontent.com/u/10106368" />
<tui-avatar src="https://avatars.githubusercontent.com/u/11832552" />
</tui-avatar-stack>
<footer>
<button appearance="secondary" size="m" tuiButton type="button" > It's down there </button>
<button size="m" tuiButton type="button" > Take another look </button>
</footer>
</section>
```

### API

| Property | Type | Description |
|----------|-----|----------|
| [tuiShimmer] | `boolean` | Shimmer state |

### Usage Examples

#### Basic

**Template:**
```html
<label tuiLabel>
<input tuiSwitch type="checkbox" [(ngModel)]="loading" /> Loading </label>
<span [style.font]="'var(--tui-font-text-xl)'">Shimmer</span>
<section tuiAppearance="floating" tuiCardLarge >
<header tuiHeader>
<hgroup tuiTitle [tuiShimmer]="loading" >
<h5>You got $237&nbsp;000,42 left</h5>
<p tuiSubtitle>Where's the money, Lebowski?</p>
</hgroup>
<aside tuiAccessories>
<tui-avatar appearance="primary" src="@tui.star" />
</aside>
</header>
<tui-avatar-stack [tuiShimmer]="loading">
<tui-avatar *ngFor="let avatar of avatars" [src]="avatar" />
</tui-avatar-stack>
<footer>
<button appearance="secondary" size="m" tuiButton type="button" > It's down there </button>
<button size="m" tuiButton type="button" > Take another look </button>
</footer>
</section>
<span [style.font]="'var(--tui-font-text-xl)'">Skeleton</span>
<section tuiAppearance="floating" tuiCardLarge >
<header tuiHeader>
<hgroup tuiTitle>
<h5 [tuiSkeleton]="loading && 5"> {{ loading ? '' : 'You got $237&nbsp;000,42 left' }} </h5>
<p tuiSubtitle [tuiSkeleton]="loading && 6" > {{ loading ? '' : "Where's the money, Lebowski?" }} </p>
</hgroup>
<aside tuiAccessories>
<tui-avatar appearance="primary" src="@tui.star" [tuiSkeleton]="loading" />
</aside>
</header>
<tui-avatar-stack>
<tui-avatar *ngFor="let avatar of avatars" [src]="avatar" [tuiSkeleton]="loading" />
</tui-avatar-stack>
<footer>
<button appearance="secondary" size="m" tuiButton type="button" > It's down there </button>
<button size="m" tuiButton type="button" > Take another look </button>
</footer>
</section>
```
**TypeScript:**
```ts
import {NgFor} from '@angular/common';
import {Component} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {TuiDemo} from '@demo/utils';
import {TuiAppearance, TuiButton, TuiLabel, TuiTitle} from '@taiga-ui/core';
import {
    TuiAvatar,
    TuiAvatarStack,
    TuiShimmer,
    TuiSkeleton,
    TuiSwitch,
} from '@taiga-ui/kit';
import {TuiCardLarge, TuiHeader} from '@taiga-ui/layout';

@Component({
    standalone: true,
    imports: [
        FormsModule,
        NgFor,
        TuiAppearance,
        TuiAvatar,
        TuiAvatarStack,
        TuiButton,
        TuiCardLarge,
        TuiDemo,
        TuiHeader,
        TuiLabel,
        TuiShimmer,
        TuiSkeleton,
        TuiSwitch,
        TuiTitle,
    ],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    changeDetection,
})
export default class Example {
    protected loading = true;

    protected readonly avatars = [
        'https://avatars.githubusercontent.com/mdlufy',
        'https://avatars.githubusercontent.com/splincode',
        'https://avatars.githubusercontent.com/nsbarsukov',
        'https://avatars.githubusercontent.com/vladimirpotekhin',
        'https://avatars.githubusercontent.com/marsibarsi',
        'https://avatars.githubusercontent.com/waterplea',
    ];
}
```

#### Disabled animations

**Template:**
```html
<label tuiLabel>
<input tuiSwitch type="checkbox" [(ngModel)]="loading" /> Loading </label>
<section tuiAppearance="floating" tuiCardLarge >
<header tuiHeader>
<hgroup tuiTitle [tuiShimmer]="loading" >
<h5>You got $237&nbsp;000,42 left</h5>
<p tuiSubtitle>Where's the money, Lebowski?</p>
</hgroup>
<aside tuiAccessories>
<tui-avatar appearance="primary" src="@tui.star" />
</aside>
</header>
<tui-avatar-stack [tuiShimmer]="loading">
<tui-avatar *ngFor="let avatar of avatars; let index = index" [src]="avatar" />
</tui-avatar-stack>
<footer>
<button appearance="secondary" size="m" tuiButton type="button" > It's down there </button>
<button size="m" tuiButton type="button" > Take another look </button>
</footer>
</section>
```
**TypeScript:**
```ts
import {NgFor} from '@angular/common';
import {Component} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {TuiDemo} from '@demo/utils';
import {TuiAppearance, TuiButton, TuiLabel, TuiTitle} from '@taiga-ui/core';
import {TuiAvatar, TuiAvatarStack, TuiShimmer, TuiSwitch} from '@taiga-ui/kit';
import {TuiCardLarge, TuiHeader} from '@taiga-ui/layout';

@Component({
    standalone: true,
    imports: [
        FormsModule,
        NgFor,
        TuiAppearance,
        TuiAvatar,
        TuiAvatarStack,
        TuiButton,
        TuiCardLarge,
        TuiDemo,
        TuiHeader,
        TuiLabel,
        TuiShimmer,
        TuiSwitch,
        TuiTitle,
    ],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    changeDetection,
})
export default class Example {
    protected loading = true;

    protected readonly avatars = [
        'https://avatars.githubusercontent.com/mdlufy',
        'https://avatars.githubusercontent.com/splincode',
        'https://avatars.githubusercontent.com/nsbarsukov',
        'https://avatars.githubusercontent.com/vladimirpotekhin',
        'https://avatars.githubusercontent.com/marsibarsi',
        'https://avatars.githubusercontent.com/waterplea',
    ];
}
```


### TypeScript

```ts
import {Component} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {DemoRoute} from '@demo/routes';
import {TuiDemo} from '@demo/utils';
import {TuiAppearance, TuiButton, TuiLink, TuiTitle} from '@taiga-ui/core';
import {TuiAvatar, TuiAvatarStack, TuiShimmer} from '@taiga-ui/kit';
import {TuiCardLarge, TuiHeader} from '@taiga-ui/layout';

@Component({
    standalone: true,
    imports: [
        FormsModule,
        TuiAppearance,
        TuiAvatar,
        TuiAvatarStack,
        TuiButton,
        TuiCardLarge,
        TuiDemo,
        TuiHeader,
        TuiLink,
        TuiShimmer,
        TuiTitle,
    ],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    changeDetection,
})
export default class Page {
    protected readonly routes = DemoRoute;
    protected readonly examples = ['Basic', 'Disabled animations'];

    protected shimmer = true;
}
```

### LESS

```less
footer {
    display: flex;
    gap: 1.25rem;

    button {
        flex: 1;
    }
}
```

---
# directives/Skeleton
- **Package**: `KIT`
- **Type**: directives

### How to Use (Import)

```ts
import {Component} from '@angular/core';
import {TuiSkeleton} from '@taiga-ui/kit';
// ...

@Component({
  standalone: true,
  imports: [
    // ...
    TuiSkeleton,
  ],
})
export class Example {}
```

### How to Use (Template)

```html
<span [tuiSkeleton]="true">Loading..</span>
```

### Usage Examples

#### Components

**Template:**
```html
<label tuiLabel>
<input tuiSwitch type="checkbox" [(ngModel)]="skeleton" /> Show skeleton </label>
<p>
<tui-avatar src="AI" [tuiSkeleton]="skeleton" />
<tui-avatar src="https://avatars.githubusercontent.com/u/11832552" [tuiSkeleton]="skeleton" />
<tui-avatar src="❤️" [tuiSkeleton]="skeleton" />
<tui-avatar appearance="primary" src="$" [tuiSkeleton]="skeleton" />
</p>
<section tuiAppearance="neutral" tuiCardLarge [tuiSkeleton]="skeleton" >
<h2 tuiHeader>
<span tuiTitle> Card <span tuiSubtitle>Subtitle</span>
</span>
</h2> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </section>
<p>
<tui-progress-circle [tuiSkeleton]="skeleton" [value]="0.33" />
<tui-avatar-stack>
<tui-avatar src="AI" [tuiSkeleton]="skeleton" />
<tui-avatar src="https://avatars.githubusercontent.com/u/11832552" [tuiSkeleton]="skeleton" />
<tui-avatar src="❤️" [tuiSkeleton]="skeleton" />
<tui-avatar appearance="primary" src="$" [tuiSkeleton]="skeleton" />
</tui-avatar-stack>
</p>
<p>
<button tuiButton type="button" [tuiSkeleton]="skeleton" > Awesome </button>
<button appearance="secondary" tuiButton type="button" [tuiSkeleton]="skeleton" > Cool </button>
</p>
<p>
<tui-chip [tuiSkeleton]="skeleton">Chip</tui-chip>
<tui-badge [tuiSkeleton]="skeleton">Dale</tui-badge>
</p>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiAppearance, TuiButton, TuiLabel, TuiTitle} from '@taiga-ui/core';
import {
    TuiAvatar,
    TuiAvatarStack,
    TuiBadge,
    TuiChip,
    TuiProgressCircle,
    TuiSkeleton,
    TuiSwitch,
} from '@taiga-ui/kit';
import {TuiCardLarge, TuiHeader} from '@taiga-ui/layout';

@Component({
    standalone: true,
    imports: [
        FormsModule,
        TuiAppearance,
        TuiAvatar,
        TuiAvatarStack,
        TuiBadge,
        TuiButton,
        TuiCardLarge,
        TuiChip,
        TuiHeader,
        TuiLabel,
        TuiProgressCircle,
        TuiSkeleton,
        TuiSwitch,
        TuiTitle,
    ],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected skeleton = false;
}
```

#### Text

You can pass boolean to toggle skeleton for elements. For multi line text you can use string to serve as a placeholder underneath the text skeleton or a number to generate this many random sized words, while your actual text is loading

**Template:**
```html
<label tuiLabel>
<input tuiSwitch type="checkbox" [(ngModel)]="skeleton" /> Show skeleton </label>
<p>
<span [tuiSkeleton]=" skeleton ? 'This text serves as the content behind the skeleton and depending on its length, the skeleton will adjust to fit it.' : '' " > {{ skeleton ? '' : 'This text will be replaced by a placeholder.' }} </span>
</p>
<span [tuiSkeleton]="skeleton && 20"> {{ skeleton ? '' : 'This text will be replaced by a skeleton made of 20 random length non-breaking spaces.' }} </span>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiLabel} from '@taiga-ui/core';
import {TuiSkeleton, TuiSwitch} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [FormsModule, TuiLabel, TuiSkeleton, TuiSwitch],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    protected skeleton = false;
}
```


### TypeScript

```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {TuiDemo} from '@demo/utils';

@Component({
    standalone: true,
    imports: [TuiDemo],
    templateUrl: './index.html',
    changeDetection,
})
export default class Page {}
```

---
# directives/Swipe
- **Package**: `CDK`
- **Type**: directives
tuiSwipe
            directive allows detecting swipes on mobile devices.
        

        
            You can configure the directive with
            TUI_SWIPE_OPTIONS
            token.
            
            Allowed options:
        
        
            
                timeout:
            
            max time between touchstart and touchend
            
                threshold
                :
            
            min distance between touchstart and touchend.

### How to Use (Import)

```ts
import {TuiSwipe} from '@taiga-ui/cdk';

// ...

@Component({
  standalone: true,
  imports: [
    // ...
    TuiSwipe,
  ],
  // ...
})
export class Example {}
```

### How to Use (Template)

```html
<div (tuiSwipe)="..."></div>
```

### Usage Examples

#### Basic

**Template:**
```html
<div [class]="'box tui-text_body-l ' + swiped" (tuiSwipe)="onSwipe($event)" > Swiped {{ swiped }} </div>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiSwipe, type TuiSwipeEvent} from '@taiga-ui/cdk';

@Component({
    standalone: true,
    imports: [TuiSwipe],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
    host: {
        '[class]': 'swiped',
    },
})
export default class Example {
    protected swiped = 'default';

    protected onSwipe(swipe: TuiSwipeEvent): void {
        this.swiped = swipe.direction;
    }
}
```

#### With sidebar

**Template:**
```html
<div class="container tui-text_body-l" (tuiSwipe)="onSwipe($event)" > Swipe left to open <div *tuiSidebar="!!(open$ | async); direction: 'right'" class="sidebar tui-text_body-l" (tuiSwipe)="onSwipe($event)" > Swipe right to close </div>
</div>
```
**TypeScript:**
```ts
import {AsyncPipe} from '@angular/common';
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiSidebar} from '@taiga-ui/addon-mobile';
import {TuiSwipe, type TuiSwipeEvent} from '@taiga-ui/cdk';
import {Subject} from 'rxjs';

@Component({
    standalone: true,
    imports: [AsyncPipe, TuiSidebar, TuiSwipe],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly open$ = new Subject<boolean>();

    protected toggle(open: boolean): void {
        this.open$.next(open);
    }

    protected onSwipe(swipe: TuiSwipeEvent): void {
        console.info(swipe.direction);

        if (swipe.direction === 'left') {
            this.toggle(true);
        }

        if (swipe.direction === 'right') {
            this.toggle(false);
        }
    }
}
```


### TypeScript

```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {TuiDemo} from '@demo/utils';

@Component({
    standalone: true,
    imports: [TuiDemo],
    templateUrl: './index.html',
    changeDetection,
})
export default class Page {
    protected readonly examples = ['Basic', 'With sidebar'];
}
```

---
# directives/Theme
- **Package**: `null`
- **Type**: directives
tuiTheme
        allows to set style for a DOM branch. By default
        dark
        and
        light
        are included. Importing is not required.

### Usage Examples

#### Themes

**Template:**
```html
<div tuiTheme="dark" class="dark" >
<p>
<tui-textfield>
<label tuiLabel>Text</label>
<input tuiTextfield [(ngModel)]="text" />
</tui-textfield>
</p>
<p>
<input tuiSwitch type="checkbox" [(ngModel)]="toggle" />
</p>
<p>
<tui-textfield>
<label tuiLabel>Sum</label>
<input tuiInputNumber [(ngModel)]="money" />
</tui-textfield>
</p>
<div tuiTheme="light" class="light" >
<p>
<tui-textfield>
<label tuiLabel>Text</label>
<input tuiTextfield [(ngModel)]="text" />
</tui-textfield>
</p>
<p>
<input tuiSwitch type="checkbox" [(ngModel)]="toggle" />
</p>
<p>
<tui-textfield>
<label tuiLabel>Sum</label>
<input tuiInputNumber [(ngModel)]="money" />
</tui-textfield>
</p>
</div>
</div>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiTextfield} from '@taiga-ui/core';
import {TuiInputNumber, TuiSwitch} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [FormsModule, TuiInputNumber, TuiSwitch, TuiTextfield],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected toggle = false;
    protected text = '';
    protected money = 237;
}
```

#### Toggling

**Template:**
```html
Dark mode enabled: {{ darkMode() }} <p>
<button tuiButton type="button" (click)="darkMode.set(!darkMode())" > Toggle </button>
<button tuiButton type="button" (click)="darkMode.reset()" > Reset </button>
</p>
<p>Add to Root to enable:</p>
<code>&lt;tui-root [attr.tuiTheme]="darkMode() ? 'dark' : null"&gt;&lt;/tui-root&gt;</code>
```
**TypeScript:**
```ts
import {Component, inject} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {WA_LOCAL_STORAGE, WA_WINDOW} from '@ng-web-apis/common';
import {TUI_DARK_MODE, TUI_DARK_MODE_KEY, TuiButton} from '@taiga-ui/core';

@Component({
    standalone: true,
    imports: [TuiButton],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    private readonly key = inject(TUI_DARK_MODE_KEY);
    private readonly storage = inject(WA_LOCAL_STORAGE);
    private readonly media = inject(WA_WINDOW).matchMedia('(prefers-color-scheme: dark)');

    protected readonly darkMode = inject(TUI_DARK_MODE);

    protected reset(): void {
        this.darkMode.set(this.media.matches);
        this.storage?.removeItem(this.key);
    }
}
```


### TypeScript

```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {TuiDemo} from '@demo/utils';

@Component({
    standalone: true,
    imports: [TuiDemo],
    templateUrl: './index.html',
    changeDetection,
})
export default class Page {
    protected readonly examples = ['Themes', 'Toggling'];
}
```

---
# directives/Title
- **Package**: `CORE`
- **Type**: directives
A directive for title with optional subtitle

### How to Use (Import)

```ts
import {TuiTitle} from '@taiga-ui/core';

// ...

@Component({
  standalone: true,
  imports: [
    // ...
    TuiTitle,
  ],
  // ...
})
export class Example {}
```

### How to Use (Template)

```html
<h2 tuiTitle="s">
  <div tuiSubtitle>Caption</div>
  I am a title
  <div tuiSubtitle>I'm a subtitle</div>
</h2>
```

### Usage Examples

#### Basic

**Template:**
```html
<h2 tuiTitle>I am a title</h2>
<h2 tuiTitle> I am a title <div tuiSubtitle>I'm a subtitle</div>
</h2>
<h2 tuiTitle>
<div tuiSubtitle>Caption</div> I am a title </h2>
<h2 tuiTitle>
<div tuiSubtitle>Caption</div> I am a title <div tuiSubtitle>I'm a subtitle</div>
</h2>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiTitle} from '@taiga-ui/core';

@Component({
    standalone: true,
    imports: [TuiTitle],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {}
```

#### Sizes

**Template:**
```html
<h2 tuiTitle="s">
<div tuiSubtitle>Caption</div> I am a title <div tuiSubtitle>I'm a subtitle</div>
</h2>
<h2 tuiTitle="m">
<div tuiSubtitle>Caption</div> I am a title </h2>
<h2 tuiTitle="l"> I am a title <div tuiSubtitle>I'm a subtitle</div>
</h2>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiTitle} from '@taiga-ui/core';

@Component({
    standalone: true,
    imports: [TuiTitle],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {}
```

#### Custom

**Template:**
```html
<h2 tuiTitle>
<b>I am a title</b>
<div tuiSubtitle [style.color]="'var(--tui-text-secondary)'" > I'm a subtitle </div>
</h2>
<a href="https://github.com/taiga-family/taiga-ui" tuiLink tuiTitle [style.font-size.rem]="1" [style.line-height.rem]="1.25" > Taiga UI — GitHub <div tuiSubtitle [style.font]="'var(--tui-font-text-s)'" > Drop us a star! </div>
</a>
<label class="flex">
<tui-avatar size="s" src="assets/images/avatar.jpg" />
<div tuiTitle="s">
<strong>Alex Inkin</strong>
<div tuiSubtitle>Available</div>
</div>
</label>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiLink, TuiTitle} from '@taiga-ui/core';
import {TuiAvatar} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [TuiAvatar, TuiLink, TuiTitle],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {}
```


### TypeScript

```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {TuiDemo} from '@demo/utils';

@Component({
    standalone: true,
    imports: [TuiDemo],
    templateUrl: './index.html',
    changeDetection,
})
export default class Page {
    protected readonly examples = ['Basic', 'Sizes', 'Custom'];
}
```

---
# directives/Touchable
- **Package**: `ADDON-MOBILE`
- **Type**: directives
Directive to emulate native iOS touches

### How to Use (Import)

```ts
import {TuiTouchable} from '@taiga-ui/addon-mobile';

// ...

@Component({
  standalone: true,
  imports: [
    // ...
    TuiTouchable,
  ],
  // ...
})
export class Example {}
```

### How to Use (Template)

```html
<div tuiTouchable="transform">...</div>
<a
  tuiLink
  tuiTouchable="opacity"
>
  ...
</a>
```

### Usage Examples

#### Basic

**Template:**
```html
<div tuiAppearance="floating" tuiCardLarge tuiTouchable="transform" class="tui-space_bottom-3" >
<h2 [style.margin]="0">transform</h2> I've seen things you people wouldn't believe. Attack ships on fire off the shoulder of Orion. I watched C-beams glitter in the dark near the Tannhauser gate. All those moments will be lost in time... like tears in rain... Time to die. </div>
<div tuiAppearance="floating" tuiCardLarge tuiTouchable="opacity" class="tui-space_bottom-3" >
<h2 [style.margin]="0">opacity</h2> I've seen things you people wouldn't believe. Attack ships on fire off the shoulder of Orion. I watched C-beams glitter in the dark near the Tannhauser gate. All those moments will be lost in time... like tears in rain... Time to die. </div>
<div tuiAppearance="floating" tuiCardLarge tuiTouchable="background" class="tui-space_bottom-3" >
<h2 [style.margin]="0">background</h2> I've seen things you people wouldn't believe. Attack ships on fire off the shoulder of Orion. I watched C-beams glitter in the dark near the Tannhauser gate. All those moments will be lost in time... like tears in rain... Time to die. </div>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiTouchable} from '@taiga-ui/addon-mobile';
import {TuiAppearance} from '@taiga-ui/core';
import {TuiCardLarge} from '@taiga-ui/layout';

@Component({
    standalone: true,
    imports: [TuiAppearance, TuiCardLarge, TuiTouchable],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {}
```


### TypeScript

```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {TuiDemo} from '@demo/utils';

@Component({
    standalone: true,
    imports: [TuiDemo],
    templateUrl: './index.html',
    changeDetection,
})
export default class Page {}
```

---
# directives/Validator
- **Package**: `CDK`
- **Type**: directives
tuiValidator
            allows set validators for form control on the fly

### How to Use (Import)

```ts
import {TuiValidator} from '@taiga-ui/cdk';

// ...

@Component({
  standalone: true,
  imports: [
    // ...
    TuiValidator,
  ],
  // ...
})
export class Example {}
```

### How to Use (Template)

```html
<tui-input
  formControlName="control"
  [tuiValidator]="validator"
></tui-input>
```

### Usage Examples

#### Basic

**Template:**
```html
<form [formGroup]="group">
<tui-input formControlName="name">Name</tui-input>
<tui-textfield tuiChevron class="tui-space_vertical-3" >
<label tuiLabel>Connection</label>
<input tuiSelect [ngModelOptions]="{standalone: true}" [(ngModel)]="type" />
<tui-data-list-wrapper *tuiTextfieldDropdown new [items]="items" />
</tui-textfield>
<tui-input *ngIf="type === items[0]!; else phone" formControlName="contact" [tuiValidator]="validator" > Contact </tui-input>
<ng-template #phone>
<tui-input-phone formControlName="contact">Contact</tui-input-phone>
</ng-template>
</form>
```
**TypeScript:**
```ts
import {NgIf} from '@angular/common';
import {Component} from '@angular/core';
import {
    FormControl,
    FormGroup,
    FormsModule,
    ReactiveFormsModule,
    Validators,
} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiValidator} from '@taiga-ui/cdk';
import {TuiTextfield} from '@taiga-ui/core';
import {TuiChevron, TuiDataListWrapper, TuiSelect} from '@taiga-ui/kit';
import {TuiInputModule, TuiInputPhoneModule} from '@taiga-ui/legacy';

@Component({
    standalone: true,
    imports: [
        FormsModule,
        NgIf,
        ReactiveFormsModule,
        TuiChevron,
        TuiDataListWrapper,
        TuiInputModule,
        TuiInputPhoneModule,
        TuiSelect,
        TuiTextfield,
        TuiValidator,
    ],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly items = ['Email', 'Phone'];

    protected type = this.items[0]!;

    protected readonly group = new FormGroup({
        name: new FormControl('', Validators.required),
        contact: new FormControl('', Validators.required),
    });

    protected readonly validator = Validators.email;
}
```


### TypeScript

```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {TuiDemo} from '@demo/utils';

@Component({
    standalone: true,
    imports: [TuiDemo],
    templateUrl: './index.html',
    changeDetection,
})
export default class Page {}
```

---
# directives/ValueChanges
- **Package**: `CDK`
- **Type**: directives
This directive allows you to access reactive control or container value changes as an output

### How to Use (Import)

```ts
import {TuiValueChanges} from '@taiga-ui/cdk';

// ...

@Component({
  standalone: true,
  imports: [
    // ...
    TuiValueChanges,
  ],
  // ...
})
export class Example {}
```

### How to Use (Template)

```html
<input
  [formControl]="control"
  (tuiValueChanges)="onChanges($event)"
/>
```

### Usage Examples

#### Control

**Template:**
```html
<form [formGroup]="form">
<tui-input formControlName="control" (tuiValueChanges)="onChanges($event)" > Value changes on blur </tui-input>
</form>
```
**TypeScript:**
```ts
import {Component, inject} from '@angular/core';
import {FormControl, FormGroup, ReactiveFormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiValueChanges} from '@taiga-ui/cdk';
import {TuiAlertService} from '@taiga-ui/core';
import {TuiInputModule} from '@taiga-ui/legacy';

@Component({
    standalone: true,
    imports: [ReactiveFormsModule, TuiInputModule, TuiValueChanges],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    private readonly alerts = inject(TuiAlertService);

    protected readonly form = new FormGroup({
        control: new FormControl('', {updateOn: 'blur'}),
    });

    protected onChanges(value: string): void {
        this.alerts.open(value).subscribe();
    }
}
```

#### Container

**Template:**
```html
<form [formGroup]="form" (tuiValueChanges)="onChanges($event)" >
<tui-textfield>
<label tuiLabel>Value changes on blur</label>
<input formControlName="name" tuiTextfield />
</tui-textfield>
<tui-textfield class="tui-space_top-4">
<label tuiLabel>Value changes on edit</label>
<input formControlName="age" tuiInputNumber [step]="1" />
</tui-textfield>
</form>
```
**TypeScript:**
```ts
import {Component, inject} from '@angular/core';
import {FormControl, FormGroup, ReactiveFormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiValueChanges} from '@taiga-ui/cdk';
import {TuiAlertService, TuiTextfield} from '@taiga-ui/core';
import {TuiInputNumber} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [ReactiveFormsModule, TuiInputNumber, TuiTextfield, TuiValueChanges],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    private readonly alerts = inject(TuiAlertService);

    protected readonly form = new FormGroup({
        name: new FormControl('', {updateOn: 'blur'}),
        age: new FormControl<number | null>(null),
    });

    protected onChanges(value: string): void {
        this.alerts.open(JSON.stringify(value)).subscribe();
    }
}
```


### TypeScript

```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {TuiDemo} from '@demo/utils';

@Component({
    standalone: true,
    imports: [TuiDemo],
    templateUrl: './index.html',
    changeDetection,
})
export default class Page {
    protected readonly examples = ['Control', 'Container'];
}
```

---
# directives/Zoom
- **Package**: `CDK`
- **Type**: directives
tuiZoom
            directive emits delta between wheel events or between pinch on mobile devices. It emits coordinates of the
            zoom center as well. You can use it to change the scale of an element as in example below

### How to Use (Import)

```ts
import {TuiZoom} from '@taiga-ui/cdk';

// ...

@Component({
  standalone: true,
  imports: [
    // ...
    TuiZoom,
  ],
  // ...
})
export class Example {}
```

### How to Use (Template)

```html
<div (tuiZoom)="onZoom(scale += $event.delta)">
  <div [style.transform]="'scale(' + scale + ')'">Zoomable</div>
</div>
```

### Usage Examples

#### Simple

**Template:**
```html
<div class="t-container" (tuiZoom)="onZoom($event)" >
<div class="t-zoomable" [style.transform]="transform$ | async" >
<span>{{ scale$ | async | number: '1.0-3' }}</span>
</div>
</div>
```
**TypeScript:**
```ts
import {AsyncPipe, DecimalPipe} from '@angular/common';
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {tuiClamp, TuiZoom, type TuiZoomEvent} from '@taiga-ui/cdk';
import {map, scan, startWith, Subject} from 'rxjs';

@Component({
    standalone: true,
    imports: [AsyncPipe, DecimalPipe, TuiZoom],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly delta$ = new Subject<number>();

    protected readonly scale$ = this.delta$.pipe(
        scan((scale, next) => tuiClamp(scale + next, 0.5, 3), 1),
        startWith(1),
    );

    protected readonly transform$ = this.scale$.pipe(map((scale) => `scale(${scale})`));

    protected onZoom({delta}: TuiZoomEvent): void {
        this.delta$.next(delta);
    }
}
```


### TypeScript

```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {TuiDemo} from '@demo/utils';

@Component({
    standalone: true,
    imports: [TuiDemo],
    templateUrl: './index.html',
    changeDetection,
})
export default class Page {}
```

---
# customization/Appearances
- **Package**: `null`
- **Type**: null

### Usage Examples

#### Imitate material

**Template:**
```html
<tui-textfield>
<label tuiLabel>Input example</label>
<input minlength="5" tuiTextfield [(ngModel)]="value" />
</tui-textfield>
<label tuiLabel class="tui-space_vertical-4" >
<input size="s" tuiCheckbox type="checkbox" [(ngModel)]="checkbox" />
<small>Checkbox example</small>
</label>
<button tuiButton type="button" > Submit </button>
```
**TypeScript:**
```ts
import {
    ChangeDetectionStrategy,
    Component,
    signal,
    ViewEncapsulation,
} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {
    TuiButton,
    tuiButtonOptionsProvider,
    TuiTextfield,
    tuiTextfieldOptionsProvider,
} from '@taiga-ui/core';
import {TuiCheckbox, tuiCheckboxOptionsProvider, TuiStep} from '@taiga-ui/kit';

@Component({
    standalone: true,
    selector: 'tui-wrapper-example-1',
    imports: [FormsModule, TuiButton, TuiCheckbox, TuiStep, TuiTextfield],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation: ViewEncapsulation.None,
    changeDetection: ChangeDetectionStrategy.OnPush,
    providers: [
        tuiButtonOptionsProvider({appearance: 'material-button', size: 's'}),
        tuiCheckboxOptionsProvider({appearance: 'material-checkbox'}),
        tuiTextfieldOptionsProvider({
            appearance: signal('material-textfield'),
            cleaner: signal(false),
        }),
    ],
})
export class TuiWrapperExample1 {
    protected value = '';
    protected checkbox = false;
}
```


### TypeScript

```ts
import {ClipboardModule} from '@angular/cdk/clipboard';
import {Component, ViewEncapsulation} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {DemoRoute} from '@demo/routes';
import {TuiDemo} from '@demo/utils';
import {TuiLink} from '@taiga-ui/core';

import {TuiWrapperExample1} from './examples/1';

@Component({
    standalone: true,
    imports: [ClipboardModule, TuiDemo, TuiLink, TuiWrapperExample1],
    templateUrl: './index.html',
    encapsulation: ViewEncapsulation.None,
    changeDetection,
})
export default class Page {
    protected readonly example1 = {
        HTML: import('./examples/1/index.html?raw'),
        LESS: import('./examples/1/index.less?raw'),
        TypeScript: import('./examples/1/index.ts?raw'),
    };

    protected readonly mixins = [
        '.appearance-hover(@ruleset)',
        '.appearance-active(@ruleset)',
        '.appearance-disabled(@ruleset)',
        '.appearance-focus(@ruleset)',
    ];

    protected readonly routes = DemoRoute;
}
```

---
# customization/Custom dialogs
- **Package**: `null`
- **Type**: null

### Usage Examples

#### Custom dialog

**Template:**
```html
<button tuiButton type="button" (click)="onClick(choose, poorly, wisely)" > Show prompt </button>
<ng-template #choose>
<div class="wrapper">
<tui-avatar size="l" src="assets/images/choose.png" class="tui-space_right-2" /> «Choose wisely» </div>
</ng-template>
<ng-template #poorly>
<div class="wrapper">
<tui-avatar src="assets/images/poorly.png" class="tui-space_right-2" /> «You chose poorly» </div>
</ng-template>
<ng-template #wisely>
<div class="wrapper"> «You have chosen wisely» <tui-avatar src="assets/images/wisely.png" class="tui-space_left-1" />
</div>
</ng-template>
```
**TypeScript:**
```ts
import {Component, inject} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {TuiAlertService, TuiButton} from '@taiga-ui/core';
import {TuiAvatar} from '@taiga-ui/kit';
import {type PolymorpheusContent} from '@taiga-ui/polymorpheus';
import {switchMap} from 'rxjs';

import {PromptService} from './prompt/prompt.service';

@Component({
    standalone: true,
    selector: 'tui-dialogs-example-1',
    imports: [TuiAvatar, TuiButton],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    changeDetection,
})
export class TuiDialogsExample1 {
    private readonly alerts = inject(TuiAlertService);
    private readonly promptService = inject(PromptService);

    protected onClick(
        choose: PolymorpheusContent,
        poorly: PolymorpheusContent,
        wisely: PolymorpheusContent,
    ): void {
        this.promptService
            .open(choose, {
                heading: 'Taiga UI is the best',
                buttons: ['Absolutely!', 'No way!'],
            })
            .pipe(
                switchMap((response) =>
                    response
                        ? this.alerts.open(wisely, {
                              appearance: 'positive',
                          })
                        : this.alerts.open(poorly, {
                              appearance: 'negative',
                          }),
                ),
            )
            .subscribe();
    }
}
```

#### Custom dialog with directive

**Template:**
```html
<button size="m" tuiButton type="button" (click)="open = true" > Show </button>
<ng-template let-observer [tuiCustomDialogOptions]="{size: 's'}" [(tuiCustomDialog)]="open" >
<p>This abstracts away service and subscription</p>
<p>
<button tuiButton type="button" (click)="observer.complete()" > Ok </button>
</p>
</ng-template>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {TuiButton} from '@taiga-ui/core';

import {CustomDialogDirective} from './custom-dialog/custom-dialog.directive';

@Component({
    standalone: true,
    selector: 'tui-dialogs-example-2',
    imports: [CustomDialogDirective, TuiButton],
    templateUrl: './index.html',
    changeDetection,
})
export class TuiDialogsExample2 {
    protected open = false;
}
```


### TypeScript

```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {TuiDemo} from '@demo/utils';

import {TuiDialogsExample1} from './examples/1';
import {TuiDialogsExample2} from './examples/2';

@Component({
    standalone: true,
    imports: [TuiDemo, TuiDialogsExample1, TuiDialogsExample2],
    templateUrl: './index.html',
    changeDetection,
})
export default class Page {
    protected readonly example1 = {
        TypeScript: import('./examples/1/index.ts?raw'),
        HTML: import('./examples/1/index.html?raw'),
        LESS: import('./examples/1/index.less?raw'),
        'prompt/prompt.service.ts': import('./examples/1/prompt/prompt.service.ts?raw'),
        'prompt/prompt-options.ts': import('./examples/1/prompt/prompt-options.ts?raw'),
        'prompt/prompt.component.ts': import(
            './examples/1/prompt/prompt.component.ts?raw'
        ),
        'prompt/prompt.template.html': import(
            './examples/1/prompt/prompt.template.html?raw'
        ),
        'prompt/prompt.style.less': import('./examples/1/prompt/prompt.style.less?raw'),
    };

    protected readonly example2 = {
        TypeScript: import('./examples/2/index.ts?raw'),
        HTML: import('./examples/2/index.html?raw'),
        'custom-dialog/custom-dialog.service.ts': import(
            './examples/2/custom-dialog/custom-dialog.service.ts?raw'
        ),
        'custom-dialog/custom-dialog.directive.ts': import(
            './examples/2/custom-dialog/custom-dialog.directive.ts?raw'
        ),
        'custom-dialog/custom-dialog.component.ts': import(
            './examples/2/custom-dialog/custom-dialog.component.ts?raw'
        ),
        'custom-dialog/custom-dialog.style.less': import(
            './examples/2/custom-dialog/custom-dialog.style.less?raw'
        ),
    };
}
```

---
# customization/Internationalization (i18n)
- **Package**: `null`
- **Type**: null

### TypeScript

```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {TuiDemo} from '@demo/utils';
import {TuiDocLanguageSwitcher} from '@taiga-ui/addon-doc';
import {TuiTablePagination} from '@taiga-ui/addon-table';
import {TuiLink} from '@taiga-ui/core';
import {TuiAccordion} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [TuiAccordion, TuiDemo, TuiDocLanguageSwitcher, TuiLink, TuiTablePagination],
    templateUrl: './index.html',
    changeDetection,
})
export default class Page {
    protected example = {
        base: import('./base.md?raw'),
        dynamic: import('./dynamic.md?raw'),
        esbuild: import('./esbuild.md?raw'),
        custom: import('./custom.md?raw'),
    };

    protected example1 = {
        'language-switcher.html': import(
            '../../../../../addon-doc/components/language-switcher/index.html?raw'
        ),
        'language-switcher.ts': import(
            '../../../../../addon-doc/components/language-switcher/index.ts?raw'
        ),
        'language-switcher.less': import(
            '../../../../../addon-doc/components/language-switcher/index.less?raw'
        ),
    };
}
```

---
# customization/Portals
- **Package**: `null`
- **Type**: null
You can easily create your custom portals by extending our abstract classes and put your own portal-host on
            any layer

### Usage Examples

#### Custom portals

**Template:**
```html
<button iconStart="@tui.plus" size="s" tuiButton type="button" (click)="addTemplate(someTemplate)" > Add </button>
<button appearance="secondary" iconStart="@tui.trash" size="s" tuiButton type="button" class="tui-space_left-3" (click)="removeTemplate()" > Remove </button>
<ng-template #someTemplate>
<div class="template">
<div class="greeting"> Hello Taiga UI <tui-icon icon="@tui.heart" class="icon" />
</div>
</div>
</ng-template>
```
**TypeScript:**
```ts
import {Component, type EmbeddedViewRef, inject, type TemplateRef} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {TuiButton, TuiIcon} from '@taiga-ui/core';

import {CustomPortalService} from './service';

@Component({
    standalone: true,
    selector: 'tui-portals-example-1',
    imports: [TuiButton, TuiIcon],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    changeDetection,
})
export class TuiPortalsExample1 {
    private readonly customPortalService = inject(CustomPortalService);

    protected templates: Array<EmbeddedViewRef<unknown>> = [];

    protected addTemplate(template: TemplateRef<unknown>): void {
        this.templates.push(this.customPortalService.addTemplate(template));
    }

    protected removeTemplate(): void {
        const viewRef = this.templates.pop();

        if (viewRef) {
            this.customPortalService.removeTemplate(viewRef);
        }
    }
}
```


### TypeScript

```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {TuiDemo} from '@demo/utils';

import {TuiPortalsExample1} from './examples/1';

@Component({
    standalone: true,
    imports: [TuiDemo, TuiPortalsExample1],
    templateUrl: './index.html',
    changeDetection,
})
export default class Page {
    protected host = import('./examples/setup/create-host.md?raw');
    protected service = import('./examples/setup/create-service.md?raw');
    protected insert = import('./examples/setup/insert-host.md?raw');

    protected readonly example1 = {
        TypeScript: import('./examples/1/index.ts?raw'),
        HTML: import('./examples/1/index.html?raw'),
        LESS: import('./examples/1/index.less?raw'),
        'portal.ts': import('./examples/1/portal.ts?raw'),
        'service.ts': import('./examples/1/service.ts?raw'),
    };
}
```

---
# routable/Routable dialog
- **Package**: `null`
- **Type**: null

### Usage Examples

#### Eager loading dialog

**Template:**
```html
<button routerLink="path/to/dialog" tuiButton type="button" > Open dialog </button>
<router-outlet />
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {RouterLink, RouterOutlet} from '@angular/router';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiButton} from '@taiga-ui/core';

@Component({
    standalone: true,
    imports: [RouterLink, RouterOutlet, TuiButton],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class TuiEagerExample1 {}
```

#### Named outlet

**Template:**
```html
<button tuiButton type="button" [routerLink]="[ { outlets: { myOutlet: 'path/to/dialog', }, }, ]" > Open dialog </button>
<router-outlet name="myOutlet" />
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {RouterLink, RouterOutlet} from '@angular/router';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiButton} from '@taiga-ui/core';

@Component({
    standalone: true,
    imports: [RouterLink, RouterOutlet, TuiButton],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {}
```

#### Example 3

**Template:**
```html
<ol class="tui-list tui-list_ordered">
<li class="tui-list__item">
<p> Add <code>router-outlet</code> to the page template: </p>
<tui-doc-code filename="my-page.component.html" [code]="html" />
</li>
<li class="tui-list__item">
<p> Use <code>tuiGenerateDialogableRoute</code> inside children property of page router config </p>
<tui-doc-code filename="my-page.routes.ts" [code]="routes" />
</li>
</ol>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiDocCode} from '@taiga-ui/addon-doc';

@Component({
    standalone: true,
    imports: [TuiDocCode],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class TuiEagerExample3 {
    protected readonly html = import('../setup/html.md?raw');
    protected readonly routes = import('../setup/routes.md?raw');
}
```


### TypeScript

```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {TuiDemo} from '@demo/utils';

@Component({
    standalone: true,
    imports: [TuiDemo],
    templateUrl: './index.html',
    changeDetection,
})
export default class Page {
    protected readonly example1 = {
        'page.routes.ts': import('./routes.ts?raw'),
        'page.template.html': import('./examples/1/index.html?raw'),
        'page.ts': import('./examples/1/index.ts?raw'),
        'dialog.component.ts': import('./examples/1/dialog.component.ts?raw'),
    };

    protected readonly example2 = {
        'page.routes.ts': import('./routes.ts?raw'),
        'page.template.html': import('./examples/2/index.html?raw'),
        'page.ts': import('./examples/2?raw'),
        'dialog.component.ts': import('./examples/2/dialog.component.ts?raw'),
    };
}
```

---
# routable/Lazy routable dialog
- **Package**: `null`
- **Type**: null

### Usage Examples

#### Lazy loading dialog

**Template:**
```html
<button routerLink="path/to/dialog" tuiButton type="button" > Open dialog </button>
<router-outlet />
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {RouterLink, RouterOutlet} from '@angular/router';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiButton} from '@taiga-ui/core';

@Component({
    standalone: true,
    imports: [RouterLink, RouterOutlet, TuiButton],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class TuiLazyExample1 {}
```

#### Example 2

**Template:**
```html
<ol class="tui-list tui-list_ordered">
<li class="tui-list__item">
<p> Add <code>router-outlet</code> to the page template: </p>
<tui-doc-code filename="my-page.component.html" [code]="html" />
</li>
<li class="tui-list__item">
<p> Use <code>tuiGenerateDialogableRoute</code> inside children property of page router config </p>
<tui-doc-code filename="my-page.routes.ts" [code]="routes" />
</li>
</ol>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiDocCode} from '@taiga-ui/addon-doc';

@Component({
    standalone: true,
    imports: [TuiDocCode],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class TuiLazyExample2 {
    protected readonly html = import('../setup/html.md?raw');
    protected readonly routes = import('../setup/routes.md?raw');
}
```


### TypeScript

```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {TuiDemo} from '@demo/utils';

@Component({
    standalone: true,
    imports: [TuiDemo],
    templateUrl: './index.html',
    changeDetection,
})
export default class Page {
    protected readonly example1 = {
        'page.routes.ts': import('./routes.ts?raw'),
        'page.template.html': import('./examples/1/index.html?raw'),
        'page.ts': import('./examples/1/index.ts?raw'),
        'dialog.component.ts': import('./examples/1/dialog.component.ts?raw'),
    };
}
```

---
# customization/Variables
- **Package**: `null`
- **Type**: null

### Usage Examples

#### Override example

**Template:**
```html
<div tuiAppearance="floating" tuiCardLarge >
<tui-input [(ngModel)]="value">Input example</tui-input>
<label tuiLabel>
<input tuiCheckbox type="checkbox" [(ngModel)]="checkbox" /> Checkbox example </label>
</div>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiAppearance, TuiLabel} from '@taiga-ui/core';
import {TuiCheckbox} from '@taiga-ui/kit';
import {TuiCardLarge} from '@taiga-ui/layout';
import {TuiInputModule} from '@taiga-ui/legacy';

@Component({
    standalone: true,
    selector: 'tui-variables-example-1',
    imports: [
        FormsModule,
        TuiAppearance,
        TuiCardLarge,
        TuiCheckbox,
        TuiInputModule,
        TuiLabel,
    ],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export class TuiVariablesExample1 {
    protected value = '';
    protected checkbox = true;
}
```


### TypeScript

```ts
import {ClipboardModule} from '@angular/cdk/clipboard';
import {KeyValuePipe} from '@angular/common';
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {DemoRoute} from '@demo/routes';
import {TuiDemo} from '@demo/utils';
import {TuiLink} from '@taiga-ui/core';

import {TuiVariablesExample1} from './examples/1';

@Component({
    standalone: true,
    imports: [ClipboardModule, KeyValuePipe, TuiDemo, TuiLink, TuiVariablesExample1],
    templateUrl: './index.html',
    changeDetection,
})
export default class Page {
    protected readonly example1 = {
        HTML: import('./examples/1/index.html?raw'),
        LESS: import('./examples/1/index.less?raw'),
    };

    protected readonly vars: Record<string, string> = {
        '--tui-font-heading': 'font for headings',
        '--tui-font-text': 'font for text',
        '--tui-radius-xs': 'border radius for smallest items (i.e. small checkbox)',
        '--tui-radius-s': 'border radius for small elements (i.e. tags)',
        '--tui-radius-m': 'default border radius',
        '--tui-radius-l': 'border radius for containers (i.e. island, accordion)',
        '--tui-height-xs': 'smallest elements height (i.e. small button, badges)',
        '--tui-height-s': 'small elements height (i.e. small inputs)',
        '--tui-height-m': 'default elements height (i.e. inputs, buttons)',
        '--tui-height-l': 'large elements height (i.e. inputs, buttons)',
        '--tui-padding-s': 'padding for inputs with size "s"',
        '--tui-padding-m': 'padding for inputs with size "m"',
        '--tui-padding-l': 'padding for inputs with size "l"',
        '--tui-disabled-opacity': 'amount of transparency for disabled elements',
    };

    protected readonly routes = DemoRoute;
}
```

---
# customization/Viewport
- **Package**: `CORE`
- **Type**: customization
TUI_VIEWPORT
            - define the area relative to which the position constraints will be calculated. Also you can use
            tuiAsViewport
            helper instead of token.

### Usage Examples

#### Dropdown

**Template:**
```html
<div class="dropdowns">
<div tuiDropdown="1" tuiDropdownHover class="t1" ></div>
<div tuiDropdown="3" tuiDropdownHover class="t2" ></div>
<div tuiDropdown="2" tuiDropdownHover class="t3" ></div>
<div tuiDropdown="4" tuiDropdownHover class="t4" ></div>
</div>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {tuiInjectElement} from '@taiga-ui/cdk';
import {tuiAsViewport, TuiDropdown, TuiRectAccessor} from '@taiga-ui/core';

@Component({
    standalone: true,
    imports: [TuiDropdown],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
    providers: [tuiAsViewport(Example)],
})
export default class Example extends TuiRectAccessor {
    private readonly el = tuiInjectElement();

    public readonly type = 'viewport';

    public getClientRect(): DOMRect {
        return this.el.getBoundingClientRect();
    }
}
```

#### Dropdown and custom portal

**Template:**
```html
<portal-host class="dropdowns">
<div tuiDropdownHover class="t1" [tuiDropdown]="dropdown" ></div>
<div tuiDropdownHover class="t2" [tuiDropdown]="dropdown" ></div>
<div tuiDropdownHover class="t3" [tuiDropdown]="dropdown" ></div>
<div tuiDropdownHover class="t4" [tuiDropdown]="dropdown" ></div>
</portal-host>
<ng-template #dropdown>
<p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </p>
</ng-template>
```
**TypeScript:**
```ts
import {ChangeDetectionStrategy, Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {tuiAsPortal, tuiInjectElement, TuiPortals} from '@taiga-ui/cdk';
import {
    tuiAsViewport,
    TuiDropdown,
    TuiDropdownService,
    type TuiRectAccessor,
} from '@taiga-ui/core';

@Component({
    standalone: true,
    selector: 'portal-host',
    template: `
        <ng-content />
        <ng-container #viewContainer />
    `,
    changeDetection: ChangeDetectionStrategy.OnPush,
    providers: [tuiAsPortal(TuiDropdownService), tuiAsViewport(PortalHost)],
})
class PortalHost extends TuiPortals implements TuiRectAccessor {
    private readonly el = tuiInjectElement();

    public readonly type = 'viewport';

    public getClientRect(): DOMRect {
        return this.el.getBoundingClientRect();
    }
}

@Component({
    standalone: true,
    imports: [PortalHost, TuiDropdown],
    templateUrl: './index.html',
    styleUrls: ['../1/index.less'],
    encapsulation,
    changeDetection,
    providers: [TuiDropdownService],
})
export default class Example {}
```

#### Hint

**Template:**
```html
<tui-segmented class="t-direction">
<label *ngFor="let direction of directions">
<input name="radio" type="radio" [value]="direction" [(ngModel)]="selected" /> {{ direction }} </label>
</tui-segmented>
<portal-host class="dropdowns">
<button tuiButton type="button" class="t-centered-axis-xy" [tuiHint]="template" [tuiHintDirection]="selected" [tuiHintManual]="hintShown" (click)="toggleHint()" > Hint </button>
</portal-host>
<ng-template #template> Use <a appearance="action-grayscale" tuiLink tuiTheme="dark" class="link" > Hint </a>
</ng-template>
```
**TypeScript:**
```ts
import {NgForOf} from '@angular/common';
import {ChangeDetectionStrategy, Component} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {tuiInjectElement} from '@taiga-ui/cdk';
import {
    tuiAsViewport,
    TuiButton,
    TuiHint,
    type TuiHintDirection,
    TuiLink,
    type TuiRectAccessor,
} from '@taiga-ui/core';
import {TuiSegmented} from '@taiga-ui/kit';

@Component({
    standalone: true,
    selector: 'portal-host',
    template: '<ng-content />',
    changeDetection: ChangeDetectionStrategy.OnPush,
    providers: [tuiAsViewport(PortalHost)],
})
class PortalHost implements TuiRectAccessor {
    private readonly el = tuiInjectElement();

    public readonly type = 'viewport';

    public getClientRect(): DOMRect {
        return this.el.getBoundingClientRect();
    }
}

@Component({
    standalone: true,
    imports: [
        FormsModule,
        NgForOf,
        PortalHost,
        TuiButton,
        TuiHint,
        TuiLink,
        TuiSegmented,
    ],
    templateUrl: './index.html',
    styleUrls: ['../1/index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected hintShown = false;

    protected directions: TuiHintDirection[] = ['top', 'left', 'right', 'bottom'];

    protected selected = this.directions[0]!;

    protected toggleHint(): void {
        this.hintShown = !this.hintShown;
    }
}
```


### TypeScript

```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {TuiDemo} from '@demo/utils';

@Component({
    standalone: true,
    imports: [TuiDemo],
    templateUrl: './index.html',
    changeDetection,
})
export default class Page {
    protected readonly providers = import('./examples/import/providers.md?raw');

    protected examples = ['Dropdown', 'Dropdown and custom portal', 'Hint'];
}
```

---
# pipes/Amount
- **Package**: `ADDON-COMMERCE`
- **Type**: pipes
Pipe to format number values to show money sums

        
            Number formatting can be customized by using
            
                TUI_NUMBER_FORMAT

### How to Use (Import)

```ts
import {TuiAmountPipe} from '@taiga-ui/addon-commerce';

// ...

@Component({
  standalone: true,
  imports: [
    // ...
    TuiAmountPipe,
  ],
})
export class Example {}
```

### How to Use (Template)

```html
<!-- {{ 100000 | tuiAmount : currency : align | async }} -->
<p>{{ 100000 | tuiAmount : '978' : 'left' | async }}</p>
<p>{{ 100000 | tuiAmount : 'EUR' : 'right' | async }}</p>
```

### Usage Examples

#### base

**Template:**
```html
<ol>
<li>{{ 10728.9 | tuiAmount | async }}</li>
<li>{{ 10728.9 | tuiAmount: 'RUB' | async }}</li>
<li>{{ 10728.9 | tuiAmount: 'EUR' | async }}</li>
<li>{{ 10728.9 | tuiAmount: 'USD' | async }}</li>
<li>{{ 10728.9 | tuiAmount: 'GBP' | async }}</li>
<li>{{ -12345.1 | tuiAmount: 'USD' : 'left' | async }}</li>
<li>{{ 100 | tuiAmount: '£' : 'left' | async }}</li>
<li>{{ 200 | tuiAmount: 'AED' : 'left' | async }}</li>
</ol>
<hr class="tui-space_top-1 tui-space_bottom-1" />
<span>Remaining {{ 10728.9 | tuiAmount | async }} of {{ 11000 | tuiAmount | async }}</span>
```
**TypeScript:**
```ts
import {AsyncPipe} from '@angular/common';
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiAmountPipe} from '@taiga-ui/addon-commerce';

@Component({
    standalone: true,
    imports: [AsyncPipe, TuiAmountPipe],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {}
```

#### format

**Template:**
```html
<div [tuiNumberFormat]="{rounding: 'round', thousandSeparator: ',', decimalSeparator: '.'}"> {{ -10000000.536 | tuiAmount: 'USD' : 'left' | async }} </div>
<div>{{ 200.536 | tuiAmount: 'EUR' | async }}</div>
<div [tuiNumberFormat]="{rounding: 'ceil', precision: 1}"> {{ 54000.643 | tuiAmount: 'USD' : 'left' | async }} </div>
<div [tuiNumberFormat]="{decimalMode: 'always'}"> {{ 800 | tuiAmount: 'USD' : 'left' | async }} </div>
<div [tuiNumberFormat]="{precision: 0}"> {{ -0.83 | tuiAmount: 'RUB' : 'right' | async }} </div>
```
**TypeScript:**
```ts
import {AsyncPipe} from '@angular/common';
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiAmountPipe} from '@taiga-ui/addon-commerce';
import {TuiNumberFormat} from '@taiga-ui/core';

@Component({
    standalone: true,
    imports: [AsyncPipe, TuiAmountPipe, TuiNumberFormat],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {}
```

#### options

**Template:**
```html
<div>{{ -12.3 | tuiAmount | async }}</div>
<div>{{ 3000 | tuiAmount | async }}</div>
```
**TypeScript:**
```ts
import {AsyncPipe} from '@angular/common';
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {tuiAmountOptionsProvider, TuiAmountPipe} from '@taiga-ui/addon-commerce';

@Component({
    standalone: true,
    imports: [AsyncPipe, TuiAmountPipe],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
    providers: [
        tuiAmountOptionsProvider({
            sign: 'always',
            currency: 'USD',
            currencyAlign: 'left',
        }),
    ],
})
export default class Example {}
```

#### separate decimal part

**Template:**
```html
<div>
<span [tuiNumberFormat]="{precision: 0}">{{ 120.59 | tuiAmount | async }}</span>
<span [style.color]="'var(--tui-text-secondary)'">{{ 120.59 | tuiDecimal | async }}</span>
</div>
<div>
<span [tuiNumberFormat]="{precision: 0}">{{ 120.59 | tuiAmount: 'EUR' | async }}</span>
<span [style.color]="'var(--tui-text-secondary)'">{{ 120.59 | tuiDecimal | async }}</span>
</div>
<div>
<span [tuiNumberFormat]="{precision: 0}">{{ 120.59 | tuiAmount: 'USD' | async }}</span>
<span [style.color]="'var(--tui-text-secondary)'">{{ 120.59 | tuiDecimal | async }}</span>
</div>
```
**TypeScript:**
```ts
import {AsyncPipe} from '@angular/common';
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {
    tuiAmountOptionsProvider,
    TuiAmountPipe,
    TuiDecimalPipe,
} from '@taiga-ui/addon-commerce';
import {TuiNumberFormat} from '@taiga-ui/core';

@Component({
    standalone: true,
    imports: [AsyncPipe, TuiAmountPipe, TuiDecimalPipe, TuiNumberFormat],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
    providers: [tuiAmountOptionsProvider({currencyAlign: 'left'})],
})
export default class Example {}
```


### TypeScript

```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {DemoRoute} from '@demo/routes';
import {TuiDemo} from '@demo/utils';

@Component({
    standalone: true,
    imports: [TuiDemo],
    templateUrl: './index.html',
    changeDetection,
})
export default class Page {
    protected readonly examples = ['base', 'format', 'options', 'separate decimal part'];
    protected readonly routes = DemoRoute;
}
```

---
# pipes/Currency
- **Package**: `ADDON-COMMERCE`
- **Type**: pipes
Pipe for transforming number into money. It is usually used with
        
            InputNumber

### How to Use (Import)

```ts
import {TuiCurrencyPipe} from '@taiga-ui/addon-commerce';

//...

@Component({
  standalone: true,
  imports: [
    //...
    TuiCurrencyPipe,
  ],
  // ...
})
export class Example {}
```

### How to Use (Template)

```html
<tui-textfield>
  <label tuiLabel>Type a sum</label>

  <input
    formControlName="testValue"
    tuiInputNumber
    [prefix]="'USD' | tuiCurrency"
  />
</tui-textfield>
```

### Example

```html
<ng-template>
<tui-textfield>
<label tuiLabel>Type a sum</label>
<input tuiInputNumber [formControl]="control" [postfix]="' ' + (currency || '' | tuiCurrency)" />
</tui-textfield>
</ng-template>
```

### API

| Property | Type | Description |
|----------|-----|----------|
| currency | `TuiCurrencyVariants` | Currency symbol |

### Usage Examples

#### Basic

**Template:**
```html
<p>100 {{ 'RUB' | tuiCurrency }}</p>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiCurrencyPipe} from '@taiga-ui/addon-commerce';

@Component({
    standalone: true,
    imports: [TuiCurrencyPipe],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {}
```

#### With Textfield

**Template:**
```html
<form [formGroup]="testForm">
<tui-textfield>
<label tuiLabel>Type a sum</label>
<input formControlName="testValue" tuiInputNumber [postfix]="' ' + (826 | tuiCurrency)" />
</tui-textfield>
</form>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {FormControl, FormGroup, ReactiveFormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiCurrencyPipe} from '@taiga-ui/addon-commerce';
import {TuiTextfield} from '@taiga-ui/core';
import {TuiInputNumber} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [ReactiveFormsModule, TuiCurrencyPipe, TuiInputNumber, TuiTextfield],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly testForm = new FormGroup({
        testValue: new FormControl(100),
    });
}
```


### TypeScript

```ts
import {Component} from '@angular/core';
import {FormControl, ReactiveFormsModule, Validators} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {DemoRoute} from '@demo/routes';
import {TuiDemo} from '@demo/utils';
import {TuiCurrencyPipe} from '@taiga-ui/addon-commerce';
import {TuiTextfield} from '@taiga-ui/core';
import {TuiInputNumber} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [
        ReactiveFormsModule,
        TuiCurrencyPipe,
        TuiDemo,
        TuiInputNumber,
        TuiTextfield,
    ],
    templateUrl: './index.html',
    changeDetection,
})
export default class Page {
    protected readonly currencyVariants = [null, 826, 840, 'EUR', 'RUB', 'UGX', 'USD'];
    protected currency = this.currencyVariants[0];

    protected readonly control = new FormControl(6432, Validators.required);
    protected readonly routes = DemoRoute;
}
```

---
# pipes/Emails
- **Package**: `KIT`
- **Type**: pipes
Pipe for creating autocomplete when entering email addresses

### How to Use (Import)

```ts
import {NgIf} from '@angular/common';
import {FormsModule} from '@angular/forms';
import {TuiDataList} from '@taiga-ui/core';
import {TuiDataListWrapper, TuiEmailsPipe} from '@taiga-ui/kit';
import {TuiInputModule} from '@taiga-ui/legacy';

// ...

@Component({
  standalone: true,
  imports: [
    // ...
    NgIf,
    FormsModule,
    TuiEmailsPipe,
    TuiInputModule,
    TuiDataList,
    TuiDataListWrapper,
  ],
  // ...
})
export class Example {}
```

### How to Use (Template)

```html
<tui-input
  *ngIf="value | tuiEmails as emails"
  [(ngModel)]="value"
>
  Введите адрес
  <ng-template
    *ngIf="emails.length"
    [tuiDataList]
  >
    <tui-data-list-wrapper [items]="emails"></tui-data-list-wrapper>
  </ng-template>
</tui-input>
```

### Usage Examples

#### Example

**Template:**
```html
<p>
<tui-input *ngIf="default | tuiEmails as emails" [(ngModel)]="default" > Standard addresses <ng-template *ngIf="emails.length" tuiDataList >
<tui-data-list-wrapper [items]="emails" />
</ng-template>
</tui-input>
</p>
<p>
<tui-input *ngIf="custom | tuiEmails: emails as emails" [(ngModel)]="custom" > Custom addresses <ng-template *ngIf="emails.length" tuiDataList >
<tui-data-list-wrapper [items]="emails" />
</ng-template>
</tui-input>
</p>
```
**TypeScript:**
```ts
import {NgIf} from '@angular/common';
import {Component} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {TuiDataList} from '@taiga-ui/core';
import {TuiDataListWrapper, TuiEmailsPipe} from '@taiga-ui/kit';
import {TuiInputModule} from '@taiga-ui/legacy';

@Component({
    standalone: true,
    imports: [
        FormsModule,
        NgIf,
        TuiDataList,
        TuiDataListWrapper,
        TuiEmailsPipe,
        TuiInputModule,
    ],
    templateUrl: './index.html',
    changeDetection,
})
export default class Example {
    protected default = '';
    protected custom = '';

    protected readonly emails = ['google.com', 'github.com', 'taiga-ui.dev'];
}
```


### TypeScript

```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {TuiDemo} from '@demo/utils';

@Component({
    standalone: true,
    imports: [TuiDemo],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    changeDetection,
})
export default class Page {}
```

### LESS

```less
.cell {
    font-size: 1rem;
    padding: 1rem;
}

.row:nth-child(odd) {
    background: var(--tui-background-neutral-1);
}

.table {
    inline-size: 31.25rem;
    border: 1px solid var(--tui-border-normal);
}
```

---
# pipes/FieldError
- **Package**: `KIT`
- **Type**: pipes
FieldErrorPipe takes order of errors as array and transform it to
            TuiValidationError
            . Can be used with TuiError component. You can also use
            tuiFieldErrorContentPipe
            with
            TuiHint
            (see
            
                tuiFieldErrorContentPipe example
            
            ). It returns a content of the TuiValidationError. The idea of
            tuiFieldError
            is to link
            tui-error
            with form controls. Also you can use
            tuiValidationErrorsProvider
            which provided
            TUI_VALIDATION_ERRORS
            . The idea of
            TUI_VALIDATION_ERRORS
            is to provide presentation for arbitrary error objects stored inside controls

### How to Use (Import)

```ts
import {TuiFieldErrorPipe} from '@taiga-ui/kit';

// ...

@Component({
  standalone: true,
  imports: [
    // ...
    TuiFieldErrorPipe,
  ],
})
export class Example {}
```

### How to Use (Template)

```html
// ...
<tui-input [formControl]="user">User</tui-input>
<tui-error
  [formControl]="user"
  [error]="[] | tuiFieldError | async"
></tui-error>
// ...
```

### Usage Examples

#### Basic

**Template:**
```html
<form [formGroup]="testForm">
<label tuiLabel class="tui-space_bottom-4" > Type the ultimate answer <tui-input formControlName="testValue2" tuiTextfieldSize="m" [tuiTextfieldLabelOutside]="true" > to the Question of Life, the Universe, and Everything </tui-input>
<tui-error formControlName="testValue2" [error]="[] | tuiFieldError | async" />
</label>
<label tuiLabel> Set a password <tui-input formControlName="testValue1" tuiTextfieldSize="m" [tuiTextfieldLabelOutside]="true" > Latin letters only </tui-input>
<tui-error formControlName="testValue1" [error]="[] | tuiFieldError | async" />
</label>
<p> If you want to show a validation message as soon as a user starts typing, subscribe on form value changes and call markAsTouched on control on first value change. You can also use <a fragment="mark-control-as-touched-and-validate" href="/utils/miscellaneous#mark-control-as-touched-and-validate" tuiLink [routerLink]="routes.Miscellaneous" >
<code>tuiMarkControlAsTouchedAndValidate</code>
</a>
</p>
<p>
<code>tuiFieldError</code> pipe can be used inside your controls to show error messages for parent <a href="https://angular.io/api/forms/NgControl" rel="noreferrer" target="_blank" tuiLink > NgControl </a> or <a href="https://angular.io/api/forms/ControlContainer" rel="noreferrer" target="_blank" tuiLink > ControlContainer </a> through DI without explicit directive on <code>tui-error</code> . </p>
<p>Below is an error for the entire form:</p>
<tui-error [error]="[] | tuiFieldError | async" />
</form>
```
**TypeScript:**
```ts
import {AsyncPipe} from '@angular/common';
import {Component} from '@angular/core';
import {
    type AbstractControl,
    FormControl,
    FormGroup,
    ReactiveFormsModule,
    Validators,
} from '@angular/forms';
import {RouterLink} from '@angular/router';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {DemoRoute} from '@demo/routes';
import {TuiError, TuiLabel, TuiLink} from '@taiga-ui/core';
import {TuiFieldErrorPipe} from '@taiga-ui/kit';
import {TuiInputModule, TuiTextfieldControllerModule} from '@taiga-ui/legacy';
import {distinctUntilChanged} from 'rxjs';

const latinChars = /^[a-zA-Z]+$/;

export function passwordValidator(field: AbstractControl): Validators | null {
    return field.value && latinChars.test(field.value)
        ? null
        : {
              other: 'Only latin letters are allowed',
          };
}

export function superComputerValidator(field: AbstractControl): Validators | null {
    return field.value === '42'
        ? null
        : {
              other: 'Wrong',
          };
}

@Component({
    standalone: true,
    imports: [
        AsyncPipe,
        ReactiveFormsModule,
        RouterLink,
        TuiError,
        TuiFieldErrorPipe,
        TuiInputModule,
        TuiLabel,
        TuiLink,
        TuiTextfieldControllerModule,
    ],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly routes = DemoRoute;
    protected readonly testValue1 = new FormControl('', [
        Validators.required,
        passwordValidator,
    ]);

    protected readonly testValue3 = new FormControl('', [
        Validators.required,
        passwordValidator,
    ]);

    protected readonly testForm = new FormGroup(
        {
            testValue1: this.testValue1,
            testValue2: new FormControl('', [
                Validators.required,
                superComputerValidator,
            ]),
        },
        (control) =>
            Object.values((control as FormGroup).controls).every(({valid}) => valid)
                ? null
                : {other: 'Form is invalid'},
    );

    constructor() {
        this.testValue1.valueChanges.pipe(distinctUntilChanged()).subscribe(() => {
            this.testValue1.markAsTouched();
        });
    }
}
```

#### With custom messages for validators

**Template:**
```html
<form tuiTextfieldSize="m" [formGroup]="testForm" >
<label tuiLabel class="tui-space_bottom-4" > Enter an email <tui-textfield>
<input formControlName="testValue2" placeholder="Required" tuiTextfield />
</tui-textfield>
<tui-error formControlName="testValue2" [error]="[] | tuiFieldError | async" />
</label>
<label tuiLabel class="tui-space_bottom-4" > Minimum and maximum length <tui-textfield>
<label tuiLabel>4 letters word...</label>
<input formControlName="testValue1" tuiTextfield />
</tui-textfield>
<tui-error formControlName="testValue1" [error]="[] | tuiFieldError | async" />
</label>
<label tuiLabel> Minimum number <tui-textfield>
<label tuiLabel>number</label>
<input formControlName="testValue3" tuiInputNumber [step]="1" />
</tui-textfield>
<tui-error formControlName="testValue3" [error]="[] | tuiFieldError | async" />
</label>
</form>
```
**TypeScript:**
```ts
import {AsyncPipe} from '@angular/common';
import {Component} from '@angular/core';
import {FormControl, FormGroup, ReactiveFormsModule, Validators} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {tuiIsFalsy} from '@taiga-ui/cdk';
import {TuiError, TuiTextfield} from '@taiga-ui/core';
import {
    TuiFieldErrorPipe,
    TuiInputNumber,
    tuiValidationErrorsProvider,
} from '@taiga-ui/kit';
import {interval, map, of, scan, startWith} from 'rxjs';

@Component({
    standalone: true,
    imports: [
        AsyncPipe,
        ReactiveFormsModule,
        TuiError,
        TuiFieldErrorPipe,
        TuiInputNumber,
        TuiTextfield,
    ],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
    providers: [
        tuiValidationErrorsProvider({
            required: 'Enter this!',
            email: 'Enter a valid email',
            maxlength: ({requiredLength}: {requiredLength: string}) =>
                `Maximum length — ${requiredLength}`,
            minlength: ({requiredLength}: {requiredLength: string}) =>
                of(`Minimum length — ${requiredLength}`),
            min: interval(2000).pipe(
                scan(tuiIsFalsy, false),
                map((val) => (val ? 'Fix please' : 'Min number 3')),
                startWith('Min number 3'),
            ),
        }),
    ],
})
export default class Example {
    protected readonly testValue1 = new FormControl('', [
        Validators.minLength(4),
        Validators.maxLength(4),
    ]);

    protected readonly testValue2 = new FormControl('', [
        Validators.required,
        Validators.email,
    ]);

    protected readonly testValue3 = new FormControl(2, [Validators.min(3)]);

    protected readonly testForm = new FormGroup({
        testValue1: this.testValue1,
        testValue2: this.testValue2,
        testValue3: this.testValue3,
    });

    constructor() {
        this.testValue1.valueChanges.subscribe(() => {
            this.testValue1.markAsTouched();
        });
    }
}
```

#### with a template

**Template:**
```html
<form [formGroup]="testForm" (submit)="onSubmit()" >
<label tuiLabel> Secret number <tui-input formControlName="testValue1" tuiTextfieldSize="m" [tuiTextfieldLabelOutside]="true" />
<ng-template #errorContent> Secret number must contain <strong>10 or 12 digits</strong> . </ng-template>
<tui-error formControlName="testValue1" [error]="['required', 'inn'] | tuiFieldError | async" />
</label>
<label tuiLabel class="tui-space_top-4 tui-space_bottom-4" > Enter company name <tui-input formControlName="testValue2" tuiTextfieldSize="m" [tuiTextfieldLabelOutside]="true" />
<ng-template #bigErrorContent> This company is already registered <button tuiButton type="button" class="tui-space_top-2" > It is mine </button>
</ng-template>
<tui-error formControlName="testValue2" [error]="[] | tuiFieldError | async" />
</label>
<label>
<div class="checkbox">
<input formControlName="testValue3" size="s" tuiCheckbox type="checkbox" /> I agree on the conditions </div>
<tui-error formControlName="testValue3" [error]="[] | tuiFieldError | async" />
</label>
<button size="m" tuiButton type="submit" class="tui-space_top-4" > Submit </button>
</form>
```
**TypeScript:**
```ts
import {AsyncPipe} from '@angular/common';
import {Component, type OnInit, ViewChild} from '@angular/core';
import {
    type AbstractControl,
    FormControl,
    FormGroup,
    ReactiveFormsModule,
    type ValidationErrors,
    Validators,
} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {tuiMarkControlAsTouchedAndValidate, TuiValidationError} from '@taiga-ui/cdk';
import {TuiButton, TuiError, TuiLabel} from '@taiga-ui/core';
import {TuiCheckbox, TuiFieldErrorPipe} from '@taiga-ui/kit';
import {TuiInputModule, TuiTextfieldControllerModule} from '@taiga-ui/legacy';
import {type PolymorpheusContent} from '@taiga-ui/polymorpheus';

const secretRegexTen = /^\d{10}$/;
const secretRegexTwelve = /^\d{12}$/;

@Component({
    standalone: true,
    imports: [
        AsyncPipe,
        ReactiveFormsModule,
        TuiButton,
        TuiCheckbox,
        TuiError,
        TuiFieldErrorPipe,
        TuiInputModule,
        TuiLabel,
        TuiTextfieldControllerModule,
    ],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example implements OnInit {
    @ViewChild('errorContent')
    protected errorContent: PolymorpheusContent;

    @ViewChild('bigErrorContent')
    protected bigErrorContent: PolymorpheusContent;

    protected readonly testValue2 = new FormControl('');

    protected readonly testForm = new FormGroup({
        testValue1: new FormControl('', [Validators.required, this.getSecretValidator()]),
        testValue2: this.testValue2,
        testValue3: new FormControl(false, [Validators.requiredTrue]),
    });

    public ngOnInit(): void {
        this.testValue2.setValidators([Validators.required, this.companyValidator]);
    }

    protected onSubmit(): void {
        tuiMarkControlAsTouchedAndValidate(this.testForm);
    }

    private readonly companyValidator = (
        field: AbstractControl,
    ): ValidationErrors | null =>
        field.value
            ? {
                  inn: new TuiValidationError(this.bigErrorContent),
              }
            : null;

    private getSecretValidator(): (field: AbstractControl) => ValidationErrors | null {
        return (field: AbstractControl): ValidationErrors | null =>
            field.value &&
            (secretRegexTen.test(field.value) || secretRegexTwelve.test(field.value))
                ? null
                : {
                      secret: new TuiValidationError(this.errorContent),
                  };
    }
}
```

#### With adding new controls (FormArray)

**Template:**
```html
<form [formGroup]="testForm">
<label *ngFor="let phone of formData.controls; let i = index" formArrayName="phones" tuiLabel class="tui-space_bottom-4" > Phone number {{ i + 1 }} <span class="row">
<tui-input-phone tuiTextfieldSize="m" class="input" [formControlName]="i" [tuiTextfieldLabelOutside]="true" >
<input autocomplete="new-password" tuiTextfieldLegacy />
</tui-input-phone>
<button appearance="icon" iconStart="@tui.trash" size="m" tuiIconButton type="button" class="tui-space_left-2 icon" (click)="removePhone(i)" > Delete phone number </button>
</span>
<ng-template #phoneErrorContent>Invalid phone number length</ng-template>
<tui-error [error]="[] | tuiFieldError | async" [formControlName]="i" />
</label>
<tui-error formArrayName="phones" class="form-array-error" [error]="[] | tuiFieldError | async" />
<button size="s" tuiButton type="button" class="tui-space_top-4" (click)="addPhone()" > Add a phone number </button>
</form>
```
**TypeScript:**
```ts
import {AsyncPipe, NgForOf} from '@angular/common';
import {Component, ViewChild} from '@angular/core';
import {
    type AbstractControl,
    FormArray,
    FormControl,
    FormGroup,
    ReactiveFormsModule,
    type ValidationErrors,
    type ValidatorFn,
    Validators,
} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiValidationError} from '@taiga-ui/cdk';
import {TuiButton, TuiError, TuiTextfield} from '@taiga-ui/core';
import {TuiFieldErrorPipe} from '@taiga-ui/kit';
import {TuiInputPhoneModule, TuiTextfieldControllerModule} from '@taiga-ui/legacy';
import {type PolymorpheusContent} from '@taiga-ui/polymorpheus';

@Component({
    standalone: true,
    imports: [
        AsyncPipe,
        NgForOf,
        ReactiveFormsModule,
        TuiButton,
        TuiError,
        TuiFieldErrorPipe,
        TuiInputPhoneModule,
        TuiTextfield,
        TuiTextfieldControllerModule,
    ],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    @ViewChild('phoneErrorContent')
    protected phoneErrorContent: PolymorpheusContent;

    protected testForm = new FormGroup({
        phones: new FormArray(
            [new FormControl('', [Validators.required, this.getPhoneLengthValidator()])],
            [this.getPhoneArrayValidator()],
        ),
    });

    protected get formData(): FormArray {
        return this.testForm.get('phones') as FormArray;
    }

    protected addPhone(): void {
        this.formData.push(new FormControl('', this.addValidators()));
    }

    protected removePhone(index: number): void {
        this.formData.removeAt(index);

        let n = 0;

        while (n <= 1 && this.formData.controls[n]) {
            this.formData.controls[n]?.setValidators([
                Validators.required,
                this.getPhoneLengthValidator(),
            ]);
            n++;
        }
    }

    protected addValidators(): ValidationErrors | null {
        return this.formData.controls.length < 2
            ? [Validators.required, this.getPhoneLengthValidator()]
            : null;
    }

    private getPhoneLengthValidator(): (
        field: AbstractControl,
    ) => ValidationErrors | null {
        return (field: AbstractControl): ValidationErrors | null =>
            field.value.length !== 12
                ? {
                      length: new TuiValidationError(this.phoneErrorContent),
                  }
                : null;
    }

    private getPhoneArrayValidator(): ValidatorFn {
        return ((array: FormArray): ValidationErrors | null =>
            array.controls.length < 2 ||
            (!!array.controls.filter((item) => item.errors).length &&
                array.controls.length)
                ? {
                      length: new TuiValidationError(
                          'You should add at least 2 phone number',
                      ),
                  }
                : null) as ValidatorFn;
    }
}
```

#### async validator

**Template:**
```html
<form tuiForm="l" [formGroup]="form" >
<tui-input formControlName="text" class="input" > Enter some text </tui-input>
<tui-error formControlName="text" [error]="[] | tuiFieldError | async" />
</form>
```
**TypeScript:**
```ts
import {AsyncPipe} from '@angular/common';
import {Component, inject} from '@angular/core';
import {
    type AbstractControl,
    type AsyncValidatorFn,
    type FormGroup,
    ReactiveFormsModule,
    UntypedFormBuilder,
    Validators,
} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TUI_IS_E2E, TuiValidationError} from '@taiga-ui/cdk';
import {TuiError} from '@taiga-ui/core';
import {TuiFieldErrorPipe} from '@taiga-ui/kit';
import {TuiForm} from '@taiga-ui/layout';
import {TuiInputModule} from '@taiga-ui/legacy';
import {delay, of} from 'rxjs';

const latinChars = /^[a-zA-Z]+$/;

function asyncValidatorFn(isE2E: boolean): AsyncValidatorFn {
    return (field: AbstractControl) =>
        field.value && latinChars.test(field.value)
            ? of(null)
            : of({
                  error: new TuiValidationError('Only latin letters allowed'),
              }).pipe(isE2E ? delay(0) : delay(5000));
}

@Component({
    standalone: true,
    imports: [
        AsyncPipe,
        ReactiveFormsModule,
        TuiError,
        TuiFieldErrorPipe,
        TuiForm,
        TuiInputModule,
    ],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    private readonly fb = inject(UntypedFormBuilder);

    protected readonly form: FormGroup;

    constructor() {
        this.form = this.fb.group({
            text: ['русский текст', Validators.required],
        });

        this.form.controls['text']?.setAsyncValidators(
            asyncValidatorFn(inject(TUI_IS_E2E)),
        );

        this.form.controls['text']?.markAsTouched();
    }
}
```

#### tuiFieldErrorContentPipe

**Template:**
```html
<table tuiTable class="table" [columns]="columns" >
<thead>
<tr tuiThGroup>
<th tuiTh [resizable]="true" > Name </th>
<th tuiTh>Price</th>
</tr>
</thead>
<tbody tuiTbody [data]="data" >
<tr *ngFor="let item of data; let i = index" tuiTr >
<td *tuiCell="'name'" tuiTd > {{ item.name }} </td>
<td *tuiCell="'price'" tuiTd >
<tui-textfield>
<input placeholder="Price" tuiHintDirection="right" tuiInputNumber [formControl]="controls[i]!" [postfix]="' ' + 'UGX' | tuiCurrency" [tuiHint]="[] | tuiFieldErrorContent" />
</tui-textfield>
</td>
</tr>
</tbody>
</table>
```
**TypeScript:**
```ts
import {NgForOf} from '@angular/common';
import {Component} from '@angular/core';
import {FormControl, ReactiveFormsModule, Validators} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiCurrencyPipe} from '@taiga-ui/addon-commerce';
import {TuiTable} from '@taiga-ui/addon-table';
import {TuiHint, TuiTextfield} from '@taiga-ui/core';
import {
    TuiFieldErrorContentPipe,
    TuiInputNumber,
    tuiValidationErrorsProvider,
} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [
        NgForOf,
        ReactiveFormsModule,
        TuiCurrencyPipe,
        TuiFieldErrorContentPipe,
        TuiHint,
        TuiInputNumber,
        TuiTable,
        TuiTextfield,
    ],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
    providers: [
        tuiValidationErrorsProvider({
            required: 'Enter this!',
            max: (context: {max: number}): string => `Too expensive, max ${context.max}`,
        }),
    ],
})
export default class Example {
    protected readonly data = [{name: 'Latte'}, {name: 'Cappuccino'}] as const;

    protected latteControl = new FormControl<number | null>(null, [
        Validators.required,
        Validators.max(6),
    ]);

    protected cappuccinoControl = new FormControl<number | null>(null, [
        Validators.required,
        Validators.max(5),
    ]);

    protected controls = [this.latteControl, this.cappuccinoControl];

    protected readonly columns = ['name', 'price'];
}
```

#### Wrapper error component

**Template:**
```html
<label tuiLabel="Type the ultimate answer">
<tui-input tuiTextfieldSize="m" [formControl]="test" [tuiTextfieldLabelOutside]="true" > to the Question of Life, the Universe, and Everything </tui-input>
<tui-error [error]="[] | tuiFieldError | async" [formControl]="test" />
</label>
```
**TypeScript:**
```ts
import {AsyncPipe} from '@angular/common';
import {ChangeDetectionStrategy, Component} from '@angular/core';
import {FormControl, ReactiveFormsModule, Validators} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiError, TuiLabel} from '@taiga-ui/core';
import {TuiFieldErrorPipe, tuiValidationErrorsProvider} from '@taiga-ui/kit';
import {TuiInputModule, TuiTextfieldControllerModule} from '@taiga-ui/legacy';
import {injectContext, PolymorpheusComponent} from '@taiga-ui/polymorpheus';

@Component({
    standalone: true,
    template: 'My component with {{ context.$implicit }}',
    changeDetection: ChangeDetectionStrategy.OnPush,
})
export class Error {
    protected readonly context = injectContext<{$implicit: boolean}>();
}

@Component({
    standalone: true,
    imports: [
        AsyncPipe,
        ReactiveFormsModule,
        TuiError,
        TuiFieldErrorPipe,
        TuiInputModule,
        TuiLabel,
        TuiTextfieldControllerModule,
    ],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
    providers: [
        tuiValidationErrorsProvider({
            required: new PolymorpheusComponent(Error),
        }),
    ],
})
export default class Example {
    protected readonly test = new FormControl('', [Validators.required]);
}
```


### TypeScript

```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {TuiDemo} from '@demo/utils';

@Component({
    standalone: true,
    imports: [TuiDemo],
    templateUrl: './index.html',
    changeDetection,
})
export default class Page {}
```

---
# pipes/Filter
- **Package**: `CDK`
- **Type**: pipes
Pipe for filtering an array

### How to Use (Import)

```ts
import {TuiFilterPipe} from '@taiga-ui/cdk';

// ...

@Component({
  standalone: true,
  imports: [
    // ...
    TuiFilterPipe,
  ],
  // ...
})
export class Example {}
```

### How to Use (Template)

```html
<div *ngFor="let item of items | tuiFilter: matcher: someArg">{{item}}</div>
```

### Usage Examples

#### Usage

**Template:**
```html
<table tuiTable [style.width.rem]="17" >
<thead tuiThead>
<tr tuiThGroup>
<th tuiTh>Name</th>
<th tuiTh>Sum, $</th>
</tr>
</thead>
<tbody tuiTbody>
<tr *ngFor="let item of items | tuiFilter: matcher : 300">
<td tuiTd>{{ item.name }}</td>
<td tuiTd>{{ item.price }}</td>
</tr>
</tbody>
</table>
```
**TypeScript:**
```ts
import {NgForOf} from '@angular/common';
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiTable} from '@taiga-ui/addon-table';
import {TuiFilterPipe} from '@taiga-ui/cdk';

export interface Item {
    readonly name: string;
    readonly price: number;
}

@Component({
    standalone: true,
    imports: [NgForOf, TuiFilterPipe, TuiTable],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly items: readonly Item[] = [
        {
            name: 'Sword',
            price: 1000,
        },
        {
            name: 'Axe',
            price: 100,
        },
        {
            name: 'Spear',
            price: 500,
        },
    ];

    protected readonly matcher = (item: Item, search: number): boolean =>
        item.price > search;
}
```


### TypeScript

```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {TuiDemo} from '@demo/utils';

@Component({
    standalone: true,
    imports: [TuiDemo],
    templateUrl: './index.html',
    changeDetection,
})
export default class Page {}
```

---
# pipes/FilterByInput
- **Package**: `KIT`
- **Type**: pipes
Pipe for filtering an array by value entered in a textfield

### How to Use (Import)

```ts
import {TuiFilterByInputPipe} from '@taiga-ui/kit';

// ...

@Component({
  standalone: true,
  imports: [
    // ...
    TuiFilterByInputPipe,
  ],
  //  ...
})
export class Example {}
```

### How to Use (Template)

```html
<tui-input [formControl]="user">
  User
  <tui-data-list-wrapper
    *tuiDataList
    [items]="items | tuiFilterByInput"
  ></tui-data-list-wrapper>
</tui-input>
```

### Usage Examples

#### Basic

**Template:**
```html
<form [formGroup]="form">
<tui-input formControlName="user"> User <tui-data-list-wrapper *tuiDataList [items]="items | tuiFilterByInput" />
</tui-input>
</form>
```
**TypeScript:**
```ts
import {Component, inject} from '@angular/core';
import {FormControl, FormGroup, ReactiveFormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiDataListWrapper, TuiFilterByInputPipe} from '@taiga-ui/kit';
import {TuiInputModule} from '@taiga-ui/legacy';

@Component({
    standalone: true,
    imports: [
        ReactiveFormsModule,
        TuiDataListWrapper,
        TuiFilterByInputPipe,
        TuiInputModule,
    ],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly items = inject<readonly string[]>('Pythons' as any);
    protected readonly form = new FormGroup({
        user: new FormControl(''),
    });
}
```

#### Custom matcher

**Template:**
```html
<form [formGroup]="form">
<tui-combo-box formControlName="user"> Search by last name <tui-data-list-wrapper *tuiDataList [items]="items | tuiFilterByInput: matcherString" />
</tui-combo-box>
<tui-combo-box formControlName="user2" class="tui-space_top-5" [stringify]="stringify" > With ids <tui-data-list-wrapper *tuiDataList [itemContent]="stringify | tuiStringifyContent" [items]="users | tuiFilterByInput: matcherUser" />
</tui-combo-box>
</form>
```
**TypeScript:**
```ts
import {Component, inject} from '@angular/core';
import {FormControl, FormGroup, ReactiveFormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {type TuiStringMatcher} from '@taiga-ui/cdk';
import {
    TuiDataListWrapper,
    TuiFilterByInputPipe,
    TuiStringifyContentPipe,
} from '@taiga-ui/kit';
import {TuiComboBoxModule} from '@taiga-ui/legacy';

interface User {
    readonly id: number;
    readonly name: string;
}

@Component({
    standalone: true,
    imports: [
        ReactiveFormsModule,
        TuiComboBoxModule,
        TuiDataListWrapper,
        TuiFilterByInputPipe,
        TuiStringifyContentPipe,
    ],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example<T extends User = User> {
    protected readonly items = inject<readonly string[]>('Pythons' as any);

    protected readonly users = [
        {id: 1, name: 'John Cleese'},
        {id: 2, name: 'Eric Idle'},
        {id: 3, name: 'Graham Chapman'},
        {id: 4, name: 'Michael Palin'},
        {id: 5, name: 'Terry Gilliam'},
    ] as unknown as readonly T[];

    protected readonly form = new FormGroup({
        user: new FormControl<T | null>(null),
        user2: new FormControl<T | null>(null),
    });

    protected readonly stringify = ({name}: T): string => name;

    protected readonly matcherString = (name: string, search: string): boolean =>
        name.split(' ').pop()?.toLowerCase().startsWith(search.toLowerCase()) ?? false;

    protected readonly matcherUser: TuiStringMatcher<T> = (user, search): boolean =>
        user.name.toLowerCase().startsWith(search.toLowerCase());
}
```

#### Multiselect

**Template:**
```html
<tui-multi-select placeholder="Ignored text" [formControl]="control" [tuiTextfieldLabelOutside]="true" > Star Wars persons <tui-data-list-wrapper *tuiDataList tuiMultiSelectGroup [items]="items | tuiFilterByInput" />
</tui-multi-select>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {FormControl, ReactiveFormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiDataListWrapper, TuiFilterByInputPipe} from '@taiga-ui/kit';
import {TuiMultiSelectModule, TuiTextfieldControllerModule} from '@taiga-ui/legacy';

@Component({
    standalone: true,
    imports: [
        ReactiveFormsModule,
        TuiDataListWrapper,
        TuiFilterByInputPipe,
        TuiMultiSelectModule,
        TuiTextfieldControllerModule,
    ],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly items = [
        'Luke Skywalker and a long time ago in a galaxy far, far away..',
        'Leia Organa Solo',
        'Darth Vader',
        'Han Solo',
        'Obi-Wan Kenobi',
        'Yoda',
    ];

    protected readonly control = new FormControl([this.items[0]]);
}
```

#### Async

**Template:**
```html
<form [formGroup]="form">
<tui-input formControlName="user"> User <tui-data-list-wrapper *tuiDataList [items]="items$ | async | tuiFilterByInput" />
</tui-input>
</form>
```
**TypeScript:**
```ts
import {AsyncPipe} from '@angular/common';
import {Component, inject} from '@angular/core';
import {FormControl, FormGroup, ReactiveFormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiDataListWrapper, TuiFilterByInputPipe} from '@taiga-ui/kit';
import {TuiInputModule} from '@taiga-ui/legacy';
import {delay, of, startWith} from 'rxjs';

@Component({
    standalone: true,
    imports: [
        AsyncPipe,
        ReactiveFormsModule,
        TuiDataListWrapper,
        TuiFilterByInputPipe,
        TuiInputModule,
    ],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly items$ = of(inject<readonly string[]>('Pythons' as any)).pipe(
        startWith([]),
        delay(1000),
    );

    protected readonly form = new FormGroup({
        user: new FormControl(''),
    });
}
```


### TypeScript

```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {TuiDemo} from '@demo/utils';

@Component({
    standalone: true,
    imports: [TuiDemo],
    templateUrl: './index.html',
    changeDetection,
})
export default class Page {
    protected readonly examples = ['Basic', 'Custom matcher', 'Multiselect', 'Async'];
}
```

---
# pipes/Flag
- **Package**: `CORE`
- **Type**: pipes
Pipe for getting source path to image with flag

### How to Use (Import)

```ts
import {TuiFlagPipe} from '@taiga-ui/core';

// ...

@Component({
  standalone: true,
  imports: [
    // ...
    TuiFlagPipe,
  ],
  // ...
})
export class Example {}
```

### How to Use (Template)

```html
<img
  alt="United Arab Emirates"
  [src]="'AE' | tuiFlag"
/>
```

### Example

```html
<img alt="" [src]="countryIsoCode | tuiFlag" />
```

### Usage Examples

#### Basic

**Template:**
```html
<img [alt]="(countriesNames$ | async)?.[countryIsoCode]" [src]="countryIsoCode | tuiFlag" [style.border-radius.%]="50" />
```
**TypeScript:**
```ts
import {AsyncPipe} from '@angular/common';
import {Component, inject} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiFlagPipe} from '@taiga-ui/core';
import {type TuiCountryIsoCode} from '@taiga-ui/i18n';
import {TUI_COUNTRIES} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [AsyncPipe, TuiFlagPipe],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly countryIsoCode: TuiCountryIsoCode = 'AE';
    protected readonly countriesNames$ = inject(TUI_COUNTRIES);
}
```


### TypeScript

```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {TuiDemo} from '@demo/utils';
import {TuiFlagPipe} from '@taiga-ui/core';
import {type TuiCountryIsoCode} from '@taiga-ui/i18n';
import {getCountries} from 'libphonenumber-js';

@Component({
    standalone: true,
    imports: [TuiDemo, TuiFlagPipe],
    templateUrl: './index.html',
    changeDetection,
})
export default class Page {
    protected countryIsoCodeVariants = getCountries();
    protected countryIsoCode: TuiCountryIsoCode = 'FR';

    protected get apiCodeDemo(): string {
        return `<img [src]="'${this.countryIsoCode}' | tuiFlag" />`;
    }
}
```

---
# pipes/FormatDate
- **Package**: `CORE`
- **Type**: pipes
Pipe to format timestamps/dates dynamically
        
            Differs from built-in Angular date formatting pipe because it returns an
            Observable

### How to Use (Import)

```ts
import {TuiFormatDatePipe} from '@taiga-ui/core';

//...

@Component({
  standalone: true,
  imports: [
    // ...
    TuiFormatDatePipe,
  ],
  //  ...
})
export class Example {}
```

### How to Use (Template)

```html
Formatted timestamp: {{timestamp | tuiFormatDate | async}}
```

### Usage Examples

#### Custom service

**Template:**
```html
Page refreshed {{ now | tuiFormatDate | async }} ago
```
**TypeScript:**
```ts
import {AsyncPipe, isPlatformBrowser} from '@angular/common';
import {Component, inject, Injectable, PLATFORM_ID} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiFormatDatePipe, TuiFormatDateService} from '@taiga-ui/core';
import {formatDistance} from 'date-fns';
import {map, type Observable, of, timer} from 'rxjs';

@Injectable()
export class FormatService extends TuiFormatDateService {
    private readonly delay$ = isPlatformBrowser(inject(PLATFORM_ID))
        ? timer(0, 1000)
        : of(0);

    public override format(timestamp: number): Observable<string> {
        return this.delay$.pipe(map(() => formatDistance(timestamp, Date.now())));
    }
}

@Component({
    standalone: true,
    imports: [AsyncPipe, TuiFormatDatePipe],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
    providers: [
        {
            provide: TuiFormatDateService,
            useClass: FormatService,
        },
    ],
})
export default class Example {
    protected readonly now = Date.now();
}
```


### TypeScript

```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {TuiDemo} from '@demo/utils';

@Component({
    standalone: true,
    imports: [TuiDemo],
    templateUrl: './index.html',
    changeDetection,
})
export default class Page {
    protected readonly provide = import('./examples/import/provide.md?raw');
}
```

---
# pipes/FormatNumber
- **Package**: `CORE`
- **Type**: pipes
Pipe to format number values to separate thousands

        
            Number formatting can be customized by using
            
                TUI_NUMBER_FORMAT

### How to Use (Import)

```ts
import {TuiFormatNumberPipe} from '@taiga-ui/core';

//...

@Component({
  standalone: true,
  imports: [
    // ...
    TuiFormatNumberPipe,
  ],
  //  ...
})
export class Example {}
```

### How to Use (Template)

```html
Formatted number: {{index | tuiFormatNumber | async}}
```

### Usage Examples

#### Basic

**Template:**
```html
<p>Formatted number by default: {{ 10500.33 | tuiFormatNumber | async }}</p>
<p> Formatted number with custom params: {{ 10500.33 | tuiFormatNumber: {precision: 4, decimalSeparator: '.'} | async }} </p>
<p> Formatted number with rounding: {{ 10500.334 | tuiFormatNumber: {precision: 2, decimalSeparator: '.', rounding: 'ceil'} | async }} </p>
```
**TypeScript:**
```ts
import {AsyncPipe} from '@angular/common';
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiFormatNumberPipe} from '@taiga-ui/core';

@Component({
    standalone: true,
    imports: [AsyncPipe, TuiFormatNumberPipe],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {}
```


### TypeScript

```ts
import {Component} from '@angular/core';
import {FormControl, ReactiveFormsModule} from '@angular/forms';
import {TuiDocNumberFormat} from '@demo/components/number-format';
import {changeDetection} from '@demo/emulate/change-detection';
import {DemoRoute} from '@demo/routes';
import {TuiDemo} from '@demo/utils';
import {TuiFormatNumberPipe, TuiTextfield} from '@taiga-ui/core';
import {TuiInputNumber} from '@taiga-ui/kit';

@Component({
    standalone: true,
    imports: [
        ReactiveFormsModule,
        TuiDemo,
        TuiDocNumberFormat,
        TuiFormatNumberPipe,
        TuiInputNumber,
        TuiTextfield,
    ],
    templateUrl: './index.html',
    changeDetection,
})
export default class PageComponent {
    protected readonly routes = DemoRoute;
    public readonly control = new FormControl(100);
}
```

---
# pipes/IsPresent
- **Package**: `CDK`
- **Type**: pipes
Pipe wrapper for
        
            IsPresent
        
        function

### How to Use (Import)

```ts
import {TuiIsPresentPipe} from '@taiga-ui/cdk';

// ...

@Component({
  standalone: true,
  imports: [
    // ...
    TuiIsPresentPipe,
  ],
  // ...
})
export class Example {}
```

### How to Use (Template)

```html
<div *ngIf="item | tuiIsPresent">{{item}}</div>
```

### Usage Examples

#### Usage

**Template:**
```html
<ng-container *tuiLet="count$ | async as count">
<div *ngIf="count | tuiIsPresent; else loading"> count is <code>{{ count | json }}</code>
</div>
<ng-template #loading>
<div> count is <code>{{ count | json }}</code> while it's loading </div>
</ng-template>
</ng-container>
<button size="m" tuiButton type="button" class="tui-space_top-4" (click)="loadCount()" > Load count </button>
```
**TypeScript:**
```ts
import {AsyncPipe, JsonPipe, NgIf} from '@angular/common';
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiIsPresentPipe, TuiLet} from '@taiga-ui/cdk';
import {TuiButton} from '@taiga-ui/core';
import {delayWhen, of, Subject} from 'rxjs';

@Component({
    standalone: true,
    imports: [AsyncPipe, JsonPipe, NgIf, TuiButton, TuiIsPresentPipe, TuiLet],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    private readonly loadCountSubject = new Subject<void>();

    protected readonly count$ = of(0).pipe(delayWhen(() => this.loadCountSubject));

    protected loadCount(): void {
        this.loadCountSubject.next();
        this.loadCountSubject.complete();
    }
}
```


### TypeScript

```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {DemoRoute} from '@demo/routes';
import {TuiDemo} from '@demo/utils';

@Component({
    standalone: true,
    imports: [TuiDemo],
    templateUrl: './index.html',
    changeDetection,
})
export default class Page {
    protected readonly routes = DemoRoute;
}
```

---
# pipes/Mapper
- **Package**: `CDK`
- **Type**: pipes
Pipe to transform a value with a function

### How to Use (Import)

```ts
import {TuiMapperPipe} from '@taiga-ui/cdk';

// ...

@Component({
  standalone: true,
  imports: [
    //    ...
    TuiMapperPipe,
  ],
  //  ...
})
export class Example {}
```

### How to Use (Template)

```html
{{item | tuiMapper: mapper: someArg}}
```

### Usage Examples

#### Basic

**Template:**
```html
<p>Transform 10 into {{ 10 | tuiMapper: mapper : '₽' }}</p>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiMapperPipe} from '@taiga-ui/cdk';

@Component({
    standalone: true,
    imports: [TuiMapperPipe],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly mapper = (amount: number, currencySymbol: string): string =>
        `Total: ${amount} ${currencySymbol}`;
}
```

#### With array

**Template:**
```html
<p>Transform {{ numbers }} into {{ numbers | tuiMapper: mapper : 3 }}</p>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {type TuiMapper, TuiMapperPipe} from '@taiga-ui/cdk';

@Component({
    standalone: true,
    imports: [TuiMapperPipe],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    protected numbers = [1, 2, 3, 4, 5] as const;

    protected readonly mapper: TuiMapper<[readonly number[], number], number[]> = (
        numbers,
        multiplier,
    ) => numbers.map((number) => number * multiplier);
}
```


### TypeScript

```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {TuiDemo} from '@demo/utils';

@Component({
    standalone: true,
    imports: [TuiDemo],
    templateUrl: './index.html',
    changeDetection,
})
export default class Page {
    protected readonly examples = ['Basic', 'With array'];
}
```

---
# pipes/Obfuscate
- **Package**: `CDK`
- **Type**: pipes
Pipe for obfuscating sensitive data

### How to Use (Import)

```ts
import {tuiObfuscateOptionsProvider, TuiObfuscatePipe} from '@taiga-ui/cdk';

//...

@Component({
  standalone: true,
  imports: [
    // ...
    TuiObfuscatePipe,
  ],
  //  ...
  providers: [
    tuiObfuscateOptionsProvider({
      default: ({length}, symbol = '*') => symbol.repeat(length),
      recipes: {
        city: ({length}) => 'x'.repeat(length),
        phone: ({length}) => '*'.repeat(length),
      },
    }),
  ],
})
export class Example {}
```

### How to Use (Template)

```html
<p>Obfuscated value: {{'abc' | tuiObfuscate}}</p>
<p>Obfuscated value: {{'abc' | tuiObfuscate: '#'}}</p>
<p>Obfuscated value: {{'abc' | tuiObfuscate: 'city'}}</p>
<p>Obfuscated value: {{'abc' | tuiObfuscate: 'phone'}}</p>
```

### Usage Examples

#### Basic

**Template:**
```html
<p> Obfuscate "+7(900)500-40-20" by default: <br /> {{ '+7(900)500-40-20' | tuiObfuscate }} </p>
<p> Obfuscate "2200 4400" with "#": <br /> {{ '2200 4400' | tuiObfuscate: '#' }} </p>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiObfuscatePipe} from '@taiga-ui/cdk';

@Component({
    standalone: true,
    imports: [TuiObfuscatePipe],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {}
```

#### Recipes

**Template:**
```html
<p> Obfuscate "Moscow" by recipe 'city': <br /> {{ 'Moscow' | tuiObfuscate: 'city' }} </p>
<p> Obfuscate "+7(900)500-40-20" by recipe 'phone': <br /> {{ '+7(900)500-40-20' | tuiObfuscate: 'phone' }} </p>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {tuiObfuscateOptionsProvider, TuiObfuscatePipe} from '@taiga-ui/cdk';

@Component({
    standalone: true,
    imports: [TuiObfuscatePipe],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
    providers: [
        tuiObfuscateOptionsProvider({
            recipes: {
                city: ({length}) => 'x'.repeat(length),
                phone: ({length}) => '*'.repeat(length),
            },
        }),
    ],
})
export default class Example {}
```

#### Custom default

**Template:**
```html
<p> Obfuscate "+7(900)500-40-20" by default: <br /> {{ '+7(900)500-40-20' | tuiObfuscate }} </p>
<p> Obfuscate "2200 4400" with "x": <br /> {{ '2200 4400' | tuiObfuscate: 'x' }} </p>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {tuiObfuscateOptionsProvider, TuiObfuscatePipe} from '@taiga-ui/cdk';

@Component({
    standalone: true,
    imports: [TuiObfuscatePipe],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
    providers: [
        tuiObfuscateOptionsProvider({
            default: ({length}, symbol = '#') => symbol.repeat(length),
        }),
    ],
})
export default class Example {}
```


### TypeScript

```ts
import {Component} from '@angular/core';
import {ReactiveFormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {DemoRoute} from '@demo/routes';
import {TuiDemo} from '@demo/utils';
import {tuiObfuscateOptionsProvider} from '@taiga-ui/cdk';
import {TuiTextfield} from '@taiga-ui/core';

@Component({
    standalone: true,
    imports: [ReactiveFormsModule, TuiDemo, TuiTextfield],
    templateUrl: './index.html',
    changeDetection,
    providers: [
        tuiObfuscateOptionsProvider({
            recipes: {
                city: ({length}) => 'x'.repeat(length),
            },
        }),
    ],
})
export default class PageComponent {
    protected readonly routes = DemoRoute;
    protected readonly examples = ['Basic', 'Recipes', 'Custom default'];
}
```

---
# pipes/RepeatTimes
- **Package**: `CDK`
- **Type**: pipes

### How to Use (Import)

```ts
import {TuiRepeatTimesPipe} from '@taiga-ui/cdk';

//...

@Component({
  standalone: true,
  imports: [
    // ...
    TuiRepeatTimesPipe,
  ],
  //  ...
})
export class Example {}
```

### How to Use (Template)

```html
@for (index of 3 | tuiRepeatTimes; track index) {
<div class="t-cell"></div>
}
```

### Usage Examples

#### Base

**Template:**
```html
<ng-container *ngFor="let index of 5 | tuiRepeatTimes"> {{ index }} </ng-container>
```
**TypeScript:**
```ts
import {NgForOf} from '@angular/common';
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiRepeatTimesPipe} from '@taiga-ui/cdk';

@Component({
    standalone: true,
    imports: [NgForOf, TuiRepeatTimesPipe],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {}
```


### TypeScript

```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {TuiDemo} from '@demo/utils';

@Component({
    standalone: true,
    imports: [TuiDemo],
    templateUrl: './index.html',
    changeDetection,
})
export default class Page {}
```

---
# pipes/Stringify
- **Package**: `KIT`
- **Type**: pipes
Pipe that creates
        TuiStringHandler
        by given key.

### How to Use (Import)

```ts
import {TuiStringifyPipe} from '@taiga-ui/kit';

// ...

@Component({
  standalone: true,
  imports: [
    //...
    TuiStringifyPipe,
  ],
  //  ...
})
export class Example {}
```

### How to Use (Template)

```html
<tui-combo-box
  [stringify]="'name' | tuiStringify"
  [(ngModel)]="value"
>
  <!-- ... -->
</tui-combo-box>
```

### Usage Examples

#### Basic

**Template:**
```html
<tui-combo-box [stringify]="'name' | tuiStringify" [(ngModel)]="value" > Pick your guy <tui-data-list-wrapper *tuiDataList [itemContent]="'name' | tuiStringify | tuiStringifyContent" [items]="items | tuiFilterByInput" />
</tui-combo-box>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {
    TuiDataListWrapper,
    TuiFilterByInputPipe,
    TuiStringifyContentPipe,
    TuiStringifyPipe,
} from '@taiga-ui/kit';
import {TuiComboBoxModule} from '@taiga-ui/legacy';

@Component({
    standalone: true,
    imports: [
        FormsModule,
        TuiComboBoxModule,
        TuiDataListWrapper,
        TuiFilterByInputPipe,
        TuiStringifyContentPipe,
        TuiStringifyPipe,
    ],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    protected value = null;

    protected readonly items = [
        {
            name: 'John Cleese',
            role: 'Black Knight',
        },
        {
            name: 'Eric Idle',
            role: 'Dead collector',
        },
    ] as const;
}
```


### TypeScript

```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {DemoRoute} from '@demo/routes';
import {TuiDemo} from '@demo/utils';

@Component({
    standalone: true,
    imports: [TuiDemo],
    templateUrl: './index.html',
    changeDetection,
})
export default class Page {
    protected readonly routes = DemoRoute;
}
```

---
# pipes/StringifyContent
- **Package**: `KIT`
- **Type**: pipes
Pipe that turns
        TuiStringHandler
        into content that works with
        $implicit
        .

### How to Use (Import)

```ts
import {TuiStringifyContentPipe} from '@taiga-ui/kit';

// ...

@Component({
  standalone: true,
  imports: [
    // ...
    TuiStringifyContentPipe,
  ],
  // ...
})
export class Example {}
```

### How to Use (Template)

```html
<tui-combo-box
  [stringify]="stringify"
  [(ngModel)]="value"
>
  <tui-data-list-wrapper
    *tuiDataList
    [items]="items"
    [itemContent]="stringify | tuiStringifyContent"
  ></tui-data-list-wrapper>
</tui-combo-box>
```

### Usage Examples

#### Basic

**Template:**
```html
<tui-combo-box [stringify]="stringify" [(ngModel)]="value" > Pick your guy <tui-data-list-wrapper *tuiDataList [itemContent]="stringify | tuiStringifyContent" [items]="items | tuiFilterByInput" />
</tui-combo-box>
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {
    TuiDataListWrapper,
    TuiFilterByInputPipe,
    TuiStringifyContentPipe,
} from '@taiga-ui/kit';
import {TuiComboBoxModule} from '@taiga-ui/legacy';

interface User {
    readonly name: string;
    readonly surname: string;
}

@Component({
    standalone: true,
    imports: [
        FormsModule,
        TuiComboBoxModule,
        TuiDataListWrapper,
        TuiFilterByInputPipe,
        TuiStringifyContentPipe,
    ],
    templateUrl: './index.html',
    encapsulation,
    changeDetection,
})
export default class Example {
    protected value = null;

    protected readonly items = [
        {
            name: 'John',
            surname: 'Cleese',
        },
        {
            name: 'Eric',
            surname: 'Idle',
        },
    ];

    protected readonly stringify = ({name, surname}: User): string =>
        `${name} ${surname}`;
}
```


### TypeScript

```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {DemoRoute} from '@demo/routes';
import {TuiDemo} from '@demo/utils';

@Component({
    standalone: true,
    imports: [TuiDemo],
    templateUrl: './index.html',
    changeDetection,
})
export default class Page {
    protected readonly routes = DemoRoute;
}
```

---