@taiga-ui/addon-doc 4.52.0-canary.2c75afa → 4.52.0-canary.2fa3dd5

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

@@ -1,12 +1,12 @@
 import * as i0 from '@angular/core';
-import { inject, ChangeDetectionStrategy, ViewEncapsulation, Component, TemplateRef, Pipe, Input, Directive, EventEmitter, Output, PLATFORM_ID, computed, signal, ContentChild, ViewChild, ChangeDetectorRef, DestroyRef, ContentChildren, InjectionToken, ElementRef, effect } from '@angular/core';
+import { inject, ChangeDetectionStrategy, ViewEncapsulation, Component, TemplateRef, Pipe, input, Directive, computed, model, PLATFORM_ID, Input, signal, ContentChild, ViewChild, ChangeDetectorRef, DestroyRef, ContentChildren, InjectionToken, ElementRef, effect } 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_DIRECTION_ENABLED, TUI_DOC_SEE_ALSO, TUI_DOC_SUPPORT_LANGUAGE, TUI_DOC_DEFAULT_TABS } from '@taiga-ui/addon-doc/tokens';
 import { Location, isPlatformServer, JsonPipe, NgTemplateOutlet, DOCUMENT, AsyncPipe, NgComponentOutlet, TitleCasePipe, KeyValuePipe } 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, tuiPx, tuiPure, tuiIsString, tuiProvideOptions, tuiIsPresent, tuiUniqBy } from '@taiga-ui/cdk/utils/miscellaneous';
+import { tuiIsNumber, tuiPx, tuiPure, tuiIsString, tuiIsPresent, tuiUniqBy } from '@taiga-ui/cdk/utils/miscellaneous';
 import { TuiAlertService } from '@taiga-ui/core/components/alert';
 import { TuiIcon } from '@taiga-ui/core/components/icon';
 import * as i7 from '@taiga-ui/core/components/textfield';
@@ -63,6 +63,7 @@ import * as i2$1 from '@taiga-ui/kit/components/tabs';
 import { TuiTabs } from '@taiga-ui/kit/components/tabs';
 import { PolymorpheusOutlet } from '@taiga-ui/polymorpheus';
 import { TUI_EXAMPLE_PRIMARY_FILE_NAME } from '@taiga-ui/addon-doc/types';
+import { tuiCreateOptions } from '@taiga-ui/cdk/utils/di';
 import { TuiPopup } from '@taiga-ui/core/directives/popup';
 import { TuiDrawer } from '@taiga-ui/kit/components/drawer';
 import { Title } from '@angular/platform-browser';
@@ -146,22 +147,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
 
 class TuiDocAPINumberItem {
     constructor() {
-        this.min = null;
-        this.max = null;
+        this.min = input(null);
+        this.max = input(null);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiDocAPINumberItem, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.15", type: TuiDocAPINumberItem, isStandalone: true, selector: "tr[tuiDocAPIItem][type=number]", inputs: { min: "min", max: "max" }, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.15", type: TuiDocAPINumberItem, isStandalone: true, selector: "tr[tuiDocAPIItem][type=number]", inputs: { min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiDocAPINumberItem, decorators: [{
             type: Directive,
             args: [{
                     selector: 'tr[tuiDocAPIItem][type=number]',
                 }]
-        }], propDecorators: { min: [{
-                type: Input
-            }], max: [{
-                type: Input
-            }] } });
+        }] });
 
 const SERIALIZED_SUFFIX$1 = '$';
 class TuiDocAPIItem {
@@ -176,17 +173,20 @@ class TuiDocAPIItem {
             self: true,
             optional: true,
         });
