@taiga-ui/addon-doc 4.10.0 → 4.11.0

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { inject, Component, ViewEncapsulation, ChangeDetectionStrategy, TemplateRef, Pipe, EventEmitter, Input, Output, PLATFORM_ID, DestroyRef, NgZone, signal, computed, ViewChild, ContentChild, Directive, ChangeDetectorRef, ContentChildren, ElementRef } from '@angular/core';
+import { inject, Component, ViewEncapsulation, ChangeDetectionStrategy, TemplateRef, Pipe, EventEmitter, Input, Output, PLATFORM_ID, signal, computed, ViewChild, ContentChild, Directive, ChangeDetectorRef, DestroyRef, ContentChildren, ElementRef } from '@angular/core';
 import { TUI_DOC_DOCUMENTATION_TEXTS, TUI_DOC_TYPE_REFERENCE_PARSER, TUI_DOC_TYPE_REFERENCE_HANDLER, TUI_DOC_URL_STATE_HANDLER, TUI_DOC_ICONS, TUI_DOC_EXAMPLE_MARKDOWN_CODE_PROCESSOR, TUI_DOC_DEMO_TEXTS, TUI_DOC_EXCLUDED_PROPERTIES, TUI_DOC_EXAMPLE_CONTENT_PROCESSOR, TUI_DOC_EXAMPLE_TEXTS, TUI_DOC_CODE_EDITOR, TUI_DOC_CODE_ACTIONS, TUI_DOC_TITLE, TUI_DOC_PAGES, TUI_DOC_PAGE_LOADED, TUI_DOC_SEARCH_TEXT, TUI_DOC_SEARCH_ENABLED, TUI_DOC_LOGO, TUI_DOC_MENU_TEXT, TUI_DOC_MAP_PAGES, TUI_DOC_SEE_ALSO_TEXT, TUI_DOC_SOURCE_CODE, TUI_DOC_SOURCE_CODE_TEXT, TUI_DOC_SEE_ALSO, TUI_DOC_SUPPORT_LANGUAGE, TUI_DOC_DEFAULT_TABS } from '@taiga-ui/addon-doc/tokens';
 import { Location, NgForOf, NgIf, NgSwitch, NgSwitchCase, isPlatformServer, JsonPipe, NgTemplateOutlet, DOCUMENT, TitleCasePipe, KeyValuePipe } from '@angular/common';
 import * as i1 from '@angular/forms';
@@ -7,6 +7,7 @@ import { FormsModule, FormGroup, ReactiveFormsModule, FormControl } from '@angul
 import { ActivatedRoute, UrlSerializer, RouterLink, RouterLinkActive, Router, NavigationEnd, Scroll, RouterOutlet } from '@angular/router';
 import { tuiInspectAny, tuiCoerceValue, tuiRawLoad, tuiCoerceValueIsTrue, tuiCleanObject, tuiRawLoadRecord, tuiTransliterateKeyboardLayout } from '@taiga-ui/addon-doc/utils';
 import { tuiIsNumber, tuiPx, tuiPure, tuiIsString, tuiCreateToken, tuiProvideOptions, tuiIsPresent, tuiUniqBy } from '@taiga-ui/cdk/utils/miscellaneous';
+import { TuiAlertService } from '@taiga-ui/core/components/alert';
 import { TuiIcon } from '@taiga-ui/core/components/icon';
 import * as i4 from '@taiga-ui/core/components/textfield';
 import { TuiTextfield, TuiTextfieldDirective } from '@taiga-ui/core/components/textfield';
@@ -29,7 +30,6 @@ import { TUI_FALSE_HANDLER, EMPTY_QUERY } from '@taiga-ui/cdk/constants';
 import { TUI_COPY_TEXTS } from '@taiga-ui/kit/tokens';
 import { __decorate } from 'tslib';
 import { TuiResizable, TuiResizer } from '@taiga-ui/cdk/directives/resizer';
-import { tuiZonefreeScheduler, tuiQueryListChanges, tuiWatch, tuiControlValue } from '@taiga-ui/cdk/observables';
 import { tuiInjectElement, tuiGetElementObscures } from '@taiga-ui/cdk/utils/dom';
 import { tuiToInteger, tuiClamp } from '@taiga-ui/cdk/utils/math';
 import * as i4$1 from '@taiga-ui/core/components/expand';
@@ -41,6 +41,7 @@ import { TuiSelectModule } from '@taiga-ui/legacy/components/select';
 import * as i3$1 from '@taiga-ui/core/components/data-list';
 import { TuiDataList } from '@taiga-ui/core/components/data-list';
 import { trigger, transition, style, animate } from '@angular/animations';
+import { tuiQueryListChanges, tuiWatch, tuiZonefreeScheduler, tuiControlValue } from '@taiga-ui/cdk/observables';
 import { TuiFilterPipe } from '@taiga-ui/cdk/pipes/filter';
 import { TuiToArrayPipe } from '@taiga-ui/cdk/pipes/to-array';
 import { tuiRgbToHex, tuiHexToRgb } from '@taiga-ui/cdk/utils/color';
@@ -48,7 +49,6 @@ import { TuiNotification } from '@taiga-ui/core/components/notification';
 import * as i4$2 from '@taiga-ui/core/directives/dropdown';
 import { TuiDropdown } from '@taiga-ui/core/directives/dropdown';
 import { TuiBadge } from '@taiga-ui/kit/components/badge';
-import { TuiAlertService } from '@taiga-ui/core/components/alert';
 import { WA_LOCATION, WA_LOCAL_STORAGE } from '@ng-web-apis/common';
 import { TuiLet } from '@taiga-ui/cdk/directives/let';
 import { TuiMapperPipe } from '@taiga-ui/cdk/pipes/mapper';
