### Component Setup Example

Source: https://taiga-ui.dev/llms-full.txt

Initial component configuration using Angular signals and Taiga UI modules.

```typescript
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, TuiTitle} from '@taiga-ui/core';
import {TuiDrawer} from '@taiga-ui/kit';
import {TuiHeader} from '@taiga-ui/layout';

@Component({
    imports: [
        ReactiveFormsModule,
        TuiButton,
        TuiDemo,
        TuiDrawer,
        TuiHeader,
        TuiPopup,
        TuiTitle,
    ],
    templateUrl: './index.html',
    changeDetection,
})
export default class Page {
    protected readonly examples = ['Full', 'Modal'];

    protected readonly directionVariants: readonly TuiHorizontalDirection[] = [
        'start',
        'end',
    ];

    protected readonly open = signal(false);
    protected overlay = false;
    protected direction: TuiHorizontalDirection = 'end';

    public onClose(): void {
        this.open.set(false);
    }
}
```

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

### Basic Usage Example

Source: https://taiga-ui.dev/llms-full.txt

Standard implementation showing icon declaration, component setup, and host styling.

```html
<tui-icon icon="@tui.heart" />
<tui-icon icon="@img.mastercard" />
<tui-icon icon="@font.home" />
```

```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({
    imports: [TuiIcon],
    templateUrl: './index.html',
    styleUrl: './index.less',
    encapsulation,
    changeDetection,
})
export default class Example {}
```

```less
:host {
    display: flex;
    gap: 1rem;
    color: var(--tui-text-action);

    --tui-font-icon: 'Material Symbols Outlined';
}
```

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

### Configure Chip Example Component

Source: https://taiga-ui.dev/llms-full.txt

TypeScript setup for a general chip example component using TuiDemo and TuiChip.

```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({
    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;
}
```

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

### Define documentation example list

Source: https://taiga-ui.dev/llms-full.txt

TypeScript component setup for managing a list of documentation examples.

```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({
    imports: [TuiDemo, TuiDocAppearance, TuiMessage],
    templateUrl: './index.html',
    changeDetection,
})
export default class Example {
    protected readonly examples = [
        'Basic',
        'Custom color',
        'With link',
        'Chat messages',
        'Inside cells',
    ];
}
```

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

### Initialize List Demo Page

Source: https://taiga-ui.dev/llms-full.txt

Setup a demo page component to display various list examples.

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

@Component({
    imports: [TuiDemo],
    templateUrl: './index.html',
    changeDetection,
})
export default class Page {
    protected readonly examples = [
        'Bulleted',
        'Numbered',
        'Nested',
        'Long text',
        'Custom color',
    ];
}
```

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

### Implement basic hint usage examples

Source: https://taiga-ui.dev/llms-full.txt

Demonstrates various ways to implement hints and tooltips in templates and the corresponding component setup.

```html
<p>
<button appearance="secondary" iconStart="@tui.circle-help" tuiHint="Works well with icon buttons" tuiHintDescribe tuiHintDirection="end" tuiIconButton type="button" ></button>
</p>
<p>
<button id="button" appearance="secondary" iconStart="@tui.circle-help" tuiButton type="button" > Hint </button>
<tui-icon tuiHintDirection="end" tuiTooltip="Or with external tooltip" tuiTooltipDescribe="button" class="tui-space_top-4 tui-space_left-4" />
</p>
<tui-textfield>
<input tuiInput [(ngModel)]="value" />
<label tuiLabel>Input with accessible hint</label>
<tui-icon tuiTooltip="This is built-in with controls" />
</tui-textfield>
```

```ts
import {Component} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {TuiButton, TuiHint, TuiIcon, TuiInput} from '@taiga-ui/core';
import {TuiTooltip} from '@taiga-ui/kit';

@Component({
    imports: [FormsModule, TuiButton, TuiHint, TuiIcon, TuiInput, TuiTooltip],
    templateUrl: './index.html',
    changeDetection,
})
export default class Example {
    protected value = '';
}
```

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

### Configure Example Component

Source: https://taiga-ui.dev/llms-full.txt

Sets up a demo component with a list of available examples.

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

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

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

### Configure Demo Page Routes

Source: https://taiga-ui.dev/llms-full.txt

TypeScript setup for defining demo page routes and example list.

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

@Component({
    imports: [TuiDemo],
    templateUrl: './index.html',
    changeDetection,
})
export default class Page {
    protected readonly routes = DemoRoute;
    protected examples = ['Basic', 'With responsive dialog', 'Loading and error states'];
}
```

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