-        this.name = '';
-        this.type = '';
-        this.items = [];
-        this.valueChange = new EventEmitter();
+        this.isBananaBox = computed(() => this.name().startsWith('[('));
+        this.isInput = computed(() => this.name().startsWith('['));
+        this.isOutput = computed(() => this.name().startsWith('('));
+        this.name = input('');
+        this.type = input('');
+        this.value = model();
+        this.items = input([]);
+        this.hasCleaner = computed(() => this.type().includes('null') || this.type().includes('PolymorpheusContent'));
     }
     ngOnInit() {
         this.parseParams(this.activatedRoute.snapshot.queryParams);
     }
     onValueChange(value) {
-        this.value = value;
-        this.valueChange.emit(value);
+        this.value.set(value);
         this.setQueryParam(value);
     }
     emitEvent(event) {
@@ -194,22 +194,23 @@ class TuiDocAPIItem {
         const alert = !event || event?.toString() === '[object Object]'
             ? tuiInspectAny(event, 2)
             : event;
-        this.alerts.open(alert, { label: this.name }).subscribe();
+        this.alerts.open(alert, { label: this.name() }).subscribe();
     }
     clearBrackets(value) {
         return value.replaceAll(/[()[\]]/g, '');
     }
     parseParams(params) {
-        const name = this.clearBrackets(this.name);
+        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]
+        const items = this.items();
+        let value = !!propertyValueWithSuffix && items
+            ? items[propertyValueWithSuffix]
             : tuiCoerceValue(propertyValue);
-        if (this.type === 'string' && tuiIsNumber(value)) {
+        if (this.type() === 'string' && tuiIsNumber(value)) {
             value = value.toString();
         }
         this.onValueChange(value);
@@ -217,9 +218,10 @@ class TuiDocAPIItem {
     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 items = this.items();
+        const computedValue = isValueAvailableByKey && items ? items.indexOf(value) : value;
         const suffix = isValueAvailableByKey ? SERIALIZED_SUFFIX$1 : '';
-        const propName = this.clearBrackets(this.name) + suffix;
+        const propName = this.clearBrackets(this.name()) + suffix;
         tree.queryParams = {
             ...tree.queryParams,
             [propName]: computedValue,
@@ -227,7 +229,7 @@ class TuiDocAPIItem {
         this.locationRef.go(this.urlStateHandler(tree));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiDocAPIItem, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", 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        @for (item of type | tuiDocTypeReference; track item) {\n            @if (item.reference) {\n                <a\n                    target=\"_blank\"\n                    class=\"t-reference\"\n                    [attr.href]=\"item.reference\"\n                >\n                    {{ item.type }}\n                    @if (icons.externalLink) {\n                        <tui-icon\n                            [icon]=\"icons.externalLink\"\n                            [style.font-size.rem]=\"1\"\n                        />\n                    }\n                </a>\n            } @else {\n                {{ item.type }}\n            }\n            @if (!$last) {\n                <span>&nbsp;|&nbsp;</span>\n            }\n        }\n    </code>\n</td>\n<td class=\"t-td\">\n    @if (items.length) {\n        <tui-textfield\n            tuiChevron\n            tuiTextfieldSize=\"m\"\n            class=\"t-input\"\n            [content]=\"content\"\n            [tuiTextfieldCleaner]=\"type.includes('null') || type.includes('PolymorpheusContent')\"\n        >\n            <input\n                tuiSelect\n                [ngModel]=\"value ?? null\"\n                (ngModelChange)=\"onValueChange($event)\"\n            />\n            <tui-data-list-wrapper\n                *tuiDropdown\n                new\n                [itemContent]=\"content\"\n                [items]=\"items\"\n            />\n        </tui-textfield>\n    } @else {\n        @if (value !== undefined) {\n            @switch (type) {\n                @case ('boolean') {\n                    <input\n                        tuiSwitch\n                        type=\"checkbox\"\n                        [id]=\"name\"\n                        [ngModel]=\"value\"\n                        (ngModelChange)=\"onValueChange($event)\"\n                    />\n                }\n                @case ('string') {\n                    <tui-textfield\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                @case ('number') {\n                    <tui-textfield tuiTextfieldSize=\"m\">\n                        <input\n                            tuiInputNumber\n                            [id]=\"name\"\n                            [max]=\"numberItem?.max ?? null\"\n                            [min]=\"numberItem?.min ?? null\"\n                            [ngModel]=\"value\"\n                            [step]=\"1\"\n                            (ngModelChange)=\"onValueChange($event || 0)\"\n                        />\n                    </tui-textfield>\n                }\n            }\n        }\n    }\n    <ng-template\n        #content\n        let-data\n    >\n        <code [style.margin]=\"0\">{{ data | tuiInspectAny }}</code>\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;min-inline-size:10rem}.t-name{display:flex!important;min-block-size:1.5rem;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:.1875rem}.t-input{min-inline-size:10rem;margin-block-start:-.625rem}.t-input code{overflow:hidden;white-space:nowrap}@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.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: TuiChevron, selector: "[tuiChevron]", inputs: ["tuiChevron"] }, { kind: "component", type: i2.TuiDataListWrapperComponent, selector: "tui-data-list-wrapper:not([labels]), tui-data-list-wrapper:not([labels])[new]", inputs: ["items", "disabledItemHandler", "emptyContent", "size", "itemContent"], outputs: ["itemClick"] }, { kind: "pipe", type: TuiDocTypeReferencePipe, name: "tuiDocTypeReference" }, { kind: "component", type: TuiIcon, selector: "tui-icon:not([tuiBadge])", inputs: ["background"] }, { kind: "directive", type: i3.TuiInputNumberDirective, selector: "input[tuiInputNumber]", inputs: ["prefix", "postfix", "min", "max"] }, { kind: "component", type: i3.TuiInputNumberStep, selector: "input[tuiInputNumber][step]", inputs: ["step"] }, { kind: "pipe", type: TuiInspectPipe, name: "tuiInspectAny" }, { kind: "directive", type: i3$1.TuiSelectDirective, selector: "input[tuiSelect]" }, { kind: "component", type: TuiSwitch, selector: "input[type=\"checkbox\"][tuiSwitch]", inputs: ["showIcons"] }, { kind: "component", type: i7.TuiTextfieldComponent, selector: "tui-textfield:not([multi])" }, { kind: "directive", type: i7.TuiTextfieldDirective, selector: "input[tuiTextfield]" }, { kind: "directive", type: i7.TuiTextfieldOptionsDirective, selector: "[tuiTextfieldAppearance],[tuiTextfieldSize],[tuiTextfieldCleaner]", inputs: ["tuiTextfieldAppearance", "tuiTextfieldSize", "tuiTextfieldCleaner"] }, { kind: "directive", type: i6.TuiDropdownContent, selector: "ng-template[tuiDropdown]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: TuiDocAPIItem, isStandalone: true, selector: "tr[tuiDocAPIItem]", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, ngImport: i0, template: "<td class=\"t-td\">\n    <code\n        class=\"t-name\"\n        [class.t-name_banana]=\"isBananaBox()\"\n        [class.t-name_input]=\"isInput()\"\n        [class.t-name_output]=\"isOutput()\"\n    >\n        {{ name() }}\n    </code>\n    <ng-content />\n</td>\n<td class=\"t-td\">\n    <code class=\"t-type\">\n        @for (item of type() | tuiDocTypeReference; track item) {\n            @if (item.reference) {\n                <a\n                    target=\"_blank\"\n                    class=\"t-reference\"\n                    [attr.href]=\"item.reference\"\n                >\n                    {{ item.type }}\n                    @if (icons.externalLink) {\n                        <tui-icon\n                            [icon]=\"icons.externalLink\"\n                            [style.font-size.rem]=\"1\"\n                        />\n                    }\n                </a>\n            } @else {\n                {{ item.type }}\n            }\n            @if (!$last) {\n                <span>&nbsp;|&nbsp;</span>\n            }\n        }\n    </code>\n</td>\n<td class=\"t-td\">\n    @if (items().length) {\n        <tui-textfield\n            tuiChevron\n            tuiTextfieldSize=\"m\"\n            class=\"t-input\"\n            [content]=\"content\"\n            [tuiTextfieldCleaner]=\"hasCleaner()\"\n        >\n            <input\n                tuiSelect\n                [ngModel]=\"value() ?? null\"\n                (ngModelChange)=\"onValueChange($event)\"\n            />\n            <tui-data-list-wrapper\n                *tuiDropdown\n                new\n                [itemContent]=\"content\"\n                [items]=\"items()\"\n            />\n        </tui-textfield>\n    } @else {\n        @if (value() !== undefined) {\n            @switch (type()) {\n                @case ('boolean') {\n                    <input\n                        tuiSwitch\n                        type=\"checkbox\"\n                        [id]=\"name()\"\n                        [ngModel]=\"value()\"\n                        (ngModelChange)=\"onValueChange($event)\"\n                    />\n                }\n                @case ('string') {\n                    <tui-textfield\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                @case ('number') {\n                    <tui-textfield tuiTextfieldSize=\"m\">\n                        <input\n                            tuiInputNumber\n                            [id]=\"name()\"\n                            [max]=\"numberItem?.max() ?? null\"\n                            [min]=\"numberItem?.min() ?? null\"\n                            [ngModel]=\"value()\"\n                            [step]=\"1\"\n                            (ngModelChange)=\"onValueChange($event || 0)\"\n                        />\n                    </tui-textfield>\n                }\n            }\n        }\n    }\n    <ng-template\n        #content\n        let-data\n    >\n        <code [style.margin]=\"0\">{{ data | tuiInspectAny }}</code>\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;min-inline-size:10rem}.t-name{display:flex!important;min-block-size:1.5rem;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:.1875rem}.t-input{min-inline-size:10rem;margin-block-start:-.625rem}.t-input code{overflow:hidden;white-space:nowrap}@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.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: TuiChevron, selector: "[tuiChevron]", inputs: ["tuiChevron"] }, { kind: "component", type: i2.TuiDataListWrapperComponent, selector: "tui-data-list-wrapper:not([labels]), tui-data-list-wrapper:not([labels])[new]", inputs: ["items", "disabledItemHandler", "emptyContent", "size", "itemContent"], outputs: ["itemClick"] }, { kind: "pipe", type: TuiDocTypeReferencePipe, name: "tuiDocTypeReference" }, { kind: "component", type: TuiIcon, selector: "tui-icon:not([tuiBadge])", inputs: ["background"] }, { kind: "directive", type: i3.TuiInputNumberDirective, selector: "input[tuiInputNumber]", inputs: ["prefix", "postfix", "min", "max"] }, { kind: "component", type: i3.TuiInputNumberStep, selector: "input[tuiInputNumber][step]", inputs: ["step"] }, { kind: "pipe", type: TuiInspectPipe, name: "tuiInspectAny" }, { kind: "directive", type: i3$1.TuiSelectDirective, selector: "input[tuiSelect]" }, { kind: "component", type: TuiSwitch, selector: "input[type=\"checkbox\"][tuiSwitch]", inputs: ["showIcons"] }, { kind: "component", type: i7.TuiTextfieldComponent, selector: "tui-textfield:not([multi])" }, { kind: "directive", type: i7.TuiTextfieldDirective, selector: "input[tuiTextfield]" }, { kind: "directive", type: i7.TuiTextfieldOptionsDirective, selector: "[tuiTextfieldAppearance],[tuiTextfieldSize],[tuiTextfieldCleaner]", inputs: ["tuiTextfieldAppearance", "tuiTextfieldSize", "tuiTextfieldCleaner"] }, { kind: "directive", type: i6.TuiDropdownContent, selector: "ng-template[tuiDropdown]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiDocAPIItem, decorators: [{
             type: Component,
@@ -242,18 +244,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                         TuiSelect,
                         TuiSwitch,
                         TuiTextfield,
-                    ], 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        @for (item of type | tuiDocTypeReference; track item) {\n            @if (item.reference) {\n                <a\n                    target=\"_blank\"\n                    class=\"t-reference\"\n                    [attr.href]=\"item.reference\"\n                >\n                    {{ item.type }}\n                    @if (icons.externalLink) {\n                        <tui-icon\n                            [icon]=\"icons.externalLink\"\n                            [style.font-size.rem]=\"1\"\n                        />\n                    }\n                </a>\n            } @else {\n                {{ item.type }}\n            }\n            @if (!$last) {\n                <span>&nbsp;|&nbsp;</span>\n            }\n        }\n    </code>\n</td>\n<td class=\"t-td\">\n    @if (items.length) {\n        <tui-textfield\n            tuiChevron\n            tuiTextfieldSize=\"m\"\n            class=\"t-input\"\n            [content]=\"content\"\n            [tuiTextfieldCleaner]=\"type.includes('null') || type.includes('PolymorpheusContent')\"\n        >\n            <input\n                tuiSelect\n                [ngModel]=\"value ?? null\"\n                (ngModelChange)=\"onValueChange($event)\"\n            />\n            <tui-data-list-wrapper\n                *tuiDropdown\n                new\n                [itemContent]=\"content\"\n                [items]=\"items\"\n            />\n        </tui-textfield>\n    } @else {\n        @if (value !== undefined) {\n            @switch (type) {\n                @case ('boolean') {\n                    <input\n                        tuiSwitch\n                        type=\"checkbox\"\n                        [id]=\"name\"\n                        [ngModel]=\"value\"\n                        (ngModelChange)=\"onValueChange($event)\"\n                    />\n                }\n                @case ('string') {\n                    <tui-textfield\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                @case ('number') {\n                    <tui-textfield tuiTextfieldSize=\"m\">\n                        <input\n                            tuiInputNumber\n                            [id]=\"name\"\n                            [max]=\"numberItem?.max ?? null\"\n                            [min]=\"numberItem?.min ?? null\"\n                            [ngModel]=\"value\"\n                            [step]=\"1\"\n                            (ngModelChange)=\"onValueChange($event || 0)\"\n                        />\n                    </tui-textfield>\n                }\n            }\n        }\n    }\n    <ng-template\n        #content\n        let-data\n    >\n        <code [style.margin]=\"0\">{{ data | tuiInspectAny }}</code>\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;min-inline-size:10rem}.t-name{display:flex!important;min-block-size:1.5rem;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:.1875rem}.t-input{min-inline-size:10rem;margin-block-start:-.625rem}.t-input code{overflow:hidden;white-space:nowrap}@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: [{
-                type: Input
-            }], value: [{
-                type: Input
-            }], items: [{
-                type: Input
-            }], valueChange: [{
-                type: Output
-            }] } });
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<td class=\"t-td\">\n    <code\n        class=\"t-name\"\n        [class.t-name_banana]=\"isBananaBox()\"\n        [class.t-name_input]=\"isInput()\"\n        [class.t-name_output]=\"isOutput()\"\n    >\n        {{ name() }}\n    </code>\n    <ng-content />\n</td>\n<td class=\"t-td\">\n    <code class=\"t-type\">\n        @for (item of type() | tuiDocTypeReference; track item) {\n            @if (item.reference) {\n                <a\n                    target=\"_blank\"\n                    class=\"t-reference\"\n                    [attr.href]=\"item.reference\"\n                >\n                    {{ item.type }}\n                    @if (icons.externalLink) {\n                        <tui-icon\n                            [icon]=\"icons.externalLink\"\n                            [style.font-size.rem]=\"1\"\n                        />\n                    }\n                </a>\n            } @else {\n                {{ item.type }}\n            }\n            @if (!$last) {\n                <span>&nbsp;|&nbsp;</span>\n            }\n        }\n    </code>\n</td>\n<td class=\"t-td\">\n    @if (items().length) {\n        <tui-textfield\n            tuiChevron\n            tuiTextfieldSize=\"m\"\n            class=\"t-input\"\n            [content]=\"content\"\n            [tuiTextfieldCleaner]=\"hasCleaner()\"\n        >\n            <input\n                tuiSelect\n                [ngModel]=\"value() ?? null\"\n                (ngModelChange)=\"onValueChange($event)\"\n            />\n            <tui-data-list-wrapper\n                *tuiDropdown\n                new\n                [itemContent]=\"content\"\n                [items]=\"items()\"\n            />\n        </tui-textfield>\n    } @else {\n        @if (value() !== undefined) {\n            @switch (type()) {\n                @case ('boolean') {\n                    <input\n                        tuiSwitch\n                        type=\"checkbox\"\n                        [id]=\"name()\"\n                        [ngModel]=\"value()\"\n                        (ngModelChange)=\"onValueChange($event)\"\n                    />\n                }\n                @case ('string') {\n                    <tui-textfield\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                @case ('number') {\n                    <tui-textfield tuiTextfieldSize=\"m\">\n                        <input\n                            tuiInputNumber\n                            [id]=\"name()\"\n                            [max]=\"numberItem?.max() ?? null\"\n                            [min]=\"numberItem?.min() ?? null\"\n                            [ngModel]=\"value()\"\n                            [step]=\"1\"\n                            (ngModelChange)=\"onValueChange($event || 0)\"\n                        />\n                    </tui-textfield>\n                }\n            }\n        }\n    }\n    <ng-template\n        #content\n        let-data\n    >\n        <code [style.margin]=\"0\">{{ data | tuiInspectAny }}</code>\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;min-inline-size:10rem}.t-name{display:flex!important;min-block-size:1.5rem;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:.1875rem}.t-input{min-inline-size:10rem;margin-block-start:-.625rem}.t-input code{overflow:hidden;white-space:nowrap}@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"] }]
+        }] });
 
 class TuiDocCode {
     constructor() {
@@ -266,26 +258,24 @@ class TuiDocCode {
         this.copyText = computed(() => this.texts()[0]);
         this.icon = toSignal(this.copy$.pipe(switchMap(() => timer(2000).pipe(map(() => this.icons.copy), startWith(this.icons.check)))), { initialValue: this.icons.copy });
         this.processor = toSignal(this.rawLoader$$.pipe(switchMap(tuiRawLoad), map((value) => this.markdownCodeProcessor(value))), { initialValue: [] });
-        this.filename = '';
+        this.filename = input('');
     }
     set code(code) {
         this.rawLoader$$.next(code);
     }
     get hasFilename() {
-        return !!this.filename;
+        return !!this.filename();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiDocCode, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: TuiDocCode, isStandalone: true, selector: "tui-doc-code", inputs: { filename: "filename", code: "code" }, host: { properties: { "style.visibility": "isServer ? \"hidden\" : \"visible\"", "class._has-filename": "hasFilename" } }, ngImport: i0, template: "@if (filename) {\n    <p class=\"t-header\">\n        {{ filename }}\n    </p>\n}\n@for (content of processor(); track content) {\n    <pre class=\"t-code\">\n    <code [lineNumbers]=\"true\" [highlight]=\"content\"></code>\n    <div class=\"t-code-actions\">\n      <button\n        tuiIconButton\n        type=\"button\"\n        appearance=\"outline-grayscale\"\n        size=\"s\"\n        class=\"t-copy-button\"\n        [iconStart]=\"icon()\"\n        [cdkCopyToClipboard]=\"content\"\n        (click)=\"copy$.next()\"\n        >\n        {{ copyText() }}\n      </button>\n      <ng-content />\n    </div>\n  </pre>\n}\n", styles: [":host{display:block}.t-header{font:var(--tui-font-text-s);font-weight:700}.t-header+.t-code{border-radius:.25rem}.t-code{position:relative;margin:0;white-space:normal;outline:1px solid var(--tui-border-normal)}.t-code ::ng-deep .hljs-ln{inline-size:100%}.t-code ::ng-deep .hljs-ln .hljs-ln-numbers{inline-size:1rem}.t-code ::ng-deep .hljs-ln td{white-space:pre}.t-code ::ng-deep .hljs-ln td:not(.hljs-ln-numbers):hover{outline:1px solid var(--tui-border-normal);border-radius:.25rem}.t-code+.t-code{margin-block-start:1rem}.t-code-actions{position:absolute;top:.75rem;right:.75rem;display:flex;justify-content:center;align-items:center;flex-direction:row-reverse}.t-copy-button::ng-deep+*:not(:empty){margin-inline-end:.375rem}.hljs:not(:empty){font:var(--tui-font-text-m);font-size:.875rem;padding:1.5rem 2rem;font-family:monospace;overflow-wrap:break-word;white-space:pre-wrap}@media all and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: .001dpcm){.hljs:not(:empty)::-webkit-scrollbar,.hljs:not(:empty)::-webkit-scrollbar-thumb{inline-size:1rem;block-size:1rem;border-radius:6.25rem;background-clip:padding-box;border:.375rem solid transparent}.hljs:not(:empty)::-webkit-scrollbar{background-color:transparent}.hljs:not(:empty)::-webkit-scrollbar-thumb{background-color:var(--tui-background-neutral-1-hover)}.hljs:not(:empty)::-webkit-scrollbar-thumb:hover{background-color:var(--tui-background-neutral-1-pressed)}.hljs:not(:empty)::-webkit-scrollbar-thumb:active{background-color:var(--tui-text-tertiary)}}@media screen and (max-width: 47.9625em){.hljs:not(:empty){padding:1rem}}.t-code-actions,.hljs:not(:empty){background:var(--tui-background-base)}@supports (background: color-mix(in srgb,var(--tui-background-base),#222 2%)){.t-code-actions,.hljs:not(:empty){background:color-mix(in srgb,var(--tui-background-base),#222 2%)}}\n"], dependencies: [{ kind: "ngmodule", type: ClipboardModule }, { kind: "directive", type: i1$1.CdkCopyToClipboard, selector: "[cdkCopyToClipboard]", inputs: ["cdkCopyToClipboard", "cdkCopyToClipboardAttempts"], outputs: ["cdkCopyToClipboardCopied"] }, { kind: "directive", type: Highlight, selector: "[highlight]", inputs: ["highlight", "languages", "lineNumbers"], outputs: ["highlighted"] }, { kind: "directive", type: TuiButton, selector: "a[tuiButton],button[tuiButton],a[tuiIconButton],button[tuiIconButton]", inputs: ["size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: TuiDocCode, isStandalone: true, selector: "tui-doc-code", inputs: { filename: { classPropertyName: "filename", publicName: "filename", isSignal: true, isRequired: false, transformFunction: null }, code: { classPropertyName: "code", publicName: "code", isSignal: false, isRequired: false, transformFunction: null } }, host: { properties: { "style.visibility": "isServer ? \"hidden\" : \"visible\"", "class._has-filename": "hasFilename" } }, ngImport: i0, template: "@if (filename()) {\n    <p class=\"t-header\">\n        {{ filename() }}\n    </p>\n}\n@for (content of processor(); track content) {\n    <pre class=\"t-code\">\n    <code [lineNumbers]=\"true\" [highlight]=\"content\"></code>\n    <div class=\"t-code-actions\">\n      <button\n        tuiIconButton\n        type=\"button\"\n        appearance=\"outline-grayscale\"\n        size=\"s\"\n        class=\"t-copy-button\"\n        [iconStart]=\"icon()\"\n        [cdkCopyToClipboard]=\"content\"\n        (click)=\"copy$.next()\"\n        >\n        {{ copyText() }}\n      </button>\n      <ng-content />\n    </div>\n  </pre>\n}\n", styles: [":host{display:block}.t-header{font:var(--tui-font-text-s);font-weight:700}.t-header+.t-code{border-radius:.25rem}.t-code{position:relative;margin:0;white-space:normal;outline:1px solid var(--tui-border-normal)}.t-code ::ng-deep .hljs-ln{inline-size:100%}.t-code ::ng-deep .hljs-ln .hljs-ln-numbers{inline-size:1rem}.t-code ::ng-deep .hljs-ln td{white-space:pre}.t-code ::ng-deep .hljs-ln td:not(.hljs-ln-numbers):hover{outline:1px solid var(--tui-border-normal);border-radius:.25rem}.t-code+.t-code{margin-block-start:1rem}.t-code-actions{position:absolute;top:.75rem;right:.75rem;display:flex;justify-content:center;align-items:center;flex-direction:row-reverse}.t-copy-button::ng-deep+*:not(:empty){margin-inline-end:.375rem}.hljs:not(:empty){font:var(--tui-font-text-m);font-size:.875rem;padding:1.5rem 2rem;font-family:monospace;overflow-wrap:break-word;white-space:pre-wrap}@media all and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: .001dpcm){.hljs:not(:empty)::-webkit-scrollbar,.hljs:not(:empty)::-webkit-scrollbar-thumb{inline-size:1rem;block-size:1rem;border-radius:6.25rem;background-clip:padding-box;border:.375rem solid transparent}.hljs:not(:empty)::-webkit-scrollbar{background-color:transparent}.hljs:not(:empty)::-webkit-scrollbar-thumb{background-color:var(--tui-background-neutral-1-hover)}.hljs:not(:empty)::-webkit-scrollbar-thumb:hover{background-color:var(--tui-background-neutral-1-pressed)}.hljs:not(:empty)::-webkit-scrollbar-thumb:active{background-color:var(--tui-text-tertiary)}}@media screen and (max-width: 47.9625em){.hljs:not(:empty){padding:1rem}}.t-code-actions,.hljs:not(:empty){background:var(--tui-background-base)}@supports (background: color-mix(in srgb,var(--tui-background-base),#222 2%)){.t-code-actions,.hljs:not(:empty){background:color-mix(in srgb,var(--tui-background-base),#222 2%)}}\n"], dependencies: [{ kind: "ngmodule", type: ClipboardModule }, { kind: "directive", type: i1$1.CdkCopyToClipboard, selector: "[cdkCopyToClipboard]", inputs: ["cdkCopyToClipboard", "cdkCopyToClipboardAttempts"], outputs: ["cdkCopyToClipboardCopied"] }, { kind: "directive", type: Highlight, selector: "[highlight]", inputs: ["highlight", "languages", "lineNumbers"], outputs: ["highlighted"] }, { kind: "directive", type: TuiButton, selector: "a[tuiButton],button[tuiButton],a[tuiIconButton],button[tuiIconButton]", inputs: ["size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiDocCode, decorators: [{
             type: Component,
             args: [{ selector: 'tui-doc-code', imports: [ClipboardModule, Highlight, TuiButton], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '[style.visibility]': 'isServer ? "hidden" : "visible"',
                         '[class._has-filename]': 'hasFilename',
-                    }, template: "@if (filename) {\n    <p class=\"t-header\">\n        {{ filename }}\n    </p>\n}\n@for (content of processor(); track content) {\n    <pre class=\"t-code\">\n    <code [lineNumbers]=\"true\" [highlight]=\"content\"></code>\n    <div class=\"t-code-actions\">\n      <button\n        tuiIconButton\n        type=\"button\"\n        appearance=\"outline-grayscale\"\n        size=\"s\"\n        class=\"t-copy-button\"\n        [iconStart]=\"icon()\"\n        [cdkCopyToClipboard]=\"content\"\n        (click)=\"copy$.next()\"\n        >\n        {{ copyText() }}\n      </button>\n      <ng-content />\n    </div>\n  </pre>\n}\n", styles: [":host{display:block}.t-header{font:var(--tui-font-text-s);font-weight:700}.t-header+.t-code{border-radius:.25rem}.t-code{position:relative;margin:0;white-space:normal;outline:1px solid var(--tui-border-normal)}.t-code ::ng-deep .hljs-ln{inline-size:100%}.t-code ::ng-deep .hljs-ln .hljs-ln-numbers{inline-size:1rem}.t-code ::ng-deep .hljs-ln td{white-space:pre}.t-code ::ng-deep .hljs-ln td:not(.hljs-ln-numbers):hover{outline:1px solid var(--tui-border-normal);border-radius:.25rem}.t-code+.t-code{margin-block-start:1rem}.t-code-actions{position:absolute;top:.75rem;right:.75rem;display:flex;justify-content:center;align-items:center;flex-direction:row-reverse}.t-copy-button::ng-deep+*:not(:empty){margin-inline-end:.375rem}.hljs:not(:empty){font:var(--tui-font-text-m);font-size:.875rem;padding:1.5rem 2rem;font-family:monospace;overflow-wrap:break-word;white-space:pre-wrap}@media all and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: .001dpcm){.hljs:not(:empty)::-webkit-scrollbar,.hljs:not(:empty)::-webkit-scrollbar-thumb{inline-size:1rem;block-size:1rem;border-radius:6.25rem;background-clip:padding-box;border:.375rem solid transparent}.hljs:not(:empty)::-webkit-scrollbar{background-color:transparent}.hljs:not(:empty)::-webkit-scrollbar-thumb{background-color:var(--tui-background-neutral-1-hover)}.hljs:not(:empty)::-webkit-scrollbar-thumb:hover{background-color:var(--tui-background-neutral-1-pressed)}.hljs:not(:empty)::-webkit-scrollbar-thumb:active{background-color:var(--tui-text-tertiary)}}@media screen and (max-width: 47.9625em){.hljs:not(:empty){padding:1rem}}.t-code-actions,.hljs:not(:empty){background:var(--tui-background-base)}@supports (background: color-mix(in srgb,var(--tui-background-base),#222 2%)){.t-code-actions,.hljs:not(:empty){background:color-mix(in srgb,var(--tui-background-base),#222 2%)}}\n"] }]
-        }], propDecorators: { filename: [{
-                type: Input
-            }], code: [{
+                    }, template: "@if (filename()) {\n    <p class=\"t-header\">\n        {{ filename() }}\n    </p>\n}\n@for (content of processor(); track content) {\n    <pre class=\"t-code\">\n    <code [lineNumbers]=\"true\" [highlight]=\"content\"></code>\n    <div class=\"t-code-actions\">\n      <button\n        tuiIconButton\n        type=\"button\"\n        appearance=\"outline-grayscale\"\n        size=\"s\"\n        class=\"t-copy-button\"\n        [iconStart]=\"icon()\"\n        [cdkCopyToClipboard]=\"content\"\n        (click)=\"copy$.next()\"\n        >\n        {{ copyText() }}\n      </button>\n      <ng-content />\n    </div>\n  </pre>\n}\n", styles: [":host{display:block}.t-header{font:var(--tui-font-text-s);font-weight:700}.t-header+.t-code{border-radius:.25rem}.t-code{position:relative;margin:0;white-space:normal;outline:1px solid var(--tui-border-normal)}.t-code ::ng-deep .hljs-ln{inline-size:100%}.t-code ::ng-deep .hljs-ln .hljs-ln-numbers{inline-size:1rem}.t-code ::ng-deep .hljs-ln td{white-space:pre}.t-code ::ng-deep .hljs-ln td:not(.hljs-ln-numbers):hover{outline:1px solid var(--tui-border-normal);border-radius:.25rem}.t-code+.t-code{margin-block-start:1rem}.t-code-actions{position:absolute;top:.75rem;right:.75rem;display:flex;justify-content:center;align-items:center;flex-direction:row-reverse}.t-copy-button::ng-deep+*:not(:empty){margin-inline-end:.375rem}.hljs:not(:empty){font:var(--tui-font-text-m);font-size:.875rem;padding:1.5rem 2rem;font-family:monospace;overflow-wrap:break-word;white-space:pre-wrap}@media all and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: .001dpcm){.hljs:not(:empty)::-webkit-scrollbar,.hljs:not(:empty)::-webkit-scrollbar-thumb{inline-size:1rem;block-size:1rem;border-radius:6.25rem;background-clip:padding-box;border:.375rem solid transparent}.hljs:not(:empty)::-webkit-scrollbar{background-color:transparent}.hljs:not(:empty)::-webkit-scrollbar-thumb{background-color:var(--tui-background-neutral-1-hover)}.hljs:not(:empty)::-webkit-scrollbar-thumb:hover{background-color:var(--tui-background-neutral-1-pressed)}.hljs:not(:empty)::-webkit-scrollbar-thumb:active{background-color:var(--tui-text-tertiary)}}@media screen and (max-width: 47.9625em){.hljs:not(:empty){padding:1rem}}.t-code-actions,.hljs:not(:empty){background:var(--tui-background-base)}@supports (background: color-mix(in srgb,var(--tui-background-base),#222 2%)){.t-code-actions,.hljs:not(:empty){background:color-mix(in srgb,var(--tui-background-base),#222 2%)}}\n"] }]
+        }], propDecorators: { code: [{
                 type: Input
             }] } });
 
