@taiga-ui/addon-doc 4.8.0 → 4.8.1-canary.852a9d9

package/fesm2022/taiga-ui-addon-doc-components.mjs

@@ -1,9 +1,12 @@
 import * as i0 from '@angular/core';
-import { inject, Component, ViewEncapsulation, ChangeDetectionStrategy, Pipe, EventEmitter, Input, Output, PLATFORM_ID, TemplateRef, ViewChild, ContentChild, Directive, ChangeDetectorRef, DestroyRef, ContentChildren, InjectionToken, signal, ElementRef, computed } from '@angular/core';
-import { TUI_DOC_DOCUMENTATION_TEXTS, TUI_DOC_TYPE_REFERENCE_PARSER, TUI_DOC_TYPE_REFERENCE_HANDLER, TUI_DOC_ICONS, TUI_DOC_EXAMPLE_MARKDOWN_CODE_PROCESSOR, TUI_DOC_URL_STATE_HANDLER, TUI_DOC_DEMO_TEXTS, TUI_DOC_EXCLUDED_PROPERTIES, TUI_DOC_EXAMPLE_CONTENT_PROCESSOR, TUI_DOC_EXAMPLE_TEXTS, TUI_DOC_CODE_EDITOR, TUI_DOC_CODE_ACTIONS, TUI_DOC_TITLE, TUI_DOC_PAGES, TUI_DOC_PAGE_LOADED, TUI_DOC_SEARCH_TEXT, TUI_DOC_SEARCH_ENABLED, TUI_DOC_LOGO, TUI_DOC_MENU_TEXT, TUI_DOC_MAP_PAGES, TUI_DOC_SEE_ALSO_TEXT, TUI_DOC_SOURCE_CODE, TUI_DOC_SOURCE_CODE_TEXT, TUI_DOC_SEE_ALSO, TUI_DOC_DEFAULT_TABS } from '@taiga-ui/addon-doc/tokens';
-import { NgForOf, NgIf, NgSwitch, NgSwitchCase, isPlatformServer, AsyncPipe, Location, JsonPipe, NgTemplateOutlet, DOCUMENT, TitleCasePipe } from '@angular/common';
+import { inject, Component, ViewEncapsulation, ChangeDetectionStrategy, Pipe, EventEmitter, Input, Output, PLATFORM_ID, computed, signal, TemplateRef, ViewChild, ContentChild, Directive, ChangeDetectorRef, DestroyRef, ContentChildren, ElementRef } from '@angular/core';
+import { TUI_DOC_DOCUMENTATION_TEXTS, TUI_DOC_TYPE_REFERENCE_PARSER, TUI_DOC_TYPE_REFERENCE_HANDLER, TUI_DOC_URL_STATE_HANDLER, TUI_DOC_ICONS, TUI_DOC_EXAMPLE_MARKDOWN_CODE_PROCESSOR, TUI_DOC_DEMO_TEXTS, TUI_DOC_EXCLUDED_PROPERTIES, TUI_DOC_EXAMPLE_CONTENT_PROCESSOR, TUI_DOC_EXAMPLE_TEXTS, TUI_DOC_CODE_EDITOR, TUI_DOC_CODE_ACTIONS, TUI_DOC_TITLE, TUI_DOC_PAGES, TUI_DOC_PAGE_LOADED, TUI_DOC_SEARCH_TEXT, TUI_DOC_SEARCH_ENABLED, TUI_DOC_LOGO, TUI_DOC_MENU_TEXT, TUI_DOC_MAP_PAGES, TUI_DOC_SEE_ALSO_TEXT, TUI_DOC_SOURCE_CODE, TUI_DOC_SOURCE_CODE_TEXT, TUI_DOC_SEE_ALSO, TUI_DOC_SUPPORT_LANGUAGE, TUI_DOC_DEFAULT_TABS } from '@taiga-ui/addon-doc/tokens';
+import { Location, NgForOf, NgIf, NgSwitch, NgSwitchCase, isPlatformServer, AsyncPipe, JsonPipe, NgTemplateOutlet, DOCUMENT, TitleCasePipe } from '@angular/common';
 import * as i1 from '@angular/forms';
 import { FormsModule, FormGroup, ReactiveFormsModule, FormControl } from '@angular/forms';
+import { ActivatedRoute, UrlSerializer, RouterLink, RouterLinkActive, Router, NavigationEnd, Scroll, RouterOutlet } from '@angular/router';
+import { tuiInspectAny, tuiCoerceValue, tuiRawLoad, tuiCoerceValueIsTrue, tuiCleanObject, tuiRawLoadRecord, tuiTransliterateKeyboardLayout } from '@taiga-ui/addon-doc/utils';
+import { tuiIsNumber, tuiPure, tuiPx, tuiIsString, tuiCreateToken, tuiProvideOptions, tuiIsPresent, tuiUniqBy } from '@taiga-ui/cdk/utils/miscellaneous';
 import { TuiIcon } from '@taiga-ui/core/components/icon';
 import * as i4 from '@taiga-ui/core/components/textfield';
 import { TuiTextfield, TuiTextfieldDirective } from '@taiga-ui/core/components/textfield';
@@ -15,20 +18,17 @@ import * as i3 from '@taiga-ui/legacy/components/input-number';
 import { TuiInputNumberModule } from '@taiga-ui/legacy/components/input-number';
 import * as i5 from '@taiga-ui/legacy/directives/textfield-controller';
 import { TuiTextfieldControllerModule } from '@taiga-ui/legacy/directives/textfield-controller';
-import { tuiInspectAny, tuiRawLoad, tuiCoerceValueIsTrue, tuiCleanObject, tuiCoerceValue, tuiRawLoadRecord, tuiTransliterateKeyboardLayout } from '@taiga-ui/addon-doc/utils';
 import { TUI_IS_E2E } from '@taiga-ui/cdk/tokens';
 import * as i1$1 from '@angular/cdk/clipboard';
 import { ClipboardModule, Clipboard } from '@angular/cdk/clipboard';
-import { toSignal, takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { toSignal, toObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { TuiButton } from '@taiga-ui/core/components/button';
 import { Highlight } from 'ngx-highlightjs';
-import { BehaviorSubject, Subject, switchMap, timer, map, startWith, merge, ReplaySubject, switchAll, filter, mergeMap, debounceTime, combineLatest, take, distinctUntilChanged } from 'rxjs';
+import { BehaviorSubject, Subject, switchMap, timer, map, startWith, skip, merge, ReplaySubject, switchAll, filter, mergeMap, debounceTime, combineLatest, take, distinctUntilChanged } from 'rxjs';
 import { __decorate } from 'tslib';
 import { TUI_FALSE_HANDLER, EMPTY_QUERY } from '@taiga-ui/cdk/constants';
 import { TuiLet } from '@taiga-ui/cdk/directives/let';
-import { tuiPure, tuiPx, tuiIsNumber, tuiIsString, tuiCreateToken, tuiProvideOptions, tuiIsPresent, tuiUniqBy } from '@taiga-ui/cdk/utils/miscellaneous';
 import { TUI_COPY_TEXTS } from '@taiga-ui/kit/tokens';
-import { UrlSerializer, ActivatedRoute, RouterLink, RouterLinkActive, Router, NavigationEnd, Scroll, RouterOutlet } from '@angular/router';
 import { TuiResizable, TuiResizer } from '@taiga-ui/cdk/directives/resizer';
 import { tuiInjectElement, tuiGetElementObscures } from '@taiga-ui/cdk/utils/dom';
 import { tuiToInteger, tuiClamp } from '@taiga-ui/cdk/utils/math';
@@ -38,7 +38,7 @@ import { TuiGroup } from '@taiga-ui/core/directives/group';
 import { TUI_DARK_MODE, TUI_COMMON_ICONS, TUI_THEME } from '@taiga-ui/core/tokens';
 import * as i5$1 from '@taiga-ui/legacy/components/select';
 import { TuiSelectModule } from '@taiga-ui/legacy/components/select';
-import * as i2$1 from '@taiga-ui/core/components/data-list';
+import * as i3$1 from '@taiga-ui/core/components/data-list';
 import { TuiDataList } from '@taiga-ui/core/components/data-list';
 import { trigger, transition, style, animate } from '@angular/animations';
 import { tuiQueryListChanges, tuiWatch, tuiZonefreeScheduler, tuiControlValue } from '@taiga-ui/cdk/observables';
@@ -54,23 +54,24 @@ import { WA_LOCATION, WA_LOCAL_STORAGE } from '@ng-web-apis/common';
 import { TuiMapperPipe } from '@taiga-ui/cdk/pipes/mapper';
 import { TuiLink, tuiLinkOptionsProvider } from '@taiga-ui/core/components/link';
 import { TuiLoader } from '@taiga-ui/core/components/loader';
-import * as i2$2 from '@taiga-ui/kit/components/tabs';
+import * as i2$1 from '@taiga-ui/kit/components/tabs';
 import { TuiTabs } from '@taiga-ui/kit/components/tabs';
 import { PolymorpheusComponent, PolymorpheusOutlet, PolymorpheusTemplate } from '@taiga-ui/polymorpheus';
 import { TUI_EXAMPLE_PRIMARY_FILE_NAME } from '@taiga-ui/addon-doc/types';
 import * as i1$2 from '@taiga-ui/cdk/directives/item';
-import { TuiItem } from '@taiga-ui/cdk/directives/item';
 import * as i1$3 from '@taiga-ui/addon-mobile/directives/sidebar';
 import { TuiSidebarDirective, TuiSidebar } from '@taiga-ui/addon-mobile/directives/sidebar';
 import { TuiActiveZone } from '@taiga-ui/cdk/directives/active-zone';
 import { Title } from '@angular/platform-browser';
 import { tuiAutoFocusOptionsProvider, TuiAutoFocus } from '@taiga-ui/cdk/directives/auto-focus';
 import { tuiScrollbarOptionsProvider, TuiScrollbar } from '@taiga-ui/core/components/scrollbar';
-import * as i2$3 from '@taiga-ui/kit/components/accordion';
+import * as i2$2 from '@taiga-ui/kit/components/accordion';
 import { TuiAccordion } from '@taiga-ui/kit/components/accordion';
 import { TuiInputModule } from '@taiga-ui/legacy/components/input';
 import { TuiFlagPipe } from '@taiga-ui/core/pipes/flag';
 import { TuiLanguageSwitcherService } from '@taiga-ui/i18n/utils';
+import * as i2$3 from '@taiga-ui/kit/components/badged-content';
+import { TuiBadgedContent } from '@taiga-ui/kit/components/badged-content';
 import { TuiButtonSelect } from '@taiga-ui/kit/directives/button-select';
 import { TuiRoot } from '@taiga-ui/core/components/root';
 import { TuiReplacePipe } from '@taiga-ui/cdk/pipes/replace';
@@ -142,15 +143,58 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 }]
         }] });
 