### Configure Example Page

Source: https://taiga-ui.dev/llms-full.txt

TypeScript configuration for the main example page.

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

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

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

### Define Example List Configuration

Source: https://taiga-ui.dev/llms-full.txt

Registers the available card examples in the demo component.

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

@Component({
    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',
    ];
}
```

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

### Component Configuration Example

Source: https://taiga-ui.dev/llms-full.txt

Example of setting up the component with reactive forms and predefined date ranges.

```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 {TuiDocInput} from '@demo/components/input';
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} from '@taiga-ui/core';
import {TuiInputChip, TuiInputDate, TuiInputDateMulti} from '@taiga-ui/kit';

@Component({
    imports: [
        ReactiveFormsModule,
        TuiDemo,
        TuiDocControl,
        TuiDocDropdown,
        TuiDocIcons,
        TuiDocInput,
        TuiDocItemsHandlers,
        TuiDocTextfield,
        TuiDropdown,
        TuiInputChip,
        TuiInputDate,
        TuiInputDateMulti,
    ],
    templateUrl: './index.html',
    changeDetection,
})
export default class Example {
    protected readonly control = new FormControl();
    protected readonly routes = DemoRoute;

    public readonly examples = [
        'Basic',
        'Chip',
        'Disabled items',
        'Format',
        'customization',
        'Value transformer',
    ];

    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;
}
```

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

### Basic Usage Examples

Source: https://taiga-ui.dev/llms-full.txt

Examples showing standard input usage with different sizes and icon configurations.

```html
<tui-textfield iconEnd="@tui.settings" iconStart="@tui.search" >
<label tuiLabel>I am a label</label>
<input placeholder="I am placeholder" tuiInput [(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 tuiInput [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 tuiInput [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>
```

```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, TuiInput} from '@taiga-ui/core';
import {TuiTooltip} from '@taiga-ui/kit';

@Component({
    imports: [FormsModule, TuiIcon, TuiInput, TuiTooltip],
    templateUrl: './index.html',
    styleUrl: './index.less',
    encapsulation,
    changeDetection,
})
export default class Example {
    protected value = '';
}
```

```less
:host {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
```

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

### Basic Usage Example

Source: https://taiga-ui.dev/llms-full.txt

A complete example showing how to iterate over sizes and apply TuiCell styles.

```html
@for (size of sizes; track size) { <div [tuiCell]="size">
<div appearance="primary" tuiAvatar="@tui.star" ></div>
<div tuiTitle> Title <div tuiSubtitle>Description</div>
</div>
<div tuiTitle> Secondary title <div tuiSubtitle>Another description</div>
</div>
</div> }
```

```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiCell, TuiTitle} from '@taiga-ui/core';
import {TuiAvatar} from '@taiga-ui/kit';

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

```less
:host {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

[tuiCell] {
    max-inline-size: 25rem;
}
```

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

### Register Documentation Examples

Source: https://taiga-ui.dev/llms-full.txt

Configures a demo page component to display a list of available documentation examples.

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

@Component({
    imports: [TuiDemo],
    templateUrl: './index.html',
    changeDetection,
})
export default class Page {
    protected readonly component = import('./examples/import/component.md');

    protected readonly examples = [
        'assert',
        'getPaymentSystem',
        'isPresent',
        'markControlAsTouchedAndValidate',
    ];
}
```

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

### Basic Usage Example

Source: https://taiga-ui.dev/llms-full.txt

A functional example showing a hint with dynamic content and a button interaction.

```html
<div size="l" tuiAvatar tuiHintAppearance="floating" tuiHintDirection="end" [style.background]="'❤️' | tuiAutoColor" [tuiHint]="tooltip" > ❤️ </div>
<ng-template #tooltip>
<div> What is <strong>love</strong> ? </div>
<div>Baby don't hurt me</div>
<div>Don't hurt me</div>
<div>Counter: {{ counter() }}</div>
<div>No more...</div>
<button size="xs" tuiButton type="button" (click)="onClick()" > Counter + 1 </button>
</ng-template>
```

```ts
import {Component, signal} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiButton, TuiHint} from '@taiga-ui/core';
import {TuiAutoColorPipe, TuiAvatar} from '@taiga-ui/kit';

@Component({
    imports: [TuiAutoColorPipe, TuiAvatar, TuiButton, TuiHint],
    templateUrl: './index.html',
    styleUrl: './index.less',
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly counter = signal(1);

    protected onClick(): void {
        this.counter.update((n) => n + 1);
    }
}
```

```less
@import '@taiga-ui/styles/utils';

:host {
    display: block;
    background: #3e4757;
    box-shadow: 0 0 0 100rem #3e4757;
}
```

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

### Implement Basic Dropdown Example

Source: https://taiga-ui.dev/llms-full.txt

A complete example showing the template, component logic, and styling for a context-menu triggered dropdown.

```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
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({
    imports: [TuiButton, TuiDropdown, TuiIcon],
    templateUrl: './index.html',
    styleUrl: './index.less',
    encapsulation,
    changeDetection,
})
export default class Example {}
```

```less
.text {
    display: inline-block;
    margin: 0.4rem 1rem;
}

.icon {
    cursor: context-menu;
}
```

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

### Full Usage Example

Source: https://taiga-ui.dev/llms-full.txt

A complete example demonstrating the template, TypeScript logic, and LESS styling for TuiAnimated.

```html
<button appearance="outline" tuiButton type="button" class="button" (click)="isOpen = !isOpen" > {{ isOpen ? 'Hide me' : 'Show opening crawl' }} </button> @if (isOpen) { <div tuiAnimated class="container" > A long time ago in a galaxy far, far away.... </div> }
```

```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 {TuiAnimated} from '@taiga-ui/cdk';
import {TuiAppearance, TuiButton} from '@taiga-ui/core';

@Component({
    imports: [FormsModule, TuiAnimated, TuiAppearance, TuiButton],
    templateUrl: './index.html',
    styleUrl: './index.less',
    encapsulation,
    changeDetection,
})
export default class Example {
    protected isOpen = false;
}
```

```less
@width: 15rem;

.button {
    inline-size: @width;
    border-radius: 1rem 1rem 0 0;
}

.container {
    block-size: 6rem;
    inline-size: @width;
    overflow: hidden;
    background: #222;
    color: var(--tui-status-warning);

    &.tui-enter,
    &.tui-leave {
        animation-name: tuiFade, tuiScale;
    }
}
```

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

### Example Page Component Configuration

Source: https://taiga-ui.dev/llms-full.txt

Boilerplate component configuration for displaying the TuiMapperPipe examples.

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

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

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

### Example Page Component

Source: https://taiga-ui.dev/llms-full.txt

Main component for the documentation page listing available examples.

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

@Component({
    imports: [TuiDemo],
    templateUrl: './index.html',
    changeDetection,
})
export default class Page {
    public readonly examples = [
        'Show more',
        'contenteditable',
        'Add and remove content',
        'With animations inside',
    ];
}
```

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

### Basic Usage Example

Source: https://taiga-ui.dev/llms-full.txt

A complete example demonstrating the template, component logic, and styling for a scroll-triggered floating container.

```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)" > @for (_ of '-'.repeat(30); track $index) { <div tuiCell>
<div appearance="primary" tuiAvatar="@tui.star" ></div>
<div tuiTitle> Title <div tuiSubtitle>Description</div>
</div>
</div> } @if (floating) { <footer [tuiFloatingContainer]="secondAction ? '' : 'transparent'">
<button tuiButton type="button" > Main action </button>
<tui-expand [expanded]="secondAction">
<button appearance="flat" tuiButton type="button" > Secondary action </button>
</tui-expand>
</footer> } </div>
```

```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, TuiCell, TuiExpand, TuiLabel, TuiTitle} from '@taiga-ui/core';
import {TuiAvatar, TuiSwitch} from '@taiga-ui/kit';
import {TuiFloatingContainer} from '@taiga-ui/layout';

@Component({
    imports: [
        FormsModule,
        TuiAvatar,
        TuiButton,
        TuiCell,
        TuiExpand,
        TuiFloatingContainer,
        TuiLabel,
        TuiSwitch,
        TuiTitle,
    ],
    templateUrl: './index.html',
    styleUrl: './index.less',
    encapsulation,
    changeDetection,
})
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;
    }
}
```

```less
.content {
    position: relative;
    display: block;
    inline-size: 18rem;
    block-size: 30rem;
    overflow: auto;
    box-shadow: 0 0.25rem 1.25rem rgba(0, 0, 0, 0.1);
    background: var(--tui-background-elevation-1);
}

footer {
    margin-inline: 1rem;
}
```

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

### Basic Usage Example

Source: https://taiga-ui.dev/llms-full.txt

A complete example showing the template, TypeScript logic, and styling for a date-range driven line chart.

```html
<p>
<tui-textfield [tuiTextfieldCleaner]="false">
<label tuiLabel>Range</label>
<input tuiInputDateRange [maxLength]="maxLength" [(ngModel)]="range" />
<tui-calendar-range *tuiDropdown />
</tui-textfield>
</p>
<tui-axes class="axes" [axisXLabels]="labels()" [horizontalLines]="5" [verticalLines]="labels().length" >
<tui-line-days-chart class="chart" [height]="200" [value]="value()" [xStringify]="xStringify()" [yStringify]="yStringify" />
</tui-axes>
```

```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 {WA_IS_E2E} from '@ng-web-apis/platform';
import {TuiAxes, TuiLineDaysChart} from '@taiga-ui/addon-charts';
import {
    TuiDay,
    type TuiDayLike,
    TuiDayRange,
    TuiMonth,
    type TuiStringHandler,
} from '@taiga-ui/cdk';
import {TUI_MONTHS, TuiTextfield} from '@taiga-ui/core';
import {TuiInputDateRange} from '@taiga-ui/kit';

@Component({
    imports: [FormsModule, TuiAxes, TuiInputDateRange, TuiLineDaysChart, TuiTextfield],
    templateUrl: './index.html',
    styleUrl: './index.less',
    encapsulation,
    changeDetection,
})
export default class Example {
    private readonly isE2E = inject(WA_IS_E2E);
    private readonly months = inject(TUI_MONTHS);

    protected readonly maxLength: TuiDayLike = {month: 12};

    protected readonly range = signal(
        new TuiDayRange(TuiDay.currentLocal(), TuiDay.currentLocal().append({year: 1})),
    );

    protected readonly value = computed(({to, from} = this.range()) =>
        Array.from({length: TuiDay.lengthBetween(from, to) + 1}).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,
                ],
            ],
            [],
        ),
    );

    protected readonly labels = computed(({to, from} = this.range()) => [
        ...Array.from(
            {length: TuiMonth.lengthBetween(from, to) + 1},
            (_, i) => this.months()[from.append({month: i}).month] ?? '',
        ),
        null,
    ]);

    protected readonly xStringify = computed<TuiStringHandler<TuiDay>>(
        () =>
            ({month, day}) =>
                `${this.months()[month]}, ${day}`,
    );

    protected readonly yStringify: TuiStringHandler<number> = (y) =>
        `${(10 * y).toLocaleString('en-US', {maximumFractionDigits: 0})} $`;
}
```

```less
:host {
    display: block;
    inline-size: 50rem;
}

.axes {
    block-size: 12.5rem;
    color: #bc71c9;
}
```

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

### Page Component Setup

Source: https://taiga-ui.dev/llms-full.txt

Boilerplate for the documentation page component.

```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 {TuiDocInput} from '@demo/components/input';
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';

@Component({
    imports: [
        FormsModule,
        ReactiveFormsModule,
        TuiDemo,
        TuiDocControl,
        TuiDocIcons,
        TuiDocInput,
        TuiDocTextfield,
        TuiInputCard,
    ],
    templateUrl: './index.html',
    changeDetection,
})
export default class Page {
    protected card = '';
    protected readonly examples = ['Form', 'Card'];
}
```

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

### ButtonGroup Component TypeScript Configuration

Source: https://taiga-ui.dev/llms-full.txt

Standard Angular component setup for ButtonGroup examples.

```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({
    imports: [TuiAppearance, TuiButtonGroup, TuiIcon],
    templateUrl: './index.html',
    styleUrl: './index.less',
    encapsulation,
    changeDetection,
})
export default class Example {}
```

```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({
    imports: [TuiButtonGroup, TuiIcon],
    templateUrl: './index.html',
    styleUrl: './index.less',
    encapsulation,
    changeDetection,
})
export default class Example {}
```

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

### Configure Bottom Sheet Component

Source: https://taiga-ui.dev/llms-full.txt

TypeScript setup for the Bottom Sheet example component.

```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 {TuiBottomSheet} from '@taiga-ui/addon-mobile';
import {TuiButton, TuiCheckbox} from '@taiga-ui/core';
import {TuiAccordion, TuiBlock} from '@taiga-ui/kit';

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

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

### Page Component Configuration

Source: https://taiga-ui.dev/llms-full.txt

Standard component setup for the documentation page displaying the swipe examples.

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

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

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

### Define Demo Page Component

Source: https://taiga-ui.dev/llms-full.txt

Basic component setup for a demo page including example imports.

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

@Component({
    imports: [TuiDemo],
    templateUrl: './index.html',
    changeDetection,
})
export default class Page {
    protected readonly providers = import('./examples/import/providers.md');
    protected examples = ['Dropdown', 'Dropdown and custom portal', 'Hint'];
}
```

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

### Block Component TypeScript Setup

Source: https://taiga-ui.dev/llms-full.txt

TypeScript component class for managing the form state of Block examples.

```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 {TuiCheckbox, TuiIcon, TuiRadio, TuiTitle} from '@taiga-ui/core';
import {TuiBlock, TuiTooltip} from '@taiga-ui/kit';

@Component({
    imports: [
        ReactiveFormsModule,
        TuiBlock,
        TuiCheckbox,
        TuiIcon,
        TuiRadio,
        TuiTitle,
        TuiTooltip,
    ],
    templateUrl: './index.html',
    styleUrl: './index.less',
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly form = 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(),
    });
}
```

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

### Configure Demo Page for Taiga UI Components

Source: https://taiga-ui.dev/llms-full.txt

Sets up a documentation page component using TuiDemo and custom example options provider.

```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({
    imports: [TuiDemo],
    templateUrl: './index.html',
    changeDetection,
    providers: [tuiDocExampleOptionsProvider({fullsize: true})],
})
export default class Page {
    protected readonly examples = ['Sizes', 'Accessories', 'Interactive', 'Wrapping'];
}
```

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

### Surface Preset Examples

Source: https://taiga-ui.dev/llms-full.txt

Demonstrates using TuiSurface with different appearance presets.

```html
<button tuiAppearance="floating" tuiSurface type="button" > Floating </button>
<button tuiAppearance="neutral" tuiSurface type="button" > Neutral </button>
```

```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';
import {TuiSurface} from '@taiga-ui/layout';

@Component({
    imports: [TuiAppearance, TuiSurface],
    templateUrl: './index.html',
    styleUrl: './index.less',
    encapsulation,
    changeDetection,
})
export default class Example {}
```

```less
:host {
    display: grid;
    grid-template-columns: repeat(3, 8rem);
    gap: 1rem;
}

[tuiSurface] {
    padding: 1.25rem;
    border-radius: var(--tui-radius-l);
}
```

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

### Implement Mobile Calendar

Source: https://taiga-ui.dev/llms-full.txt

Basic setup for the mobile calendar component with custom week start configuration.

```html
<tui-mobile-calendar [min]="min" />
```

```ts
import {Component, signal} 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 {tuiCalendarOptionsProvider} from '@taiga-ui/core';

@Component({
    imports: [TuiMobileCalendar],
    templateUrl: './index.html',
    styleUrl: './index.less',
    encapsulation,
    changeDetection,
    providers: [tuiCalendarOptionsProvider({weekStart: signal(TuiDayOfWeek.Sunday)})],
})
export default class Example {
    protected min = TuiDay.currentLocal();
}
```

```less
tui-mobile-calendar {
    max-inline-size: 20rem;
    block-size: 30rem;
}
```

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

### Define Demo Page Component

Source: https://taiga-ui.dev/llms-full.txt

Basic component setup for the documentation page hosting the radio list examples.

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

@Component({
    imports: [TuiDemo],
    templateUrl: './index.html',
    changeDetection,
})
export default class Page {
    protected readonly examples = ['Platforms', 'Identity matcher', 'List'];
}
```

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

### Configure Arc Mode Component

Source: https://taiga-ui.dev/llms-full.txt

TypeScript class setup for the arc mode example, defining available sizes.

```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({
    imports: [TuiProgress],
    templateUrl: './index.html',
    styleUrl: './index.less',
    encapsulation,
    changeDetection,
})
export default class Example {
    protected readonly sizes = ['xxs', 'xs', 's', 'm', 'l', 'xl', 'xxl'] as const;
}
```

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

### Configure ItemsWithMore Component

Source: https://taiga-ui.dev/llms-full.txt

TypeScript class setup for the ItemsWithMore example, including necessary imports and state management.

```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 {TuiChip, TuiItemsWithMore} from '@taiga-ui/kit';
import {TuiItemGroup} from '@taiga-ui/layout';

@Component({
    imports: [FormsModule, TuiChip, TuiItemGroup, TuiItemsWithMore],
    templateUrl: './index.html',
    styleUrl: './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';
}
```

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

### Implement Shimmer and Skeleton loading states

Source: https://taiga-ui.dev/llms-full.txt

A complete example showing how to toggle between shimmer and skeleton loading states using a switch.

```html
<label tuiLabel>
<input tuiSwitch type="checkbox" [(ngModel)]="loading" /> Loading </label>
<h3>Shimmer</h3>
<section appearance="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>
<div appearance="primary" tuiAvatar="@tui.star" ></div>
</aside>
</header>
<tui-avatar-stack [tuiShimmer]="loading"> @for (avatar of avatars; track $index) { <div tuiAvatar="@tui.user">
<img alt="" [src]="avatar" />
</div> } </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>
<h3>Skeleton</h3>
<section appearance="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>
<div appearance="primary" tuiAvatar="@tui.star" [tuiSkeleton]="loading" ></div>
</aside>
</header>
<tui-avatar-stack> @for (avatar of avatars; track avatar) { <div [tuiAvatar]="avatar" [tuiSkeleton]="loading" ></div> } </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
import {Component} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {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({
    imports: [
        FormsModule,
        TuiAvatar,
        TuiAvatarStack,
        TuiButton,
        TuiCardLarge,
        TuiHeader,
        TuiLabel,
        TuiShimmer,
        TuiSkeleton,
        TuiSwitch,
        TuiTitle,
    ],
    templateUrl: './index.html',
    styleUrl: './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',
    ];
}
```

```less
:host {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

h3 {
    font: var(--tui-typography-heading-h6);
    margin: 0;
}

footer {
    display: flex;
    gap: 1.25rem;

    button {
        flex: 1;
    }
}
```

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

### InputYear Full Configuration Example

Source: https://taiga-ui.dev/llms-full.txt

Demonstrates the full range of configuration options for the TuiInputYear component within a template.

```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 [focused]="input.focused" [formControl]="control" [invalid]="controlDoc.invalid" [max]="max" [min]="min" [readOnly]="controlDoc.readonly" [state]="input.state" [tuiDisabled]="controlDoc.disabled" />
<tui-calendar-year *tuiDropdown />
</tui-textfield>
</ng-template>
```

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

### Dropdown Page Component Configuration

Source: https://taiga-ui.dev/llms-full.txt

Main page component setup for the dropdown documentation, defining available examples and delay configurations.

```ts
import {Component} 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';

@Component({
    imports: [TuiButton, TuiDemo, TuiDocDropdown, TuiDropdown],
    templateUrl: './index.html',
    changeDetection,
})
export default class PageComponent {
    protected readonly examples = [
        'Basic',
        'With DropdownOpen',
        'Nested',
        'With custom host',
        'Mobile',
    ];

    protected showDelay = 200;
    protected hideDelay = 500;
}
```

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

### Configure Page Component for Dark Mode Demo

Source: https://taiga-ui.dev/llms-full.txt

Initial setup for a documentation page component using Taiga UI modules and example imports.

```typescript
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 Example from './examples/1';

@Component({
    imports: [ClipboardModule, Example, TuiDemo, TuiLink],
    templateUrl: './index.html',
    encapsulation: ViewEncapsulation.None,
    changeDetection,
})
export default class Page {
    protected readonly example1 = {
        HTML: import('./examples/1/index.html'),
        LESS: import('./examples/1/index.less'),
        TypeScript: import('./examples/1/index.ts?raw', {with: {loader: 'text'}}),
    };

    protected readonly mixins = [
        '.appearance-hover(@ruleset)',
        '.appearance-active(@ruleset)',
        '.appearance-disabled(@ruleset)',
        '.appearance-focus(@ruleset)',
    ];

    protected readonly routes = DemoRoute;
}
```