@@ -328,8 +318,8 @@ class TuiDocDemo {
         this.expanded = tuiCoerceValueIsTrue(this.params.sandboxExpanded ?? false);
         this.sandboxWidth = tuiToInteger(this.params.sandboxWidth);
         this.texts = inject(TUI_DOC_DEMO_TEXTS);
-        this.control = null;
-        this.sticky = true;
+        this.control = input(null);
+        this.sticky = input(true);
     }
     ngAfterViewInit() {
         this.createForm();
@@ -392,16 +382,16 @@ class TuiDocDemo {
         this.locationRef.go(this.urlStateHandler(tree));
     }
     createForm() {
-        const { control, updateOn } = this;
+        const control = this.control();
         if (control) {
-            this.testForm = new FormGroup({ testValue: control }, { updateOn });
+            this.testForm = new FormGroup({ testValue: control }, { updateOn: this.updateOn });
         }
     }
     getUrlTree() {
         return this.urlSerializer.parse(this.locationRef.path());
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiDocDemo, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: TuiDocDemo, isStandalone: true, selector: "tui-doc-demo", inputs: { control: "control", sticky: "sticky" }, host: { listeners: { "window:resize": "onResize()", "document:mouseup.zoneless": "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    [style.visibility]=\"rendered() ? 'visible' : 'hidden'\"\n>\n    <div class=\"t-content\">\n        <div\n            #content\n            id=\"demo-content\"\n        >\n            @if (testForm) {\n                <form\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 tuiItem>\n                            <pre class=\"t-value\">Form data: {{ testForm.value | json }}</pre>\n                            <div\n                                tuiGroup\n                                class=\"t-form-controls\"\n                            >\n                                <tui-textfield\n                                    tuiChevron\n                                    tuiTextfieldSize=\"s\"\n                                    class=\"t-select\"\n                                    [tuiTextfieldCleaner]=\"false\"\n                                >\n                                    <input\n                                        automation-id=\"tui-demo-select__expand-update-on\"\n                                        tuiSelect\n                                        [ngModel]=\"updateOn\"\n                                        [ngModelOptions]=\"{standalone: true}\"\n                                        (ngModelChange)=\"updateOnChange($event)\"\n                                    />\n\n                                    <tui-data-list-wrapper\n                                        *tuiDropdown\n                                        new\n                                        [items]=\"updateOnVariants\"\n                                    />\n                                </tui-textfield>\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            }\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;font:var(--tui-font-text-s)}.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-block-end:.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-inline-start: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-inline-start:.75rem}.t-button,.t-form-controls{margin-block-start:.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.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.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: 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]), tui-data-list-wrapper:not([labels])[new]", inputs: ["items", "disabledItemHandler", "emptyContent", "size", "itemContent"], outputs: ["itemClick"] }, { kind: "component", type: TuiExpand, selector: "tui-expand", inputs: ["expanded"] }, { kind: "directive", type: TuiGroup, selector: "[tuiGroup]:not(ng-container)", inputs: ["orientation", "collapsed", "rounded", "size"] }, { kind: "directive", type: TuiItem, selector: "[tuiItem]" }, { kind: "directive", type: TuiResizable, selector: "[tuiResizable]" }, { kind: "directive", type: TuiResizer, selector: "[tuiResizer]", inputs: ["tuiResizer"], outputs: ["tuiSizeChange"] }, { kind: "directive", type: i3$1.TuiSelectDirective, selector: "input[tuiSelect]" }, { kind: "component", type: TuiSwitch, selector: "input[type=\"checkbox\"][tuiSwitch]", inputs: ["showIcons"] }, { kind: "component", type: i7.TuiTextfieldComponent, selector: "tui-textfield:not([multi])" }, { kind: "directive", type: i7.TuiTextfieldOptionsDirective, selector: "[tuiTextfieldAppearance],[tuiTextfieldSize],[tuiTextfieldCleaner]", inputs: ["tuiTextfieldAppearance", "tuiTextfieldSize", "tuiTextfieldCleaner"] }, { kind: "directive", type: i6.TuiDropdownContent, selector: "ng-template[tuiDropdown]" }, { kind: "ngmodule", type: TuiTextfieldControllerModule }, { kind: "directive", type: i8.TuiTextfieldCleanerDirective, selector: "[tuiTextfieldCleaner]", inputs: ["tuiTextfieldCleaner"] }, { kind: "directive", type: i8.TuiTextfieldSizeDirective, selector: "[tuiTextfieldSize]", inputs: ["tuiTextfieldSize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: TuiDocDemo, isStandalone: true, selector: "tui-doc-demo", inputs: { control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: false, transformFunction: null }, sticky: { classPropertyName: "sticky", publicName: "sticky", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "window:resize": "onResize()", "document:mouseup.zoneless": "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    [style.visibility]=\"rendered() ? 'visible' : 'hidden'\"\n>\n    <div class=\"t-content\">\n        <div\n            #content\n            id=\"demo-content\"\n        >\n            @if (testForm) {\n                <form\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 tuiItem>\n                            <pre class=\"t-value\">Form data: {{ testForm.value | json }}</pre>\n                            <div\n                                tuiGroup\n                                class=\"t-form-controls\"\n                            >\n                                <tui-textfield\n                                    tuiChevron\n                                    tuiTextfieldSize=\"s\"\n                                    class=\"t-select\"\n                                    [tuiTextfieldCleaner]=\"false\"\n                                >\n                                    <input\n                                        automation-id=\"tui-demo-select__expand-update-on\"\n                                        tuiSelect\n                                        [ngModel]=\"updateOn\"\n                                        [ngModelOptions]=\"{standalone: true}\"\n                                        (ngModelChange)=\"updateOnChange($event)\"\n                                    />\n\n                                    <tui-data-list-wrapper\n                                        *tuiDropdown\n                                        new\n                                        [items]=\"updateOnVariants\"\n                                    />\n                                </tui-textfield>\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            }\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;font:var(--tui-font-text-s)}.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-block-end:.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-inline-start: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-inline-start:.75rem}.t-button,.t-form-controls{margin-block-start:.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.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.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: 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]), tui-data-list-wrapper:not([labels])[new]", inputs: ["items", "disabledItemHandler", "emptyContent", "size", "itemContent"], outputs: ["itemClick"] }, { kind: "component", type: TuiExpand, selector: "tui-expand", inputs: ["expanded"] }, { kind: "directive", type: TuiGroup, selector: "[tuiGroup]:not(ng-container)", inputs: ["orientation", "collapsed", "rounded", "size"] }, { kind: "directive", type: TuiItem, selector: "[tuiItem]" }, { kind: "directive", type: TuiResizable, selector: "[tuiResizable]" }, { kind: "directive", type: TuiResizer, selector: "[tuiResizer]", inputs: ["tuiResizer"], outputs: ["tuiSizeChange"] }, { kind: "directive", type: i3$1.TuiSelectDirective, selector: "input[tuiSelect]" }, { kind: "component", type: TuiSwitch, selector: "input[type=\"checkbox\"][tuiSwitch]", inputs: ["showIcons"] }, { kind: "component", type: i7.TuiTextfieldComponent, selector: "tui-textfield:not([multi])" }, { kind: "directive", type: i7.TuiTextfieldOptionsDirective, selector: "[tuiTextfieldAppearance],[tuiTextfieldSize],[tuiTextfieldCleaner]", inputs: ["tuiTextfieldAppearance", "tuiTextfieldSize", "tuiTextfieldCleaner"] }, { kind: "directive", type: i6.TuiDropdownContent, selector: "ng-template[tuiDropdown]" }, { kind: "ngmodule", type: TuiTextfieldControllerModule }, { kind: "directive", type: i8.TuiTextfieldCleanerDirective, selector: "[tuiTextfieldCleaner]", inputs: ["tuiTextfieldCleaner"] }, { kind: "directive", type: i8.TuiTextfieldSizeDirective, selector: "[tuiTextfieldSize]", inputs: ["tuiTextfieldSize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 __decorate([
     tuiPure
@@ -426,7 +416,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                         TuiTextfield,
                         TuiTextfieldControllerModule,
                     ], changeDetection: ChangeDetectionStrategy.OnPush, host: {
-                        '[class._sticky]': 'sticky',
+                        '[class._sticky]': 'sticky()',
                         '(window:resize)': 'onResize()',
                         '(document:mouseup.zoneless)': '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]=\"theme()\"\n    [class.t-wrapper_transparent]=\"!opaque\"\n    [style.visibility]=\"rendered() ? 'visible' : 'hidden'\"\n>\n    <div class=\"t-content\">\n        <div\n            #content\n            id=\"demo-content\"\n        >\n            @if (testForm) {\n                <form\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 tuiItem>\n                            <pre class=\"t-value\">Form data: {{ testForm.value | json }}</pre>\n                            <div\n                                tuiGroup\n                                class=\"t-form-controls\"\n                            >\n                                <tui-textfield\n                                    tuiChevron\n                                    tuiTextfieldSize=\"s\"\n                                    class=\"t-select\"\n                                    [tuiTextfieldCleaner]=\"false\"\n                                >\n                                    <input\n                                        automation-id=\"tui-demo-select__expand-update-on\"\n                                        tuiSelect\n                                        [ngModel]=\"updateOn\"\n                                        [ngModelOptions]=\"{standalone: true}\"\n                                        (ngModelChange)=\"updateOnChange($event)\"\n                                    />\n\n                                    <tui-data-list-wrapper\n                                        *tuiDropdown\n                                        new\n                                        [items]=\"updateOnVariants\"\n                                    />\n                                </tui-textfield>\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            }\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;font:var(--tui-font-text-s)}.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-block-end:.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-inline-start: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-inline-start:.75rem}.t-button,.t-form-controls{margin-block-start:.75rem}@supports (position: sticky){@media screen and (min-height: 37.5rem){:host._sticky{position:sticky;top:4.625rem;z-index:2}}}\n"] }]
@@ -442,25 +432,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
             }], template: [{
                 type: ContentChild,
                 args: [TemplateRef]
-            }], control: [{
-                type: Input
-            }], sticky: [{
-                type: Input
             }], updateUrl: [] } });
 
 class TuiDocTab {
     constructor() {
-        this.src = '';
+        this.src = input('');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiDocTab, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: TuiDocTab, isStandalone: true, selector: "tui-doc-tab", inputs: { src: "src" }, ngImport: i0, template: "<div class=\"t-tab\">\n    <img\n        alt=\"Documentation tab icon\"\n        class=\"t-icon\"\n        [src]=\"src\"\n    />\n    <ng-content />\n</div>\n", styles: [".t-tab{display:flex;align-items:center;justify-content:center;padding:0 .5rem;gap:.5rem;color:var(--tui-text-primary)}.t-tab .t-icon{inline-size:1rem;block-size:1rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.15", type: TuiDocTab, isStandalone: true, selector: "tui-doc-tab", inputs: { src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"t-tab\">\n    <img\n        alt=\"Documentation tab icon\"\n        class=\"t-icon\"\n        [src]=\"src()\"\n    />\n    <ng-content />\n</div>\n", styles: [".t-tab{display:flex;align-items:center;justify-content:center;padding:0 .5rem;gap:.5rem;color:var(--tui-text-primary)}.t-tab .t-icon{inline-size:1rem;block-size:1rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiDocTab, decorators: [{
             type: Component,
-            args: [{ selector: 'tui-doc-tab', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"t-tab\">\n    <img\n        alt=\"Documentation tab icon\"\n        class=\"t-icon\"\n        [src]=\"src\"\n    />\n    <ng-content />\n</div>\n", styles: [".t-tab{display:flex;align-items:center;justify-content:center;padding:0 .5rem;gap:.5rem;color:var(--tui-text-primary)}.t-tab .t-icon{inline-size:1rem;block-size:1rem}\n"] }]
-        }], propDecorators: { src: [{
-                type: Input
-            }] } });
+            args: [{ selector: 'tui-doc-tab', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"t-tab\">\n    <img\n        alt=\"Documentation tab icon\"\n        class=\"t-icon\"\n        [src]=\"src()\"\n    />\n    <ng-content />\n</div>\n", styles: [".t-tab{display:flex;align-items:center;justify-content:center;padding:0 .5rem;gap:.5rem;color:var(--tui-text-primary)}.t-tab .t-icon{inline-size:1rem;block-size:1rem}\n"] }]
+        }] });
 
 const SERIALIZED_SUFFIX = '$';
 // @bad TODO: refactor output and value sync
