@taiga-ui/addon-doc 5.13.0 → 5.14.0

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

@@ -157,6 +157,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
         }] });
 
 const SERIALIZED_SUFFIX = '$';
+const SERIALIZED_NULL = 'null';
 class TuiDocAPIItem {
     constructor() {
         this.locationRef = inject(Location);
@@ -175,7 +176,8 @@ class TuiDocAPIItem {
         this.type = input('');
         this.value = model();
         this.items = input([], { transform: (v) => v || [] });
-        this.hasCleaner = computed(() => this.type().includes('null') || this.type().includes('PolymorpheusContent'));
+        this.hasCleaner = computed((type = this.type(), value = this.value()) => (type.includes(SERIALIZED_NULL) || type.includes('PolymorpheusContent')) &&
+            (value ?? SERIALIZED_NULL) !== SERIALIZED_NULL);
     }
     ngOnInit() {
         this.parseParams(this.activatedRoute.snapshot.queryParams);
@@ -224,7 +226,7 @@ class TuiDocAPIItem {
         this.locationRef.go(this.urlStateHandler(tree));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TuiDocAPIItem, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", 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    <div class=\"t-description\"><ng-content /></div>\n</td>\n<td class=\"t-td\">\n    <code class=\"t-type\">\n        @for (item of type() | tuiTypeReference; track item) {\n            @if (item.reference) {\n                <a\n                    rel=\"noreferrer\"\n                    target=\"_blank\"\n                    class=\"t-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</td>\n<td\n    tuiTextfieldSize=\"m\"\n    class=\"t-td\"\n>\n    @if (items().length) {\n        <tui-textfield\n            tuiChevron\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                [itemContent]=\"content\"\n                [items]=\"items()\"\n            />\n        </tui-textfield>\n    } @else {\n        @if (value() !== undefined) {\n            @if (type() === 'boolean') {\n                <input\n                    tuiSwitch\n                    type=\"checkbox\"\n                    [id]=\"name()\"\n                    [ngModel]=\"value()\"\n                    (ngModelChange)=\"onValueChange($event)\"\n                />\n            }\n\n            @if (type() === 'string') {\n                <tui-textfield class=\"t-input\">\n                    <input\n                        tuiInput\n                        [id]=\"name()\"\n                        [ngModel]=\"value() || ''\"\n                        (ngModelChange)=\"onValueChange($event)\"\n                    />\n                </tui-textfield>\n            }\n\n            @if (type() === 'number' || type() === 'bigint' || type() === 'number | bigint') {\n                <tui-textfield class=\"t-input\">\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    <ng-template\n        #content\n        let-data\n    >\n        <code [style.margin]=\"0\">{{ data | tuiInspect }}</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-td .t-name,.t-td .t-type{outline:none;font-weight:700;margin:0}.t-name{display:inline-flex!important;min-block-size:1.5rem;inline-size:fit-content;-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}.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:-.625rem}.t-input code{overflow:hidden;white-space:nowrap}.t-description{display:inline;font:var(--tui-typography-body-s);color:var(--tui-text-secondary)}.t-description:not(:empty):before{content:\" \\2013  \"}@media screen and (max-width:767.4px){: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])", inputs: ["items", "emptyContent", "size", "itemContent"], outputs: ["itemClick"] }, { kind: "component", type: i5.TuiTextfieldComponent, selector: "tui-textfield:not([multi])", inputs: ["content", "filler"] }, { kind: "directive", type: i5.TuiTextfieldOptionsDirective, selector: "[tuiTextfieldAppearance],[tuiTextfieldSize],[tuiTextfieldCleaner]", inputs: ["tuiTextfieldAppearance", "tuiTextfieldSize", "tuiTextfieldCleaner"] }, { kind: "directive", type: i6.TuiDropdownContent, selector: "ng-template[tuiDropdown]" }, { kind: "directive", type: i5$1.TuiInputDirective, selector: "input[tuiInput]", inputs: ["readOnly", "invalid", "focused", "state"] }, { kind: "directive", type: i6$1.TuiInputNumberDirective, selector: "input[tuiInputNumber]" }, { kind: "directive", type: i6$1.TuiInputNumberStep, selector: "input[tuiInputNumber][step]", inputs: ["step"] }, { kind: "pipe", type: TuiInspectPipe, name: "tuiInspect" }, { kind: "directive", type: i3.TuiSelectDirective, selector: "input[tuiSelect]" }, { kind: "component", type: TuiSwitch, selector: "input[type=\"checkbox\"][tuiSwitch]", inputs: ["showIcons"] }, { kind: "pipe", type: TuiTypeReferencePipe, name: "tuiTypeReference" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", 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    <div class=\"t-description\"><ng-content /></div>\n</td>\n<td class=\"t-td\">\n    <code class=\"t-type\">\n        @for (item of type() | tuiTypeReference; track item) {\n            @if (item.reference) {\n                <a\n                    rel=\"noreferrer\"\n                    target=\"_blank\"\n                    class=\"t-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</td>\n<td\n    tuiTextfieldSize=\"m\"\n    class=\"t-td\"\n>\n    @if (items().length) {\n        <tui-textfield\n            tuiChevron\n            class=\"t-input\"\n            [content]=\"content\"\n            [tuiTextfieldCleaner]=\"hasCleaner()\"\n        >\n            <input\n                tuiSelect\n                [ngModel]=\"value() ?? 'null'\"\n                (ngModelChange)=\"onValueChange($event === 'null' ? null : $event)\"\n            />\n            <tui-data-list-wrapper\n                *tuiDropdown\n                [itemContent]=\"content\"\n                [items]=\"items()\"\n            />\n        </tui-textfield>\n    } @else {\n        @if (value() !== undefined) {\n            @if (type() === 'boolean') {\n                <input\n                    tuiSwitch\n                    type=\"checkbox\"\n                    [id]=\"name()\"\n                    [ngModel]=\"value()\"\n                    (ngModelChange)=\"onValueChange($event)\"\n                />\n            }\n\n            @if (type() === 'string') {\n                <tui-textfield class=\"t-input\">\n                    <input\n                        tuiInput\n                        [id]=\"name()\"\n                        [ngModel]=\"value() || ''\"\n                        (ngModelChange)=\"onValueChange($event)\"\n                    />\n                </tui-textfield>\n            }\n\n            @if (type() === 'number' || type() === 'bigint' || type() === 'number | bigint') {\n                <tui-textfield class=\"t-input\">\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    <ng-template\n        #content\n        let-data\n    >\n        <code [style.margin]=\"0\">{{ data === 'null' ? 'null' : (data | tuiInspect) }}</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-td .t-name,.t-td .t-type{outline:none;font-weight:700;margin:0}.t-name{display:inline-flex!important;min-block-size:1.5rem;inline-size:fit-content;-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}.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:-.625rem}.t-input code{overflow:hidden;white-space:nowrap}.t-description{display:inline;font:var(--tui-typography-body-s);color:var(--tui-text-secondary)}.t-description:not(:empty):before{content:\" \\2013  \"}@media screen and (max-width:767.4px){: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])", inputs: ["items", "emptyContent", "size", "itemContent"], outputs: ["itemClick"] }, { kind: "component", type: i5.TuiTextfieldComponent, selector: "tui-textfield:not([multi])", inputs: ["content", "filler"] }, { kind: "directive", type: i5.TuiTextfieldOptionsDirective, selector: "[tuiTextfieldAppearance],[tuiTextfieldSize],[tuiTextfieldCleaner]", inputs: ["tuiTextfieldAppearance", "tuiTextfieldSize", "tuiTextfieldCleaner"] }, { kind: "directive", type: i6.TuiDropdownContent, selector: "ng-template[tuiDropdown]" }, { kind: "directive", type: i5$1.TuiInputDirective, selector: "input[tuiInput]", inputs: ["readOnly", "invalid", "focused", "state"] }, { kind: "directive", type: i6$1.TuiInputNumberDirective, selector: "input[tuiInputNumber]" }, { kind: "directive", type: i6$1.TuiInputNumberStep, selector: "input[tuiInputNumber][step]", inputs: ["step"] }, { kind: "pipe", type: TuiInspectPipe, name: "tuiInspect" }, { kind: "directive", type: i3.TuiSelectDirective, selector: "input[tuiSelect]" }, { kind: "component", type: TuiSwitch, selector: "input[type=\"checkbox\"][tuiSwitch]", inputs: ["showIcons"] }, { kind: "pipe", type: TuiTypeReferencePipe, name: "tuiTypeReference" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TuiDocAPIItem, decorators: [{
             type: Component,
@@ -238,7 +240,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
                         TuiSelect,
                         TuiSwitch,
                         TuiTypeReferencePipe,
-                    ], 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    <div class=\"t-description\"><ng-content /></div>\n</td>\n<td class=\"t-td\">\n    <code class=\"t-type\">\n        @for (item of type() | tuiTypeReference; track item) {\n            @if (item.reference) {\n                <a\n                    rel=\"noreferrer\"\n                    target=\"_blank\"\n                    class=\"t-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</td>\n<td\n    tuiTextfieldSize=\"m\"\n    class=\"t-td\"\n>\n    @if (items().length) {\n        <tui-textfield\n            tuiChevron\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                [itemContent]=\"content\"\n                [items]=\"items()\"\n            />\n        </tui-textfield>\n    } @else {\n        @if (value() !== undefined) {\n            @if (type() === 'boolean') {\n                <input\n                    tuiSwitch\n                    type=\"checkbox\"\n                    [id]=\"name()\"\n                    [ngModel]=\"value()\"\n                    (ngModelChange)=\"onValueChange($event)\"\n                />\n            }\n\n            @if (type() === 'string') {\n                <tui-textfield class=\"t-input\">\n                    <input\n                        tuiInput\n                        [id]=\"name()\"\n                        [ngModel]=\"value() || ''\"\n                        (ngModelChange)=\"onValueChange($event)\"\n                    />\n                </tui-textfield>\n            }\n\n            @if (type() === 'number' || type() === 'bigint' || type() === 'number | bigint') {\n                <tui-textfield class=\"t-input\">\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    <ng-template\n        #content\n        let-data\n    >\n        <code [style.margin]=\"0\">{{ data | tuiInspect }}</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-td .t-name,.t-td .t-type{outline:none;font-weight:700;margin:0}.t-name{display:inline-flex!important;min-block-size:1.5rem;inline-size:fit-content;-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}.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:-.625rem}.t-input code{overflow:hidden;white-space:nowrap}.t-description{display:inline;font:var(--tui-typography-body-s);color:var(--tui-text-secondary)}.t-description:not(:empty):before{content:\" \\2013  \"}@media screen and (max-width:767.4px){:host{gap:1rem;padding:1rem 0}.t-td{padding:0}.t-td:last-child{text-align:start}.t-input{margin:0}}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<td class=\"t-td\">\n    <code\n        class=\"t-name\"\n        [class.t-name_banana]=\"isBananaBox()\"\n        [class.t-name_input]=\"isInput()\"\n        [class.t-name_output]=\"isOutput()\"\n    >\n        {{ name() }}\n    </code>\n    <div class=\"t-description\"><ng-content /></div>\n</td>\n<td class=\"t-td\">\n    <code class=\"t-type\">\n        @for (item of type() | tuiTypeReference; track item) {\n            @if (item.reference) {\n                <a\n                    rel=\"noreferrer\"\n                    target=\"_blank\"\n                    class=\"t-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</td>\n<td\n    tuiTextfieldSize=\"m\"\n    class=\"t-td\"\n>\n    @if (items().length) {\n        <tui-textfield\n            tuiChevron\n            class=\"t-input\"\n            [content]=\"content\"\n            [tuiTextfieldCleaner]=\"hasCleaner()\"\n        >\n            <input\n                tuiSelect\n                [ngModel]=\"value() ?? 'null'\"\n                (ngModelChange)=\"onValueChange($event === 'null' ? null : $event)\"\n            />\n            <tui-data-list-wrapper\n                *tuiDropdown\n                [itemContent]=\"content\"\n                [items]=\"items()\"\n            />\n        </tui-textfield>\n    } @else {\n        @if (value() !== undefined) {\n            @if (type() === 'boolean') {\n                <input\n                    tuiSwitch\n                    type=\"checkbox\"\n                    [id]=\"name()\"\n                    [ngModel]=\"value()\"\n                    (ngModelChange)=\"onValueChange($event)\"\n                />\n            }\n\n            @if (type() === 'string') {\n                <tui-textfield class=\"t-input\">\n                    <input\n                        tuiInput\n                        [id]=\"name()\"\n                        [ngModel]=\"value() || ''\"\n                        (ngModelChange)=\"onValueChange($event)\"\n                    />\n                </tui-textfield>\n            }\n\n            @if (type() === 'number' || type() === 'bigint' || type() === 'number | bigint') {\n                <tui-textfield class=\"t-input\">\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    <ng-template\n        #content\n        let-data\n    >\n        <code [style.margin]=\"0\">{{ data === 'null' ? 'null' : (data | tuiInspect) }}</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-td .t-name,.t-td .t-type{outline:none;font-weight:700;margin:0}.t-name{display:inline-flex!important;min-block-size:1.5rem;inline-size:fit-content;-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}.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:-.625rem}.t-input code{overflow:hidden;white-space:nowrap}.t-description{display:inline;font:var(--tui-typography-body-s);color:var(--tui-text-secondary)}.t-description:not(:empty):before{content:\" \\2013  \"}@media screen and (max-width:767.4px){:host{gap:1rem;padding:1rem 0}.t-td{padding:0}.t-td:last-child{text-align:start}.t-input{margin:0}}\n"] }]
         }] });
 
 class TuiDocCode {
@@ -282,11 +284,11 @@ class TuiDocCopy {
         this.copy$.next();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TuiDocCopy, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: TuiDocCopy, isStandalone: true, selector: "tui-doc-copy", ngImport: i0, template: "<button\n    appearance=\"\"\n    size=\"s\"\n    tuiButton\n    type=\"button\"\n    class=\"t-copy\"\n    (click)=\"onClick()\"\n>\n    <span class=\"t-content\">\n        <span\n            class=\"t-initial\"\n            [attr.data-text]=\"copied() ? '' : texts()[0]\"\n        >\n            @if (!copied()) {\n                <ng-content />\n            }\n        </span>\n        {{ copied() ? texts()[1] : '' }}\n    </span>\n</button>\n", styles: [":host{position:relative;display:inline-block;vertical-align:middle;border-radius:var(--tui-radius-m)}.t-copy{transition-property:background;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;inline-size:100%;block-size:100%;color:var(--tui-text-primary);background:var(--tui-background-base);overflow:hidden}.t-copy:hover{background:var(--tui-background-base-alt)}.t-initial{white-space:nowrap;font-variant-ligatures:none}.t-initial:empty:before{content:attr(data-text)}.t-content{display:flex;flex-direction:column;text-align:center;padding:.375rem 0}\n"], dependencies: [{ 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.25", type: TuiDocCopy, isStandalone: true, selector: "tui-doc-copy", ngImport: i0, template: "<button\n    appearance=\"\"\n    size=\"s\"\n    tuiButton\n    type=\"button\"\n    class=\"t-copy\"\n    (click)=\"onClick()\"\n>\n    <span class=\"t-content\">\n        <span\n            class=\"t-initial\"\n            [attr.data-text]=\"copied() ? '' : texts()[0]\"\n        >\n            @if (!copied()) {\n                <ng-content />\n            }\n        </span>\n        {{ copied() ? texts()[1] : '' }}\n    </span>\n</button>\n", styles: [":host{position:relative;display:inline-block;vertical-align:middle;border-radius:var(--tui-radius-m)}.t-copy{transition-property:background;transition-duration:var(--tui-duration, .3s);transition-timing-function:var(--tui-curve-productive-standard);inline-size:100%;block-size:100%;color:var(--tui-text-primary);background:var(--tui-background-base);overflow:hidden}.t-copy:hover{background:var(--tui-background-base-alt)}.t-initial{white-space:nowrap;font-variant-ligatures:none}.t-initial:empty:before{content:attr(data-text)}.t-content{display:flex;flex-direction:column;text-align:center;padding:.375rem 0}\n"], dependencies: [{ 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.25", ngImport: i0, type: TuiDocCopy, decorators: [{
             type: Component,
-            args: [{ selector: 'tui-doc-copy', imports: [TuiButton], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n    appearance=\"\"\n    size=\"s\"\n    tuiButton\n    type=\"button\"\n    class=\"t-copy\"\n    (click)=\"onClick()\"\n>\n    <span class=\"t-content\">\n        <span\n            class=\"t-initial\"\n            [attr.data-text]=\"copied() ? '' : texts()[0]\"\n        >\n            @if (!copied()) {\n                <ng-content />\n            }\n        </span>\n        {{ copied() ? texts()[1] : '' }}\n    </span>\n</button>\n", styles: [":host{position:relative;display:inline-block;vertical-align:middle;border-radius:var(--tui-radius-m)}.t-copy{transition-property:background;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;inline-size:100%;block-size:100%;color:var(--tui-text-primary);background:var(--tui-background-base);overflow:hidden}.t-copy:hover{background:var(--tui-background-base-alt)}.t-initial{white-space:nowrap;font-variant-ligatures:none}.t-initial:empty:before{content:attr(data-text)}.t-content{display:flex;flex-direction:column;text-align:center;padding:.375rem 0}\n"] }]
+            args: [{ selector: 'tui-doc-copy', imports: [TuiButton], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n    appearance=\"\"\n    size=\"s\"\n    tuiButton\n    type=\"button\"\n    class=\"t-copy\"\n    (click)=\"onClick()\"\n>\n    <span class=\"t-content\">\n        <span\n            class=\"t-initial\"\n            [attr.data-text]=\"copied() ? '' : texts()[0]\"\n        >\n            @if (!copied()) {\n                <ng-content />\n            }\n        </span>\n        {{ copied() ? texts()[1] : '' }}\n    </span>\n</button>\n", styles: [":host{position:relative;display:inline-block;vertical-align:middle;border-radius:var(--tui-radius-m)}.t-copy{transition-property:background;transition-duration:var(--tui-duration, .3s);transition-timing-function:var(--tui-curve-productive-standard);inline-size:100%;block-size:100%;color:var(--tui-text-primary);background:var(--tui-background-base);overflow:hidden}.t-copy:hover{background:var(--tui-background-base-alt)}.t-initial{white-space:nowrap;font-variant-ligatures:none}.t-initial:empty:before{content:attr(data-text)}.t-content{display:flex;flex-direction:column;text-align:center;padding:.375rem 0}\n"] }]
         }] });
 
 const MIN_WIDTH = 160;
@@ -396,7 +398,7 @@ class TuiDocDemo {
         return this.urlSerializer.parse(this.locationRef.path());
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TuiDocDemo, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", 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: { "document:mouseup.zoneless": "onMouseUp()", "window:resize": "onResize()" }, properties: { "attr.tuiTheme": "theme()", "class._sticky": "sticky()" } }, queries: [{ propertyName: "template", first: true, predicate: (TemplateRef), descendants: true, isSignal: true }], viewQueries: [{ propertyName: "resizable", first: true, predicate: TuiResizable, descendants: true, read: ElementRef, isSignal: true }, { propertyName: "content", first: true, predicate: ["content"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"t-settings\">\n    <label tuiLabel>\n        <input\n            size=\"s\"\n            tuiSwitch\n            type=\"checkbox\"\n            [ngModel]=\"dark()\"\n            (ngModelChange)=\"onModeChange($event)\"\n        />\n        <small>{{ texts()[0] }}</small>\n    </label>\n    <label tuiLabel>\n        <input\n            size=\"s\"\n            tuiSwitch\n            type=\"checkbox\"\n            [ngModel]=\"opaque\"\n            (ngModelChange)=\"changeOpaque($event)\"\n        />\n        <small>{{ texts()[1] }}</small>\n    </label>\n</div>\n<div\n    tuiResizable\n    class=\"t-wrapper\"\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 (form) {\n                <form\n                    id=\"tui-demo-form\"\n                    [formGroup]=\"form\"\n                >\n                    <ng-container [ngTemplateOutlet]=\"template() || null\" />\n                </form>\n            }\n            <ng-content />\n        </div>\n    </div>\n    <div\n        class=\"t-resizer\"\n        [tuiResizer]=\"[1, 0]\"\n        (tuiSizeChange)=\"updateWidth($event[0])\"\n    >\n        <tui-icon [icon]=\"icons.resizer\" />\n    </div>\n</div>\n@if (form) {\n    <tui-expand [expanded]=\"expanded\">\n        <ng-template tuiItem>\n            <pre class=\"t-value\">Form data: {{ form.value | json }}</pre>\n        </ng-template>\n    </tui-expand>\n    <div class=\"t-footer\">\n        <button\n            appearance=\"flat-grayscale\"\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-textfield\n            tuiChevron\n            tuiTextfieldAppearance=\"secondary-grayscale\"\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            <tui-data-list-wrapper\n                *tuiDropdown\n                [items]=\"updateOnVariants\"\n            />\n        </tui-textfield>\n        <button\n            appearance=\"secondary-grayscale\"\n            automation-id=\"tui-demo-button__reset-state\"\n            form=\"tui-demo-form\"\n            size=\"s\"\n            tuiButton\n            type=\"reset\"\n        >\n            Reset\n        </button>\n        <button\n            appearance=\"secondary-grayscale\"\n            automation-id=\"tui-demo-button__submit-state\"\n            form=\"tui-demo-form\"\n            size=\"s\"\n            tuiButton\n            type=\"submit\"\n        >\n            Submit\n        </button>\n    </div>\n}\n", styles: [":host{position:relative;display:block;min-inline-size:100%;margin:0 0 1.5rem;font:var(--tui-typography-body-s);color:var(--tui-text-primary);background:var(--tui-background-base-alt);box-shadow:0 0 1rem .5rem var(--tui-background-base);border-radius:var(--tui-radius-m);overflow:hidden;box-sizing:border-box}:host[tuiTheme=dark]{box-shadow:none}:host :host-context([tuiTheme=\"dark\"]){background:var(--tui-background-elevation-2);box-shadow:0 0 1rem .5rem var(--tui-background-base)}:host :host-context([tuiTheme=\"dark\"])[tuiTheme=light]{box-shadow:none}.t-settings{display:flex;gap:1rem;align-items:center;justify-content:flex-end;padding:.5rem .75rem .25rem}.t-wrapper{display:flex;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);padding:.25rem;border-radius:var(--tui-radius-m);box-sizing:border-box;box-shadow:inset 0 0 0 .25rem var(--tui-background-base-alt);overflow:hidden;pointer-events:auto}:host-context([tuiTheme=\"dark\"]) .t-wrapper{box-shadow:inset 0 0 0 .25rem var(--tui-background-elevation-2)}.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:767.4px){.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:767.4px){.t-content{padding:1rem}}.t-footer{display:flex;gap:.25rem;padding:0 .25rem .25rem}.t-select{inline-size:6rem;margin-inline-start:auto}.t-value{flex:1;background:var(--tui-background-base);border-radius:var(--tui-radius-m);box-shadow:inset 0 -.25rem 0 .25rem var(--tui-background-base-alt);padding:.5rem .75rem 1rem;margin:0 0 -.25rem}:host-context([tuiTheme=\"dark\"]) .t-value{box-shadow:inset 0 -.25rem 0 .25rem var(--tui-background-elevation-2)}.t-resizer{transition-property:color;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;position:relative;display:flex;min-block-size:inherit;align-items:center;justify-content:center;flex-shrink:0;color:var(--tui-text-tertiary)}.t-resizer:hover,.t-resizer:active{color:var(--tui-text-secondary)}@media screen and (max-width:767.4px){.t-resizer{display:none}}@media screen and (min-height:37.5rem){:host._sticky{position:sticky;z-index:2;inset-block-start:4.625rem}}\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: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: TuiButton, selector: "a[tuiButton],button[tuiButton],a[tuiIconButton],button[tuiIconButton]", inputs: ["size"] }, { kind: "directive", type: TuiChevron, selector: "[tuiChevron]", inputs: ["tuiChevron"] }, { kind: "component", type: i2.TuiDataListWrapperComponent, selector: "tui-data-list-wrapper:not([labels])", inputs: ["items", "emptyContent", "size", "itemContent"], outputs: ["itemClick"] }, { kind: "component", type: TuiExpand, selector: "tui-expand", inputs: ["expanded"] }, { kind: "component", type: TuiIcon, selector: "tui-icon:not([tuiBadge])", inputs: ["background"] }, { kind: "directive", type: TuiItem, selector: "[tuiItem]" }, { kind: "pipe", type: TuiJsonPipe, name: "json" }, { kind: "directive", type: TuiResizable, selector: "[tuiResizable]" }, { kind: "directive", type: TuiResizer, selector: "[tuiResizer]", inputs: ["tuiResizer"], outputs: ["tuiSizeChange"] }, { kind: "directive", type: i3.TuiSelectDirective, selector: "input[tuiSelect]" }, { kind: "directive", type: i4.TuiLabel, selector: "label[tuiLabel]" }, { kind: "component", type: i5.TuiTextfieldComponent, selector: "tui-textfield:not([multi])", inputs: ["content", "filler"] }, { kind: "directive", type: i5.TuiTextfieldOptionsDirective, selector: "[tuiTextfieldAppearance],[tuiTextfieldSize],[tuiTextfieldCleaner]", inputs: ["tuiTextfieldAppearance", "tuiTextfieldSize", "tuiTextfieldCleaner"] }, { kind: "directive", type: i6.TuiDropdownContent, selector: "ng-template[tuiDropdown]" }, { kind: "component", type: TuiSwitch, selector: "input[type=\"checkbox\"][tuiSwitch]", inputs: ["showIcons"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", 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: { "document:mouseup.zoneless": "onMouseUp()", "window:resize": "onResize()" }, properties: { "attr.tuiTheme": "theme()", "class._sticky": "sticky()" } }, queries: [{ propertyName: "template", first: true, predicate: (TemplateRef), descendants: true, isSignal: true }], viewQueries: [{ propertyName: "resizable", first: true, predicate: TuiResizable, descendants: true, read: ElementRef, isSignal: true }, { propertyName: "content", first: true, predicate: ["content"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"t-settings\">\n    <label tuiLabel>\n        <input\n            size=\"s\"\n            tuiSwitch\n            type=\"checkbox\"\n            [ngModel]=\"dark()\"\n            (ngModelChange)=\"onModeChange($event)\"\n        />\n        <small>{{ texts()[0] }}</small>\n    </label>\n    <label tuiLabel>\n        <input\n            size=\"s\"\n            tuiSwitch\n            type=\"checkbox\"\n            [ngModel]=\"opaque\"\n            (ngModelChange)=\"changeOpaque($event)\"\n        />\n        <small>{{ texts()[1] }}</small>\n    </label>\n</div>\n<div\n    tuiResizable\n    class=\"t-wrapper\"\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 (form) {\n                <form\n                    id=\"tui-demo-form\"\n                    [formGroup]=\"form\"\n                >\n                    <ng-container [ngTemplateOutlet]=\"template() || null\" />\n                </form>\n            }\n            <ng-content />\n        </div>\n    </div>\n    <div\n        class=\"t-resizer\"\n        [tuiResizer]=\"[1, 0]\"\n        (tuiSizeChange)=\"updateWidth($event[0])\"\n    >\n        <tui-icon [icon]=\"icons.resizer\" />\n    </div>\n</div>\n@if (form) {\n    <tui-expand [expanded]=\"expanded\">\n        <ng-template tuiItem>\n            <pre class=\"t-value\">Form data: {{ form.value | json }}</pre>\n        </ng-template>\n    </tui-expand>\n    <div class=\"t-footer\">\n        <button\n            appearance=\"flat-grayscale\"\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-textfield\n            tuiChevron\n            tuiTextfieldAppearance=\"secondary-grayscale\"\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            <tui-data-list-wrapper\n                *tuiDropdown\n                [items]=\"updateOnVariants\"\n            />\n        </tui-textfield>\n        <button\n            appearance=\"secondary-grayscale\"\n            automation-id=\"tui-demo-button__reset-state\"\n            form=\"tui-demo-form\"\n            size=\"s\"\n            tuiButton\n            type=\"reset\"\n        >\n            Reset\n        </button>\n        <button\n            appearance=\"secondary-grayscale\"\n            automation-id=\"tui-demo-button__submit-state\"\n            form=\"tui-demo-form\"\n            size=\"s\"\n            tuiButton\n            type=\"submit\"\n        >\n            Submit\n        </button>\n    </div>\n}\n", styles: [":host{position:relative;display:block;min-inline-size:100%;margin:0 0 1.5rem;font:var(--tui-typography-body-s);color:var(--tui-text-primary);background:var(--tui-background-base-alt);box-shadow:0 0 1rem .5rem var(--tui-background-base);border-radius:var(--tui-radius-m);overflow:hidden;box-sizing:border-box}:host[tuiTheme=dark]{box-shadow:none}:host :host-context([tuiTheme=\"dark\"]){background:var(--tui-background-elevation-2);box-shadow:0 0 1rem .5rem var(--tui-background-base)}:host :host-context([tuiTheme=\"dark\"])[tuiTheme=light]{box-shadow:none}.t-settings{display:flex;gap:1rem;align-items:center;justify-content:flex-end;padding:.5rem .75rem .25rem}.t-wrapper{display:flex;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);padding:.25rem;border-radius:var(--tui-radius-m);box-sizing:border-box;box-shadow:inset 0 0 0 .25rem var(--tui-background-base-alt);overflow:hidden;pointer-events:auto}:host-context([tuiTheme=\"dark\"]) .t-wrapper{box-shadow:inset 0 0 0 .25rem var(--tui-background-elevation-2)}.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:767.4px){.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:767.4px){.t-content{padding:1rem}}.t-footer{display:flex;gap:.25rem;padding:0 .25rem .25rem}.t-select{inline-size:6rem;margin-inline-start:auto}.t-value{flex:1;background:var(--tui-background-base);border-radius:var(--tui-radius-m);box-shadow:inset 0 -.25rem 0 .25rem var(--tui-background-base-alt);padding:.5rem .75rem 1rem;margin:0 0 -.25rem}:host-context([tuiTheme=\"dark\"]) .t-value{box-shadow:inset 0 -.25rem 0 .25rem var(--tui-background-elevation-2)}.t-resizer{transition-property:color;transition-duration:var(--tui-duration, .3s);transition-timing-function:var(--tui-curve-productive-standard);position:relative;display:flex;min-block-size:inherit;align-items:center;justify-content:center;flex-shrink:0;color:var(--tui-text-tertiary)}.t-resizer:hover,.t-resizer:active{color:var(--tui-text-secondary)}@media screen and (max-width:767.4px){.t-resizer{display:none}}@media screen and (min-height:37.5rem){:host._sticky{position:sticky;z-index:2;inset-block-start:4.625rem}}\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: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: TuiButton, selector: "a[tuiButton],button[tuiButton],a[tuiIconButton],button[tuiIconButton]", inputs: ["size"] }, { kind: "directive", type: TuiChevron, selector: "[tuiChevron]", inputs: ["tuiChevron"] }, { kind: "component", type: i2.TuiDataListWrapperComponent, selector: "tui-data-list-wrapper:not([labels])", inputs: ["items", "emptyContent", "size", "itemContent"], outputs: ["itemClick"] }, { kind: "component", type: TuiExpand, selector: "tui-expand", inputs: ["expanded"] }, { kind: "component", type: TuiIcon, selector: "tui-icon:not([tuiBadge])", inputs: ["background"] }, { kind: "directive", type: TuiItem, selector: "[tuiItem]" }, { kind: "pipe", type: TuiJsonPipe, name: "json" }, { kind: "directive", type: TuiResizable, selector: "[tuiResizable]" }, { kind: "directive", type: TuiResizer, selector: "[tuiResizer]", inputs: ["tuiResizer"], outputs: ["tuiSizeChange"] }, { kind: "directive", type: i3.TuiSelectDirective, selector: "input[tuiSelect]" }, { kind: "directive", type: i4.TuiLabel, selector: "label[tuiLabel]" }, { kind: "component", type: i5.TuiTextfieldComponent, selector: "tui-textfield:not([multi])", inputs: ["content", "filler"] }, { kind: "directive", type: i5.TuiTextfieldOptionsDirective, selector: "[tuiTextfieldAppearance],[tuiTextfieldSize],[tuiTextfieldCleaner]", inputs: ["tuiTextfieldAppearance", "tuiTextfieldSize", "tuiTextfieldCleaner"] }, { kind: "directive", type: i6.TuiDropdownContent, selector: "ng-template[tuiDropdown]" }, { kind: "component", type: TuiSwitch, selector: "input[type=\"checkbox\"][tuiSwitch]", inputs: ["showIcons"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TuiDocDemo, decorators: [{
             type: Component,
@@ -421,7 +423,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
                         '[class._sticky]': 'sticky()',
                         '(document:mouseup.zoneless)': 'onMouseUp()',
                         '(window:resize)': 'onResize()',
-                    }, template: "<div class=\"t-settings\">\n    <label tuiLabel>\n        <input\n            size=\"s\"\n            tuiSwitch\n            type=\"checkbox\"\n            [ngModel]=\"dark()\"\n            (ngModelChange)=\"onModeChange($event)\"\n        />\n        <small>{{ texts()[0] }}</small>\n    </label>\n    <label tuiLabel>\n        <input\n            size=\"s\"\n            tuiSwitch\n            type=\"checkbox\"\n            [ngModel]=\"opaque\"\n            (ngModelChange)=\"changeOpaque($event)\"\n        />\n        <small>{{ texts()[1] }}</small>\n    </label>\n</div>\n<div\n    tuiResizable\n    class=\"t-wrapper\"\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 (form) {\n                <form\n                    id=\"tui-demo-form\"\n                    [formGroup]=\"form\"\n                >\n                    <ng-container [ngTemplateOutlet]=\"template() || null\" />\n                </form>\n            }\n            <ng-content />\n        </div>\n    </div>\n    <div\n        class=\"t-resizer\"\n        [tuiResizer]=\"[1, 0]\"\n        (tuiSizeChange)=\"updateWidth($event[0])\"\n    >\n        <tui-icon [icon]=\"icons.resizer\" />\n    </div>\n</div>\n@if (form) {\n    <tui-expand [expanded]=\"expanded\">\n        <ng-template tuiItem>\n            <pre class=\"t-value\">Form data: {{ form.value | json }}</pre>\n        </ng-template>\n    </tui-expand>\n    <div class=\"t-footer\">\n        <button\n            appearance=\"flat-grayscale\"\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-textfield\n            tuiChevron\n            tuiTextfieldAppearance=\"secondary-grayscale\"\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            <tui-data-list-wrapper\n                *tuiDropdown\n                [items]=\"updateOnVariants\"\n            />\n        </tui-textfield>\n        <button\n            appearance=\"secondary-grayscale\"\n            automation-id=\"tui-demo-button__reset-state\"\n            form=\"tui-demo-form\"\n            size=\"s\"\n            tuiButton\n            type=\"reset\"\n        >\n            Reset\n        </button>\n        <button\n            appearance=\"secondary-grayscale\"\n            automation-id=\"tui-demo-button__submit-state\"\n            form=\"tui-demo-form\"\n            size=\"s\"\n            tuiButton\n            type=\"submit\"\n        >\n            Submit\n        </button>\n    </div>\n}\n", styles: [":host{position:relative;display:block;min-inline-size:100%;margin:0 0 1.5rem;font:var(--tui-typography-body-s);color:var(--tui-text-primary);background:var(--tui-background-base-alt);box-shadow:0 0 1rem .5rem var(--tui-background-base);border-radius:var(--tui-radius-m);overflow:hidden;box-sizing:border-box}:host[tuiTheme=dark]{box-shadow:none}:host :host-context([tuiTheme=\"dark\"]){background:var(--tui-background-elevation-2);box-shadow:0 0 1rem .5rem var(--tui-background-base)}:host :host-context([tuiTheme=\"dark\"])[tuiTheme=light]{box-shadow:none}.t-settings{display:flex;gap:1rem;align-items:center;justify-content:flex-end;padding:.5rem .75rem .25rem}.t-wrapper{display:flex;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);padding:.25rem;border-radius:var(--tui-radius-m);box-sizing:border-box;box-shadow:inset 0 0 0 .25rem var(--tui-background-base-alt);overflow:hidden;pointer-events:auto}:host-context([tuiTheme=\"dark\"]) .t-wrapper{box-shadow:inset 0 0 0 .25rem var(--tui-background-elevation-2)}.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:767.4px){.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:767.4px){.t-content{padding:1rem}}.t-footer{display:flex;gap:.25rem;padding:0 .25rem .25rem}.t-select{inline-size:6rem;margin-inline-start:auto}.t-value{flex:1;background:var(--tui-background-base);border-radius:var(--tui-radius-m);box-shadow:inset 0 -.25rem 0 .25rem var(--tui-background-base-alt);padding:.5rem .75rem 1rem;margin:0 0 -.25rem}:host-context([tuiTheme=\"dark\"]) .t-value{box-shadow:inset 0 -.25rem 0 .25rem var(--tui-background-elevation-2)}.t-resizer{transition-property:color;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;position:relative;display:flex;min-block-size:inherit;align-items:center;justify-content:center;flex-shrink:0;color:var(--tui-text-tertiary)}.t-resizer:hover,.t-resizer:active{color:var(--tui-text-secondary)}@media screen and (max-width:767.4px){.t-resizer{display:none}}@media screen and (min-height:37.5rem){:host._sticky{position:sticky;z-index:2;inset-block-start:4.625rem}}\n"] }]
+                    }, template: "<div class=\"t-settings\">\n    <label tuiLabel>\n        <input\n            size=\"s\"\n            tuiSwitch\n            type=\"checkbox\"\n            [ngModel]=\"dark()\"\n            (ngModelChange)=\"onModeChange($event)\"\n        />\n        <small>{{ texts()[0] }}</small>\n    </label>\n    <label tuiLabel>\n        <input\n            size=\"s\"\n            tuiSwitch\n            type=\"checkbox\"\n            [ngModel]=\"opaque\"\n            (ngModelChange)=\"changeOpaque($event)\"\n        />\n        <small>{{ texts()[1] }}</small>\n    </label>\n</div>\n<div\n    tuiResizable\n    class=\"t-wrapper\"\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 (form) {\n                <form\n                    id=\"tui-demo-form\"\n                    [formGroup]=\"form\"\n                >\n                    <ng-container [ngTemplateOutlet]=\"template() || null\" />\n                </form>\n            }\n            <ng-content />\n        </div>\n    </div>\n    <div\n        class=\"t-resizer\"\n        [tuiResizer]=\"[1, 0]\"\n        (tuiSizeChange)=\"updateWidth($event[0])\"\n    >\n        <tui-icon [icon]=\"icons.resizer\" />\n    </div>\n</div>\n@if (form) {\n    <tui-expand [expanded]=\"expanded\">\n        <ng-template tuiItem>\n            <pre class=\"t-value\">Form data: {{ form.value | json }}</pre>\n        </ng-template>\n    </tui-expand>\n    <div class=\"t-footer\">\n        <button\n            appearance=\"flat-grayscale\"\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-textfield\n            tuiChevron\n            tuiTextfieldAppearance=\"secondary-grayscale\"\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            <tui-data-list-wrapper\n                *tuiDropdown\n                [items]=\"updateOnVariants\"\n            />\n        </tui-textfield>\n        <button\n            appearance=\"secondary-grayscale\"\n            automation-id=\"tui-demo-button__reset-state\"\n            form=\"tui-demo-form\"\n            size=\"s\"\n            tuiButton\n            type=\"reset\"\n        >\n            Reset\n        </button>\n        <button\n            appearance=\"secondary-grayscale\"\n            automation-id=\"tui-demo-button__submit-state\"\n            form=\"tui-demo-form\"\n            size=\"s\"\n            tuiButton\n            type=\"submit\"\n        >\n            Submit\n        </button>\n    </div>\n}\n", styles: [":host{position:relative;display:block;min-inline-size:100%;margin:0 0 1.5rem;font:var(--tui-typography-body-s);color:var(--tui-text-primary);background:var(--tui-background-base-alt);box-shadow:0 0 1rem .5rem var(--tui-background-base);border-radius:var(--tui-radius-m);overflow:hidden;box-sizing:border-box}:host[tuiTheme=dark]{box-shadow:none}:host :host-context([tuiTheme=\"dark\"]){background:var(--tui-background-elevation-2);box-shadow:0 0 1rem .5rem var(--tui-background-base)}:host :host-context([tuiTheme=\"dark\"])[tuiTheme=light]{box-shadow:none}.t-settings{display:flex;gap:1rem;align-items:center;justify-content:flex-end;padding:.5rem .75rem .25rem}.t-wrapper{display:flex;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);padding:.25rem;border-radius:var(--tui-radius-m);box-sizing:border-box;box-shadow:inset 0 0 0 .25rem var(--tui-background-base-alt);overflow:hidden;pointer-events:auto}:host-context([tuiTheme=\"dark\"]) .t-wrapper{box-shadow:inset 0 0 0 .25rem var(--tui-background-elevation-2)}.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:767.4px){.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:767.4px){.t-content{padding:1rem}}.t-footer{display:flex;gap:.25rem;padding:0 .25rem .25rem}.t-select{inline-size:6rem;margin-inline-start:auto}.t-value{flex:1;background:var(--tui-background-base);border-radius:var(--tui-radius-m);box-shadow:inset 0 -.25rem 0 .25rem var(--tui-background-base-alt);padding:.5rem .75rem 1rem;margin:0 0 -.25rem}:host-context([tuiTheme=\"dark\"]) .t-value{box-shadow:inset 0 -.25rem 0 .25rem var(--tui-background-elevation-2)}.t-resizer{transition-property:color;transition-duration:var(--tui-duration, .3s);transition-timing-function:var(--tui-curve-productive-standard);position:relative;display:flex;min-block-size:inherit;align-items:center;justify-content:center;flex-shrink:0;color:var(--tui-text-tertiary)}.t-resizer:hover,.t-resizer:active{color:var(--tui-text-secondary)}@media screen and (max-width:767.4px){.t-resizer{display:none}}@media screen and (min-height:37.5rem){:host._sticky{position:sticky;z-index:2;inset-block-start:4.625rem}}\n"] }]
         }] });
 
 class TuiDocTab {
@@ -523,7 +525,7 @@ class TuiDocExample {
         this.doc.dispatchEvent(new CustomEvent('tui-example', { detail: this.resolvedId() }));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TuiDocExample, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: TuiDocExample, isStandalone: true, selector: "tui-doc-example", inputs: { heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", 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 }, component: { classPropertyName: "component", publicName: "component", isSignal: true, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, preview: { classPropertyName: "preview", publicName: "preview", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "waIntersectionRootMargin": "-40px 0px 1000000% 0px", "waIntersectionThreshold": "1" }, listeners: { "waIntersectionObservee": "onIntersection()" }, properties: { "attr.id": "resolvedId()", "class._fullsize": "fullsize()" } }, usesOnChanges: true, hostDirectives: [{ directive: i1$2.WaIntersectionObserverDirective }, { directive: i1$2.WaIntersectionObservee, outputs: ["waIntersectionObservee", "waIntersectionObservee"] }], ngImport: i0, template: "@if (heading()) {\n    <header tuiHeader=\"h6\">\n        <hgroup tuiTitle>\n            <h3>\n                <a\n                    appearance=\"\"\n                    routerLink=\".\"\n                    tuiLink\n                    class=\"t-link\"\n                    [attr.title]=\"copy()\"\n                    [fragment]=\"resolvedId()\"\n                    [iconEnd]=\"icons.link\"\n                    [relativeTo]=\"route.firstChild ?? route\"\n                    (click)=\"copyExampleLink($event.currentTarget)\"\n                >\n                    {{ heading() }}\n                </a>\n            </h3>\n        </hgroup>\n    </header>\n\n    @if (description()) {\n        <div tuiDescription>\n            <ng-container *polymorpheusOutlet=\"description() as text\">\n                {{ text }}\n            </ng-container>\n        </div>\n    }\n}\n<div\n    class=\"t-example\"\n    [(tuiFullscreen)]=\"fullscreen\"\n>\n    @if (processor() | tuiDocExampleGetTabs: defaultTab(); as all) {\n        @let tabs = preview() ? all : all.slice(1);\n        @if (tabs.length) {\n            <div class=\"t-header\">\n                <tui-segmented\n                    class=\"t-tabs\"\n                    [(activeItemIndex)]=\"activeItemIndex\"\n                >\n                    @for (tab of tabs; track tab) {\n                        <button type=\"button\">\n                            <ng-container *polymorpheusOutlet=\"getTabTitle(tab) as text\">\n                                {{ text }}\n                            </ng-container>\n                        </button>\n                    }\n                </tui-segmented>\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 && preview()) {\n                    <button\n                        appearance=\"flat-grayscale\"\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 && preview()) {\n                    <section\n                        automation-id=\"tui-doc-example\"\n                        class=\"t-demo\"\n                        [style.display]=\"activeItemIndex === $index ? 'block' : 'none'\"\n                    >\n                        <ng-container *ngTemplateOutlet=\"content\" />\n                        <ng-container *ngComponentOutlet=\"lazyComponent.value() ?? null\" />\n                    </section>\n                }\n                @let code = processor()[tab] || '';\n                <tui-doc-code\n                    [code]=\"code\"\n                    [style.display]=\"activeItemIndex === $index && ($index || !preview()) ? '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        } @empty {\n            <div class=\"t-content\">\n                <section class=\"t-demo\">\n                    <ng-container *ngTemplateOutlet=\"content\" />\n                </section>\n            </div>\n        }\n    }\n</div>\n<ng-template #content>\n    <ng-content />\n</ng-template>\n", styles: [":host{position:relative;display:block;padding-block-start:2rem;scroll-margin-top:4rem}:host :host-context(tui-doc-toc +){padding-block-start:0}:host :host-context(tui-doc-toc ~){inline-size:calc(100% - 20rem)}@media screen and (max-width:1279.4px){:host :host-context(tui-doc-toc ~){inline-size:100%}}:host :host-context(tui-doc-toc:empty ~){inline-size:100%}:host ::ng-deep :fullscreen .t-header{padding:.25rem}.t-link.t-link{text-decoration:none!important;font:inherit}.t-link.t-link:after{transition-property:color;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;color:transparent}.t-link.t-link:hover,.t-link.t-link:hover:after{color:var(--tui-text-secondary)}.t-example{position:relative;border:.25rem solid var(--tui-background-base-alt);border-radius:var(--tui-radius-m);overflow:hidden}:host-context([tuiTheme=\"dark\"]) .t-example{border:.25rem solid var(--tui-background-elevation-2)}.t-example:not(:first-child){margin-block-start:1.25rem}@media screen and (max-width:767.4px){.t-example:not(:first-child){margin-block-start:.75rem}}.t-header{display:flex;justify-content:space-between;align-items:center;overflow:auto;gap:.25rem;padding-block-end:.25rem;padding-inline-end:.125rem;background:var(--tui-background-base-alt);--tui-stroke-width: .09375rem}:host-context([tuiTheme=\"dark\"]) .t-header{background:var(--tui-background-elevation-2)}.t-tabs{flex-grow:1;background:none;margin:-.125rem}.t-tabs:before{filter:none}.t-content{border-radius:var(--tui-radius-m);box-shadow:-1rem -1rem var(--tui-background-base-alt),1rem -1rem var(--tui-background-base-alt)}:host-context([tuiTheme=\"dark\"]) .t-content{box-shadow:-1rem -1rem var(--tui-background-elevation-2),1rem -1rem var(--tui-background-elevation-2)}.t-content:first-child{box-shadow:none}.t-code-editor{flex-shrink:0;block-size:auto}@media screen and (max-width:767.4px){.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}:host:not(._fullsize) .t-demo{inline-size:min-content;min-inline-size:21rem}@media screen and (max-width:767.4px){.t-demo{min-inline-size:100%!important;padding:1rem}}tui-doc-code{overflow:hidden}\n"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { 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: TuiButton, selector: "a[tuiButton],button[tuiButton],a[tuiIconButton],button[tuiIconButton]", inputs: ["size"] }, { kind: "component", type: TuiDocCode, selector: "tui-doc-code", inputs: ["filename", "code", "lineNumbers"] }, { kind: "pipe", type: TuiDocExampleGetTabsPipe, name: "tuiDocExampleGetTabs" }, { kind: "component", type: TuiFullscreen, selector: "[tuiFullscreen]", inputs: ["tuiFullscreen", "tuiFullscreenOptions"], outputs: ["tuiFullscreenChange"] }, { kind: "directive", type: TuiHeader, selector: "[tuiHeader]", inputs: ["tuiHeader"] }, { kind: "directive", type: TuiLink, selector: "a[tuiLink], button[tuiLink]" }, { kind: "component", type: TuiLoader, selector: "tui-loader", inputs: ["size", "inheritColor", "overlay", "textContent", "loading"] }, { kind: "pipe", type: TuiMapperPipe, name: "tuiMapper" }, { kind: "component", type: TuiSegmented, selector: "tui-segmented", inputs: ["size", "activeItemIndex", "disabled"], outputs: ["activeItemIndexChange"] }, { kind: "directive", type: TuiTitle, selector: "[tuiTitle]", inputs: ["tuiTitle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: TuiDocExample, isStandalone: true, selector: "tui-doc-example", inputs: { heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", 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 }, component: { classPropertyName: "component", publicName: "component", isSignal: true, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, preview: { classPropertyName: "preview", publicName: "preview", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "waIntersectionRootMargin": "-40px 0px 1000000% 0px", "waIntersectionThreshold": "1" }, listeners: { "waIntersectionObservee": "onIntersection()" }, properties: { "attr.id": "resolvedId()", "class._fullsize": "fullsize()" } }, usesOnChanges: true, hostDirectives: [{ directive: i1$2.WaIntersectionObserverDirective }, { directive: i1$2.WaIntersectionObservee, outputs: ["waIntersectionObservee", "waIntersectionObservee"] }], ngImport: i0, template: "@if (heading()) {\n    <header tuiHeader=\"h6\">\n        <hgroup tuiTitle>\n            <h3>\n                <a\n                    appearance=\"\"\n                    routerLink=\".\"\n                    tuiLink\n                    class=\"t-link\"\n                    [attr.title]=\"copy()\"\n                    [fragment]=\"resolvedId()\"\n                    [iconEnd]=\"icons.link\"\n                    [relativeTo]=\"route.firstChild ?? route\"\n                    (click)=\"copyExampleLink($event.currentTarget)\"\n                >\n                    {{ heading() }}\n                </a>\n            </h3>\n        </hgroup>\n    </header>\n\n    @if (description()) {\n        <div tuiDescription>\n            <ng-container *polymorpheusOutlet=\"description() as text\">\n                {{ text }}\n            </ng-container>\n        </div>\n    }\n}\n<div\n    class=\"t-example\"\n    [(tuiFullscreen)]=\"fullscreen\"\n>\n    @if (processor() | tuiDocExampleGetTabs: defaultTab(); as all) {\n        @let tabs = preview() ? all : all.slice(1);\n        @if (tabs.length) {\n            <div class=\"t-header\">\n                <tui-segmented\n                    class=\"t-tabs\"\n                    [(activeItemIndex)]=\"activeItemIndex\"\n                >\n                    @for (tab of tabs; track tab) {\n                        <button type=\"button\">\n                            <ng-container *polymorpheusOutlet=\"getTabTitle(tab) as text\">\n                                {{ text }}\n                            </ng-container>\n                        </button>\n                    }\n                </tui-segmented>\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 && preview()) {\n                    <button\n                        appearance=\"flat-grayscale\"\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 && preview()) {\n                    <section\n                        automation-id=\"tui-doc-example\"\n                        class=\"t-demo\"\n                        [style.display]=\"activeItemIndex === $index ? 'block' : 'none'\"\n                    >\n                        <ng-container *ngTemplateOutlet=\"content\" />\n                        <ng-container *ngComponentOutlet=\"lazyComponent.value() ?? null\" />\n                    </section>\n                }\n                @let code = processor()[tab] || '';\n                <tui-doc-code\n                    [code]=\"code\"\n                    [style.display]=\"activeItemIndex === $index && ($index || !preview()) ? '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        } @empty {\n            <div class=\"t-content\">\n                <section class=\"t-demo\">\n                    <ng-container *ngTemplateOutlet=\"content\" />\n                </section>\n            </div>\n        }\n    }\n</div>\n<ng-template #content>\n    <ng-content />\n</ng-template>\n", styles: [":host{position:relative;display:block;padding-block-start:2rem;scroll-margin-top:4rem}:host :host-context(tui-doc-toc +){padding-block-start:0}:host :host-context(tui-doc-toc ~){inline-size:calc(100% - 20rem)}@media screen and (max-width:1279.4px){:host :host-context(tui-doc-toc ~){inline-size:100%}}:host :host-context(tui-doc-toc:empty ~){inline-size:100%}:host ::ng-deep :fullscreen .t-header{padding:.25rem}.t-link.t-link{text-decoration:none!important;font:inherit}.t-link.t-link:after{transition-property:color;transition-duration:var(--tui-duration, .3s);transition-timing-function:var(--tui-curve-productive-standard);color:transparent}.t-link.t-link:hover,.t-link.t-link:hover:after{color:var(--tui-text-secondary)}.t-example{position:relative;border:.25rem solid var(--tui-background-base-alt);border-radius:var(--tui-radius-m);overflow:hidden}:host-context([tuiTheme=\"dark\"]) .t-example{border:.25rem solid var(--tui-background-elevation-2)}.t-example:not(:first-child){margin-block-start:1.25rem}@media screen and (max-width:767.4px){.t-example:not(:first-child){margin-block-start:.75rem}}.t-header{display:flex;justify-content:space-between;align-items:center;overflow:auto;gap:.25rem;padding-block-end:.25rem;padding-inline-end:.125rem;background:var(--tui-background-base-alt);--tui-stroke-width: .09375rem}:host-context([tuiTheme=\"dark\"]) .t-header{background:var(--tui-background-elevation-2)}.t-tabs{flex-grow:1;background:none;margin:-.125rem}.t-tabs:before{filter:none}.t-content{border-radius:var(--tui-radius-m);box-shadow:-1rem -1rem var(--tui-background-base-alt),1rem -1rem var(--tui-background-base-alt)}:host-context([tuiTheme=\"dark\"]) .t-content{box-shadow:-1rem -1rem var(--tui-background-elevation-2),1rem -1rem var(--tui-background-elevation-2)}.t-content:first-child{box-shadow:none}.t-code-editor{flex-shrink:0;block-size:auto}@media screen and (max-width:767.4px){.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}:host:not(._fullsize) .t-demo{inline-size:min-content;min-inline-size:21rem}@media screen and (max-width:767.4px){.t-demo{min-inline-size:100%!important;padding:1rem}}tui-doc-code{overflow:hidden}\n"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { 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: TuiButton, selector: "a[tuiButton],button[tuiButton],a[tuiIconButton],button[tuiIconButton]", inputs: ["size"] }, { kind: "component", type: TuiDocCode, selector: "tui-doc-code", inputs: ["filename", "code", "lineNumbers"] }, { kind: "pipe", type: TuiDocExampleGetTabsPipe, name: "tuiDocExampleGetTabs" }, { kind: "component", type: TuiFullscreen, selector: "[tuiFullscreen]", inputs: ["tuiFullscreen", "tuiFullscreenOptions"], outputs: ["tuiFullscreenChange"] }, { kind: "directive", type: TuiHeader, selector: "[tuiHeader]", inputs: ["tuiHeader"] }, { kind: "directive", type: TuiLink, selector: "a[tuiLink], button[tuiLink]" }, { kind: "component", type: TuiLoader, selector: "tui-loader", inputs: ["size", "inheritColor", "overlay", "textContent", "loading"] }, { kind: "pipe", type: TuiMapperPipe, name: "tuiMapper" }, { kind: "component", type: TuiSegmented, selector: "tui-segmented", inputs: ["size", "activeItemIndex", "disabled"], outputs: ["activeItemIndexChange"] }, { kind: "directive", type: TuiTitle, selector: "[tuiTitle]", inputs: ["tuiTitle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TuiDocExample, decorators: [{
             type: Component,
@@ -554,7 +556,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
                         '[attr.id]': 'resolvedId()',
                         '[class._fullsize]': 'fullsize()',
                         '(waIntersectionObservee)': 'onIntersection()',
-                    }, template: "@if (heading()) {\n    <header tuiHeader=\"h6\">\n        <hgroup tuiTitle>\n            <h3>\n                <a\n                    appearance=\"\"\n                    routerLink=\".\"\n                    tuiLink\n                    class=\"t-link\"\n                    [attr.title]=\"copy()\"\n                    [fragment]=\"resolvedId()\"\n                    [iconEnd]=\"icons.link\"\n                    [relativeTo]=\"route.firstChild ?? route\"\n                    (click)=\"copyExampleLink($event.currentTarget)\"\n                >\n                    {{ heading() }}\n                </a>\n            </h3>\n        </hgroup>\n    </header>\n\n    @if (description()) {\n        <div tuiDescription>\n            <ng-container *polymorpheusOutlet=\"description() as text\">\n                {{ text }}\n            </ng-container>\n        </div>\n    }\n}\n<div\n    class=\"t-example\"\n    [(tuiFullscreen)]=\"fullscreen\"\n>\n    @if (processor() | tuiDocExampleGetTabs: defaultTab(); as all) {\n        @let tabs = preview() ? all : all.slice(1);\n        @if (tabs.length) {\n            <div class=\"t-header\">\n                <tui-segmented\n                    class=\"t-tabs\"\n                    [(activeItemIndex)]=\"activeItemIndex\"\n                >\n                    @for (tab of tabs; track tab) {\n                        <button type=\"button\">\n                            <ng-container *polymorpheusOutlet=\"getTabTitle(tab) as text\">\n                                {{ text }}\n                            </ng-container>\n                        </button>\n                    }\n                </tui-segmented>\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 && preview()) {\n                    <button\n                        appearance=\"flat-grayscale\"\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 && preview()) {\n                    <section\n                        automation-id=\"tui-doc-example\"\n                        class=\"t-demo\"\n                        [style.display]=\"activeItemIndex === $index ? 'block' : 'none'\"\n                    >\n                        <ng-container *ngTemplateOutlet=\"content\" />\n                        <ng-container *ngComponentOutlet=\"lazyComponent.value() ?? null\" />\n                    </section>\n                }\n                @let code = processor()[tab] || '';\n                <tui-doc-code\n                    [code]=\"code\"\n                    [style.display]=\"activeItemIndex === $index && ($index || !preview()) ? '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        } @empty {\n            <div class=\"t-content\">\n                <section class=\"t-demo\">\n                    <ng-container *ngTemplateOutlet=\"content\" />\n                </section>\n            </div>\n        }\n    }\n</div>\n<ng-template #content>\n    <ng-content />\n</ng-template>\n", styles: [":host{position:relative;display:block;padding-block-start:2rem;scroll-margin-top:4rem}:host :host-context(tui-doc-toc +){padding-block-start:0}:host :host-context(tui-doc-toc ~){inline-size:calc(100% - 20rem)}@media screen and (max-width:1279.4px){:host :host-context(tui-doc-toc ~){inline-size:100%}}:host :host-context(tui-doc-toc:empty ~){inline-size:100%}:host ::ng-deep :fullscreen .t-header{padding:.25rem}.t-link.t-link{text-decoration:none!important;font:inherit}.t-link.t-link:after{transition-property:color;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;color:transparent}.t-link.t-link:hover,.t-link.t-link:hover:after{color:var(--tui-text-secondary)}.t-example{position:relative;border:.25rem solid var(--tui-background-base-alt);border-radius:var(--tui-radius-m);overflow:hidden}:host-context([tuiTheme=\"dark\"]) .t-example{border:.25rem solid var(--tui-background-elevation-2)}.t-example:not(:first-child){margin-block-start:1.25rem}@media screen and (max-width:767.4px){.t-example:not(:first-child){margin-block-start:.75rem}}.t-header{display:flex;justify-content:space-between;align-items:center;overflow:auto;gap:.25rem;padding-block-end:.25rem;padding-inline-end:.125rem;background:var(--tui-background-base-alt);--tui-stroke-width: .09375rem}:host-context([tuiTheme=\"dark\"]) .t-header{background:var(--tui-background-elevation-2)}.t-tabs{flex-grow:1;background:none;margin:-.125rem}.t-tabs:before{filter:none}.t-content{border-radius:var(--tui-radius-m);box-shadow:-1rem -1rem var(--tui-background-base-alt),1rem -1rem var(--tui-background-base-alt)}:host-context([tuiTheme=\"dark\"]) .t-content{box-shadow:-1rem -1rem var(--tui-background-elevation-2),1rem -1rem var(--tui-background-elevation-2)}.t-content:first-child{box-shadow:none}.t-code-editor{flex-shrink:0;block-size:auto}@media screen and (max-width:767.4px){.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}:host:not(._fullsize) .t-demo{inline-size:min-content;min-inline-size:21rem}@media screen and (max-width:767.4px){.t-demo{min-inline-size:100%!important;padding:1rem}}tui-doc-code{overflow:hidden}\n"] }]
+                    }, template: "@if (heading()) {\n    <header tuiHeader=\"h6\">\n        <hgroup tuiTitle>\n            <h3>\n                <a\n                    appearance=\"\"\n                    routerLink=\".\"\n                    tuiLink\n                    class=\"t-link\"\n                    [attr.title]=\"copy()\"\n                    [fragment]=\"resolvedId()\"\n                    [iconEnd]=\"icons.link\"\n                    [relativeTo]=\"route.firstChild ?? route\"\n                    (click)=\"copyExampleLink($event.currentTarget)\"\n                >\n                    {{ heading() }}\n                </a>\n            </h3>\n        </hgroup>\n    </header>\n\n    @if (description()) {\n        <div tuiDescription>\n            <ng-container *polymorpheusOutlet=\"description() as text\">\n                {{ text }}\n            </ng-container>\n        </div>\n    }\n}\n<div\n    class=\"t-example\"\n    [(tuiFullscreen)]=\"fullscreen\"\n>\n    @if (processor() | tuiDocExampleGetTabs: defaultTab(); as all) {\n        @let tabs = preview() ? all : all.slice(1);\n        @if (tabs.length) {\n            <div class=\"t-header\">\n                <tui-segmented\n                    class=\"t-tabs\"\n                    [(activeItemIndex)]=\"activeItemIndex\"\n                >\n                    @for (tab of tabs; track tab) {\n                        <button type=\"button\">\n                            <ng-container *polymorpheusOutlet=\"getTabTitle(tab) as text\">\n                                {{ text }}\n                            </ng-container>\n                        </button>\n                    }\n                </tui-segmented>\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 && preview()) {\n                    <button\n                        appearance=\"flat-grayscale\"\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 && preview()) {\n                    <section\n                        automation-id=\"tui-doc-example\"\n                        class=\"t-demo\"\n                        [style.display]=\"activeItemIndex === $index ? 'block' : 'none'\"\n                    >\n                        <ng-container *ngTemplateOutlet=\"content\" />\n                        <ng-container *ngComponentOutlet=\"lazyComponent.value() ?? null\" />\n                    </section>\n                }\n                @let code = processor()[tab] || '';\n                <tui-doc-code\n                    [code]=\"code\"\n                    [style.display]=\"activeItemIndex === $index && ($index || !preview()) ? '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        } @empty {\n            <div class=\"t-content\">\n                <section class=\"t-demo\">\n                    <ng-container *ngTemplateOutlet=\"content\" />\n                </section>\n            </div>\n        }\n    }\n</div>\n<ng-template #content>\n    <ng-content />\n</ng-template>\n", styles: [":host{position:relative;display:block;padding-block-start:2rem;scroll-margin-top:4rem}:host :host-context(tui-doc-toc +){padding-block-start:0}:host :host-context(tui-doc-toc ~){inline-size:calc(100% - 20rem)}@media screen and (max-width:1279.4px){:host :host-context(tui-doc-toc ~){inline-size:100%}}:host :host-context(tui-doc-toc:empty ~){inline-size:100%}:host ::ng-deep :fullscreen .t-header{padding:.25rem}.t-link.t-link{text-decoration:none!important;font:inherit}.t-link.t-link:after{transition-property:color;transition-duration:var(--tui-duration, .3s);transition-timing-function:var(--tui-curve-productive-standard);color:transparent}.t-link.t-link:hover,.t-link.t-link:hover:after{color:var(--tui-text-secondary)}.t-example{position:relative;border:.25rem solid var(--tui-background-base-alt);border-radius:var(--tui-radius-m);overflow:hidden}:host-context([tuiTheme=\"dark\"]) .t-example{border:.25rem solid var(--tui-background-elevation-2)}.t-example:not(:first-child){margin-block-start:1.25rem}@media screen and (max-width:767.4px){.t-example:not(:first-child){margin-block-start:.75rem}}.t-header{display:flex;justify-content:space-between;align-items:center;overflow:auto;gap:.25rem;padding-block-end:.25rem;padding-inline-end:.125rem;background:var(--tui-background-base-alt);--tui-stroke-width: .09375rem}:host-context([tuiTheme=\"dark\"]) .t-header{background:var(--tui-background-elevation-2)}.t-tabs{flex-grow:1;background:none;margin:-.125rem}.t-tabs:before{filter:none}.t-content{border-radius:var(--tui-radius-m);box-shadow:-1rem -1rem var(--tui-background-base-alt),1rem -1rem var(--tui-background-base-alt)}:host-context([tuiTheme=\"dark\"]) .t-content{box-shadow:-1rem -1rem var(--tui-background-elevation-2),1rem -1rem var(--tui-background-elevation-2)}.t-content:first-child{box-shadow:none}.t-code-editor{flex-shrink:0;block-size:auto}@media screen and (max-width:767.4px){.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}:host:not(._fullsize) .t-demo{inline-size:min-content;min-inline-size:21rem}@media screen and (max-width:767.4px){.t-demo{min-inline-size:100%!important;padding:1rem}}tui-doc-code{overflow:hidden}\n"] }]
         }] });
 
 function labelsProviderFactory(pages) {
@@ -760,7 +762,7 @@ class TuiDocNavigation {
         target.remove();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TuiDocNavigation, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: TuiDocNavigation, isStandalone: true, selector: "tui-doc-navigation", host: { listeners: { "window:keydown": "onFocusSearch($event)" }, properties: { "class._open": "menuOpen" } }, providers: NAVIGATION_PROVIDERS, viewQueries: [{ propertyName: "searchInput", first: true, predicate: TuiInputDirective, descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "@if (searchEnabled()) {\n    <tui-textfield\n        tuiTextfieldSize=\"m\"\n        class=\"t-input\"\n        [iconStart]=\"docIcons.search\"\n        [open]=\"open() && canOpen\"\n        (keyup)=\"open.set(canOpen && $event.code !== 'Escape')\"\n        (openChange)=\"open.set($event)\"\n    >\n        @if (!search.value) {\n            <code class=\"t-slash\">/</code>\n        }\n\n        <input\n            tuiInput\n            class=\"t-prevent-ios-scroll\"\n            [formControl]=\"search\"\n            [placeholder]=\"searchText()\"\n            [tuiAutoFocus]=\"!!drawer\"\n        />\n\n        @if (canOpen) {\n            <tui-data-list *tuiDropdown>\n                @for (group of filtered(); track group) {\n                    <tui-opt-group [label]=\"labels[$index] || ''\">\n                        @for (item of group; track item) {\n                            @if (item.route.includes('://')) {\n                                <a\n                                    tuiOption\n                                    [attr.rel]=\"item.rel\"\n                                    [href]=\"item.route\"\n                                    [target]=\"item.target || '_self'\"\n                                    [textContent]=\"item.title\"\n                                ></a>\n                            } @else {\n                                <a\n                                    tuiOption\n                                    [attr.rel]=\"item.rel\"\n                                    [fragment]=\"item.fragment\"\n                                    [routerLink]=\"item.route\"\n                                    [target]=\"item.target || '_self'\"\n                                    [textContent]=\"item.title\"\n                                    (click)=\"onClick()\"\n                                ></a>\n                            }\n                        }\n                    </tui-opt-group>\n                }\n            </tui-data-list>\n        }\n    </tui-textfield>\n}\n\n<nav class=\"t-navigation\">\n    <tui-scrollbar class=\"t-scrollbar\">\n        <tui-accordion\n            size=\"s\"\n            class=\"t-accordion\"\n            [closeOthers]=\"false\"\n        >\n            @for (item of itemsWithoutSections; track item) {\n                <ng-container\n                    [ngTemplateOutlet]=\"page\"\n                    [ngTemplateOutletContext]=\"{$implicit: item}\"\n                />\n            }\n            @for (label of labels; track $index; let index = $index) {\n                <button\n                    appearance=\"\"\n                    iconEnd=\"\"\n                    class=\"t-accordion-item\"\n                    [iconStart]=\"pagesIcons[label]\"\n                    [tuiAccordion]=\"!!openPagesArr[$index]\"\n                    (tuiAccordionChange)=\"openPagesArr[$index] = !!$event\"\n                >\n                    <span class=\"t-label\">{{ label }}</span>\n                    <tui-icon\n                        class=\"t-chevron\"\n                        [class.t-chevron_active]=\"!!openPagesArr[$index]\"\n                        [icon]=\"icons.more\"\n                        [style.margin]=\"0\"\n                    />\n                </button>\n                <tui-expand [style.padding-block]=\"0\">\n                    <div\n                        *tuiItem\n                        class=\"t-section\"\n                    >\n                        @for (item of items[$index]; track $index) {\n                            <ng-container\n                                [ngTemplateOutlet]=\"pages\"\n                                [ngTemplateOutletContext]=\"{item: item, index: index * 100 + $index}\"\n                            />\n                        }\n                    </div>\n                </tui-expand>\n            }\n        </tui-accordion>\n\n        <ng-template\n            #page\n            let-item\n        >\n            @if (item.route.includes('://')) {\n                <a\n                    tuiLink\n                    class=\"t-sublink\"\n                    [attr.rel]=\"item.rel\"\n                    [href]=\"item.route\"\n                    [iconStart]=\"item.section ? '' : pagesIcons[item.title]\"\n                    [target]=\"item.target || '_self'\"\n                    [textContent]=\"item.title\"\n                ></a>\n            } @else {\n                <a\n                    routerLinkActive=\"t-sublink_active\"\n                    tuiLink\n                    class=\"t-sublink\"\n                    [attr.rel]=\"item.rel\"\n                    [iconStart]=\"item.section ? '' : pagesIcons[item.title]\"\n                    [routerLink]=\"item.route\"\n                    [target]=\"item.target || '_self'\"\n                    [textContent]=\"item.title\"\n                    [tuiDocScrollIntoViewLink]=\"isActive(item.route)\"\n                    (click)=\"closeMenu()\"\n                ></a>\n            }\n        </ng-template>\n\n        <ng-template\n            #pages\n            let-index=\"index\"\n            let-item=\"item\"\n        >\n            @if (!item.subPages) {\n                <ng-container\n                    [ngTemplateOutlet]=\"page\"\n                    [ngTemplateOutletContext]=\"{$implicit: item}\"\n                />\n            } @else {\n                <div\n                    routerLinkActive\n                    class=\"t-subsection\"\n                    [routerLinkActiveOptions]=\"{exact: false}\"\n                >\n                    @if (item.subPages) {\n                        <button\n                            tuiLink\n                            type=\"button\"\n                            class=\"t-sublink t-sublink_subsection\"\n                            (click)=\"onGroupClick(index)\"\n                        >\n                            <tui-icon\n                                class=\"t-chevron\"\n                                [class.t-chevron_active]=\"!!openPagesGroupsArr[index]\"\n                                [icon]=\"icons.more\"\n                            />\n                            {{ item.title }}\n                            <tui-icon\n                                *polymorpheusOutlet=\"item.icon as icon\"\n                                class=\"t-icon\"\n                                [icon]=\"icon\"\n                            />\n                        </button>\n                    }\n\n                    <tui-expand\n                        class=\"t-expand\"\n                        [expanded]=\"!!openPagesGroupsArr[index]\"\n                    >\n                        <div class=\"t-section t-section_nested\">\n                            @for (subPage of $pages(item.subPages); track subPage) {\n                                @if (subPage.route.includes('://')) {\n                                    <a\n                                        tuiLink\n                                        class=\"t-sublink t-sublink_small\"\n                                        [attr.rel]=\"subPage.rel\"\n                                        [href]=\"subPage.route\"\n                                        [target]=\"subPage.target || '_self'\"\n                                        [textContent]=\"subPage.title\"\n                                    ></a>\n                                } @else {\n                                    <a\n                                        routerLinkActive=\"t-sublink_active\"\n                                        tuiLink\n                                        class=\"t-sublink t-sublink_small\"\n                                        [attr.rel]=\"subPage.rel\"\n                                        [fragment]=\"subPage.fragment\"\n                                        [routerLink]=\"subPage.route\"\n                                        [target]=\"subPage.target || '_self'\"\n                                        [textContent]=\"subPage.title\"\n                                        [tuiDocScrollIntoViewLink]=\"isActive(subPage.route)\"\n                                        (click)=\"closeMenu()\"\n                                    ></a>\n                                }\n                            }\n                        </div>\n                    </tui-expand>\n                </div>\n            }\n        </ng-template>\n    </tui-scrollbar>\n</nav>\n\n<ng-content />\n", styles: [":host{z-index:1;display:flex;flex-direction:column;text-align:center;padding:0 .25rem;--tui-stroke-width: .09375rem}.t-input{margin:1.25rem}.t-slash{block-size:1rem;font-size:.5rem}.t-navigation{display:flex;flex-wrap:wrap;max-block-size:100%;min-block-size:0;flex:1 1 0;text-align:start}.t-navigation tui-scrollbar{overscroll-behavior:none}:host-context(tui-drawer){margin:-1.25rem -1.5rem;padding-inline-start:0}:host-context(tui-drawer) .t-scrollbar{display:contents}.t-accordion{inline-size:auto;margin:.5rem .375rem 1.5rem}.t-scrollbar{scroll-behavior:var(--tui-scroll-behavior);inline-size:100%}.t-label{margin-inline-start:1.1875rem;font-weight:700}.t-expand{margin-inline-start:.25rem;padding-block:0}.t-section{display:flex;flex-direction:column;align-items:flex-start}.t-section_nested{margin:0 .75rem;clip-path:inset(.5rem 0)}@supports (-webkit-touch-callout: none){.t-prevent-ios-scroll:focus{animation:tuiPreventIOSScroll 1ms}}@keyframes tuiPreventIOSScroll{0%{opacity:0}to{opacity:1}}.t-subsection{margin-inline-start:.625rem}.t-sublink{display:inline-flex;align-items:center;font:var(--tui-typography-body-s);padding-block:.5rem;padding-inline-start:.4375rem;text-decoration:none}.t-accordion>.t-sublink{block-size:2.5rem;font:var(--tui-typography-body-s);font-weight:700;color:var(--tui-text-primary);align-items:center;padding:0 1rem;margin-inline-start:1px}.t-accordion>.t-sublink:before{margin-inline-end:calc(.875rem * (1 - .25 * var(--t-zoom)))}.t-accordion>.t-sublink:after{opacity:0}.t-sublink_small{margin-inline-start:1rem;padding-inline:0}.t-sublink_subsection{margin-inline-start:0!important;padding-inline-start:1.6875rem}.t-sublink_subsection .t-chevron{position:absolute;inset-inline-start:.4375rem}.t-sublink_subsection:before{opacity:0}.t-sublink.t-sublink.t-sublink_active{color:var(--tui-text-primary);font-weight:700}.t-sublink.t-sublink.t-sublink_active:after{position:absolute;display:block;inset-block:.5rem;inset-inline-start:-1rem;block-size:auto;inline-size:.1875rem;padding:0;margin-inline-start:-1px;border-radius:1rem;background:var(--tui-text-primary);zoom:1}.t-sublink:not([data-icon-start]){margin-inline-start:1.875rem}.t-sublink:not([data-icon-start]):before{position:absolute;display:block;inset-block-start:0;inset-block-end:0;inset-inline-start:-1rem;block-size:auto;inline-size:1px;padding:0;background:var(--tui-border-normal);zoom:1}.t-chevron{transition-property:transform;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;font-size:1rem;margin-inline:-.625rem .875rem}.t-chevron_active{transform:rotate(90deg)}.t-accordion-item{block-size:2.5rem}.t-accordion-item:before{position:relative;inset-inline-start:.5625rem;font-size:1rem}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: PolymorpheusOutlet, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: i2$1.TuiAccordionComponent, selector: "tui-accordion", inputs: ["closeOthers", "size"] }, { kind: "directive", type: i2$1.TuiAccordionDirective, selector: "button[tuiAccordion]", inputs: ["tuiAccordion"], outputs: ["tuiAccordionChange"] }, { kind: "component", type: i3$1.TuiExpand, selector: "tui-expand", inputs: ["expanded"] }, { kind: "directive", type: i4$1.TuiItem, selector: "[tuiItem]" }, { kind: "directive", type: TuiAutoFocus, selector: "[tuiAutoFocus]", inputs: ["tuiAutoFocus"] }, { kind: "component", type: i5$2.TuiDataListComponent, selector: "tui-data-list", inputs: ["emptyContent", "size"] }, { kind: "directive", type: i5$2.TuiOption, selector: "button[tuiOption], a[tuiOption], label[tuiOption]", inputs: ["disabled"] }, { kind: "directive", type: i5$2.TuiOptGroup, selector: "tui-opt-group", inputs: ["label"] }, { kind: "directive", type: TuiDocScrollIntoViewLink, selector: "[tuiDocScrollIntoViewLink]", inputs: ["tuiDocScrollIntoViewLink"] }, { kind: "component", type: TuiIcon, selector: "tui-icon:not([tuiBadge])", inputs: ["background"] }, { kind: "component", type: i5.TuiTextfieldComponent, selector: "tui-textfield:not([multi])", inputs: ["content", "filler"] }, { kind: "directive", type: i5.TuiTextfieldOptionsDirective, selector: "[tuiTextfieldAppearance],[tuiTextfieldSize],[tuiTextfieldCleaner]", inputs: ["tuiTextfieldAppearance", "tuiTextfieldSize", "tuiTextfieldCleaner"] }, { kind: "directive", type: i6.TuiDropdownContent, selector: "ng-template[tuiDropdown]" }, { kind: "directive", type: i5$1.TuiInputDirective, selector: "input[tuiInput]", inputs: ["readOnly", "invalid", "focused", "state"] }, { kind: "directive", type: TuiLink, selector: "a[tuiLink], button[tuiLink]" }, { kind: "component", type: TuiScrollbar, selector: "tui-scrollbar" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: TuiDocNavigation, isStandalone: true, selector: "tui-doc-navigation", host: { listeners: { "window:keydown": "onFocusSearch($event)" }, properties: { "class._open": "menuOpen" } }, providers: NAVIGATION_PROVIDERS, viewQueries: [{ propertyName: "searchInput", first: true, predicate: TuiInputDirective, descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "@if (searchEnabled()) {\n    <tui-textfield\n        tuiTextfieldSize=\"m\"\n        class=\"t-input\"\n        [iconStart]=\"docIcons.search\"\n        [open]=\"open() && canOpen\"\n        (keyup)=\"open.set(canOpen && $event.code !== 'Escape')\"\n        (openChange)=\"open.set($event)\"\n    >\n        @if (!search.value) {\n            <code class=\"t-slash\">/</code>\n        }\n\n        <input\n            tuiInput\n            class=\"t-prevent-ios-scroll\"\n            [formControl]=\"search\"\n            [placeholder]=\"searchText()\"\n            [tuiAutoFocus]=\"!!drawer\"\n        />\n\n        @if (canOpen) {\n            <tui-data-list *tuiDropdown>\n                @for (group of filtered(); track group) {\n                    <tui-opt-group [label]=\"labels[$index] || ''\">\n                        @for (item of group; track item) {\n                            @if (item.route.includes('://')) {\n                                <a\n                                    tuiOption\n                                    [attr.rel]=\"item.rel\"\n                                    [href]=\"item.route\"\n                                    [target]=\"item.target || '_self'\"\n                                    [textContent]=\"item.title\"\n                                ></a>\n                            } @else {\n                                <a\n                                    tuiOption\n                                    [attr.rel]=\"item.rel\"\n                                    [fragment]=\"item.fragment\"\n                                    [routerLink]=\"item.route\"\n                                    [target]=\"item.target || '_self'\"\n                                    [textContent]=\"item.title\"\n                                    (click)=\"onClick()\"\n                                ></a>\n                            }\n                        }\n                    </tui-opt-group>\n                }\n            </tui-data-list>\n        }\n    </tui-textfield>\n}\n\n<nav class=\"t-navigation\">\n    <tui-scrollbar class=\"t-scrollbar\">\n        <tui-accordion\n            size=\"s\"\n            class=\"t-accordion\"\n            [closeOthers]=\"false\"\n        >\n            @for (item of itemsWithoutSections; track item) {\n                <ng-container\n                    [ngTemplateOutlet]=\"page\"\n                    [ngTemplateOutletContext]=\"{$implicit: item}\"\n                />\n            }\n            @for (label of labels; track $index; let index = $index) {\n                <button\n                    appearance=\"\"\n                    iconEnd=\"\"\n                    class=\"t-accordion-item\"\n                    [iconStart]=\"pagesIcons[label]\"\n                    [tuiAccordion]=\"!!openPagesArr[$index]\"\n                    (tuiAccordionChange)=\"openPagesArr[$index] = !!$event\"\n                >\n                    <span class=\"t-label\">{{ label }}</span>\n                    <tui-icon\n                        class=\"t-chevron\"\n                        [class.t-chevron_active]=\"!!openPagesArr[$index]\"\n                        [icon]=\"icons.more\"\n                        [style.margin]=\"0\"\n                    />\n                </button>\n                <tui-expand [style.padding-block]=\"0\">\n                    <div\n                        *tuiItem\n                        class=\"t-section\"\n                    >\n                        @for (item of items[$index]; track $index) {\n                            <ng-container\n                                [ngTemplateOutlet]=\"pages\"\n                                [ngTemplateOutletContext]=\"{item: item, index: index * 100 + $index}\"\n                            />\n                        }\n                    </div>\n                </tui-expand>\n            }\n        </tui-accordion>\n\n        <ng-template\n            #page\n            let-item\n        >\n            @if (item.route.includes('://')) {\n                <a\n                    tuiLink\n                    class=\"t-sublink\"\n                    [attr.rel]=\"item.rel\"\n                    [href]=\"item.route\"\n                    [iconStart]=\"item.section ? '' : pagesIcons[item.title]\"\n                    [target]=\"item.target || '_self'\"\n                    [textContent]=\"item.title\"\n                ></a>\n            } @else {\n                <a\n                    routerLinkActive=\"t-sublink_active\"\n                    tuiLink\n                    class=\"t-sublink\"\n                    [attr.rel]=\"item.rel\"\n                    [iconStart]=\"item.section ? '' : pagesIcons[item.title]\"\n                    [routerLink]=\"item.route\"\n                    [target]=\"item.target || '_self'\"\n                    [textContent]=\"item.title\"\n                    [tuiDocScrollIntoViewLink]=\"isActive(item.route)\"\n                    (click)=\"closeMenu()\"\n                ></a>\n            }\n        </ng-template>\n\n        <ng-template\n            #pages\n            let-index=\"index\"\n            let-item=\"item\"\n        >\n            @if (!item.subPages) {\n                <ng-container\n                    [ngTemplateOutlet]=\"page\"\n                    [ngTemplateOutletContext]=\"{$implicit: item}\"\n                />\n            } @else {\n                <div\n                    routerLinkActive\n                    class=\"t-subsection\"\n                    [routerLinkActiveOptions]=\"{exact: false}\"\n                >\n                    @if (item.subPages) {\n                        <button\n                            tuiLink\n                            type=\"button\"\n                            class=\"t-sublink t-sublink_subsection\"\n                            (click)=\"onGroupClick(index)\"\n                        >\n                            <tui-icon\n                                class=\"t-chevron\"\n                                [class.t-chevron_active]=\"!!openPagesGroupsArr[index]\"\n                                [icon]=\"icons.more\"\n                            />\n                            {{ item.title }}\n                            <tui-icon\n                                *polymorpheusOutlet=\"item.icon as icon\"\n                                class=\"t-icon\"\n                                [icon]=\"icon\"\n                            />\n                        </button>\n                    }\n\n                    <tui-expand\n                        class=\"t-expand\"\n                        [expanded]=\"!!openPagesGroupsArr[index]\"\n                    >\n                        <div class=\"t-section t-section_nested\">\n                            @for (subPage of $pages(item.subPages); track subPage) {\n                                @if (subPage.route.includes('://')) {\n                                    <a\n                                        tuiLink\n                                        class=\"t-sublink t-sublink_small\"\n                                        [attr.rel]=\"subPage.rel\"\n                                        [href]=\"subPage.route\"\n                                        [target]=\"subPage.target || '_self'\"\n                                        [textContent]=\"subPage.title\"\n                                    ></a>\n                                } @else {\n                                    <a\n                                        routerLinkActive=\"t-sublink_active\"\n                                        tuiLink\n                                        class=\"t-sublink t-sublink_small\"\n                                        [attr.rel]=\"subPage.rel\"\n                                        [fragment]=\"subPage.fragment\"\n                                        [routerLink]=\"subPage.route\"\n                                        [target]=\"subPage.target || '_self'\"\n                                        [textContent]=\"subPage.title\"\n                                        [tuiDocScrollIntoViewLink]=\"isActive(subPage.route)\"\n                                        (click)=\"closeMenu()\"\n                                    ></a>\n                                }\n                            }\n                        </div>\n                    </tui-expand>\n                </div>\n            }\n        </ng-template>\n    </tui-scrollbar>\n</nav>\n\n<ng-content />\n", styles: [":host{z-index:1;display:flex;flex-direction:column;text-align:center;padding:0 .25rem;--tui-stroke-width: .09375rem}.t-input{margin:1.25rem}.t-slash{block-size:1rem;font-size:.5rem}.t-navigation{display:flex;flex-wrap:wrap;max-block-size:100%;min-block-size:0;flex:1 1 0;text-align:start}.t-navigation tui-scrollbar{overscroll-behavior:none}:host-context(tui-drawer){margin:-1.25rem -1.5rem;padding-inline-start:0}:host-context(tui-drawer) .t-scrollbar{display:contents}.t-accordion{inline-size:auto;margin:.5rem .375rem 1.5rem}.t-scrollbar{scroll-behavior:var(--tui-scroll-behavior);inline-size:100%}.t-label{margin-inline-start:1.1875rem;font-weight:700}.t-expand{margin-inline-start:.25rem;padding-block:0}.t-section{display:flex;flex-direction:column;align-items:flex-start}.t-section_nested{margin:0 .75rem;clip-path:inset(.5rem 0)}@supports (-webkit-touch-callout: none){.t-prevent-ios-scroll:focus{animation:tuiPreventIOSScroll 1ms}}@keyframes tuiPreventIOSScroll{0%{opacity:0}to{opacity:1}}.t-subsection{margin-inline-start:.625rem}.t-sublink{display:inline-flex;align-items:center;font:var(--tui-typography-body-s);padding-block:.5rem;padding-inline-start:.4375rem;text-decoration:none}.t-accordion>.t-sublink{block-size:2.5rem;font:var(--tui-typography-body-s);font-weight:700;color:var(--tui-text-primary);align-items:center;padding:0 1rem;margin-inline-start:1px}.t-accordion>.t-sublink:before{margin-inline-end:calc(.875rem * (1 - .25 * var(--t-zoom)))}.t-accordion>.t-sublink:after{opacity:0}.t-sublink_small{margin-inline-start:1rem;padding-inline:0}.t-sublink_subsection{margin-inline-start:0!important;padding-inline-start:1.6875rem}.t-sublink_subsection .t-chevron{position:absolute;inset-inline-start:.4375rem}.t-sublink_subsection:before{opacity:0}.t-sublink.t-sublink.t-sublink_active{color:var(--tui-text-primary);font-weight:700}.t-sublink.t-sublink.t-sublink_active:after{position:absolute;display:block;inset-block:.5rem;inset-inline-start:-1rem;block-size:auto;inline-size:.1875rem;padding:0;margin-inline-start:-1px;border-radius:1rem;background:var(--tui-text-primary);zoom:1}.t-sublink:not([data-icon-start]){margin-inline-start:1.875rem}.t-sublink:not([data-icon-start]):before{position:absolute;display:block;inset-block-start:0;inset-block-end:0;inset-inline-start:-1rem;block-size:auto;inline-size:1px;padding:0;background:var(--tui-border-normal);zoom:1}.t-chevron{transition-property:transform;transition-duration:var(--tui-duration, .3s);transition-timing-function:var(--tui-curve-productive-standard);font-size:1rem;margin-inline:-.625rem .875rem}.t-chevron_active{transform:rotate(90deg)}.t-accordion-item{block-size:2.5rem}.t-accordion-item:before{position:relative;inset-inline-start:.5625rem;font-size:1rem}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: PolymorpheusOutlet, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: i2$1.TuiAccordionComponent, selector: "tui-accordion", inputs: ["closeOthers", "size"] }, { kind: "directive", type: i2$1.TuiAccordionDirective, selector: "button[tuiAccordion]", inputs: ["tuiAccordion"], outputs: ["tuiAccordionChange"] }, { kind: "component", type: i3$1.TuiExpand, selector: "tui-expand", inputs: ["expanded"] }, { kind: "directive", type: i4$1.TuiItem, selector: "[tuiItem]" }, { kind: "directive", type: TuiAutoFocus, selector: "[tuiAutoFocus]", inputs: ["tuiAutoFocus"] }, { kind: "component", type: i5$2.TuiDataListComponent, selector: "tui-data-list", inputs: ["emptyContent", "size"] }, { kind: "directive", type: i5$2.TuiOption, selector: "button[tuiOption], a[tuiOption], label[tuiOption]", inputs: ["disabled"] }, { kind: "directive", type: i5$2.TuiOptGroup, selector: "tui-opt-group", inputs: ["label"] }, { kind: "directive", type: TuiDocScrollIntoViewLink, selector: "[tuiDocScrollIntoViewLink]", inputs: ["tuiDocScrollIntoViewLink"] }, { kind: "component", type: TuiIcon, selector: "tui-icon:not([tuiBadge])", inputs: ["background"] }, { kind: "component", type: i5.TuiTextfieldComponent, selector: "tui-textfield:not([multi])", inputs: ["content", "filler"] }, { kind: "directive", type: i5.TuiTextfieldOptionsDirective, selector: "[tuiTextfieldAppearance],[tuiTextfieldSize],[tuiTextfieldCleaner]", inputs: ["tuiTextfieldAppearance", "tuiTextfieldSize", "tuiTextfieldCleaner"] }, { kind: "directive", type: i6.TuiDropdownContent, selector: "ng-template[tuiDropdown]" }, { kind: "directive", type: i5$1.TuiInputDirective, selector: "input[tuiInput]", inputs: ["readOnly", "invalid", "focused", "state"] }, { kind: "directive", type: TuiLink, selector: "a[tuiLink], button[tuiLink]" }, { kind: "component", type: TuiScrollbar, selector: "tui-scrollbar" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TuiDocNavigation, decorators: [{
             type: Component,
@@ -782,7 +784,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
                     ], changeDetection: ChangeDetectionStrategy.OnPush, providers: NAVIGATION_PROVIDERS, host: {
                         '[class._open]': 'menuOpen',
                         '(window:keydown)': 'onFocusSearch($event)',
-                    }, template: "@if (searchEnabled()) {\n    <tui-textfield\n        tuiTextfieldSize=\"m\"\n        class=\"t-input\"\n        [iconStart]=\"docIcons.search\"\n        [open]=\"open() && canOpen\"\n        (keyup)=\"open.set(canOpen && $event.code !== 'Escape')\"\n        (openChange)=\"open.set($event)\"\n    >\n        @if (!search.value) {\n            <code class=\"t-slash\">/</code>\n        }\n\n        <input\n            tuiInput\n            class=\"t-prevent-ios-scroll\"\n            [formControl]=\"search\"\n            [placeholder]=\"searchText()\"\n            [tuiAutoFocus]=\"!!drawer\"\n        />\n\n        @if (canOpen) {\n            <tui-data-list *tuiDropdown>\n                @for (group of filtered(); track group) {\n                    <tui-opt-group [label]=\"labels[$index] || ''\">\n                        @for (item of group; track item) {\n                            @if (item.route.includes('://')) {\n                                <a\n                                    tuiOption\n                                    [attr.rel]=\"item.rel\"\n                                    [href]=\"item.route\"\n                                    [target]=\"item.target || '_self'\"\n                                    [textContent]=\"item.title\"\n                                ></a>\n                            } @else {\n                                <a\n                                    tuiOption\n                                    [attr.rel]=\"item.rel\"\n                                    [fragment]=\"item.fragment\"\n                                    [routerLink]=\"item.route\"\n                                    [target]=\"item.target || '_self'\"\n                                    [textContent]=\"item.title\"\n                                    (click)=\"onClick()\"\n                                ></a>\n                            }\n                        }\n                    </tui-opt-group>\n                }\n            </tui-data-list>\n        }\n    </tui-textfield>\n}\n\n<nav class=\"t-navigation\">\n    <tui-scrollbar class=\"t-scrollbar\">\n        <tui-accordion\n            size=\"s\"\n            class=\"t-accordion\"\n            [closeOthers]=\"false\"\n        >\n            @for (item of itemsWithoutSections; track item) {\n                <ng-container\n                    [ngTemplateOutlet]=\"page\"\n                    [ngTemplateOutletContext]=\"{$implicit: item}\"\n                />\n            }\n            @for (label of labels; track $index; let index = $index) {\n                <button\n                    appearance=\"\"\n                    iconEnd=\"\"\n                    class=\"t-accordion-item\"\n                    [iconStart]=\"pagesIcons[label]\"\n                    [tuiAccordion]=\"!!openPagesArr[$index]\"\n                    (tuiAccordionChange)=\"openPagesArr[$index] = !!$event\"\n                >\n                    <span class=\"t-label\">{{ label }}</span>\n                    <tui-icon\n                        class=\"t-chevron\"\n                        [class.t-chevron_active]=\"!!openPagesArr[$index]\"\n                        [icon]=\"icons.more\"\n                        [style.margin]=\"0\"\n                    />\n                </button>\n                <tui-expand [style.padding-block]=\"0\">\n                    <div\n                        *tuiItem\n                        class=\"t-section\"\n                    >\n                        @for (item of items[$index]; track $index) {\n                            <ng-container\n                                [ngTemplateOutlet]=\"pages\"\n                                [ngTemplateOutletContext]=\"{item: item, index: index * 100 + $index}\"\n                            />\n                        }\n                    </div>\n                </tui-expand>\n            }\n        </tui-accordion>\n\n        <ng-template\n            #page\n            let-item\n        >\n            @if (item.route.includes('://')) {\n                <a\n                    tuiLink\n                    class=\"t-sublink\"\n                    [attr.rel]=\"item.rel\"\n                    [href]=\"item.route\"\n                    [iconStart]=\"item.section ? '' : pagesIcons[item.title]\"\n                    [target]=\"item.target || '_self'\"\n                    [textContent]=\"item.title\"\n                ></a>\n            } @else {\n                <a\n                    routerLinkActive=\"t-sublink_active\"\n                    tuiLink\n                    class=\"t-sublink\"\n                    [attr.rel]=\"item.rel\"\n                    [iconStart]=\"item.section ? '' : pagesIcons[item.title]\"\n                    [routerLink]=\"item.route\"\n                    [target]=\"item.target || '_self'\"\n                    [textContent]=\"item.title\"\n                    [tuiDocScrollIntoViewLink]=\"isActive(item.route)\"\n                    (click)=\"closeMenu()\"\n                ></a>\n            }\n        </ng-template>\n\n        <ng-template\n            #pages\n            let-index=\"index\"\n            let-item=\"item\"\n        >\n            @if (!item.subPages) {\n                <ng-container\n                    [ngTemplateOutlet]=\"page\"\n                    [ngTemplateOutletContext]=\"{$implicit: item}\"\n                />\n            } @else {\n                <div\n                    routerLinkActive\n                    class=\"t-subsection\"\n                    [routerLinkActiveOptions]=\"{exact: false}\"\n                >\n                    @if (item.subPages) {\n                        <button\n                            tuiLink\n                            type=\"button\"\n                            class=\"t-sublink t-sublink_subsection\"\n                            (click)=\"onGroupClick(index)\"\n                        >\n                            <tui-icon\n                                class=\"t-chevron\"\n                                [class.t-chevron_active]=\"!!openPagesGroupsArr[index]\"\n                                [icon]=\"icons.more\"\n                            />\n                            {{ item.title }}\n                            <tui-icon\n                                *polymorpheusOutlet=\"item.icon as icon\"\n                                class=\"t-icon\"\n                                [icon]=\"icon\"\n                            />\n                        </button>\n                    }\n\n                    <tui-expand\n                        class=\"t-expand\"\n                        [expanded]=\"!!openPagesGroupsArr[index]\"\n                    >\n                        <div class=\"t-section t-section_nested\">\n                            @for (subPage of $pages(item.subPages); track subPage) {\n                                @if (subPage.route.includes('://')) {\n                                    <a\n                                        tuiLink\n                                        class=\"t-sublink t-sublink_small\"\n                                        [attr.rel]=\"subPage.rel\"\n                                        [href]=\"subPage.route\"\n                                        [target]=\"subPage.target || '_self'\"\n                                        [textContent]=\"subPage.title\"\n                                    ></a>\n                                } @else {\n                                    <a\n                                        routerLinkActive=\"t-sublink_active\"\n                                        tuiLink\n                                        class=\"t-sublink t-sublink_small\"\n                                        [attr.rel]=\"subPage.rel\"\n                                        [fragment]=\"subPage.fragment\"\n                                        [routerLink]=\"subPage.route\"\n                                        [target]=\"subPage.target || '_self'\"\n                                        [textContent]=\"subPage.title\"\n                                        [tuiDocScrollIntoViewLink]=\"isActive(subPage.route)\"\n                                        (click)=\"closeMenu()\"\n                                    ></a>\n                                }\n                            }\n                        </div>\n                    </tui-expand>\n                </div>\n            }\n        </ng-template>\n    </tui-scrollbar>\n</nav>\n\n<ng-content />\n", styles: [":host{z-index:1;display:flex;flex-direction:column;text-align:center;padding:0 .25rem;--tui-stroke-width: .09375rem}.t-input{margin:1.25rem}.t-slash{block-size:1rem;font-size:.5rem}.t-navigation{display:flex;flex-wrap:wrap;max-block-size:100%;min-block-size:0;flex:1 1 0;text-align:start}.t-navigation tui-scrollbar{overscroll-behavior:none}:host-context(tui-drawer){margin:-1.25rem -1.5rem;padding-inline-start:0}:host-context(tui-drawer) .t-scrollbar{display:contents}.t-accordion{inline-size:auto;margin:.5rem .375rem 1.5rem}.t-scrollbar{scroll-behavior:var(--tui-scroll-behavior);inline-size:100%}.t-label{margin-inline-start:1.1875rem;font-weight:700}.t-expand{margin-inline-start:.25rem;padding-block:0}.t-section{display:flex;flex-direction:column;align-items:flex-start}.t-section_nested{margin:0 .75rem;clip-path:inset(.5rem 0)}@supports (-webkit-touch-callout: none){.t-prevent-ios-scroll:focus{animation:tuiPreventIOSScroll 1ms}}@keyframes tuiPreventIOSScroll{0%{opacity:0}to{opacity:1}}.t-subsection{margin-inline-start:.625rem}.t-sublink{display:inline-flex;align-items:center;font:var(--tui-typography-body-s);padding-block:.5rem;padding-inline-start:.4375rem;text-decoration:none}.t-accordion>.t-sublink{block-size:2.5rem;font:var(--tui-typography-body-s);font-weight:700;color:var(--tui-text-primary);align-items:center;padding:0 1rem;margin-inline-start:1px}.t-accordion>.t-sublink:before{margin-inline-end:calc(.875rem * (1 - .25 * var(--t-zoom)))}.t-accordion>.t-sublink:after{opacity:0}.t-sublink_small{margin-inline-start:1rem;padding-inline:0}.t-sublink_subsection{margin-inline-start:0!important;padding-inline-start:1.6875rem}.t-sublink_subsection .t-chevron{position:absolute;inset-inline-start:.4375rem}.t-sublink_subsection:before{opacity:0}.t-sublink.t-sublink.t-sublink_active{color:var(--tui-text-primary);font-weight:700}.t-sublink.t-sublink.t-sublink_active:after{position:absolute;display:block;inset-block:.5rem;inset-inline-start:-1rem;block-size:auto;inline-size:.1875rem;padding:0;margin-inline-start:-1px;border-radius:1rem;background:var(--tui-text-primary);zoom:1}.t-sublink:not([data-icon-start]){margin-inline-start:1.875rem}.t-sublink:not([data-icon-start]):before{position:absolute;display:block;inset-block-start:0;inset-block-end:0;inset-inline-start:-1rem;block-size:auto;inline-size:1px;padding:0;background:var(--tui-border-normal);zoom:1}.t-chevron{transition-property:transform;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;font-size:1rem;margin-inline:-.625rem .875rem}.t-chevron_active{transform:rotate(90deg)}.t-accordion-item{block-size:2.5rem}.t-accordion-item:before{position:relative;inset-inline-start:.5625rem;font-size:1rem}\n"] }]
+                    }, template: "@if (searchEnabled()) {\n    <tui-textfield\n        tuiTextfieldSize=\"m\"\n        class=\"t-input\"\n        [iconStart]=\"docIcons.search\"\n        [open]=\"open() && canOpen\"\n        (keyup)=\"open.set(canOpen && $event.code !== 'Escape')\"\n        (openChange)=\"open.set($event)\"\n    >\n        @if (!search.value) {\n            <code class=\"t-slash\">/</code>\n        }\n\n        <input\n            tuiInput\n            class=\"t-prevent-ios-scroll\"\n            [formControl]=\"search\"\n            [placeholder]=\"searchText()\"\n            [tuiAutoFocus]=\"!!drawer\"\n        />\n\n        @if (canOpen) {\n            <tui-data-list *tuiDropdown>\n                @for (group of filtered(); track group) {\n                    <tui-opt-group [label]=\"labels[$index] || ''\">\n                        @for (item of group; track item) {\n                            @if (item.route.includes('://')) {\n                                <a\n                                    tuiOption\n                                    [attr.rel]=\"item.rel\"\n                                    [href]=\"item.route\"\n                                    [target]=\"item.target || '_self'\"\n                                    [textContent]=\"item.title\"\n                                ></a>\n                            } @else {\n                                <a\n                                    tuiOption\n                                    [attr.rel]=\"item.rel\"\n                                    [fragment]=\"item.fragment\"\n                                    [routerLink]=\"item.route\"\n                                    [target]=\"item.target || '_self'\"\n                                    [textContent]=\"item.title\"\n                                    (click)=\"onClick()\"\n                                ></a>\n                            }\n                        }\n                    </tui-opt-group>\n                }\n            </tui-data-list>\n        }\n    </tui-textfield>\n}\n\n<nav class=\"t-navigation\">\n    <tui-scrollbar class=\"t-scrollbar\">\n        <tui-accordion\n            size=\"s\"\n            class=\"t-accordion\"\n            [closeOthers]=\"false\"\n        >\n            @for (item of itemsWithoutSections; track item) {\n                <ng-container\n                    [ngTemplateOutlet]=\"page\"\n                    [ngTemplateOutletContext]=\"{$implicit: item}\"\n                />\n            }\n            @for (label of labels; track $index; let index = $index) {\n                <button\n                    appearance=\"\"\n                    iconEnd=\"\"\n                    class=\"t-accordion-item\"\n                    [iconStart]=\"pagesIcons[label]\"\n                    [tuiAccordion]=\"!!openPagesArr[$index]\"\n                    (tuiAccordionChange)=\"openPagesArr[$index] = !!$event\"\n                >\n                    <span class=\"t-label\">{{ label }}</span>\n                    <tui-icon\n                        class=\"t-chevron\"\n                        [class.t-chevron_active]=\"!!openPagesArr[$index]\"\n                        [icon]=\"icons.more\"\n                        [style.margin]=\"0\"\n                    />\n                </button>\n                <tui-expand [style.padding-block]=\"0\">\n                    <div\n                        *tuiItem\n                        class=\"t-section\"\n                    >\n                        @for (item of items[$index]; track $index) {\n                            <ng-container\n                                [ngTemplateOutlet]=\"pages\"\n                                [ngTemplateOutletContext]=\"{item: item, index: index * 100 + $index}\"\n                            />\n                        }\n                    </div>\n                </tui-expand>\n            }\n        </tui-accordion>\n\n        <ng-template\n            #page\n            let-item\n        >\n            @if (item.route.includes('://')) {\n                <a\n                    tuiLink\n                    class=\"t-sublink\"\n                    [attr.rel]=\"item.rel\"\n                    [href]=\"item.route\"\n                    [iconStart]=\"item.section ? '' : pagesIcons[item.title]\"\n                    [target]=\"item.target || '_self'\"\n                    [textContent]=\"item.title\"\n                ></a>\n            } @else {\n                <a\n                    routerLinkActive=\"t-sublink_active\"\n                    tuiLink\n                    class=\"t-sublink\"\n                    [attr.rel]=\"item.rel\"\n                    [iconStart]=\"item.section ? '' : pagesIcons[item.title]\"\n                    [routerLink]=\"item.route\"\n                    [target]=\"item.target || '_self'\"\n                    [textContent]=\"item.title\"\n                    [tuiDocScrollIntoViewLink]=\"isActive(item.route)\"\n                    (click)=\"closeMenu()\"\n                ></a>\n            }\n        </ng-template>\n\n        <ng-template\n            #pages\n            let-index=\"index\"\n            let-item=\"item\"\n        >\n            @if (!item.subPages) {\n                <ng-container\n                    [ngTemplateOutlet]=\"page\"\n                    [ngTemplateOutletContext]=\"{$implicit: item}\"\n                />\n            } @else {\n                <div\n                    routerLinkActive\n                    class=\"t-subsection\"\n                    [routerLinkActiveOptions]=\"{exact: false}\"\n                >\n                    @if (item.subPages) {\n                        <button\n                            tuiLink\n                            type=\"button\"\n                            class=\"t-sublink t-sublink_subsection\"\n                            (click)=\"onGroupClick(index)\"\n                        >\n                            <tui-icon\n                                class=\"t-chevron\"\n                                [class.t-chevron_active]=\"!!openPagesGroupsArr[index]\"\n                                [icon]=\"icons.more\"\n                            />\n                            {{ item.title }}\n                            <tui-icon\n                                *polymorpheusOutlet=\"item.icon as icon\"\n                                class=\"t-icon\"\n                                [icon]=\"icon\"\n                            />\n                        </button>\n                    }\n\n                    <tui-expand\n                        class=\"t-expand\"\n                        [expanded]=\"!!openPagesGroupsArr[index]\"\n                    >\n                        <div class=\"t-section t-section_nested\">\n                            @for (subPage of $pages(item.subPages); track subPage) {\n                                @if (subPage.route.includes('://')) {\n                                    <a\n                                        tuiLink\n                                        class=\"t-sublink t-sublink_small\"\n                                        [attr.rel]=\"subPage.rel\"\n                                        [href]=\"subPage.route\"\n                                        [target]=\"subPage.target || '_self'\"\n                                        [textContent]=\"subPage.title\"\n                                    ></a>\n                                } @else {\n                                    <a\n                                        routerLinkActive=\"t-sublink_active\"\n                                        tuiLink\n                                        class=\"t-sublink t-sublink_small\"\n                                        [attr.rel]=\"subPage.rel\"\n                                        [fragment]=\"subPage.fragment\"\n                                        [routerLink]=\"subPage.route\"\n                                        [target]=\"subPage.target || '_self'\"\n                                        [textContent]=\"subPage.title\"\n                                        [tuiDocScrollIntoViewLink]=\"isActive(subPage.route)\"\n                                        (click)=\"closeMenu()\"\n                                    ></a>\n                                }\n                            }\n                        </div>\n                    </tui-expand>\n                </div>\n            }\n        </ng-template>\n    </tui-scrollbar>\n</nav>\n\n<ng-content />\n", styles: [":host{z-index:1;display:flex;flex-direction:column;text-align:center;padding:0 .25rem;--tui-stroke-width: .09375rem}.t-input{margin:1.25rem}.t-slash{block-size:1rem;font-size:.5rem}.t-navigation{display:flex;flex-wrap:wrap;max-block-size:100%;min-block-size:0;flex:1 1 0;text-align:start}.t-navigation tui-scrollbar{overscroll-behavior:none}:host-context(tui-drawer){margin:-1.25rem -1.5rem;padding-inline-start:0}:host-context(tui-drawer) .t-scrollbar{display:contents}.t-accordion{inline-size:auto;margin:.5rem .375rem 1.5rem}.t-scrollbar{scroll-behavior:var(--tui-scroll-behavior);inline-size:100%}.t-label{margin-inline-start:1.1875rem;font-weight:700}.t-expand{margin-inline-start:.25rem;padding-block:0}.t-section{display:flex;flex-direction:column;align-items:flex-start}.t-section_nested{margin:0 .75rem;clip-path:inset(.5rem 0)}@supports (-webkit-touch-callout: none){.t-prevent-ios-scroll:focus{animation:tuiPreventIOSScroll 1ms}}@keyframes tuiPreventIOSScroll{0%{opacity:0}to{opacity:1}}.t-subsection{margin-inline-start:.625rem}.t-sublink{display:inline-flex;align-items:center;font:var(--tui-typography-body-s);padding-block:.5rem;padding-inline-start:.4375rem;text-decoration:none}.t-accordion>.t-sublink{block-size:2.5rem;font:var(--tui-typography-body-s);font-weight:700;color:var(--tui-text-primary);align-items:center;padding:0 1rem;margin-inline-start:1px}.t-accordion>.t-sublink:before{margin-inline-end:calc(.875rem * (1 - .25 * var(--t-zoom)))}.t-accordion>.t-sublink:after{opacity:0}.t-sublink_small{margin-inline-start:1rem;padding-inline:0}.t-sublink_subsection{margin-inline-start:0!important;padding-inline-start:1.6875rem}.t-sublink_subsection .t-chevron{position:absolute;inset-inline-start:.4375rem}.t-sublink_subsection:before{opacity:0}.t-sublink.t-sublink.t-sublink_active{color:var(--tui-text-primary);font-weight:700}.t-sublink.t-sublink.t-sublink_active:after{position:absolute;display:block;inset-block:.5rem;inset-inline-start:-1rem;block-size:auto;inline-size:.1875rem;padding:0;margin-inline-start:-1px;border-radius:1rem;background:var(--tui-text-primary);zoom:1}.t-sublink:not([data-icon-start]){margin-inline-start:1.875rem}.t-sublink:not([data-icon-start]):before{position:absolute;display:block;inset-block-start:0;inset-block-end:0;inset-inline-start:-1rem;block-size:auto;inline-size:1px;padding:0;background:var(--tui-border-normal);zoom:1}.t-chevron{transition-property:transform;transition-duration:var(--tui-duration, .3s);transition-timing-function:var(--tui-curve-productive-standard);font-size:1rem;margin-inline:-.625rem .875rem}.t-chevron_active{transform:rotate(90deg)}.t-accordion-item{block-size:2.5rem}.t-accordion-item:before{position:relative;inset-inline-start:.5625rem;font-size:1rem}\n"] }]
         }], ctorParameters: () => [] });
 
 class TuiDocHeader {
@@ -830,11 +832,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
 
 class TuiDocMain {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TuiDocMain, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: TuiDocMain, isStandalone: true, selector: "tui-doc-main", ngImport: i0, template: "<tui-root>\n    <div class=\"tui-doc-page\">\n        <tui-doc-navigation class=\"tui-doc-navigation\">\n            <ng-content select=\"tuiDocNavigation\" />\n        </tui-doc-navigation>\n        <div class=\"tui-doc-content\">\n            <router-outlet class=\"tui-doc-outlet\" />\n        </div>\n    </div>\n    <header tuiDocHeader>\n        <ng-content\n            ngProjectAs=\"tuiDocMobileNavigation\"\n            select=\"tuiDocMobileNavigation\"\n        />\n        <ng-content select=\"tuiDocHeader\" />\n    </header>\n    <ng-container ngProjectAs=\"tuiOverContent\">\n        <ng-content select=\"tuiOverContent\" />\n    </ng-container>\n</tui-root>\n", styles: ["html:has(body[tuiTheme=dark]){background:#222}tui-doc-main{display:block}code:not(pre code):not(.hljs):not([class*=language-]){transition-property:background;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;display:inline-flex;background:var(--tui-background-neutral-1);color:var(--tui-text-secondary);vertical-align:middle;align-items:center;border-radius:.25rem;font-weight:500;outline:1px solid var(--tui-border-hover);font-size:.75rem;padding:0 .3125rem;margin:0 .1875rem;text-wrap:wrap}a code:not(pre code):not(.hljs):not([class*=language-]){color:var(--tui-text-action)}tui-textfield code:not(pre code){line-height:1.25rem}button:focus code,a:focus code{background:var(--tui-background-base)}.tui-doc-page{isolation:isolate;padding-block-start:4.125rem}tui-doc-navigation.tui-doc-navigation{position:fixed;inset-block-end:0;inset-block-start:4.125rem;inline-size:16.5rem;box-sizing:border-box;background:var(--tui-background-base)}tui-doc-navigation.tui-doc-navigation:before,tui-doc-navigation.tui-doc-navigation:after{content:\"\";position:absolute;inset:-.25rem 0 .25rem;pointer-events:none;border-radius:var(--tui-radius-m);border:.25rem solid var(--tui-background-base-alt)}[tuiTheme=dark] tui-doc-navigation.tui-doc-navigation:before,[tuiTheme=dark] tui-doc-navigation.tui-doc-navigation:after{border-color:var(--tui-background-elevation-2)}tui-doc-navigation.tui-doc-navigation:after{inset-inline-start:100%;inline-size:200vw;margin-inline-start:-.25rem}@media screen and (max-width:767.4px){tui-doc-navigation.tui-doc-navigation{display:none}}.tui-doc-content{margin-inline-start:16.5rem}@media screen and (max-width:767.4px){.tui-doc-content{margin-inline:0}}.tui-doc-outlet+*{display:block}tui-doc-code .hljs-tag{background:none}tui-doc-code .hljs{display:block;overflow-x:auto;padding:.5em;color:var(--tui-text-primary)}tui-doc-code .hljs-subst,tui-doc-code .hljs-title{font-weight:400;color:var(--tui-text-primary)}tui-doc-code .hljs-property{color:#bd65a4}tui-doc-code .hljs-comment,tui-doc-code .hljs-quote{color:var(--tui-text-secondary);font-style:italic}tui-doc-code .hljs-meta{color:#e38162}tui-doc-code .hljs-section,tui-doc-code .hljs-name,tui-doc-code .hljs-literal,tui-doc-code .hljs-keyword,tui-doc-code .hljs-selector-tag,tui-doc-code .hljs-type,tui-doc-code .hljs-selector-id,tui-doc-code .hljs-selector-class{font-weight:700;color:var(--tui-text-action)}tui-doc-code .hljs-attr{color:var(--tui-text-action)}tui-doc-code .hljs-attribute,tui-doc-code .hljs-number,tui-doc-code .hljs-regexp,tui-doc-code .hljs-link,tui-doc-code .hljs-built_in{font-weight:700;color:#b8474e}tui-doc-code .hljs-number,tui-doc-code .hljs-regexp,tui-doc-code .hljs-link{font-weight:400}tui-doc-code .hljs-string{color:var(--tui-status-positive);font-weight:700}tui-doc-code .hljs-symbol,tui-doc-code .hljs-bullet,tui-doc-code .hljs-formula{color:var(--tui-text-primary);background:var(--tui-background-base-alt);font-style:italic}tui-doc-code .hljs-doctag{text-decoration:underline}tui-doc-code .hljs-variable,tui-doc-code .hljs-template-variable{color:var(--tui-text-action-hover)}tui-doc-code .hljs-addition{background:var(--tui-status-positive-pale)}tui-doc-code .hljs-deletion{background:var(--tui-status-negative-pale)}tui-doc-code .hljs-emphasis{font-style:italic}tui-doc-code .hljs-strong{font-weight:700}tui-doc-code .hljs .hljs-line-numbers{padding:0}tui-doc-code .hljs-ln-numbers{vertical-align:top;opacity:.3;text-align:end;padding-inline-end:1em!important}[tuiTheme=dark] tui-doc-code .hljs-variable,tui-doc-code[tuiTheme=dark] .hljs-variable,[tuiTheme=dark] tui-doc-code .hljs-template-variable,tui-doc-code[tuiTheme=dark] .hljs-template-variable{color:var(--tui-status-warning)}tui-root>tui-scroll-controls .t-bar.t-bar_vertical{inset-block:4.5rem 1rem;transform:translate(-.75rem);opacity:.5}\n"], dependencies: [{ kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: TuiDocHeader, selector: "header[tuiDocHeader]" }, { kind: "component", type: TuiDocNavigation, selector: "tui-doc-navigation" }, { kind: "component", type: TuiRoot, selector: "tui-root" }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: TuiDocMain, isStandalone: true, selector: "tui-doc-main", ngImport: i0, template: "<tui-root>\n    <div class=\"tui-doc-page\">\n        <tui-doc-navigation class=\"tui-doc-navigation\">\n            <ng-content select=\"tuiDocNavigation\" />\n        </tui-doc-navigation>\n        <div class=\"tui-doc-content\">\n            <router-outlet class=\"tui-doc-outlet\" />\n        </div>\n    </div>\n    <header tuiDocHeader>\n        <ng-content\n            ngProjectAs=\"tuiDocMobileNavigation\"\n            select=\"tuiDocMobileNavigation\"\n        />\n        <ng-content select=\"tuiDocHeader\" />\n    </header>\n    <ng-container ngProjectAs=\"tuiOverContent\">\n        <ng-content select=\"tuiOverContent\" />\n    </ng-container>\n</tui-root>\n", styles: ["html:has(body[tuiTheme=dark]){background:#222}tui-doc-main{display:block}code:not(pre code):not(.hljs):not([class*=language-]){transition-property:background;transition-duration:var(--tui-duration, .3s);transition-timing-function:var(--tui-curve-productive-standard);display:inline-flex;background:var(--tui-background-neutral-1);color:var(--tui-text-secondary);vertical-align:middle;align-items:center;border-radius:.25rem;font-weight:500;outline:1px solid var(--tui-border-hover);font-size:.75rem;padding:0 .3125rem;margin:0 .1875rem;text-wrap:wrap}a code:not(pre code):not(.hljs):not([class*=language-]){color:var(--tui-text-action)}tui-textfield code:not(pre code){line-height:1.25rem}button:focus code,a:focus code{background:var(--tui-background-base)}.tui-doc-page{isolation:isolate;padding-block-start:4.125rem}tui-doc-navigation.tui-doc-navigation{position:fixed;inset-block-end:0;inset-block-start:4.125rem;inline-size:16.5rem;box-sizing:border-box;background:var(--tui-background-base)}tui-doc-navigation.tui-doc-navigation:before,tui-doc-navigation.tui-doc-navigation:after{content:\"\";position:absolute;inset:-.25rem 0 .25rem;pointer-events:none;border-radius:var(--tui-radius-m);border:.25rem solid var(--tui-background-base-alt)}[tuiTheme=dark] tui-doc-navigation.tui-doc-navigation:before,[tuiTheme=dark] tui-doc-navigation.tui-doc-navigation:after{border-color:var(--tui-background-elevation-2)}tui-doc-navigation.tui-doc-navigation:after{inset-inline-start:100%;inline-size:200vw;margin-inline-start:-.25rem}@media screen and (max-width:767.4px){tui-doc-navigation.tui-doc-navigation{display:none}}.tui-doc-content{margin-inline-start:16.5rem}@media screen and (max-width:767.4px){.tui-doc-content{margin-inline:0}}.tui-doc-outlet+*{display:block}tui-doc-code .hljs-tag{background:none}tui-doc-code .hljs{display:block;overflow-x:auto;padding:.5em;color:var(--tui-text-primary)}tui-doc-code .hljs-subst,tui-doc-code .hljs-title{font-weight:400;color:var(--tui-text-primary)}tui-doc-code .hljs-property{color:#bd65a4}tui-doc-code .hljs-comment,tui-doc-code .hljs-quote{color:var(--tui-text-secondary);font-style:italic}tui-doc-code .hljs-meta{color:#e38162}tui-doc-code .hljs-section,tui-doc-code .hljs-name,tui-doc-code .hljs-literal,tui-doc-code .hljs-keyword,tui-doc-code .hljs-selector-tag,tui-doc-code .hljs-type,tui-doc-code .hljs-selector-id,tui-doc-code .hljs-selector-class{font-weight:700;color:var(--tui-text-action)}tui-doc-code .hljs-attr{color:var(--tui-text-action)}tui-doc-code .hljs-attribute,tui-doc-code .hljs-number,tui-doc-code .hljs-regexp,tui-doc-code .hljs-link,tui-doc-code .hljs-built_in{font-weight:700;color:#b8474e}tui-doc-code .hljs-number,tui-doc-code .hljs-regexp,tui-doc-code .hljs-link{font-weight:400}tui-doc-code .hljs-string{color:var(--tui-status-positive);font-weight:700}tui-doc-code .hljs-symbol,tui-doc-code .hljs-bullet,tui-doc-code .hljs-formula{color:var(--tui-text-primary);background:var(--tui-background-base-alt);font-style:italic}tui-doc-code .hljs-doctag{text-decoration:underline}tui-doc-code .hljs-variable,tui-doc-code .hljs-template-variable{color:var(--tui-text-action-hover)}tui-doc-code .hljs-addition{background:var(--tui-status-positive-pale)}tui-doc-code .hljs-deletion{background:var(--tui-status-negative-pale)}tui-doc-code .hljs-emphasis{font-style:italic}tui-doc-code .hljs-strong{font-weight:700}tui-doc-code .hljs .hljs-line-numbers{padding:0}tui-doc-code .hljs-ln-numbers{vertical-align:top;opacity:.3;text-align:end;padding-inline-end:1em!important}[tuiTheme=dark] tui-doc-code .hljs-variable,tui-doc-code[tuiTheme=dark] .hljs-variable,[tuiTheme=dark] tui-doc-code .hljs-template-variable,tui-doc-code[tuiTheme=dark] .hljs-template-variable{color:var(--tui-status-warning)}tui-root>tui-scroll-controls .t-bar.t-bar_vertical{inset-block:4.5rem 1rem;transform:translate(-.75rem);opacity:.5}\n"], dependencies: [{ kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: TuiDocHeader, selector: "header[tuiDocHeader]" }, { kind: "component", type: TuiDocNavigation, selector: "tui-doc-navigation" }, { kind: "component", type: TuiRoot, selector: "tui-root" }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TuiDocMain, decorators: [{
             type: Component,
-            args: [{ selector: 'tui-doc-main', imports: [RouterOutlet, TuiDocHeader, TuiDocNavigation, TuiRoot], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.Default, template: "<tui-root>\n    <div class=\"tui-doc-page\">\n        <tui-doc-navigation class=\"tui-doc-navigation\">\n            <ng-content select=\"tuiDocNavigation\" />\n        </tui-doc-navigation>\n        <div class=\"tui-doc-content\">\n            <router-outlet class=\"tui-doc-outlet\" />\n        </div>\n    </div>\n    <header tuiDocHeader>\n        <ng-content\n            ngProjectAs=\"tuiDocMobileNavigation\"\n            select=\"tuiDocMobileNavigation\"\n        />\n        <ng-content select=\"tuiDocHeader\" />\n    </header>\n    <ng-container ngProjectAs=\"tuiOverContent\">\n        <ng-content select=\"tuiOverContent\" />\n    </ng-container>\n</tui-root>\n", styles: ["html:has(body[tuiTheme=dark]){background:#222}tui-doc-main{display:block}code:not(pre code):not(.hljs):not([class*=language-]){transition-property:background;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;display:inline-flex;background:var(--tui-background-neutral-1);color:var(--tui-text-secondary);vertical-align:middle;align-items:center;border-radius:.25rem;font-weight:500;outline:1px solid var(--tui-border-hover);font-size:.75rem;padding:0 .3125rem;margin:0 .1875rem;text-wrap:wrap}a code:not(pre code):not(.hljs):not([class*=language-]){color:var(--tui-text-action)}tui-textfield code:not(pre code){line-height:1.25rem}button:focus code,a:focus code{background:var(--tui-background-base)}.tui-doc-page{isolation:isolate;padding-block-start:4.125rem}tui-doc-navigation.tui-doc-navigation{position:fixed;inset-block-end:0;inset-block-start:4.125rem;inline-size:16.5rem;box-sizing:border-box;background:var(--tui-background-base)}tui-doc-navigation.tui-doc-navigation:before,tui-doc-navigation.tui-doc-navigation:after{content:\"\";position:absolute;inset:-.25rem 0 .25rem;pointer-events:none;border-radius:var(--tui-radius-m);border:.25rem solid var(--tui-background-base-alt)}[tuiTheme=dark] tui-doc-navigation.tui-doc-navigation:before,[tuiTheme=dark] tui-doc-navigation.tui-doc-navigation:after{border-color:var(--tui-background-elevation-2)}tui-doc-navigation.tui-doc-navigation:after{inset-inline-start:100%;inline-size:200vw;margin-inline-start:-.25rem}@media screen and (max-width:767.4px){tui-doc-navigation.tui-doc-navigation{display:none}}.tui-doc-content{margin-inline-start:16.5rem}@media screen and (max-width:767.4px){.tui-doc-content{margin-inline:0}}.tui-doc-outlet+*{display:block}tui-doc-code .hljs-tag{background:none}tui-doc-code .hljs{display:block;overflow-x:auto;padding:.5em;color:var(--tui-text-primary)}tui-doc-code .hljs-subst,tui-doc-code .hljs-title{font-weight:400;color:var(--tui-text-primary)}tui-doc-code .hljs-property{color:#bd65a4}tui-doc-code .hljs-comment,tui-doc-code .hljs-quote{color:var(--tui-text-secondary);font-style:italic}tui-doc-code .hljs-meta{color:#e38162}tui-doc-code .hljs-section,tui-doc-code .hljs-name,tui-doc-code .hljs-literal,tui-doc-code .hljs-keyword,tui-doc-code .hljs-selector-tag,tui-doc-code .hljs-type,tui-doc-code .hljs-selector-id,tui-doc-code .hljs-selector-class{font-weight:700;color:var(--tui-text-action)}tui-doc-code .hljs-attr{color:var(--tui-text-action)}tui-doc-code .hljs-attribute,tui-doc-code .hljs-number,tui-doc-code .hljs-regexp,tui-doc-code .hljs-link,tui-doc-code .hljs-built_in{font-weight:700;color:#b8474e}tui-doc-code .hljs-number,tui-doc-code .hljs-regexp,tui-doc-code .hljs-link{font-weight:400}tui-doc-code .hljs-string{color:var(--tui-status-positive);font-weight:700}tui-doc-code .hljs-symbol,tui-doc-code .hljs-bullet,tui-doc-code .hljs-formula{color:var(--tui-text-primary);background:var(--tui-background-base-alt);font-style:italic}tui-doc-code .hljs-doctag{text-decoration:underline}tui-doc-code .hljs-variable,tui-doc-code .hljs-template-variable{color:var(--tui-text-action-hover)}tui-doc-code .hljs-addition{background:var(--tui-status-positive-pale)}tui-doc-code .hljs-deletion{background:var(--tui-status-negative-pale)}tui-doc-code .hljs-emphasis{font-style:italic}tui-doc-code .hljs-strong{font-weight:700}tui-doc-code .hljs .hljs-line-numbers{padding:0}tui-doc-code .hljs-ln-numbers{vertical-align:top;opacity:.3;text-align:end;padding-inline-end:1em!important}[tuiTheme=dark] tui-doc-code .hljs-variable,tui-doc-code[tuiTheme=dark] .hljs-variable,[tuiTheme=dark] tui-doc-code .hljs-template-variable,tui-doc-code[tuiTheme=dark] .hljs-template-variable{color:var(--tui-status-warning)}tui-root>tui-scroll-controls .t-bar.t-bar_vertical{inset-block:4.5rem 1rem;transform:translate(-.75rem);opacity:.5}\n"] }]
+            args: [{ selector: 'tui-doc-main', imports: [RouterOutlet, TuiDocHeader, TuiDocNavigation, TuiRoot], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.Default, template: "<tui-root>\n    <div class=\"tui-doc-page\">\n        <tui-doc-navigation class=\"tui-doc-navigation\">\n            <ng-content select=\"tuiDocNavigation\" />\n        </tui-doc-navigation>\n        <div class=\"tui-doc-content\">\n            <router-outlet class=\"tui-doc-outlet\" />\n        </div>\n    </div>\n    <header tuiDocHeader>\n        <ng-content\n            ngProjectAs=\"tuiDocMobileNavigation\"\n            select=\"tuiDocMobileNavigation\"\n        />\n        <ng-content select=\"tuiDocHeader\" />\n    </header>\n    <ng-container ngProjectAs=\"tuiOverContent\">\n        <ng-content select=\"tuiOverContent\" />\n    </ng-container>\n</tui-root>\n", styles: ["html:has(body[tuiTheme=dark]){background:#222}tui-doc-main{display:block}code:not(pre code):not(.hljs):not([class*=language-]){transition-property:background;transition-duration:var(--tui-duration, .3s);transition-timing-function:var(--tui-curve-productive-standard);display:inline-flex;background:var(--tui-background-neutral-1);color:var(--tui-text-secondary);vertical-align:middle;align-items:center;border-radius:.25rem;font-weight:500;outline:1px solid var(--tui-border-hover);font-size:.75rem;padding:0 .3125rem;margin:0 .1875rem;text-wrap:wrap}a code:not(pre code):not(.hljs):not([class*=language-]){color:var(--tui-text-action)}tui-textfield code:not(pre code){line-height:1.25rem}button:focus code,a:focus code{background:var(--tui-background-base)}.tui-doc-page{isolation:isolate;padding-block-start:4.125rem}tui-doc-navigation.tui-doc-navigation{position:fixed;inset-block-end:0;inset-block-start:4.125rem;inline-size:16.5rem;box-sizing:border-box;background:var(--tui-background-base)}tui-doc-navigation.tui-doc-navigation:before,tui-doc-navigation.tui-doc-navigation:after{content:\"\";position:absolute;inset:-.25rem 0 .25rem;pointer-events:none;border-radius:var(--tui-radius-m);border:.25rem solid var(--tui-background-base-alt)}[tuiTheme=dark] tui-doc-navigation.tui-doc-navigation:before,[tuiTheme=dark] tui-doc-navigation.tui-doc-navigation:after{border-color:var(--tui-background-elevation-2)}tui-doc-navigation.tui-doc-navigation:after{inset-inline-start:100%;inline-size:200vw;margin-inline-start:-.25rem}@media screen and (max-width:767.4px){tui-doc-navigation.tui-doc-navigation{display:none}}.tui-doc-content{margin-inline-start:16.5rem}@media screen and (max-width:767.4px){.tui-doc-content{margin-inline:0}}.tui-doc-outlet+*{display:block}tui-doc-code .hljs-tag{background:none}tui-doc-code .hljs{display:block;overflow-x:auto;padding:.5em;color:var(--tui-text-primary)}tui-doc-code .hljs-subst,tui-doc-code .hljs-title{font-weight:400;color:var(--tui-text-primary)}tui-doc-code .hljs-property{color:#bd65a4}tui-doc-code .hljs-comment,tui-doc-code .hljs-quote{color:var(--tui-text-secondary);font-style:italic}tui-doc-code .hljs-meta{color:#e38162}tui-doc-code .hljs-section,tui-doc-code .hljs-name,tui-doc-code .hljs-literal,tui-doc-code .hljs-keyword,tui-doc-code .hljs-selector-tag,tui-doc-code .hljs-type,tui-doc-code .hljs-selector-id,tui-doc-code .hljs-selector-class{font-weight:700;color:var(--tui-text-action)}tui-doc-code .hljs-attr{color:var(--tui-text-action)}tui-doc-code .hljs-attribute,tui-doc-code .hljs-number,tui-doc-code .hljs-regexp,tui-doc-code .hljs-link,tui-doc-code .hljs-built_in{font-weight:700;color:#b8474e}tui-doc-code .hljs-number,tui-doc-code .hljs-regexp,tui-doc-code .hljs-link{font-weight:400}tui-doc-code .hljs-string{color:var(--tui-status-positive);font-weight:700}tui-doc-code .hljs-symbol,tui-doc-code .hljs-bullet,tui-doc-code .hljs-formula{color:var(--tui-text-primary);background:var(--tui-background-base-alt);font-style:italic}tui-doc-code .hljs-doctag{text-decoration:underline}tui-doc-code .hljs-variable,tui-doc-code .hljs-template-variable{color:var(--tui-text-action-hover)}tui-doc-code .hljs-addition{background:var(--tui-status-positive-pale)}tui-doc-code .hljs-deletion{background:var(--tui-status-negative-pale)}tui-doc-code .hljs-emphasis{font-style:italic}tui-doc-code .hljs-strong{font-weight:700}tui-doc-code .hljs .hljs-line-numbers{padding:0}tui-doc-code .hljs-ln-numbers{vertical-align:top;opacity:.3;text-align:end;padding-inline-end:1em!important}[tuiTheme=dark] tui-doc-code .hljs-variable,tui-doc-code[tuiTheme=dark] .hljs-variable,[tuiTheme=dark] tui-doc-code .hljs-template-variable,tui-doc-code[tuiTheme=dark] .hljs-template-variable{color:var(--tui-status-warning)}tui-root>tui-scroll-controls .t-bar.t-bar_vertical{inset-block:4.5rem 1rem;transform:translate(-.75rem);opacity:.5}\n"] }]
         }] });
 
 class TuiDocToc {