+const SERIALIZED_SUFFIX$1 = '$';
 class TuiDocAPIItem {
     constructor() {
+        this.locationRef = inject(Location);
+        this.activatedRoute = inject(ActivatedRoute);
+        this.urlSerializer = inject(UrlSerializer);
+        this.urlStateHandler = inject(TUI_DOC_URL_STATE_HANDLER);
         this.name = '';
         this.type = '';
         this.items = [];
         this.valueChange = new EventEmitter();
     }
+    ngOnInit() {
+        this.parseParams(this.activatedRoute.snapshot.queryParams);
+    }
+    onValueChange(value) {
+        this.value = value;
+        this.valueChange.emit(value);
+        this.setQueryParam(value);
+    }
+    clearBrackets(value) {
+        return value.replaceAll(/[()[\]]/g, '');
+    }
+    parseParams(params) {
+        const name = this.clearBrackets(this.name);
+        const propertyValue = params[name];
+        const propertyValueWithSuffix = params[`${name}${SERIALIZED_SUFFIX$1}`];
+        if (!propertyValue && !propertyValueWithSuffix) {
+            return;
+        }
+        let value = !!propertyValueWithSuffix && this.items
+            ? this.items[propertyValueWithSuffix]
+            : tuiCoerceValue(propertyValue);
+        if (this.type === 'string' && tuiIsNumber(value)) {
+            value = value.toString();
+        }
+        this.onValueChange(value);
+    }
+    setQueryParam(value) {
+        const tree = this.urlSerializer.parse(this.locationRef.path());
+        const isValueAvailableByKey = value instanceof Object;
+        const computedValue = isValueAvailableByKey && this.items ? this.items.indexOf(value) : value;
+        const suffix = isValueAvailableByKey ? SERIALIZED_SUFFIX$1 : '';
+        const propName = this.clearBrackets(this.name) + suffix;
+        tree.queryParams = {
+            ...tree.queryParams,
+            [propName]: computedValue,
+        };
+        this.locationRef.go(this.urlStateHandler(tree));
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiDocAPIItem, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiDocAPIItem, isStandalone: true, selector: "tr[tuiDocAPIItem]", inputs: { name: "name", type: "type", value: "value", items: "items" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<td class=\"t-td\">\n    <code\n        class=\"t-name\"\n        [class.t-name_banana]=\"name.startsWith('[(')\"\n        [class.t-name_input]=\"name.startsWith('[')\"\n        [class.t-name_output]=\"name.startsWith('(')\"\n    >\n        {{ name }}\n    </code>\n    <ng-content />\n</td>\n<td class=\"t-td\">\n    <code class=\"t-type\">\n        <ng-container *ngFor=\"let item of type | tuiDocTypeReference; let last = last\">\n            <a\n                *ngIf=\"item.reference; else default\"\n                target=\"_blank\"\n                class=\"t-reference\"\n                [attr.href]=\"item.reference\"\n            >\n                {{ item.type }}\n                <tui-icon\n                    icon=\"@tui.external-link\"\n                    [style.font-size.rem]=\"1\"\n                />\n            </a>\n            <ng-template #default>\n                {{ item.type }}\n            </ng-template>\n            <span *ngIf=\"!last\">&nbsp;|&nbsp;</span>\n        </ng-container>\n    </code>\n</td>\n<td class=\"t-td\">\n    <tui-textfield\n        *ngIf=\"items.length; else noItems\"\n        tuiChevron\n        tuiTextfieldSize=\"m\"\n        class=\"t-input\"\n        [content]=\"content\"\n        [tuiTextfieldCleaner]=\"type.includes('null')\"\n    >\n        <select\n            placeholder=\"null\"\n            tuiTextfield\n            [ngModel]=\"value ?? null\"\n            (ngModelChange)=\"valueChange.emit($event)\"\n        ></select>\n        <tui-data-list-wrapper\n            *tuiTextfieldDropdown\n            [itemContent]=\"content\"\n            [items]=\"items\"\n        />\n    </tui-textfield>\n    <ng-template\n        #content\n        let-data\n    >\n        <code [style.margin]=\"0\">{{ data | tuiInspectAny }}</code>\n    </ng-template>\n    <ng-template #noItems>\n        <ng-container [ngSwitch]=\"type\">\n            <input\n                *ngSwitchCase=\"'boolean'\"\n                tuiSwitch\n                type=\"checkbox\"\n                [id]=\"name\"\n                [ngModel]=\"value\"\n                (ngModelChange)=\"valueChange.emit($event)\"\n            />\n\n            <tui-textfield\n                *ngSwitchCase=\"'string'\"\n                tuiTextfieldSize=\"m\"\n                class=\"t-input\"\n            >\n                <input\n                    tuiTextfield\n                    [id]=\"name\"\n                    [ngModel]=\"value || ''\"\n                    (ngModelChange)=\"valueChange.emit($event)\"\n                />\n            </tui-textfield>\n\n            <tui-input-number\n                *ngSwitchCase=\"'number'\"\n                tuiTextfieldSize=\"m\"\n                class=\"t-input\"\n                [nativeId]=\"name\"\n                [ngModel]=\"value\"\n                [step]=\"1\"\n                [tuiTextfieldLabelOutside]=\"true\"\n                (ngModelChange)=\"valueChange.emit($event || 0)\"\n            />\n        </ng-container>\n    </ng-template>\n</td>\n", styles: [":host{box-shadow:inset 0 -1px var(--tui-border-normal)}.t-td{padding:1.5rem 2rem 1.5rem 0;vertical-align:top}.t-td:last-child{padding-inline-end:0;text-align:end}.t-name{display:flex!important;min-block-size:1.5rem;inline-size:-webkit-fit-content;inline-size:-moz-fit-content;inline-size:fit-content;margin:0 0 .5rem!important;-webkit-text-fill-color:var(--tui-background-accent-2-pressed)}.t-name_input{-webkit-text-fill-color:var(--tui-text-negative)}.t-name_banana{-webkit-text-fill-color:var(--tui-text-action)}.t-name_output{-webkit-text-fill-color:var(--tui-status-info)}.t-type{flex-wrap:wrap;align-items:center;justify-content:flex-start;min-block-size:1.5rem;margin:0!important}.t-reference{display:inline-flex;color:var(--tui-text-action);text-decoration:none;align-items:center;justify-content:center;gap:3px}.t-input{min-inline-size:10rem;margin-block-start:-.625rem}@media screen and (max-width: 47.9625em){:host{gap:1rem;padding:1rem 0}.t-td{padding:0}.t-td:last-child{text-align:start}.t-input{margin:0}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: TuiChevron, selector: "[tuiChevron]", inputs: ["tuiChevron"] }, { kind: "component", type: i2.TuiDataListWrapperComponent, selector: "tui-data-list-wrapper:not([labels])", inputs: ["items", "disabledItemHandler", "emptyContent", "size", "itemContent"], outputs: ["itemClick"] }, { kind: "pipe", type: TuiDocTypeReferencePipe, name: "tuiDocTypeReference" }, { kind: "component", type: TuiIcon, selector: "tui-icon", inputs: ["icon", "background"] }, { kind: "ngmodule", type: TuiInputNumberModule }, { kind: "component", type: i3.TuiInputNumberComponent, selector: "tui-input-number", inputs: ["min", "max", "step"] }, { kind: "directive", type: i3.TuiInputNumberDirective, selector: "tui-input-number" }, { kind: "pipe", type: TuiInspectPipe, name: "tuiInspectAny" }, { kind: "component", type: TuiSwitch, selector: "input[type=\"checkbox\"][tuiSwitch]", inputs: ["size", "showIcons"] }, { kind: "component", type: i4.TuiSelect, selector: "select[tuiTextfield]", inputs: ["placeholder"] }, { kind: "component", type: i4.TuiTextfieldComponent, selector: "tui-textfield", inputs: ["filler", "stringify", "content"] }, { kind: "directive", type: i4.TuiTextfieldDirective, selector: "input[tuiTextfield]" }, { kind: "directive", type: i4.TuiTextfieldOptionsDirective, selector: "[tuiTextfieldAppearance],[tuiTextfieldSize],[tuiTextfieldCleaner]", inputs: ["tuiTextfieldAppearance", "tuiTextfieldSize", "tuiTextfieldCleaner"] }, { kind: "directive", type: i4.TuiTextfieldDropdownDirective, selector: "ng-template[tuiTextfieldDropdown]" }, { kind: "ngmodule", type: TuiTextfieldControllerModule }, { kind: "directive", type: i5.TuiTextfieldCleanerDirective, selector: "[tuiTextfieldCleaner]", inputs: ["tuiTextfieldCleaner"] }, { kind: "directive", type: i5.TuiTextfieldLabelOutsideDirective, selector: "[tuiTextfieldLabelOutside]", inputs: ["tuiTextfieldLabelOutside"] }, { kind: "directive", type: i5.TuiTextfieldSizeDirective, selector: "[tuiTextfieldSize]", inputs: ["tuiTextfieldSize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiDocAPIItem, isStandalone: true, selector: "tr[tuiDocAPIItem]", inputs: { name: "name", type: "type", value: "value", items: "items" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<td class=\"t-td\">\n    <code\n        class=\"t-name\"\n        [class.t-name_banana]=\"name.startsWith('[(')\"\n        [class.t-name_input]=\"name.startsWith('[')\"\n        [class.t-name_output]=\"name.startsWith('(')\"\n    >\n        {{ name }}\n    </code>\n    <ng-content />\n</td>\n<td class=\"t-td\">\n    <code class=\"t-type\">\n        <ng-container *ngFor=\"let item of type | tuiDocTypeReference; let last = last\">\n            <a\n                *ngIf=\"item.reference; else default\"\n                target=\"_blank\"\n                class=\"t-reference\"\n                [attr.href]=\"item.reference\"\n            >\n                {{ item.type }}\n                <tui-icon\n                    icon=\"@tui.external-link\"\n                    [style.font-size.rem]=\"1\"\n                />\n            </a>\n            <ng-template #default>\n                {{ item.type }}\n            </ng-template>\n            <span *ngIf=\"!last\">&nbsp;|&nbsp;</span>\n        </ng-container>\n    </code>\n</td>\n<td class=\"t-td\">\n    <tui-textfield\n        *ngIf=\"items.length; else noItems\"\n        tuiChevron\n        tuiTextfieldSize=\"m\"\n        class=\"t-input\"\n        [content]=\"content\"\n        [tuiTextfieldCleaner]=\"type.includes('null')\"\n    >\n        <select\n            placeholder=\"null\"\n            tuiTextfield\n            [ngModel]=\"value ?? null\"\n            (ngModelChange)=\"onValueChange($event)\"\n        ></select>\n        <tui-data-list-wrapper\n            *tuiTextfieldDropdown\n            [itemContent]=\"content\"\n            [items]=\"items\"\n        />\n    </tui-textfield>\n    <ng-template\n        #content\n        let-data\n    >\n        <code [style.margin]=\"0\">{{ data | tuiInspectAny }}</code>\n    </ng-template>\n    <ng-template #noItems>\n        <ng-container [ngSwitch]=\"type\">\n            <input\n                *ngSwitchCase=\"'boolean'\"\n                tuiSwitch\n                type=\"checkbox\"\n                [id]=\"name\"\n                [ngModel]=\"value\"\n                (ngModelChange)=\"onValueChange($event)\"\n            />\n\n            <tui-textfield\n                *ngSwitchCase=\"'string'\"\n                tuiTextfieldSize=\"m\"\n                class=\"t-input\"\n            >\n                <input\n                    tuiTextfield\n                    [id]=\"name\"\n                    [ngModel]=\"value || ''\"\n                    (ngModelChange)=\"onValueChange($event)\"\n                />\n            </tui-textfield>\n\n            <tui-input-number\n                *ngSwitchCase=\"'number'\"\n                tuiTextfieldSize=\"m\"\n                class=\"t-input\"\n                [nativeId]=\"name\"\n                [ngModel]=\"value\"\n                [step]=\"1\"\n                [tuiTextfieldLabelOutside]=\"true\"\n                (ngModelChange)=\"onValueChange($event || 0)\"\n            />\n        </ng-container>\n    </ng-template>\n</td>\n", styles: [":host{box-shadow:inset 0 -1px var(--tui-border-normal)}.t-td{padding:1.5rem 2rem 1.5rem 0;vertical-align:top}.t-td:last-child{padding-inline-end:0;text-align:end}.t-name{display:flex!important;min-block-size:1.5rem;inline-size:-webkit-fit-content;inline-size:-moz-fit-content;inline-size:fit-content;margin:0 0 .5rem!important;-webkit-text-fill-color:var(--tui-background-accent-2-pressed)}.t-name_input{-webkit-text-fill-color:var(--tui-text-negative)}.t-name_banana{-webkit-text-fill-color:var(--tui-text-action)}.t-name_output{-webkit-text-fill-color:var(--tui-status-info)}.t-type{flex-wrap:wrap;align-items:center;justify-content:flex-start;min-block-size:1.5rem;margin:0!important}.t-reference{display:inline-flex;color:var(--tui-text-action);text-decoration:none;align-items:center;justify-content:center;gap:3px}.t-input{min-inline-size:10rem;margin-block-start:-.625rem}@media screen and (max-width: 47.9625em){:host{gap:1rem;padding:1rem 0}.t-td{padding:0}.t-td:last-child{text-align:start}.t-input{margin:0}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: TuiChevron, selector: "[tuiChevron]", inputs: ["tuiChevron"] }, { kind: "component", type: i2.TuiDataListWrapperComponent, selector: "tui-data-list-wrapper:not([labels])", inputs: ["items", "disabledItemHandler", "emptyContent", "size", "itemContent"], outputs: ["itemClick"] }, { kind: "pipe", type: TuiDocTypeReferencePipe, name: "tuiDocTypeReference" }, { kind: "component", type: TuiIcon, selector: "tui-icon", inputs: ["icon", "background"] }, { kind: "ngmodule", type: TuiInputNumberModule }, { kind: "component", type: i3.TuiInputNumberComponent, selector: "tui-input-number", inputs: ["min", "max", "step"] }, { kind: "directive", type: i3.TuiInputNumberDirective, selector: "tui-input-number" }, { kind: "pipe", type: TuiInspectPipe, name: "tuiInspectAny" }, { kind: "component", type: TuiSwitch, selector: "input[type=\"checkbox\"][tuiSwitch]", inputs: ["size", "showIcons"] }, { kind: "component", type: i4.TuiSelect, selector: "select[tuiTextfield]", inputs: ["placeholder"] }, { kind: "component", type: i4.TuiTextfieldComponent, selector: "tui-textfield", inputs: ["filler", "stringify", "content"] }, { kind: "directive", type: i4.TuiTextfieldDirective, selector: "input[tuiTextfield]" }, { kind: "directive", type: i4.TuiTextfieldOptionsDirective, selector: "[tuiTextfieldAppearance],[tuiTextfieldSize],[tuiTextfieldCleaner]", inputs: ["tuiTextfieldAppearance", "tuiTextfieldSize", "tuiTextfieldCleaner"] }, { kind: "directive", type: i4.TuiTextfieldDropdownDirective, selector: "ng-template[tuiTextfieldDropdown]" }, { kind: "ngmodule", type: TuiTextfieldControllerModule }, { kind: "directive", type: i5.TuiTextfieldCleanerDirective, selector: "[tuiTextfieldCleaner]", inputs: ["tuiTextfieldCleaner"] }, { kind: "directive", type: i5.TuiTextfieldLabelOutsideDirective, selector: "[tuiTextfieldLabelOutside]", inputs: ["tuiTextfieldLabelOutside"] }, { kind: "directive", type: i5.TuiTextfieldSizeDirective, selector: "[tuiTextfieldSize]", inputs: ["tuiTextfieldSize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiDocAPIItem, decorators: [{
             type: Component,
@@ -169,7 +213,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         TuiSwitch,
                         TuiTextfield,
                         TuiTextfieldControllerModule,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<td class=\"t-td\">\n    <code\n        class=\"t-name\"\n        [class.t-name_banana]=\"name.startsWith('[(')\"\n        [class.t-name_input]=\"name.startsWith('[')\"\n        [class.t-name_output]=\"name.startsWith('(')\"\n    >\n        {{ name }}\n    </code>\n    <ng-content />\n</td>\n<td class=\"t-td\">\n    <code class=\"t-type\">\n        <ng-container *ngFor=\"let item of type | tuiDocTypeReference; let last = last\">\n            <a\n                *ngIf=\"item.reference; else default\"\n                target=\"_blank\"\n                class=\"t-reference\"\n                [attr.href]=\"item.reference\"\n            >\n                {{ item.type }}\n                <tui-icon\n                    icon=\"@tui.external-link\"\n                    [style.font-size.rem]=\"1\"\n                />\n            </a>\n            <ng-template #default>\n                {{ item.type }}\n            </ng-template>\n            <span *ngIf=\"!last\">&nbsp;|&nbsp;</span>\n        </ng-container>\n    </code>\n</td>\n<td class=\"t-td\">\n    <tui-textfield\n        *ngIf=\"items.length; else noItems\"\n        tuiChevron\n        tuiTextfieldSize=\"m\"\n        class=\"t-input\"\n        [content]=\"content\"\n        [tuiTextfieldCleaner]=\"type.includes('null')\"\n    >\n        <select\n            placeholder=\"null\"\n            tuiTextfield\n            [ngModel]=\"value ?? null\"\n            (ngModelChange)=\"valueChange.emit($event)\"\n        ></select>\n        <tui-data-list-wrapper\n            *tuiTextfieldDropdown\n            [itemContent]=\"content\"\n            [items]=\"items\"\n        />\n    </tui-textfield>\n    <ng-template\n        #content\n        let-data\n    >\n        <code [style.margin]=\"0\">{{ data | tuiInspectAny }}</code>\n    </ng-template>\n    <ng-template #noItems>\n        <ng-container [ngSwitch]=\"type\">\n            <input\n                *ngSwitchCase=\"'boolean'\"\n                tuiSwitch\n                type=\"checkbox\"\n                [id]=\"name\"\n                [ngModel]=\"value\"\n                (ngModelChange)=\"valueChange.emit($event)\"\n            />\n\n            <tui-textfield\n                *ngSwitchCase=\"'string'\"\n                tuiTextfieldSize=\"m\"\n                class=\"t-input\"\n            >\n                <input\n                    tuiTextfield\n                    [id]=\"name\"\n                    [ngModel]=\"value || ''\"\n                    (ngModelChange)=\"valueChange.emit($event)\"\n                />\n            </tui-textfield>\n\n            <tui-input-number\n                *ngSwitchCase=\"'number'\"\n                tuiTextfieldSize=\"m\"\n                class=\"t-input\"\n                [nativeId]=\"name\"\n                [ngModel]=\"value\"\n                [step]=\"1\"\n                [tuiTextfieldLabelOutside]=\"true\"\n                (ngModelChange)=\"valueChange.emit($event || 0)\"\n            />\n        </ng-container>\n    </ng-template>\n</td>\n", styles: [":host{box-shadow:inset 0 -1px var(--tui-border-normal)}.t-td{padding:1.5rem 2rem 1.5rem 0;vertical-align:top}.t-td:last-child{padding-inline-end:0;text-align:end}.t-name{display:flex!important;min-block-size:1.5rem;inline-size:-webkit-fit-content;inline-size:-moz-fit-content;inline-size:fit-content;margin:0 0 .5rem!important;-webkit-text-fill-color:var(--tui-background-accent-2-pressed)}.t-name_input{-webkit-text-fill-color:var(--tui-text-negative)}.t-name_banana{-webkit-text-fill-color:var(--tui-text-action)}.t-name_output{-webkit-text-fill-color:var(--tui-status-info)}.t-type{flex-wrap:wrap;align-items:center;justify-content:flex-start;min-block-size:1.5rem;margin:0!important}.t-reference{display:inline-flex;color:var(--tui-text-action);text-decoration:none;align-items:center;justify-content:center;gap:3px}.t-input{min-inline-size:10rem;margin-block-start:-.625rem}@media screen and (max-width: 47.9625em){:host{gap:1rem;padding:1rem 0}.t-td{padding:0}.t-td:last-child{text-align:start}.t-input{margin:0}}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<td class=\"t-td\">\n    <code\n        class=\"t-name\"\n        [class.t-name_banana]=\"name.startsWith('[(')\"\n        [class.t-name_input]=\"name.startsWith('[')\"\n        [class.t-name_output]=\"name.startsWith('(')\"\n    >\n        {{ name }}\n    </code>\n    <ng-content />\n</td>\n<td class=\"t-td\">\n    <code class=\"t-type\">\n        <ng-container *ngFor=\"let item of type | tuiDocTypeReference; let last = last\">\n            <a\n                *ngIf=\"item.reference; else default\"\n                target=\"_blank\"\n                class=\"t-reference\"\n                [attr.href]=\"item.reference\"\n            >\n                {{ item.type }}\n                <tui-icon\n                    icon=\"@tui.external-link\"\n                    [style.font-size.rem]=\"1\"\n                />\n            </a>\n            <ng-template #default>\n                {{ item.type }}\n            </ng-template>\n            <span *ngIf=\"!last\">&nbsp;|&nbsp;</span>\n        </ng-container>\n    </code>\n</td>\n<td class=\"t-td\">\n    <tui-textfield\n        *ngIf=\"items.length; else noItems\"\n        tuiChevron\n        tuiTextfieldSize=\"m\"\n        class=\"t-input\"\n        [content]=\"content\"\n        [tuiTextfieldCleaner]=\"type.includes('null')\"\n    >\n        <select\n            placeholder=\"null\"\n            tuiTextfield\n            [ngModel]=\"value ?? null\"\n            (ngModelChange)=\"onValueChange($event)\"\n        ></select>\n        <tui-data-list-wrapper\n            *tuiTextfieldDropdown\n            [itemContent]=\"content\"\n            [items]=\"items\"\n        />\n    </tui-textfield>\n    <ng-template\n        #content\n        let-data\n    >\n        <code [style.margin]=\"0\">{{ data | tuiInspectAny }}</code>\n    </ng-template>\n    <ng-template #noItems>\n        <ng-container [ngSwitch]=\"type\">\n            <input\n                *ngSwitchCase=\"'boolean'\"\n                tuiSwitch\n                type=\"checkbox\"\n                [id]=\"name\"\n                [ngModel]=\"value\"\n                (ngModelChange)=\"onValueChange($event)\"\n            />\n\n            <tui-textfield\n                *ngSwitchCase=\"'string'\"\n                tuiTextfieldSize=\"m\"\n                class=\"t-input\"\n            >\n                <input\n                    tuiTextfield\n                    [id]=\"name\"\n                    [ngModel]=\"value || ''\"\n                    (ngModelChange)=\"onValueChange($event)\"\n                />\n            </tui-textfield>\n\n            <tui-input-number\n                *ngSwitchCase=\"'number'\"\n                tuiTextfieldSize=\"m\"\n                class=\"t-input\"\n                [nativeId]=\"name\"\n                [ngModel]=\"value\"\n                [step]=\"1\"\n                [tuiTextfieldLabelOutside]=\"true\"\n                (ngModelChange)=\"onValueChange($event || 0)\"\n            />\n        </ng-container>\n    </ng-template>\n</td>\n", styles: [":host{box-shadow:inset 0 -1px var(--tui-border-normal)}.t-td{padding:1.5rem 2rem 1.5rem 0;vertical-align:top}.t-td:last-child{padding-inline-end:0;text-align:end}.t-name{display:flex!important;min-block-size:1.5rem;inline-size:-webkit-fit-content;inline-size:-moz-fit-content;inline-size:fit-content;margin:0 0 .5rem!important;-webkit-text-fill-color:var(--tui-background-accent-2-pressed)}.t-name_input{-webkit-text-fill-color:var(--tui-text-negative)}.t-name_banana{-webkit-text-fill-color:var(--tui-text-action)}.t-name_output{-webkit-text-fill-color:var(--tui-status-info)}.t-type{flex-wrap:wrap;align-items:center;justify-content:flex-start;min-block-size:1.5rem;margin:0!important}.t-reference{display:inline-flex;color:var(--tui-text-action);text-decoration:none;align-items:center;justify-content:center;gap:3px}.t-input{min-inline-size:10rem;margin-block-start:-.625rem}@media screen and (max-width: 47.9625em){:host{gap:1rem;padding:1rem 0}.t-td{padding:0}.t-td:last-child{text-align:start}.t-input{margin:0}}\n"] }]
         }], propDecorators: { name: [{
                 type: Input
             }], type: [{
@@ -244,8 +288,13 @@ class TuiDocDemo {
         this.locationRef = inject(Location);
         this.urlSerializer = inject(UrlSerializer);
         this.urlStateHandler = inject(TUI_DOC_URL_STATE_HANDLER);
+        this.darkMode = inject(TUI_DARK_MODE);
         this.template = null;
-        this.dark = tuiCoerceValueIsTrue(this.params.darkMode ?? inject(TUI_DARK_MODE)());
+        this.theme = computed(() => (this.dark() ? 'dark' : 'light'));
+        this.dark = signal(tuiCoerceValueIsTrue(this.params.darkMode ?? this.darkMode()));
+        this.$ = toObservable(this.darkMode)
+            .pipe(skip(1), takeUntilDestroyed())
+            .subscribe((mode) => this.onModeChange(mode));
         this.updateOnVariants = ['change', 'blur', 'submit'];
         this.updateOn = this.params.updateOn || this.updateOnVariants[0];
         this.opaque = tuiCoerceValueIsTrue(this.params.sandboxOpaque ?? true);
@@ -266,9 +315,9 @@ class TuiDocDemo {
     onMouseUp() {
         this.updateUrl({ sandboxWidth: this.sandboxWidth });
     }
-    onModeChange(dark) {
-        this.dark = dark;
-        this.updateUrl({ sandboxWidth: this.sandboxWidth, darkMode: this.dark });
+    onModeChange(darkMode) {
+        this.dark.set(darkMode);
+        this.updateUrl({ sandboxWidth: this.sandboxWidth, darkMode });
     }
     toggleDetails() {
         this.expanded = !this.expanded;
@@ -324,7 +373,7 @@ class TuiDocDemo {
         return this.urlSerializer.parse(this.locationRef.path());
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiDocDemo, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiDocDemo, isStandalone: true, selector: "tui-doc-demo", inputs: { control: "control", sticky: "sticky" }, host: { listeners: { "window:resize": "onResize()", "document:mouseup.silent": "onMouseUp()" }, properties: { "class._sticky": "sticky" } }, queries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true }], viewQueries: [{ propertyName: "resizable", first: true, predicate: TuiResizable, descendants: true, static: true }, { propertyName: "content", first: true, predicate: ["content"], descendants: true, static: true }, { propertyName: "resizer", first: true, predicate: ["resizer"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"t-settings\">\n    <label class=\"t-label\">\n        <input\n            size=\"s\"\n            tuiSwitch\n            type=\"checkbox\"\n            [ngModel]=\"dark\"\n            (ngModelChange)=\"onModeChange($event)\"\n        />\n        {{ texts[0] }}\n    </label>\n    <label class=\"t-label\">\n        <input\n            size=\"s\"\n            tuiSwitch\n            type=\"checkbox\"\n            [ngModel]=\"opaque\"\n            (ngModelChange)=\"changeOpaque($event)\"\n        />\n        {{ texts[1] }}\n    </label>\n</div>\n<div\n    tuiResizable\n    class=\"t-wrapper\"\n    [attr.tuiTheme]=\"dark ? 'dark' : 'light'\"\n    [class.t-wrapper_transparent]=\"!opaque\"\n>\n    <div class=\"t-content\">\n        <div\n            #content\n            id=\"demo-content\"\n        >\n            <form\n                *ngIf=\"testForm\"\n                class=\"t-form\"\n                [formGroup]=\"testForm\"\n            >\n                <div class=\"t-input-wrapper\">\n                    <ng-container [ngTemplateOutlet]=\"template\" />\n                </div>\n                <button\n                    automation-id=\"tui-demo-button__toggle-details\"\n                    size=\"s\"\n                    tuiButton\n                    type=\"button\"\n                    class=\"t-button\"\n                    [tuiChevron]=\"expanded\"\n                    (click)=\"toggleDetails()\"\n                >\n                    {{ texts[2] }}\n                </button>\n                <tui-expand\n                    class=\"t-expand\"\n                    [expanded]=\"expanded\"\n                >\n                    <ng-template tuiExpandContent>\n                        <pre class=\"t-value\">Form data: {{ testForm.value | json }}</pre>\n                        <div\n                            tuiGroup\n                            class=\"t-form-controls\"\n                        >\n                            <tui-select\n                                automation-id=\"tui-demo-select__expand-update-on\"\n                                tuiTextfieldSize=\"s\"\n                                class=\"t-select\"\n                                [ngModel]=\"updateOn\"\n                                [ngModelOptions]=\"{standalone: true}\"\n                                (ngModelChange)=\"updateOnChange($event)\"\n                            >\n                                updateOn\n                                <tui-data-list-wrapper\n                                    *tuiDataList\n                                    [items]=\"updateOnVariants\"\n                                />\n                            </tui-select>\n                            <button\n                                automation-id=\"tui-demo-button__reset-state\"\n                                size=\"s\"\n                                tuiButton\n                                type=\"reset\"\n                                [style.flex]=\"'0 0 auto'\"\n                            >\n                                Reset\n                            </button>\n                            <button\n                                automation-id=\"tui-demo-button__submit-state\"\n                                size=\"s\"\n                                tuiButton\n                                type=\"submit\"\n                                [style.flex]=\"'0 0 auto'\"\n                            >\n                                Submit\n                            </button>\n                        </div>\n                    </ng-template>\n                </tui-expand>\n            </form>\n            <ng-content />\n        </div>\n    </div>\n    <div\n        #resizer\n        class=\"t-resizer\"\n        [tuiResizer]=\"[1, 0]\"\n        (tuiSizeChange)=\"updateWidth($event[0])\"\n    ></div>\n</div>\n", styles: [":host{position:relative;display:block;min-inline-size:100%;margin:1.5rem 0;pointer-events:none}.t-settings{position:absolute;bottom:calc(100% + .75rem);display:flex;gap:1rem;align-items:center;justify-content:flex-end;pointer-events:none;inline-size:100%}.t-settings>*{pointer-events:auto}.t-label{display:flex;align-items:center;gap:.5rem}.t-wrapper{display:flex;box-shadow:var(--tui-shadow-medium);border:1px solid var(--tui-border-normal);border-radius:var(--tui-radius-m);max-inline-size:100%;min-block-size:6rem;inline-size:100%;min-inline-size:10rem;color:var(--tui-text-primary);background-color:var(--tui-background-base);overflow:hidden;pointer-events:auto}.t-wrapper.t-wrapper_transparent{background-image:linear-gradient(45deg,var(--tui-background-base-alt) 25%,transparent 25%),linear-gradient(-45deg,var(--tui-background-base-alt) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--tui-background-base-alt) 75%),linear-gradient(-45deg,transparent 75%,var(--tui-background-base-alt) 75%);background-size:1.25rem 1.25rem;background-position:0 0,0 .625rem,.625rem -.625rem,-.625rem 0}@media screen and (max-width: 47.9625em){.t-wrapper{min-block-size:auto}}.t-content{flex:1 1 0;min-inline-size:0;padding:1.5rem;box-sizing:border-box;overflow:hidden}@media screen and (max-width: 47.9625em){.t-content{padding:1rem}}.t-form{display:flex;flex-wrap:wrap;align-items:flex-start}.t-input-wrapper{inline-size:100%;margin-bottom:.5rem}.t-expand{inline-size:100%}.t-value{flex:1;background:var(--tui-background-neutral-1);padding:.75rem;border-radius:.25rem}.t-mode{inline-size:12.5rem}.t-select{max-inline-size:15rem}.t-resizer{position:relative;display:flex;box-shadow:var(--tui-shadow-medium);inline-size:3.5rem;min-block-size:inherit;align-items:center;justify-content:center;flex-shrink:0;border-left:1px solid var(--tui-border-normal);outline:none;background:var(--tui-background-base);color:var(--tui-text-primary)}.t-resizer:before,.t-resizer:after{content:\"\";position:absolute;top:.75rem;left:50%;bottom:calc(50% + 1rem);inline-size:1px;background:var(--tui-border-normal);box-shadow:-.25rem 0 var(--tui-border-normal);transform:translateZ(0)}.t-resizer:after{bottom:.75rem;top:calc(50% + 1rem)}@media screen and (max-width: 47.9625em){.t-resizer{display:none}}.t-resizer-text{position:relative;z-index:1;font:var(--tui-font-text-s);padding:.75rem;background:var(--tui-background-base)}.wrapper_light .t-resizer-text{background:#3e464e}.t-group,.t-checkbox{display:flex;align-items:center;margin-left:.75rem}.t-button,.t-form-controls{margin-top:.75rem}@supports (position: sticky){@media screen and (min-height: 37.5rem){:host._sticky{position:sticky;top:4.625rem;z-index:2}}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: JsonPipe, name: "json" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: TuiButton, selector: "a[tuiButton],button[tuiButton],a[tuiIconButton],button[tuiIconButton]", inputs: ["size"] }, { kind: "directive", type: TuiChevron, selector: "[tuiChevron]", inputs: ["tuiChevron"] }, { kind: "component", type: i2.TuiDataListWrapperComponent, selector: "tui-data-list-wrapper:not([labels])", inputs: ["items", "disabledItemHandler", "emptyContent", "size", "itemContent"], outputs: ["itemClick"] }, { kind: "directive", type: i2$1.TuiDataListDirective, selector: "ng-template[tuiDataList]" }, { kind: "component", type: i4$1.TuiExpandComponent, selector: "tui-expand", inputs: ["async", "expanded"] }, { kind: "directive", type: i4$1.TuiExpandContent, selector: "[tuiExpandContent]" }, { kind: "directive", type: TuiGroup, selector: "[tuiGroup]:not(ng-container)", inputs: ["orientation", "collapsed", "rounded", "size"] }, { kind: "directive", type: TuiResizable, selector: "[tuiResizable]" }, { kind: "directive", type: TuiResizer, selector: "[tuiResizer]", inputs: ["tuiResizer"], outputs: ["tuiSizeChange"] }, { kind: "ngmodule", type: TuiSelectModule }, { kind: "component", type: i5$1.TuiSelectComponent, selector: "tui-select", inputs: ["stringify", "identityMatcher", "valueContent"] }, { kind: "directive", type: i5$1.TuiSelectDirective, selector: "tui-select" }, { kind: "component", type: TuiSwitch, selector: "input[type=\"checkbox\"][tuiSwitch]", inputs: ["size", "showIcons"] }, { kind: "ngmodule", type: TuiTextfieldControllerModule }, { kind: "directive", type: i5.TuiTextfieldSizeDirective, selector: "[tuiTextfieldSize]", inputs: ["tuiTextfieldSize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiDocDemo, isStandalone: true, selector: "tui-doc-demo", inputs: { control: "control", sticky: "sticky" }, host: { listeners: { "window:resize": "onResize()", "document:mouseup.silent": "onMouseUp()" }, properties: { "class._sticky": "sticky" } }, queries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true }], viewQueries: [{ propertyName: "resizable", first: true, predicate: TuiResizable, descendants: true, static: true }, { propertyName: "content", first: true, predicate: ["content"], descendants: true, static: true }, { propertyName: "resizer", first: true, predicate: ["resizer"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"t-settings\">\n    <label class=\"t-label\">\n        <input\n            size=\"s\"\n            tuiSwitch\n            type=\"checkbox\"\n            [ngModel]=\"dark()\"\n            (ngModelChange)=\"onModeChange($event)\"\n        />\n        {{ texts[0] }}\n    </label>\n    <label class=\"t-label\">\n        <input\n            size=\"s\"\n            tuiSwitch\n            type=\"checkbox\"\n            [ngModel]=\"opaque\"\n            (ngModelChange)=\"changeOpaque($event)\"\n        />\n        {{ texts[1] }}\n    </label>\n</div>\n<div\n    tuiResizable\n    class=\"t-wrapper\"\n    [attr.tuiTheme]=\"theme()\"\n    [class.t-wrapper_transparent]=\"!opaque\"\n>\n    <div class=\"t-content\">\n        <div\n            #content\n            id=\"demo-content\"\n        >\n            <form\n                *ngIf=\"testForm\"\n                class=\"t-form\"\n                [formGroup]=\"testForm\"\n            >\n                <div class=\"t-input-wrapper\">\n                    <ng-container [ngTemplateOutlet]=\"template\" />\n                </div>\n                <button\n                    automation-id=\"tui-demo-button__toggle-details\"\n                    size=\"s\"\n                    tuiButton\n                    type=\"button\"\n                    class=\"t-button\"\n                    [tuiChevron]=\"expanded\"\n                    (click)=\"toggleDetails()\"\n                >\n                    {{ texts[2] }}\n                </button>\n                <tui-expand\n                    class=\"t-expand\"\n                    [expanded]=\"expanded\"\n                >\n                    <ng-template tuiExpandContent>\n                        <pre class=\"t-value\">Form data: {{ testForm.value | json }}</pre>\n                        <div\n                            tuiGroup\n                            class=\"t-form-controls\"\n                        >\n                            <tui-select\n                                automation-id=\"tui-demo-select__expand-update-on\"\n                                tuiTextfieldSize=\"s\"\n                                class=\"t-select\"\n                                [ngModel]=\"updateOn\"\n                                [ngModelOptions]=\"{standalone: true}\"\n                                (ngModelChange)=\"updateOnChange($event)\"\n                            >\n                                updateOn\n                                <tui-data-list-wrapper\n                                    *tuiDataList\n                                    [items]=\"updateOnVariants\"\n                                />\n                            </tui-select>\n                            <button\n                                automation-id=\"tui-demo-button__reset-state\"\n                                size=\"s\"\n                                tuiButton\n                                type=\"reset\"\n                                [style.flex]=\"'0 0 auto'\"\n                            >\n                                Reset\n                            </button>\n                            <button\n                                automation-id=\"tui-demo-button__submit-state\"\n                                size=\"s\"\n                                tuiButton\n                                type=\"submit\"\n                                [style.flex]=\"'0 0 auto'\"\n                            >\n                                Submit\n                            </button>\n                        </div>\n                    </ng-template>\n                </tui-expand>\n            </form>\n            <ng-content />\n        </div>\n    </div>\n    <div\n        #resizer\n        class=\"t-resizer\"\n        [tuiResizer]=\"[1, 0]\"\n        (tuiSizeChange)=\"updateWidth($event[0])\"\n    ></div>\n</div>\n", styles: [":host{position:relative;display:block;min-inline-size:100%;margin:1.5rem 0;pointer-events:none}.t-settings{position:absolute;bottom:calc(100% + .75rem);display:flex;gap:1rem;align-items:center;justify-content:flex-end;pointer-events:none;inline-size:100%}.t-settings>*{pointer-events:auto}.t-label{display:flex;align-items:center;gap:.5rem}.t-wrapper{display:flex;box-shadow:var(--tui-shadow-medium);border:1px solid var(--tui-border-normal);border-radius:var(--tui-radius-m);max-inline-size:100%;min-block-size:6rem;inline-size:100%;min-inline-size:10rem;color:var(--tui-text-primary);background-color:var(--tui-background-base);overflow:hidden;pointer-events:auto}.t-wrapper.t-wrapper_transparent{background-image:linear-gradient(45deg,var(--tui-background-base-alt) 25%,transparent 25%),linear-gradient(-45deg,var(--tui-background-base-alt) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--tui-background-base-alt) 75%),linear-gradient(-45deg,transparent 75%,var(--tui-background-base-alt) 75%);background-size:1.25rem 1.25rem;background-position:0 0,0 .625rem,.625rem -.625rem,-.625rem 0}@media screen and (max-width: 47.9625em){.t-wrapper{min-block-size:auto}}.t-content{flex:1 1 0;min-inline-size:0;padding:1.5rem;box-sizing:border-box;overflow:hidden}@media screen and (max-width: 47.9625em){.t-content{padding:1rem}}.t-form{display:flex;flex-wrap:wrap;align-items:flex-start}.t-input-wrapper{inline-size:100%;margin-bottom:.5rem}.t-expand{inline-size:100%}.t-value{flex:1;background:var(--tui-background-neutral-1);padding:.75rem;border-radius:.25rem}.t-mode{inline-size:12.5rem}.t-select{max-inline-size:15rem}.t-resizer{position:relative;display:flex;box-shadow:var(--tui-shadow-medium);inline-size:3.5rem;min-block-size:inherit;align-items:center;justify-content:center;flex-shrink:0;border-left:1px solid var(--tui-border-normal);outline:none;background:var(--tui-background-base);color:var(--tui-text-primary)}.t-resizer:before,.t-resizer:after{content:\"\";position:absolute;top:.75rem;left:50%;bottom:calc(50% + 1rem);inline-size:1px;background:var(--tui-border-normal);box-shadow:-.25rem 0 var(--tui-border-normal);transform:translateZ(0)}.t-resizer:after{bottom:.75rem;top:calc(50% + 1rem)}@media screen and (max-width: 47.9625em){.t-resizer{display:none}}.t-resizer-text{position:relative;z-index:1;font:var(--tui-font-text-s);padding:.75rem;background:var(--tui-background-base)}.wrapper_light .t-resizer-text{background:#3e464e}.t-group,.t-checkbox{display:flex;align-items:center;margin-left:.75rem}.t-button,.t-form-controls{margin-top:.75rem}@supports (position: sticky){@media screen and (min-height: 37.5rem){:host._sticky{position:sticky;top:4.625rem;z-index:2}}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: JsonPipe, name: "json" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: TuiButton, selector: "a[tuiButton],button[tuiButton],a[tuiIconButton],button[tuiIconButton]", inputs: ["size"] }, { kind: "directive", type: TuiChevron, selector: "[tuiChevron]", inputs: ["tuiChevron"] }, { kind: "component", type: i2.TuiDataListWrapperComponent, selector: "tui-data-list-wrapper:not([labels])", inputs: ["items", "disabledItemHandler", "emptyContent", "size", "itemContent"], outputs: ["itemClick"] }, { kind: "directive", type: i3$1.TuiDataListDirective, selector: "ng-template[tuiDataList]" }, { kind: "component", type: i4$1.TuiExpandComponent, selector: "tui-expand", inputs: ["async", "expanded"] }, { kind: "directive", type: i4$1.TuiExpandContent, selector: "[tuiExpandContent]" }, { kind: "directive", type: TuiGroup, selector: "[tuiGroup]:not(ng-container)", inputs: ["orientation", "collapsed", "rounded", "size"] }, { kind: "directive", type: TuiResizable, selector: "[tuiResizable]" }, { kind: "directive", type: TuiResizer, selector: "[tuiResizer]", inputs: ["tuiResizer"], outputs: ["tuiSizeChange"] }, { kind: "ngmodule", type: TuiSelectModule }, { kind: "component", type: i5$1.TuiSelectComponent, selector: "tui-select", inputs: ["stringify", "identityMatcher", "valueContent"] }, { kind: "directive", type: i5$1.TuiSelectDirective, selector: "tui-select" }, { kind: "component", type: TuiSwitch, selector: "input[type=\"checkbox\"][tuiSwitch]", inputs: ["size", "showIcons"] }, { kind: "ngmodule", type: TuiTextfieldControllerModule }, { kind: "directive", type: i5.TuiTextfieldSizeDirective, selector: "[tuiTextfieldSize]", inputs: ["tuiTextfieldSize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 __decorate([
     tuiPure
@@ -351,7 +400,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         '[class._sticky]': 'sticky',
                         '(window:resize)': 'onResize()',
                         '(document:mouseup.silent)': 'onMouseUp()',
-                    }, template: "<div class=\"t-settings\">\n    <label class=\"t-label\">\n        <input\n            size=\"s\"\n            tuiSwitch\n            type=\"checkbox\"\n            [ngModel]=\"dark\"\n            (ngModelChange)=\"onModeChange($event)\"\n        />\n        {{ texts[0] }}\n    </label>\n    <label class=\"t-label\">\n        <input\n            size=\"s\"\n            tuiSwitch\n            type=\"checkbox\"\n            [ngModel]=\"opaque\"\n            (ngModelChange)=\"changeOpaque($event)\"\n        />\n        {{ texts[1] }}\n    </label>\n</div>\n<div\n    tuiResizable\n    class=\"t-wrapper\"\n    [attr.tuiTheme]=\"dark ? 'dark' : 'light'\"\n    [class.t-wrapper_transparent]=\"!opaque\"\n>\n    <div class=\"t-content\">\n        <div\n            #content\n            id=\"demo-content\"\n        >\n            <form\n                *ngIf=\"testForm\"\n                class=\"t-form\"\n                [formGroup]=\"testForm\"\n            >\n                <div class=\"t-input-wrapper\">\n                    <ng-container [ngTemplateOutlet]=\"template\" />\n                </div>\n                <button\n                    automation-id=\"tui-demo-button__toggle-details\"\n                    size=\"s\"\n                    tuiButton\n                    type=\"button\"\n                    class=\"t-button\"\n                    [tuiChevron]=\"expanded\"\n                    (click)=\"toggleDetails()\"\n                >\n                    {{ texts[2] }}\n                </button>\n                <tui-expand\n                    class=\"t-expand\"\n                    [expanded]=\"expanded\"\n                >\n                    <ng-template tuiExpandContent>\n                        <pre class=\"t-value\">Form data: {{ testForm.value | json }}</pre>\n                        <div\n                            tuiGroup\n                            class=\"t-form-controls\"\n                        >\n                            <tui-select\n                                automation-id=\"tui-demo-select__expand-update-on\"\n                                tuiTextfieldSize=\"s\"\n                                class=\"t-select\"\n                                [ngModel]=\"updateOn\"\n                                [ngModelOptions]=\"{standalone: true}\"\n                                (ngModelChange)=\"updateOnChange($event)\"\n                            >\n                                updateOn\n                                <tui-data-list-wrapper\n                                    *tuiDataList\n                                    [items]=\"updateOnVariants\"\n                                />\n                            </tui-select>\n                            <button\n                                automation-id=\"tui-demo-button__reset-state\"\n                                size=\"s\"\n                                tuiButton\n                                type=\"reset\"\n                                [style.flex]=\"'0 0 auto'\"\n                            >\n                                Reset\n                            </button>\n                            <button\n                                automation-id=\"tui-demo-button__submit-state\"\n                                size=\"s\"\n                                tuiButton\n                                type=\"submit\"\n                                [style.flex]=\"'0 0 auto'\"\n                            >\n                                Submit\n                            </button>\n                        </div>\n                    </ng-template>\n                </tui-expand>\n            </form>\n            <ng-content />\n        </div>\n    </div>\n    <div\n        #resizer\n        class=\"t-resizer\"\n        [tuiResizer]=\"[1, 0]\"\n        (tuiSizeChange)=\"updateWidth($event[0])\"\n    ></div>\n</div>\n", styles: [":host{position:relative;display:block;min-inline-size:100%;margin:1.5rem 0;pointer-events:none}.t-settings{position:absolute;bottom:calc(100% + .75rem);display:flex;gap:1rem;align-items:center;justify-content:flex-end;pointer-events:none;inline-size:100%}.t-settings>*{pointer-events:auto}.t-label{display:flex;align-items:center;gap:.5rem}.t-wrapper{display:flex;box-shadow:var(--tui-shadow-medium);border:1px solid var(--tui-border-normal);border-radius:var(--tui-radius-m);max-inline-size:100%;min-block-size:6rem;inline-size:100%;min-inline-size:10rem;color:var(--tui-text-primary);background-color:var(--tui-background-base);overflow:hidden;pointer-events:auto}.t-wrapper.t-wrapper_transparent{background-image:linear-gradient(45deg,var(--tui-background-base-alt) 25%,transparent 25%),linear-gradient(-45deg,var(--tui-background-base-alt) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--tui-background-base-alt) 75%),linear-gradient(-45deg,transparent 75%,var(--tui-background-base-alt) 75%);background-size:1.25rem 1.25rem;background-position:0 0,0 .625rem,.625rem -.625rem,-.625rem 0}@media screen and (max-width: 47.9625em){.t-wrapper{min-block-size:auto}}.t-content{flex:1 1 0;min-inline-size:0;padding:1.5rem;box-sizing:border-box;overflow:hidden}@media screen and (max-width: 47.9625em){.t-content{padding:1rem}}.t-form{display:flex;flex-wrap:wrap;align-items:flex-start}.t-input-wrapper{inline-size:100%;margin-bottom:.5rem}.t-expand{inline-size:100%}.t-value{flex:1;background:var(--tui-background-neutral-1);padding:.75rem;border-radius:.25rem}.t-mode{inline-size:12.5rem}.t-select{max-inline-size:15rem}.t-resizer{position:relative;display:flex;box-shadow:var(--tui-shadow-medium);inline-size:3.5rem;min-block-size:inherit;align-items:center;justify-content:center;flex-shrink:0;border-left:1px solid var(--tui-border-normal);outline:none;background:var(--tui-background-base);color:var(--tui-text-primary)}.t-resizer:before,.t-resizer:after{content:\"\";position:absolute;top:.75rem;left:50%;bottom:calc(50% + 1rem);inline-size:1px;background:var(--tui-border-normal);box-shadow:-.25rem 0 var(--tui-border-normal);transform:translateZ(0)}.t-resizer:after{bottom:.75rem;top:calc(50% + 1rem)}@media screen and (max-width: 47.9625em){.t-resizer{display:none}}.t-resizer-text{position:relative;z-index:1;font:var(--tui-font-text-s);padding:.75rem;background:var(--tui-background-base)}.wrapper_light .t-resizer-text{background:#3e464e}.t-group,.t-checkbox{display:flex;align-items:center;margin-left:.75rem}.t-button,.t-form-controls{margin-top:.75rem}@supports (position: sticky){@media screen and (min-height: 37.5rem){:host._sticky{position:sticky;top:4.625rem;z-index:2}}}\n"] }]
+                    }, template: "<div class=\"t-settings\">\n    <label class=\"t-label\">\n        <input\n            size=\"s\"\n            tuiSwitch\n            type=\"checkbox\"\n            [ngModel]=\"dark()\"\n            (ngModelChange)=\"onModeChange($event)\"\n        />\n        {{ texts[0] }}\n    </label>\n    <label class=\"t-label\">\n        <input\n            size=\"s\"\n            tuiSwitch\n            type=\"checkbox\"\n            [ngModel]=\"opaque\"\n            (ngModelChange)=\"changeOpaque($event)\"\n        />\n        {{ texts[1] }}\n    </label>\n</div>\n<div\n    tuiResizable\n    class=\"t-wrapper\"\n    [attr.tuiTheme]=\"theme()\"\n    [class.t-wrapper_transparent]=\"!opaque\"\n>\n    <div class=\"t-content\">\n        <div\n            #content\n            id=\"demo-content\"\n        >\n            <form\n                *ngIf=\"testForm\"\n                class=\"t-form\"\n                [formGroup]=\"testForm\"\n            >\n                <div class=\"t-input-wrapper\">\n                    <ng-container [ngTemplateOutlet]=\"template\" />\n                </div>\n                <button\n                    automation-id=\"tui-demo-button__toggle-details\"\n                    size=\"s\"\n                    tuiButton\n                    type=\"button\"\n                    class=\"t-button\"\n                    [tuiChevron]=\"expanded\"\n                    (click)=\"toggleDetails()\"\n                >\n                    {{ texts[2] }}\n                </button>\n                <tui-expand\n                    class=\"t-expand\"\n                    [expanded]=\"expanded\"\n                >\n                    <ng-template tuiExpandContent>\n                        <pre class=\"t-value\">Form data: {{ testForm.value | json }}</pre>\n                        <div\n                            tuiGroup\n                            class=\"t-form-controls\"\n                        >\n                            <tui-select\n                                automation-id=\"tui-demo-select__expand-update-on\"\n                                tuiTextfieldSize=\"s\"\n                                class=\"t-select\"\n                                [ngModel]=\"updateOn\"\n                                [ngModelOptions]=\"{standalone: true}\"\n                                (ngModelChange)=\"updateOnChange($event)\"\n                            >\n                                updateOn\n                                <tui-data-list-wrapper\n                                    *tuiDataList\n                                    [items]=\"updateOnVariants\"\n                                />\n                            </tui-select>\n                            <button\n                                automation-id=\"tui-demo-button__reset-state\"\n                                size=\"s\"\n                                tuiButton\n                                type=\"reset\"\n                                [style.flex]=\"'0 0 auto'\"\n                            >\n                                Reset\n                            </button>\n                            <button\n                                automation-id=\"tui-demo-button__submit-state\"\n                                size=\"s\"\n                                tuiButton\n                                type=\"submit\"\n                                [style.flex]=\"'0 0 auto'\"\n                            >\n                                Submit\n                            </button>\n                        </div>\n                    </ng-template>\n                </tui-expand>\n            </form>\n            <ng-content />\n        </div>\n    </div>\n    <div\n        #resizer\n        class=\"t-resizer\"\n        [tuiResizer]=\"[1, 0]\"\n        (tuiSizeChange)=\"updateWidth($event[0])\"\n    ></div>\n</div>\n", styles: [":host{position:relative;display:block;min-inline-size:100%;margin:1.5rem 0;pointer-events:none}.t-settings{position:absolute;bottom:calc(100% + .75rem);display:flex;gap:1rem;align-items:center;justify-content:flex-end;pointer-events:none;inline-size:100%}.t-settings>*{pointer-events:auto}.t-label{display:flex;align-items:center;gap:.5rem}.t-wrapper{display:flex;box-shadow:var(--tui-shadow-medium);border:1px solid var(--tui-border-normal);border-radius:var(--tui-radius-m);max-inline-size:100%;min-block-size:6rem;inline-size:100%;min-inline-size:10rem;color:var(--tui-text-primary);background-color:var(--tui-background-base);overflow:hidden;pointer-events:auto}.t-wrapper.t-wrapper_transparent{background-image:linear-gradient(45deg,var(--tui-background-base-alt) 25%,transparent 25%),linear-gradient(-45deg,var(--tui-background-base-alt) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--tui-background-base-alt) 75%),linear-gradient(-45deg,transparent 75%,var(--tui-background-base-alt) 75%);background-size:1.25rem 1.25rem;background-position:0 0,0 .625rem,.625rem -.625rem,-.625rem 0}@media screen and (max-width: 47.9625em){.t-wrapper{min-block-size:auto}}.t-content{flex:1 1 0;min-inline-size:0;padding:1.5rem;box-sizing:border-box;overflow:hidden}@media screen and (max-width: 47.9625em){.t-content{padding:1rem}}.t-form{display:flex;flex-wrap:wrap;align-items:flex-start}.t-input-wrapper{inline-size:100%;margin-bottom:.5rem}.t-expand{inline-size:100%}.t-value{flex:1;background:var(--tui-background-neutral-1);padding:.75rem;border-radius:.25rem}.t-mode{inline-size:12.5rem}.t-select{max-inline-size:15rem}.t-resizer{position:relative;display:flex;box-shadow:var(--tui-shadow-medium);inline-size:3.5rem;min-block-size:inherit;align-items:center;justify-content:center;flex-shrink:0;border-left:1px solid var(--tui-border-normal);outline:none;background:var(--tui-background-base);color:var(--tui-text-primary)}.t-resizer:before,.t-resizer:after{content:\"\";position:absolute;top:.75rem;left:50%;bottom:calc(50% + 1rem);inline-size:1px;background:var(--tui-border-normal);box-shadow:-.25rem 0 var(--tui-border-normal);transform:translateZ(0)}.t-resizer:after{bottom:.75rem;top:calc(50% + 1rem)}@media screen and (max-width: 47.9625em){.t-resizer{display:none}}.t-resizer-text{position:relative;z-index:1;font:var(--tui-font-text-s);padding:.75rem;background:var(--tui-background-base)}.wrapper_light .t-resizer-text{background:#3e464e}.t-group,.t-checkbox{display:flex;align-items:center;margin-left:.75rem}.t-button,.t-form-controls{margin-top:.75rem}@supports (position: sticky){@media screen and (min-height: 37.5rem){:host._sticky{position:sticky;top:4.625rem;z-index:2}}}\n"] }]
         }], propDecorators: { resizable: [{
                 type: ViewChild,
                 args: [TuiResizable, { static: true }]
@@ -660,7 +709,7 @@ class TuiDocDocumentation {
         connector.onValueChange(result);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiDocDocumentation, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiDocDocumentation, isStandalone: true, selector: "tui-doc-documentation", inputs: { heading: "heading", showValues: "showValues", isAPI: "isAPI" }, providers: [TuiGetColorPipe, TuiGetOpacityPipe], queries: [{ propertyName: "propertiesConnectors", predicate: TuiDocDocumentationPropertyConnector }], ngImport: i0, template: "<h1\n    *ngIf=\"heading\"\n    class=\"t-heading\"\n>\n    {{ heading }}\n</h1>\n<ng-content />\n<ng-container *ngIf=\"propertiesConnectors | tuiToArray | tuiFilter: matcher : excludedProperties as properties\">\n    <table\n        *ngIf=\"properties.length\"\n        class=\"t-table\"\n    >\n        <tr class=\"t-row t-row_header\">\n            <th class=\"t-th t-cell t-cell_prop\">{{ texts[2] }}</th>\n            <th class=\"t-th\">{{ type }}</th>\n            <th\n                *ngIf=\"showValues && !isAPI\"\n                class=\"t-th t-cell t-th_value\"\n            >\n                {{ texts[3] }}\n            </th>\n        </tr>\n        <tr\n            *ngFor=\"let propertyConnector of properties\"\n            class=\"t-row\"\n            [class.t-deprecated]=\"propertyConnector.documentationPropertyDeprecated\"\n        >\n            <td class=\"t-cell\">\n                <div\n                    automation-id=\"tui-documentation__property-name\"\n                    class=\"t-property t-additional-info\"\n                >\n                    <code\n                        *ngIf=\"propertyConnector.attrName\"\n                        class=\"t-property-code\"\n                        [style.color]=\"'var(--tui-background-accent-2-pressed)'\"\n                    >\n                        {{ propertyConnector.attrName | tuiStripOptionalPipe }}\n                    </code>\n                    <tui-badge\n                        *ngIf=\"propertyConnector.attrName | tuiIsOptionalPipe\"\n                        appearance=\"neutral\"\n                        size=\"s\"\n                    >\n                        Optional\n                    </tui-badge>\n                    <tui-badge\n                        *ngIf=\"propertyConnector.documentationPropertyDeprecated\"\n                        appearance=\"error\"\n                        size=\"s\"\n                    >\n                        Deprecated\n                    </tui-badge>\n                </div>\n                <ng-container [ngTemplateOutlet]=\"propertyConnector.template\" />\n            </td>\n            <td class=\"t-cell\">\n                <span class=\"type\">\n                    <code class=\"t-code-type\">\n                        <ng-container\n                            *ngFor=\"\n                                let item of propertyConnector.documentationPropertyType | tuiDocTypeReference;\n                                let last = last\n                            \"\n                        >\n                            <a\n                                *ngIf=\"item.reference; else default\"\n                                target=\"_blank\"\n                                class=\"t-code-reference\"\n                                [attr.href]=\"item.reference\"\n                            >\n                                {{ item.type }}\n                            </a>\n                            <ng-template #default>\n                                {{ item.type }}\n                            </ng-template>\n                            <span *ngIf=\"!last\">&nbsp;|&nbsp;</span>\n                        </ng-container>\n                    </code>\n                </span>\n            </td>\n            <td\n                *ngIf=\"showValues\"\n                class=\"t-cell t-cell_value\"\n            >\n                <ng-container *ngIf=\"propertyConnector.shouldShowValues; else elseEmitter\">\n                    <tui-select\n                        *ngIf=\"propertyConnector.hasItems; else noItems\"\n                        tuiDropdownLimitWidth=\"min\"\n                        tuiTextfieldSize=\"m\"\n                        [nativeId]=\"propertyConnector.attrName\"\n                        [ngModel]=\"propertyConnector.documentationPropertyValue\"\n                        [tuiTextfieldCleaner]=\"propertyConnector.documentationPropertyType | tuiShowCleanerPipe\"\n                        [tuiTextfieldLabelOutside]=\"true\"\n                        [valueContent]=\"selectContent\"\n                        (ngModelChange)=\"propertyConnector.onValueChange($event)\"\n                    >\n                        <code class=\"t-exception\">null</code>\n                        <tui-data-list-wrapper\n                            *tuiDataList\n                            [itemContent]=\"selectContent\"\n                            [items]=\"propertyConnector.documentationPropertyValues\"\n                        />\n                    </tui-select>\n                    <ng-template\n                        #selectContent\n                        let-data\n                    >\n                        <code>{{ data | tuiInspectAny }}</code>\n                    </ng-template>\n\n                    <ng-template #noItems>\n                        <ng-container [ngSwitch]=\"propertyConnector.documentationPropertyType\">\n                            <input\n                                *ngSwitchCase=\"'boolean'\"\n                                tuiSwitch\n                                type=\"checkbox\"\n                                class=\"t-switch\"\n                                [id]=\"propertyConnector.attrName\"\n                                [ngModel]=\"propertyConnector.documentationPropertyValue\"\n                                [showIcons]=\"true\"\n                                (ngModelChange)=\"propertyConnector.onValueChange($event)\"\n                            />\n\n                            <tui-textfield\n                                *ngSwitchCase=\"'string'\"\n                                tuiTextfieldSize=\"m\"\n                            >\n                                <input\n                                    tuiTextfield\n                                    [id]=\"propertyConnector.attrName\"\n                                    [ngModel]=\"propertyConnector.documentationPropertyValue || ''\"\n                                    (ngModelChange)=\"propertyConnector.onValueChange($event)\"\n                                />\n                            </tui-textfield>\n\n                            <tui-input-number\n                                *ngSwitchCase=\"'number'\"\n                                tuiTextfieldSize=\"m\"\n                                [nativeId]=\"propertyConnector.attrName\"\n                                [ngModel]=\"propertyConnector.documentationPropertyValue\"\n                                [step]=\"1\"\n                                [tuiTextfieldLabelOutside]=\"true\"\n                                (ngModelChange)=\"propertyConnector.onValueChange($event || 0)\"\n                            />\n                        </ng-container>\n                    </ng-template>\n                </ng-container>\n\n                <ng-template #elseEmitter>\n                    <tui-notification\n                        class=\"t-output\"\n                        [@emitEvent]=\"propertyConnector.emits$ | async\"\n                    >\n                        Emit!\n                    </tui-notification>\n                </ng-template>\n            </td>\n        </tr>\n    </table>\n</ng-container>\n", styles: [":host{display:block;min-inline-size:100%}.t-table{inline-size:100%;table-layout:fixed}.t-row:not(:last-child){border-block-end:1px solid var(--tui-border-normal)}@media screen and (max-width: 47.9625em){.t-row{display:flex;flex-wrap:wrap}.t-row_header{display:none}}.t-cell{padding:1rem 1rem .875rem}.t-cell:first-child{padding-left:0}.t-cell:last-child{padding-right:0}.t-cell_prop{inline-size:40%}.t-cell_value{text-align:end}@media screen and (max-width: 47.9625em){.t-cell{inline-size:100%;block-size:auto;padding:.5rem 0;text-align:start}}.t-th{padding:.5rem 1rem;color:var(--tui-text-secondary);font-weight:400;text-align:start}.t-th_value{max-inline-size:20rem;text-align:end}@media screen and (max-width: 47.9625em){.t-th_value{inline-size:9.375rem}}.t-property{font:var(--tui-font-text-m);margin-bottom:.25rem;font-family:monospace;color:#8f75d1}@media screen and (max-width: 47.9625em){.t-property{padding:.5rem 0}}.t-type{font-family:monospace}.t-deprecated .t-property-code{text-decoration:line-through}.t-deprecated-label{margin-right:.125rem;color:var(--tui-text-negative);font-size:.75rem}.t-additional-info{display:flex;gap:.3125rem;align-items:center}.t-exception{display:block;inline-size:-webkit-max-content;inline-size:max-content}.t-output{text-align:start;opacity:0}.t-heading{font:var(--tui-font-heading-4)}.t-code-type{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start}.t-code-reference{display:inline-flex;color:var(--tui-text-action);text-decoration:none;align-items:center;justify-content:center;gap:3px}.t-code-reference:after{content:\"\";font-size:1rem;inline-size:1rem;block-size:1rem;background:currentColor;-webkit-mask:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"1rem\" height=\"1rem\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6\"></path><polyline points=\"15 3 21 3 21 9\"></polyline><line x1=\"10\" y1=\"14\" x2=\"21\" y2=\"3\"></line></svg>') center / 100%;mask:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"1rem\" height=\"1rem\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6\"></path><polyline points=\"15 3 21 3 21 9\"></polyline><line x1=\"10\" y1=\"14\" x2=\"21\" y2=\"3\"></line></svg>') center / 100%}.t-switch{display:block}@media not screen and (max-width: 47.9625em){.t-switch{margin-left:auto}}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: TuiBadge, selector: "tui-badge,[tuiBadge]", inputs: ["size"] }, { kind: "component", type: i2.TuiDataListWrapperComponent, selector: "tui-data-list-wrapper:not([labels])", inputs: ["items", "disabledItemHandler", "emptyContent", "size", "itemContent"], outputs: ["itemClick"] }, { kind: "directive", type: i2$1.TuiDataListDirective, selector: "ng-template[tuiDataList]" }, { kind: "pipe", type: TuiDocTypeReferencePipe, name: "tuiDocTypeReference" }, { kind: "directive", type: i4$2.TuiDropdownOptionsDirective, selector: "[tuiDropdownAlign], [tuiDropdownAppearance], [tuiDropdownDirection], [tuiDropdownLimitWidth], [tuiDropdownMinHeight], [tuiDropdownMaxHeight], [tuiDropdownOffset]", inputs: ["tuiDropdownAlign", "tuiDropdownAppearance", "tuiDropdownDirection", "tuiDropdownLimitWidth", "tuiDropdownMinHeight", "tuiDropdownMaxHeight", "tuiDropdownOffset"] }, { kind: "pipe", type: TuiFilterPipe, name: "tuiFilter" }, { kind: "ngmodule", type: TuiInputNumberModule }, { kind: "component", type: i3.TuiInputNumberComponent, selector: "tui-input-number", inputs: ["min", "max", "step"] }, { kind: "directive", type: i3.TuiInputNumberDirective, selector: "tui-input-number" }, { kind: "pipe", type: TuiInspectPipe, name: "tuiInspectAny" }, { kind: "pipe", type: TuiIsOptionalPipe, name: "tuiIsOptionalPipe" }, { kind: "directive", type: TuiNotification, selector: "tui-notification,a[tuiNotification],button[tuiNotification]", inputs: ["appearance", "icon", "size"] }, { kind: "ngmodule", type: TuiSelectModule }, { kind: "component", type: i5$1.TuiSelectComponent, selector: "tui-select", inputs: ["stringify", "identityMatcher", "valueContent"] }, { kind: "directive", type: i5$1.TuiSelectDirective, selector: "tui-select" }, { kind: "pipe", type: TuiShowCleanerPipe, name: "tuiShowCleanerPipe" }, { kind: "pipe", type: TuiStripOptionalPipe, name: "tuiStripOptionalPipe" }, { kind: "component", type: TuiSwitch, selector: "input[type=\"checkbox\"][tuiSwitch]", inputs: ["size", "showIcons"] }, { kind: "component", type: i4.TuiTextfieldComponent, selector: "tui-textfield", inputs: ["filler", "stringify", "content"] }, { kind: "directive", type: i4.TuiTextfieldDirective, selector: "input[tuiTextfield]" }, { kind: "directive", type: i4.TuiTextfieldOptionsDirective, selector: "[tuiTextfieldAppearance],[tuiTextfieldSize],[tuiTextfieldCleaner]", inputs: ["tuiTextfieldAppearance", "tuiTextfieldSize", "tuiTextfieldCleaner"] }, { kind: "ngmodule", type: TuiTextfieldControllerModule }, { kind: "directive", type: i5.TuiTextfieldCleanerDirective, selector: "[tuiTextfieldCleaner]", inputs: ["tuiTextfieldCleaner"] }, { kind: "directive", type: i5.TuiTextfieldLabelOutsideDirective, selector: "[tuiTextfieldLabelOutside]", inputs: ["tuiTextfieldLabelOutside"] }, { kind: "directive", type: i5.TuiTextfieldSizeDirective, selector: "[tuiTextfieldSize]", inputs: ["tuiTextfieldSize"] }, { kind: "pipe", type: TuiToArrayPipe, name: "tuiToArray" }], animations: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiDocDocumentation, isStandalone: true, selector: "tui-doc-documentation", inputs: { heading: "heading", showValues: "showValues", isAPI: "isAPI" }, providers: [TuiGetColorPipe, TuiGetOpacityPipe], queries: [{ propertyName: "propertiesConnectors", predicate: TuiDocDocumentationPropertyConnector }], ngImport: i0, template: "<h1\n    *ngIf=\"heading\"\n    class=\"t-heading\"\n>\n    {{ heading }}\n</h1>\n<ng-content />\n<ng-container *ngIf=\"propertiesConnectors | tuiToArray | tuiFilter: matcher : excludedProperties as properties\">\n    <table\n        *ngIf=\"properties.length\"\n        class=\"t-table\"\n    >\n        <tr class=\"t-row t-row_header\">\n            <th class=\"t-th t-cell t-cell_prop\">{{ texts[2] }}</th>\n            <th class=\"t-th\">{{ type }}</th>\n            <th\n                *ngIf=\"showValues && !isAPI\"\n                class=\"t-th t-cell t-th_value\"\n            >\n                {{ texts[3] }}\n            </th>\n        </tr>\n        <tr\n            *ngFor=\"let propertyConnector of properties\"\n            class=\"t-row\"\n            [class.t-deprecated]=\"propertyConnector.documentationPropertyDeprecated\"\n        >\n            <td class=\"t-cell\">\n                <div\n                    automation-id=\"tui-documentation__property-name\"\n                    class=\"t-property t-additional-info\"\n                >\n                    <code\n                        *ngIf=\"propertyConnector.attrName\"\n                        class=\"t-property-code\"\n                        [style.color]=\"'var(--tui-background-accent-2-pressed)'\"\n                    >\n                        {{ propertyConnector.attrName | tuiStripOptionalPipe }}\n                    </code>\n                    <tui-badge\n                        *ngIf=\"propertyConnector.attrName | tuiIsOptionalPipe\"\n                        appearance=\"neutral\"\n                        size=\"s\"\n                    >\n                        Optional\n                    </tui-badge>\n                    <tui-badge\n                        *ngIf=\"propertyConnector.documentationPropertyDeprecated\"\n                        appearance=\"error\"\n                        size=\"s\"\n                    >\n                        Deprecated\n                    </tui-badge>\n                </div>\n                <ng-container [ngTemplateOutlet]=\"propertyConnector.template\" />\n            </td>\n            <td class=\"t-cell\">\n                <span class=\"type\">\n                    <code class=\"t-code-type\">\n                        <ng-container\n                            *ngFor=\"\n                                let item of propertyConnector.documentationPropertyType | tuiDocTypeReference;\n                                let last = last\n                            \"\n                        >\n                            <a\n                                *ngIf=\"item.reference; else default\"\n                                target=\"_blank\"\n                                class=\"t-code-reference\"\n                                [attr.href]=\"item.reference\"\n                            >\n                                {{ item.type }}\n                            </a>\n                            <ng-template #default>\n                                {{ item.type }}\n                            </ng-template>\n                            <span *ngIf=\"!last\">&nbsp;|&nbsp;</span>\n                        </ng-container>\n                    </code>\n                </span>\n            </td>\n            <td\n                *ngIf=\"showValues\"\n                class=\"t-cell t-cell_value\"\n            >\n                <ng-container *ngIf=\"propertyConnector.shouldShowValues; else elseEmitter\">\n                    <tui-select\n                        *ngIf=\"propertyConnector.hasItems; else noItems\"\n                        tuiDropdownLimitWidth=\"min\"\n                        tuiTextfieldSize=\"m\"\n                        [nativeId]=\"propertyConnector.attrName\"\n                        [ngModel]=\"propertyConnector.documentationPropertyValue\"\n                        [tuiTextfieldCleaner]=\"propertyConnector.documentationPropertyType | tuiShowCleanerPipe\"\n                        [tuiTextfieldLabelOutside]=\"true\"\n                        [valueContent]=\"selectContent\"\n                        (ngModelChange)=\"propertyConnector.onValueChange($event)\"\n                    >\n                        <code class=\"t-exception\">null</code>\n                        <tui-data-list-wrapper\n                            *tuiDataList\n                            [itemContent]=\"selectContent\"\n                            [items]=\"propertyConnector.documentationPropertyValues\"\n                        />\n                    </tui-select>\n                    <ng-template\n                        #selectContent\n                        let-data\n                    >\n                        <code>{{ data | tuiInspectAny }}</code>\n                    </ng-template>\n\n                    <ng-template #noItems>\n                        <ng-container [ngSwitch]=\"propertyConnector.documentationPropertyType\">\n                            <input\n                                *ngSwitchCase=\"'boolean'\"\n                                tuiSwitch\n                                type=\"checkbox\"\n                                class=\"t-switch\"\n                                [id]=\"propertyConnector.attrName\"\n                                [ngModel]=\"propertyConnector.documentationPropertyValue\"\n                                [showIcons]=\"true\"\n                                (ngModelChange)=\"propertyConnector.onValueChange($event)\"\n                            />\n\n                            <tui-textfield\n                                *ngSwitchCase=\"'string'\"\n                                tuiTextfieldSize=\"m\"\n                            >\n                                <input\n                                    tuiTextfield\n                                    [id]=\"propertyConnector.attrName\"\n                                    [ngModel]=\"propertyConnector.documentationPropertyValue || ''\"\n                                    (ngModelChange)=\"propertyConnector.onValueChange($event)\"\n                                />\n                            </tui-textfield>\n\n                            <tui-input-number\n                                *ngSwitchCase=\"'number'\"\n                                tuiTextfieldSize=\"m\"\n                                [nativeId]=\"propertyConnector.attrName\"\n                                [ngModel]=\"propertyConnector.documentationPropertyValue\"\n                                [step]=\"1\"\n                                [tuiTextfieldLabelOutside]=\"true\"\n                                (ngModelChange)=\"propertyConnector.onValueChange($event || 0)\"\n                            />\n                        </ng-container>\n                    </ng-template>\n                </ng-container>\n\n                <ng-template #elseEmitter>\n                    <tui-notification\n                        class=\"t-output\"\n                        [@emitEvent]=\"propertyConnector.emits$ | async\"\n                    >\n                        Emit!\n                    </tui-notification>\n                </ng-template>\n            </td>\n        </tr>\n    </table>\n</ng-container>\n", styles: [":host{display:block;min-inline-size:100%}.t-table{inline-size:100%;table-layout:fixed}.t-row:not(:last-child){border-block-end:1px solid var(--tui-border-normal)}@media screen and (max-width: 47.9625em){.t-row{display:flex;flex-wrap:wrap}.t-row_header{display:none}}.t-cell{padding:1rem 1rem .875rem}.t-cell:first-child{padding-left:0}.t-cell:last-child{padding-right:0}.t-cell_prop{inline-size:40%}.t-cell_value{text-align:end}@media screen and (max-width: 47.9625em){.t-cell{inline-size:100%;block-size:auto;padding:.5rem 0;text-align:start}}.t-th{padding:.5rem 1rem;color:var(--tui-text-secondary);font-weight:400;text-align:start}.t-th_value{max-inline-size:20rem;text-align:end}@media screen and (max-width: 47.9625em){.t-th_value{inline-size:9.375rem}}.t-property{font:var(--tui-font-text-m);margin-bottom:.25rem;font-family:monospace;color:#8f75d1}@media screen and (max-width: 47.9625em){.t-property{padding:.5rem 0}}.t-type{font-family:monospace}.t-deprecated .t-property-code{text-decoration:line-through}.t-deprecated-label{margin-right:.125rem;color:var(--tui-text-negative);font-size:.75rem}.t-additional-info{display:flex;gap:.3125rem;align-items:center}.t-exception{display:block;inline-size:-webkit-max-content;inline-size:max-content}.t-output{text-align:start;opacity:0}.t-heading{font:var(--tui-font-heading-4)}.t-code-type{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start}.t-code-reference{display:inline-flex;color:var(--tui-text-action);text-decoration:none;align-items:center;justify-content:center;gap:3px}.t-code-reference:after{content:\"\";font-size:1rem;inline-size:1rem;block-size:1rem;background:currentColor;-webkit-mask:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"1rem\" height=\"1rem\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6\"></path><polyline points=\"15 3 21 3 21 9\"></polyline><line x1=\"10\" y1=\"14\" x2=\"21\" y2=\"3\"></line></svg>') center / 100%;mask:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"1rem\" height=\"1rem\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6\"></path><polyline points=\"15 3 21 3 21 9\"></polyline><line x1=\"10\" y1=\"14\" x2=\"21\" y2=\"3\"></line></svg>') center / 100%}.t-switch{display:block}@media not screen and (max-width: 47.9625em){.t-switch{margin-left:auto}}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: TuiBadge, selector: "tui-badge,[tuiBadge]", inputs: ["size"] }, { kind: "component", type: i2.TuiDataListWrapperComponent, selector: "tui-data-list-wrapper:not([labels])", inputs: ["items", "disabledItemHandler", "emptyContent", "size", "itemContent"], outputs: ["itemClick"] }, { kind: "directive", type: i3$1.TuiDataListDirective, selector: "ng-template[tuiDataList]" }, { kind: "pipe", type: TuiDocTypeReferencePipe, name: "tuiDocTypeReference" }, { kind: "directive", type: i4$2.TuiDropdownOptionsDirective, selector: "[tuiDropdownAlign], [tuiDropdownAppearance], [tuiDropdownDirection], [tuiDropdownLimitWidth], [tuiDropdownMinHeight], [tuiDropdownMaxHeight], [tuiDropdownOffset]", inputs: ["tuiDropdownAlign", "tuiDropdownAppearance", "tuiDropdownDirection", "tuiDropdownLimitWidth", "tuiDropdownMinHeight", "tuiDropdownMaxHeight", "tuiDropdownOffset"] }, { kind: "pipe", type: TuiFilterPipe, name: "tuiFilter" }, { kind: "ngmodule", type: TuiInputNumberModule }, { kind: "component", type: i3.TuiInputNumberComponent, selector: "tui-input-number", inputs: ["min", "max", "step"] }, { kind: "directive", type: i3.TuiInputNumberDirective, selector: "tui-input-number" }, { kind: "pipe", type: TuiInspectPipe, name: "tuiInspectAny" }, { kind: "pipe", type: TuiIsOptionalPipe, name: "tuiIsOptionalPipe" }, { kind: "directive", type: TuiNotification, selector: "tui-notification,a[tuiNotification],button[tuiNotification]", inputs: ["appearance", "icon", "size"] }, { kind: "ngmodule", type: TuiSelectModule }, { kind: "component", type: i5$1.TuiSelectComponent, selector: "tui-select", inputs: ["stringify", "identityMatcher", "valueContent"] }, { kind: "directive", type: i5$1.TuiSelectDirective, selector: "tui-select" }, { kind: "pipe", type: TuiShowCleanerPipe, name: "tuiShowCleanerPipe" }, { kind: "pipe", type: TuiStripOptionalPipe, name: "tuiStripOptionalPipe" }, { kind: "component", type: TuiSwitch, selector: "input[type=\"checkbox\"][tuiSwitch]", inputs: ["size", "showIcons"] }, { kind: "component", type: i4.TuiTextfieldComponent, selector: "tui-textfield", inputs: ["filler", "stringify", "content"] }, { kind: "directive", type: i4.TuiTextfieldDirective, selector: "input[tuiTextfield]" }, { kind: "directive", type: i4.TuiTextfieldOptionsDirective, selector: "[tuiTextfieldAppearance],[tuiTextfieldSize],[tuiTextfieldCleaner]", inputs: ["tuiTextfieldAppearance", "tuiTextfieldSize", "tuiTextfieldCleaner"] }, { kind: "ngmodule", type: TuiTextfieldControllerModule }, { kind: "directive", type: i5.TuiTextfieldCleanerDirective, selector: "[tuiTextfieldCleaner]", inputs: ["tuiTextfieldCleaner"] }, { kind: "directive", type: i5.TuiTextfieldLabelOutsideDirective, selector: "[tuiTextfieldLabelOutside]", inputs: ["tuiTextfieldLabelOutside"] }, { kind: "directive", type: i5.TuiTextfieldSizeDirective, selector: "[tuiTextfieldSize]", inputs: ["tuiTextfieldSize"] }, { kind: "pipe", type: TuiToArrayPipe, name: "tuiToArray" }], animations: [
             trigger('emitEvent', [
                 transition(':increment', [style({ opacity: 1 }), animate('500ms ease-in')]),
             ]),
@@ -789,7 +838,7 @@ class TuiDocExample {
             .finally(() => this.loading$.next(false));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiDocExample, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiDocExample, isStandalone: true, selector: "tui-doc-example", inputs: { id: "id", heading: "heading", description: "description", fullsize: "fullsize", componentName: "componentName", content: "content", component: "component" }, host: { properties: { "attr.id": "id", "class._fullsize": "fullsize" } }, ngImport: i0, template: "<div class=\"t-title-block\">\n    <h2\n        *ngIf=\"heading\"\n        class=\"t-title\"\n    >\n        <span\n            *polymorpheusOutlet=\"heading as text\"\n            [textContent]=\"text\"\n        ></span>\n    </h2>\n    <a\n        *ngIf=\"id\"\n        routerLink=\".\"\n        routerLinkActive=\"t-link-active\"\n        tuiLink\n        type=\"button\"\n        class=\"t-link\"\n        [attr.title]=\"copy$ | async\"\n        [fragment]=\"id\"\n        [routerLinkActiveOptions]=\"{matrixParams: 'exact', queryParams: 'exact', paths: 'exact', fragment: 'exact'}\"\n        (click)=\"copyExampleLink($event.currentTarget)\"\n    >\n        #\n    </a>\n</div>\n<h3\n    *ngIf=\"description\"\n    class=\"t-description\"\n>\n    <ng-container *polymorpheusOutlet=\"description as text\">\n        {{ text }}\n    </ng-container>\n</h3>\n\n<div\n    *ngIf=\"processor$ | async as files\"\n    class=\"t-example\"\n>\n    <ng-container *ngIf=\"files | tuiDocExampleGetTabs: defaultTab as tabs\">\n        <div\n            *ngIf=\"tabs.length > 1\"\n            class=\"t-tabs-wrapper\"\n        >\n            <tui-tabs-with-more\n                class=\"t-tabs\"\n                [(activeItemIndex)]=\"activeItemIndex\"\n            >\n                <ng-container *ngFor=\"let tab of tabs\">\n                    <button\n                        *tuiItem\n                        tuiTab\n                        type=\"button\"\n                    >\n                        <ng-container *polymorpheusOutlet=\"getTabTitle(tab) as text\">\n                            {{ text }}\n                        </ng-container>\n                    </button>\n                </ng-container>\n            </tui-tabs-with-more>\n\n            <tui-loader\n                *ngIf=\"files | tuiMapper: visible\"\n                size=\"xs\"\n                class=\"t-code-editor\"\n                [overlay]=\"true\"\n                [showLoader]=\"!!(loading$ | async)\"\n                (click)=\"edit(files)\"\n            >\n                <ng-container *ngIf=\"codeEditor?.content as content; else defaultEditContent\">\n                    <ng-container *polymorpheusOutlet=\"content as editContent\">\n                        {{ editContent }}\n                    </ng-container>\n                </ng-container>\n\n                <ng-template #defaultEditContent>\n                    <button\n                        appearance=\"flat\"\n                        size=\"s\"\n                        tuiButton\n                        type=\"button\"\n                    >\n                        Edit on {{ codeEditor!.name }}\n                    </button>\n                </ng-template>\n            </tui-loader>\n        </div>\n\n        <div\n            *ngFor=\"let tab of tabs; let index = index\"\n            class=\"t-content\"\n        >\n            <div\n                *ngIf=\"index === defaultTabIndex\"\n                automation-id=\"tui-doc-example\"\n                class=\"t-demo\"\n                [style.display]=\"activeItemIndex === index && index === defaultTabIndex ? 'block' : 'none'\"\n            >\n                <ng-content />\n                <ng-container *polymorpheusOutlet=\"lazyComponent$ | async as text\">\n                    {{ text }}\n                </ng-container>\n            </div>\n\n            <tui-doc-code\n                *tuiLet=\"files?.[tabs?.[index] || 0] || '' as code\"\n                [code]=\"code\"\n                [style.display]=\"activeItemIndex === index && index !== defaultTabIndex ? 'block' : 'none'\"\n            >\n                <ng-container *ngFor=\"let action of codeActions\">\n                    <ng-container *polymorpheusOutlet=\"action as text; context: {$implicit: code}\">\n                        {{ text }}\n                    </ng-container>\n                </ng-container>\n            </tui-doc-code>\n        </div>\n    </ng-container>\n</div>\n", styles: [":host{position:relative;display:block;padding-top:3.5rem;clear:inline-end}:host:target{animation:1s .3s tuiShaking}@media screen and (max-width: 47.9625em){:host{padding-top:2rem}}.t-title-block{display:flex;flex-direction:row-reverse}.t-title{font:var(--tui-font-heading-5);margin:0 auto .5rem 0}@media screen and (max-width: 47.9625em){.t-title{font:var(--tui-font-heading-6)}}.t-title:hover+.t-link{opacity:1}.t-link{font:var(--tui-font-heading-6);padding-right:.1rem}@media not screen and (max-width: 47.9625em){.t-link{font:var(--tui-font-heading-5);margin-left:-1.6rem}.t-link:not(:hover):not(.t-link-active){opacity:0}}.t-description{font:var(--tui-font-text-m);font-weight:400;margin:0}.t-title:first-letter,.t-description:first-letter{text-transform:capitalize}.t-example{position:relative;margin-top:1.5rem;border:1px solid var(--tui-border-normal);border-radius:var(--tui-radius-m);box-shadow:0 .125rem .1875rem #0000001a;overflow:hidden}@media screen and (max-width: 47.9625em){.t-example{margin-top:.75rem}}.t-tabs-wrapper{display:flex;padding:0 .875rem 0 2rem;box-shadow:inset 0 -1px var(--tui-border-normal);justify-content:space-between;align-items:center;gap:.5rem}@media screen and (max-width: 47.9625em){.t-tabs-wrapper{padding:0 .875rem 0 1rem}}.t-tabs{flex-grow:1;box-shadow:none}.t-code-editor{flex-shrink:0}.t-demo{padding:2rem;max-inline-size:100%;box-sizing:border-box;overflow-x:auto}@media all and (-webkit-min-device-pixel-ratio: 0) and (-webkit-min-device-pixel-ratio: 0),all and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: .001dpcm){.t-demo::-webkit-scrollbar,.t-demo::-webkit-scrollbar-thumb{inline-size:1rem;block-size:1rem;border-radius:6.25rem;background-clip:padding-box;border:.375rem solid transparent}.t-demo::-webkit-scrollbar{background-color:transparent}.t-demo::-webkit-scrollbar-thumb{background-color:var(--tui-background-neutral-1-hover)}.t-demo::-webkit-scrollbar-thumb:hover{background-color:var(--tui-background-neutral-1-pressed)}.t-demo::-webkit-scrollbar-thumb:active{background-color:var(--tui-text-tertiary)}}@media screen and (max-width: 47.9625em){.t-demo{padding:1rem}}:host:not(._fullsize) .t-demo{inline-size:-webkit-min-content;inline-size:min-content;min-inline-size:20rem}tui-doc-code{overflow:hidden}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: PolymorpheusOutlet, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: TuiButton, selector: "a[tuiButton],button[tuiButton],a[tuiIconButton],button[tuiIconButton]", inputs: ["size"] }, { kind: "component", type: TuiDocCode, selector: "tui-doc-code", inputs: ["filename", "code"] }, { kind: "pipe", type: TuiDocExampleGetTabsPipe, name: "tuiDocExampleGetTabs" }, { kind: "directive", type: TuiLet, selector: "[tuiLet]", inputs: ["tuiLet"] }, { kind: "directive", type: TuiLink, selector: "a[tuiLink], button[tuiLink]", inputs: ["pseudo"] }, { kind: "component", type: TuiLoader, selector: "tui-loader", inputs: ["size", "inheritColor", "overlay", "textContent", "showLoader"] }, { kind: "pipe", type: TuiMapperPipe, name: "tuiMapper" }, { kind: "directive", type: i1$2.TuiItem, selector: "[tuiItem]" }, { kind: "directive", type: i2$2.TuiTab, selector: "a[tuiTab]:not([routerLink]), a[tuiTab][routerLink][routerLinkActive], button[tuiTab]" }, { kind: "component", type: i2$2.TuiTabsWithMore, selector: "tui-tabs-with-more, nav[tuiTabsWithMore]", inputs: ["size", "moreContent", "dropdownContent", "underline", "itemsLimit", "activeItemIndex"], outputs: ["activeItemIndexChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiDocExample, isStandalone: true, selector: "tui-doc-example", inputs: { id: "id", heading: "heading", description: "description", fullsize: "fullsize", componentName: "componentName", content: "content", component: "component" }, host: { properties: { "attr.id": "id", "class._fullsize": "fullsize" } }, ngImport: i0, template: "<div class=\"t-title-block\">\n    <h2\n        *ngIf=\"heading\"\n        class=\"t-title\"\n    >\n        <span\n            *polymorpheusOutlet=\"heading as text\"\n            [textContent]=\"text\"\n        ></span>\n    </h2>\n    <a\n        *ngIf=\"id\"\n        routerLink=\".\"\n        routerLinkActive=\"t-link-active\"\n        tuiLink\n        type=\"button\"\n        class=\"t-link\"\n        [attr.title]=\"copy$ | async\"\n        [fragment]=\"id\"\n        [routerLinkActiveOptions]=\"{matrixParams: 'exact', queryParams: 'exact', paths: 'exact', fragment: 'exact'}\"\n        (click)=\"copyExampleLink($event.currentTarget)\"\n    >\n        #\n    </a>\n</div>\n<h3\n    *ngIf=\"description\"\n    class=\"t-description\"\n>\n    <ng-container *polymorpheusOutlet=\"description as text\">\n        {{ text }}\n    </ng-container>\n</h3>\n\n<div\n    *ngIf=\"processor$ | async as files\"\n    class=\"t-example\"\n>\n    <ng-container *ngIf=\"files | tuiDocExampleGetTabs: defaultTab as tabs\">\n        <div\n            *ngIf=\"tabs.length > 1\"\n            class=\"t-tabs-wrapper\"\n        >\n            <tui-tabs-with-more\n                class=\"t-tabs\"\n                [(activeItemIndex)]=\"activeItemIndex\"\n            >\n                <ng-container *ngFor=\"let tab of tabs\">\n                    <button\n                        *tuiItem\n                        tuiTab\n                        type=\"button\"\n                    >\n                        <ng-container *polymorpheusOutlet=\"getTabTitle(tab) as text\">\n                            {{ text }}\n                        </ng-container>\n                    </button>\n                </ng-container>\n            </tui-tabs-with-more>\n\n            <tui-loader\n                *ngIf=\"files | tuiMapper: visible\"\n                size=\"xs\"\n                class=\"t-code-editor\"\n                [overlay]=\"true\"\n                [showLoader]=\"!!(loading$ | async)\"\n                (click)=\"edit(files)\"\n            >\n                <ng-container *ngIf=\"codeEditor?.content as content; else defaultEditContent\">\n                    <ng-container *polymorpheusOutlet=\"content as editContent\">\n                        {{ editContent }}\n                    </ng-container>\n                </ng-container>\n\n                <ng-template #defaultEditContent>\n                    <button\n                        appearance=\"flat\"\n                        size=\"s\"\n                        tuiButton\n                        type=\"button\"\n                    >\n                        Edit on {{ codeEditor!.name }}\n                    </button>\n                </ng-template>\n            </tui-loader>\n        </div>\n\n        <div\n            *ngFor=\"let tab of tabs; let index = index\"\n            class=\"t-content\"\n        >\n            <div\n                *ngIf=\"index === defaultTabIndex\"\n                automation-id=\"tui-doc-example\"\n                class=\"t-demo\"\n                [style.display]=\"activeItemIndex === index && index === defaultTabIndex ? 'block' : 'none'\"\n            >\n                <ng-content />\n                <ng-container *polymorpheusOutlet=\"lazyComponent$ | async as text\">\n                    {{ text }}\n                </ng-container>\n            </div>\n\n            <tui-doc-code\n                *tuiLet=\"files?.[tabs?.[index] || 0] || '' as code\"\n                [code]=\"code\"\n                [style.display]=\"activeItemIndex === index && index !== defaultTabIndex ? 'block' : 'none'\"\n            >\n                <ng-container *ngFor=\"let action of codeActions\">\n                    <ng-container *polymorpheusOutlet=\"action as text; context: {$implicit: code}\">\n                        {{ text }}\n                    </ng-container>\n                </ng-container>\n            </tui-doc-code>\n        </div>\n    </ng-container>\n</div>\n", styles: [":host{position:relative;display:block;padding-top:3.5rem;clear:inline-end}:host:target{animation:1s .3s tuiShaking}@media screen and (max-width: 47.9625em){:host{padding-top:2rem}}.t-title-block{display:flex;flex-direction:row-reverse}.t-title{font:var(--tui-font-heading-5);margin:0 auto .5rem 0}@media screen and (max-width: 47.9625em){.t-title{font:var(--tui-font-heading-6)}}.t-title:hover+.t-link{opacity:1}.t-link{font:var(--tui-font-heading-6);padding-right:.1rem}@media not screen and (max-width: 47.9625em){.t-link{font:var(--tui-font-heading-5);margin-left:-1.6rem}.t-link:not(:hover):not(.t-link-active){opacity:0}}.t-description{font:var(--tui-font-text-m);font-weight:400;margin:0}.t-title:first-letter,.t-description:first-letter{text-transform:capitalize}.t-example{position:relative;margin-top:1.5rem;border:1px solid var(--tui-border-normal);border-radius:var(--tui-radius-m);box-shadow:0 .125rem .1875rem #0000001a;overflow:hidden}@media screen and (max-width: 47.9625em){.t-example{margin-top:.75rem}}.t-tabs-wrapper{display:flex;padding:0 .875rem 0 2rem;box-shadow:inset 0 -1px var(--tui-border-normal);justify-content:space-between;align-items:center;gap:.5rem}@media screen and (max-width: 47.9625em){.t-tabs-wrapper{padding:0 .875rem 0 1rem}}.t-tabs{flex-grow:1;box-shadow:none}.t-code-editor{flex-shrink:0}.t-demo{padding:2rem;max-inline-size:100%;box-sizing:border-box;overflow-x:auto}@media all and (-webkit-min-device-pixel-ratio: 0) and (-webkit-min-device-pixel-ratio: 0),all and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: .001dpcm){.t-demo::-webkit-scrollbar,.t-demo::-webkit-scrollbar-thumb{inline-size:1rem;block-size:1rem;border-radius:6.25rem;background-clip:padding-box;border:.375rem solid transparent}.t-demo::-webkit-scrollbar{background-color:transparent}.t-demo::-webkit-scrollbar-thumb{background-color:var(--tui-background-neutral-1-hover)}.t-demo::-webkit-scrollbar-thumb:hover{background-color:var(--tui-background-neutral-1-pressed)}.t-demo::-webkit-scrollbar-thumb:active{background-color:var(--tui-text-tertiary)}}@media screen and (max-width: 47.9625em){.t-demo{padding:1rem}}:host:not(._fullsize) .t-demo{inline-size:-webkit-min-content;inline-size:min-content;min-inline-size:20rem}tui-doc-code{overflow:hidden}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: PolymorpheusOutlet, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: TuiButton, selector: "a[tuiButton],button[tuiButton],a[tuiIconButton],button[tuiIconButton]", inputs: ["size"] }, { kind: "component", type: TuiDocCode, selector: "tui-doc-code", inputs: ["filename", "code"] }, { kind: "pipe", type: TuiDocExampleGetTabsPipe, name: "tuiDocExampleGetTabs" }, { kind: "directive", type: TuiLet, selector: "[tuiLet]", inputs: ["tuiLet"] }, { kind: "directive", type: TuiLink, selector: "a[tuiLink], button[tuiLink]", inputs: ["pseudo"] }, { kind: "component", type: TuiLoader, selector: "tui-loader", inputs: ["size", "inheritColor", "overlay", "textContent", "showLoader"] }, { kind: "pipe", type: TuiMapperPipe, name: "tuiMapper" }, { kind: "directive", type: i1$2.TuiItem, selector: "[tuiItem]" }, { kind: "directive", type: i2$1.TuiTab, selector: "a[tuiTab]:not([routerLink]), a[tuiTab][routerLink][routerLinkActive], button[tuiTab]" }, { kind: "component", type: i2$1.TuiTabsWithMore, selector: "tui-tabs-with-more, nav[tuiTabsWithMore]", inputs: ["size", "moreContent", "dropdownContent", "underline", "itemsLimit", "activeItemIndex"], outputs: ["activeItemIndexChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiDocExample, decorators: [{
             type: Component,
@@ -839,15 +888,15 @@ function labelsProviderFactory(pages) {
 /**
  * Page title
  */
-const NAVIGATION_TITLE = new InjectionToken('[NAVIGATION_TITLE]');
+const NAVIGATION_TITLE = tuiCreateToken();
 /**
  * Navigation sections labels for search
  */
-const NAVIGATION_LABELS = new InjectionToken('[NAVIGATION_LABELS]');
+const NAVIGATION_LABELS = tuiCreateToken();
 /**
  * Navigation pages
  */
-const NAVIGATION_ITEMS = new InjectionToken('[NAVIGATION_ITEMS]');
+const NAVIGATION_ITEMS = tuiCreateToken();
 const NAVIGATION_PROVIDERS = [
     tuiAutoFocusOptionsProvider({ preventScroll: true }),
     tuiLinkOptionsProvider({ appearance: 'icon' }),
@@ -1034,7 +1083,7 @@ class TuiDocNavigation {
         target.remove();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiDocNavigation, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiDocNavigation, isStandalone: true, selector: "tui-doc-navigation", host: { listeners: { "window:keydown": "onFocusSearch($event)" }, properties: { "class._open": "menuOpen" } }, providers: NAVIGATION_PROVIDERS, viewQueries: [{ propertyName: "searchInput", first: true, predicate: TuiTextfieldDirective, descendants: true, read: ElementRef }], ngImport: i0, template: "<tui-textfield\n    *ngIf=\"searchEnabled\"\n    tuiTextfieldSize=\"m\"\n    class=\"t-input\"\n    [iconStart]=\"docIcons.search\"\n    [open]=\"open() && canOpen\"\n    (keyup)=\"open.set(canOpen && $event.code !== 'Escape')\"\n    (openChange)=\"open.set($event)\"\n>\n    <code\n        *ngIf=\"!search.value\"\n        class=\"t-slash\"\n    >\n        /\n    </code>\n    <input\n        tuiTextfield\n        class=\"t-prevent-ios-scroll\"\n        [formControl]=\"search\"\n        [placeholder]=\"searchText\"\n        [tuiAutoFocus]=\"!!sidebar\"\n    />\n    <ng-container *ngIf=\"canOpen\">\n        <tui-data-list *tuiTextfieldDropdown>\n            <tui-opt-group\n                *ngFor=\"let group of filtered$ | async; let index = index\"\n                [label]=\"labels[index] || ''\"\n            >\n                <ng-container *ngFor=\"let item of group\">\n                    <a\n                        *ngIf=\"item.route.includes('://'); else internal\"\n                        tuiOption\n                        [attr.rel]=\"item.rel\"\n                        [href]=\"item.route\"\n                        [target]=\"item.target || '_self'\"\n                    >\n                        {{ item.title }}\n                        <tui-icon\n                            *polymorpheusOutlet=\"item.icon as icon\"\n                            class=\"t-icon\"\n                            [icon]=\"icon\"\n                        />\n                    </a>\n\n                    <ng-template #internal>\n                        <a\n                            tuiOption\n                            [attr.rel]=\"item.rel\"\n                            [fragment]=\"item.fragment\"\n                            [routerLink]=\"item.route\"\n                            [target]=\"item.target || '_self'\"\n                            (click)=\"onClick()\"\n                        >\n                            {{ item.title }}\n                            <tui-icon\n                                *polymorpheusOutlet=\"item.icon as icon\"\n                                class=\"t-icon\"\n                                [icon]=\"icon\"\n                            />\n                        </a>\n                    </ng-template>\n                </ng-container>\n            </tui-opt-group>\n        </tui-data-list>\n    </ng-container>\n</tui-textfield>\n\n<nav class=\"t-navigation\">\n    <tui-scrollbar class=\"t-scrollbar\">\n        <tui-accordion\n            [class.t-accordion-standalone]=\"!searchEnabled\"\n            [closeOthers]=\"false\"\n            [rounded]=\"false\"\n        >\n            <tui-accordion-item\n                *ngFor=\"let label of labels; index as index\"\n                size=\"s\"\n                [borders]=\"null\"\n                [open]=\"!!openPagesArr[index]\"\n                (openChange)=\"openPagesArr[index] = $event\"\n            >\n                <span class=\"t-label\">\n                    <strong>{{ label }}</strong>\n                </span>\n                <ng-template tuiAccordionItemContent>\n                    <div class=\"t-section\">\n                        <ng-container\n                            *ngFor=\"let item of items[index]; index as subIndex\"\n                            [ngTemplateOutlet]=\"pages\"\n                            [ngTemplateOutletContext]=\"{item: item, index: index * 100 + subIndex}\"\n                        />\n                    </div>\n                </ng-template>\n            </tui-accordion-item>\n        </tui-accordion>\n        <div class=\"t-items-container\">\n            <ng-container\n                *ngFor=\"let item of itemsWithoutSections; let index = index\"\n                [ngTemplateOutlet]=\"pages\"\n                [ngTemplateOutletContext]=\"{item: item, index: items.length - 1 + index}\"\n            />\n        </div>\n\n        <ng-template\n            #pages\n            let-index=\"index\"\n            let-item=\"item\"\n        >\n            <ng-container *ngIf=\"!item.subPages; else subPagesTemplate\">\n                <a\n                    *ngIf=\"item.route.includes('://'); else internal\"\n                    tuiLink\n                    class=\"t-sublink\"\n                    [attr.rel]=\"item.rel\"\n                    [href]=\"item.route\"\n                    [target]=\"item.target || '_self'\"\n                >\n                    {{ item.title }}\n                    <tui-icon\n                        *polymorpheusOutlet=\"item.icon as icon\"\n                        class=\"t-icon\"\n                        [icon]=\"icon\"\n                    />\n                </a>\n\n                <ng-template #internal>\n                    <a\n                        routerLinkActive=\"t-sublink_active\"\n                        tuiLink\n                        class=\"t-sublink\"\n                        [attr.rel]=\"item.rel\"\n                        [routerLink]=\"item.route\"\n                        [target]=\"item.target || '_self'\"\n                        [tuiDocScrollIntoViewLink]=\"isActive(item.route)\"\n                        (click)=\"closeMenu()\"\n                    >\n                        {{ item.title }}\n                        <tui-icon\n                            *polymorpheusOutlet=\"item.icon as icon\"\n                            class=\"t-icon\"\n                            [icon]=\"icon\"\n                        />\n                    </a>\n                </ng-template>\n            </ng-container>\n\n            <ng-template #subPagesTemplate>\n                <div\n                    routerLinkActive\n                    class=\"t-subsection\"\n                    [routerLinkActiveOptions]=\"{exact: false}\"\n                >\n                    <button\n                        *ngIf=\"item.subPages\"\n                        tuiLink\n                        type=\"button\"\n                        class=\"t-sublink t-sublink_subsection\"\n                        (click)=\"onGroupClick(index)\"\n                    >\n                        <tui-icon\n                            class=\"t-chevron\"\n                            [class.t-chevron_active]=\"!!openPagesGroupsArr[index]\"\n                            [icon]=\"icons.more\"\n                        />\n                        {{ item.title }}\n                        <tui-icon\n                            *polymorpheusOutlet=\"item.icon as icon\"\n                            class=\"t-icon\"\n                            [icon]=\"icon\"\n                        />\n                    </button>\n                    <tui-expand\n                        class=\"t-expand\"\n                        [expanded]=\"!!openPagesGroupsArr[index]\"\n                    >\n                        <div class=\"t-section t-section_bordered\">\n                            <ng-container *ngFor=\"let subPage of $pages(item.subPages)\">\n                                <a\n                                    *ngIf=\"subPage.route.includes('://'); else internal\"\n                                    tuiLink\n                                    class=\"t-sublink t-sublink_small\"\n                                    [attr.rel]=\"subPage.rel\"\n                                    [href]=\"subPage.route\"\n                                    [target]=\"subPage.target || '_self'\"\n                                >\n                                    {{ subPage.title }}\n                                    <tui-icon\n                                        *polymorpheusOutlet=\"subPage.icon as icon\"\n                                        class=\"t-icon\"\n                                        [icon]=\"icon\"\n                                    />\n                                </a>\n\n                                <ng-template #internal>\n                                    <a\n                                        routerLinkActive=\"t-sublink_active\"\n                                        tuiLink\n                                        class=\"t-sublink t-sublink_small\"\n                                        [attr.rel]=\"subPage.rel\"\n                                        [fragment]=\"subPage.fragment\"\n                                        [routerLink]=\"subPage.route\"\n                                        [target]=\"subPage.target || '_self'\"\n                                        [tuiDocScrollIntoViewLink]=\"isActive(subPage.route)\"\n                                        (click)=\"closeMenu()\"\n                                    >\n                                        {{ subPage.title }}\n                                        <tui-icon\n                                            *polymorpheusOutlet=\"subPage.icon as icon\"\n                                            class=\"t-icon\"\n                                            [icon]=\"icon\"\n                                        />\n                                    </a>\n                                </ng-template>\n                            </ng-container>\n                        </div>\n                    </tui-expand>\n                </div>\n            </ng-template>\n        </ng-template>\n    </tui-scrollbar>\n</nav>\n\n<ng-content />\n", styles: [":host{z-index:1;display:flex;flex-direction:column;text-align:center;background:var(--tui-background-base)}.t-input{margin:1.25rem}.t-input ::ng-deep tui-icon{border:.25rem solid transparent}.t-slash{block-size:1rem;font-size:.5rem}.t-navigation{display:flex;max-block-size:100%;min-block-size:0;flex:1 1 0;text-align:start}.t-navigation tui-scrollbar{overscroll-behavior:none}.t-accordion-standalone{margin-top:1rem}.t-scrollbar{scroll-behavior:var(--tui-scroll-behavior);inline-size:100%}.t-items-container{display:flex;flex-direction:column;padding:0 1rem}.t-label{margin-left:.5rem}.t-expand{margin-left:.25rem}.t-section{display:flex;flex-direction:column;align-items:flex-start;margin:-.5rem 0 -1rem}.t-section_bordered{margin:.5rem 0;border-inline-start:1px solid var(--tui-border-normal)}.t-prevent-ios-scroll:focus{animation:tuiPreventIOSScroll 1ms}@keyframes tuiPreventIOSScroll{0%{opacity:0}to{opacity:1}}.t-subsection{margin-left:.5rem}.t-sublink{-webkit-appearance:none;appearance:none;padding:0;border:0;background:none;font-size:inherit;line-height:inherit;text-decoration:none;font:var(--tui-font-text-m);margin-left:.5rem;padding:.5rem 0}.t-sublink_small{margin-left:1rem;line-height:1.5rem;padding-top:.5rem}.t-sublink_subsection{margin-left:0;line-height:1.6rem}.t-sublink.t-sublink.t-sublink_active{color:var(--tui-text-primary)}.t-icon{margin-left:.5rem}.t-chevron{transition-property:transform;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;inline-size:1rem;block-size:1rem;margin:-.25rem .25rem 0 -.1875rem}.t-chevron_active{transform:rotate(90deg)}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: PolymorpheusOutlet, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: i2$3.TuiAccordionItem, selector: "tui-accordion-item", inputs: ["noPadding", "showArrow", "borders", "size", "disabled", "disableHover", "open", "async"], outputs: ["openChange"] }, { kind: "directive", type: i2$3.TuiAccordionDirective, selector: "tui-accordion", inputs: ["closeOthers"] }, { kind: "directive", type: i2$3.TuiAccordionItemContent, selector: "ng-template[tuiAccordionItemContent]" }, { kind: "directive", type: TuiAutoFocus, selector: "[tuiAutoFocus]", inputs: ["tuiAutoFocus"] }, { kind: "component", type: i2$1.TuiDataListComponent, selector: "tui-data-list", inputs: ["emptyContent", "size"] }, { kind: "component", type: i2$1.TuiOption, selector: "button[tuiOption], a[tuiOption], label[tuiOption]", inputs: ["disabled", "value"] }, { kind: "directive", type: i2$1.TuiOptGroup, selector: "tui-opt-group", inputs: ["label"] }, { kind: "directive", type: TuiDocScrollIntoViewLink, selector: "[tuiDocScrollIntoViewLink]", inputs: ["tuiDocScrollIntoViewLink"] }, { kind: "component", type: i4$1.TuiExpandComponent, selector: "tui-expand", inputs: ["async", "expanded"] }, { kind: "component", type: TuiIcon, selector: "tui-icon", inputs: ["icon", "background"] }, { kind: "ngmodule", type: TuiInputModule }, { kind: "directive", type: TuiLink, selector: "a[tuiLink], button[tuiLink]", inputs: ["pseudo"] }, { kind: "component", type: TuiScrollbar, selector: "tui-scrollbar", inputs: ["hidden"] }, { kind: "component", type: i4.TuiTextfieldComponent, selector: "tui-textfield", inputs: ["filler", "stringify", "content"] }, { kind: "directive", type: i4.TuiTextfieldDirective, selector: "input[tuiTextfield]" }, { kind: "directive", type: i4.TuiTextfieldOptionsDirective, selector: "[tuiTextfieldAppearance],[tuiTextfieldSize],[tuiTextfieldCleaner]", inputs: ["tuiTextfieldAppearance", "tuiTextfieldSize", "tuiTextfieldCleaner"] }, { kind: "directive", type: i4.TuiTextfieldDropdownDirective, selector: "ng-template[tuiTextfieldDropdown]" }, { kind: "ngmodule", type: TuiTextfieldControllerModule }, { kind: "directive", type: i5.TuiTextfieldSizeDirective, selector: "[tuiTextfieldSize]", inputs: ["tuiTextfieldSize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiDocNavigation, isStandalone: true, selector: "tui-doc-navigation", host: { listeners: { "window:keydown": "onFocusSearch($event)" }, properties: { "class._open": "menuOpen" } }, providers: NAVIGATION_PROVIDERS, viewQueries: [{ propertyName: "searchInput", first: true, predicate: TuiTextfieldDirective, descendants: true, read: ElementRef }], ngImport: i0, template: "<tui-textfield\n    *ngIf=\"searchEnabled\"\n    tuiTextfieldSize=\"m\"\n    class=\"t-input\"\n    [iconStart]=\"docIcons.search\"\n    [open]=\"open() && canOpen\"\n    (keyup)=\"open.set(canOpen && $event.code !== 'Escape')\"\n    (openChange)=\"open.set($event)\"\n>\n    <code\n        *ngIf=\"!search.value\"\n        class=\"t-slash\"\n    >\n        /\n    </code>\n    <input\n        tuiTextfield\n        class=\"t-prevent-ios-scroll\"\n        [formControl]=\"search\"\n        [placeholder]=\"searchText\"\n        [tuiAutoFocus]=\"!!sidebar\"\n    />\n    <ng-container *ngIf=\"canOpen\">\n        <tui-data-list *tuiTextfieldDropdown>\n            <tui-opt-group\n                *ngFor=\"let group of filtered$ | async; let index = index\"\n                [label]=\"labels[index] || ''\"\n            >\n                <ng-container *ngFor=\"let item of group\">\n                    <a\n                        *ngIf=\"item.route.includes('://'); else internal\"\n                        tuiOption\n                        [attr.rel]=\"item.rel\"\n                        [href]=\"item.route\"\n                        [target]=\"item.target || '_self'\"\n                    >\n                        {{ item.title }}\n                        <tui-icon\n                            *polymorpheusOutlet=\"item.icon as icon\"\n                            class=\"t-icon\"\n                            [icon]=\"icon\"\n                        />\n                    </a>\n\n                    <ng-template #internal>\n                        <a\n                            tuiOption\n                            [attr.rel]=\"item.rel\"\n                            [fragment]=\"item.fragment\"\n                            [routerLink]=\"item.route\"\n                            [target]=\"item.target || '_self'\"\n                            (click)=\"onClick()\"\n                        >\n                            {{ item.title }}\n                            <tui-icon\n                                *polymorpheusOutlet=\"item.icon as icon\"\n                                class=\"t-icon\"\n                                [icon]=\"icon\"\n                            />\n                        </a>\n                    </ng-template>\n                </ng-container>\n            </tui-opt-group>\n        </tui-data-list>\n    </ng-container>\n</tui-textfield>\n\n<nav class=\"t-navigation\">\n    <tui-scrollbar class=\"t-scrollbar\">\n        <tui-accordion\n            [class.t-accordion-standalone]=\"!searchEnabled\"\n            [closeOthers]=\"false\"\n            [rounded]=\"false\"\n        >\n            <tui-accordion-item\n                *ngFor=\"let label of labels; index as index\"\n                size=\"s\"\n                [borders]=\"null\"\n                [open]=\"!!openPagesArr[index]\"\n                (openChange)=\"openPagesArr[index] = $event\"\n            >\n                <span class=\"t-label\">\n                    <strong>{{ label }}</strong>\n                </span>\n                <ng-template tuiAccordionItemContent>\n                    <div class=\"t-section\">\n                        <ng-container\n                            *ngFor=\"let item of items[index]; index as subIndex\"\n                            [ngTemplateOutlet]=\"pages\"\n                            [ngTemplateOutletContext]=\"{item: item, index: index * 100 + subIndex}\"\n                        />\n                    </div>\n                </ng-template>\n            </tui-accordion-item>\n        </tui-accordion>\n        <div class=\"t-items-container\">\n            <ng-container\n                *ngFor=\"let item of itemsWithoutSections; let index = index\"\n                [ngTemplateOutlet]=\"pages\"\n                [ngTemplateOutletContext]=\"{item: item, index: items.length - 1 + index}\"\n            />\n        </div>\n\n        <ng-template\n            #pages\n            let-index=\"index\"\n            let-item=\"item\"\n        >\n            <ng-container *ngIf=\"!item.subPages; else subPagesTemplate\">\n                <a\n                    *ngIf=\"item.route.includes('://'); else internal\"\n                    tuiLink\n                    class=\"t-sublink\"\n                    [attr.rel]=\"item.rel\"\n                    [href]=\"item.route\"\n                    [target]=\"item.target || '_self'\"\n                >\n                    {{ item.title }}\n                    <tui-icon\n                        *polymorpheusOutlet=\"item.icon as icon\"\n                        class=\"t-icon\"\n                        [icon]=\"icon\"\n                    />\n                </a>\n\n                <ng-template #internal>\n                    <a\n                        routerLinkActive=\"t-sublink_active\"\n                        tuiLink\n                        class=\"t-sublink\"\n                        [attr.rel]=\"item.rel\"\n                        [routerLink]=\"item.route\"\n                        [target]=\"item.target || '_self'\"\n                        [tuiDocScrollIntoViewLink]=\"isActive(item.route)\"\n                        (click)=\"closeMenu()\"\n                    >\n                        {{ item.title }}\n                        <tui-icon\n                            *polymorpheusOutlet=\"item.icon as icon\"\n                            class=\"t-icon\"\n                            [icon]=\"icon\"\n                        />\n                    </a>\n                </ng-template>\n            </ng-container>\n\n            <ng-template #subPagesTemplate>\n                <div\n                    routerLinkActive\n                    class=\"t-subsection\"\n                    [routerLinkActiveOptions]=\"{exact: false}\"\n                >\n                    <button\n                        *ngIf=\"item.subPages\"\n                        tuiLink\n                        type=\"button\"\n                        class=\"t-sublink t-sublink_subsection\"\n                        (click)=\"onGroupClick(index)\"\n                    >\n                        <tui-icon\n                            class=\"t-chevron\"\n                            [class.t-chevron_active]=\"!!openPagesGroupsArr[index]\"\n                            [icon]=\"icons.more\"\n                        />\n                        {{ item.title }}\n                        <tui-icon\n                            *polymorpheusOutlet=\"item.icon as icon\"\n                            class=\"t-icon\"\n                            [icon]=\"icon\"\n                        />\n                    </button>\n                    <tui-expand\n                        class=\"t-expand\"\n                        [expanded]=\"!!openPagesGroupsArr[index]\"\n                    >\n                        <div class=\"t-section t-section_bordered\">\n                            <ng-container *ngFor=\"let subPage of $pages(item.subPages)\">\n                                <a\n                                    *ngIf=\"subPage.route.includes('://'); else internal\"\n                                    tuiLink\n                                    class=\"t-sublink t-sublink_small\"\n                                    [attr.rel]=\"subPage.rel\"\n                                    [href]=\"subPage.route\"\n                                    [target]=\"subPage.target || '_self'\"\n                                >\n                                    {{ subPage.title }}\n                                    <tui-icon\n                                        *polymorpheusOutlet=\"subPage.icon as icon\"\n                                        class=\"t-icon\"\n                                        [icon]=\"icon\"\n                                    />\n                                </a>\n\n                                <ng-template #internal>\n                                    <a\n                                        routerLinkActive=\"t-sublink_active\"\n                                        tuiLink\n                                        class=\"t-sublink t-sublink_small\"\n                                        [attr.rel]=\"subPage.rel\"\n                                        [fragment]=\"subPage.fragment\"\n                                        [routerLink]=\"subPage.route\"\n                                        [target]=\"subPage.target || '_self'\"\n                                        [tuiDocScrollIntoViewLink]=\"isActive(subPage.route)\"\n                                        (click)=\"closeMenu()\"\n                                    >\n                                        {{ subPage.title }}\n                                        <tui-icon\n                                            *polymorpheusOutlet=\"subPage.icon as icon\"\n                                            class=\"t-icon\"\n                                            [icon]=\"icon\"\n                                        />\n                                    </a>\n                                </ng-template>\n                            </ng-container>\n                        </div>\n                    </tui-expand>\n                </div>\n            </ng-template>\n        </ng-template>\n    </tui-scrollbar>\n</nav>\n\n<ng-content />\n", styles: [":host{z-index:1;display:flex;flex-direction:column;text-align:center;background:var(--tui-background-base)}.t-input{margin:1.25rem}.t-input ::ng-deep tui-icon{border:.25rem solid transparent}.t-slash{block-size:1rem;font-size:.5rem}.t-navigation{display:flex;max-block-size:100%;min-block-size:0;flex:1 1 0;text-align:start}.t-navigation tui-scrollbar{overscroll-behavior:none}.t-accordion-standalone{margin-top:1rem}.t-scrollbar{scroll-behavior:var(--tui-scroll-behavior);inline-size:100%}.t-items-container{display:flex;flex-direction:column;padding:0 1rem}.t-label{margin-left:.5rem}.t-expand{margin-left:.25rem}.t-section{display:flex;flex-direction:column;align-items:flex-start;margin:-.5rem 0 -1rem}.t-section_bordered{margin:.5rem 0;border-inline-start:1px solid var(--tui-border-normal)}.t-prevent-ios-scroll:focus{animation:tuiPreventIOSScroll 1ms}@keyframes tuiPreventIOSScroll{0%{opacity:0}to{opacity:1}}.t-subsection{margin-left:.5rem}.t-sublink{-webkit-appearance:none;appearance:none;padding:0;border:0;background:none;font-size:inherit;line-height:inherit;text-decoration:none;font:var(--tui-font-text-m);margin-left:.5rem;padding:.5rem 0}.t-sublink_small{margin-left:1rem;line-height:1.5rem;padding-top:.5rem}.t-sublink_subsection{margin-left:0;line-height:1.6rem}.t-sublink.t-sublink.t-sublink_active{color:var(--tui-text-primary)}.t-icon{margin-left:.5rem}.t-chevron{transition-property:transform;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;inline-size:1rem;block-size:1rem;margin:-.25rem .25rem 0 -.1875rem}.t-chevron_active{transform:rotate(90deg)}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: PolymorpheusOutlet, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: i2$2.TuiAccordionItem, selector: "tui-accordion-item", inputs: ["noPadding", "showArrow", "borders", "size", "disabled", "disableHover", "open", "async"], outputs: ["openChange"] }, { kind: "directive", type: i2$2.TuiAccordionDirective, selector: "tui-accordion", inputs: ["closeOthers"] }, { kind: "directive", type: i2$2.TuiAccordionItemContent, selector: "ng-template[tuiAccordionItemContent]" }, { kind: "directive", type: TuiAutoFocus, selector: "[tuiAutoFocus]", inputs: ["tuiAutoFocus"] }, { kind: "component", type: i3$1.TuiDataListComponent, selector: "tui-data-list", inputs: ["emptyContent", "size"] }, { kind: "component", type: i3$1.TuiOption, selector: "button[tuiOption], a[tuiOption], label[tuiOption]", inputs: ["disabled", "value"] }, { kind: "directive", type: i3$1.TuiOptGroup, selector: "tui-opt-group", inputs: ["label"] }, { kind: "directive", type: TuiDocScrollIntoViewLink, selector: "[tuiDocScrollIntoViewLink]", inputs: ["tuiDocScrollIntoViewLink"] }, { kind: "component", type: i4$1.TuiExpandComponent, selector: "tui-expand", inputs: ["async", "expanded"] }, { kind: "component", type: TuiIcon, selector: "tui-icon", inputs: ["icon", "background"] }, { kind: "ngmodule", type: TuiInputModule }, { kind: "directive", type: TuiLink, selector: "a[tuiLink], button[tuiLink]", inputs: ["pseudo"] }, { kind: "component", type: TuiScrollbar, selector: "tui-scrollbar", inputs: ["hidden"] }, { kind: "component", type: i4.TuiTextfieldComponent, selector: "tui-textfield", inputs: ["filler", "stringify", "content"] }, { kind: "directive", type: i4.TuiTextfieldDirective, selector: "input[tuiTextfield]" }, { kind: "directive", type: i4.TuiTextfieldOptionsDirective, selector: "[tuiTextfieldAppearance],[tuiTextfieldSize],[tuiTextfieldCleaner]", inputs: ["tuiTextfieldAppearance", "tuiTextfieldSize", "tuiTextfieldCleaner"] }, { kind: "directive", type: i4.TuiTextfieldDropdownDirective, selector: "ng-template[tuiTextfieldDropdown]" }, { kind: "ngmodule", type: TuiTextfieldControllerModule }, { kind: "directive", type: i5.TuiTextfieldSizeDirective, selector: "[tuiTextfieldSize]", inputs: ["tuiTextfieldSize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 __decorate([
     tuiPure
@@ -1174,6 +1223,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 
 class TuiDocLanguageSwitcher {
     constructor() {
+        this.icons = inject(TUI_DOC_ICONS);
         this.switcher = inject(TuiLanguageSwitcherService);
         this.language = new FormControl(capitalize(this.switcher.language));
         this.open = false;
@@ -1206,21 +1256,23 @@ class TuiDocLanguageSwitcher {
         this.open = false;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiDocLanguageSwitcher, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiDocLanguageSwitcher, isStandalone: true, selector: "tui-doc-language-switcher", providers: [tuiScrollbarOptionsProvider({ mode: 'hover' })], ngImport: i0, template: "<button\n    appearance=\"whiteblock\"\n    iconStart=\"@tui.languages\"\n    size=\"s\"\n    tuiButtonSelect\n    tuiIconButton\n    type=\"button\"\n    [formControl]=\"language\"\n>\n    Language\n    <tui-data-list *tuiTextfieldDropdown>\n        <tui-opt-group label=\"Language of components\">\n            <button\n                *ngFor=\"let name of names\"\n                tuiOption\n                type=\"button\"\n                [value]=\"name | titlecase\"\n                (click)=\"setLang(name)\"\n            >\n                <img\n                    alt=\"\"\n                    class=\"t-flag\"\n                    [src]=\"flags.get(name) | tuiFlag\"\n                />\n                {{ name | titlecase }}\n            </button>\n        </tui-opt-group>\n    </tui-data-list>\n</button>\n", styles: [".t-flag{inline-size:1.75rem;block-size:1.75rem;border-radius:50%;margin-right:.5rem}[tuiOption]{justify-content:flex-start;gap:.5rem}\n"], dependencies: [{ kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: TitleCasePipe, name: "titlecase" }, { kind: "directive", type: TuiButton, selector: "a[tuiButton],button[tuiButton],a[tuiIconButton],button[tuiIconButton]", inputs: ["size"] }, { kind: "directive", type: TuiButtonSelect, selector: "button[tuiButtonSelect]" }, { kind: "component", type: i2$1.TuiDataListComponent, selector: "tui-data-list", inputs: ["emptyContent", "size"] }, { kind: "component", type: i2$1.TuiOption, selector: "button[tuiOption], a[tuiOption], label[tuiOption]", inputs: ["disabled", "value"] }, { kind: "directive", type: i2$1.TuiOptGroup, selector: "tui-opt-group", inputs: ["label"] }, { kind: "pipe", type: TuiFlagPipe, name: "tuiFlag" }, { kind: "directive", type: i4.TuiTextfieldDropdownDirective, selector: "ng-template[tuiTextfieldDropdown]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiDocLanguageSwitcher, isStandalone: true, selector: "tui-doc-language-switcher", providers: [tuiScrollbarOptionsProvider({ mode: 'hover' })], ngImport: i0, template: "<tui-badged-content>\n    <img\n        alt=\"\"\n        size=\"s\"\n        tuiBadge\n        tuiSlot=\"bottom\"\n        [src]=\"flags.get(language.value ?? '') || flags.get(switcher.language) | tuiFlag\"\n    />\n\n    <button\n        appearance=\"whiteblock\"\n        size=\"s\"\n        tuiButtonSelect\n        tuiIconButton\n        type=\"button\"\n        [formControl]=\"language\"\n        [iconStart]=\"icons.languages\"\n    >\n        Language\n        <tui-data-list *tuiTextfieldDropdown>\n            <tui-opt-group label=\"Language of components\">\n                <button\n                    *ngFor=\"let name of names\"\n                    tuiOption\n                    type=\"button\"\n                    [value]=\"name | titlecase\"\n                    (click)=\"setLang(name)\"\n                >\n                    <img\n                        alt=\"\"\n                        class=\"t-flag\"\n                        [src]=\"flags.get(name) | tuiFlag\"\n                    />\n                    {{ name | titlecase }}\n                </button>\n            </tui-opt-group>\n        </tui-data-list>\n    </button>\n</tui-badged-content>\n", styles: [".t-flag{inline-size:1.75rem;block-size:1.75rem;border-radius:50%;margin-right:.5rem}[tuiOption]{justify-content:flex-start;gap:.5rem}img{box-shadow:inset 0 0 0 1px var(--tui-border-normal)}\n"], dependencies: [{ kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: TitleCasePipe, name: "titlecase" }, { kind: "directive", type: TuiBadge, selector: "tui-badge,[tuiBadge]", inputs: ["size"] }, { kind: "directive", type: i2$3.TuiBadgedContentDirective, selector: "[tuiSlot]", inputs: ["tuiSlot"] }, { kind: "component", type: i2$3.TuiBadgedContentComponent, selector: "tui-badged-content" }, { kind: "directive", type: TuiButton, selector: "a[tuiButton],button[tuiButton],a[tuiIconButton],button[tuiIconButton]", inputs: ["size"] }, { kind: "directive", type: TuiButtonSelect, selector: "button[tuiButtonSelect]" }, { kind: "component", type: i3$1.TuiDataListComponent, selector: "tui-data-list", inputs: ["emptyContent", "size"] }, { kind: "component", type: i3$1.TuiOption, selector: "button[tuiOption], a[tuiOption], label[tuiOption]", inputs: ["disabled", "value"] }, { kind: "directive", type: i3$1.TuiOptGroup, selector: "tui-opt-group", inputs: ["label"] }, { kind: "pipe", type: TuiFlagPipe, name: "tuiFlag" }, { kind: "directive", type: i4.TuiTextfieldDropdownDirective, selector: "ng-template[tuiTextfieldDropdown]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiDocLanguageSwitcher, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: 'tui-doc-language-switcher', imports: [
                         NgForOf,
+                        NgIf,
                         ReactiveFormsModule,
                         TitleCasePipe,
+                        TuiBadge,
+                        TuiBadgedContent,
                         TuiButton,
                         TuiButtonSelect,
                         TuiDataList,
-                        TuiDropdown,
                         TuiFlagPipe,
                         TuiTextfield,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, providers: [tuiScrollbarOptionsProvider({ mode: 'hover' })], template: "<button\n    appearance=\"whiteblock\"\n    iconStart=\"@tui.languages\"\n    size=\"s\"\n    tuiButtonSelect\n    tuiIconButton\n    type=\"button\"\n    [formControl]=\"language\"\n>\n    Language\n    <tui-data-list *tuiTextfieldDropdown>\n        <tui-opt-group label=\"Language of components\">\n            <button\n                *ngFor=\"let name of names\"\n                tuiOption\n                type=\"button\"\n                [value]=\"name | titlecase\"\n                (click)=\"setLang(name)\"\n            >\n                <img\n                    alt=\"\"\n                    class=\"t-flag\"\n                    [src]=\"flags.get(name) | tuiFlag\"\n                />\n                {{ name | titlecase }}\n            </button>\n        </tui-opt-group>\n    </tui-data-list>\n</button>\n", styles: [".t-flag{inline-size:1.75rem;block-size:1.75rem;border-radius:50%;margin-right:.5rem}[tuiOption]{justify-content:flex-start;gap:.5rem}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, providers: [tuiScrollbarOptionsProvider({ mode: 'hover' })], template: "<tui-badged-content>\n    <img\n        alt=\"\"\n        size=\"s\"\n        tuiBadge\n        tuiSlot=\"bottom\"\n        [src]=\"flags.get(language.value ?? '') || flags.get(switcher.language) | tuiFlag\"\n    />\n\n    <button\n        appearance=\"whiteblock\"\n        size=\"s\"\n        tuiButtonSelect\n        tuiIconButton\n        type=\"button\"\n        [formControl]=\"language\"\n        [iconStart]=\"icons.languages\"\n    >\n        Language\n        <tui-data-list *tuiTextfieldDropdown>\n            <tui-opt-group label=\"Language of components\">\n                <button\n                    *ngFor=\"let name of names\"\n                    tuiOption\n                    type=\"button\"\n                    [value]=\"name | titlecase\"\n                    (click)=\"setLang(name)\"\n                >\n                    <img\n                        alt=\"\"\n                        class=\"t-flag\"\n                        [src]=\"flags.get(name) | tuiFlag\"\n                    />\n                    {{ name | titlecase }}\n                </button>\n            </tui-opt-group>\n        </tui-data-list>\n    </button>\n</tui-badged-content>\n", styles: [".t-flag{inline-size:1.75rem;block-size:1.75rem;border-radius:50%;margin-right:.5rem}[tuiOption]{justify-content:flex-start;gap:.5rem}img{box-shadow:inset 0 0 0 1px var(--tui-border-normal)}\n"] }]
         }] });
 function capitalize(value) {
     return `${value.charAt(0).toUpperCase()}${value.slice(1)}`;
@@ -1244,7 +1296,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 /**
  * Array if related page titles
  */
-const PAGE_SEE_ALSO = new InjectionToken('[PAGE_SEE_ALSO]');
+const PAGE_SEE_ALSO = tuiCreateToken();
 const PAGE_PROVIDERS = [
     {
         provide: PAGE_SEE_ALSO,
@@ -1280,6 +1332,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 
 class TuiDocPage {
     constructor() {
+        this.supportLanguage = inject(TUI_DOC_SUPPORT_LANGUAGE);
         this.defaultTabs = inject(TUI_DOC_DEFAULT_TABS);
         this.from = / /g;
         this.to = '_';
@@ -1297,7 +1350,7 @@ class TuiDocPage {
         return !!this.seeAlso.length && this.activeItemIndex === 0;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiDocPage, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiDocPage, isStandalone: true, selector: "tui-doc-page", inputs: { header: "header", package: "package", type: "type", tags: "tags", path: "path", deprecated: "deprecated" }, providers: PAGE_PROVIDERS, queries: [{ propertyName: "tabConnectors", predicate: TuiDocPageTabConnector }], ngImport: i0, template: "<header class=\"t-header\">\n    <h1 class=\"t-title\">\n        {{ header }}\n        <tui-chip\n            *ngIf=\"!!deprecated || deprecated === ''\"\n            appearance=\"custom\"\n            size=\"xs\"\n            class=\"t-tag t-tag_deprecated\"\n        >\n            deprecated\n        </tui-chip>\n        <tui-chip\n            *ngIf=\"package\"\n            appearance=\"custom\"\n            size=\"xs\"\n            class=\"t-tag t-tag_package\"\n            [style.background]=\"package | tuiAutoColor\"\n        >\n            {{ package }}\n        </tui-chip>\n        <tui-chip\n            *ngFor=\"let tag of tags\"\n            appearance=\"custom\"\n            size=\"xs\"\n            class=\"t-tag t-tag_package\"\n            [style.background]=\"tag | tuiAutoColor\"\n        >\n            {{ tag }}\n        </tui-chip>\n    </h1>\n    <tui-tabs-with-more\n        *ngIf=\"tabConnectors.length\"\n        class=\"t-tabs\"\n        [(activeItemIndex)]=\"activeItemIndex\"\n    >\n        <ng-container *ngFor=\"let tab of tabConnectors; first as first; index as index\">\n            <ng-container *ngIf=\"tab.pageTab || defaultTabs[index] as tabName\">\n                <a\n                    *tuiItem\n                    routerLinkActive\n                    tuiTab\n                    [routerLink]=\"first ? './' : (tabName | tuiReplace: from : to)\"\n                    [routerLinkActiveOptions]=\"{exact: first}\"\n                >\n                    {{ tabName }}\n                </a>\n            </ng-container>\n        </ng-container>\n    </tui-tabs-with-more>\n    <tui-doc-source-code\n        class=\"t-source-code\"\n        [header]=\"header\"\n        [package]=\"package\"\n        [path]=\"path\"\n        [type]=\"type\"\n    />\n</header>\n<div class=\"t-content\">\n    <ng-content />\n    <tui-doc-see-also\n        *ngIf=\"showSeeAlso\"\n        class=\"t-see-also\"\n        [seeAlso]=\"seeAlso\"\n    />\n    <ng-container *ngFor=\"let tab of tabConnectors; index as index\">\n        <ng-container\n            *ngIf=\"index === activeItemIndex\"\n            [ngTemplateOutlet]=\"tab.template\"\n        />\n    </ng-container>\n</div>\n", styles: [":host{display:flex;flex-direction:column;min-block-size:0;flex-basis:0;flex-grow:1}.t-header{display:flex;font:var(--tui-font-heading-3);flex-wrap:wrap;min-block-size:7.25rem;color:var(--tui-text-primary);box-shadow:inset 0 -1px 0 0 var(--tui-border-normal);padding:3.75rem 0 0;box-sizing:border-box;flex-shrink:0;margin:0 min(10vw,8.75rem)}@media screen and (max-width: 47.9625em){.t-header{font:var(--tui-font-heading-4);min-block-size:4.5rem;padding:1.25rem 1.25rem 0;margin:0}}.t-title{min-inline-size:100%;font-size:inherit;margin:0}.t-tag{vertical-align:middle;text-transform:uppercase;margin-right:.5rem}.t-tag_deprecated{background-color:var(--tui-status-negative);color:#fff}.t-tag.t-tag_package{color:#000}.t-tabs{flex:1;margin:1.125rem .3125rem 0 0;box-shadow:none}@media screen and (max-width: 47.9625em){.t-tabs{margin-top:.25rem}}.t-content{padding:2rem 0;margin:0 min(10vw,8.75rem)}@media screen and (max-width: 47.9625em){.t-content{padding:2rem 1.25rem;margin:0}}.t-see-also{min-inline-size:18.75rem;inline-size:30%;float:inline-end;margin-left:1.5rem}@media screen and (max-width: 47.9625em){.t-see-also{float:none;inline-size:100%;margin:0 0 1.5rem}}.t-source-code{align-self:flex-end;line-height:2.75rem;margin-left:auto}\n"], dependencies: [{ kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "pipe", type: TuiAutoColorPipe, name: "tuiAutoColor" }, { kind: "directive", type: TuiChip, selector: "tui-chip,[tuiChip]", inputs: ["size"] }, { kind: "component", type: TuiDocSeeAlso, selector: "tui-doc-see-also", inputs: ["seeAlso"] }, { kind: "component", type: TuiDocSourceCode, selector: "tui-doc-source-code", inputs: ["header", "package", "type", "path"] }, { kind: "directive", type: TuiItem, selector: "[tuiItem]" }, { kind: "pipe", type: TuiReplacePipe, name: "tuiReplace" }, { kind: "directive", type: i2$2.TuiTab, selector: "a[tuiTab]:not([routerLink]), a[tuiTab][routerLink][routerLinkActive], button[tuiTab]" }, { kind: "component", type: i2$2.TuiTabsWithMore, selector: "tui-tabs-with-more, nav[tuiTabsWithMore]", inputs: ["size", "moreContent", "dropdownContent", "underline", "itemsLimit", "activeItemIndex"], outputs: ["activeItemIndexChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiDocPage, isStandalone: true, selector: "tui-doc-page", inputs: { header: "header", package: "package", type: "type", tags: "tags", path: "path", deprecated: "deprecated" }, providers: PAGE_PROVIDERS, queries: [{ propertyName: "tabConnectors", predicate: TuiDocPageTabConnector }], ngImport: i0, template: "<header class=\"t-header\">\n    <h1 class=\"t-title\">\n        {{ header }}\n        <tui-chip\n            *ngIf=\"!!deprecated || deprecated === ''\"\n            appearance=\"custom\"\n            size=\"xs\"\n            class=\"t-tag t-tag_deprecated\"\n        >\n            deprecated\n        </tui-chip>\n        <tui-chip\n            *ngIf=\"package\"\n            appearance=\"custom\"\n            size=\"xs\"\n            class=\"t-tag t-tag_package\"\n            [style.background]=\"package | tuiAutoColor\"\n        >\n            {{ package }}\n        </tui-chip>\n        <tui-chip\n            *ngFor=\"let tag of tags\"\n            appearance=\"custom\"\n            size=\"xs\"\n            class=\"t-tag t-tag_package\"\n            [style.background]=\"tag | tuiAutoColor\"\n        >\n            {{ tag }}\n        </tui-chip>\n    </h1>\n    <tui-tabs-with-more\n        *ngIf=\"tabConnectors.length\"\n        class=\"t-tabs\"\n        [(activeItemIndex)]=\"activeItemIndex\"\n    >\n        <ng-container *ngFor=\"let tab of tabConnectors; first as first; index as index\">\n            <ng-container *ngIf=\"tab.pageTab || defaultTabs[index] as tabName\">\n                <a\n                    *tuiItem\n                    routerLinkActive\n                    tuiTab\n                    [routerLink]=\"first ? './' : (tabName | tuiReplace: from : to)\"\n                    [routerLinkActiveOptions]=\"{exact: first}\"\n                >\n                    {{ tabName }}\n                </a>\n            </ng-container>\n        </ng-container>\n    </tui-tabs-with-more>\n\n    <div\n        *ngIf=\"package || path || type\"\n        class=\"t-right-side\"\n    >\n        <tui-doc-source-code\n            class=\"t-source-code\"\n            [header]=\"header\"\n            [package]=\"package\"\n            [path]=\"path\"\n            [type]=\"type\"\n        />\n\n        <tui-doc-language-switcher *ngIf=\"supportLanguage.has(header)\" />\n    </div>\n</header>\n<div class=\"t-content\">\n    <ng-content />\n    <tui-doc-see-also\n        *ngIf=\"showSeeAlso\"\n        class=\"t-see-also\"\n        [seeAlso]=\"seeAlso\"\n    />\n    <ng-container *ngFor=\"let tab of tabConnectors; index as index\">\n        <ng-container\n            *ngIf=\"index === activeItemIndex\"\n            [ngTemplateOutlet]=\"tab.template\"\n        />\n    </ng-container>\n</div>\n", styles: [":host{display:flex;flex-direction:column;min-block-size:0;flex-basis:0;flex-grow:1}.t-header{display:flex;font:var(--tui-font-heading-3);flex-wrap:wrap;min-block-size:7.25rem;color:var(--tui-text-primary);box-shadow:inset 0 -1px 0 0 var(--tui-border-normal);padding:3.75rem 0 0;box-sizing:border-box;flex-shrink:0;margin:0 min(10vw,8.75rem)}@media screen and (max-width: 47.9625em){.t-header{font:var(--tui-font-heading-4);min-block-size:4.5rem;padding:1.25rem 1.25rem 0;margin:0}}.t-title{min-inline-size:100%;font-size:inherit;margin:0}.t-tag{vertical-align:middle;text-transform:uppercase;margin-right:.5rem}.t-tag_deprecated{background-color:var(--tui-status-negative);color:#fff}.t-tag.t-tag_package{color:#000}.t-tabs{flex:1;margin:1.125rem .3125rem 0 0;box-shadow:none}@media screen and (max-width: 47.9625em){.t-tabs{margin-top:.25rem}}.t-content{padding:2rem 0;margin:0 min(10vw,8.75rem)}@media screen and (max-width: 47.9625em){.t-content{padding:2rem 1.25rem;margin:0}}.t-see-also{min-inline-size:18.75rem;inline-size:30%;float:inline-end;margin-left:1.5rem}@media screen and (max-width: 47.9625em){.t-see-also{float:none;inline-size:100%;margin:0 0 1.5rem}}.t-right-side{display:flex;gap:1rem;align-items:center;align-self:center;margin-left:auto}.t-source-code{block-size:3.125rem}\n"], dependencies: [{ kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "pipe", type: TuiAutoColorPipe, name: "tuiAutoColor" }, { kind: "directive", type: TuiChip, selector: "tui-chip,[tuiChip]", inputs: ["size"] }, { kind: "component", type: TuiDocLanguageSwitcher, selector: "tui-doc-language-switcher" }, { kind: "component", type: TuiDocSeeAlso, selector: "tui-doc-see-also", inputs: ["seeAlso"] }, { kind: "component", type: TuiDocSourceCode, selector: "tui-doc-source-code", inputs: ["header", "package", "type", "path"] }, { kind: "pipe", type: TuiReplacePipe, name: "tuiReplace" }, { kind: "directive", type: i1$2.TuiItem, selector: "[tuiItem]" }, { kind: "directive", type: i2$1.TuiTab, selector: "a[tuiTab]:not([routerLink]), a[tuiTab][routerLink][routerLinkActive], button[tuiTab]" }, { kind: "component", type: i2$1.TuiTabsWithMore, selector: "tui-tabs-with-more, nav[tuiTabsWithMore]", inputs: ["size", "moreContent", "dropdownContent", "underline", "itemsLimit", "activeItemIndex"], outputs: ["activeItemIndexChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiDocPage, decorators: [{
             type: Component,
@@ -1309,12 +1362,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         RouterLinkActive,
                         TuiAutoColorPipe,
                         TuiChip,
+                        TuiDocLanguageSwitcher,
                         TuiDocSeeAlso,
                         TuiDocSourceCode,
-                        TuiItem,
                         TuiReplacePipe,
                         TuiTabs,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, providers: PAGE_PROVIDERS, template: "<header class=\"t-header\">\n    <h1 class=\"t-title\">\n        {{ header }}\n        <tui-chip\n            *ngIf=\"!!deprecated || deprecated === ''\"\n            appearance=\"custom\"\n            size=\"xs\"\n            class=\"t-tag t-tag_deprecated\"\n        >\n            deprecated\n        </tui-chip>\n        <tui-chip\n            *ngIf=\"package\"\n            appearance=\"custom\"\n            size=\"xs\"\n            class=\"t-tag t-tag_package\"\n            [style.background]=\"package | tuiAutoColor\"\n        >\n            {{ package }}\n        </tui-chip>\n        <tui-chip\n            *ngFor=\"let tag of tags\"\n            appearance=\"custom\"\n            size=\"xs\"\n            class=\"t-tag t-tag_package\"\n            [style.background]=\"tag | tuiAutoColor\"\n        >\n            {{ tag }}\n        </tui-chip>\n    </h1>\n    <tui-tabs-with-more\n        *ngIf=\"tabConnectors.length\"\n        class=\"t-tabs\"\n        [(activeItemIndex)]=\"activeItemIndex\"\n    >\n        <ng-container *ngFor=\"let tab of tabConnectors; first as first; index as index\">\n            <ng-container *ngIf=\"tab.pageTab || defaultTabs[index] as tabName\">\n                <a\n                    *tuiItem\n                    routerLinkActive\n                    tuiTab\n                    [routerLink]=\"first ? './' : (tabName | tuiReplace: from : to)\"\n                    [routerLinkActiveOptions]=\"{exact: first}\"\n                >\n                    {{ tabName }}\n                </a>\n            </ng-container>\n        </ng-container>\n    </tui-tabs-with-more>\n    <tui-doc-source-code\n        class=\"t-source-code\"\n        [header]=\"header\"\n        [package]=\"package\"\n        [path]=\"path\"\n        [type]=\"type\"\n    />\n</header>\n<div class=\"t-content\">\n    <ng-content />\n    <tui-doc-see-also\n        *ngIf=\"showSeeAlso\"\n        class=\"t-see-also\"\n        [seeAlso]=\"seeAlso\"\n    />\n    <ng-container *ngFor=\"let tab of tabConnectors; index as index\">\n        <ng-container\n            *ngIf=\"index === activeItemIndex\"\n            [ngTemplateOutlet]=\"tab.template\"\n        />\n    </ng-container>\n</div>\n", styles: [":host{display:flex;flex-direction:column;min-block-size:0;flex-basis:0;flex-grow:1}.t-header{display:flex;font:var(--tui-font-heading-3);flex-wrap:wrap;min-block-size:7.25rem;color:var(--tui-text-primary);box-shadow:inset 0 -1px 0 0 var(--tui-border-normal);padding:3.75rem 0 0;box-sizing:border-box;flex-shrink:0;margin:0 min(10vw,8.75rem)}@media screen and (max-width: 47.9625em){.t-header{font:var(--tui-font-heading-4);min-block-size:4.5rem;padding:1.25rem 1.25rem 0;margin:0}}.t-title{min-inline-size:100%;font-size:inherit;margin:0}.t-tag{vertical-align:middle;text-transform:uppercase;margin-right:.5rem}.t-tag_deprecated{background-color:var(--tui-status-negative);color:#fff}.t-tag.t-tag_package{color:#000}.t-tabs{flex:1;margin:1.125rem .3125rem 0 0;box-shadow:none}@media screen and (max-width: 47.9625em){.t-tabs{margin-top:.25rem}}.t-content{padding:2rem 0;margin:0 min(10vw,8.75rem)}@media screen and (max-width: 47.9625em){.t-content{padding:2rem 1.25rem;margin:0}}.t-see-also{min-inline-size:18.75rem;inline-size:30%;float:inline-end;margin-left:1.5rem}@media screen and (max-width: 47.9625em){.t-see-also{float:none;inline-size:100%;margin:0 0 1.5rem}}.t-source-code{align-self:flex-end;line-height:2.75rem;margin-left:auto}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, providers: PAGE_PROVIDERS, template: "<header class=\"t-header\">\n    <h1 class=\"t-title\">\n        {{ header }}\n        <tui-chip\n            *ngIf=\"!!deprecated || deprecated === ''\"\n            appearance=\"custom\"\n            size=\"xs\"\n            class=\"t-tag t-tag_deprecated\"\n        >\n            deprecated\n        </tui-chip>\n        <tui-chip\n            *ngIf=\"package\"\n            appearance=\"custom\"\n            size=\"xs\"\n            class=\"t-tag t-tag_package\"\n            [style.background]=\"package | tuiAutoColor\"\n        >\n            {{ package }}\n        </tui-chip>\n        <tui-chip\n            *ngFor=\"let tag of tags\"\n            appearance=\"custom\"\n            size=\"xs\"\n            class=\"t-tag t-tag_package\"\n            [style.background]=\"tag | tuiAutoColor\"\n        >\n            {{ tag }}\n        </tui-chip>\n    </h1>\n    <tui-tabs-with-more\n        *ngIf=\"tabConnectors.length\"\n        class=\"t-tabs\"\n        [(activeItemIndex)]=\"activeItemIndex\"\n    >\n        <ng-container *ngFor=\"let tab of tabConnectors; first as first; index as index\">\n            <ng-container *ngIf=\"tab.pageTab || defaultTabs[index] as tabName\">\n                <a\n                    *tuiItem\n                    routerLinkActive\n                    tuiTab\n                    [routerLink]=\"first ? './' : (tabName | tuiReplace: from : to)\"\n                    [routerLinkActiveOptions]=\"{exact: first}\"\n                >\n                    {{ tabName }}\n                </a>\n            </ng-container>\n        </ng-container>\n    </tui-tabs-with-more>\n\n    <div\n        *ngIf=\"package || path || type\"\n        class=\"t-right-side\"\n    >\n        <tui-doc-source-code\n            class=\"t-source-code\"\n            [header]=\"header\"\n            [package]=\"package\"\n            [path]=\"path\"\n            [type]=\"type\"\n        />\n\n        <tui-doc-language-switcher *ngIf=\"supportLanguage.has(header)\" />\n    </div>\n</header>\n<div class=\"t-content\">\n    <ng-content />\n    <tui-doc-see-also\n        *ngIf=\"showSeeAlso\"\n        class=\"t-see-also\"\n        [seeAlso]=\"seeAlso\"\n    />\n    <ng-container *ngFor=\"let tab of tabConnectors; index as index\">\n        <ng-container\n            *ngIf=\"index === activeItemIndex\"\n            [ngTemplateOutlet]=\"tab.template\"\n        />\n    </ng-container>\n</div>\n", styles: [":host{display:flex;flex-direction:column;min-block-size:0;flex-basis:0;flex-grow:1}.t-header{display:flex;font:var(--tui-font-heading-3);flex-wrap:wrap;min-block-size:7.25rem;color:var(--tui-text-primary);box-shadow:inset 0 -1px 0 0 var(--tui-border-normal);padding:3.75rem 0 0;box-sizing:border-box;flex-shrink:0;margin:0 min(10vw,8.75rem)}@media screen and (max-width: 47.9625em){.t-header{font:var(--tui-font-heading-4);min-block-size:4.5rem;padding:1.25rem 1.25rem 0;margin:0}}.t-title{min-inline-size:100%;font-size:inherit;margin:0}.t-tag{vertical-align:middle;text-transform:uppercase;margin-right:.5rem}.t-tag_deprecated{background-color:var(--tui-status-negative);color:#fff}.t-tag.t-tag_package{color:#000}.t-tabs{flex:1;margin:1.125rem .3125rem 0 0;box-shadow:none}@media screen and (max-width: 47.9625em){.t-tabs{margin-top:.25rem}}.t-content{padding:2rem 0;margin:0 min(10vw,8.75rem)}@media screen and (max-width: 47.9625em){.t-content{padding:2rem 1.25rem;margin:0}}.t-see-also{min-inline-size:18.75rem;inline-size:30%;float:inline-end;margin-left:1.5rem}@media screen and (max-width: 47.9625em){.t-see-also{float:none;inline-size:100%;margin:0 0 1.5rem}}.t-right-side{display:flex;gap:1rem;align-items:center;align-self:center;margin-left:auto}.t-source-code{block-size:3.125rem}\n"] }]
         }], propDecorators: { header: [{
                 type: Input
             }], package: [{
@@ -1354,7 +1407,7 @@ class TuiDocThemeSwitcher {
         this.location.reload();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiDocThemeSwitcher, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiDocThemeSwitcher, isStandalone: true, selector: "tui-doc-theme-switcher", ngImport: i0, template: "<tui-select\n    [ngModel]=\"theme\"\n    (ngModelChange)=\"onTheme($event)\"\n>\n    <ng-content />\n    <tui-data-list *tuiDataList>\n        <button\n            *ngFor=\"let key of keys\"\n            tuiOption\n            type=\"button\"\n            [value]=\"key\"\n        >\n            <img\n                alt=\"\"\n                [src]=\"themes[key]\"\n                [style.margin-inline-end.rem]=\"0.5\"\n                [style.width.rem]=\"1.75\"\n            />\n            {{ key }}\n        </button>\n    </tui-data-list>\n</tui-select>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i2$1.TuiDataListComponent, selector: "tui-data-list", inputs: ["emptyContent", "size"] }, { kind: "directive", type: i2$1.TuiDataListDirective, selector: "ng-template[tuiDataList]" }, { kind: "component", type: i2$1.TuiOption, selector: "button[tuiOption], a[tuiOption], label[tuiOption]", inputs: ["disabled", "value"] }, { kind: "ngmodule", type: TuiSelectModule }, { kind: "component", type: i5$1.TuiSelectComponent, selector: "tui-select", inputs: ["stringify", "identityMatcher", "valueContent"] }, { kind: "directive", type: i5$1.TuiSelectDirective, selector: "tui-select" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiDocThemeSwitcher, isStandalone: true, selector: "tui-doc-theme-switcher", ngImport: i0, template: "<tui-select\n    [ngModel]=\"theme\"\n    (ngModelChange)=\"onTheme($event)\"\n>\n    <ng-content />\n    <tui-data-list *tuiDataList>\n        <button\n            *ngFor=\"let key of keys\"\n            tuiOption\n            type=\"button\"\n            [value]=\"key\"\n        >\n            <img\n                alt=\"\"\n                [src]=\"themes[key]\"\n                [style.margin-inline-end.rem]=\"0.5\"\n                [style.width.rem]=\"1.75\"\n            />\n            {{ key }}\n        </button>\n    </tui-data-list>\n</tui-select>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i3$1.TuiDataListComponent, selector: "tui-data-list", inputs: ["emptyContent", "size"] }, { kind: "directive", type: i3$1.TuiDataListDirective, selector: "ng-template[tuiDataList]" }, { kind: "component", type: i3$1.TuiOption, selector: "button[tuiOption], a[tuiOption], label[tuiOption]", inputs: ["disabled", "value"] }, { kind: "ngmodule", type: TuiSelectModule }, { kind: "component", type: i5$1.TuiSelectComponent, selector: "tui-select", inputs: ["stringify", "identityMatcher", "valueContent"] }, { kind: "directive", type: i5$1.TuiSelectDirective, selector: "tui-select" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiDocThemeSwitcher, decorators: [{
             type: Component,