@@ -471,33 +455,33 @@ class TuiDocDocumentationPropertyConnector {
         this.urlSerializer = inject(UrlSerializer);
         this.urlStateHandler = inject(TUI_DOC_URL_STATE_HANDLER);
         this.alerts = inject(TuiAlertService);
-        this.documentationPropertyName = '';
-        this.documentationPropertyMode = null;
-        this.documentationPropertyType = '';
-        this.documentationPropertyDeprecated = false;
-        this.documentationPropertyValues = null;
-        this.documentationPropertyValueChange = new EventEmitter();
+        this.documentationPropertyName = input('');
+        this.documentationPropertyMode = input(null);
+        this.documentationPropertyType = input('');
+        this.documentationPropertyValue = model();
+        this.documentationPropertyDeprecated = input(false);
+        this.documentationPropertyValues = input(null);
         this.changed$ = new Subject();
         this.emits = signal(1);
         this.template = inject(TemplateRef);
-    }
-    get attrName() {
-        switch (this.documentationPropertyMode) {
-            case 'input':
-                return `[${this.documentationPropertyName}]`;
-            case 'input-output':
-                return `[(${this.documentationPropertyName})]`;
-            case 'output':
-                return `(${this.documentationPropertyName})`;
-            default:
-                return this.documentationPropertyName;
-        }
+        this.attrName = computed(() => {
+            switch (this.documentationPropertyMode()) {
+                case 'input':
+                    return `[${this.documentationPropertyName()}]`;
+                case 'input-output':
+                    return `[(${this.documentationPropertyName()})]`;
+                case 'output':
+                    return `(${this.documentationPropertyName()})`;
+                default:
+                    return this.documentationPropertyName();
+            }
+        });
     }
     get shouldShowValues() {
-        return this.documentationPropertyMode !== 'output';
+        return this.documentationPropertyMode() !== 'output';
     }
     get hasItems() {
-        return !!this.documentationPropertyValues;
+        return !!this.documentationPropertyValues();
     }
     ngOnInit() {
         this.parseParams(this.activatedRoute.snapshot.queryParams);
@@ -506,30 +490,30 @@ class TuiDocDocumentationPropertyConnector {
         this.changed$.next();
     }
     onValueChange(value) {
-        this.documentationPropertyValue = value;
-        this.documentationPropertyValueChange.emit(value);
+        this.documentationPropertyValue.set(value);
         this.setQueryParam(value);
     }
     emitEvent(event) {
         // For more convenient debugging
-        console.info(this.attrName, event);
+        console.info(this.attrName(), event);
         this.emits.update((x) => ++x);
         let content;
         if (event !== undefined) {
             content = tuiInspectAny(event, 2);
         }
-        this.alerts.open(content, { label: this.attrName }).subscribe();
+        this.alerts.open(content, { label: this.attrName() }).subscribe();
     }
     parseParams(params) {
-        const propertyValue = params[this.documentationPropertyName];
-        const propertyValueWithSuffix = params[`${this.documentationPropertyName}${SERIALIZED_SUFFIX}`];
+        const propertyValue = params[this.documentationPropertyName()];
+        const propertyValueWithSuffix = params[`${this.documentationPropertyName()}${SERIALIZED_SUFFIX}`];
         if (!propertyValue && !propertyValueWithSuffix) {
             return;
         }
-        let value = !!propertyValueWithSuffix && this.documentationPropertyValues
-            ? this.documentationPropertyValues[propertyValueWithSuffix]
+        const documentationPropertyValues = this.documentationPropertyValues();
+        let value = !!propertyValueWithSuffix && documentationPropertyValues
+            ? documentationPropertyValues[propertyValueWithSuffix]
             : tuiCoerceValue(propertyValue);
-        if (this.documentationPropertyType === 'string' && tuiIsNumber(value)) {
+        if (this.documentationPropertyType() === 'string' && tuiIsNumber(value)) {
             value = value.toString();
         }
         this.onValueChange(value);
@@ -537,10 +521,11 @@ class TuiDocDocumentationPropertyConnector {
     setQueryParam(value) {
         const tree = this.urlSerializer.parse(this.locationRef.path());
         const isValueAvailableByKey = value instanceof Object;
-        const name = this.documentationPropertyName;
+        const name = this.documentationPropertyName();
         const nameWithSuffix = `${name}${SERIALIZED_SUFFIX}`;
-        const computedValue = isValueAvailableByKey && this.documentationPropertyValues
-            ? this.documentationPropertyValues.indexOf(value)
+        const documentationPropertyValues = this.documentationPropertyValues();
+        const computedValue = isValueAvailableByKey && documentationPropertyValues
+            ? documentationPropertyValues.indexOf(value)
             : value;
         tree.queryParams = tuiCleanObject({
             ...tree.queryParams,
@@ -561,7 +546,7 @@ class TuiDocDocumentationPropertyConnector {
         this.locationRef.go(this.urlStateHandler(tree));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiDocDocumentationPropertyConnector, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.15", type: TuiDocDocumentationPropertyConnector, isStandalone: true, selector: "ng-template[documentationPropertyName]", inputs: { documentationPropertyName: "documentationPropertyName", documentationPropertyMode: "documentationPropertyMode", documentationPropertyType: "documentationPropertyType", documentationPropertyValue: "documentationPropertyValue", documentationPropertyDeprecated: "documentationPropertyDeprecated", documentationPropertyValues: "documentationPropertyValues" }, outputs: { documentationPropertyValueChange: "documentationPropertyValueChange" }, exportAs: ["documentationProperty"], usesOnChanges: true, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.15", type: TuiDocDocumentationPropertyConnector, isStandalone: true, selector: "ng-template[documentationPropertyName]", inputs: { documentationPropertyName: { classPropertyName: "documentationPropertyName", publicName: "documentationPropertyName", isSignal: true, isRequired: false, transformFunction: null }, documentationPropertyMode: { classPropertyName: "documentationPropertyMode", publicName: "documentationPropertyMode", isSignal: true, isRequired: false, transformFunction: null }, documentationPropertyType: { classPropertyName: "documentationPropertyType", publicName: "documentationPropertyType", isSignal: true, isRequired: false, transformFunction: null }, documentationPropertyValue: { classPropertyName: "documentationPropertyValue", publicName: "documentationPropertyValue", isSignal: true, isRequired: false, transformFunction: null }, documentationPropertyDeprecated: { classPropertyName: "documentationPropertyDeprecated", publicName: "documentationPropertyDeprecated", isSignal: true, isRequired: false, transformFunction: null }, documentationPropertyValues: { classPropertyName: "documentationPropertyValues", publicName: "documentationPropertyValues", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { documentationPropertyValue: "documentationPropertyValueChange" }, exportAs: ["documentationProperty"], usesOnChanges: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiDocDocumentationPropertyConnector, decorators: [{
             type: Directive,
@@ -569,21 +554,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                     selector: 'ng-template[documentationPropertyName]',
                     exportAs: 'documentationProperty',
                 }]
-        }], propDecorators: { documentationPropertyName: [{
-                type: Input
-            }], documentationPropertyMode: [{
-                type: Input
-            }], documentationPropertyType: [{
-                type: Input
-            }], documentationPropertyValue: [{
-                type: Input
-            }], documentationPropertyDeprecated: [{
-                type: Input
-            }], documentationPropertyValues: [{
-                type: Input
-            }], documentationPropertyValueChange: [{
-                type: Output
-            }] } });
+        }] });
 
 class TuiShowCleanerPipe {
     transform(type) {
@@ -637,21 +608,19 @@ class TuiDocDocumentation {
         this.texts = inject(TUI_DOC_DOCUMENTATION_TEXTS);
         this.excludedProperties = inject(TUI_DOC_EXCLUDED_PROPERTIES);
         this.activeItemIndex = 0;
-        this.heading = '';
-        this.showValues = true;
-        this.isAPI = false;
-        this.matcher = (item, exclusions) => !exclusions.has(item.documentationPropertyName);
+        this.type = computed(([argument, type] = this.texts) => this.isAPI() ? argument : type);
+        this.heading = input('');
+        this.showValues = input(true);
+        this.isAPI = input(false);
+        this.matcher = (item, exclusions) => !exclusions.has(item.documentationPropertyName());
     }
     ngAfterContentInit() {
         tuiQueryListChanges(this.propertiesConnectors)
             .pipe(switchMap((items) => merge(...items.map(({ changed$ }) => changed$))), tuiWatch(this.cdr), takeUntilDestroyed(this.destroyRef))
             .subscribe();
     }
-    get type() {
-        return this.isAPI ? this.texts[0] : this.texts[1];
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiDocDocumentation, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: TuiDocDocumentation, isStandalone: true, selector: "tui-doc-documentation", inputs: { heading: "heading", showValues: "showValues", isAPI: "isAPI" }, providers: [tuiScrollbarOptionsProvider({ mode: 'hover' })], queries: [{ propertyName: "propertiesConnectors", predicate: TuiDocDocumentationPropertyConnector }], ngImport: i0, template: "@if (heading) {\n    <h1 class=\"t-heading\">\n        {{ heading }}\n    </h1>\n}\n<ng-content />\n@if (propertiesConnectors | tuiToArray | tuiFilter: matcher : excludedProperties; as properties) {\n    @if (properties.length) {\n        <table class=\"t-table\">\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                @if (showValues && !isAPI) {\n                    <th class=\"t-th t-cell t-th_value\">\n                        {{ texts[3] }}\n                    </th>\n                }\n            </tr>\n            @for (propertyConnector of properties; track propertyConnector) {\n                <tr\n                    class=\"t-row\"\n                    [class.t-deprecated]=\"propertyConnector.documentationPropertyDeprecated\"\n                >\n                    <td class=\"t-cell t-no-overflow\">\n                        <div\n                            automation-id=\"tui-documentation__property-name\"\n                            class=\"t-property t-additional-info\"\n                        >\n                            @if (propertyConnector.attrName) {\n                                <code\n                                    class=\"t-property-code\"\n                                    [style.color]=\"'var(--tui-background-accent-2-pressed)'\"\n                                >\n                                    {{ propertyConnector.attrName | tuiStripOptionalPipe }}\n                                </code>\n                            }\n                            @if (propertyConnector.attrName | tuiIsOptionalPipe) {\n                                <tui-badge\n                                    appearance=\"neutral\"\n                                    size=\"s\"\n                                >\n                                    Optional\n                                </tui-badge>\n                            }\n                            @if (propertyConnector.documentationPropertyDeprecated) {\n                                <tui-badge\n                                    appearance=\"negative\"\n                                    size=\"s\"\n                                >\n                                    Deprecated\n                                </tui-badge>\n                            }\n                        </div>\n                        <ng-container [ngTemplateOutlet]=\"propertyConnector.template\" />\n                    </td>\n                    <td class=\"t-cell t-no-overflow\">\n                        <span class=\"type\">\n                            <code class=\"t-code-type\">\n                                @for (\n                                    item of propertyConnector.documentationPropertyType | tuiDocTypeReference;\n                                    track item;\n                                    let last = $last\n                                ) {\n                                    @if (item.reference) {\n                                        <a\n                                            target=\"_blank\"\n                                            class=\"t-code-reference\"\n                                            [attr.href]=\"item.reference\"\n                                        >\n                                            {{ item.type }}\n                                        </a>\n                                    } @else {\n                                        {{ item.type }}\n                                    }\n                                    @if (!last) {\n                                        <span>&nbsp;|&nbsp;</span>\n                                    }\n                                }\n                            </code>\n                        </span>\n                    </td>\n                    @if (showValues) {\n                        <td class=\"t-cell t-cell_value\">\n                            @if (propertyConnector.shouldShowValues) {\n                                @if (propertyConnector.hasItems) {\n                                    <tui-select\n                                        tuiDropdownLimitWidth=\"min\"\n                                        tuiTextfieldSize=\"m\"\n                                        [nativeId]=\"propertyConnector.attrName\"\n                                        [ngModel]=\"propertyConnector.documentationPropertyValue\"\n                                        [tuiTextfieldCleaner]=\"\n                                            propertyConnector.documentationPropertyType | tuiShowCleanerPipe\n                                        \"\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                                            class=\"t-data-list\"\n                                            [itemContent]=\"selectContent\"\n                                            [items]=\"propertyConnector.documentationPropertyValues\"\n                                        />\n                                    </tui-select>\n                                } @else {\n                                    @switch (propertyConnector.documentationPropertyType) {\n                                        @case ('boolean') {\n                                            <input\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                                        @case ('string') {\n                                            <tui-textfield tuiTextfieldSize=\"m\">\n                                                <input\n                                                    tuiTextfield\n                                                    [id]=\"propertyConnector.attrName\"\n                                                    [ngModel]=\"propertyConnector.documentationPropertyValue || ''\"\n                                                    (ngModelChange)=\"propertyConnector.onValueChange($event)\"\n                                                />\n                                            </tui-textfield>\n                                        }\n                                        @case ('number') {\n                                            <tui-textfield tuiTextfieldSize=\"m\">\n                                                <input\n                                                    tuiInputNumber\n                                                    [id]=\"propertyConnector.attrName\"\n                                                    [ngModel]=\"propertyConnector.documentationPropertyValue\"\n                                                    [step]=\"1\"\n                                                    (ngModelChange)=\"propertyConnector.onValueChange($event || 0)\"\n                                                />\n                                            </tui-textfield>\n                                        }\n                                    }\n                                }\n                                <ng-template\n                                    #selectContent\n                                    let-data\n                                >\n                                    <code>{{ data | tuiInspectAny }}</code>\n                                </ng-template>\n                            } @else {\n                                <tui-notification\n                                    class=\"t-output\"\n                                    [@emitEvent]=\"propertyConnector.emits()\"\n                                >\n                                    Emit!\n                                </tui-notification>\n                            }\n                        </td>\n                    }\n                </tr>\n            }\n        </table>\n    }\n}\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-inline-start:0}.t-cell:last-child{padding-inline-end: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-block-end:.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-inline-end:.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: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:.1875rem}.t-code-reference:after{content:\"\";font-size:1rem;inline-size:1rem;block-size:1rem;background:currentColor;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-inline-start:auto}}.t-data-list{overflow-wrap:anywhere}@media not screen and (max-width: 47.9625em){.t-data-list{max-inline-size:22.5rem}}.t-no-overflow{overflow:hidden!important}\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.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: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: TuiBadge, selector: "tui-badge,[tuiBadge],tui-icon[tuiBadge]", inputs: ["size"] }, { kind: "component", type: i2.TuiDataListWrapperComponent, selector: "tui-data-list-wrapper:not([labels]), tui-data-list-wrapper:not([labels])[new]", inputs: ["items", "disabledItemHandler", "emptyContent", "size", "itemContent"], outputs: ["itemClick"] }, { kind: "directive", type: i3$2.TuiDataListDirective, selector: "ng-template[tuiDataList]" }, { kind: "pipe", type: TuiDocTypeReferencePipe, name: "tuiDocTypeReference" }, { kind: "directive", type: i6.TuiDropdownOptionsDirective, selector: "[tuiDropdownAlign], [tuiDropdownAppearance], [tuiDropdownDirection], [tuiDropdownLimitWidth], [tuiDropdownMinHeight], [tuiDropdownMaxHeight], [tuiDropdownOffset]", inputs: ["tuiDropdownAlign", "tuiDropdownAppearance", "tuiDropdownDirection", "tuiDropdownLimitWidth", "tuiDropdownMinHeight", "tuiDropdownMaxHeight", "tuiDropdownOffset"] }, { kind: "pipe", type: TuiFilterPipe, name: "tuiFilter" }, { kind: "directive", type: i3.TuiInputNumberDirective, selector: "input[tuiInputNumber]", inputs: ["prefix", "postfix", "min", "max"] }, { kind: "component", type: i3.TuiInputNumberStep, selector: "input[tuiInputNumber][step]", inputs: ["step"] }, { kind: "pipe", type: TuiInspectPipe, name: "tuiInspectAny" }, { kind: "pipe", type: TuiIsOptionalPipe, name: "tuiIsOptionalPipe" }, { kind: "directive", type: TuiNotification, selector: "tui-notification,[tuiNotification]", inputs: ["appearance", "size", "icon"] }, { kind: "ngmodule", type: TuiSelectModule }, { kind: "component", type: i6$1.TuiSelectComponent, selector: "tui-select", inputs: ["stringify", "identityMatcher", "valueContent"] }, { kind: "directive", type: i6$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: ["showIcons"] }, { kind: "component", type: i7.TuiTextfieldComponent, selector: "tui-textfield:not([multi])" }, { kind: "directive", type: i7.TuiTextfieldDirective, selector: "input[tuiTextfield]" }, { kind: "directive", type: i7.TuiTextfieldOptionsDirective, selector: "[tuiTextfieldAppearance],[tuiTextfieldSize],[tuiTextfieldCleaner]", inputs: ["tuiTextfieldAppearance", "tuiTextfieldSize", "tuiTextfieldCleaner"] }, { kind: "ngmodule", type: TuiTextfieldControllerModule }, { kind: "directive", type: i8.TuiTextfieldCleanerDirective, selector: "[tuiTextfieldCleaner]", inputs: ["tuiTextfieldCleaner"] }, { kind: "directive", type: i8.TuiTextfieldLabelOutsideDirective, selector: "[tuiTextfieldLabelOutside]", inputs: ["tuiTextfieldLabelOutside"] }, { kind: "directive", type: i8.TuiTextfieldSizeDirective, selector: "[tuiTextfieldSize]", inputs: ["tuiTextfieldSize"] }, { kind: "pipe", type: TuiToArrayPipe, name: "tuiToArray" }], animations: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: TuiDocDocumentation, isStandalone: true, selector: "tui-doc-documentation", inputs: { heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: false, transformFunction: null }, showValues: { classPropertyName: "showValues", publicName: "showValues", isSignal: true, isRequired: false, transformFunction: null }, isAPI: { classPropertyName: "isAPI", publicName: "isAPI", isSignal: true, isRequired: false, transformFunction: null } }, providers: [tuiScrollbarOptionsProvider({ mode: 'hover' })], queries: [{ propertyName: "propertiesConnectors", predicate: TuiDocDocumentationPropertyConnector }], ngImport: i0, template: "@if (heading()) {\n    <h1 class=\"t-heading\">\n        {{ heading() }}\n    </h1>\n}\n<ng-content />\n@if (propertiesConnectors | tuiToArray | tuiFilter: matcher : excludedProperties; as properties) {\n    @if (properties.length) {\n        <table class=\"t-table\">\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                @if (showValues() && !isAPI()) {\n                    <th class=\"t-th t-cell t-th_value\">\n                        {{ texts[3] }}\n                    </th>\n                }\n            </tr>\n            @for (propertyConnector of properties; track propertyConnector) {\n                <tr\n                    class=\"t-row\"\n                    [class.t-deprecated]=\"propertyConnector.documentationPropertyDeprecated()\"\n                >\n                    <td class=\"t-cell t-no-overflow\">\n                        <div\n                            automation-id=\"tui-documentation__property-name\"\n                            class=\"t-property t-additional-info\"\n                        >\n                            @if (propertyConnector.attrName()) {\n                                <code\n                                    class=\"t-property-code\"\n                                    [style.color]=\"'var(--tui-background-accent-2-pressed)'\"\n                                >\n                                    {{ propertyConnector.attrName() | tuiStripOptionalPipe }}\n                                </code>\n                            }\n                            @if (propertyConnector.attrName() | tuiIsOptionalPipe) {\n                                <tui-badge\n                                    appearance=\"neutral\"\n                                    size=\"s\"\n                                >\n                                    Optional\n                                </tui-badge>\n                            }\n                            @if (propertyConnector.documentationPropertyDeprecated()) {\n                                <tui-badge\n                                    appearance=\"negative\"\n                                    size=\"s\"\n                                >\n                                    Deprecated\n                                </tui-badge>\n                            }\n                        </div>\n                        <ng-container [ngTemplateOutlet]=\"propertyConnector.template\" />\n                    </td>\n                    <td class=\"t-cell t-no-overflow\">\n                        <span class=\"type\">\n                            <code class=\"t-code-type\">\n                                @for (\n                                    item of propertyConnector.documentationPropertyType() | tuiDocTypeReference;\n                                    track item;\n                                    let last = $last\n                                ) {\n                                    @if (item.reference) {\n                                        <a\n                                            target=\"_blank\"\n                                            class=\"t-code-reference\"\n                                            [attr.href]=\"item.reference\"\n                                        >\n                                            {{ item.type }}\n                                        </a>\n                                    } @else {\n                                        {{ item.type }}\n                                    }\n                                    @if (!last) {\n                                        <span>&nbsp;|&nbsp;</span>\n                                    }\n                                }\n                            </code>\n                        </span>\n                    </td>\n                    @if (showValues()) {\n                        <td class=\"t-cell t-cell_value\">\n                            @if (propertyConnector.shouldShowValues) {\n                                @if (propertyConnector.hasItems) {\n                                    <tui-select\n                                        tuiDropdownLimitWidth=\"min\"\n                                        tuiTextfieldSize=\"m\"\n                                        [nativeId]=\"propertyConnector.attrName()\"\n                                        [ngModel]=\"propertyConnector.documentationPropertyValue()\"\n                                        [tuiTextfieldCleaner]=\"\n                                            propertyConnector.documentationPropertyType() | tuiShowCleanerPipe\n                                        \"\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                                            class=\"t-data-list\"\n                                            [itemContent]=\"selectContent\"\n                                            [items]=\"propertyConnector.documentationPropertyValues()\"\n                                        />\n                                    </tui-select>\n                                } @else {\n                                    @switch (propertyConnector.documentationPropertyType()) {\n                                        @case ('boolean') {\n                                            <input\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                                        @case ('string') {\n                                            <tui-textfield tuiTextfieldSize=\"m\">\n                                                <input\n                                                    tuiTextfield\n                                                    [id]=\"propertyConnector.attrName()\"\n                                                    [ngModel]=\"propertyConnector.documentationPropertyValue() || ''\"\n                                                    (ngModelChange)=\"propertyConnector.onValueChange($event)\"\n                                                />\n                                            </tui-textfield>\n                                        }\n                                        @case ('number') {\n                                            <tui-textfield tuiTextfieldSize=\"m\">\n                                                <input\n                                                    tuiInputNumber\n                                                    [id]=\"propertyConnector.attrName()\"\n                                                    [ngModel]=\"propertyConnector.documentationPropertyValue()\"\n                                                    [step]=\"1\"\n                                                    (ngModelChange)=\"propertyConnector.onValueChange($event || 0)\"\n                                                />\n                                            </tui-textfield>\n                                        }\n                                    }\n                                }\n                                <ng-template\n                                    #selectContent\n                                    let-data\n                                >\n                                    <code>{{ data | tuiInspectAny }}</code>\n                                </ng-template>\n                            } @else {\n                                <tui-notification\n                                    class=\"t-output\"\n                                    [@emitEvent]=\"propertyConnector.emits()\"\n                                >\n                                    Emit!\n                                </tui-notification>\n                            }\n                        </td>\n                    }\n                </tr>\n            }\n        </table>\n    }\n}\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-inline-start:0}.t-cell:last-child{padding-inline-end: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-block-end:.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-inline-end:.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: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:.1875rem}.t-code-reference:after{content:\"\";font-size:1rem;inline-size:1rem;block-size:1rem;background:currentColor;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-inline-start:auto}}.t-data-list{overflow-wrap:anywhere}@media not screen and (max-width: 47.9625em){.t-data-list{max-inline-size:22.5rem}}.t-no-overflow{overflow:hidden!important}\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.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: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: TuiBadge, selector: "tui-badge,[tuiBadge],tui-icon[tuiBadge]", inputs: ["size"] }, { kind: "component", type: i2.TuiDataListWrapperComponent, selector: "tui-data-list-wrapper:not([labels]), tui-data-list-wrapper:not([labels])[new]", inputs: ["items", "disabledItemHandler", "emptyContent", "size", "itemContent"], outputs: ["itemClick"] }, { kind: "directive", type: i3$2.TuiDataListDirective, selector: "ng-template[tuiDataList]" }, { kind: "pipe", type: TuiDocTypeReferencePipe, name: "tuiDocTypeReference" }, { kind: "directive", type: i6.TuiDropdownOptionsDirective, selector: "[tuiDropdownAlign], [tuiDropdownAppearance], [tuiDropdownDirection], [tuiDropdownLimitWidth], [tuiDropdownMinHeight], [tuiDropdownMaxHeight], [tuiDropdownOffset]", inputs: ["tuiDropdownAlign", "tuiDropdownAppearance", "tuiDropdownDirection", "tuiDropdownLimitWidth", "tuiDropdownMinHeight", "tuiDropdownMaxHeight", "tuiDropdownOffset"] }, { kind: "pipe", type: TuiFilterPipe, name: "tuiFilter" }, { kind: "directive", type: i3.TuiInputNumberDirective, selector: "input[tuiInputNumber]", inputs: ["prefix", "postfix", "min", "max"] }, { kind: "component", type: i3.TuiInputNumberStep, selector: "input[tuiInputNumber][step]", inputs: ["step"] }, { kind: "pipe", type: TuiInspectPipe, name: "tuiInspectAny" }, { kind: "pipe", type: TuiIsOptionalPipe, name: "tuiIsOptionalPipe" }, { kind: "directive", type: TuiNotification, selector: "tui-notification,[tuiNotification]", inputs: ["appearance", "size", "icon"] }, { kind: "ngmodule", type: TuiSelectModule }, { kind: "component", type: i6$1.TuiSelectComponent, selector: "tui-select", inputs: ["stringify", "identityMatcher", "valueContent"] }, { kind: "directive", type: i6$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: ["showIcons"] }, { kind: "component", type: i7.TuiTextfieldComponent, selector: "tui-textfield:not([multi])" }, { kind: "directive", type: i7.TuiTextfieldDirective, selector: "input[tuiTextfield]" }, { kind: "directive", type: i7.TuiTextfieldOptionsDirective, selector: "[tuiTextfieldAppearance],[tuiTextfieldSize],[tuiTextfieldCleaner]", inputs: ["tuiTextfieldAppearance", "tuiTextfieldSize", "tuiTextfieldCleaner"] }, { kind: "ngmodule", type: TuiTextfieldControllerModule }, { kind: "directive", type: i8.TuiTextfieldCleanerDirective, selector: "[tuiTextfieldCleaner]", inputs: ["tuiTextfieldCleaner"] }, { kind: "directive", type: i8.TuiTextfieldLabelOutsideDirective, selector: "[tuiTextfieldLabelOutside]", inputs: ["tuiTextfieldLabelOutside"] }, { kind: "directive", type: i8.TuiTextfieldSizeDirective, selector: "[tuiTextfieldSize]", inputs: ["tuiTextfieldSize"] }, { kind: "pipe", type: TuiToArrayPipe, name: "tuiToArray" }], animations: [
             trigger('emitEvent', [
                 transition(':increment', [style({ opacity: 1 }), animate('500ms ease-in')]),
             ]),
@@ -682,16 +651,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                         trigger('emitEvent', [
                             transition(':increment', [style({ opacity: 1 }), animate('500ms ease-in')]),
                         ]),
-                    ], template: "@if (heading) {\n    <h1 class=\"t-heading\">\n        {{ heading }}\n    </h1>\n}\n<ng-content />\n@if (propertiesConnectors | tuiToArray | tuiFilter: matcher : excludedProperties; as properties) {\n    @if (properties.length) {\n        <table class=\"t-table\">\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                @if (showValues && !isAPI) {\n                    <th class=\"t-th t-cell t-th_value\">\n                        {{ texts[3] }}\n                    </th>\n                }\n            </tr>\n            @for (propertyConnector of properties; track propertyConnector) {\n                <tr\n                    class=\"t-row\"\n                    [class.t-deprecated]=\"propertyConnector.documentationPropertyDeprecated\"\n                >\n                    <td class=\"t-cell t-no-overflow\">\n                        <div\n                            automation-id=\"tui-documentation__property-name\"\n                            class=\"t-property t-additional-info\"\n                        >\n                            @if (propertyConnector.attrName) {\n                                <code\n                                    class=\"t-property-code\"\n                                    [style.color]=\"'var(--tui-background-accent-2-pressed)'\"\n                                >\n                                    {{ propertyConnector.attrName | tuiStripOptionalPipe }}\n                                </code>\n                            }\n                            @if (propertyConnector.attrName | tuiIsOptionalPipe) {\n                                <tui-badge\n                                    appearance=\"neutral\"\n                                    size=\"s\"\n                                >\n                                    Optional\n                                </tui-badge>\n                            }\n                            @if (propertyConnector.documentationPropertyDeprecated) {\n                                <tui-badge\n                                    appearance=\"negative\"\n                                    size=\"s\"\n                                >\n                                    Deprecated\n                                </tui-badge>\n                            }\n                        </div>\n                        <ng-container [ngTemplateOutlet]=\"propertyConnector.template\" />\n                    </td>\n                    <td class=\"t-cell t-no-overflow\">\n                        <span class=\"type\">\n                            <code class=\"t-code-type\">\n                                @for (\n                                    item of propertyConnector.documentationPropertyType | tuiDocTypeReference;\n                                    track item;\n                                    let last = $last\n                                ) {\n                                    @if (item.reference) {\n                                        <a\n                                            target=\"_blank\"\n                                            class=\"t-code-reference\"\n                                            [attr.href]=\"item.reference\"\n                                        >\n                                            {{ item.type }}\n                                        </a>\n                                    } @else {\n                                        {{ item.type }}\n                                    }\n                                    @if (!last) {\n                                        <span>&nbsp;|&nbsp;</span>\n                                    }\n                                }\n                            </code>\n                        </span>\n                    </td>\n                    @if (showValues) {\n                        <td class=\"t-cell t-cell_value\">\n                            @if (propertyConnector.shouldShowValues) {\n                                @if (propertyConnector.hasItems) {\n                                    <tui-select\n                                        tuiDropdownLimitWidth=\"min\"\n                                        tuiTextfieldSize=\"m\"\n                                        [nativeId]=\"propertyConnector.attrName\"\n                                        [ngModel]=\"propertyConnector.documentationPropertyValue\"\n                                        [tuiTextfieldCleaner]=\"\n                                            propertyConnector.documentationPropertyType | tuiShowCleanerPipe\n                                        \"\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                                            class=\"t-data-list\"\n                                            [itemContent]=\"selectContent\"\n                                            [items]=\"propertyConnector.documentationPropertyValues\"\n                                        />\n                                    </tui-select>\n                                } @else {\n                                    @switch (propertyConnector.documentationPropertyType) {\n                                        @case ('boolean') {\n                                            <input\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                                        @case ('string') {\n                                            <tui-textfield tuiTextfieldSize=\"m\">\n                                                <input\n                                                    tuiTextfield\n                                                    [id]=\"propertyConnector.attrName\"\n                                                    [ngModel]=\"propertyConnector.documentationPropertyValue || ''\"\n                                                    (ngModelChange)=\"propertyConnector.onValueChange($event)\"\n                                                />\n                                            </tui-textfield>\n                                        }\n                                        @case ('number') {\n                                            <tui-textfield tuiTextfieldSize=\"m\">\n                                                <input\n                                                    tuiInputNumber\n                                                    [id]=\"propertyConnector.attrName\"\n                                                    [ngModel]=\"propertyConnector.documentationPropertyValue\"\n                                                    [step]=\"1\"\n                                                    (ngModelChange)=\"propertyConnector.onValueChange($event || 0)\"\n                                                />\n                                            </tui-textfield>\n                                        }\n                                    }\n                                }\n                                <ng-template\n                                    #selectContent\n                                    let-data\n                                >\n                                    <code>{{ data | tuiInspectAny }}</code>\n                                </ng-template>\n                            } @else {\n                                <tui-notification\n                                    class=\"t-output\"\n                                    [@emitEvent]=\"propertyConnector.emits()\"\n                                >\n                                    Emit!\n                                </tui-notification>\n                            }\n                        </td>\n                    }\n                </tr>\n            }\n        </table>\n    }\n}\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-inline-start:0}.t-cell:last-child{padding-inline-end: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-block-end:.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-inline-end:.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: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:.1875rem}.t-code-reference:after{content:\"\";font-size:1rem;inline-size:1rem;block-size:1rem;background:currentColor;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-inline-start:auto}}.t-data-list{overflow-wrap:anywhere}@media not screen and (max-width: 47.9625em){.t-data-list{max-inline-size:22.5rem}}.t-no-overflow{overflow:hidden!important}\n"] }]
+                    ], template: "@if (heading()) {\n    <h1 class=\"t-heading\">\n        {{ heading() }}\n    </h1>\n}\n<ng-content />\n@if (propertiesConnectors | tuiToArray | tuiFilter: matcher : excludedProperties; as properties) {\n    @if (properties.length) {\n        <table class=\"t-table\">\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                @if (showValues() && !isAPI()) {\n                    <th class=\"t-th t-cell t-th_value\">\n                        {{ texts[3] }}\n                    </th>\n                }\n            </tr>\n            @for (propertyConnector of properties; track propertyConnector) {\n                <tr\n                    class=\"t-row\"\n                    [class.t-deprecated]=\"propertyConnector.documentationPropertyDeprecated()\"\n                >\n                    <td class=\"t-cell t-no-overflow\">\n                        <div\n                            automation-id=\"tui-documentation__property-name\"\n                            class=\"t-property t-additional-info\"\n                        >\n                            @if (propertyConnector.attrName()) {\n                                <code\n                                    class=\"t-property-code\"\n                                    [style.color]=\"'var(--tui-background-accent-2-pressed)'\"\n                                >\n                                    {{ propertyConnector.attrName() | tuiStripOptionalPipe }}\n                                </code>\n                            }\n                            @if (propertyConnector.attrName() | tuiIsOptionalPipe) {\n                                <tui-badge\n                                    appearance=\"neutral\"\n                                    size=\"s\"\n                                >\n                                    Optional\n                                </tui-badge>\n                            }\n                            @if (propertyConnector.documentationPropertyDeprecated()) {\n                                <tui-badge\n                                    appearance=\"negative\"\n                                    size=\"s\"\n                                >\n                                    Deprecated\n                                </tui-badge>\n                            }\n                        </div>\n                        <ng-container [ngTemplateOutlet]=\"propertyConnector.template\" />\n                    </td>\n                    <td class=\"t-cell t-no-overflow\">\n                        <span class=\"type\">\n                            <code class=\"t-code-type\">\n                                @for (\n                                    item of propertyConnector.documentationPropertyType() | tuiDocTypeReference;\n                                    track item;\n                                    let last = $last\n                                ) {\n                                    @if (item.reference) {\n                                        <a\n                                            target=\"_blank\"\n                                            class=\"t-code-reference\"\n                                            [attr.href]=\"item.reference\"\n                                        >\n                                            {{ item.type }}\n                                        </a>\n                                    } @else {\n                                        {{ item.type }}\n                                    }\n                                    @if (!last) {\n                                        <span>&nbsp;|&nbsp;</span>\n                                    }\n                                }\n                            </code>\n                        </span>\n                    </td>\n                    @if (showValues()) {\n                        <td class=\"t-cell t-cell_value\">\n                            @if (propertyConnector.shouldShowValues) {\n                                @if (propertyConnector.hasItems) {\n                                    <tui-select\n                                        tuiDropdownLimitWidth=\"min\"\n                                        tuiTextfieldSize=\"m\"\n                                        [nativeId]=\"propertyConnector.attrName()\"\n                                        [ngModel]=\"propertyConnector.documentationPropertyValue()\"\n                                        [tuiTextfieldCleaner]=\"\n                                            propertyConnector.documentationPropertyType() | tuiShowCleanerPipe\n                                        \"\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                                            class=\"t-data-list\"\n                                            [itemContent]=\"selectContent\"\n                                            [items]=\"propertyConnector.documentationPropertyValues()\"\n                                        />\n                                    </tui-select>\n                                } @else {\n                                    @switch (propertyConnector.documentationPropertyType()) {\n                                        @case ('boolean') {\n                                            <input\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                                        @case ('string') {\n                                            <tui-textfield tuiTextfieldSize=\"m\">\n                                                <input\n                                                    tuiTextfield\n                                                    [id]=\"propertyConnector.attrName()\"\n                                                    [ngModel]=\"propertyConnector.documentationPropertyValue() || ''\"\n                                                    (ngModelChange)=\"propertyConnector.onValueChange($event)\"\n                                                />\n                                            </tui-textfield>\n                                        }\n                                        @case ('number') {\n                                            <tui-textfield tuiTextfieldSize=\"m\">\n                                                <input\n                                                    tuiInputNumber\n                                                    [id]=\"propertyConnector.attrName()\"\n                                                    [ngModel]=\"propertyConnector.documentationPropertyValue()\"\n                                                    [step]=\"1\"\n                                                    (ngModelChange)=\"propertyConnector.onValueChange($event || 0)\"\n                                                />\n                                            </tui-textfield>\n                                        }\n                                    }\n                                }\n                                <ng-template\n                                    #selectContent\n                                    let-data\n                                >\n                                    <code>{{ data | tuiInspectAny }}</code>\n                                </ng-template>\n                            } @else {\n                                <tui-notification\n                                    class=\"t-output\"\n                                    [@emitEvent]=\"propertyConnector.emits()\"\n                                >\n                                    Emit!\n                                </tui-notification>\n                            }\n                        </td>\n                    }\n                </tr>\n            }\n        </table>\n    }\n}\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-inline-start:0}.t-cell:last-child{padding-inline-end: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-block-end:.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-inline-end:.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: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:.1875rem}.t-code-reference:after{content:\"\";font-size:1rem;inline-size:1rem;block-size:1rem;background:currentColor;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-inline-start:auto}}.t-data-list{overflow-wrap:anywhere}@media not screen and (max-width: 47.9625em){.t-data-list{max-inline-size:22.5rem}}.t-no-overflow{overflow:hidden!important}\n"] }]
         }], propDecorators: { propertiesConnectors: [{
                 type: ContentChildren,
                 args: [TuiDocDocumentationPropertyConnector]
-            }], heading: [{
-                type: Input
-            }], showValues: [{
-                type: Input
-            }], isAPI: [{
-                type: Input
             }] } });
 
 class TuiGetColorPipe {
@@ -777,12 +740,7 @@ const TUI_DOC_EXAMPLE_DEFAULT_OPTIONS = {
 /**
  * Default parameters for DocExample component
  */
-const TUI_DOC_EXAMPLE_OPTIONS = new InjectionToken(ngDevMode ? 'TUI_DOC_EXAMPLE_OPTIONS' : '', {
-    factory: () => TUI_DOC_EXAMPLE_DEFAULT_OPTIONS,
-});
-function tuiDocExampleOptionsProvider(options) {
-    return tuiProvideOptions(TUI_DOC_EXAMPLE_OPTIONS, options, TUI_DOC_EXAMPLE_DEFAULT_OPTIONS);
-}
+const [TUI_DOC_EXAMPLE_OPTIONS, tuiDocExampleOptionsProvider] = tuiCreateOptions(TUI_DOC_EXAMPLE_DEFAULT_OPTIONS);
 
 class TuiDocExampleGetTabsPipe {
     transform(content, defaultTab) {
@@ -820,9 +778,12 @@ class TuiDocExample {
         this.copy = computed(() => this.copyTexts()[0]);
         this.loading = signal(false);
         this.processor = toSignal(this.rawLoader$$.pipe(switchMap(tuiRawLoadRecord), map((value) => this.processContent(value))), { initialValue: {} });
-        this.id = null;
-        this.fullsize = inject(TUI_DOC_EXAMPLE_OPTIONS).fullsize;
-        this.componentName = this.location.pathname.slice(1);
+        this.id = input(null);
+        this.heading = input();
+        this.description = input();
+        this.fullsize = input(inject(TUI_DOC_EXAMPLE_OPTIONS).fullsize);
+        this.componentName = input(this.location.pathname.slice(1));
+        this.component = input();
         this.visible = (files) => Boolean(this.codeEditor && this.options.codeEditorVisibilityHandler(files));
     }
     set content(content) {
@@ -840,11 +801,11 @@ class TuiDocExample {
     edit(files) {
         this.loading.set(true);
         this.codeEditor
-            ?.edit(this.componentName, this.id || '', files)
+            ?.edit(this.componentName(), this.id() || '', files)
             .finally(() => this.loading.set(false));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiDocExample, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: TuiDocExample, isStandalone: true, selector: "tui-doc-example", inputs: { id: "id", heading: "heading", description: "description", fullsize: "fullsize", componentName: "componentName", component: "component", content: "content" }, host: { properties: { "attr.id": "id", "class._fullsize": "fullsize" } }, ngImport: i0, template: "<div class=\"t-title-block\">\n    @if (heading) {\n        <h2 class=\"t-title\">\n            <span\n                *polymorpheusOutlet=\"heading as text\"\n                [textContent]=\"text\"\n            ></span>\n        </h2>\n    }\n    @if (id) {\n        <a\n            routerLink=\".\"\n            routerLinkActive=\"t-link-active\"\n            tuiLink\n            type=\"button\"\n            class=\"t-link\"\n            [attr.title]=\"copy()\"\n            [fragment]=\"id\"\n            [relativeTo]=\"route.firstChild ?? route\"\n            [routerLinkActiveOptions]=\"{matrixParams: 'exact', queryParams: 'exact', paths: 'exact', fragment: 'exact'}\"\n            (click)=\"copyExampleLink($event.currentTarget)\"\n        >\n            #\n        </a>\n    }\n</div>\n@if (description) {\n    <h3 class=\"t-description\">\n        <ng-container *polymorpheusOutlet=\"description as text\">\n            {{ text }}\n        </ng-container>\n    </h3>\n}\n\n<div\n    class=\"t-example\"\n    [(tuiFullscreen)]=\"fullscreen\"\n>\n    @if (processor() | tuiDocExampleGetTabs: defaultTab; as tabs) {\n        @if (tabs.length > 1) {\n            <div class=\"t-tabs-wrapper\">\n                <tui-tabs-with-more\n                    class=\"t-tabs\"\n                    [(activeItemIndex)]=\"activeItemIndex\"\n                >\n                    @for (tab of tabs; track tab) {\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                    }\n                </tui-tabs-with-more>\n                @if (processor() | tuiMapper: visible) {\n                    <tui-loader\n                        size=\"xs\"\n                        class=\"t-code-editor\"\n                        [loading]=\"loading()\"\n                        [overlay]=\"true\"\n                        (click)=\"edit(processor())\"\n                    >\n                        @if (codeEditor?.content; as content) {\n                            <ng-container *polymorpheusOutlet=\"content as editContent\">\n                                {{ editContent }}\n                            </ng-container>\n                        } @else {\n                            <button\n                                appearance=\"flat\"\n                                size=\"s\"\n                                tuiButton\n                                type=\"button\"\n                            >\n                                Edit on {{ codeEditor!.name }}\n                            </button>\n                        }\n                    </tui-loader>\n                }\n                @if (fullscreenEnabled) {\n                    <button\n                        appearance=\"flat\"\n                        size=\"xs\"\n                        tuiIconButton\n                        type=\"button\"\n                        [iconStart]=\"fullscreen ? icons.shrink : icons.expand\"\n                        (click)=\"fullscreen = !fullscreen\"\n                    >\n                        Fullscreen\n                    </button>\n                }\n            </div>\n        }\n        @for (tab of tabs; track tab) {\n            <div class=\"t-content\">\n                @if ($index === defaultTabIndex) {\n                    <section\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 *ngComponentOutlet=\"component | async\" />\n                    </section>\n                }\n                @let code = processor()[tabs[$index] || 0] || '';\n                <tui-doc-code\n                    [code]=\"code\"\n                    [style.display]=\"activeItemIndex === $index && $index !== defaultTabIndex ? 'block' : 'none'\"\n                >\n                    @for (action of codeActions; track action) {\n                        <ng-container *polymorpheusOutlet=\"action as text; context: {$implicit: code}\">\n                            {{ text }}\n                        </ng-container>\n                    }\n                </tui-doc-code>\n            </div>\n        }\n    }\n</div>\n", styles: [":host{position:relative;display:block;padding-block-start:3.5rem;clear:inline-end}:host:target{animation:1s tuiShaking}@media screen and (max-width: 47.9625em){:host{padding-block-start: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-inline-end:.1rem}@media not screen and (max-width: 47.9625em){.t-link{font:var(--tui-font-heading-5);margin-inline-start:-1.6rem}.t-link:not(:hover,:focus-visible):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-block-start: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-block-start:.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;block-size:auto}@media screen and (max-width: 47.9625em){.t-code-editor{font-size:0;inline-size:1.5rem}}.t-demo{position:relative;padding:2rem;max-inline-size:100%;box-sizing:border-box;overflow-x:auto}@media 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:min-content;min-inline-size:21rem}tui-doc-code{overflow:hidden}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: PolymorpheusOutlet, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "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: "component", type: TuiFullscreen, selector: "[tuiFullscreen]", inputs: ["tuiFullscreenOptions", "tuiFullscreen"], outputs: ["tuiFullscreenChange"] }, { kind: "directive", type: TuiLink, selector: "a[tuiLink], button[tuiLink]", inputs: ["pseudo"] }, { kind: "component", type: TuiLoader, selector: "tui-loader", inputs: ["size", "inheritColor", "overlay", "textContent", "loading"] }, { 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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: TuiDocExample, isStandalone: true, selector: "tui-doc-example", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, fullsize: { classPropertyName: "fullsize", publicName: "fullsize", isSignal: true, isRequired: false, transformFunction: null }, componentName: { classPropertyName: "componentName", publicName: "componentName", isSignal: true, isRequired: false, transformFunction: null }, component: { classPropertyName: "component", publicName: "component", isSignal: true, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: false, isRequired: false, transformFunction: null } }, host: { properties: { "attr.id": "id()", "class._fullsize": "fullsize()" } }, ngImport: i0, template: "<div class=\"t-title-block\">\n    @if (heading()) {\n        <h2 class=\"t-title\">\n            <span\n                *polymorpheusOutlet=\"heading() as text\"\n                [textContent]=\"text\"\n            ></span>\n        </h2>\n    }\n\n    @let fragmentId = id();\n\n    @if (fragmentId) {\n        <a\n            routerLink=\".\"\n            routerLinkActive=\"t-link-active\"\n            tuiLink\n            type=\"button\"\n            class=\"t-link\"\n            [attr.title]=\"copy()\"\n            [fragment]=\"fragmentId\"\n            [relativeTo]=\"route.firstChild ?? route\"\n            [routerLinkActiveOptions]=\"{matrixParams: 'exact', queryParams: 'exact', paths: 'exact', fragment: 'exact'}\"\n            (click)=\"copyExampleLink($event.currentTarget)\"\n        >\n            #\n        </a>\n    }\n</div>\n@if (description()) {\n    <h3 class=\"t-description\">\n        <ng-container *polymorpheusOutlet=\"description() as text\">\n            {{ text }}\n        </ng-container>\n    </h3>\n}\n\n<div\n    class=\"t-example\"\n    [(tuiFullscreen)]=\"fullscreen\"\n>\n    @if (processor() | tuiDocExampleGetTabs: defaultTab; as tabs) {\n        @if (tabs.length > 1) {\n            <div class=\"t-tabs-wrapper\">\n                <tui-tabs-with-more\n                    class=\"t-tabs\"\n                    [(activeItemIndex)]=\"activeItemIndex\"\n                >\n                    @for (tab of tabs; track tab) {\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                    }\n                </tui-tabs-with-more>\n                @if (processor() | tuiMapper: visible) {\n                    <tui-loader\n                        size=\"xs\"\n                        class=\"t-code-editor\"\n                        [loading]=\"loading()\"\n                        [overlay]=\"true\"\n                        (click)=\"edit(processor())\"\n                    >\n                        @if (codeEditor?.content; as content) {\n                            <ng-container *polymorpheusOutlet=\"content as editContent\">\n                                {{ editContent }}\n                            </ng-container>\n                        } @else {\n                            <button\n                                appearance=\"flat\"\n                                size=\"s\"\n                                tuiButton\n                                type=\"button\"\n                            >\n                                Edit on {{ codeEditor!.name }}\n                            </button>\n                        }\n                    </tui-loader>\n                }\n                @if (fullscreenEnabled) {\n                    <button\n                        appearance=\"flat\"\n                        size=\"xs\"\n                        tuiIconButton\n                        type=\"button\"\n                        [iconStart]=\"fullscreen ? icons.shrink : icons.expand\"\n                        (click)=\"fullscreen = !fullscreen\"\n                    >\n                        Fullscreen\n                    </button>\n                }\n            </div>\n        }\n        @for (tab of tabs; track tab) {\n            <div class=\"t-content\">\n                @if ($index === defaultTabIndex) {\n                    <section\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 *ngComponentOutlet=\"component() | async\" />\n                    </section>\n                }\n                @let code = processor()[tabs[$index] || 0] || '';\n                <tui-doc-code\n                    [code]=\"code\"\n                    [style.display]=\"activeItemIndex === $index && $index !== defaultTabIndex ? 'block' : 'none'\"\n                >\n                    @for (action of codeActions; track action) {\n                        <ng-container *polymorpheusOutlet=\"action as text; context: {$implicit: code}\">\n                            {{ text }}\n                        </ng-container>\n                    }\n                </tui-doc-code>\n            </div>\n        }\n    }\n</div>\n", styles: [":host{position:relative;display:block;padding-block-start:3.5rem;clear:inline-end}:host:target{animation:1s tuiShaking}@media screen and (max-width: 47.9625em){:host{padding-block-start: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-inline-end:.1rem}@media not screen and (max-width: 47.9625em){.t-link{font:var(--tui-font-heading-5);margin-inline-start:-1.6rem}.t-link:not(:hover,:focus-visible):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-block-start: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-block-start:.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;block-size:auto}@media screen and (max-width: 47.9625em){.t-code-editor{font-size:0;inline-size:1.5rem}}.t-demo{position:relative;padding:2rem;max-inline-size:100%;box-sizing:border-box;overflow-x:auto}@media 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:min-content;min-inline-size:21rem}tui-doc-code{overflow:hidden}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: PolymorpheusOutlet, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "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: "component", type: TuiFullscreen, selector: "[tuiFullscreen]", inputs: ["tuiFullscreenOptions", "tuiFullscreen"], outputs: ["tuiFullscreenChange"] }, { kind: "directive", type: TuiLink, selector: "a[tuiLink], button[tuiLink]", inputs: ["pseudo"] }, { kind: "component", type: TuiLoader, selector: "tui-loader", inputs: ["size", "inheritColor", "overlay", "textContent", "loading"] }, { 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: "19.2.15", ngImport: i0, type: TuiDocExample, decorators: [{
             type: Component,
@@ -863,22 +824,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                         TuiMapperPipe,
                         TuiTabs,
                     ], changeDetection: ChangeDetectionStrategy.OnPush, host: {
-                        '[attr.id]': 'id',
-                        '[class._fullsize]': 'fullsize',
-                    }, template: "<div class=\"t-title-block\">\n    @if (heading) {\n        <h2 class=\"t-title\">\n            <span\n                *polymorpheusOutlet=\"heading as text\"\n                [textContent]=\"text\"\n            ></span>\n        </h2>\n    }\n    @if (id) {\n        <a\n            routerLink=\".\"\n            routerLinkActive=\"t-link-active\"\n            tuiLink\n            type=\"button\"\n            class=\"t-link\"\n            [attr.title]=\"copy()\"\n            [fragment]=\"id\"\n            [relativeTo]=\"route.firstChild ?? route\"\n            [routerLinkActiveOptions]=\"{matrixParams: 'exact', queryParams: 'exact', paths: 'exact', fragment: 'exact'}\"\n            (click)=\"copyExampleLink($event.currentTarget)\"\n        >\n            #\n        </a>\n    }\n</div>\n@if (description) {\n    <h3 class=\"t-description\">\n        <ng-container *polymorpheusOutlet=\"description as text\">\n            {{ text }}\n        </ng-container>\n    </h3>\n}\n\n<div\n    class=\"t-example\"\n    [(tuiFullscreen)]=\"fullscreen\"\n>\n    @if (processor() | tuiDocExampleGetTabs: defaultTab; as tabs) {\n        @if (tabs.length > 1) {\n            <div class=\"t-tabs-wrapper\">\n                <tui-tabs-with-more\n                    class=\"t-tabs\"\n                    [(activeItemIndex)]=\"activeItemIndex\"\n                >\n                    @for (tab of tabs; track tab) {\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                    }\n                </tui-tabs-with-more>\n                @if (processor() | tuiMapper: visible) {\n                    <tui-loader\n                        size=\"xs\"\n                        class=\"t-code-editor\"\n                        [loading]=\"loading()\"\n                        [overlay]=\"true\"\n                        (click)=\"edit(processor())\"\n                    >\n                        @if (codeEditor?.content; as content) {\n                            <ng-container *polymorpheusOutlet=\"content as editContent\">\n                                {{ editContent }}\n                            </ng-container>\n                        } @else {\n                            <button\n                                appearance=\"flat\"\n                                size=\"s\"\n                                tuiButton\n                                type=\"button\"\n                            >\n                                Edit on {{ codeEditor!.name }}\n                            </button>\n                        }\n                    </tui-loader>\n                }\n                @if (fullscreenEnabled) {\n                    <button\n                        appearance=\"flat\"\n                        size=\"xs\"\n                        tuiIconButton\n                        type=\"button\"\n                        [iconStart]=\"fullscreen ? icons.shrink : icons.expand\"\n                        (click)=\"fullscreen = !fullscreen\"\n                    >\n                        Fullscreen\n                    </button>\n                }\n            </div>\n        }\n        @for (tab of tabs; track tab) {\n            <div class=\"t-content\">\n                @if ($index === defaultTabIndex) {\n                    <section\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 *ngComponentOutlet=\"component | async\" />\n                    </section>\n                }\n                @let code = processor()[tabs[$index] || 0] || '';\n                <tui-doc-code\n                    [code]=\"code\"\n                    [style.display]=\"activeItemIndex === $index && $index !== defaultTabIndex ? 'block' : 'none'\"\n                >\n                    @for (action of codeActions; track action) {\n                        <ng-container *polymorpheusOutlet=\"action as text; context: {$implicit: code}\">\n                            {{ text }}\n                        </ng-container>\n                    }\n                </tui-doc-code>\n            </div>\n        }\n    }\n</div>\n", styles: [":host{position:relative;display:block;padding-block-start:3.5rem;clear:inline-end}:host:target{animation:1s tuiShaking}@media screen and (max-width: 47.9625em){:host{padding-block-start: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-inline-end:.1rem}@media not screen and (max-width: 47.9625em){.t-link{font:var(--tui-font-heading-5);margin-inline-start:-1.6rem}.t-link:not(:hover,:focus-visible):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-block-start: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-block-start:.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;block-size:auto}@media screen and (max-width: 47.9625em){.t-code-editor{font-size:0;inline-size:1.5rem}}.t-demo{position:relative;padding:2rem;max-inline-size:100%;box-sizing:border-box;overflow-x:auto}@media 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:min-content;min-inline-size:21rem}tui-doc-code{overflow:hidden}\n"] }]
-        }], propDecorators: { id: [{
-                type: Input
-            }], heading: [{
-                type: Input
-            }], description: [{
-                type: Input
-            }], fullsize: [{
-                type: Input
-            }], componentName: [{
-                type: Input
-            }], component: [{
-                type: Input
-            }], content: [{
+                        '[attr.id]': 'id()',
+                        '[class._fullsize]': 'fullsize()',
+                    }, template: "<div class=\"t-title-block\">\n    @if (heading()) {\n        <h2 class=\"t-title\">\n            <span\n                *polymorpheusOutlet=\"heading() as text\"\n                [textContent]=\"text\"\n            ></span>\n        </h2>\n    }\n\n    @let fragmentId = id();\n\n    @if (fragmentId) {\n        <a\n            routerLink=\".\"\n            routerLinkActive=\"t-link-active\"\n            tuiLink\n            type=\"button\"\n            class=\"t-link\"\n            [attr.title]=\"copy()\"\n            [fragment]=\"fragmentId\"\n            [relativeTo]=\"route.firstChild ?? route\"\n            [routerLinkActiveOptions]=\"{matrixParams: 'exact', queryParams: 'exact', paths: 'exact', fragment: 'exact'}\"\n            (click)=\"copyExampleLink($event.currentTarget)\"\n        >\n            #\n        </a>\n    }\n</div>\n@if (description()) {\n    <h3 class=\"t-description\">\n        <ng-container *polymorpheusOutlet=\"description() as text\">\n            {{ text }}\n        </ng-container>\n    </h3>\n}\n\n<div\n    class=\"t-example\"\n    [(tuiFullscreen)]=\"fullscreen\"\n>\n    @if (processor() | tuiDocExampleGetTabs: defaultTab; as tabs) {\n        @if (tabs.length > 1) {\n            <div class=\"t-tabs-wrapper\">\n                <tui-tabs-with-more\n                    class=\"t-tabs\"\n                    [(activeItemIndex)]=\"activeItemIndex\"\n                >\n                    @for (tab of tabs; track tab) {\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                    }\n                </tui-tabs-with-more>\n                @if (processor() | tuiMapper: visible) {\n                    <tui-loader\n                        size=\"xs\"\n                        class=\"t-code-editor\"\n                        [loading]=\"loading()\"\n                        [overlay]=\"true\"\n                        (click)=\"edit(processor())\"\n                    >\n                        @if (codeEditor?.content; as content) {\n                            <ng-container *polymorpheusOutlet=\"content as editContent\">\n                                {{ editContent }}\n                            </ng-container>\n                        } @else {\n                            <button\n                                appearance=\"flat\"\n                                size=\"s\"\n                                tuiButton\n                                type=\"button\"\n                            >\n                                Edit on {{ codeEditor!.name }}\n                            </button>\n                        }\n                    </tui-loader>\n                }\n                @if (fullscreenEnabled) {\n                    <button\n                        appearance=\"flat\"\n                        size=\"xs\"\n                        tuiIconButton\n                        type=\"button\"\n                        [iconStart]=\"fullscreen ? icons.shrink : icons.expand\"\n                        (click)=\"fullscreen = !fullscreen\"\n                    >\n                        Fullscreen\n                    </button>\n                }\n            </div>\n        }\n        @for (tab of tabs; track tab) {\n            <div class=\"t-content\">\n                @if ($index === defaultTabIndex) {\n                    <section\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 *ngComponentOutlet=\"component() | async\" />\n                    </section>\n                }\n                @let code = processor()[tabs[$index] || 0] || '';\n                <tui-doc-code\n                    [code]=\"code\"\n                    [style.display]=\"activeItemIndex === $index && $index !== defaultTabIndex ? 'block' : 'none'\"\n                >\n                    @for (action of codeActions; track action) {\n                        <ng-container *polymorpheusOutlet=\"action as text; context: {$implicit: code}\">\n                            {{ text }}\n                        </ng-container>\n                    }\n                </tui-doc-code>\n            </div>\n        }\n    }\n</div>\n", styles: [":host{position:relative;display:block;padding-block-start:3.5rem;clear:inline-end}:host:target{animation:1s tuiShaking}@media screen and (max-width: 47.9625em){:host{padding-block-start: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-inline-end:.1rem}@media not screen and (max-width: 47.9625em){.t-link{font:var(--tui-font-heading-5);margin-inline-start:-1.6rem}.t-link:not(:hover,:focus-visible):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-block-start: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-block-start:.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;block-size:auto}@media screen and (max-width: 47.9625em){.t-code-editor{font-size:0;inline-size:1.5rem}}.t-demo{position:relative;padding:2rem;max-inline-size:100%;box-sizing:border-box;overflow-x:auto}@media 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:min-content;min-inline-size:21rem}tui-doc-code{overflow:hidden}\n"] }]
+        }], propDecorators: { content: [{
                 type: Input
             }] } });
 
@@ -1145,66 +1094,43 @@ class TuiDocSeeAlso {
     constructor() {
         this.pages = inject(TUI_DOC_MAP_PAGES);
         this.text = inject(TUI_DOC_SEE_ALSO_TEXT);
-        this.seeAlso = [];
+        this.seeAlso = input([]);
     }
     getRouterLink(pageTitle) {
         return this.pages.get(pageTitle)?.route ?? '';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiDocSeeAlso, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: TuiDocSeeAlso, isStandalone: true, selector: "tui-doc-see-also", inputs: { seeAlso: "seeAlso" }, ngImport: i0, template: "<h5 class=\"t-header\">{{ text }}</h5>\n@for (item of seeAlso; track item) {\n    <a\n        tuiLink\n        [innerText]=\"item\"\n        [routerLink]=\"getRouterLink(item)\"\n    ></a>\n    @if (!$last) {\n        <span>{{ ', ' }}</span>\n    }\n}\n", styles: [":host{display:block}.t-header{font-size:.6875rem;line-height:1rem;text-transform:uppercase;letter-spacing:.075em;color:var(--tui-text-secondary);margin:0 0 .5rem;white-space:nowrap}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: TuiLink, selector: "a[tuiLink], button[tuiLink]", inputs: ["pseudo"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: TuiDocSeeAlso, isStandalone: true, selector: "tui-doc-see-also", inputs: { seeAlso: { classPropertyName: "seeAlso", publicName: "seeAlso", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<h5 class=\"t-header\">{{ text }}</h5>\n@for (item of seeAlso(); track item) {\n    <a\n        tuiLink\n        [innerText]=\"item\"\n        [routerLink]=\"getRouterLink(item)\"\n    ></a>\n    @if (!$last) {\n        <span>{{ ', ' }}</span>\n    }\n}\n", styles: [":host{display:block}.t-header{font-size:.6875rem;line-height:1rem;text-transform:uppercase;letter-spacing:.075em;color:var(--tui-text-secondary);margin:0 0 .5rem;white-space:nowrap}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: TuiLink, selector: "a[tuiLink], button[tuiLink]", inputs: ["pseudo"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiDocSeeAlso, decorators: [{
             type: Component,
-            args: [{ selector: 'tui-doc-see-also', imports: [RouterLink, TuiLink], changeDetection: ChangeDetectionStrategy.OnPush, template: "<h5 class=\"t-header\">{{ text }}</h5>\n@for (item of seeAlso; track item) {\n    <a\n        tuiLink\n        [innerText]=\"item\"\n        [routerLink]=\"getRouterLink(item)\"\n    ></a>\n    @if (!$last) {\n        <span>{{ ', ' }}</span>\n    }\n}\n", styles: [":host{display:block}.t-header{font-size:.6875rem;line-height:1rem;text-transform:uppercase;letter-spacing:.075em;color:var(--tui-text-secondary);margin:0 0 .5rem;white-space:nowrap}\n"] }]
-        }], propDecorators: { seeAlso: [{
-                type: Input
-            }] } });
+            args: [{ selector: 'tui-doc-see-also', imports: [RouterLink, TuiLink], changeDetection: ChangeDetectionStrategy.OnPush, template: "<h5 class=\"t-header\">{{ text }}</h5>\n@for (item of seeAlso(); track item) {\n    <a\n        tuiLink\n        [innerText]=\"item\"\n        [routerLink]=\"getRouterLink(item)\"\n    ></a>\n    @if (!$last) {\n        <span>{{ ', ' }}</span>\n    }\n}\n", styles: [":host{display:block}.t-header{font-size:.6875rem;line-height:1rem;text-transform:uppercase;letter-spacing:.075em;color:var(--tui-text-secondary);margin:0 0 .5rem;white-space:nowrap}\n"] }]
+        }] });
 
 class TuiDocSourceCode {
     constructor() {
         this.icons = inject(TUI_DOC_ICONS);
         this.sourceCode = inject(TUI_DOC_SOURCE_CODE);
         this.text = inject(TUI_DOC_SOURCE_CODE_TEXT);
-        this.header = '';
-        this.package = '';
-        this.type = '';
-        this.path = '';
-    }
-    get pathOptions() {
-        return this.getPathOptions(this.header, this.package, this.type, this.path);
-    }
-    pathIsUrl(path) {
-        return path.startsWith('http');
-    }
-    getPathOptions(header, packageName, type, path) {
-        return {
-            header,
-            package: packageName,
-            type,
-            path,
-        };
+        this.header = input('');
+        this.package = input('');
+        this.type = input('');
+        this.path = input('');
+        this.pathOptions = computed(() => ({
+            header: this.header(),
+            package: this.package(),
+            type: this.type(),
+            path: this.path(),
+        }));
+        this.pathIsUrl = computed(() => this.path()?.startsWith('http') ?? false);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiDocSourceCode, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: TuiDocSourceCode, isStandalone: true, selector: "tui-doc-source-code", inputs: { header: "header", package: "package", type: "type", path: "path" }, ngImport: i0, template: "<a\n    *polymorpheusOutlet=\"pathIsUrl(path) ? path : sourceCode as link; context: pathOptions\"\n    appearance=\"icon\"\n    size=\"s\"\n    target=\"_blank\"\n    tuiIconButton\n    type=\"button\"\n    [href]=\"link\"\n    [iconStart]=\"icons.code\"\n    [style.height]=\"'var(--tui-height-l)'\"\n>\n    {{ text }}\n</a>\n", dependencies: [{ kind: "directive", type: PolymorpheusOutlet, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }, { kind: "directive", type: TuiButton, selector: "a[tuiButton],button[tuiButton],a[tuiIconButton],button[tuiIconButton]", inputs: ["size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.15", type: TuiDocSourceCode, isStandalone: true, selector: "tui-doc-source-code", inputs: { header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, package: { classPropertyName: "package", publicName: "package", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, path: { classPropertyName: "path", publicName: "path", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<a\n    *polymorpheusOutlet=\"pathIsUrl() ? path() : sourceCode as link; context: pathOptions()\"\n    appearance=\"icon\"\n    size=\"s\"\n    target=\"_blank\"\n    tuiIconButton\n    type=\"button\"\n    [href]=\"link\"\n    [iconStart]=\"icons.code\"\n    [style.height]=\"'var(--tui-height-l)'\"\n>\n    {{ text }}\n</a>\n", dependencies: [{ kind: "directive", type: PolymorpheusOutlet, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }, { kind: "directive", type: TuiButton, selector: "a[tuiButton],button[tuiButton],a[tuiIconButton],button[tuiIconButton]", inputs: ["size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-__decorate([
-    tuiPure
-], TuiDocSourceCode.prototype, "pathIsUrl", null);
-__decorate([
-    tuiPure
-], TuiDocSourceCode.prototype, "getPathOptions", null);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiDocSourceCode, decorators: [{
             type: Component,
-            args: [{ selector: 'tui-doc-source-code', imports: [PolymorpheusOutlet, TuiButton], changeDetection: ChangeDetectionStrategy.OnPush, template: "<a\n    *polymorpheusOutlet=\"pathIsUrl(path) ? path : sourceCode as link; context: pathOptions\"\n    appearance=\"icon\"\n    size=\"s\"\n    target=\"_blank\"\n    tuiIconButton\n    type=\"button\"\n    [href]=\"link\"\n    [iconStart]=\"icons.code\"\n    [style.height]=\"'var(--tui-height-l)'\"\n>\n    {{ text }}\n</a>\n" }]
-        }], propDecorators: { header: [{
-                type: Input
-            }], package: [{
-                type: Input
-            }], type: [{
-                type: Input
-            }], path: [{
-                type: Input
-            }], pathIsUrl: [], getPathOptions: [] } });
+            args: [{ selector: 'tui-doc-source-code', imports: [PolymorpheusOutlet, TuiButton], changeDetection: ChangeDetectionStrategy.OnPush, template: "<a\n    *polymorpheusOutlet=\"pathIsUrl() ? path() : sourceCode as link; context: pathOptions()\"\n    appearance=\"icon\"\n    size=\"s\"\n    target=\"_blank\"\n    tuiIconButton\n    type=\"button\"\n    [href]=\"link\"\n    [iconStart]=\"icons.code\"\n    [style.height]=\"'var(--tui-height-l)'\"\n>\n    {{ text }}\n</a>\n" }]
+        }] });
 
 class TuiDocLanguageSwitcher {
     constructor() {
@@ -1301,26 +1227,25 @@ const PAGE_PROVIDERS = [
                 .join()
                 .split(',')
                 .filter((component) => component && component !== currentHeader));
-            return Array.from(seeAlsoSet);
+            return signal(Array.from(seeAlsoSet));
         },
     },
 ];
 
 class TuiDocPageTabConnector {
     constructor() {
+        this.pageTab = input();
         this.template = inject((TemplateRef));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiDocPageTabConnector, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.15", type: TuiDocPageTabConnector, isStandalone: true, selector: "ng-template[pageTab]", inputs: { pageTab: "pageTab" }, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.15", type: TuiDocPageTabConnector, isStandalone: true, selector: "ng-template[pageTab]", inputs: { pageTab: { classPropertyName: "pageTab", publicName: "pageTab", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiDocPageTabConnector, decorators: [{
             type: Directive,
             args: [{
                     selector: 'ng-template[pageTab]',
                 }]
-        }], propDecorators: { pageTab: [{
-                type: Input
-            }] } });
+        }] });
 
 class TuiDocPage {
     constructor() {
@@ -1329,21 +1254,21 @@ class TuiDocPage {
         this.defaultTabs = inject(TUI_DOC_DEFAULT_TABS);
         this.from = / /g;
         this.to = '_';
-        this.header = '';
-        this.package = '';
-        this.type = '';
-        this.tags = [];
-        this.path = '';
-        this.deprecated = false;
+        this.header = input('');
+        this.package = input('');
+        this.type = input('');
+        this.tags = input([]);
+        this.path = input('');
+        this.deprecated = input(false);
         this.tabConnectors = EMPTY_QUERY;
-        this.activeItemIndex = 0;
+        this.activeItemIndex = model(0);
         this.seeAlso = inject(PAGE_SEE_ALSO);
-    }
-    get showSeeAlso() {
-        return !!this.seeAlso.length && this.activeItemIndex === 0;
+        this.showSeeAlso = computed(() => {
+            return !!this.seeAlso().length && this.activeItemIndex() === 0;
+        });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiDocPage, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", 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    @if (header) {\n        <h1 class=\"t-title\">\n            {{ header }}\n            @if (!!deprecated || deprecated === '') {\n                <tui-chip\n                    appearance=\"custom\"\n                    size=\"xs\"\n                    class=\"t-tag t-tag_deprecated\"\n                >\n                    deprecated\n                </tui-chip>\n            }\n            @if (package) {\n                <tui-chip\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            }\n            @for (tag of tags; track tag) {\n                <tui-chip\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            }\n        </h1>\n    }\n    @if (tabConnectors.length) {\n        <tui-tabs-with-more\n            class=\"t-tabs\"\n            [(activeItemIndex)]=\"activeItemIndex\"\n        >\n            @for (tab of tabConnectors; track tab) {\n                @if (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                }\n            }\n            @for (tab of tabs | keyvalue; track tab) {\n                <a\n                    *tuiItem\n                    routerLinkActive\n                    tuiTab\n                    [routerLink]=\"tab.key\"\n                >\n                    {{ tab.key }}\n                </a>\n            }\n        </tui-tabs-with-more>\n    }\n\n    @if (package || path || type) {\n        <div class=\"t-right-side\">\n            <tui-doc-source-code\n                class=\"t-source-code\"\n                [header]=\"header\"\n                [package]=\"package\"\n                [path]=\"path\"\n                [type]=\"type\"\n            />\n            @if (supportLanguage.has(header)) {\n                <tui-doc-language-switcher />\n            }\n        </div>\n    }\n</header>\n<div class=\"t-content\">\n    <ng-content />\n    @if (showSeeAlso) {\n        <tui-doc-see-also\n            class=\"t-see-also\"\n            [seeAlso]=\"seeAlso\"\n        />\n    }\n    @for (tab of tabConnectors; track tab) {\n        @if ($index === activeItemIndex) {\n            <ng-container [ngTemplateOutlet]=\"tab.template\" />\n        }\n    }\n    @for (tab of tabs | keyvalue; track tab) {\n        @if ($index + tabConnectors.length === activeItemIndex) {\n            <ng-container *polymorpheusOutlet=\"tab.value as text\">{{ text }}</ng-container>\n        }\n    }\n</div>\n", styles: [":host{display:flex;flex-direction:column;min-block-size:0;flex-basis:0;flex-grow:1;font:var(--tui-font-text-m)}.t-header{display:flex;font:var(--tui-font-heading-3);flex-wrap:wrap;color:var(--tui-text-primary);box-shadow:inset 0 -1px 0 0 var(--tui-border-normal);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:0 1.25rem;margin:0}}.t-title{min-inline-size:100%;padding:3.75rem 0 0;font-size:inherit;margin:0}@media screen and (max-width: 47.9625em){.t-title{padding:1.25rem 0 0}}.t-tag{vertical-align:middle;text-transform:uppercase;margin-inline-end:.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-block-start:.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:0 0 1rem;margin-inline-start: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-inline-start:auto}.t-source-code{block-size:3.125rem}\n"], dependencies: [{ kind: "pipe", type: KeyValuePipe, name: "keyvalue" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: PolymorpheusOutlet, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: TuiDocPage, isStandalone: true, selector: "tui-doc-page", inputs: { header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, package: { classPropertyName: "package", publicName: "package", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, tags: { classPropertyName: "tags", publicName: "tags", isSignal: true, isRequired: false, transformFunction: null }, path: { classPropertyName: "path", publicName: "path", isSignal: true, isRequired: false, transformFunction: null }, deprecated: { classPropertyName: "deprecated", publicName: "deprecated", isSignal: true, isRequired: false, transformFunction: null }, activeItemIndex: { classPropertyName: "activeItemIndex", publicName: "activeItemIndex", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeItemIndex: "activeItemIndexChange" }, providers: PAGE_PROVIDERS, queries: [{ propertyName: "tabConnectors", predicate: TuiDocPageTabConnector }], ngImport: i0, template: "<header class=\"t-header\">\n    @if (header()) {\n        <h1 class=\"t-title\">\n            {{ header() }}\n            @if (!!deprecated() || deprecated() === '') {\n                <tui-chip\n                    appearance=\"custom\"\n                    size=\"xs\"\n                    class=\"t-tag t-tag_deprecated\"\n                >\n                    deprecated\n                </tui-chip>\n            }\n            @if (package()) {\n                <tui-chip\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            }\n            @for (tag of tags(); track tag) {\n                <tui-chip\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            }\n        </h1>\n    }\n    @if (tabConnectors.length) {\n        <tui-tabs-with-more\n            class=\"t-tabs\"\n            [(activeItemIndex)]=\"activeItemIndex\"\n        >\n            @for (tab of tabConnectors; track tab) {\n                @if (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                }\n            }\n            @for (tab of tabs | keyvalue; track tab) {\n                <a\n                    *tuiItem\n                    routerLinkActive\n                    tuiTab\n                    [routerLink]=\"tab.key\"\n                >\n                    {{ tab.key }}\n                </a>\n            }\n        </tui-tabs-with-more>\n    }\n\n    @if (package() || path() || type()) {\n        <div class=\"t-right-side\">\n            <tui-doc-source-code\n                class=\"t-source-code\"\n                [header]=\"header()\"\n                [package]=\"package()\"\n                [path]=\"path()\"\n                [type]=\"type()\"\n            />\n            @if (supportLanguage.has(header())) {\n                <tui-doc-language-switcher />\n            }\n        </div>\n    }\n</header>\n<div class=\"t-content\">\n    <ng-content />\n    @if (showSeeAlso()) {\n        <tui-doc-see-also\n            class=\"t-see-also\"\n            [seeAlso]=\"seeAlso()\"\n        />\n    }\n    @for (tab of tabConnectors; track tab) {\n        @if ($index === activeItemIndex()) {\n            <ng-container [ngTemplateOutlet]=\"tab.template\" />\n        }\n    }\n    @for (tab of tabs | keyvalue; track tab) {\n        @if ($index + tabConnectors.length === activeItemIndex()) {\n            <ng-container *polymorpheusOutlet=\"tab.value as text\">{{ text }}</ng-container>\n        }\n    }\n</div>\n", styles: [":host{display:flex;flex-direction:column;min-block-size:0;flex-basis:0;flex-grow:1;font:var(--tui-font-text-m)}.t-header{display:flex;font:var(--tui-font-heading-3);flex-wrap:wrap;color:var(--tui-text-primary);box-shadow:inset 0 -1px 0 0 var(--tui-border-normal);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:0 1.25rem;margin:0}}.t-title{min-inline-size:100%;padding:3.75rem 0 0;font-size:inherit;margin:0}@media screen and (max-width: 47.9625em){.t-title{padding:1.25rem 0 0}}.t-tag{vertical-align:middle;text-transform:uppercase;margin-inline-end:.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-block-start:.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:0 0 1rem;margin-inline-start: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-inline-start:auto}.t-source-code{block-size:3.125rem}\n"], dependencies: [{ kind: "pipe", type: KeyValuePipe, name: "keyvalue" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: PolymorpheusOutlet, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "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: "19.2.15", ngImport: i0, type: TuiDocPage, decorators: [{
             type: Component,
@@ -1360,20 +1285,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                         TuiDocSourceCode,
                         TuiReplacePipe,
                         TuiTabs,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, providers: PAGE_PROVIDERS, template: "<header class=\"t-header\">\n    @if (header) {\n        <h1 class=\"t-title\">\n            {{ header }}\n            @if (!!deprecated || deprecated === '') {\n                <tui-chip\n                    appearance=\"custom\"\n                    size=\"xs\"\n                    class=\"t-tag t-tag_deprecated\"\n                >\n                    deprecated\n                </tui-chip>\n            }\n            @if (package) {\n                <tui-chip\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            }\n            @for (tag of tags; track tag) {\n                <tui-chip\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            }\n        </h1>\n    }\n    @if (tabConnectors.length) {\n        <tui-tabs-with-more\n            class=\"t-tabs\"\n            [(activeItemIndex)]=\"activeItemIndex\"\n        >\n            @for (tab of tabConnectors; track tab) {\n                @if (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                }\n            }\n            @for (tab of tabs | keyvalue; track tab) {\n                <a\n                    *tuiItem\n                    routerLinkActive\n                    tuiTab\n                    [routerLink]=\"tab.key\"\n                >\n                    {{ tab.key }}\n                </a>\n            }\n        </tui-tabs-with-more>\n    }\n\n    @if (package || path || type) {\n        <div class=\"t-right-side\">\n            <tui-doc-source-code\n                class=\"t-source-code\"\n                [header]=\"header\"\n                [package]=\"package\"\n                [path]=\"path\"\n                [type]=\"type\"\n            />\n            @if (supportLanguage.has(header)) {\n                <tui-doc-language-switcher />\n            }\n        </div>\n    }\n</header>\n<div class=\"t-content\">\n    <ng-content />\n    @if (showSeeAlso) {\n        <tui-doc-see-also\n            class=\"t-see-also\"\n            [seeAlso]=\"seeAlso\"\n        />\n    }\n    @for (tab of tabConnectors; track tab) {\n        @if ($index === activeItemIndex) {\n            <ng-container [ngTemplateOutlet]=\"tab.template\" />\n        }\n    }\n    @for (tab of tabs | keyvalue; track tab) {\n        @if ($index + tabConnectors.length === activeItemIndex) {\n            <ng-container *polymorpheusOutlet=\"tab.value as text\">{{ text }}</ng-container>\n        }\n    }\n</div>\n", styles: [":host{display:flex;flex-direction:column;min-block-size:0;flex-basis:0;flex-grow:1;font:var(--tui-font-text-m)}.t-header{display:flex;font:var(--tui-font-heading-3);flex-wrap:wrap;color:var(--tui-text-primary);box-shadow:inset 0 -1px 0 0 var(--tui-border-normal);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:0 1.25rem;margin:0}}.t-title{min-inline-size:100%;padding:3.75rem 0 0;font-size:inherit;margin:0}@media screen and (max-width: 47.9625em){.t-title{padding:1.25rem 0 0}}.t-tag{vertical-align:middle;text-transform:uppercase;margin-inline-end:.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-block-start:.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:0 0 1rem;margin-inline-start: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-inline-start:auto}.t-source-code{block-size:3.125rem}\n"] }]
-        }], propDecorators: { header: [{
-                type: Input
-            }], package: [{
-                type: Input
-            }], type: [{
-                type: Input
-            }], tags: [{
-                type: Input
-            }], path: [{
-                type: Input
-            }], deprecated: [{
-                type: Input
-            }], tabConnectors: [{
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, providers: PAGE_PROVIDERS, template: "<header class=\"t-header\">\n    @if (header()) {\n        <h1 class=\"t-title\">\n            {{ header() }}\n            @if (!!deprecated() || deprecated() === '') {\n                <tui-chip\n                    appearance=\"custom\"\n                    size=\"xs\"\n                    class=\"t-tag t-tag_deprecated\"\n                >\n                    deprecated\n                </tui-chip>\n            }\n            @if (package()) {\n                <tui-chip\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            }\n            @for (tag of tags(); track tag) {\n                <tui-chip\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            }\n        </h1>\n    }\n    @if (tabConnectors.length) {\n        <tui-tabs-with-more\n            class=\"t-tabs\"\n            [(activeItemIndex)]=\"activeItemIndex\"\n        >\n            @for (tab of tabConnectors; track tab) {\n                @if (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                }\n            }\n            @for (tab of tabs | keyvalue; track tab) {\n                <a\n                    *tuiItem\n                    routerLinkActive\n                    tuiTab\n                    [routerLink]=\"tab.key\"\n                >\n                    {{ tab.key }}\n                </a>\n            }\n        </tui-tabs-with-more>\n    }\n\n    @if (package() || path() || type()) {\n        <div class=\"t-right-side\">\n            <tui-doc-source-code\n                class=\"t-source-code\"\n                [header]=\"header()\"\n                [package]=\"package()\"\n                [path]=\"path()\"\n                [type]=\"type()\"\n            />\n            @if (supportLanguage.has(header())) {\n                <tui-doc-language-switcher />\n            }\n        </div>\n    }\n</header>\n<div class=\"t-content\">\n    <ng-content />\n    @if (showSeeAlso()) {\n        <tui-doc-see-also\n            class=\"t-see-also\"\n            [seeAlso]=\"seeAlso()\"\n        />\n    }\n    @for (tab of tabConnectors; track tab) {\n        @if ($index === activeItemIndex()) {\n            <ng-container [ngTemplateOutlet]=\"tab.template\" />\n        }\n    }\n    @for (tab of tabs | keyvalue; track tab) {\n        @if ($index + tabConnectors.length === activeItemIndex()) {\n            <ng-container *polymorpheusOutlet=\"tab.value as text\">{{ text }}</ng-container>\n        }\n    }\n</div>\n", styles: [":host{display:flex;flex-direction:column;min-block-size:0;flex-basis:0;flex-grow:1;font:var(--tui-font-text-m)}.t-header{display:flex;font:var(--tui-font-heading-3);flex-wrap:wrap;color:var(--tui-text-primary);box-shadow:inset 0 -1px 0 0 var(--tui-border-normal);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:0 1.25rem;margin:0}}.t-title{min-inline-size:100%;padding:3.75rem 0 0;font-size:inherit;margin:0}@media screen and (max-width: 47.9625em){.t-title{padding:1.25rem 0 0}}.t-tag{vertical-align:middle;text-transform:uppercase;margin-inline-end:.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-block-start:.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:0 0 1rem;margin-inline-start: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-inline-start:auto}.t-source-code{block-size:3.125rem}\n"] }]
+        }], propDecorators: { tabConnectors: [{
                 type: ContentChildren,
                 args: [TuiDocPageTabConnector]
             }] } });