@@ -150,6 +150,7 @@ class TuiDocAPIItem {
         this.activatedRoute = inject(ActivatedRoute);
         this.urlSerializer = inject(UrlSerializer);
         this.urlStateHandler = inject(TUI_DOC_URL_STATE_HANDLER);
+        this.alerts = inject(TuiAlertService);
         this.name = '';
         this.type = '';
         this.items = [];
@@ -163,6 +164,11 @@ class TuiDocAPIItem {
         this.valueChange.emit(value);
         this.setQueryParam(value);
     }
+    emitEvent(event) {
+        this.alerts
+            .open(event ?? tuiInspectAny(event, 2), { label: this.name })
+            .subscribe();
+    }
     clearBrackets(value) {
         return value.replaceAll(/[()[\]]/g, '');
     }
@@ -194,7 +200,7 @@ class TuiDocAPIItem {
         this.locationRef.go(this.urlStateHandler(tree));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiDocAPIItem, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiDocAPIItem, isStandalone: true, selector: "tr[tuiDocAPIItem]", inputs: { name: "name", type: "type", value: "value", items: "items" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<td class=\"t-td\">\n    <code\n        class=\"t-name\"\n        [class.t-name_banana]=\"name.startsWith('[(')\"\n        [class.t-name_input]=\"name.startsWith('[')\"\n        [class.t-name_output]=\"name.startsWith('(')\"\n    >\n        {{ name }}\n    </code>\n    <ng-content />\n</td>\n<td class=\"t-td\">\n    <code class=\"t-type\">\n        <ng-container *ngFor=\"let item of type | tuiDocTypeReference; let last = last\">\n            <a\n                *ngIf=\"item.reference; else default\"\n                target=\"_blank\"\n                class=\"t-reference\"\n                [attr.href]=\"item.reference\"\n            >\n                {{ item.type }}\n                <tui-icon\n                    icon=\"@tui.external-link\"\n                    [style.font-size.rem]=\"1\"\n                />\n            </a>\n            <ng-template #default>\n                {{ item.type }}\n            </ng-template>\n            <span *ngIf=\"!last\">&nbsp;|&nbsp;</span>\n        </ng-container>\n    </code>\n</td>\n<td class=\"t-td\">\n    <tui-textfield\n        *ngIf=\"items.length; else noItems\"\n        tuiChevron\n        tuiTextfieldSize=\"m\"\n        class=\"t-input\"\n        [content]=\"content\"\n        [tuiTextfieldCleaner]=\"type.includes('null')\"\n    >\n        <select\n            placeholder=\"null\"\n            tuiTextfield\n            [ngModel]=\"value ?? null\"\n            (ngModelChange)=\"onValueChange($event)\"\n        ></select>\n        <tui-data-list-wrapper\n            *tuiTextfieldDropdown\n            [itemContent]=\"content\"\n            [items]=\"items\"\n        />\n    </tui-textfield>\n    <ng-template\n        #content\n        let-data\n    >\n        <code [style.margin]=\"0\">{{ data | tuiInspectAny }}</code>\n    </ng-template>\n    <ng-template #noItems>\n        <ng-container [ngSwitch]=\"type\">\n            <input\n                *ngSwitchCase=\"'boolean'\"\n                tuiSwitch\n                type=\"checkbox\"\n                [id]=\"name\"\n                [ngModel]=\"value\"\n                (ngModelChange)=\"onValueChange($event)\"\n            />\n\n            <tui-textfield\n                *ngSwitchCase=\"'string'\"\n                tuiTextfieldSize=\"m\"\n                class=\"t-input\"\n            >\n                <input\n                    tuiTextfield\n                    [id]=\"name\"\n                    [ngModel]=\"value || ''\"\n                    (ngModelChange)=\"onValueChange($event)\"\n                />\n            </tui-textfield>\n\n            <tui-input-number\n                *ngSwitchCase=\"'number'\"\n                tuiTextfieldSize=\"m\"\n                class=\"t-input\"\n                [nativeId]=\"name\"\n                [ngModel]=\"value\"\n                [step]=\"1\"\n                [tuiTextfieldLabelOutside]=\"true\"\n                (ngModelChange)=\"onValueChange($event || 0)\"\n            />\n        </ng-container>\n    </ng-template>\n</td>\n", styles: [":host{box-shadow:inset 0 -1px var(--tui-border-normal)}.t-td{padding:1.5rem 2rem 1.5rem 0;vertical-align:top}.t-td:last-child{padding-inline-end:0;text-align:end}.t-name{display:flex!important;min-block-size:1.5rem;inline-size:-webkit-fit-content;inline-size:-moz-fit-content;inline-size:fit-content;margin:0 0 .5rem!important;-webkit-text-fill-color:var(--tui-background-accent-2-pressed)}.t-name_input{-webkit-text-fill-color:var(--tui-text-negative)}.t-name_banana{-webkit-text-fill-color:var(--tui-text-action)}.t-name_output{-webkit-text-fill-color:var(--tui-status-info)}.t-type{flex-wrap:wrap;align-items:center;justify-content:flex-start;min-block-size:1.5rem;margin:0!important}.t-reference{display:inline-flex;color:var(--tui-text-action);text-decoration:none;align-items:center;justify-content:center;gap:3px}.t-input{min-inline-size:10rem;margin-block-start:-.625rem}@media screen and (max-width: 47.9625em){:host{gap:1rem;padding:1rem 0}.t-td{padding:0}.t-td:last-child{text-align:start}.t-input{margin:0}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: TuiChevron, selector: "[tuiChevron]", inputs: ["tuiChevron"] }, { kind: "component", type: i2.TuiDataListWrapperComponent, selector: "tui-data-list-wrapper:not([labels])", inputs: ["items", "disabledItemHandler", "emptyContent", "size", "itemContent"], outputs: ["itemClick"] }, { kind: "pipe", type: TuiDocTypeReferencePipe, name: "tuiDocTypeReference" }, { kind: "component", type: TuiIcon, selector: "tui-icon", inputs: ["icon", "background"] }, { kind: "ngmodule", type: TuiInputNumberModule }, { kind: "component", type: i3.TuiInputNumberComponent, selector: "tui-input-number", inputs: ["min", "max", "step"] }, { kind: "directive", type: i3.TuiInputNumberDirective, selector: "tui-input-number" }, { kind: "pipe", type: TuiInspectPipe, name: "tuiInspectAny" }, { kind: "component", type: TuiSwitch, selector: "input[type=\"checkbox\"][tuiSwitch]", inputs: ["size", "showIcons"] }, { kind: "component", type: i4.TuiSelect, selector: "select[tuiTextfield]", inputs: ["placeholder"] }, { kind: "component", type: i4.TuiTextfieldComponent, selector: "tui-textfield", inputs: ["stringify", "content", "filler"] }, { kind: "directive", type: i4.TuiTextfieldDirective, selector: "input[tuiTextfield]" }, { kind: "directive", type: i4.TuiTextfieldOptionsDirective, selector: "[tuiTextfieldAppearance],[tuiTextfieldSize],[tuiTextfieldCleaner]", inputs: ["tuiTextfieldAppearance", "tuiTextfieldSize", "tuiTextfieldCleaner"] }, { kind: "directive", type: i4.TuiTextfieldDropdownDirective, selector: "ng-template[tuiTextfieldDropdown]" }, { kind: "ngmodule", type: TuiTextfieldControllerModule }, { kind: "directive", type: i5.TuiTextfieldCleanerDirective, selector: "[tuiTextfieldCleaner]", inputs: ["tuiTextfieldCleaner"] }, { kind: "directive", type: i5.TuiTextfieldLabelOutsideDirective, selector: "[tuiTextfieldLabelOutside]", inputs: ["tuiTextfieldLabelOutside"] }, { kind: "directive", type: i5.TuiTextfieldSizeDirective, selector: "[tuiTextfieldSize]", inputs: ["tuiTextfieldSize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiDocAPIItem, isStandalone: true, selector: "tr[tuiDocAPIItem]", inputs: { name: "name", type: "type", value: "value", items: "items" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<td class=\"t-td\">\n    <code\n        class=\"t-name\"\n        [class.t-name_banana]=\"name.startsWith('[(')\"\n        [class.t-name_input]=\"name.startsWith('[')\"\n        [class.t-name_output]=\"name.startsWith('(')\"\n    >\n        {{ name }}\n    </code>\n    <ng-content />\n</td>\n<td class=\"t-td\">\n    <code class=\"t-type\">\n        <ng-container *ngFor=\"let item of type | tuiDocTypeReference; let last = last\">\n            <a\n                *ngIf=\"item.reference; else default\"\n                target=\"_blank\"\n                class=\"t-reference\"\n                [attr.href]=\"item.reference\"\n            >\n                {{ item.type }}\n                <tui-icon\n                    icon=\"@tui.external-link\"\n                    [style.font-size.rem]=\"1\"\n                />\n            </a>\n            <ng-template #default>\n                {{ item.type }}\n            </ng-template>\n            <span *ngIf=\"!last\">&nbsp;|&nbsp;</span>\n        </ng-container>\n    </code>\n</td>\n<td class=\"t-td\">\n    <tui-textfield\n        *ngIf=\"items.length; else noItems\"\n        tuiChevron\n        tuiTextfieldSize=\"m\"\n        class=\"t-input\"\n        [content]=\"content\"\n        [tuiTextfieldCleaner]=\"type.includes('null')\"\n    >\n        <select\n            placeholder=\"null\"\n            tuiTextfield\n            [ngModel]=\"value ?? null\"\n            (ngModelChange)=\"onValueChange($event)\"\n        ></select>\n        <tui-data-list-wrapper\n            *tuiTextfieldDropdown\n            [itemContent]=\"content\"\n            [items]=\"items\"\n        />\n    </tui-textfield>\n    <ng-template\n        #content\n        let-data\n    >\n        <code [style.margin]=\"0\">{{ data | tuiInspectAny }}</code>\n    </ng-template>\n    <ng-template #noItems>\n        <ng-container [ngSwitch]=\"type\">\n            <input\n                *ngSwitchCase=\"'boolean'\"\n                tuiSwitch\n                type=\"checkbox\"\n                [id]=\"name\"\n                [ngModel]=\"value\"\n                (ngModelChange)=\"onValueChange($event)\"\n            />\n\n            <tui-textfield\n                *ngSwitchCase=\"'string'\"\n                tuiTextfieldSize=\"m\"\n                class=\"t-input\"\n            >\n                <input\n                    tuiTextfield\n                    [id]=\"name\"\n                    [ngModel]=\"value || ''\"\n                    (ngModelChange)=\"onValueChange($event)\"\n                />\n            </tui-textfield>\n\n            <tui-input-number\n                *ngSwitchCase=\"'number'\"\n                tuiTextfieldSize=\"m\"\n                class=\"t-input\"\n                [nativeId]=\"name\"\n                [ngModel]=\"value\"\n                [step]=\"1\"\n                [tuiTextfieldLabelOutside]=\"true\"\n                (ngModelChange)=\"onValueChange($event || 0)\"\n            />\n        </ng-container>\n    </ng-template>\n</td>\n", styles: [":host{box-shadow:inset 0 -1px var(--tui-border-normal)}.t-td{padding:1.5rem 2rem 1.5rem 0;vertical-align:top}.t-td:last-child{padding-inline-end:0;text-align:end}.t-name{display:flex!important;min-block-size:1.5rem;inline-size:-webkit-fit-content;inline-size:-moz-fit-content;inline-size:fit-content;margin:0 0 .5rem!important;-webkit-text-fill-color:var(--tui-background-accent-2-pressed)}.t-name_input{-webkit-text-fill-color:var(--tui-text-negative)}.t-name_banana{-webkit-text-fill-color:var(--tui-text-action)}.t-name_output{-webkit-text-fill-color:var(--tui-status-info)}.t-type{flex-wrap:wrap;align-items:center;justify-content:flex-start;min-block-size:1.5rem;margin:0!important}.t-reference{display:inline-flex;color:var(--tui-text-action);text-decoration:none;align-items:center;justify-content:center;gap:3px}.t-input{min-inline-size:10rem;margin-block-start:-.625rem}.t-input code{overflow:hidden;white-space:nowrap}@media screen and (max-width: 47.9625em){:host{gap:1rem;padding:1rem 0}.t-td{padding:0}.t-td:last-child{text-align:start}.t-input{margin:0}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: TuiChevron, selector: "[tuiChevron]", inputs: ["tuiChevron"] }, { kind: "component", type: i2.TuiDataListWrapperComponent, selector: "tui-data-list-wrapper:not([labels])", inputs: ["items", "disabledItemHandler", "emptyContent", "size", "itemContent"], outputs: ["itemClick"] }, { kind: "pipe", type: TuiDocTypeReferencePipe, name: "tuiDocTypeReference" }, { kind: "component", type: TuiIcon, selector: "tui-icon", inputs: ["icon", "background"] }, { kind: "ngmodule", type: TuiInputNumberModule }, { kind: "component", type: i3.TuiInputNumberComponent, selector: "tui-input-number", inputs: ["min", "max", "step"] }, { kind: "directive", type: i3.TuiInputNumberDirective, selector: "tui-input-number" }, { kind: "pipe", type: TuiInspectPipe, name: "tuiInspectAny" }, { kind: "component", type: TuiSwitch, selector: "input[type=\"checkbox\"][tuiSwitch]", inputs: ["size", "showIcons"] }, { kind: "component", type: i4.TuiSelect, selector: "select[tuiTextfield]", inputs: ["placeholder"] }, { kind: "component", type: i4.TuiTextfieldComponent, selector: "tui-textfield", inputs: ["stringify", "content", "filler"] }, { kind: "directive", type: i4.TuiTextfieldDirective, selector: "input[tuiTextfield]" }, { kind: "directive", type: i4.TuiTextfieldOptionsDirective, selector: "[tuiTextfieldAppearance],[tuiTextfieldSize],[tuiTextfieldCleaner]", inputs: ["tuiTextfieldAppearance", "tuiTextfieldSize", "tuiTextfieldCleaner"] }, { kind: "directive", type: i4.TuiTextfieldDropdownDirective, selector: "ng-template[tuiTextfieldDropdown]" }, { kind: "ngmodule", type: TuiTextfieldControllerModule }, { kind: "directive", type: i5.TuiTextfieldCleanerDirective, selector: "[tuiTextfieldCleaner]", inputs: ["tuiTextfieldCleaner"] }, { kind: "directive", type: i5.TuiTextfieldLabelOutsideDirective, selector: "[tuiTextfieldLabelOutside]", inputs: ["tuiTextfieldLabelOutside"] }, { kind: "directive", type: i5.TuiTextfieldSizeDirective, selector: "[tuiTextfieldSize]", inputs: ["tuiTextfieldSize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiDocAPIItem, decorators: [{
             type: Component,
@@ -213,7 +219,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         TuiSwitch,
                         TuiTextfield,
                         TuiTextfieldControllerModule,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<td class=\"t-td\">\n    <code\n        class=\"t-name\"\n        [class.t-name_banana]=\"name.startsWith('[(')\"\n        [class.t-name_input]=\"name.startsWith('[')\"\n        [class.t-name_output]=\"name.startsWith('(')\"\n    >\n        {{ name }}\n    </code>\n    <ng-content />\n</td>\n<td class=\"t-td\">\n    <code class=\"t-type\">\n        <ng-container *ngFor=\"let item of type | tuiDocTypeReference; let last = last\">\n            <a\n                *ngIf=\"item.reference; else default\"\n                target=\"_blank\"\n                class=\"t-reference\"\n                [attr.href]=\"item.reference\"\n            >\n                {{ item.type }}\n                <tui-icon\n                    icon=\"@tui.external-link\"\n                    [style.font-size.rem]=\"1\"\n                />\n            </a>\n            <ng-template #default>\n                {{ item.type }}\n            </ng-template>\n            <span *ngIf=\"!last\">&nbsp;|&nbsp;</span>\n        </ng-container>\n    </code>\n</td>\n<td class=\"t-td\">\n    <tui-textfield\n        *ngIf=\"items.length; else noItems\"\n        tuiChevron\n        tuiTextfieldSize=\"m\"\n        class=\"t-input\"\n        [content]=\"content\"\n        [tuiTextfieldCleaner]=\"type.includes('null')\"\n    >\n        <select\n            placeholder=\"null\"\n            tuiTextfield\n            [ngModel]=\"value ?? null\"\n            (ngModelChange)=\"onValueChange($event)\"\n        ></select>\n        <tui-data-list-wrapper\n            *tuiTextfieldDropdown\n            [itemContent]=\"content\"\n            [items]=\"items\"\n        />\n    </tui-textfield>\n    <ng-template\n        #content\n        let-data\n    >\n        <code [style.margin]=\"0\">{{ data | tuiInspectAny }}</code>\n    </ng-template>\n    <ng-template #noItems>\n        <ng-container [ngSwitch]=\"type\">\n            <input\n                *ngSwitchCase=\"'boolean'\"\n                tuiSwitch\n                type=\"checkbox\"\n                [id]=\"name\"\n                [ngModel]=\"value\"\n                (ngModelChange)=\"onValueChange($event)\"\n            />\n\n            <tui-textfield\n                *ngSwitchCase=\"'string'\"\n                tuiTextfieldSize=\"m\"\n                class=\"t-input\"\n            >\n                <input\n                    tuiTextfield\n                    [id]=\"name\"\n                    [ngModel]=\"value || ''\"\n                    (ngModelChange)=\"onValueChange($event)\"\n                />\n            </tui-textfield>\n\n            <tui-input-number\n                *ngSwitchCase=\"'number'\"\n                tuiTextfieldSize=\"m\"\n                class=\"t-input\"\n                [nativeId]=\"name\"\n                [ngModel]=\"value\"\n                [step]=\"1\"\n                [tuiTextfieldLabelOutside]=\"true\"\n                (ngModelChange)=\"onValueChange($event || 0)\"\n            />\n        </ng-container>\n    </ng-template>\n</td>\n", styles: [":host{box-shadow:inset 0 -1px var(--tui-border-normal)}.t-td{padding:1.5rem 2rem 1.5rem 0;vertical-align:top}.t-td:last-child{padding-inline-end:0;text-align:end}.t-name{display:flex!important;min-block-size:1.5rem;inline-size:-webkit-fit-content;inline-size:-moz-fit-content;inline-size:fit-content;margin:0 0 .5rem!important;-webkit-text-fill-color:var(--tui-background-accent-2-pressed)}.t-name_input{-webkit-text-fill-color:var(--tui-text-negative)}.t-name_banana{-webkit-text-fill-color:var(--tui-text-action)}.t-name_output{-webkit-text-fill-color:var(--tui-status-info)}.t-type{flex-wrap:wrap;align-items:center;justify-content:flex-start;min-block-size:1.5rem;margin:0!important}.t-reference{display:inline-flex;color:var(--tui-text-action);text-decoration:none;align-items:center;justify-content:center;gap:3px}.t-input{min-inline-size:10rem;margin-block-start:-.625rem}@media screen and (max-width: 47.9625em){:host{gap:1rem;padding:1rem 0}.t-td{padding:0}.t-td:last-child{text-align:start}.t-input{margin:0}}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<td class=\"t-td\">\n    <code\n        class=\"t-name\"\n        [class.t-name_banana]=\"name.startsWith('[(')\"\n        [class.t-name_input]=\"name.startsWith('[')\"\n        [class.t-name_output]=\"name.startsWith('(')\"\n    >\n        {{ name }}\n    </code>\n    <ng-content />\n</td>\n<td class=\"t-td\">\n    <code class=\"t-type\">\n        <ng-container *ngFor=\"let item of type | tuiDocTypeReference; let last = last\">\n            <a\n                *ngIf=\"item.reference; else default\"\n                target=\"_blank\"\n                class=\"t-reference\"\n                [attr.href]=\"item.reference\"\n            >\n                {{ item.type }}\n                <tui-icon\n                    icon=\"@tui.external-link\"\n                    [style.font-size.rem]=\"1\"\n                />\n            </a>\n            <ng-template #default>\n                {{ item.type }}\n            </ng-template>\n            <span *ngIf=\"!last\">&nbsp;|&nbsp;</span>\n        </ng-container>\n    </code>\n</td>\n<td class=\"t-td\">\n    <tui-textfield\n        *ngIf=\"items.length; else noItems\"\n        tuiChevron\n        tuiTextfieldSize=\"m\"\n        class=\"t-input\"\n        [content]=\"content\"\n        [tuiTextfieldCleaner]=\"type.includes('null')\"\n    >\n        <select\n            placeholder=\"null\"\n            tuiTextfield\n            [ngModel]=\"value ?? null\"\n            (ngModelChange)=\"onValueChange($event)\"\n        ></select>\n        <tui-data-list-wrapper\n            *tuiTextfieldDropdown\n            [itemContent]=\"content\"\n            [items]=\"items\"\n        />\n    </tui-textfield>\n    <ng-template\n        #content\n        let-data\n    >\n        <code [style.margin]=\"0\">{{ data | tuiInspectAny }}</code>\n    </ng-template>\n    <ng-template #noItems>\n        <ng-container [ngSwitch]=\"type\">\n            <input\n                *ngSwitchCase=\"'boolean'\"\n                tuiSwitch\n                type=\"checkbox\"\n                [id]=\"name\"\n                [ngModel]=\"value\"\n                (ngModelChange)=\"onValueChange($event)\"\n            />\n\n            <tui-textfield\n                *ngSwitchCase=\"'string'\"\n                tuiTextfieldSize=\"m\"\n                class=\"t-input\"\n            >\n                <input\n                    tuiTextfield\n                    [id]=\"name\"\n                    [ngModel]=\"value || ''\"\n                    (ngModelChange)=\"onValueChange($event)\"\n                />\n            </tui-textfield>\n\n            <tui-input-number\n                *ngSwitchCase=\"'number'\"\n                tuiTextfieldSize=\"m\"\n                class=\"t-input\"\n                [nativeId]=\"name\"\n                [ngModel]=\"value\"\n                [step]=\"1\"\n                [tuiTextfieldLabelOutside]=\"true\"\n                (ngModelChange)=\"onValueChange($event || 0)\"\n            />\n        </ng-container>\n    </ng-template>\n</td>\n", styles: [":host{box-shadow:inset 0 -1px var(--tui-border-normal)}.t-td{padding:1.5rem 2rem 1.5rem 0;vertical-align:top}.t-td:last-child{padding-inline-end:0;text-align:end}.t-name{display:flex!important;min-block-size:1.5rem;inline-size:-webkit-fit-content;inline-size:-moz-fit-content;inline-size:fit-content;margin:0 0 .5rem!important;-webkit-text-fill-color:var(--tui-background-accent-2-pressed)}.t-name_input{-webkit-text-fill-color:var(--tui-text-negative)}.t-name_banana{-webkit-text-fill-color:var(--tui-text-action)}.t-name_output{-webkit-text-fill-color:var(--tui-status-info)}.t-type{flex-wrap:wrap;align-items:center;justify-content:flex-start;min-block-size:1.5rem;margin:0!important}.t-reference{display:inline-flex;color:var(--tui-text-action);text-decoration:none;align-items:center;justify-content:center;gap:3px}.t-input{min-inline-size:10rem;margin-block-start:-.625rem}.t-input code{overflow:hidden;white-space:nowrap}@media screen and (max-width: 47.9625em){:host{gap:1rem;padding:1rem 0}.t-td{padding:0}.t-td:last-child{text-align:start}.t-input{margin:0}}\n"] }]
         }], propDecorators: { name: [{
                 type: Input
             }], type: [{
@@ -244,14 +250,14 @@ class TuiDocCode {
         return !!this.filename;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiDocCode, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiDocCode, isStandalone: true, selector: "tui-doc-code", inputs: { filename: "filename", code: "code" }, host: { properties: { "style.visibility": "isServer ? \"hidden\" : \"visible\"", "class._has-filename": "hasFilename" } }, ngImport: i0, template: "<p\n    *ngIf=\"filename\"\n    class=\"t-header\"\n>\n    {{ filename }}\n</p>\n<pre\n    *ngFor=\"let content of processor()\"\n    class=\"t-code\"\n>\n    <code [lineNumbers]=\"true\" [highlight]=\"content\"></code>\n    <div class=\"t-code-actions\">\n        <button type=\"button\"\n            tuiIconButton\n            appearance=\"icon\"\n            size=\"xs\"\n            class=\"t-copy-button\"\n            [iconStart]=\"icon()\"\n            [cdkCopyToClipboard]=\"content\"\n            (click)=\"copy$.next()\"\n        >\n        </button>\n        <ng-content />\n    </div>\n</pre>\n", styles: [":host{display:block}.t-header{font:var(--tui-font-text-s);font-weight:700}.t-header+.t-code{border-radius:.25rem}.t-code{position:relative;margin:0;white-space:normal;outline:1px solid var(--tui-border-normal)}.t-code ::ng-deep .hljs-ln{inline-size:100%}.t-code ::ng-deep .hljs-ln .hljs-ln-numbers{inline-size:1rem}.t-code ::ng-deep .hljs-ln td{white-space:pre}.t-code ::ng-deep .hljs-ln td:not(.hljs-ln-numbers):hover{outline:1px solid var(--tui-border-normal);border-radius:.25rem}.t-code+.t-code{margin-top:1rem}.t-code-actions{position:absolute;top:.75rem;right:.75rem;display:flex;justify-content:center;align-items:center;flex-direction:row-reverse}@media screen and (max-width: 47.9625em){.t-code-actions{padding:.3125rem;border-radius:.25rem;border:1px solid var(--tui-border-normal)}}.t-copy-button::ng-deep+*:not(:empty){margin-right:.375rem}.hljs:not(:empty){font:var(--tui-font-text-m);font-size:.875rem;padding:1.5rem 2rem;font-family:monospace;word-wrap:break-word;white-space:pre-wrap}@media all and (-webkit-min-device-pixel-ratio: 0) and (-webkit-min-device-pixel-ratio: 0),all and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: .001dpcm){.hljs:not(:empty)::-webkit-scrollbar,.hljs:not(:empty)::-webkit-scrollbar-thumb{inline-size:1rem;block-size:1rem;border-radius:6.25rem;background-clip:padding-box;border:.375rem solid transparent}.hljs:not(:empty)::-webkit-scrollbar{background-color:transparent}.hljs:not(:empty)::-webkit-scrollbar-thumb{background-color:var(--tui-background-neutral-1-hover)}.hljs:not(:empty)::-webkit-scrollbar-thumb:hover{background-color:var(--tui-background-neutral-1-pressed)}.hljs:not(:empty)::-webkit-scrollbar-thumb:active{background-color:var(--tui-text-tertiary)}}@media screen and (max-width: 47.9625em){.hljs:not(:empty){padding:1rem}}.t-code-actions,.hljs:not(:empty){background:var(--tui-background-base)}@supports (background: color-mix(in srgb,var(--tui-background-base),#222 2%)){.t-code-actions,.hljs:not(:empty){background:color-mix(in srgb,var(--tui-background-base),#222 2%)}}\n"], dependencies: [{ kind: "ngmodule", type: ClipboardModule }, { kind: "directive", type: i1$1.CdkCopyToClipboard, selector: "[cdkCopyToClipboard]", inputs: ["cdkCopyToClipboard", "cdkCopyToClipboardAttempts"], outputs: ["cdkCopyToClipboardCopied"] }, { kind: "directive", type: Highlight, selector: "[highlight]", inputs: ["highlight", "languages", "lineNumbers"], outputs: ["highlighted"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: "14.0.0", version: "16.2.12", type: TuiDocCode, isStandalone: true, selector: "tui-doc-code", inputs: { filename: "filename", code: "code" }, host: { properties: { "style.visibility": "isServer ? \"hidden\" : \"visible\"", "class._has-filename": "hasFilename" } }, ngImport: i0, template: "<p\n    *ngIf=\"filename\"\n    class=\"t-header\"\n>\n    {{ filename }}\n</p>\n<pre\n    *ngFor=\"let content of processor()\"\n    class=\"t-code\"\n>\n    <code [lineNumbers]=\"true\" [highlight]=\"content\"></code>\n    <div class=\"t-code-actions\">\n        <button type=\"button\"\n            tuiIconButton\n            appearance=\"icon\"\n            size=\"xs\"\n            class=\"t-copy-button\"\n            [iconStart]=\"icon()\"\n            [cdkCopyToClipboard]=\"content\"\n            (click)=\"copy$.next()\"\n        >\n        </button>\n        <ng-content />\n    </div>\n</pre>\n", styles: [":host{display:block}.t-header{font:var(--tui-font-text-s);font-weight:700}.t-header+.t-code{border-radius:.25rem}.t-code{position:relative;margin:0;white-space:normal;outline:1px solid var(--tui-border-normal)}.t-code ::ng-deep .hljs-ln{inline-size:100%}.t-code ::ng-deep .hljs-ln .hljs-ln-numbers{inline-size:1rem}.t-code ::ng-deep .hljs-ln td{white-space:pre}.t-code ::ng-deep .hljs-ln td:not(.hljs-ln-numbers):hover{outline:1px solid var(--tui-border-normal);border-radius:.25rem}.t-code+.t-code{margin-top:1rem}.t-code-actions{position:absolute;top:.75rem;right:.75rem;display:flex;justify-content:center;align-items:center;flex-direction:row-reverse}@media screen and (max-width: 47.9625em){.t-code-actions{padding:.3125rem;border-radius:.25rem;border:1px solid var(--tui-border-normal)}}.t-copy-button::ng-deep+*:not(:empty){margin-right:.375rem}.hljs:not(:empty){font:var(--tui-font-text-m);font-size:.875rem;padding:1.5rem 2rem;font-family:monospace;overflow-wrap:break-word;white-space:pre-wrap}@media all and (-webkit-min-device-pixel-ratio: 0) and (-webkit-min-device-pixel-ratio: 0),all and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: .001dpcm){.hljs:not(:empty)::-webkit-scrollbar,.hljs:not(:empty)::-webkit-scrollbar-thumb{inline-size:1rem;block-size:1rem;border-radius:6.25rem;background-clip:padding-box;border:.375rem solid transparent}.hljs:not(:empty)::-webkit-scrollbar{background-color:transparent}.hljs:not(:empty)::-webkit-scrollbar-thumb{background-color:var(--tui-background-neutral-1-hover)}.hljs:not(:empty)::-webkit-scrollbar-thumb:hover{background-color:var(--tui-background-neutral-1-pressed)}.hljs:not(:empty)::-webkit-scrollbar-thumb:active{background-color:var(--tui-text-tertiary)}}@media screen and (max-width: 47.9625em){.hljs:not(:empty){padding:1rem}}.t-code-actions,.hljs:not(:empty){background:var(--tui-background-base)}@supports (background: color-mix(in srgb,var(--tui-background-base),#222 2%)){.t-code-actions,.hljs:not(:empty){background:color-mix(in srgb,var(--tui-background-base),#222 2%)}}\n"], dependencies: [{ kind: "ngmodule", type: ClipboardModule }, { kind: "directive", type: i1$1.CdkCopyToClipboard, selector: "[cdkCopyToClipboard]", inputs: ["cdkCopyToClipboard", "cdkCopyToClipboardAttempts"], outputs: ["cdkCopyToClipboardCopied"] }, { kind: "directive", type: Highlight, selector: "[highlight]", inputs: ["highlight", "languages", "lineNumbers"], outputs: ["highlighted"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: "16.2.12", ngImport: i0, type: TuiDocCode, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: 'tui-doc-code', imports: [ClipboardModule, Highlight, NgForOf, NgIf, TuiButton], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '[style.visibility]': 'isServer ? "hidden" : "visible"',
                         '[class._has-filename]': 'hasFilename',
-                    }, template: "<p\n    *ngIf=\"filename\"\n    class=\"t-header\"\n>\n    {{ filename }}\n</p>\n<pre\n    *ngFor=\"let content of processor()\"\n    class=\"t-code\"\n>\n    <code [lineNumbers]=\"true\" [highlight]=\"content\"></code>\n    <div class=\"t-code-actions\">\n        <button type=\"button\"\n            tuiIconButton\n            appearance=\"icon\"\n            size=\"xs\"\n            class=\"t-copy-button\"\n            [iconStart]=\"icon()\"\n            [cdkCopyToClipboard]=\"content\"\n            (click)=\"copy$.next()\"\n        >\n        </button>\n        <ng-content />\n    </div>\n</pre>\n", styles: [":host{display:block}.t-header{font:var(--tui-font-text-s);font-weight:700}.t-header+.t-code{border-radius:.25rem}.t-code{position:relative;margin:0;white-space:normal;outline:1px solid var(--tui-border-normal)}.t-code ::ng-deep .hljs-ln{inline-size:100%}.t-code ::ng-deep .hljs-ln .hljs-ln-numbers{inline-size:1rem}.t-code ::ng-deep .hljs-ln td{white-space:pre}.t-code ::ng-deep .hljs-ln td:not(.hljs-ln-numbers):hover{outline:1px solid var(--tui-border-normal);border-radius:.25rem}.t-code+.t-code{margin-top:1rem}.t-code-actions{position:absolute;top:.75rem;right:.75rem;display:flex;justify-content:center;align-items:center;flex-direction:row-reverse}@media screen and (max-width: 47.9625em){.t-code-actions{padding:.3125rem;border-radius:.25rem;border:1px solid var(--tui-border-normal)}}.t-copy-button::ng-deep+*:not(:empty){margin-right:.375rem}.hljs:not(:empty){font:var(--tui-font-text-m);font-size:.875rem;padding:1.5rem 2rem;font-family:monospace;word-wrap:break-word;white-space:pre-wrap}@media all and (-webkit-min-device-pixel-ratio: 0) and (-webkit-min-device-pixel-ratio: 0),all and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: .001dpcm){.hljs:not(:empty)::-webkit-scrollbar,.hljs:not(:empty)::-webkit-scrollbar-thumb{inline-size:1rem;block-size:1rem;border-radius:6.25rem;background-clip:padding-box;border:.375rem solid transparent}.hljs:not(:empty)::-webkit-scrollbar{background-color:transparent}.hljs:not(:empty)::-webkit-scrollbar-thumb{background-color:var(--tui-background-neutral-1-hover)}.hljs:not(:empty)::-webkit-scrollbar-thumb:hover{background-color:var(--tui-background-neutral-1-pressed)}.hljs:not(:empty)::-webkit-scrollbar-thumb:active{background-color:var(--tui-text-tertiary)}}@media screen and (max-width: 47.9625em){.hljs:not(:empty){padding:1rem}}.t-code-actions,.hljs:not(:empty){background:var(--tui-background-base)}@supports (background: color-mix(in srgb,var(--tui-background-base),#222 2%)){.t-code-actions,.hljs:not(:empty){background:color-mix(in srgb,var(--tui-background-base),#222 2%)}}\n"] }]
+                    }, template: "<p\n    *ngIf=\"filename\"\n    class=\"t-header\"\n>\n    {{ filename }}\n</p>\n<pre\n    *ngFor=\"let content of processor()\"\n    class=\"t-code\"\n>\n    <code [lineNumbers]=\"true\" [highlight]=\"content\"></code>\n    <div class=\"t-code-actions\">\n        <button type=\"button\"\n            tuiIconButton\n            appearance=\"icon\"\n            size=\"xs\"\n            class=\"t-copy-button\"\n            [iconStart]=\"icon()\"\n            [cdkCopyToClipboard]=\"content\"\n            (click)=\"copy$.next()\"\n        >\n        </button>\n        <ng-content />\n    </div>\n</pre>\n", styles: [":host{display:block}.t-header{font:var(--tui-font-text-s);font-weight:700}.t-header+.t-code{border-radius:.25rem}.t-code{position:relative;margin:0;white-space:normal;outline:1px solid var(--tui-border-normal)}.t-code ::ng-deep .hljs-ln{inline-size:100%}.t-code ::ng-deep .hljs-ln .hljs-ln-numbers{inline-size:1rem}.t-code ::ng-deep .hljs-ln td{white-space:pre}.t-code ::ng-deep .hljs-ln td:not(.hljs-ln-numbers):hover{outline:1px solid var(--tui-border-normal);border-radius:.25rem}.t-code+.t-code{margin-top:1rem}.t-code-actions{position:absolute;top:.75rem;right:.75rem;display:flex;justify-content:center;align-items:center;flex-direction:row-reverse}@media screen and (max-width: 47.9625em){.t-code-actions{padding:.3125rem;border-radius:.25rem;border:1px solid var(--tui-border-normal)}}.t-copy-button::ng-deep+*:not(:empty){margin-right:.375rem}.hljs:not(:empty){font:var(--tui-font-text-m);font-size:.875rem;padding:1.5rem 2rem;font-family:monospace;overflow-wrap:break-word;white-space:pre-wrap}@media all and (-webkit-min-device-pixel-ratio: 0) and (-webkit-min-device-pixel-ratio: 0),all and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: .001dpcm){.hljs:not(:empty)::-webkit-scrollbar,.hljs:not(:empty)::-webkit-scrollbar-thumb{inline-size:1rem;block-size:1rem;border-radius:6.25rem;background-clip:padding-box;border:.375rem solid transparent}.hljs:not(:empty)::-webkit-scrollbar{background-color:transparent}.hljs:not(:empty)::-webkit-scrollbar-thumb{background-color:var(--tui-background-neutral-1-hover)}.hljs:not(:empty)::-webkit-scrollbar-thumb:hover{background-color:var(--tui-background-neutral-1-pressed)}.hljs:not(:empty)::-webkit-scrollbar-thumb:active{background-color:var(--tui-text-tertiary)}}@media screen and (max-width: 47.9625em){.hljs:not(:empty){padding:1rem}}.t-code-actions,.hljs:not(:empty){background:var(--tui-background-base)}@supports (background: color-mix(in srgb,var(--tui-background-base),#222 2%)){.t-code-actions,.hljs:not(:empty){background:color-mix(in srgb,var(--tui-background-base),#222 2%)}}\n"] }]
         }], propDecorators: { filename: [{
                 type: Input
             }], code: [{
@@ -282,8 +288,6 @@ const MIN_WIDTH = 160;
 class TuiDocDemo {
     constructor() {
         this.el = tuiInjectElement();
-        this.destroyRef = inject(DestroyRef);
-        this.ngZone = inject(NgZone);
         this.locationRef = inject(Location);
         this.urlSerializer = inject(UrlSerializer);
         this.urlStateHandler = inject(TUI_DOC_URL_STATE_HANDLER);
@@ -305,13 +309,9 @@ class TuiDocDemo {
         this.sticky = true;
     }
     ngAfterViewInit() {
-        timer(0, tuiZonefreeScheduler(this.ngZone))
-            .pipe(takeUntilDestroyed(this.destroyRef))
-            .subscribe(() => {
-            this.createForm();
-            this.updateWidth(this.sandboxWidth + this.delta);
-            this.rendered.set(true);
-        });
+        this.createForm();
+        this.updateWidth(this.sandboxWidth + this.delta);
+        this.rendered.set(true);
     }
     onResize() {
         this.updateWidth();