@taiga-ui/addon-doc 4.68.0 → 5.0.0-canary.0c88239

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

@@ -1,100 +1,118 @@
 import * as i0 from '@angular/core';
-import { inject, Component, ViewEncapsulation, ChangeDetectionStrategy, TemplateRef, Pipe, Directive, Input, EventEmitter, Output, PLATFORM_ID, signal, computed, ViewChild, ContentChild, ChangeDetectorRef, DestroyRef, ContentChildren, InjectionToken, 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_DIRECTION_ENABLED, 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 { ChangeDetectionStrategy, ViewEncapsulation, Component, input, Directive, inject, TemplateRef, Pipe, computed, model, PLATFORM_ID, viewChild, ElementRef, contentChild, signal, InjectionToken, effect, contentChildren } from '@angular/core';
+import * as i3 from '@taiga-ui/core/portals/hint';
+import { tuiHintOptionsProvider, TuiHint } from '@taiga-ui/core/portals/hint';
+import { Location, NgTemplateOutlet, isPlatformServer, DOCUMENT, AsyncPipe, NgComponentOutlet, TitleCasePipe, KeyValuePipe } from '@angular/common';
 import * as i1 from '@angular/forms';
 import { FormsModule, FormGroup, ReactiveFormsModule, FormControl } from '@angular/forms';
-import { ActivatedRoute, UrlSerializer, RouterLink, RouterLinkActive, Router, NavigationEnd, Scroll, RouterOutlet } from '@angular/router';
-import { tuiInspectAny, tuiCoerceValue, tuiRawLoad, tuiCoerceValueIsTrue, tuiCleanObject, tuiRawLoadRecord, tuiTransliterateKeyboardLayout } from '@taiga-ui/addon-doc/utils';
-import { tuiIsNumber, tuiPx, tuiPure, tuiIsString, tuiProvideOptions, tuiIsPresent, tuiUniqBy } from '@taiga-ui/cdk/utils/miscellaneous';
-import { 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';
+import { ActivatedRoute, UrlSerializer, RouterLink, Router, NavigationEnd, Scroll, RouterLinkActive, RouterOutlet } from '@angular/router';
+import { 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_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_PAGES_ICONS, TUI_DOC_LOGO, TUI_DOC_MENU_TEXT, TUI_DOC_SOURCE_CODE, TUI_DOC_SOURCE_CODE_TEXT, TUI_DOC_DIRECTION_ENABLED, TUI_DOC_MAP_PAGES, TUI_DOC_SEE_ALSO_TEXT, TUI_DOC_TOC_TEXT, TUI_DOC_SEE_ALSO, TUI_DOC_SUPPORT_LANGUAGE, TUI_DOC_DEFAULT_TABS } from '@taiga-ui/addon-doc/tokens';
+import { tuiInspect, tuiCoerceValue, tuiRawLoad, tuiCoerceValueIsTrue, tuiCleanObject, tuiToKebab, tuiRawLoadRecord, tuiTransliterateKeyboardLayout, TuiDocKebabPipe } from '@taiga-ui/addon-doc/utils';
+import { tuiIsNumber, tuiPx, tuiIsPresent, tuiArrayToggle } from '@taiga-ui/cdk/utils/miscellaneous';
+import * as i6$1 from '@taiga-ui/core/components/input';
+import { TuiInput, TuiInputDirective } from '@taiga-ui/core/components/input';
+import { TuiNotificationService } from '@taiga-ui/core/components/notification';
 import * as i2 from '@taiga-ui/kit/components/data-list-wrapper';
 import { TuiDataListWrapper } from '@taiga-ui/kit/components/data-list-wrapper';
-import * as i3 from '@taiga-ui/kit/components/input-number';
+import * as i7 from '@taiga-ui/kit/components/input-number';
 import { TuiInputNumber } from '@taiga-ui/kit/components/input-number';
+import * as i3$1 from '@taiga-ui/kit/components/select';
+import { TuiSelect } from '@taiga-ui/kit/components/select';
 import { TuiSwitch } from '@taiga-ui/kit/components/switch';
 import { TuiChevron } from '@taiga-ui/kit/directives/chevron';
-import { TUI_IS_E2E } from '@taiga-ui/cdk/tokens';
+import { WA_IS_E2E } from '@ng-web-apis/platform';
+import * as i5 from '@taiga-ui/core/components/textfield';
+import { TuiTextfield } from '@taiga-ui/core/components/textfield';
+import * as i6 from '@taiga-ui/core/portals/dropdown';
 import * as i1$1 from '@angular/cdk/clipboard';
 import { ClipboardModule, Clipboard } from '@angular/cdk/clipboard';
 import { toSignal, toObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { TuiButton } from '@taiga-ui/core/components/button';
 import { TUI_COPY_TEXTS } from '@taiga-ui/kit/tokens';
 import { Highlight } from 'ngx-highlightjs';
-import { BehaviorSubject, Subject, map, switchMap, timer, startWith, skip, merge, ReplaySubject, switchAll, filter, mergeMap, take, debounceTime, combineLatest, fromEvent, of, distinctUntilChanged } from 'rxjs';
-import { TUI_FALSE_HANDLER, EMPTY_QUERY } from '@taiga-ui/cdk/constants';
-import { __decorate } from 'tslib';
+import { BehaviorSubject, Subject, switchMap, timer, map, startWith, skip, filter, mergeMap, ReplaySubject, take, debounceTime, combineLatest, fromEvent, of } from 'rxjs';
+import { TUI_FALSE_HANDLER } from '@taiga-ui/cdk/constants';
+import * as i4$1 from '@taiga-ui/cdk/directives/item';
+import { TuiItem } from '@taiga-ui/cdk/directives/item';
 import { TuiResizable, TuiResizer } from '@taiga-ui/cdk/directives/resizer';
 import { tuiInjectElement, tuiGetElementObscures } from '@taiga-ui/cdk/utils/dom';
-import { tuiToInteger, tuiClamp } from '@taiga-ui/cdk/utils/math';
-import * as i4$1 from '@taiga-ui/core/components/expand';
+import { tuiClamp } from '@taiga-ui/cdk/utils/math';
+import * as i3$2 from '@taiga-ui/core/components/expand';
 import { TuiExpand } from '@taiga-ui/core/components/expand';
-import { TuiGroup } from '@taiga-ui/core/directives/group';
-import { TUI_DARK_MODE, TUI_COMMON_ICONS, TUI_THEME } from '@taiga-ui/core/tokens';
-import * as i5 from '@taiga-ui/legacy/components/select';
-import { TuiSelectModule } from '@taiga-ui/legacy/components/select';
-import * as i8 from '@taiga-ui/legacy/directives/textfield-controller';
-import { TuiTextfieldControllerModule } from '@taiga-ui/legacy/directives/textfield-controller';
-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 { TuiNotification } from '@taiga-ui/core/components/notification';
-import { tuiScrollbarOptionsProvider, TuiScrollbar } from '@taiga-ui/core/components/scrollbar';
-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 { tuiRgbToHex } from '@taiga-ui/cdk/utils/color';
+import { TuiIcon } from '@taiga-ui/core/components/icon';
+import { TUI_DARK_MODE, TUI_COMMON_ICONS, TUI_BREAKPOINT } from '@taiga-ui/core/tokens';
+import * as i4 from '@taiga-ui/core/components/label';
 import { WA_LOCATION, WA_LOCAL_STORAGE } from '@ng-web-apis/common';
-import { TuiLet } from '@taiga-ui/cdk/directives/let';
+import * as i1$2 from '@ng-web-apis/intersection-observer';
+import { WaIntersectionObserverDirective, WaIntersectionObservee } from '@ng-web-apis/intersection-observer';
 import { TuiMapperPipe } from '@taiga-ui/cdk/pipes/mapper';
-import { TuiFullscreen } from '@taiga-ui/core/components/fullscreen';
 import { TuiLink, tuiLinkOptionsProvider } from '@taiga-ui/core/components/link';
 import { TuiLoader } from '@taiga-ui/core/components/loader';
-import * as i2$1 from '@taiga-ui/kit/components/tabs';
-import { TuiTabs } from '@taiga-ui/kit/components/tabs';
-import { PolymorpheusComponent, PolymorpheusOutlet } from '@taiga-ui/polymorpheus';
+import { TuiTitle } from '@taiga-ui/core/components/title';
+import { TuiFullscreen } from '@taiga-ui/kit/components/fullscreen';
+import { TuiSegmented } from '@taiga-ui/kit/components/segmented';
+import { TuiHeader } from '@taiga-ui/layout/components/header';
+import { PolymorpheusOutlet } from '@taiga-ui/polymorpheus';
 import { TUI_EXAMPLE_PRIMARY_FILE_NAME } from '@taiga-ui/addon-doc/types';
-import * as i1$2 from '@taiga-ui/cdk/directives/item';
-import * as i1$3 from '@taiga-ui/addon-mobile/directives/sidebar';
-import { TuiSidebarDirective, TuiSidebar } from '@taiga-ui/addon-mobile/directives/sidebar';
-import { TuiActiveZone } from '@taiga-ui/cdk/directives/active-zone';
+import { tuiCreateOptions } from '@taiga-ui/cdk/utils/di';
+import { TuiPopup } from '@taiga-ui/core/portals/popup';
+import { TuiDrawer } from '@taiga-ui/kit/components/drawer';
 import { Title } from '@angular/platform-browser';
 import { tuiAutoFocusOptionsProvider, TuiAutoFocus } from '@taiga-ui/cdk/directives/auto-focus';
-import * as i2$2 from '@taiga-ui/kit/components/accordion';
+import { tuiZonefreeScheduler, tuiControlValue, tuiWatch } from '@taiga-ui/cdk/observables';
+import * as i2$2 from '@taiga-ui/core/components/data-list';
+import { TuiDataList } from '@taiga-ui/core/components/data-list';
+import { tuiScrollbarOptionsProvider, TuiScrollbar } from '@taiga-ui/core/components/scrollbar';
+import * as i2$1 from '@taiga-ui/kit/components/accordion';
 import { TuiAccordion } from '@taiga-ui/kit/components/accordion';
-import { TuiInputModule } from '@taiga-ui/legacy/components/input';
-import { TuiFlagPipe } from '@taiga-ui/core/pipes/flag';
 import { TuiLanguageSwitcherService } from '@taiga-ui/i18n/utils';
-import * as i2$3 from '@taiga-ui/kit/components/badged-content';
-import { TuiBadgedContent } from '@taiga-ui/kit/components/badged-content';
+import { TuiBadge } from '@taiga-ui/kit/components/badge';
 import { TuiButtonSelect } from '@taiga-ui/kit/directives/button-select';
+import { TuiFlagPipe } from '@taiga-ui/kit/pipes/flag';
 import { TuiRoot } from '@taiga-ui/core/components/root';
-import { TuiReplacePipe } from '@taiga-ui/cdk/pipes/replace';
-import { TuiAutoColorPipe } from '@taiga-ui/core/pipes/auto-color';
-import { TuiChip } from '@taiga-ui/kit/components/chip';
-import { tuiCreateOptions } from '@taiga-ui/cdk/utils/di';
+import { TuiAutoColorPipe } from '@taiga-ui/kit/pipes/auto-color';
 
 class TuiDocAPI {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TuiDocAPI, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: TuiDocAPI, isStandalone: true, selector: "table[tuiDocAPI]", providers: [tuiHintOptionsProvider({ appearance: 'floating' })], ngImport: i0, template: `
+        <thead>
+            <tr>
+                <ng-content select="th" />
+            </tr>
+        </thead>
+        <tbody><ng-content /></tbody>
+        <ng-content select="tbody" />
+    `, isInline: true, styles: ["[tuiDocAPI]{inline-size:100%}[tuiDocAPI] tbody [tuiTitle]{align-items:flex-start;padding:1rem;box-shadow:0 1px var(--tui-border-normal);background:var(--tui-background-base-alt)}[tuiTheme=dark] [tuiDocAPI] tbody [tuiTitle]{background:var(--tui-background-elevation-2)}[tuiDocAPI] tbody [tuiTitle] [tuiSubtitle]{color:var(--tui-text-secondary)}[tuiDocAPI] th{padding:.5rem 0;color:var(--tui-text-secondary);font:var(--tui-font-body-s);text-align:start;box-shadow:inset 0 -1px var(--tui-border-normal)}[tuiDocAPI] th:last-child{text-align:end}@media screen and (max-width: 767.4px){[tuiDocAPI],[tuiDocAPI] tbody,[tuiDocAPI] tr{display:flex;flex-direction:column}[tuiDocAPI] th,[tuiDocAPI] tbody th,[tuiDocAPI] tr th{display:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TuiDocAPI, decorators: [{
+            type: Component,
+            args: [{ selector: 'table[tuiDocAPI]', template: `
+        <thead>
+            <tr>
+                <ng-content select="th" />
+            </tr>
+        </thead>
+        <tbody><ng-content /></tbody>
+        <ng-content select="tbody" />
+    `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [tuiHintOptionsProvider({ appearance: 'floating' })], styles: ["[tuiDocAPI]{inline-size:100%}[tuiDocAPI] tbody [tuiTitle]{align-items:flex-start;padding:1rem;box-shadow:0 1px var(--tui-border-normal);background:var(--tui-background-base-alt)}[tuiTheme=dark] [tuiDocAPI] tbody [tuiTitle]{background:var(--tui-background-elevation-2)}[tuiDocAPI] tbody [tuiTitle] [tuiSubtitle]{color:var(--tui-text-secondary)}[tuiDocAPI] th{padding:.5rem 0;color:var(--tui-text-secondary);font:var(--tui-font-body-s);text-align:start;box-shadow:inset 0 -1px var(--tui-border-normal)}[tuiDocAPI] th:last-child{text-align:end}@media screen and (max-width: 767.4px){[tuiDocAPI],[tuiDocAPI] tbody,[tuiDocAPI] tr{display:flex;flex-direction:column}[tuiDocAPI] th,[tuiDocAPI] tbody th,[tuiDocAPI] tr th{display:none}}\n"] }]
+        }] });
+
+class TuiDocAPINumberItem {
     constructor() {
-        this.texts = inject(TUI_DOC_DOCUMENTATION_TEXTS);
+        this.min = input(null);
+        this.max = input(null);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiDocAPI, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiDocAPI, isStandalone: true, selector: "table[tuiDocAPI]", ngImport: i0, template: "<thead>\n    <tr>\n        <th>{{ texts[2] }}</th>\n        <th>{{ texts[1] }}</th>\n        <th>{{ texts[3] }}</th>\n    </tr>\n</thead>\n<ng-content />\n", styles: ["[tuiDocAPI]{inline-size:100%}[tuiDocAPI] tbody [tuiTitle]{align-items:flex-start;color:var(--tui-text-secondary);padding:1rem;box-shadow:0 1px var(--tui-border-normal);background:var(--tui-background-base-alt)}[tuiDocAPI] th{padding:.5rem 0;color:var(--tui-text-secondary);font-weight:400;text-align:start;box-shadow:inset 0 -1px var(--tui-border-normal)}[tuiDocAPI] th:last-child{text-align:end}@media screen and (max-width: 47.9625em){[tuiDocAPI],[tuiDocAPI] tbody,[tuiDocAPI] tr{display:flex;flex-direction:column}[tuiDocAPI] th,[tuiDocAPI] tbody th,[tuiDocAPI] tr th{display:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TuiDocAPINumberItem, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.18", type: TuiDocAPINumberItem, isStandalone: true, selector: "tr[tuiDocAPIItem][type=number]", inputs: { min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiDocAPI, decorators: [{
-            type: Component,
-            args: [{ standalone: true, selector: 'table[tuiDocAPI]', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<thead>\n    <tr>\n        <th>{{ texts[2] }}</th>\n        <th>{{ texts[1] }}</th>\n        <th>{{ texts[3] }}</th>\n    </tr>\n</thead>\n<ng-content />\n", styles: ["[tuiDocAPI]{inline-size:100%}[tuiDocAPI] tbody [tuiTitle]{align-items:flex-start;color:var(--tui-text-secondary);padding:1rem;box-shadow:0 1px var(--tui-border-normal);background:var(--tui-background-base-alt)}[tuiDocAPI] th{padding:.5rem 0;color:var(--tui-text-secondary);font-weight:400;text-align:start;box-shadow:inset 0 -1px var(--tui-border-normal)}[tuiDocAPI] th:last-child{text-align:end}@media screen and (max-width: 47.9625em){[tuiDocAPI],[tuiDocAPI] tbody,[tuiDocAPI] tr{display:flex;flex-direction:column}[tuiDocAPI] th,[tuiDocAPI] tbody th,[tuiDocAPI] tr th{display:none}}\n"] }]
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TuiDocAPINumberItem, decorators: [{
+            type: Directive,
+            args: [{ selector: 'tr[tuiDocAPIItem][type=number]' }]
         }] });
 
 class TuiInspectPipe {
     constructor() {
-        this.isE2E = inject(TUI_IS_E2E);
+        this.isE2E = inject(WA_IS_E2E);
     }
     transform(value, depth = 2) {
         if (this.isE2E && typeof value === 'function') {
@@ -107,20 +125,17 @@ class TuiInspectPipe {
              */
             return 'λ(x) => y';
         }
-        return value instanceof TemplateRef ? 'TemplateRef' : tuiInspectAny(value, depth);
+        return value instanceof TemplateRef ? 'TemplateRef' : tuiInspect(value, depth);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiInspectPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: TuiInspectPipe, isStandalone: true, name: "tuiInspectAny" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TuiInspectPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.18", ngImport: i0, type: TuiInspectPipe, isStandalone: true, name: "tuiInspect" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiInspectPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TuiInspectPipe, decorators: [{
             type: Pipe,
-            args: [{
-                    standalone: true,
-                    name: 'tuiInspectAny',
-                }]
+            args: [{ name: 'tuiInspect' }]
         }] });
 
-class TuiDocTypeReferencePipe {
+class TuiTypeReferencePipe {
     constructor() {
         this.parser = inject(TUI_DOC_TYPE_REFERENCE_PARSER);
         this.linkHandler = inject(TUI_DOC_TYPE_REFERENCE_HANDLER);
@@ -134,84 +149,64 @@ class TuiDocTypeReferencePipe {
         }))
             .sort((a, b) => b.reference?.localeCompare(a.reference ?? '') ?? -1);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiDocTypeReferencePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: TuiDocTypeReferencePipe, isStandalone: true, name: "tuiDocTypeReference" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TuiTypeReferencePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.18", ngImport: i0, type: TuiTypeReferencePipe, isStandalone: true, name: "tuiTypeReference" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiDocTypeReferencePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TuiTypeReferencePipe, decorators: [{
             type: Pipe,
-            args: [{
-                    standalone: true,
-                    name: 'tuiDocTypeReference',
-                }]
+            args: [{ name: 'tuiTypeReference' }]
         }] });
 
-class TuiDocAPINumberItem {
-    constructor() {
-        this.min = null;
-        this.max = null;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiDocAPINumberItem, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: TuiDocAPINumberItem, isStandalone: true, selector: "tr[tuiDocAPIItem][type=number]", inputs: { min: "min", max: "max" }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiDocAPINumberItem, decorators: [{
-            type: Directive,
-            args: [{
-                    standalone: true,
-                    selector: 'tr[tuiDocAPIItem][type=number]',
-                }]
-        }], propDecorators: { min: [{
-                type: Input
-            }], max: [{
-                type: Input
-            }] } });
-
-const SERIALIZED_SUFFIX$1 = '$';
+const SERIALIZED_SUFFIX = '$';
 class TuiDocAPIItem {
     constructor() {
         this.locationRef = inject(Location);
         this.activatedRoute = inject(ActivatedRoute);
         this.urlSerializer = inject(UrlSerializer);
         this.urlStateHandler = inject(TUI_DOC_URL_STATE_HANDLER);
-        this.alerts = inject(TuiAlertService);
-        this.icons = inject(TUI_DOC_ICONS);
+        this.alerts = inject(TuiNotificationService);
         this.numberItem = inject(TuiDocAPINumberItem, {
             self: true,
             optional: true,
         });
-        this.name = '';
-        this.type = '';
-        this.items = [];
-        this.valueChange = new EventEmitter();
+        this.isBananaBox = computed(() => this.name().startsWith('[('));
+        this.isInput = computed(() => this.name().startsWith('['));
+        this.isOutput = computed(() => this.name().startsWith('('));
+        this.name = input('');
+        this.type = input('');
+        this.value = model();
+        this.items = input([], { transform: (v) => v || [] });
+        this.hasCleaner = computed(() => this.type().includes('null') || this.type().includes('PolymorpheusContent'));
     }
-    ngAfterViewInit() {
+    ngOnInit() {
         this.parseParams(this.activatedRoute.snapshot.queryParams);
     }
     onValueChange(value) {
-        this.value = value;
-        this.valueChange.emit(value);
+        this.value.set(value);
         this.setQueryParam(value);
     }
     emitEvent(event) {
         console.info('emitEvent', event);
         const alert = !event || event?.toString() === '[object Object]'
-            ? tuiInspectAny(event, 2)
+            ? tuiInspect(event, 2)
             : event;
-        this.alerts.open(alert, { label: this.name }).subscribe();
+        this.alerts.open(alert, { label: this.name() }).subscribe();
     }
     clearBrackets(value) {
         return value.replaceAll(/[()[\]]/g, '');
     }
     parseParams(params) {
-        const name = this.clearBrackets(this.name);
+        const name = this.clearBrackets(this.name());
         const propertyValue = params[name];
-        const propertyValueWithSuffix = params[`${name}${SERIALIZED_SUFFIX$1}`];
+        const propertyValueWithSuffix = params[`${name}${SERIALIZED_SUFFIX}`];
         if (!propertyValue && !propertyValueWithSuffix) {
             return;
         }
-        let value = !!propertyValueWithSuffix && this.items
-            ? this.items[propertyValueWithSuffix]
+        const items = this.items();
+        let value = !!propertyValueWithSuffix && items
+            ? items[propertyValueWithSuffix]
             : tuiCoerceValue(propertyValue);
-        if (this.type === 'string' && tuiIsNumber(value)) {
+        if (this.type() === 'string' && tuiIsNumber(value)) {
             value = value.toString();
         }
         this.onValueChange(value);
@@ -219,109 +214,108 @@ class TuiDocAPIItem {
     setQueryParam(value) {
         const tree = this.urlSerializer.parse(this.locationRef.path());
         const isValueAvailableByKey = value instanceof Object;
-        const computedValue = isValueAvailableByKey && this.items ? this.items.indexOf(value) : value;
-        const suffix = isValueAvailableByKey ? SERIALIZED_SUFFIX$1 : '';
-        const propName = this.clearBrackets(this.name) + suffix;
+        const items = this.items();
+        const computedValue = isValueAvailableByKey && items ? items.indexOf(value) : value;
+        const suffix = isValueAvailableByKey ? SERIALIZED_SUFFIX : '';
+        const propName = this.clearBrackets(this.name()) + suffix;
         tree.queryParams = {
             ...tree.queryParams,
             [propName]: computedValue,
         };
         this.locationRef.go(this.urlStateHandler(tree));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiDocAPIItem, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiDocAPIItem, isStandalone: true, selector: "tr[tuiDocAPIItem]", inputs: { name: "name", type: "type", value: "value", items: "items" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<td class=\"t-td\">\n    <code\n        class=\"t-name\"\n        [class.t-name_banana]=\"name.startsWith('[(')\"\n        [class.t-name_input]=\"name.startsWith('[')\"\n        [class.t-name_output]=\"name.startsWith('(')\"\n    >\n        {{ name }}\n    </code>\n    <ng-content />\n</td>\n<td class=\"t-td\">\n    <code class=\"t-type\">\n        <ng-container *ngFor=\"let item of type | tuiDocTypeReference; let last = last\">\n            <a\n                *ngIf=\"item.reference; else default\"\n                target=\"_blank\"\n                class=\"t-reference\"\n                [attr.href]=\"item.reference\"\n            >\n                {{ item.type }}\n                <tui-icon\n                    *ngIf=\"icons.externalLink\"\n                    [icon]=\"icons.externalLink\"\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') || type.includes('PolymorpheusContent')\"\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\n            *ngIf=\"value !== undefined\"\n            [ngSwitch]=\"type\"\n        >\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-textfield\n                *ngSwitchCase=\"'number'\"\n                tuiTextfieldSize=\"m\"\n            >\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        </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;min-inline-size:10rem}.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:.1875rem}.t-input{min-inline-size:10rem;margin-block-start:-.625rem}.t-input code{overflow:hidden;white-space:nowrap}@media screen and (max-width: 47.9625em){:host{gap:1rem;padding:1rem 0}.t-td{padding:0}.t-td:last-child{text-align:start}.t-input{margin:0}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.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]), tui-data-list-wrapper:not([labels])[new]", inputs: ["items", "disabledItemHandler", "emptyContent", "size", "itemContent"], outputs: ["itemClick"] }, { kind: "pipe", type: TuiDocTypeReferencePipe, name: "tuiDocTypeReference" }, { kind: "component", type: TuiIcon, selector: "tui-icon", inputs: ["icon", "background"] }, { kind: "directive", type: i3.TuiInputNumberDirective, selector: "input[tuiInputNumber]", inputs: ["min", "max", "prefix", "postfix"] }, { kind: "component", type: i3.TuiInputNumberStep, selector: "input[tuiInputNumber][step]", inputs: ["step"] }, { 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:not([multi])" }, { kind: "directive", type: i4.TuiTextfieldDirective, selector: "input[tuiTextfield]:not([tuiInputCard]):not([tuiInputExpire]):not([tuiInputCVC])" }, { kind: "directive", type: i4.TuiTextfieldOptionsDirective, selector: "[tuiTextfieldAppearance],[tuiTextfieldSize],[tuiTextfieldCleaner]", inputs: ["tuiTextfieldAppearance", "tuiTextfieldSize", "tuiTextfieldCleaner"] }, { kind: "directive", type: i4.TuiTextfieldDropdownDirective, selector: "ng-template[tuiTextfieldDropdown]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TuiDocAPIItem, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", 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        tuiHintDirection=\"top-end\"\n        class=\"t-name\"\n        [class.t-name_banana]=\"isBananaBox()\"\n        [class.t-name_input]=\"isInput()\"\n        [class.t-name_output]=\"isOutput()\"\n        [tuiHint]=\"hint\"\n    >\n        {{ name() }}\n    </code>\n    <ng-template #hint>\n        <ng-content>{{ name() }}</ng-content>\n    </ng-template>\n    <div class=\"t-description\">\n        <ng-container *ngTemplateOutlet=\"hint\" />\n    </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: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:none}@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}.t-name{pointer-events:none}.t-description{display:block;margin-block-start:1rem}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: 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: "directive", type: i3.TuiHintDirective, selector: "[tuiHint]:not(ng-container):not(ng-template)", inputs: ["tuiHint", "tuiHintContext", "tuiHintAppearance"], outputs: ["tuiHintVisible"] }, { 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: i6$1.TuiInputDirective, selector: "input[tuiInput]", inputs: ["readOnly", "invalid", "focused", "state"] }, { kind: "directive", type: i7.TuiInputNumberDirective, selector: "input[tuiInputNumber]" }, { kind: "component", type: i7.TuiInputNumberStep, selector: "input[tuiInputNumber][step]", inputs: ["step"] }, { kind: "pipe", type: TuiInspectPipe, name: "tuiInspect" }, { kind: "directive", type: i3$1.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: "16.2.12", ngImport: i0, type: TuiDocAPIItem, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TuiDocAPIItem, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'tr[tuiDocAPIItem]', imports: [
+            args: [{ selector: 'tr[tuiDocAPIItem]', imports: [
                         FormsModule,
-                        NgForOf,
-                        NgIf,
-                        NgSwitch,
-                        NgSwitchCase,
+                        NgTemplateOutlet,
                         TuiChevron,
                         TuiDataListWrapper,
-                        TuiDocTypeReferencePipe,
-                        TuiIcon,
+                        TuiHint,
+                        TuiInput,
                         TuiInputNumber,
                         TuiInspectPipe,
+                        TuiSelect,
                         TuiSwitch,
-                        TuiTextfield,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<td class=\"t-td\">\n    <code\n        class=\"t-name\"\n        [class.t-name_banana]=\"name.startsWith('[(')\"\n        [class.t-name_input]=\"name.startsWith('[')\"\n        [class.t-name_output]=\"name.startsWith('(')\"\n    >\n        {{ name }}\n    </code>\n    <ng-content />\n</td>\n<td class=\"t-td\">\n    <code class=\"t-type\">\n        <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                    *ngIf=\"icons.externalLink\"\n                    [icon]=\"icons.externalLink\"\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') || type.includes('PolymorpheusContent')\"\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\n            *ngIf=\"value !== undefined\"\n            [ngSwitch]=\"type\"\n        >\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-textfield\n                *ngSwitchCase=\"'number'\"\n                tuiTextfieldSize=\"m\"\n            >\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        </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;min-inline-size:10rem}.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:.1875rem}.t-input{min-inline-size:10rem;margin-block-start:-.625rem}.t-input code{overflow:hidden;white-space:nowrap}@media screen and (max-width: 47.9625em){:host{gap:1rem;padding:1rem 0}.t-td{padding:0}.t-td:last-child{text-align:start}.t-input{margin:0}}\n"] }]
-        }], propDecorators: { name: [{
-                type: Input
-            }], type: [{
-                type: Input
-            }], value: [{
-                type: Input
-            }], items: [{
-                type: Input
-            }], valueChange: [{
-                type: Output
-            }] } });
+                        TuiTypeReferencePipe,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<td class=\"t-td\">\n    <code\n        tuiHintDirection=\"top-end\"\n        class=\"t-name\"\n        [class.t-name_banana]=\"isBananaBox()\"\n        [class.t-name_input]=\"isInput()\"\n        [class.t-name_output]=\"isOutput()\"\n        [tuiHint]=\"hint\"\n    >\n        {{ name() }}\n    </code>\n    <ng-template #hint>\n        <ng-content>{{ name() }}</ng-content>\n    </ng-template>\n    <div class=\"t-description\">\n        <ng-container *ngTemplateOutlet=\"hint\" />\n    </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: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:none}@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}.t-name{pointer-events:none}.t-description{display:block;margin-block-start:1rem}}\n"] }]
+        }] });
 
 class TuiDocCode {
     constructor() {
         this.icons = inject(TUI_DOC_ICONS);
         this.rawLoader$$ = new BehaviorSubject('');
+        this.texts = inject(TUI_COPY_TEXTS);
         this.isServer = isPlatformServer(inject(PLATFORM_ID));
         this.markdownCodeProcessor = inject(TUI_DOC_EXAMPLE_MARKDOWN_CODE_PROCESSOR);
         this.copy$ = new Subject();
-        this.copyText = toSignal(inject(TUI_COPY_TEXTS).pipe(map(([copy]) => copy)));
+        this.copyText = computed(() => this.texts()[0]);
         this.icon = toSignal(this.copy$.pipe(switchMap(() => timer(2000).pipe(map(() => this.icons.copy), startWith(this.icons.check)))), { initialValue: this.icons.copy });
         this.processor = toSignal(this.rawLoader$$.pipe(switchMap(tuiRawLoad), map((value) => this.markdownCodeProcessor(value))), { initialValue: [] });
-        this.filename = '';
-    }
-    set code(code) {
-        this.rawLoader$$.next(code);
+        this.filename = input('');
+        this.code = input('');
+        this.lineNumbers = input(true);
     }
     get hasFilename() {
-        return !!this.filename;
+        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\n            tuiIconButton\n            type=\"button\"\n            appearance=\"outline-grayscale\"\n            size=\"s\"\n            class=\"t-copy-button\"\n            [iconStart]=\"icon()\"\n            [cdkCopyToClipboard]=\"content\"\n            (click)=\"copy$.next()\"\n        >\n            {{ copyText()}}\n        </button>\n        <ng-content />\n    </div>\n</pre>\n", styles: [":host{display:block}.t-header{font:var(--tui-font-text-s);font-weight:700}.t-header+.t-code{border-radius:.25rem}.t-code{position:relative;margin:0;white-space:normal;outline:1px solid var(--tui-border-normal)}.t-code ::ng-deep .hljs-ln{inline-size:100%}.t-code ::ng-deep .hljs-ln .hljs-ln-numbers{inline-size:1rem}.t-code ::ng-deep .hljs-ln td{white-space:pre}.t-code ::ng-deep .hljs-ln td:not(.hljs-ln-numbers):hover{outline:1px solid var(--tui-border-normal);border-radius:.25rem}.t-code+.t-code{margin-block-start:1rem}.t-code-actions{position:absolute;top:.75rem;right:.75rem;display:flex;justify-content:center;align-items:center;flex-direction:row-reverse}.t-copy-button::ng-deep+*:not(:empty){margin-inline-end:.375rem}.hljs:not(:empty){font:var(--tui-font-text-m);font-size:.875rem;padding:1.5rem 2rem;font-family:monospace;overflow-wrap:break-word;white-space:pre-wrap}@media all and (-webkit-min-device-pixel-ratio: 0) and (-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 }); }
+    ngOnChanges() {
+        this.rawLoader$$.next(this.code());
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TuiDocCode, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: TuiDocCode, isStandalone: true, selector: "tui-doc-code", inputs: { filename: { classPropertyName: "filename", publicName: "filename", isSignal: true, isRequired: false, transformFunction: null }, code: { classPropertyName: "code", publicName: "code", isSignal: true, isRequired: false, transformFunction: null }, lineNumbers: { classPropertyName: "lineNumbers", publicName: "lineNumbers", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.visibility": "isServer ? \"hidden\" : \"visible\"", "class._has-filename": "hasFilename" } }, usesOnChanges: true, ngImport: i0, template: "@if (filename()) {\n    <p class=\"t-header\">\n        {{ filename() }}\n    </p>\n}\n@for (content of processor(); track content) {\n    <pre class=\"t-code\">\n    <code [lineNumbers]=\"lineNumbers()\" [highlight]=\"content\"></code>\n    <div class=\"t-code-actions\">\n      <button\n        tuiIconButton\n        type=\"button\"\n        appearance=\"\"\n        size=\"s\"\n        class=\"t-copy-button\"\n        [iconStart]=\"icon()\"\n        [cdkCopyToClipboard]=\"content\"\n        (click)=\"copy$.next()\"\n        >\n        {{ copyText() }}\n      </button>\n      <ng-content />\n    </div>\n  </pre>\n}\n", styles: [":host{display:block}.t-header{font:var(--tui-font-body-s);font-weight:700}.t-header+.t-code{border-radius:.25rem}.t-code{position:relative;margin:0;white-space:normal;outline:1px solid var(--tui-border-normal)}.t-code ::ng-deep .hljs-ln{inline-size:100%}.t-code ::ng-deep .hljs-ln .hljs-ln-numbers{inline-size:1rem}.t-code ::ng-deep .hljs-ln td{white-space:pre}.t-code ::ng-deep .hljs-ln td:not(.hljs-ln-numbers):hover{outline:1px solid var(--tui-border-normal);border-radius:.25rem}.t-code+.t-code{margin-block-start:1rem}.t-code-actions{position:absolute;display:flex;inset-block-start:.75rem;inset-inline-end:.75rem;justify-content:center;align-items:center;flex-direction:row-reverse;background:var(--tui-background-base-alt);border-radius:var(--tui-radius-xs);--tui-stroke-width: .09375rem}:host-context([tuiTheme=\"dark\"]) .t-code-actions{background:var(--tui-background-elevation-2)}.t-copy-button::ng-deep+*:not(:empty){margin-inline-end:.375rem}.hljs:not(:empty){font:var(--tui-font-body-m);font-size:.875rem;padding:1rem;font-family:monospace;overflow-wrap:break-word;white-space:pre-wrap}\n"], dependencies: [{ kind: "ngmodule", type: ClipboardModule }, { kind: "directive", type: i1$1.CdkCopyToClipboard, selector: "[cdkCopyToClipboard]", inputs: ["cdkCopyToClipboard", "cdkCopyToClipboardAttempts"], outputs: ["cdkCopyToClipboardCopied"] }, { kind: "directive", type: Highlight, selector: "[highlight]", inputs: ["highlight", "languages", "lineNumbers"], outputs: ["highlighted"] }, { kind: "directive", type: TuiButton, selector: "a[tuiButton],button[tuiButton],a[tuiIconButton],button[tuiIconButton]", inputs: ["size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiDocCode, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TuiDocCode, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'tui-doc-code', imports: [ClipboardModule, Highlight, NgForOf, NgIf, TuiButton], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+            args: [{ selector: 'tui-doc-code', imports: [ClipboardModule, Highlight, 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\n            tuiIconButton\n            type=\"button\"\n            appearance=\"outline-grayscale\"\n            size=\"s\"\n            class=\"t-copy-button\"\n            [iconStart]=\"icon()\"\n            [cdkCopyToClipboard]=\"content\"\n            (click)=\"copy$.next()\"\n        >\n            {{ copyText()}}\n        </button>\n        <ng-content />\n    </div>\n</pre>\n", styles: [":host{display:block}.t-header{font:var(--tui-font-text-s);font-weight:700}.t-header+.t-code{border-radius:.25rem}.t-code{position:relative;margin:0;white-space:normal;outline:1px solid var(--tui-border-normal)}.t-code ::ng-deep .hljs-ln{inline-size:100%}.t-code ::ng-deep .hljs-ln .hljs-ln-numbers{inline-size:1rem}.t-code ::ng-deep .hljs-ln td{white-space:pre}.t-code ::ng-deep .hljs-ln td:not(.hljs-ln-numbers):hover{outline:1px solid var(--tui-border-normal);border-radius:.25rem}.t-code+.t-code{margin-block-start:1rem}.t-code-actions{position:absolute;top:.75rem;right:.75rem;display:flex;justify-content:center;align-items:center;flex-direction:row-reverse}.t-copy-button::ng-deep+*:not(:empty){margin-inline-end:.375rem}.hljs:not(:empty){font:var(--tui-font-text-m);font-size:.875rem;padding:1.5rem 2rem;font-family:monospace;overflow-wrap:break-word;white-space:pre-wrap}@media all and (-webkit-min-device-pixel-ratio: 0) and (-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: [{
-                type: Input
-            }] } });
+                    }, template: "@if (filename()) {\n    <p class=\"t-header\">\n        {{ filename() }}\n    </p>\n}\n@for (content of processor(); track content) {\n    <pre class=\"t-code\">\n    <code [lineNumbers]=\"lineNumbers()\" [highlight]=\"content\"></code>\n    <div class=\"t-code-actions\">\n      <button\n        tuiIconButton\n        type=\"button\"\n        appearance=\"\"\n        size=\"s\"\n        class=\"t-copy-button\"\n        [iconStart]=\"icon()\"\n        [cdkCopyToClipboard]=\"content\"\n        (click)=\"copy$.next()\"\n        >\n        {{ copyText() }}\n      </button>\n      <ng-content />\n    </div>\n  </pre>\n}\n", styles: [":host{display:block}.t-header{font:var(--tui-font-body-s);font-weight:700}.t-header+.t-code{border-radius:.25rem}.t-code{position:relative;margin:0;white-space:normal;outline:1px solid var(--tui-border-normal)}.t-code ::ng-deep .hljs-ln{inline-size:100%}.t-code ::ng-deep .hljs-ln .hljs-ln-numbers{inline-size:1rem}.t-code ::ng-deep .hljs-ln td{white-space:pre}.t-code ::ng-deep .hljs-ln td:not(.hljs-ln-numbers):hover{outline:1px solid var(--tui-border-normal);border-radius:.25rem}.t-code+.t-code{margin-block-start:1rem}.t-code-actions{position:absolute;display:flex;inset-block-start:.75rem;inset-inline-end:.75rem;justify-content:center;align-items:center;flex-direction:row-reverse;background:var(--tui-background-base-alt);border-radius:var(--tui-radius-xs);--tui-stroke-width: .09375rem}:host-context([tuiTheme=\"dark\"]) .t-code-actions{background:var(--tui-background-elevation-2)}.t-copy-button::ng-deep+*:not(:empty){margin-inline-end:.375rem}.hljs:not(:empty){font:var(--tui-font-body-m);font-size:.875rem;padding:1rem;font-family:monospace;overflow-wrap:break-word;white-space:pre-wrap}\n"] }]
+        }] });
 
 const COPIED_TIMEOUT = 1500;
 class TuiDocCopy {
     constructor() {
         this.copy$ = new Subject();
-        this.texts = toSignal(inject(TUI_COPY_TEXTS), {
-            initialValue: ['', ''],
-        });
+        this.texts = inject(TUI_COPY_TEXTS);
         this.copied = toSignal(this.copy$.pipe(switchMap(() => timer(COPIED_TIMEOUT).pipe(map(TUI_FALSE_HANDLER), startWith(true)))), { initialValue: false });
     }
     onClick() {
         this.copy$.next();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiDocCopy, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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            <ng-container *ngIf=\"!copied()\">\n                <ng-content />\n            </ng-container>\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}.t-initial:empty:before{content:attr(data-text)}.t-content{transition-property:transform;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;display:flex;flex-direction:column;text-align:center;line-height:2rem}\n"], dependencies: [{ 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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TuiDocCopy, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", 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}.t-initial:empty:before{content:attr(data-text)}.t-content{transition-property:transform;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;display:flex;flex-direction:column;text-align:center;line-height:2rem}\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: "16.2.12", ngImport: i0, type: TuiDocCopy, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TuiDocCopy, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'tui-doc-copy', imports: [NgIf, 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            <ng-container *ngIf=\"!copied()\">\n                <ng-content />\n            </ng-container>\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}.t-initial:empty:before{content:attr(data-text)}.t-content{transition-property:transform;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;display:flex;flex-direction:column;text-align:center;line-height:2rem}\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: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}.t-initial:empty:before{content:attr(data-text)}.t-content{transition-property:transform;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;display:flex;flex-direction:column;text-align:center;line-height:2rem}\n"] }]
         }] });
 
 const MIN_WIDTH = 160;
+class TuiJsonPipe {
+    transform(value) {
+        return JSON.stringify(value, (_, x) => (typeof x === 'bigint' ? `${String(x)}n` : x), 2);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TuiJsonPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.18", ngImport: i0, type: TuiJsonPipe, isStandalone: true, name: "json" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TuiJsonPipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'json' }]
+        }] });
 class TuiDocDemo {
     constructor() {
+        this.resizable = viewChild.required(TuiResizable, { read: ElementRef });
+        this.content = viewChild.required('content');
         this.el = tuiInjectElement();
         this.locationRef = inject(Location);
         this.urlSerializer = inject(UrlSerializer);
         this.urlStateHandler = inject(TUI_DOC_URL_STATE_HANDLER);
         this.darkMode = inject(TUI_DARK_MODE);
-        this.template = null;
+        this.template = contentChild((TemplateRef));
         this.rendered = signal(false);
         this.theme = computed(() => (this.dark() ? 'dark' : 'light'));
         this.dark = signal(tuiCoerceValueIsTrue(this.params.darkMode ?? this.darkMode()));
@@ -332,10 +326,10 @@ class TuiDocDemo {
         this.updateOn = this.params.updateOn || this.updateOnVariants[0];
         this.opaque = tuiCoerceValueIsTrue(this.params.sandboxOpaque ?? true);
         this.expanded = tuiCoerceValueIsTrue(this.params.sandboxExpanded ?? false);
-        this.sandboxWidth = tuiToInteger(this.params.sandboxWidth);
+        this.sandboxWidth = parseInt(this.params.sandboxWidth, 10);
         this.texts = inject(TUI_DOC_DEMO_TEXTS);
-        this.control = null;
-        this.sticky = true;
+        this.control = input(null);
+        this.sticky = input(true);
     }
     ngAfterViewInit() {
         this.createForm();
@@ -367,21 +361,20 @@ class TuiDocDemo {
         this.createForm();
     }
     updateWidth(width = NaN) {
-        if (!this.resizer || !this.resizable || !this.content) {
+        if (!this.resizable() || !this.content()) {
             return;
         }
-        const safe = width || this.resizable.nativeElement.clientWidth;
+        const safe = width || this.resizable().nativeElement.clientWidth;
         const total = this.el.clientWidth;
         const clamped = Math.round(tuiClamp(safe, MIN_WIDTH, total)) - this.delta;
         const validated = safe < total ? clamped : NaN;
-        this.resizer.nativeElement.textContent = String(clamped || '-');
-        this.resizable.nativeElement.style.width = validated ? tuiPx(safe) : '';
+        this.resizable().nativeElement.style.width = validated ? tuiPx(safe) : '';
         this.sandboxWidth = validated;
     }
     get delta() {
-        return this.resizable && this.content
-            ? this.resizable.nativeElement.clientWidth -
-                this.content.nativeElement.clientWidth
+        return this.resizable() && this.content()
+            ? this.resizable().nativeElement.clientWidth -
+                this.content().nativeElement.clientWidth
             : 0;
     }
     get params() {
@@ -398,390 +391,53 @@ class TuiDocDemo {
         this.locationRef.go(this.urlStateHandler(tree));
     }
     createForm() {
-        const { control, updateOn } = this;
+        const control = this.control();
         if (control) {
-            this.testForm = new FormGroup({ testValue: control }, { updateOn });
+            this.form = new FormGroup({ value: control }, { updateOn: this.updateOn });
         }
     }
     getUrlTree() {
         return this.urlSerializer.parse(this.locationRef.path());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiDocDemo, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiDocDemo, isStandalone: true, selector: "tui-doc-demo", inputs: { control: "control", sticky: "sticky" }, host: { listeners: { "window:resize": "onResize()", "document:mouseup.zoneless": "onMouseUp()" }, properties: { "class._sticky": "sticky" } }, queries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true }], viewQueries: [{ propertyName: "resizable", first: true, predicate: TuiResizable, descendants: true, static: true }, { propertyName: "content", first: true, predicate: ["content"], descendants: true, static: true }, { propertyName: "resizer", first: true, predicate: ["resizer"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"t-settings\">\n    <label class=\"t-label\">\n        <input\n            size=\"s\"\n            tuiSwitch\n            type=\"checkbox\"\n            [ngModel]=\"dark()\"\n            (ngModelChange)=\"onModeChange($event)\"\n        />\n        {{ texts[0] }}\n    </label>\n    <label class=\"t-label\">\n        <input\n            size=\"s\"\n            tuiSwitch\n            type=\"checkbox\"\n            [ngModel]=\"opaque\"\n            (ngModelChange)=\"changeOpaque($event)\"\n        />\n        {{ texts[1] }}\n    </label>\n</div>\n<div\n    tuiResizable\n    class=\"t-wrapper\"\n    [attr.tuiTheme]=\"theme()\"\n    [class.t-wrapper_transparent]=\"!opaque\"\n    [style.visibility]=\"rendered() ? 'visible' : 'hidden'\"\n>\n    <div class=\"t-content\">\n        <div\n            #content\n            id=\"demo-content\"\n        >\n            <form\n                *ngIf=\"testForm\"\n                class=\"t-form\"\n                [formGroup]=\"testForm\"\n            >\n                <div class=\"t-input-wrapper\">\n                    <ng-container [ngTemplateOutlet]=\"template\" />\n                </div>\n                <button\n                    automation-id=\"tui-demo-button__toggle-details\"\n                    size=\"s\"\n                    tuiButton\n                    type=\"button\"\n                    class=\"t-button\"\n                    [tuiChevron]=\"expanded\"\n                    (click)=\"toggleDetails()\"\n                >\n                    {{ texts[2] }}\n                </button>\n                <tui-expand\n                    class=\"t-expand\"\n                    [expanded]=\"expanded\"\n                >\n                    <ng-template tuiExpandContent>\n                        <pre class=\"t-value\">Form data: {{ testForm.value | json }}</pre>\n                        <div\n                            tuiGroup\n                            class=\"t-form-controls\"\n                        >\n                            <tui-select\n                                automation-id=\"tui-demo-select__expand-update-on\"\n                                tuiTextfieldSize=\"s\"\n                                class=\"t-select\"\n                                [ngModel]=\"updateOn\"\n                                [ngModelOptions]=\"{standalone: true}\"\n                                (ngModelChange)=\"updateOnChange($event)\"\n                            >\n                                updateOn\n                                <tui-data-list-wrapper\n                                    *tuiDataList\n                                    [items]=\"updateOnVariants\"\n                                />\n                            </tui-select>\n                            <button\n                                automation-id=\"tui-demo-button__reset-state\"\n                                size=\"s\"\n                                tuiButton\n                                type=\"reset\"\n                                [style.flex]=\"'0 0 auto'\"\n                            >\n                                Reset\n                            </button>\n                            <button\n                                automation-id=\"tui-demo-button__submit-state\"\n                                size=\"s\"\n                                tuiButton\n                                type=\"submit\"\n                                [style.flex]=\"'0 0 auto'\"\n                            >\n                                Submit\n                            </button>\n                        </div>\n                    </ng-template>\n                </tui-expand>\n            </form>\n            <ng-content />\n        </div>\n    </div>\n    <div\n        #resizer\n        class=\"t-resizer\"\n        [tuiResizer]=\"[1, 0]\"\n        (tuiSizeChange)=\"updateWidth($event[0])\"\n    ></div>\n</div>\n", styles: [":host{position:relative;display:block;min-inline-size:100%;margin:1.5rem 0;pointer-events:none;font:var(--tui-font-text-s)}.t-settings{position:absolute;bottom:calc(100% + .75rem);display:flex;gap:1rem;align-items:center;justify-content:flex-end;pointer-events:none;inline-size:100%}.t-settings>*{pointer-events:auto}.t-label{display:flex;align-items:center;gap:.5rem}.t-wrapper{display:flex;box-shadow:var(--tui-shadow-medium);border:1px solid var(--tui-border-normal);border-radius:var(--tui-radius-m);max-inline-size:100%;min-block-size:6rem;inline-size:100%;min-inline-size:10rem;color:var(--tui-text-primary);background-color:var(--tui-background-base);overflow:hidden;pointer-events:auto}.t-wrapper.t-wrapper_transparent{background-image:linear-gradient(45deg,var(--tui-background-base-alt) 25%,transparent 25%),linear-gradient(-45deg,var(--tui-background-base-alt) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--tui-background-base-alt) 75%),linear-gradient(-45deg,transparent 75%,var(--tui-background-base-alt) 75%);background-size:1.25rem 1.25rem;background-position:0 0,0 .625rem,.625rem -.625rem,-.625rem 0}@media screen and (max-width: 47.9625em){.t-wrapper{min-block-size:auto}}.t-content{flex:1 1 0;min-inline-size:0;padding:1.5rem;box-sizing:border-box;overflow:hidden}@media screen and (max-width: 47.9625em){.t-content{padding:1rem}}.t-form{display:flex;flex-wrap:wrap;align-items:flex-start}.t-input-wrapper{inline-size:100%;margin-block-end:.5rem}.t-expand{inline-size:100%}.t-value{flex:1;background:var(--tui-background-neutral-1);padding:.75rem;border-radius:.25rem}.t-mode{inline-size:12.5rem}.t-select{max-inline-size:15rem}.t-resizer{position:relative;display:flex;box-shadow:var(--tui-shadow-medium);inline-size:3.5rem;min-block-size:inherit;align-items:center;justify-content:center;flex-shrink:0;border-inline-start:1px solid var(--tui-border-normal);outline:none;background:var(--tui-background-base);color:var(--tui-text-primary)}.t-resizer:before,.t-resizer:after{content:\"\";position:absolute;top:.75rem;left:50%;bottom:calc(50% + 1rem);inline-size:1px;background:var(--tui-border-normal);box-shadow:-.25rem 0 var(--tui-border-normal);transform:translateZ(0)}.t-resizer:after{bottom:.75rem;top:calc(50% + 1rem)}@media screen and (max-width: 47.9625em){.t-resizer{display:none}}.t-resizer-text{position:relative;z-index:1;font:var(--tui-font-text-s);padding:.75rem;background:var(--tui-background-base)}.wrapper_light .t-resizer-text{background:#3e464e}.t-group,.t-checkbox{display:flex;align-items:center;margin-inline-start:.75rem}.t-button,.t-form-controls{margin-block-start:.75rem}@supports (position: sticky){@media screen and (min-height: 37.5rem){:host._sticky{position:sticky;top:4.625rem;z-index:2}}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: JsonPipe, name: "json" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: TuiButton, selector: "a[tuiButton],button[tuiButton],a[tuiIconButton],button[tuiIconButton]", inputs: ["size"] }, { kind: "directive", type: TuiChevron, selector: "[tuiChevron]", inputs: ["tuiChevron"] }, { kind: "component", type: i2.TuiDataListWrapperComponent, selector: "tui-data-list-wrapper:not([labels]), tui-data-list-wrapper:not([labels])[new]", inputs: ["items", "disabledItemHandler", "emptyContent", "size", "itemContent"], outputs: ["itemClick"] }, { kind: "directive", type: i3$1.TuiDataListDirective, selector: "ng-template[tuiDataList]" }, { kind: "component", type: i4$1.TuiExpandComponent, selector: "tui-expand", inputs: ["async", "expanded"] }, { kind: "directive", type: i4$1.TuiExpandContent, selector: "[tuiExpandContent]" }, { kind: "directive", type: TuiGroup, selector: "[tuiGroup]:not(ng-container)", inputs: ["orientation", "collapsed", "rounded", "size"] }, { kind: "directive", type: TuiResizable, selector: "[tuiResizable]" }, { kind: "directive", type: TuiResizer, selector: "[tuiResizer]", inputs: ["tuiResizer"], outputs: ["tuiSizeChange"] }, { kind: "ngmodule", type: TuiSelectModule }, { kind: "component", type: i5.TuiSelectComponent, selector: "tui-select", inputs: ["stringify", "identityMatcher", "valueContent"] }, { kind: "directive", type: i5.TuiSelectDirective, selector: "tui-select" }, { kind: "component", type: TuiSwitch, selector: "input[type=\"checkbox\"][tuiSwitch]", inputs: ["size", "showIcons"] }, { kind: "ngmodule", type: TuiTextfieldControllerModule }, { kind: "directive", type: i8.TuiTextfieldSizeDirective, selector: "[tuiTextfieldSize]", inputs: ["tuiTextfieldSize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TuiDocDemo, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: TuiDocDemo, isStandalone: true, selector: "tui-doc-demo", inputs: { control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: false, transformFunction: null }, sticky: { classPropertyName: "sticky", publicName: "sticky", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "window:resize": "onResize()", "document:mouseup.zoneless": "onMouseUp()" }, properties: { "class._sticky": "sticky()", "attr.tuiTheme": "theme()" } }, 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=\"@tui.grip-vertical\" />\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-font-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 :host-context([tuiTheme=\"dark\"]){background:var(--tui-background-elevation-2)}.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;top:4.625rem;z-index:2}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "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$1.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 }); }
 }
-__decorate([
-    tuiPure
-], TuiDocDemo.prototype, "updateUrl", null);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiDocDemo, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TuiDocDemo, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'tui-doc-demo', imports: [
+            args: [{ selector: 'tui-doc-demo', imports: [
                         FormsModule,
-                        JsonPipe,
-                        NgIf,
                         NgTemplateOutlet,
                         ReactiveFormsModule,
                         TuiButton,
                         TuiChevron,
                         TuiDataListWrapper,
                         TuiExpand,
-                        TuiGroup,
+                        TuiIcon,
+                        TuiItem,
+                        TuiJsonPipe,
                         TuiResizable,
                         TuiResizer,
-                        TuiSelectModule,
+                        TuiSelect,
                         TuiSwitch,
-                        TuiTextfieldControllerModule,
+                        TuiTextfield,
                     ], changeDetection: ChangeDetectionStrategy.OnPush, host: {
-                        '[class._sticky]': 'sticky',
+                        '[class._sticky]': 'sticky()',
+                        '[attr.tuiTheme]': 'theme()',
                         '(window:resize)': 'onResize()',
                         '(document:mouseup.zoneless)': 'onMouseUp()',
-                    }, template: "<div class=\"t-settings\">\n    <label class=\"t-label\">\n        <input\n            size=\"s\"\n            tuiSwitch\n            type=\"checkbox\"\n            [ngModel]=\"dark()\"\n            (ngModelChange)=\"onModeChange($event)\"\n        />\n        {{ texts[0] }}\n    </label>\n    <label class=\"t-label\">\n        <input\n            size=\"s\"\n            tuiSwitch\n            type=\"checkbox\"\n            [ngModel]=\"opaque\"\n            (ngModelChange)=\"changeOpaque($event)\"\n        />\n        {{ texts[1] }}\n    </label>\n</div>\n<div\n    tuiResizable\n    class=\"t-wrapper\"\n    [attr.tuiTheme]=\"theme()\"\n    [class.t-wrapper_transparent]=\"!opaque\"\n    [style.visibility]=\"rendered() ? 'visible' : 'hidden'\"\n>\n    <div class=\"t-content\">\n        <div\n            #content\n            id=\"demo-content\"\n        >\n            <form\n                *ngIf=\"testForm\"\n                class=\"t-form\"\n                [formGroup]=\"testForm\"\n            >\n                <div class=\"t-input-wrapper\">\n                    <ng-container [ngTemplateOutlet]=\"template\" />\n                </div>\n                <button\n                    automation-id=\"tui-demo-button__toggle-details\"\n                    size=\"s\"\n                    tuiButton\n                    type=\"button\"\n                    class=\"t-button\"\n                    [tuiChevron]=\"expanded\"\n                    (click)=\"toggleDetails()\"\n                >\n                    {{ texts[2] }}\n                </button>\n                <tui-expand\n                    class=\"t-expand\"\n                    [expanded]=\"expanded\"\n                >\n                    <ng-template tuiExpandContent>\n                        <pre class=\"t-value\">Form data: {{ testForm.value | json }}</pre>\n                        <div\n                            tuiGroup\n                            class=\"t-form-controls\"\n                        >\n                            <tui-select\n                                automation-id=\"tui-demo-select__expand-update-on\"\n                                tuiTextfieldSize=\"s\"\n                                class=\"t-select\"\n                                [ngModel]=\"updateOn\"\n                                [ngModelOptions]=\"{standalone: true}\"\n                                (ngModelChange)=\"updateOnChange($event)\"\n                            >\n                                updateOn\n                                <tui-data-list-wrapper\n                                    *tuiDataList\n                                    [items]=\"updateOnVariants\"\n                                />\n                            </tui-select>\n                            <button\n                                automation-id=\"tui-demo-button__reset-state\"\n                                size=\"s\"\n                                tuiButton\n                                type=\"reset\"\n                                [style.flex]=\"'0 0 auto'\"\n                            >\n                                Reset\n                            </button>\n                            <button\n                                automation-id=\"tui-demo-button__submit-state\"\n                                size=\"s\"\n                                tuiButton\n                                type=\"submit\"\n                                [style.flex]=\"'0 0 auto'\"\n                            >\n                                Submit\n                            </button>\n                        </div>\n                    </ng-template>\n                </tui-expand>\n            </form>\n            <ng-content />\n        </div>\n    </div>\n    <div\n        #resizer\n        class=\"t-resizer\"\n        [tuiResizer]=\"[1, 0]\"\n        (tuiSizeChange)=\"updateWidth($event[0])\"\n    ></div>\n</div>\n", styles: [":host{position:relative;display:block;min-inline-size:100%;margin:1.5rem 0;pointer-events:none;font:var(--tui-font-text-s)}.t-settings{position:absolute;bottom:calc(100% + .75rem);display:flex;gap:1rem;align-items:center;justify-content:flex-end;pointer-events:none;inline-size:100%}.t-settings>*{pointer-events:auto}.t-label{display:flex;align-items:center;gap:.5rem}.t-wrapper{display:flex;box-shadow:var(--tui-shadow-medium);border:1px solid var(--tui-border-normal);border-radius:var(--tui-radius-m);max-inline-size:100%;min-block-size:6rem;inline-size:100%;min-inline-size:10rem;color:var(--tui-text-primary);background-color:var(--tui-background-base);overflow:hidden;pointer-events:auto}.t-wrapper.t-wrapper_transparent{background-image:linear-gradient(45deg,var(--tui-background-base-alt) 25%,transparent 25%),linear-gradient(-45deg,var(--tui-background-base-alt) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--tui-background-base-alt) 75%),linear-gradient(-45deg,transparent 75%,var(--tui-background-base-alt) 75%);background-size:1.25rem 1.25rem;background-position:0 0,0 .625rem,.625rem -.625rem,-.625rem 0}@media screen and (max-width: 47.9625em){.t-wrapper{min-block-size:auto}}.t-content{flex:1 1 0;min-inline-size:0;padding:1.5rem;box-sizing:border-box;overflow:hidden}@media screen and (max-width: 47.9625em){.t-content{padding:1rem}}.t-form{display:flex;flex-wrap:wrap;align-items:flex-start}.t-input-wrapper{inline-size:100%;margin-block-end:.5rem}.t-expand{inline-size:100%}.t-value{flex:1;background:var(--tui-background-neutral-1);padding:.75rem;border-radius:.25rem}.t-mode{inline-size:12.5rem}.t-select{max-inline-size:15rem}.t-resizer{position:relative;display:flex;box-shadow:var(--tui-shadow-medium);inline-size:3.5rem;min-block-size:inherit;align-items:center;justify-content:center;flex-shrink:0;border-inline-start:1px solid var(--tui-border-normal);outline:none;background:var(--tui-background-base);color:var(--tui-text-primary)}.t-resizer:before,.t-resizer:after{content:\"\";position:absolute;top:.75rem;left:50%;bottom:calc(50% + 1rem);inline-size:1px;background:var(--tui-border-normal);box-shadow:-.25rem 0 var(--tui-border-normal);transform:translateZ(0)}.t-resizer:after{bottom:.75rem;top:calc(50% + 1rem)}@media screen and (max-width: 47.9625em){.t-resizer{display:none}}.t-resizer-text{position:relative;z-index:1;font:var(--tui-font-text-s);padding:.75rem;background:var(--tui-background-base)}.wrapper_light .t-resizer-text{background:#3e464e}.t-group,.t-checkbox{display:flex;align-items:center;margin-inline-start:.75rem}.t-button,.t-form-controls{margin-block-start:.75rem}@supports (position: sticky){@media screen and (min-height: 37.5rem){:host._sticky{position:sticky;top:4.625rem;z-index:2}}}\n"] }]
-        }], propDecorators: { resizable: [{
-                type: ViewChild,
-                args: [TuiResizable, { static: true }]
-            }], content: [{
-                type: ViewChild,
-                args: ['content', { static: true }]
-            }], resizer: [{
-                type: ViewChild,
-                args: ['resizer', { static: true }]
-            }], template: [{
-                type: ContentChild,
-                args: [TemplateRef]
-            }], control: [{
-                type: Input
-            }], sticky: [{
-                type: Input
-            }], updateUrl: [] } });
-
-class TuiDocTab {
-    constructor() {
-        this.src = '';
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiDocTab, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiDocTab, isStandalone: true, selector: "tui-doc-tab", inputs: { src: "src" }, ngImport: i0, template: "<div class=\"t-tab\">\n    <img\n        alt=\"Documentation tab icon\"\n        class=\"t-icon\"\n        [src]=\"src\"\n    />\n    <ng-content />\n</div>\n", styles: [".t-tab{display:flex;align-items:center;justify-content:center;padding:0 .5rem;gap:.5rem;color:var(--tui-text-primary)}.t-tab .t-icon{inline-size:1rem;block-size:1rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiDocTab, decorators: [{
-            type: Component,
-            args: [{ standalone: true, selector: 'tui-doc-tab', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"t-tab\">\n    <img\n        alt=\"Documentation tab icon\"\n        class=\"t-icon\"\n        [src]=\"src\"\n    />\n    <ng-content />\n</div>\n", styles: [".t-tab{display:flex;align-items:center;justify-content:center;padding:0 .5rem;gap:.5rem;color:var(--tui-text-primary)}.t-tab .t-icon{inline-size:1rem;block-size:1rem}\n"] }]
-        }], propDecorators: { src: [{
-                type: Input
-            }] } });
-
-const SERIALIZED_SUFFIX = '$';
-// @bad TODO: refactor output and value sync
-class TuiDocDocumentationPropertyConnector {
-    constructor() {
-        this.locationRef = inject(Location);
-        this.activatedRoute = inject(ActivatedRoute);
-        this.urlSerializer = inject(UrlSerializer);
-        this.urlStateHandler = inject(TUI_DOC_URL_STATE_HANDLER);
-        this.alerts = inject(TuiAlertService);
-        this.documentationPropertyName = '';
-        this.documentationPropertyMode = null;
-        this.documentationPropertyType = '';
-        this.documentationPropertyDeprecated = false;
-        this.documentationPropertyValues = null;
-        this.documentationPropertyValueChange = new EventEmitter();
-        this.changed$ = new Subject();
-        this.emits = signal(1);
-        this.template = inject(TemplateRef);
-    }
-    get attrName() {
-        switch (this.documentationPropertyMode) {
-            case 'input':
-                return `[${this.documentationPropertyName}]`;
-            case 'input-output':
-                return `[(${this.documentationPropertyName})]`;
-            case 'output':
-                return `(${this.documentationPropertyName})`;
-            default:
-                return this.documentationPropertyName;
-        }
-    }
-    get shouldShowValues() {
-        return this.documentationPropertyMode !== 'output';
-    }
-    get hasItems() {
-        return !!this.documentationPropertyValues;
-    }
-    ngOnInit() {
-        this.parseParams(this.activatedRoute.snapshot.queryParams);
-    }
-    ngOnChanges() {
-        this.changed$.next();
-    }
-    onValueChange(value) {
-        this.documentationPropertyValue = value;
-        this.documentationPropertyValueChange.emit(value);
-        this.setQueryParam(value);
-    }
-    emitEvent(event) {
-        // For more convenient debugging
-        console.info(this.attrName, event);
-        this.emits.update((x) => ++x);
-        let content;
-        if (event !== undefined) {
-            content = tuiInspectAny(event, 2);
-        }
-        this.alerts.open(content, { label: this.attrName }).subscribe();
-    }
-    parseParams(params) {
-        const propertyValue = params[this.documentationPropertyName];
-        const propertyValueWithSuffix = params[`${this.documentationPropertyName}${SERIALIZED_SUFFIX}`];
-        if (!propertyValue && !propertyValueWithSuffix) {
-            return;
-        }
-        let value = !!propertyValueWithSuffix && this.documentationPropertyValues
-            ? this.documentationPropertyValues[propertyValueWithSuffix]
-            : tuiCoerceValue(propertyValue);
-        if (this.documentationPropertyType === 'string' && tuiIsNumber(value)) {
-            value = value.toString();
-        }
-        this.onValueChange(value);
-    }
-    setQueryParam(value) {
-        const tree = this.urlSerializer.parse(this.locationRef.path());
-        const isValueAvailableByKey = value instanceof Object;
-        const name = this.documentationPropertyName;
-        const nameWithSuffix = `${name}${SERIALIZED_SUFFIX}`;
-        const computedValue = isValueAvailableByKey && this.documentationPropertyValues
-            ? this.documentationPropertyValues.indexOf(value)
-            : value;
-        tree.queryParams = tuiCleanObject({
-            ...tree.queryParams,
-            /**
-             * Caretaker note: reset previous conflicted param in route
-             * issue: https://github.com/taiga-family/taiga-ui/issues/9764
-             */
-            ...(isValueAvailableByKey
-                ? {
-                    [nameWithSuffix]: computedValue,
-                    [name]: undefined,
-                }
-                : {
-                    [nameWithSuffix]: undefined,
-                    [name]: computedValue,
-                }),
-        });
-        this.locationRef.go(this.urlStateHandler(tree));
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiDocDocumentationPropertyConnector, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: TuiDocDocumentationPropertyConnector, isStandalone: true, selector: "ng-template[documentationPropertyName]", inputs: { documentationPropertyName: "documentationPropertyName", documentationPropertyMode: "documentationPropertyMode", documentationPropertyType: "documentationPropertyType", documentationPropertyValue: "documentationPropertyValue", documentationPropertyDeprecated: "documentationPropertyDeprecated", documentationPropertyValues: "documentationPropertyValues" }, outputs: { documentationPropertyValueChange: "documentationPropertyValueChange" }, exportAs: ["documentationProperty"], usesOnChanges: true, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiDocDocumentationPropertyConnector, decorators: [{
-            type: Directive,
-            args: [{
-                    standalone: true,
-                    selector: 'ng-template[documentationPropertyName]',
-                    exportAs: 'documentationProperty',
-                }]
-        }], propDecorators: { documentationPropertyName: [{
-                type: Input
-            }], documentationPropertyMode: [{
-                type: Input
-            }], documentationPropertyType: [{
-                type: Input
-            }], documentationPropertyValue: [{
-                type: Input
-            }], documentationPropertyDeprecated: [{
-                type: Input
-            }], documentationPropertyValues: [{
-                type: Input
-            }], documentationPropertyValueChange: [{
-                type: Output
-            }] } });
-
-class TuiShowCleanerPipe {
-    transform(type) {
-        return type.includes('null');
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiShowCleanerPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: TuiShowCleanerPipe, isStandalone: true, name: "tuiShowCleanerPipe" }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiShowCleanerPipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    standalone: true,
-                    name: 'tuiShowCleanerPipe',
-                }]
+                    }, 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=\"@tui.grip-vertical\" />\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-font-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 :host-context([tuiTheme=\"dark\"]){background:var(--tui-background-elevation-2)}.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;top:4.625rem;z-index:2}}\n"] }]
         }] });
 
-class TuiIsOptionalPipe {
-    transform(name) {
-        return name.includes('?');
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiIsOptionalPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: TuiIsOptionalPipe, isStandalone: true, name: "tuiIsOptionalPipe" }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiIsOptionalPipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    standalone: true,
-                    name: 'tuiIsOptionalPipe',
-                }]
-        }] });
-
-class TuiStripOptionalPipe {
-    transform(name) {
-        return name.replace('?', '');
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiStripOptionalPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: TuiStripOptionalPipe, isStandalone: true, name: "tuiStripOptionalPipe" }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiStripOptionalPipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    standalone: true,
-                    name: 'tuiStripOptionalPipe',
-                }]
-        }] });
-
-// @bad TODO subscribe propertiesConnectors changes
-// @bad TODO refactor to make more flexible
-class TuiDocDocumentation {
+class TuiDocTab {
     constructor() {
-        this.cdr = inject(ChangeDetectorRef);
-        this.destroyRef = inject(DestroyRef);
-        this.propertiesConnectors = EMPTY_QUERY;
-        this.texts = inject(TUI_DOC_DOCUMENTATION_TEXTS);
-        this.excludedProperties = inject(TUI_DOC_EXCLUDED_PROPERTIES);
-        this.activeItemIndex = 0;
-        this.heading = '';
-        this.showValues = true;
-        this.isAPI = false;
-        this.matcher = (item, exclusions) => !exclusions.has(item.documentationPropertyName);
-    }
-    ngAfterContentInit() {
-        tuiQueryListChanges(this.propertiesConnectors)
-            .pipe(switchMap((items) => merge(...items.map(({ changed$ }) => changed$))), tuiWatch(this.cdr), takeUntilDestroyed(this.destroyRef))
-            .subscribe();
+        this.src = input('');
     }
-    get type() {
-        return this.isAPI ? this.texts[0] : this.texts[1];
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiDocDocumentation, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiDocDocumentation, isStandalone: true, selector: "tui-doc-documentation", inputs: { heading: "heading", showValues: "showValues", isAPI: "isAPI" }, providers: [tuiScrollbarOptionsProvider({ mode: 'hover' })], queries: [{ propertyName: "propertiesConnectors", predicate: TuiDocDocumentationPropertyConnector }], ngImport: i0, template: "<h1\n    *ngIf=\"heading\"\n    class=\"t-heading\"\n>\n    {{ heading }}\n</h1>\n<ng-content />\n<ng-container *ngIf=\"propertiesConnectors | tuiToArray | tuiFilter: matcher : excludedProperties as properties\">\n    <table\n        *ngIf=\"properties.length\"\n        class=\"t-table\"\n    >\n        <tbody>\n            <tr class=\"t-row t-row_header\">\n                <th class=\"t-th t-cell t-cell_prop\">{{ texts[2] }}</th>\n                <th class=\"t-th\">{{ type }}</th>\n                <th\n                    *ngIf=\"showValues && !isAPI\"\n                    class=\"t-th t-cell t-th_value\"\n                >\n                    {{ texts[3] }}\n                </th>\n            </tr>\n            <tr\n                *ngFor=\"let propertyConnector of properties\"\n                class=\"t-row\"\n                [class.t-deprecated]=\"propertyConnector.documentationPropertyDeprecated\"\n            >\n                <td class=\"t-cell t-no-overflow\">\n                    <div\n                        automation-id=\"tui-documentation__property-name\"\n                        class=\"t-property t-additional-info\"\n                    >\n                        <code\n                            *ngIf=\"propertyConnector.attrName\"\n                            class=\"t-property-code\"\n                            [style.color]=\"'var(--tui-background-accent-2-pressed)'\"\n                        >\n                            {{ propertyConnector.attrName | tuiStripOptionalPipe }}\n                        </code>\n                        <tui-badge\n                            *ngIf=\"propertyConnector.attrName | tuiIsOptionalPipe\"\n                            appearance=\"neutral\"\n                            size=\"s\"\n                        >\n                            Optional\n                        </tui-badge>\n                        <tui-badge\n                            *ngIf=\"propertyConnector.documentationPropertyDeprecated\"\n                            appearance=\"negative\"\n                            size=\"s\"\n                        >\n                            Deprecated\n                        </tui-badge>\n                    </div>\n                    <ng-container [ngTemplateOutlet]=\"propertyConnector.template\" />\n                </td>\n                <td class=\"t-cell t-no-overflow\">\n                    <span class=\"type\">\n                        <code class=\"t-code-type\">\n                            <ng-container\n                                *ngFor=\"\n                                    let item of propertyConnector.documentationPropertyType | tuiDocTypeReference;\n                                    let last = last\n                                \"\n                            >\n                                <a\n                                    *ngIf=\"item.reference; else default\"\n                                    target=\"_blank\"\n                                    class=\"t-code-reference\"\n                                    [attr.href]=\"item.reference\"\n                                >\n                                    {{ item.type }}\n                                </a>\n                                <ng-template #default>\n                                    {{ item.type }}\n                                </ng-template>\n                                <span *ngIf=\"!last\">&nbsp;|&nbsp;</span>\n                            </ng-container>\n                        </code>\n                    </span>\n                </td>\n                <td\n                    *ngIf=\"showValues\"\n                    class=\"t-cell t-cell_value\"\n                >\n                    <ng-container *ngIf=\"propertyConnector.shouldShowValues; else elseEmitter\">\n                        <tui-select\n                            *ngIf=\"propertyConnector.hasItems; else noItems\"\n                            tuiDropdownLimitWidth=\"min\"\n                            tuiTextfieldSize=\"m\"\n                            [nativeId]=\"propertyConnector.attrName\"\n                            [ngModel]=\"propertyConnector.documentationPropertyValue\"\n                            [tuiTextfieldCleaner]=\"propertyConnector.documentationPropertyType | tuiShowCleanerPipe\"\n                            [tuiTextfieldLabelOutside]=\"true\"\n                            [valueContent]=\"selectContent\"\n                            (ngModelChange)=\"propertyConnector.onValueChange($event)\"\n                        >\n                            <code class=\"t-exception\">null</code>\n                            <tui-data-list-wrapper\n                                *tuiDataList\n                                class=\"t-data-list\"\n                                [itemContent]=\"selectContent\"\n                                [items]=\"propertyConnector.documentationPropertyValues\"\n                            />\n                        </tui-select>\n                        <ng-template\n                            #selectContent\n                            let-data\n                        >\n                            <code>{{ data | tuiInspectAny }}</code>\n                        </ng-template>\n\n                        <ng-template #noItems>\n                            <ng-container [ngSwitch]=\"propertyConnector.documentationPropertyType\">\n                                <input\n                                    *ngSwitchCase=\"'boolean'\"\n                                    tuiSwitch\n                                    type=\"checkbox\"\n                                    class=\"t-switch\"\n                                    [id]=\"propertyConnector.attrName\"\n                                    [ngModel]=\"propertyConnector.documentationPropertyValue\"\n                                    [showIcons]=\"true\"\n                                    (ngModelChange)=\"propertyConnector.onValueChange($event)\"\n                                />\n\n                                <tui-textfield\n                                    *ngSwitchCase=\"'string'\"\n                                    tuiTextfieldSize=\"m\"\n                                >\n                                    <input\n                                        tuiTextfield\n                                        [id]=\"propertyConnector.attrName\"\n                                        [ngModel]=\"propertyConnector.documentationPropertyValue || ''\"\n                                        (ngModelChange)=\"propertyConnector.onValueChange($event)\"\n                                    />\n                                </tui-textfield>\n\n                                <tui-textfield\n                                    *ngSwitchCase=\"'number'\"\n                                    tuiTextfieldSize=\"m\"\n                                >\n                                    <input\n                                        tuiInputNumber\n                                        [id]=\"propertyConnector.attrName\"\n                                        [ngModel]=\"propertyConnector.documentationPropertyValue\"\n                                        [step]=\"1\"\n                                        (ngModelChange)=\"propertyConnector.onValueChange($event || 0)\"\n                                    />\n                                </tui-textfield>\n                            </ng-container>\n                        </ng-template>\n                    </ng-container>\n\n                    <ng-template #elseEmitter>\n                        <tui-notification\n                            class=\"t-output\"\n                            [@emitEvent]=\"propertyConnector.emits()\"\n                        >\n                            Emit!\n                        </tui-notification>\n                    </ng-template>\n                </td>\n            </tr>\n        </tbody>\n    </table>\n</ng-container>\n", styles: [":host{display:block;min-inline-size:100%}.t-table{inline-size:100%;table-layout:fixed}.t-row:not(:last-child){border-block-end:1px solid var(--tui-border-normal)}@media screen and (max-width: 47.9625em){.t-row{display:flex;flex-wrap:wrap}.t-row_header{display:none}}.t-cell{padding:1rem 1rem .875rem}.t-cell:first-child{padding-inline-start:0}.t-cell:last-child{padding-inline-end:0}.t-cell_prop{inline-size:40%}.t-cell_value{text-align:end}@media screen and (max-width: 47.9625em){.t-cell{inline-size:100%;block-size:auto;padding:.5rem 0;text-align:start}}.t-th{padding:.5rem 1rem;color:var(--tui-text-secondary);font-weight:400;text-align:start}.t-th_value{max-inline-size:20rem;text-align:end}@media screen and (max-width: 47.9625em){.t-th_value{inline-size:9.375rem}}.t-property{font:var(--tui-font-text-m);margin-block-end:.25rem;font-family:monospace;color:#8f75d1}@media screen and (max-width: 47.9625em){.t-property{padding:.5rem 0}}.t-type{font-family:monospace}.t-deprecated .t-property-code{text-decoration:line-through}.t-deprecated-label{margin-inline-end:.125rem;color:var(--tui-text-negative);font-size:.75rem}.t-additional-info{display:flex;gap:.3125rem;align-items:center}.t-exception{display:block;inline-size:-webkit-max-content;inline-size:max-content}.t-output{text-align:start;opacity:0}.t-heading{font:var(--tui-font-heading-4)}.t-code-type{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start}.t-code-reference{display:inline-flex;color:var(--tui-text-action);text-decoration:none;align-items:center;justify-content:center;gap:.1875rem}.t-code-reference:after{content:\"\";font-size:1rem;inline-size:1rem;block-size:1rem;background:currentColor;-webkit-mask:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"1rem\" height=\"1rem\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6\"></path><polyline points=\"15 3 21 3 21 9\"></polyline><line x1=\"10\" y1=\"14\" x2=\"21\" y2=\"3\"></line></svg>') center / 100%;mask:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"1rem\" height=\"1rem\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6\"></path><polyline points=\"15 3 21 3 21 9\"></polyline><line x1=\"10\" y1=\"14\" x2=\"21\" y2=\"3\"></line></svg>') center / 100%}.t-switch{display:block}@media not screen and (max-width: 47.9625em){.t-switch{margin-inline-start:auto}}.t-data-list{overflow-wrap:anywhere}@media not screen and (max-width: 47.9625em){.t-data-list{max-inline-size:22.5rem}}.t-no-overflow{overflow:hidden!important}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: TuiBadge, selector: "tui-badge,[tuiBadge]", inputs: ["size"] }, { kind: "component", type: i2.TuiDataListWrapperComponent, selector: "tui-data-list-wrapper:not([labels]), tui-data-list-wrapper:not([labels])[new]", inputs: ["items", "disabledItemHandler", "emptyContent", "size", "itemContent"], outputs: ["itemClick"] }, { kind: "directive", type: i3$1.TuiDataListDirective, selector: "ng-template[tuiDataList]" }, { kind: "pipe", type: TuiDocTypeReferencePipe, name: "tuiDocTypeReference" }, { kind: "directive", type: i4$2.TuiDropdownOptionsDirective, selector: "[tuiDropdownAlign], [tuiDropdownAppearance], [tuiDropdownDirection], [tuiDropdownLimitWidth], [tuiDropdownMinHeight], [tuiDropdownMaxHeight], [tuiDropdownOffset]", inputs: ["tuiDropdownAlign", "tuiDropdownAppearance", "tuiDropdownDirection", "tuiDropdownLimitWidth", "tuiDropdownMinHeight", "tuiDropdownMaxHeight", "tuiDropdownOffset"] }, { kind: "pipe", type: TuiFilterPipe, name: "tuiFilter" }, { kind: "directive", type: i3.TuiInputNumberDirective, selector: "input[tuiInputNumber]", inputs: ["min", "max", "prefix", "postfix"] }, { kind: "component", type: i3.TuiInputNumberStep, selector: "input[tuiInputNumber][step]", inputs: ["step"] }, { kind: "pipe", type: TuiInspectPipe, name: "tuiInspectAny" }, { kind: "pipe", type: TuiIsOptionalPipe, name: "tuiIsOptionalPipe" }, { kind: "directive", type: TuiNotification, selector: "tui-notification,a[tuiNotification],button[tuiNotification]", inputs: ["appearance", "icon", "size"] }, { kind: "ngmodule", type: TuiSelectModule }, { kind: "component", type: i5.TuiSelectComponent, selector: "tui-select", inputs: ["stringify", "identityMatcher", "valueContent"] }, { kind: "directive", type: i5.TuiSelectDirective, selector: "tui-select" }, { kind: "pipe", type: TuiShowCleanerPipe, name: "tuiShowCleanerPipe" }, { kind: "pipe", type: TuiStripOptionalPipe, name: "tuiStripOptionalPipe" }, { kind: "component", type: TuiSwitch, selector: "input[type=\"checkbox\"][tuiSwitch]", inputs: ["size", "showIcons"] }, { kind: "component", type: i4.TuiTextfieldComponent, selector: "tui-textfield:not([multi])" }, { kind: "directive", type: i4.TuiTextfieldDirective, selector: "input[tuiTextfield]:not([tuiInputCard]):not([tuiInputExpire]):not([tuiInputCVC])" }, { kind: "directive", type: i4.TuiTextfieldOptionsDirective, selector: "[tuiTextfieldAppearance],[tuiTextfieldSize],[tuiTextfieldCleaner]", inputs: ["tuiTextfieldAppearance", "tuiTextfieldSize", "tuiTextfieldCleaner"] }, { kind: "ngmodule", type: TuiTextfieldControllerModule }, { kind: "directive", type: i8.TuiTextfieldCleanerDirective, selector: "[tuiTextfieldCleaner]", inputs: ["tuiTextfieldCleaner"] }, { kind: "directive", type: i8.TuiTextfieldLabelOutsideDirective, selector: "[tuiTextfieldLabelOutside]", inputs: ["tuiTextfieldLabelOutside"] }, { kind: "directive", type: i8.TuiTextfieldSizeDirective, selector: "[tuiTextfieldSize]", inputs: ["tuiTextfieldSize"] }, { kind: "pipe", type: TuiToArrayPipe, name: "tuiToArray" }], animations: [
-            trigger('emitEvent', [
-                transition(':increment', [style({ opacity: 1 }), animate('500ms ease-in')]),
-            ]),
-        ], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TuiDocTab, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.18", type: TuiDocTab, isStandalone: true, selector: "tui-doc-tab", inputs: { src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"t-tab\">\n    <img\n        alt=\"Documentation tab icon\"\n        class=\"t-icon\"\n        [src]=\"src()\"\n    />\n    <ng-content />\n</div>\n", styles: [".t-tab{display:flex;align-items:center;justify-content:center;padding:0 .5rem;gap:.5rem;color:var(--tui-text-primary)}.t-tab .t-icon{inline-size:1rem;block-size:1rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiDocDocumentation, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TuiDocTab, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'tui-doc-documentation', imports: [
-                        FormsModule,
-                        NgForOf,
-                        NgIf,
-                        NgSwitch,
-                        NgSwitchCase,
-                        NgTemplateOutlet,
-                        TuiBadge,
-                        TuiDataListWrapper,
-                        TuiDocTypeReferencePipe,
-                        TuiDropdown,
-                        TuiFilterPipe,
-                        TuiInputNumber,
-                        TuiInspectPipe,
-                        TuiIsOptionalPipe,
-                        TuiNotification,
-                        TuiSelectModule,
-                        TuiShowCleanerPipe,
-                        TuiStripOptionalPipe,
-                        TuiSwitch,
-                        TuiTextfield,
-                        TuiTextfieldControllerModule,
-                        TuiToArrayPipe,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, providers: [tuiScrollbarOptionsProvider({ mode: 'hover' })], animations: [
-                        trigger('emitEvent', [
-                            transition(':increment', [style({ opacity: 1 }), animate('500ms ease-in')]),
-                        ]),
-                    ], template: "<h1\n    *ngIf=\"heading\"\n    class=\"t-heading\"\n>\n    {{ heading }}\n</h1>\n<ng-content />\n<ng-container *ngIf=\"propertiesConnectors | tuiToArray | tuiFilter: matcher : excludedProperties as properties\">\n    <table\n        *ngIf=\"properties.length\"\n        class=\"t-table\"\n    >\n        <tbody>\n            <tr class=\"t-row t-row_header\">\n                <th class=\"t-th t-cell t-cell_prop\">{{ texts[2] }}</th>\n                <th class=\"t-th\">{{ type }}</th>\n                <th\n                    *ngIf=\"showValues && !isAPI\"\n                    class=\"t-th t-cell t-th_value\"\n                >\n                    {{ texts[3] }}\n                </th>\n            </tr>\n            <tr\n                *ngFor=\"let propertyConnector of properties\"\n                class=\"t-row\"\n                [class.t-deprecated]=\"propertyConnector.documentationPropertyDeprecated\"\n            >\n                <td class=\"t-cell t-no-overflow\">\n                    <div\n                        automation-id=\"tui-documentation__property-name\"\n                        class=\"t-property t-additional-info\"\n                    >\n                        <code\n                            *ngIf=\"propertyConnector.attrName\"\n                            class=\"t-property-code\"\n                            [style.color]=\"'var(--tui-background-accent-2-pressed)'\"\n                        >\n                            {{ propertyConnector.attrName | tuiStripOptionalPipe }}\n                        </code>\n                        <tui-badge\n                            *ngIf=\"propertyConnector.attrName | tuiIsOptionalPipe\"\n                            appearance=\"neutral\"\n                            size=\"s\"\n                        >\n                            Optional\n                        </tui-badge>\n                        <tui-badge\n                            *ngIf=\"propertyConnector.documentationPropertyDeprecated\"\n                            appearance=\"negative\"\n                            size=\"s\"\n                        >\n                            Deprecated\n                        </tui-badge>\n                    </div>\n                    <ng-container [ngTemplateOutlet]=\"propertyConnector.template\" />\n                </td>\n                <td class=\"t-cell t-no-overflow\">\n                    <span class=\"type\">\n                        <code class=\"t-code-type\">\n                            <ng-container\n                                *ngFor=\"\n                                    let item of propertyConnector.documentationPropertyType | tuiDocTypeReference;\n                                    let last = last\n                                \"\n                            >\n                                <a\n                                    *ngIf=\"item.reference; else default\"\n                                    target=\"_blank\"\n                                    class=\"t-code-reference\"\n                                    [attr.href]=\"item.reference\"\n                                >\n                                    {{ item.type }}\n                                </a>\n                                <ng-template #default>\n                                    {{ item.type }}\n                                </ng-template>\n                                <span *ngIf=\"!last\">&nbsp;|&nbsp;</span>\n                            </ng-container>\n                        </code>\n                    </span>\n                </td>\n                <td\n                    *ngIf=\"showValues\"\n                    class=\"t-cell t-cell_value\"\n                >\n                    <ng-container *ngIf=\"propertyConnector.shouldShowValues; else elseEmitter\">\n                        <tui-select\n                            *ngIf=\"propertyConnector.hasItems; else noItems\"\n                            tuiDropdownLimitWidth=\"min\"\n                            tuiTextfieldSize=\"m\"\n                            [nativeId]=\"propertyConnector.attrName\"\n                            [ngModel]=\"propertyConnector.documentationPropertyValue\"\n                            [tuiTextfieldCleaner]=\"propertyConnector.documentationPropertyType | tuiShowCleanerPipe\"\n                            [tuiTextfieldLabelOutside]=\"true\"\n                            [valueContent]=\"selectContent\"\n                            (ngModelChange)=\"propertyConnector.onValueChange($event)\"\n                        >\n                            <code class=\"t-exception\">null</code>\n                            <tui-data-list-wrapper\n                                *tuiDataList\n                                class=\"t-data-list\"\n                                [itemContent]=\"selectContent\"\n                                [items]=\"propertyConnector.documentationPropertyValues\"\n                            />\n                        </tui-select>\n                        <ng-template\n                            #selectContent\n                            let-data\n                        >\n                            <code>{{ data | tuiInspectAny }}</code>\n                        </ng-template>\n\n                        <ng-template #noItems>\n                            <ng-container [ngSwitch]=\"propertyConnector.documentationPropertyType\">\n                                <input\n                                    *ngSwitchCase=\"'boolean'\"\n                                    tuiSwitch\n                                    type=\"checkbox\"\n                                    class=\"t-switch\"\n                                    [id]=\"propertyConnector.attrName\"\n                                    [ngModel]=\"propertyConnector.documentationPropertyValue\"\n                                    [showIcons]=\"true\"\n                                    (ngModelChange)=\"propertyConnector.onValueChange($event)\"\n                                />\n\n                                <tui-textfield\n                                    *ngSwitchCase=\"'string'\"\n                                    tuiTextfieldSize=\"m\"\n                                >\n                                    <input\n                                        tuiTextfield\n                                        [id]=\"propertyConnector.attrName\"\n                                        [ngModel]=\"propertyConnector.documentationPropertyValue || ''\"\n                                        (ngModelChange)=\"propertyConnector.onValueChange($event)\"\n                                    />\n                                </tui-textfield>\n\n                                <tui-textfield\n                                    *ngSwitchCase=\"'number'\"\n                                    tuiTextfieldSize=\"m\"\n                                >\n                                    <input\n                                        tuiInputNumber\n                                        [id]=\"propertyConnector.attrName\"\n                                        [ngModel]=\"propertyConnector.documentationPropertyValue\"\n                                        [step]=\"1\"\n                                        (ngModelChange)=\"propertyConnector.onValueChange($event || 0)\"\n                                    />\n                                </tui-textfield>\n                            </ng-container>\n                        </ng-template>\n                    </ng-container>\n\n                    <ng-template #elseEmitter>\n                        <tui-notification\n                            class=\"t-output\"\n                            [@emitEvent]=\"propertyConnector.emits()\"\n                        >\n                            Emit!\n                        </tui-notification>\n                    </ng-template>\n                </td>\n            </tr>\n        </tbody>\n    </table>\n</ng-container>\n", styles: [":host{display:block;min-inline-size:100%}.t-table{inline-size:100%;table-layout:fixed}.t-row:not(:last-child){border-block-end:1px solid var(--tui-border-normal)}@media screen and (max-width: 47.9625em){.t-row{display:flex;flex-wrap:wrap}.t-row_header{display:none}}.t-cell{padding:1rem 1rem .875rem}.t-cell:first-child{padding-inline-start:0}.t-cell:last-child{padding-inline-end:0}.t-cell_prop{inline-size:40%}.t-cell_value{text-align:end}@media screen and (max-width: 47.9625em){.t-cell{inline-size:100%;block-size:auto;padding:.5rem 0;text-align:start}}.t-th{padding:.5rem 1rem;color:var(--tui-text-secondary);font-weight:400;text-align:start}.t-th_value{max-inline-size:20rem;text-align:end}@media screen and (max-width: 47.9625em){.t-th_value{inline-size:9.375rem}}.t-property{font:var(--tui-font-text-m);margin-block-end:.25rem;font-family:monospace;color:#8f75d1}@media screen and (max-width: 47.9625em){.t-property{padding:.5rem 0}}.t-type{font-family:monospace}.t-deprecated .t-property-code{text-decoration:line-through}.t-deprecated-label{margin-inline-end:.125rem;color:var(--tui-text-negative);font-size:.75rem}.t-additional-info{display:flex;gap:.3125rem;align-items:center}.t-exception{display:block;inline-size:-webkit-max-content;inline-size:max-content}.t-output{text-align:start;opacity:0}.t-heading{font:var(--tui-font-heading-4)}.t-code-type{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start}.t-code-reference{display:inline-flex;color:var(--tui-text-action);text-decoration:none;align-items:center;justify-content:center;gap:.1875rem}.t-code-reference:after{content:\"\";font-size:1rem;inline-size:1rem;block-size:1rem;background:currentColor;-webkit-mask:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"1rem\" height=\"1rem\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6\"></path><polyline points=\"15 3 21 3 21 9\"></polyline><line x1=\"10\" y1=\"14\" x2=\"21\" y2=\"3\"></line></svg>') center / 100%;mask:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"1rem\" height=\"1rem\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6\"></path><polyline points=\"15 3 21 3 21 9\"></polyline><line x1=\"10\" y1=\"14\" x2=\"21\" y2=\"3\"></line></svg>') center / 100%}.t-switch{display:block}@media not screen and (max-width: 47.9625em){.t-switch{margin-inline-start:auto}}.t-data-list{overflow-wrap:anywhere}@media not screen and (max-width: 47.9625em){.t-data-list{max-inline-size:22.5rem}}.t-no-overflow{overflow:hidden!important}\n"] }]
-        }], propDecorators: { propertiesConnectors: [{
-                type: ContentChildren,
-                args: [TuiDocDocumentationPropertyConnector]
-            }], heading: [{
-                type: Input
-            }], showValues: [{
-                type: Input
-            }], isAPI: [{
-                type: Input
-            }] } });
-
-class TuiGetColorPipe {
-    transform(color) {
-        if (color.length === 4) {
-            return color
-                .split('')
-                .reduce((result, current) => [...result, current, current], [])
-                .join('')
-                .replace('#', '');
-        }
-        if (color.startsWith('#')) {
-            return color;
-        }
-        if (color === 'transparent') {
-            return '#000000';
-        }
-        const parsed = color
-            .replace('rgb(', '')
-            .replace('rgba(', '')
-            .replace(')', '')
-            .replace(' ', '')
-            .split(',')
-            .map((v) => Number.parseInt(v, 10));
-        return tuiRgbToHex(...parsed);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiGetColorPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: TuiGetColorPipe, isStandalone: true, name: "tuiGetColorPipe" }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiGetColorPipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    standalone: true,
-                    name: 'tuiGetColorPipe',
-                }]
-        }] });
-
-class TuiGetOpacityPipe {
-    transform(color) {
-        if (color.startsWith('#') || color.startsWith('rgb(')) {
-            return 100;
-        }
-        if (color === 'transparent') {
-            return 0;
-        }
-        const lastComma = color.lastIndexOf(',');
-        const parsed = color
-            .slice(lastComma)
-            .replace(')', '')
-            .replace(' ', '')
-            .replace(',', '');
-        return Math.round(Number.parseFloat(parsed) * 100);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiGetOpacityPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: TuiGetOpacityPipe, isStandalone: true, name: "tuiGetOpacity" }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiGetOpacityPipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    standalone: true,
-                    name: 'tuiGetOpacity',
-                }]
-        }] });
-
-class TuiIsPrimitivePolymorpheusContentPipe {
-    transform(value) {
-        return tuiIsString(value) || tuiIsNumber(value);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiIsPrimitivePolymorpheusContentPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: TuiIsPrimitivePolymorpheusContentPipe, isStandalone: true, name: "tuiIsPrimitivePolymorpheusContentPipe" }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiIsPrimitivePolymorpheusContentPipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    standalone: true,
-                    name: 'tuiIsPrimitivePolymorpheusContentPipe',
-                }]
+            args: [{ selector: 'tui-doc-tab', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"t-tab\">\n    <img\n        alt=\"Documentation tab icon\"\n        class=\"t-icon\"\n        [src]=\"src()\"\n    />\n    <ng-content />\n</div>\n", styles: [".t-tab{display:flex;align-items:center;justify-content:center;padding:0 .5rem;gap:.5rem;color:var(--tui-text-primary)}.t-tab .t-icon{inline-size:1rem;block-size:1rem}\n"] }]
         }] });
 
 const TUI_DOC_EXAMPLE_DEFAULT_OPTIONS = {
@@ -793,37 +449,29 @@ const TUI_DOC_EXAMPLE_DEFAULT_OPTIONS = {
 /**
  * Default parameters for DocExample component
  */
-const TUI_DOC_EXAMPLE_OPTIONS = new InjectionToken(ngDevMode ? 'TUI_DOC_EXAMPLE_OPTIONS' : '', {
-    factory: () => TUI_DOC_EXAMPLE_DEFAULT_OPTIONS,
-});
-function tuiDocExampleOptionsProvider(options) {
-    return tuiProvideOptions(TUI_DOC_EXAMPLE_OPTIONS, options, TUI_DOC_EXAMPLE_DEFAULT_OPTIONS);
-}
+const [TUI_DOC_EXAMPLE_OPTIONS, tuiDocExampleOptionsProvider] = tuiCreateOptions(TUI_DOC_EXAMPLE_DEFAULT_OPTIONS);
 
 class TuiDocExampleGetTabsPipe {
     transform(content, defaultTab) {
         return [defaultTab, ...Object.keys(content).filter((tab) => content[tab])];
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiDocExampleGetTabsPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: TuiDocExampleGetTabsPipe, isStandalone: true, name: "tuiDocExampleGetTabs" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TuiDocExampleGetTabsPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.18", ngImport: i0, type: TuiDocExampleGetTabsPipe, isStandalone: true, name: "tuiDocExampleGetTabs" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiDocExampleGetTabsPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TuiDocExampleGetTabsPipe, decorators: [{
             type: Pipe,
-            args: [{
-                    standalone: true,
-                    name: 'tuiDocExampleGetTabs',
-                }]
+            args: [{ name: 'tuiDocExampleGetTabs' }]
         }] });
 
 class TuiDocExample {
     constructor() {
+        this.doc = inject(DOCUMENT);
         this.clipboard = inject(Clipboard);
-        this.alerts = inject(TuiAlertService);
+        this.alerts = inject(TuiNotificationService);
         this.location = inject(WA_LOCATION);
-        this.copyTexts$ = inject(TUI_COPY_TEXTS);
+        this.copyTexts = inject(TUI_COPY_TEXTS);
         this.processContent = inject(TUI_DOC_EXAMPLE_CONTENT_PROCESSOR);
         this.rawLoader$$ = new BehaviorSubject({});
-        this.lazyLoader$$ = new ReplaySubject(1);
         this.fullscreenEnabled = inject(DOCUMENT).fullscreenEnabled;
         this.icons = inject(TUI_DOC_ICONS);
         this.options = inject(TUI_DOC_EXAMPLE_OPTIONS);
@@ -831,26 +479,23 @@ class TuiDocExample {
         this.codeEditor = inject(TUI_DOC_CODE_EDITOR, { optional: true });
         this.codeActions = inject(TUI_DOC_CODE_ACTIONS);
         this.route = inject(ActivatedRoute);
-        this.defaultTabIndex = 0;
-        this.defaultTab = this.texts[this.defaultTabIndex];
-        this.activeItemIndex = this.defaultTabIndex;
+        this.defaultTab = this.texts[0];
+        this.activeItemIndex = 0;
         this.fullscreen = false;
-        this.copy = toSignal(this.copyTexts$.pipe(map(([copy]) => copy)), {
-            initialValue: '',
-        });
+        this.copy = computed(() => this.copyTexts()[0]);
         this.loading = signal(false);
+        this.id = computed(() => tuiToKebab(this.heading()));
         this.processor = toSignal(this.rawLoader$$.pipe(switchMap(tuiRawLoadRecord), map((value) => this.processContent(value))), { initialValue: {} });
-        this.lazyComponent = toSignal(this.lazyLoader$$.pipe(switchAll(), map((module) => new PolymorpheusComponent(module.default))));
-        this.id = null;
-        this.fullsize = inject(TUI_DOC_EXAMPLE_OPTIONS).fullsize;
-        this.componentName = this.location.pathname.slice(1);
+        this.heading = input('');
+        this.description = input();
+        this.fullsize = input(inject(TUI_DOC_EXAMPLE_OPTIONS).fullsize);
+        this.component = input();
+        this.content = input({});
+        this.preview = input(true);
         this.visible = (files) => Boolean(this.codeEditor && this.options.codeEditorVisibilityHandler(files));
     }
-    set content(content) {
-        this.rawLoader$$.next(content);
-    }
-    set component(content) {
-        this.lazyLoader$$.next(content);
+    ngOnChanges() {
+        this.rawLoader$$.next(this.content());
     }
     getTabTitle(fileName) {
         return this.options.tabTitles.get(fileName) || fileName;
@@ -864,48 +509,47 @@ class TuiDocExample {
     edit(files) {
         this.loading.set(true);
         this.codeEditor
-            ?.edit(this.componentName, this.id || '', files)
+            ?.edit(this.location.pathname.slice(1), this.id() || '', files)
             .finally(() => this.loading.set(false));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiDocExample, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiDocExample, isStandalone: true, selector: "tui-doc-example", inputs: { id: "id", heading: "heading", description: "description", fullsize: "fullsize", componentName: "componentName", content: "content", component: "component" }, host: { properties: { "attr.id": "id", "class._fullsize": "fullsize" } }, ngImport: i0, template: "<div class=\"t-title-block\">\n    <h2\n        *ngIf=\"heading\"\n        class=\"t-title\"\n    >\n        <span\n            *polymorpheusOutlet=\"heading as text\"\n            [textContent]=\"text\"\n        ></span>\n    </h2>\n    <a\n        *ngIf=\"id\"\n        routerLink=\".\"\n        routerLinkActive=\"t-link-active\"\n        tuiLink\n        type=\"button\"\n        class=\"t-link\"\n        [attr.title]=\"copy()\"\n        [fragment]=\"id\"\n        [relativeTo]=\"route.firstChild ?? route\"\n        [routerLinkActiveOptions]=\"{matrixParams: 'exact', queryParams: 'exact', paths: 'exact', fragment: 'exact'}\"\n        (click)=\"copyExampleLink($event.currentTarget)\"\n    >\n        #\n    </a>\n</div>\n<h3\n    *ngIf=\"description\"\n    class=\"t-description\"\n>\n    <ng-container *polymorpheusOutlet=\"description as text\">\n        {{ text }}\n    </ng-container>\n</h3>\n\n<div\n    class=\"t-example\"\n    [(tuiFullscreen)]=\"fullscreen\"\n>\n    <ng-container *ngIf=\"processor() | tuiDocExampleGetTabs: defaultTab as tabs\">\n        <div\n            *ngIf=\"tabs.length > 1\"\n            class=\"t-tabs-wrapper\"\n        >\n            <tui-tabs-with-more\n                class=\"t-tabs\"\n                [(activeItemIndex)]=\"activeItemIndex\"\n            >\n                <ng-container *ngFor=\"let tab of tabs\">\n                    <button\n                        *tuiItem\n                        tuiTab\n                        type=\"button\"\n                    >\n                        <ng-container *polymorpheusOutlet=\"getTabTitle(tab) as text\">\n                            {{ text }}\n                        </ng-container>\n                    </button>\n                </ng-container>\n            </tui-tabs-with-more>\n\n            <tui-loader\n                *ngIf=\"processor() | tuiMapper: visible\"\n                size=\"xs\"\n                class=\"t-code-editor\"\n                [overlay]=\"true\"\n                [showLoader]=\"loading()\"\n                (click)=\"edit(processor())\"\n            >\n                <ng-container *ngIf=\"codeEditor?.content as content; else defaultEditContent\">\n                    <ng-container *polymorpheusOutlet=\"content as editContent\">\n                        {{ editContent }}\n                    </ng-container>\n                </ng-container>\n\n                <ng-template #defaultEditContent>\n                    <button\n                        appearance=\"flat\"\n                        size=\"s\"\n                        tuiButton\n                        type=\"button\"\n                    >\n                        Edit on {{ codeEditor!.name }}\n                    </button>\n                </ng-template>\n            </tui-loader>\n\n            <button\n                *ngIf=\"fullscreenEnabled\"\n                appearance=\"flat\"\n                size=\"xs\"\n                tuiIconButton\n                type=\"button\"\n                [iconStart]=\"fullscreen ? icons.shrink : icons.expand\"\n                (click)=\"fullscreen = !fullscreen\"\n            >\n                Fullscreen\n            </button>\n        </div>\n\n        <div\n            *ngFor=\"let tab of tabs; let index = index\"\n            class=\"t-content\"\n        >\n            <section\n                *ngIf=\"index === defaultTabIndex\"\n                automation-id=\"tui-doc-example\"\n                class=\"t-demo\"\n                [style.display]=\"activeItemIndex === index && index === defaultTabIndex ? 'block' : 'none'\"\n            >\n                <ng-content />\n                <ng-container *polymorpheusOutlet=\"lazyComponent() as text\">\n                    {{ text }}\n                </ng-container>\n            </section>\n\n            <tui-doc-code\n                *tuiLet=\"processor()[tabs[index] || 0] || '' as code\"\n                [code]=\"code\"\n                [style.display]=\"activeItemIndex === index && index !== defaultTabIndex ? 'block' : 'none'\"\n            >\n                <ng-container *ngFor=\"let action of codeActions\">\n                    <ng-container *polymorpheusOutlet=\"action as text; context: {$implicit: code}\">\n                        {{ text }}\n                    </ng-container>\n                </ng-container>\n            </tui-doc-code>\n        </div>\n    </ng-container>\n</div>\n", styles: [":host{position:relative;display:block;padding-block-start:3.5rem;clear:inline-end}:host:target{animation:1s tuiShaking}@media screen and (max-width: 47.9625em){:host{padding-block-start:2rem}}.t-title-block{display:flex;flex-direction:row-reverse}.t-title{font:var(--tui-font-heading-5);margin:0 auto .5rem 0}@media screen and (max-width: 47.9625em){.t-title{font:var(--tui-font-heading-6)}}.t-title:hover+.t-link{opacity:1}.t-link{font:var(--tui-font-heading-6);padding-inline-end:.1rem}@media not screen and (max-width: 47.9625em){.t-link{font:var(--tui-font-heading-5);margin-inline-start:-1.6rem}.t-link:not(:hover,:focus-visible):not(.t-link-active){opacity:0}}.t-description{font:var(--tui-font-text-m);font-weight:400;margin:0}.t-title:first-letter,.t-description:first-letter{text-transform:capitalize}.t-example{position:relative;margin-block-start:1.5rem;border:1px solid var(--tui-border-normal);border-radius:var(--tui-radius-m);box-shadow:0 .125rem .1875rem #0000001a;overflow:hidden}@media screen and (max-width: 47.9625em){.t-example{margin-block-start:.75rem}}.t-tabs-wrapper{display:flex;padding:0 .875rem 0 2rem;box-shadow:inset 0 -1px var(--tui-border-normal);justify-content:space-between;align-items:center;gap:.5rem}@media screen and (max-width: 47.9625em){.t-tabs-wrapper{padding:0 .875rem 0 1rem}}.t-tabs{flex-grow:1;box-shadow:none}.t-code-editor{flex-shrink:0;block-size:auto}@media screen and (max-width: 47.9625em){.t-code-editor{font-size:0;inline-size:1.5rem}}.t-demo{position:relative;padding:2rem;max-inline-size:100%;box-sizing:border-box;overflow-x:auto}@media all and (-webkit-min-device-pixel-ratio: 0) and (-webkit-min-device-pixel-ratio: 0),all and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: .001dpcm){.t-demo::-webkit-scrollbar,.t-demo::-webkit-scrollbar-thumb{inline-size:1rem;block-size:1rem;border-radius:6.25rem;background-clip:padding-box;border:.375rem solid transparent}.t-demo::-webkit-scrollbar{background-color:transparent}.t-demo::-webkit-scrollbar-thumb{background-color:var(--tui-background-neutral-1-hover)}.t-demo::-webkit-scrollbar-thumb:hover{background-color:var(--tui-background-neutral-1-pressed)}.t-demo::-webkit-scrollbar-thumb:active{background-color:var(--tui-text-tertiary)}}@media screen and (max-width: 47.9625em){.t-demo{padding:1rem}}:host:not(._fullsize) .t-demo{inline-size:-webkit-min-content;inline-size:min-content;min-inline-size:21rem}tui-doc-code{overflow:hidden}\n"], dependencies: [{ kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: PolymorpheusOutlet, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: TuiButton, selector: "a[tuiButton],button[tuiButton],a[tuiIconButton],button[tuiIconButton]", inputs: ["size"] }, { kind: "component", type: TuiDocCode, selector: "tui-doc-code", inputs: ["filename", "code"] }, { kind: "pipe", type: TuiDocExampleGetTabsPipe, name: "tuiDocExampleGetTabs" }, { kind: "component", type: TuiFullscreen, selector: "[tuiFullscreen]", inputs: ["tuiFullscreenOptions", "tuiFullscreen"], outputs: ["tuiFullscreenChange"] }, { kind: "directive", type: TuiLet, selector: "[tuiLet]", inputs: ["tuiLet"] }, { kind: "directive", type: TuiLink, selector: "a[tuiLink], button[tuiLink]", inputs: ["pseudo"] }, { kind: "component", type: TuiLoader, selector: "tui-loader", inputs: ["size", "inheritColor", "overlay", "textContent", "showLoader"] }, { kind: "pipe", type: TuiMapperPipe, name: "tuiMapper" }, { kind: "directive", type: i1$2.TuiItem, selector: "[tuiItem]" }, { kind: "directive", type: i2$1.TuiTab, selector: "a[tuiTab]:not([routerLink]), a[tuiTab][routerLink][routerLinkActive], button[tuiTab]" }, { kind: "component", type: i2$1.TuiTabsWithMore, selector: "tui-tabs-with-more, nav[tuiTabsWithMore]", inputs: ["size", "moreContent", "dropdownContent", "underline", "itemsLimit", "activeItemIndex"], outputs: ["activeItemIndexChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    onIntersection() {
+        this.doc.dispatchEvent(new CustomEvent('tui-example', { detail: this.id() }));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TuiDocExample, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: TuiDocExample, isStandalone: true, selector: "tui-doc-example", inputs: { heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, fullsize: { classPropertyName: "fullsize", publicName: "fullsize", isSignal: true, isRequired: false, transformFunction: null }, 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: { "waIntersectionThreshold": "1", "waIntersectionRootMargin": "-40px 0px 1000000% 0px" }, listeners: { "waIntersectionObservee": "onIntersection()" }, properties: { "attr.id": "id()", "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]=\"id()\"\n                    [iconEnd]=\"icons.link\"\n                    [relativeTo]=\"route.firstChild ?? route\"\n                    (click)=\"copyExampleLink($event.currentTarget)\"\n                >\n                    {{ heading() }}\n                </a>\n            </h3>\n            @if (description()) {\n                <p>\n                    <ng-container *polymorpheusOutlet=\"description() as text\">\n                        {{ text }}\n                    </ng-container>\n                </p>\n            }\n        </hgroup>\n    </header>\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=\"component() | async\" />\n                    </section>\n                }\n                @let code = processor()[tabs[$index] || 0] || '';\n                <tui-doc-code\n                    [code]=\"code\"\n                    [style.display]=\"activeItemIndex === $index && ($index || !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{text-decoration:none!important;font:inherit}.t-link:after{transition-property:color;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;color:transparent}.t-link:hover,.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: "pipe", type: AsyncPipe, name: "async" }, { 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"], outputs: ["activeItemIndexChange"] }, { kind: "directive", type: TuiTitle, selector: "[tuiTitle]", inputs: ["tuiTitle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiDocExample, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TuiDocExample, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'tui-doc-example', imports: [
-                        NgForOf,
-                        NgIf,
+            args: [{ selector: 'tui-doc-example', imports: [
+                        AsyncPipe,
+                        NgComponentOutlet,
+                        NgTemplateOutlet,
                         PolymorpheusOutlet,
                         RouterLink,
-                        RouterLinkActive,
                         TuiButton,
                         TuiDocCode,
                         TuiDocExampleGetTabsPipe,
                         TuiFullscreen,
-                        TuiLet,
+                        TuiHeader,
                         TuiLink,
                         TuiLoader,
                         TuiMapperPipe,
-                        TuiTabs,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, host: {
-                        '[attr.id]': 'id',
-                        '[class._fullsize]': 'fullsize',
-                    }, template: "<div class=\"t-title-block\">\n    <h2\n        *ngIf=\"heading\"\n        class=\"t-title\"\n    >\n        <span\n            *polymorpheusOutlet=\"heading as text\"\n            [textContent]=\"text\"\n        ></span>\n    </h2>\n    <a\n        *ngIf=\"id\"\n        routerLink=\".\"\n        routerLinkActive=\"t-link-active\"\n        tuiLink\n        type=\"button\"\n        class=\"t-link\"\n        [attr.title]=\"copy()\"\n        [fragment]=\"id\"\n        [relativeTo]=\"route.firstChild ?? route\"\n        [routerLinkActiveOptions]=\"{matrixParams: 'exact', queryParams: 'exact', paths: 'exact', fragment: 'exact'}\"\n        (click)=\"copyExampleLink($event.currentTarget)\"\n    >\n        #\n    </a>\n</div>\n<h3\n    *ngIf=\"description\"\n    class=\"t-description\"\n>\n    <ng-container *polymorpheusOutlet=\"description as text\">\n        {{ text }}\n    </ng-container>\n</h3>\n\n<div\n    class=\"t-example\"\n    [(tuiFullscreen)]=\"fullscreen\"\n>\n    <ng-container *ngIf=\"processor() | tuiDocExampleGetTabs: defaultTab as tabs\">\n        <div\n            *ngIf=\"tabs.length > 1\"\n            class=\"t-tabs-wrapper\"\n        >\n            <tui-tabs-with-more\n                class=\"t-tabs\"\n                [(activeItemIndex)]=\"activeItemIndex\"\n            >\n                <ng-container *ngFor=\"let tab of tabs\">\n                    <button\n                        *tuiItem\n                        tuiTab\n                        type=\"button\"\n                    >\n                        <ng-container *polymorpheusOutlet=\"getTabTitle(tab) as text\">\n                            {{ text }}\n                        </ng-container>\n                    </button>\n                </ng-container>\n            </tui-tabs-with-more>\n\n            <tui-loader\n                *ngIf=\"processor() | tuiMapper: visible\"\n                size=\"xs\"\n                class=\"t-code-editor\"\n                [overlay]=\"true\"\n                [showLoader]=\"loading()\"\n                (click)=\"edit(processor())\"\n            >\n                <ng-container *ngIf=\"codeEditor?.content as content; else defaultEditContent\">\n                    <ng-container *polymorpheusOutlet=\"content as editContent\">\n                        {{ editContent }}\n                    </ng-container>\n                </ng-container>\n\n                <ng-template #defaultEditContent>\n                    <button\n                        appearance=\"flat\"\n                        size=\"s\"\n                        tuiButton\n                        type=\"button\"\n                    >\n                        Edit on {{ codeEditor!.name }}\n                    </button>\n                </ng-template>\n            </tui-loader>\n\n            <button\n                *ngIf=\"fullscreenEnabled\"\n                appearance=\"flat\"\n                size=\"xs\"\n                tuiIconButton\n                type=\"button\"\n                [iconStart]=\"fullscreen ? icons.shrink : icons.expand\"\n                (click)=\"fullscreen = !fullscreen\"\n            >\n                Fullscreen\n            </button>\n        </div>\n\n        <div\n            *ngFor=\"let tab of tabs; let index = index\"\n            class=\"t-content\"\n        >\n            <section\n                *ngIf=\"index === defaultTabIndex\"\n                automation-id=\"tui-doc-example\"\n                class=\"t-demo\"\n                [style.display]=\"activeItemIndex === index && index === defaultTabIndex ? 'block' : 'none'\"\n            >\n                <ng-content />\n                <ng-container *polymorpheusOutlet=\"lazyComponent() as text\">\n                    {{ text }}\n                </ng-container>\n            </section>\n\n            <tui-doc-code\n                *tuiLet=\"processor()[tabs[index] || 0] || '' as code\"\n                [code]=\"code\"\n                [style.display]=\"activeItemIndex === index && index !== defaultTabIndex ? 'block' : 'none'\"\n            >\n                <ng-container *ngFor=\"let action of codeActions\">\n                    <ng-container *polymorpheusOutlet=\"action as text; context: {$implicit: code}\">\n                        {{ text }}\n                    </ng-container>\n                </ng-container>\n            </tui-doc-code>\n        </div>\n    </ng-container>\n</div>\n", styles: [":host{position:relative;display:block;padding-block-start:3.5rem;clear:inline-end}:host:target{animation:1s tuiShaking}@media screen and (max-width: 47.9625em){:host{padding-block-start:2rem}}.t-title-block{display:flex;flex-direction:row-reverse}.t-title{font:var(--tui-font-heading-5);margin:0 auto .5rem 0}@media screen and (max-width: 47.9625em){.t-title{font:var(--tui-font-heading-6)}}.t-title:hover+.t-link{opacity:1}.t-link{font:var(--tui-font-heading-6);padding-inline-end:.1rem}@media not screen and (max-width: 47.9625em){.t-link{font:var(--tui-font-heading-5);margin-inline-start:-1.6rem}.t-link:not(:hover,:focus-visible):not(.t-link-active){opacity:0}}.t-description{font:var(--tui-font-text-m);font-weight:400;margin:0}.t-title:first-letter,.t-description:first-letter{text-transform:capitalize}.t-example{position:relative;margin-block-start:1.5rem;border:1px solid var(--tui-border-normal);border-radius:var(--tui-radius-m);box-shadow:0 .125rem .1875rem #0000001a;overflow:hidden}@media screen and (max-width: 47.9625em){.t-example{margin-block-start:.75rem}}.t-tabs-wrapper{display:flex;padding:0 .875rem 0 2rem;box-shadow:inset 0 -1px var(--tui-border-normal);justify-content:space-between;align-items:center;gap:.5rem}@media screen and (max-width: 47.9625em){.t-tabs-wrapper{padding:0 .875rem 0 1rem}}.t-tabs{flex-grow:1;box-shadow:none}.t-code-editor{flex-shrink:0;block-size:auto}@media screen and (max-width: 47.9625em){.t-code-editor{font-size:0;inline-size:1.5rem}}.t-demo{position:relative;padding:2rem;max-inline-size:100%;box-sizing:border-box;overflow-x:auto}@media all and (-webkit-min-device-pixel-ratio: 0) and (-webkit-min-device-pixel-ratio: 0),all and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: .001dpcm){.t-demo::-webkit-scrollbar,.t-demo::-webkit-scrollbar-thumb{inline-size:1rem;block-size:1rem;border-radius:6.25rem;background-clip:padding-box;border:.375rem solid transparent}.t-demo::-webkit-scrollbar{background-color:transparent}.t-demo::-webkit-scrollbar-thumb{background-color:var(--tui-background-neutral-1-hover)}.t-demo::-webkit-scrollbar-thumb:hover{background-color:var(--tui-background-neutral-1-pressed)}.t-demo::-webkit-scrollbar-thumb:active{background-color:var(--tui-text-tertiary)}}@media screen and (max-width: 47.9625em){.t-demo{padding:1rem}}:host:not(._fullsize) .t-demo{inline-size:-webkit-min-content;inline-size:min-content;min-inline-size:21rem}tui-doc-code{overflow:hidden}\n"] }]
-        }], propDecorators: { id: [{
-                type: Input
-            }], heading: [{
-                type: Input
-            }], description: [{
-                type: Input
-            }], fullsize: [{
-                type: Input
-            }], componentName: [{
-                type: Input
-            }], content: [{
-                type: Input
-            }], component: [{
-                type: Input
-            }] } });
+                        TuiSegmented,
+                        TuiTitle,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [
+                        WaIntersectionObserverDirective,
+                        {
+                            directive: WaIntersectionObservee,
+                            outputs: ['waIntersectionObservee'],
+                        },
+                    ], host: {
+                        waIntersectionThreshold: '1',
+                        waIntersectionRootMargin: '-40px 0px 1000000% 0px',
+                        '[attr.id]': 'id()',
+                        '[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]=\"id()\"\n                    [iconEnd]=\"icons.link\"\n                    [relativeTo]=\"route.firstChild ?? route\"\n                    (click)=\"copyExampleLink($event.currentTarget)\"\n                >\n                    {{ heading() }}\n                </a>\n            </h3>\n            @if (description()) {\n                <p>\n                    <ng-container *polymorpheusOutlet=\"description() as text\">\n                        {{ text }}\n                    </ng-container>\n                </p>\n            }\n        </hgroup>\n    </header>\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=\"component() | async\" />\n                    </section>\n                }\n                @let code = processor()[tabs[$index] || 0] || '';\n                <tui-doc-code\n                    [code]=\"code\"\n                    [style.display]=\"activeItemIndex === $index && ($index || !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{text-decoration:none!important;font:inherit}.t-link:after{transition-property:color;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;color:transparent}.t-link:hover,.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) {
     return pages
@@ -952,9 +596,7 @@ const NAVIGATION_PROVIDERS = [
             ];
         },
     },
-    tuiScrollbarOptionsProvider({
-        mode: 'hover',
-    }),
+    tuiScrollbarOptionsProvider({ mode: 'hover' }),
 ];
 
 class TuiDocScrollIntoViewLink {
@@ -964,41 +606,48 @@ class TuiDocScrollIntoViewLink {
         this.sub = inject(TUI_DOC_PAGE_LOADED)
             .pipe(filter(Boolean), take(1), switchMap(() => this.scroll$), debounceTime(750, tuiZonefreeScheduler()), filter((shallWe) => shallWe && !!tuiGetElementObscures(this.el)), takeUntilDestroyed())
             .subscribe(() => this.el.scrollIntoView());
+        this.tuiDocScrollIntoViewLink = input(false);
     }
-    set tuiDocScrollIntoViewLink(shallWe) {
-        this.scroll$.next(shallWe);
+    ngOnChanges() {
+        this.scroll$.next(this.tuiDocScrollIntoViewLink());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiDocScrollIntoViewLink, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: TuiDocScrollIntoViewLink, isStandalone: true, selector: "[tuiDocScrollIntoViewLink]", inputs: { tuiDocScrollIntoViewLink: "tuiDocScrollIntoViewLink" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TuiDocScrollIntoViewLink, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.18", type: TuiDocScrollIntoViewLink, isStandalone: true, selector: "[tuiDocScrollIntoViewLink]", inputs: { tuiDocScrollIntoViewLink: { classPropertyName: "tuiDocScrollIntoViewLink", publicName: "tuiDocScrollIntoViewLink", isSignal: true, isRequired: false, transformFunction: null } }, usesOnChanges: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiDocScrollIntoViewLink, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TuiDocScrollIntoViewLink, decorators: [{
             type: Directive,
-            args: [{
-                    standalone: true,
-                    selector: '[tuiDocScrollIntoViewLink]',
-                }]
-        }], propDecorators: { tuiDocScrollIntoViewLink: [{
-                type: Input
-            }] } });
+            args: [{ selector: '[tuiDocScrollIntoViewLink]' }]
+        }] });
 
+function tuiUniqBy(array, key) {
+    return Array.from(array
+        .reduce((map, item) => (map.has(item[key]) ? map : map.set(item[key], item)), new Map())
+        .values());
+}
 class TuiDocNavigation {
     constructor() {
+        this.searchInput = viewChild(TuiInputDirective, { read: ElementRef });
         this.router = inject(Router);
         this.doc = inject(DOCUMENT);
         this.open = signal(false);
         this.menuOpen = false;
-        this.sidebar = inject(TuiSidebarDirective, { optional: true });
+        this.drawer = inject(TuiDrawer, { optional: true });
         this.labels = inject(NAVIGATION_LABELS);
         this.items = inject(NAVIGATION_ITEMS);
         this.searchText = inject(TUI_DOC_SEARCH_TEXT);
         this.searchEnabled = inject(TUI_DOC_SEARCH_ENABLED);
         this.docIcons = inject(TUI_DOC_ICONS);
+        this.pagesIcons = inject(TUI_DOC_PAGES_ICONS);
         this.icons = inject(TUI_COMMON_ICONS);
+        this.flat = this.items.reduce((array, item) => [
+            ...array,
+            item.reduce((pages, page) => 'subPages' in page ? [...pages, ...page.subPages] : [...pages, page], []),
+        ], []);
         this.openPagesArr = [];
         this.openPagesGroupsArr = [];
         this.active = '';
         this.search = new FormControl('');
-        this.filtered = toSignal(tuiControlValue(this.search).pipe(filter((search) => search.trim().length > 2), map((search) => this.filterItems(this.flattenSubPages(this.items), search))), { initialValue: [] });
+        this.filtered = toSignal(tuiControlValue(this.search).pipe(filter((search) => search.trim().length > 2), map((search) => this.filterItems(this.flat, search))), { initialValue: [] });
         const titleService = inject(Title);
         const readyToScroll$ = inject(TUI_DOC_PAGE_LOADED);
         inject(NAVIGATION_TITLE)
@@ -1043,7 +692,7 @@ class TuiDocNavigation {
     onFocusSearch(event) {
         if (event.code === 'Slash' &&
             !this.doc.activeElement?.matches('input,textarea,[contenteditable]')) {
-            this.searchInput?.nativeElement?.focus();
+            this.searchInput()?.nativeElement?.focus();
             event.preventDefault();
         }
     }
@@ -1062,14 +711,6 @@ class TuiDocNavigation {
                 search.split(/\s/).find((word) => title.includes(word)));
         }), 'title'));
     }
-    flattenSubPages(items) {
-        return items.reduce((array, item) => [
-            ...array,
-            item.reduce((pages, page) => 'subPages' in page
-                ? [...pages, ...page.subPages]
-                : [...pages, page], []),
-        ], []);
-    }
     isActiveRoute(route) {
         return this.router.isActive(route, {
             paths: 'subset',
@@ -1112,20 +753,12 @@ class TuiDocNavigation {
         target.click();
         target.remove();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiDocNavigation, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiDocNavigation, isStandalone: true, selector: "tui-doc-navigation", host: { listeners: { "window:keydown": "onFocusSearch($event)" }, properties: { "class._open": "menuOpen" } }, providers: NAVIGATION_PROVIDERS, viewQueries: [{ propertyName: "searchInput", first: true, predicate: TuiTextfieldDirective, descendants: true, read: ElementRef }], ngImport: i0, template: "<tui-textfield\n    *ngIf=\"searchEnabled()\"\n    tuiTextfieldSize=\"m\"\n    class=\"t-input\"\n    [iconStart]=\"docIcons.search\"\n    [open]=\"open() && canOpen\"\n    (keyup)=\"open.set(canOpen && $event.code !== 'Escape')\"\n    (openChange)=\"open.set($event)\"\n>\n    <code\n        *ngIf=\"!search.value\"\n        class=\"t-slash\"\n    >\n        /\n    </code>\n    <input\n        tuiTextfield\n        class=\"t-prevent-ios-scroll\"\n        [formControl]=\"search\"\n        [placeholder]=\"searchText\"\n        [tuiAutoFocus]=\"!!sidebar\"\n    />\n    <ng-container *ngIf=\"canOpen\">\n        <tui-data-list *tuiTextfieldDropdown>\n            <tui-opt-group\n                *ngFor=\"let group of filtered(); let index = index\"\n                [label]=\"labels[index] || ''\"\n            >\n                <ng-container *ngFor=\"let item of group\">\n                    <a\n                        *ngIf=\"item.route.includes('://'); else internal\"\n                        tuiOption\n                        [attr.rel]=\"item.rel\"\n                        [href]=\"item.route\"\n                        [target]=\"item.target || '_self'\"\n                    >\n                        {{ item.title }}\n                        <tui-icon\n                            *polymorpheusOutlet=\"item.icon as icon\"\n                            class=\"t-icon\"\n                            [icon]=\"icon\"\n                        />\n                    </a>\n\n                    <ng-template #internal>\n                        <a\n                            tuiOption\n                            [attr.rel]=\"item.rel\"\n                            [fragment]=\"item.fragment\"\n                            [routerLink]=\"item.route\"\n                            [target]=\"item.target || '_self'\"\n                            (click)=\"onClick()\"\n                        >\n                            {{ item.title }}\n                            <tui-icon\n                                *polymorpheusOutlet=\"item.icon as icon\"\n                                class=\"t-icon\"\n                                [icon]=\"icon\"\n                            />\n                        </a>\n                    </ng-template>\n                </ng-container>\n            </tui-opt-group>\n        </tui-data-list>\n    </ng-container>\n</tui-textfield>\n\n<nav class=\"t-navigation\">\n    <tui-scrollbar class=\"t-scrollbar\">\n        <tui-accordion\n            [class.t-accordion-standalone]=\"!searchEnabled()\"\n            [closeOthers]=\"false\"\n            [rounded]=\"false\"\n        >\n            <tui-accordion-item\n                *ngFor=\"let label of labels; index as index\"\n                size=\"s\"\n                [borders]=\"null\"\n                [open]=\"!!openPagesArr[index]\"\n                (openChange)=\"openPagesArr[index] = $event\"\n            >\n                <span class=\"t-label\">\n                    <strong>{{ label }}</strong>\n                </span>\n                <ng-template tuiAccordionItemContent>\n                    <div class=\"t-section\">\n                        <ng-container\n                            *ngFor=\"let item of items[index]; index as subIndex\"\n                            [ngTemplateOutlet]=\"pages\"\n                            [ngTemplateOutletContext]=\"{item: item, index: index * 100 + subIndex}\"\n                        />\n                    </div>\n                </ng-template>\n            </tui-accordion-item>\n        </tui-accordion>\n        <div class=\"t-items-container\">\n            <ng-container\n                *ngFor=\"let item of itemsWithoutSections; let index = index\"\n                [ngTemplateOutlet]=\"pages\"\n                [ngTemplateOutletContext]=\"{item: item, index: items.length - 1 + index}\"\n            />\n        </div>\n\n        <ng-template\n            #pages\n            let-index=\"index\"\n            let-item=\"item\"\n        >\n            <ng-container *ngIf=\"!item.subPages; else subPagesTemplate\">\n                <a\n                    *ngIf=\"item.route.includes('://'); else internal\"\n                    tuiLink\n                    class=\"t-sublink\"\n                    [attr.rel]=\"item.rel\"\n                    [href]=\"item.route\"\n                    [target]=\"item.target || '_self'\"\n                >\n                    {{ item.title }}\n                    <tui-icon\n                        *polymorpheusOutlet=\"item.icon as icon\"\n                        class=\"t-icon\"\n                        [icon]=\"icon\"\n                    />\n                </a>\n\n                <ng-template #internal>\n                    <a\n                        routerLinkActive=\"t-sublink_active\"\n                        tuiLink\n                        class=\"t-sublink\"\n                        [attr.rel]=\"item.rel\"\n                        [routerLink]=\"item.route\"\n                        [target]=\"item.target || '_self'\"\n                        [tuiDocScrollIntoViewLink]=\"isActive(item.route)\"\n                        (click)=\"closeMenu()\"\n                    >\n                        {{ item.title }}\n                        <tui-icon\n                            *polymorpheusOutlet=\"item.icon as icon\"\n                            class=\"t-icon\"\n                            [icon]=\"icon\"\n                        />\n                    </a>\n                </ng-template>\n            </ng-container>\n\n            <ng-template #subPagesTemplate>\n                <div\n                    routerLinkActive\n                    class=\"t-subsection\"\n                    [routerLinkActiveOptions]=\"{exact: false}\"\n                >\n                    <button\n                        *ngIf=\"item.subPages\"\n                        tuiLink\n                        type=\"button\"\n                        class=\"t-sublink t-sublink_subsection\"\n                        (click)=\"onGroupClick(index)\"\n                    >\n                        <tui-icon\n                            class=\"t-chevron\"\n                            [class.t-chevron_active]=\"!!openPagesGroupsArr[index]\"\n                            [icon]=\"icons.more\"\n                        />\n                        {{ item.title }}\n                        <tui-icon\n                            *polymorpheusOutlet=\"item.icon as icon\"\n                            class=\"t-icon\"\n                            [icon]=\"icon\"\n                        />\n                    </button>\n                    <tui-expand\n                        class=\"t-expand\"\n                        [expanded]=\"!!openPagesGroupsArr[index]\"\n                    >\n                        <div class=\"t-section t-section_bordered\">\n                            <ng-container *ngFor=\"let subPage of $pages(item.subPages)\">\n                                <a\n                                    *ngIf=\"subPage.route.includes('://'); else internal\"\n                                    tuiLink\n                                    class=\"t-sublink t-sublink_small\"\n                                    [attr.rel]=\"subPage.rel\"\n                                    [href]=\"subPage.route\"\n                                    [target]=\"subPage.target || '_self'\"\n                                >\n                                    {{ subPage.title }}\n                                    <tui-icon\n                                        *polymorpheusOutlet=\"subPage.icon as icon\"\n                                        class=\"t-icon\"\n                                        [icon]=\"icon\"\n                                    />\n                                </a>\n\n                                <ng-template #internal>\n                                    <a\n                                        routerLinkActive=\"t-sublink_active\"\n                                        tuiLink\n                                        class=\"t-sublink t-sublink_small\"\n                                        [attr.rel]=\"subPage.rel\"\n                                        [fragment]=\"subPage.fragment\"\n                                        [routerLink]=\"subPage.route\"\n                                        [target]=\"subPage.target || '_self'\"\n                                        [tuiDocScrollIntoViewLink]=\"isActive(subPage.route)\"\n                                        (click)=\"closeMenu()\"\n                                    >\n                                        {{ subPage.title }}\n                                        <tui-icon\n                                            *polymorpheusOutlet=\"subPage.icon as icon\"\n                                            class=\"t-icon\"\n                                            [icon]=\"icon\"\n                                        />\n                                    </a>\n                                </ng-template>\n                            </ng-container>\n                        </div>\n                    </tui-expand>\n                </div>\n            </ng-template>\n        </ng-template>\n    </tui-scrollbar>\n</nav>\n\n<ng-content />\n", styles: [":host{z-index:1;display:flex;flex-direction:column;text-align:center;background:var(--tui-background-base)}.t-input{margin:1.25rem}.t-input ::ng-deep tui-icon{border-width:.25rem}.t-slash{block-size:1rem;font-size:.5rem}.t-navigation{display:flex;max-block-size:100%;min-block-size:0;flex:1 1 0;text-align:start}.t-navigation tui-scrollbar{overscroll-behavior:none}.t-accordion-standalone{margin-block-start:1rem}.t-scrollbar{scroll-behavior:var(--tui-scroll-behavior);inline-size:100%}.t-items-container{display:flex;flex-direction:column;padding:0 1rem}.t-label{margin-inline-start:.5rem}.t-expand{margin-inline-start:.25rem}.t-section{display:flex;flex-direction:column;align-items:flex-start;margin:-.5rem 0 -1rem}.t-section_bordered{margin:.5rem 0;border-inline-start:1px solid var(--tui-border-normal)}@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:.5rem}.t-sublink{font:var(--tui-font-text-m);margin-inline-start:.5rem;padding:.5rem 0;text-decoration:none}.t-sublink_small{margin-inline-start:1rem;line-height:1.5rem;padding-block-start:.5rem}.t-sublink_subsection{margin-inline-start:0;line-height:1.6rem}.t-sublink.t-sublink.t-sublink_active{color:var(--tui-text-primary)}.t-icon{margin-inline-start:.5rem}.t-chevron{transition-property:transform;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;inline-size:1rem;block-size:1rem;margin:-.25rem .25rem 0 -.1875rem}.t-chevron_active{transform:rotate(90deg)}\n"], dependencies: [{ kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: PolymorpheusOutlet, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: i2$2.TuiAccordionItem, selector: "tui-accordion-item", inputs: ["noPadding", "showArrow", "borders", "size", "disabled", "disableHover", "open", "async"], outputs: ["openChange"] }, { kind: "directive", type: i2$2.TuiAccordionDirective, selector: "tui-accordion", inputs: ["closeOthers"] }, { kind: "directive", type: i2$2.TuiAccordionItemContent, selector: "ng-template[tuiAccordionItemContent]" }, { kind: "directive", type: TuiAutoFocus, selector: "[tuiAutoFocus]", inputs: ["tuiAutoFocus"] }, { kind: "component", type: i3$1.TuiDataListComponent, selector: "tui-data-list", inputs: ["emptyContent", "size"] }, { kind: "component", type: i3$1.TuiOption, selector: "button[tuiOption]:not([new]), a[tuiOption]:not([new]), label[tuiOption]:not([new])", inputs: ["disabled", "value"] }, { kind: "directive", type: i3$1.TuiOptGroup, selector: "tui-opt-group", inputs: ["label"] }, { kind: "directive", type: TuiDocScrollIntoViewLink, selector: "[tuiDocScrollIntoViewLink]", inputs: ["tuiDocScrollIntoViewLink"] }, { kind: "component", type: i4$1.TuiExpandComponent, selector: "tui-expand", inputs: ["async", "expanded"] }, { kind: "component", type: TuiIcon, selector: "tui-icon", inputs: ["icon", "background"] }, { kind: "ngmodule", type: TuiInputModule }, { kind: "directive", type: TuiLink, selector: "a[tuiLink], button[tuiLink]", inputs: ["pseudo"] }, { kind: "component", type: TuiScrollbar, selector: "tui-scrollbar", inputs: ["hidden"] }, { kind: "component", type: i4.TuiTextfieldComponent, selector: "tui-textfield:not([multi])" }, { kind: "directive", type: i4.TuiTextfieldDirective, selector: "input[tuiTextfield]:not([tuiInputCard]):not([tuiInputExpire]):not([tuiInputCVC])" }, { 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: i8.TuiTextfieldSizeDirective, selector: "[tuiTextfieldSize]", inputs: ["tuiTextfieldSize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TuiDocNavigation, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", 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;background:var(--tui-background-base);--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}: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{font:var(--tui-font-body-s);padding-block:.375rem;padding-inline-start:.4375rem;text-decoration:none}.t-accordion>.t-sublink{font:var(--tui-font-body-s);font-weight:700;color:var(--tui-text-primary);align-items:center;padding:.625rem 1rem;margin-inline-start:1px}.t-accordion>.t-sublink:before{margin-inline-end:.875rem}.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}.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)}.t-sublink:not([data-icon-start]){margin-inline-start:1.875rem}.t-sublink:not([data-icon-start]):before{position:absolute;top:0;bottom:0;display:block;inset-inline-start:-1rem;block-size:auto;inline-size:1px;padding:0;background:var(--tui-border-normal)}.t-chevron{transition-property:transform;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;font-size:1rem;margin-inline:-.625rem .6875rem;vertical-align:sub}.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$2.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: i2$2.TuiDataListComponent, selector: "tui-data-list", inputs: ["emptyContent", "size"] }, { kind: "directive", type: i2$2.TuiOption, selector: "button[tuiOption], a[tuiOption], label[tuiOption]", inputs: ["disabled"] }, { kind: "directive", type: i2$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: i6$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 }); }
 }
-__decorate([
-    tuiPure
-], TuiDocNavigation.prototype, "filterItems", null);
-__decorate([
-    tuiPure
-], TuiDocNavigation.prototype, "flattenSubPages", null);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiDocNavigation, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TuiDocNavigation, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'tui-doc-navigation', imports: [
-                        NgForOf,
-                        NgIf,
+            args: [{ selector: 'tui-doc-navigation', imports: [
                         NgTemplateOutlet,
                         PolymorpheusOutlet,
                         ReactiveFormsModule,
@@ -1137,109 +770,58 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         TuiDocScrollIntoViewLink,
                         TuiExpand,
                         TuiIcon,
-                        TuiInputModule,
+                        TuiInput,
                         TuiLink,
                         TuiScrollbar,
-                        TuiTextfield,
-                        TuiTextfieldControllerModule,
                     ], changeDetection: ChangeDetectionStrategy.OnPush, providers: NAVIGATION_PROVIDERS, host: {
                         '[class._open]': 'menuOpen',
                         '(window:keydown)': 'onFocusSearch($event)',
-                    }, template: "<tui-textfield\n    *ngIf=\"searchEnabled()\"\n    tuiTextfieldSize=\"m\"\n    class=\"t-input\"\n    [iconStart]=\"docIcons.search\"\n    [open]=\"open() && canOpen\"\n    (keyup)=\"open.set(canOpen && $event.code !== 'Escape')\"\n    (openChange)=\"open.set($event)\"\n>\n    <code\n        *ngIf=\"!search.value\"\n        class=\"t-slash\"\n    >\n        /\n    </code>\n    <input\n        tuiTextfield\n        class=\"t-prevent-ios-scroll\"\n        [formControl]=\"search\"\n        [placeholder]=\"searchText\"\n        [tuiAutoFocus]=\"!!sidebar\"\n    />\n    <ng-container *ngIf=\"canOpen\">\n        <tui-data-list *tuiTextfieldDropdown>\n            <tui-opt-group\n                *ngFor=\"let group of filtered(); let index = index\"\n                [label]=\"labels[index] || ''\"\n            >\n                <ng-container *ngFor=\"let item of group\">\n                    <a\n                        *ngIf=\"item.route.includes('://'); else internal\"\n                        tuiOption\n                        [attr.rel]=\"item.rel\"\n                        [href]=\"item.route\"\n                        [target]=\"item.target || '_self'\"\n                    >\n                        {{ item.title }}\n                        <tui-icon\n                            *polymorpheusOutlet=\"item.icon as icon\"\n                            class=\"t-icon\"\n                            [icon]=\"icon\"\n                        />\n                    </a>\n\n                    <ng-template #internal>\n                        <a\n                            tuiOption\n                            [attr.rel]=\"item.rel\"\n                            [fragment]=\"item.fragment\"\n                            [routerLink]=\"item.route\"\n                            [target]=\"item.target || '_self'\"\n                            (click)=\"onClick()\"\n                        >\n                            {{ item.title }}\n                            <tui-icon\n                                *polymorpheusOutlet=\"item.icon as icon\"\n                                class=\"t-icon\"\n                                [icon]=\"icon\"\n                            />\n                        </a>\n                    </ng-template>\n                </ng-container>\n            </tui-opt-group>\n        </tui-data-list>\n    </ng-container>\n</tui-textfield>\n\n<nav class=\"t-navigation\">\n    <tui-scrollbar class=\"t-scrollbar\">\n        <tui-accordion\n            [class.t-accordion-standalone]=\"!searchEnabled()\"\n            [closeOthers]=\"false\"\n            [rounded]=\"false\"\n        >\n            <tui-accordion-item\n                *ngFor=\"let label of labels; index as index\"\n                size=\"s\"\n                [borders]=\"null\"\n                [open]=\"!!openPagesArr[index]\"\n                (openChange)=\"openPagesArr[index] = $event\"\n            >\n                <span class=\"t-label\">\n                    <strong>{{ label }}</strong>\n                </span>\n                <ng-template tuiAccordionItemContent>\n                    <div class=\"t-section\">\n                        <ng-container\n                            *ngFor=\"let item of items[index]; index as subIndex\"\n                            [ngTemplateOutlet]=\"pages\"\n                            [ngTemplateOutletContext]=\"{item: item, index: index * 100 + subIndex}\"\n                        />\n                    </div>\n                </ng-template>\n            </tui-accordion-item>\n        </tui-accordion>\n        <div class=\"t-items-container\">\n            <ng-container\n                *ngFor=\"let item of itemsWithoutSections; let index = index\"\n                [ngTemplateOutlet]=\"pages\"\n                [ngTemplateOutletContext]=\"{item: item, index: items.length - 1 + index}\"\n            />\n        </div>\n\n        <ng-template\n            #pages\n            let-index=\"index\"\n            let-item=\"item\"\n        >\n            <ng-container *ngIf=\"!item.subPages; else subPagesTemplate\">\n                <a\n                    *ngIf=\"item.route.includes('://'); else internal\"\n                    tuiLink\n                    class=\"t-sublink\"\n                    [attr.rel]=\"item.rel\"\n                    [href]=\"item.route\"\n                    [target]=\"item.target || '_self'\"\n                >\n                    {{ item.title }}\n                    <tui-icon\n                        *polymorpheusOutlet=\"item.icon as icon\"\n                        class=\"t-icon\"\n                        [icon]=\"icon\"\n                    />\n                </a>\n\n                <ng-template #internal>\n                    <a\n                        routerLinkActive=\"t-sublink_active\"\n                        tuiLink\n                        class=\"t-sublink\"\n                        [attr.rel]=\"item.rel\"\n                        [routerLink]=\"item.route\"\n                        [target]=\"item.target || '_self'\"\n                        [tuiDocScrollIntoViewLink]=\"isActive(item.route)\"\n                        (click)=\"closeMenu()\"\n                    >\n                        {{ item.title }}\n                        <tui-icon\n                            *polymorpheusOutlet=\"item.icon as icon\"\n                            class=\"t-icon\"\n                            [icon]=\"icon\"\n                        />\n                    </a>\n                </ng-template>\n            </ng-container>\n\n            <ng-template #subPagesTemplate>\n                <div\n                    routerLinkActive\n                    class=\"t-subsection\"\n                    [routerLinkActiveOptions]=\"{exact: false}\"\n                >\n                    <button\n                        *ngIf=\"item.subPages\"\n                        tuiLink\n                        type=\"button\"\n                        class=\"t-sublink t-sublink_subsection\"\n                        (click)=\"onGroupClick(index)\"\n                    >\n                        <tui-icon\n                            class=\"t-chevron\"\n                            [class.t-chevron_active]=\"!!openPagesGroupsArr[index]\"\n                            [icon]=\"icons.more\"\n                        />\n                        {{ item.title }}\n                        <tui-icon\n                            *polymorpheusOutlet=\"item.icon as icon\"\n                            class=\"t-icon\"\n                            [icon]=\"icon\"\n                        />\n                    </button>\n                    <tui-expand\n                        class=\"t-expand\"\n                        [expanded]=\"!!openPagesGroupsArr[index]\"\n                    >\n                        <div class=\"t-section t-section_bordered\">\n                            <ng-container *ngFor=\"let subPage of $pages(item.subPages)\">\n                                <a\n                                    *ngIf=\"subPage.route.includes('://'); else internal\"\n                                    tuiLink\n                                    class=\"t-sublink t-sublink_small\"\n                                    [attr.rel]=\"subPage.rel\"\n                                    [href]=\"subPage.route\"\n                                    [target]=\"subPage.target || '_self'\"\n                                >\n                                    {{ subPage.title }}\n                                    <tui-icon\n                                        *polymorpheusOutlet=\"subPage.icon as icon\"\n                                        class=\"t-icon\"\n                                        [icon]=\"icon\"\n                                    />\n                                </a>\n\n                                <ng-template #internal>\n                                    <a\n                                        routerLinkActive=\"t-sublink_active\"\n                                        tuiLink\n                                        class=\"t-sublink t-sublink_small\"\n                                        [attr.rel]=\"subPage.rel\"\n                                        [fragment]=\"subPage.fragment\"\n                                        [routerLink]=\"subPage.route\"\n                                        [target]=\"subPage.target || '_self'\"\n                                        [tuiDocScrollIntoViewLink]=\"isActive(subPage.route)\"\n                                        (click)=\"closeMenu()\"\n                                    >\n                                        {{ subPage.title }}\n                                        <tui-icon\n                                            *polymorpheusOutlet=\"subPage.icon as icon\"\n                                            class=\"t-icon\"\n                                            [icon]=\"icon\"\n                                        />\n                                    </a>\n                                </ng-template>\n                            </ng-container>\n                        </div>\n                    </tui-expand>\n                </div>\n            </ng-template>\n        </ng-template>\n    </tui-scrollbar>\n</nav>\n\n<ng-content />\n", styles: [":host{z-index:1;display:flex;flex-direction:column;text-align:center;background:var(--tui-background-base)}.t-input{margin:1.25rem}.t-input ::ng-deep tui-icon{border-width:.25rem}.t-slash{block-size:1rem;font-size:.5rem}.t-navigation{display:flex;max-block-size:100%;min-block-size:0;flex:1 1 0;text-align:start}.t-navigation tui-scrollbar{overscroll-behavior:none}.t-accordion-standalone{margin-block-start:1rem}.t-scrollbar{scroll-behavior:var(--tui-scroll-behavior);inline-size:100%}.t-items-container{display:flex;flex-direction:column;padding:0 1rem}.t-label{margin-inline-start:.5rem}.t-expand{margin-inline-start:.25rem}.t-section{display:flex;flex-direction:column;align-items:flex-start;margin:-.5rem 0 -1rem}.t-section_bordered{margin:.5rem 0;border-inline-start:1px solid var(--tui-border-normal)}@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:.5rem}.t-sublink{font:var(--tui-font-text-m);margin-inline-start:.5rem;padding:.5rem 0;text-decoration:none}.t-sublink_small{margin-inline-start:1rem;line-height:1.5rem;padding-block-start:.5rem}.t-sublink_subsection{margin-inline-start:0;line-height:1.6rem}.t-sublink.t-sublink.t-sublink_active{color:var(--tui-text-primary)}.t-icon{margin-inline-start:.5rem}.t-chevron{transition-property:transform;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;inline-size:1rem;block-size:1rem;margin:-.25rem .25rem 0 -.1875rem}.t-chevron_active{transform:rotate(90deg)}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { searchInput: [{
-                type: ViewChild,
-                args: [TuiTextfieldDirective, { read: ElementRef }]
-            }], filterItems: [], flattenSubPages: [] } });
+                    }, 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;background:var(--tui-background-base);--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}: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{font:var(--tui-font-body-s);padding-block:.375rem;padding-inline-start:.4375rem;text-decoration:none}.t-accordion>.t-sublink{font:var(--tui-font-body-s);font-weight:700;color:var(--tui-text-primary);align-items:center;padding:.625rem 1rem;margin-inline-start:1px}.t-accordion>.t-sublink:before{margin-inline-end:.875rem}.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}.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)}.t-sublink:not([data-icon-start]){margin-inline-start:1.875rem}.t-sublink:not([data-icon-start]):before{position:absolute;top:0;bottom:0;display:block;inset-inline-start:-1rem;block-size:auto;inline-size:1px;padding:0;background:var(--tui-border-normal)}.t-chevron{transition-property:transform;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;font-size:1rem;margin-inline:-.625rem .6875rem;vertical-align:sub}.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 {
     constructor() {
-        this.stream$ = new Subject();
         this.router = inject(Router);
+        this.routeEvents = toSignal(this.router.events, { initialValue: null });
         this.icons = inject(TUI_DOC_ICONS);
         this.logo = inject(TUI_DOC_LOGO);
         this.menu = inject(TUI_DOC_MENU_TEXT);
-        this.open = toSignal(merge(this.router.events.pipe(map(TUI_FALSE_HANDLER)), this.stream$).pipe(startWith(false), distinctUntilChanged()), { initialValue: false });
-    }
-    onClick() {
-        this.stream$.next(true);
-    }
-    onActiveZone(active) {
-        if (!active) {
-            this.stream$.next(false);
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiDocHeader, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiDocHeader, isStandalone: true, selector: "header[tuiDocHeader]", ngImport: i0, template: "<button\n    appearance=\"icon\"\n    tuiIconButton\n    type=\"button\"\n    class=\"t-menu\"\n    [iconStart]=\"icons.menu\"\n    [title]=\"menu\"\n    (click)=\"onClick()\"\n    (tuiActiveZoneChange)=\"onActiveZone($event)\"\n>\n    <tui-doc-navigation\n        *tuiSidebar=\"open()\"\n        class=\"t-navigation\"\n    />\n</button>\n<div class=\"t-logo\">\n    <img\n        *polymorpheusOutlet=\"logo as src\"\n        alt=\"Logo\"\n        class=\"t-img\"\n        [src]=\"src\"\n    />\n</div>\n<ng-content />\n", styles: [":host{position:fixed;top:0;left:0;right:0;z-index:1;display:flex;box-shadow:var(--tui-shadow-small);block-size:4.125rem;align-items:center;padding:0 1.25rem;background:var(--tui-background-base);border-block-end:1px solid var(--tui-border-normal)}@supports (background: color-mix(in srgb,var(--tui-background-base),transparent 50%)){:host{background:color-mix(in srgb,var(--tui-background-base),transparent 50%);-webkit-backdrop-filter:blur(1.25rem);backdrop-filter:blur(1.25rem)}}.t-logo{margin-inline-end:auto;font:var(--tui-font-heading-5)}.t-img{display:block}.t-menu{margin-inline-start:-1.25rem}@media screen and (min-width: 48em){.t-menu{display:none}}.t-navigation{min-block-size:100%}\n"], dependencies: [{ kind: "directive", type: PolymorpheusOutlet, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }, { kind: "directive", type: TuiActiveZone, selector: "[tuiActiveZone]:not(ng-container), [tuiActiveZoneChange]:not(ng-container), [tuiActiveZoneParent]:not(ng-container)", inputs: ["tuiActiveZoneParent"], outputs: ["tuiActiveZoneChange"], exportAs: ["tuiActiveZone"] }, { kind: "directive", type: TuiButton, selector: "a[tuiButton],button[tuiButton],a[tuiIconButton],button[tuiIconButton]", inputs: ["size"] }, { kind: "component", type: TuiDocNavigation, selector: "tui-doc-navigation" }, { kind: "directive", type: i1$3.TuiSidebarDirective, selector: "[tuiSidebar]", inputs: ["tuiSidebarDirection", "tuiSidebarAutoWidth", "tuiSidebar"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiDocHeader, decorators: [{
-            type: Component,
-            args: [{ standalone: true, selector: 'header[tuiDocHeader]', imports: [PolymorpheusOutlet, TuiActiveZone, TuiButton, TuiDocNavigation, TuiSidebar], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n    appearance=\"icon\"\n    tuiIconButton\n    type=\"button\"\n    class=\"t-menu\"\n    [iconStart]=\"icons.menu\"\n    [title]=\"menu\"\n    (click)=\"onClick()\"\n    (tuiActiveZoneChange)=\"onActiveZone($event)\"\n>\n    <tui-doc-navigation\n        *tuiSidebar=\"open()\"\n        class=\"t-navigation\"\n    />\n</button>\n<div class=\"t-logo\">\n    <img\n        *polymorpheusOutlet=\"logo as src\"\n        alt=\"Logo\"\n        class=\"t-img\"\n        [src]=\"src\"\n    />\n</div>\n<ng-content />\n", styles: [":host{position:fixed;top:0;left:0;right:0;z-index:1;display:flex;box-shadow:var(--tui-shadow-small);block-size:4.125rem;align-items:center;padding:0 1.25rem;background:var(--tui-background-base);border-block-end:1px solid var(--tui-border-normal)}@supports (background: color-mix(in srgb,var(--tui-background-base),transparent 50%)){:host{background:color-mix(in srgb,var(--tui-background-base),transparent 50%);-webkit-backdrop-filter:blur(1.25rem);backdrop-filter:blur(1.25rem)}}.t-logo{margin-inline-end:auto;font:var(--tui-font-heading-5)}.t-img{display:block}.t-menu{margin-inline-start:-1.25rem}@media screen and (min-width: 48em){.t-menu{display:none}}.t-navigation{min-block-size:100%}\n"] }]
-        }] });
-
-class TuiDocSeeAlso {
-    constructor() {
-        this.pages = inject(TUI_DOC_MAP_PAGES);
-        this.text = inject(TUI_DOC_SEE_ALSO_TEXT);
-        this.seeAlso = [];
-    }
-    getRouterLink(pageTitle) {
-        return this.pages.get(pageTitle)?.route ?? '';
+        this.breakpoint = inject(TUI_BREAKPOINT);
+        this.open = signal(false);
+        effect(() => this.routeEvents() && this.open.set(false));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiDocSeeAlso, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiDocSeeAlso, isStandalone: true, selector: "tui-doc-see-also", inputs: { seeAlso: "seeAlso" }, ngImport: i0, template: "<h5 class=\"t-header\">{{ text }}</h5>\n<ng-container *ngFor=\"let item of seeAlso; last as last\">\n    <a\n        tuiLink\n        [innerText]=\"item\"\n        [routerLink]=\"getRouterLink(item)\"\n    ></a>\n    <ng-container *ngIf=\"!last\">{{ ', ' }}</ng-container>\n</ng-container>\n", styles: [":host{display:block}.t-header{font-size:.6875rem;line-height:1rem;text-transform:uppercase;letter-spacing:.075em;color:var(--tui-text-secondary);margin:0 0 .5rem;white-space:nowrap}\n"], dependencies: [{ kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: TuiLink, selector: "a[tuiLink], button[tuiLink]", inputs: ["pseudo"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TuiDocHeader, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: TuiDocHeader, isStandalone: true, selector: "header[tuiDocHeader]", ngImport: i0, template: "@if (breakpoint() === 'mobile') {\n    <button\n        appearance=\"flat-grayscale\"\n        tuiIconButton\n        type=\"button\"\n        class=\"t-menu\"\n        [iconStart]=\"icons.menu\"\n        [title]=\"menu\"\n        (click)=\"open.set(true)\"\n    ></button>\n}\n\n<tui-drawer\n    *tuiPopup=\"open()\"\n    direction=\"start\"\n    class=\"t-drawer\"\n    [overlay]=\"true\"\n    (click.self)=\"open.set(false)\"\n>\n    <tui-doc-navigation />\n</tui-drawer>\n\n<div class=\"t-logo\">\n    <img\n        *polymorpheusOutlet=\"logo as src\"\n        alt=\"Logo\"\n        class=\"t-img\"\n        [src]=\"src\"\n    />\n</div>\n<ng-content />\n", styles: [":host{position:fixed;z-index:1;display:flex;inset:0 0 auto;block-size:4.125rem;align-items:center;padding:0 1.5rem;background:var(--tui-background-base-alt);--tui-stroke-width: .09375rem}:host :host-context([tuiTheme=\"dark\"]){background:var(--tui-background-elevation-2)}:host:after{content:\"\";position:fixed;inset:3.5rem 0 0;pointer-events:none;border-radius:var(--tui-radius-xl);border:.5rem solid var(--tui-background-base-alt);box-shadow:-5rem 0 var(--tui-background-base-alt),5rem 0 var(--tui-background-base-alt)}:host-context([tuiTheme=\"dark\"]) :host:after{border:.5rem solid var(--tui-background-elevation-2);box-shadow:-5rem 0 var(--tui-background-elevation-2),5rem 0 var(--tui-background-elevation-2)}.t-logo{margin-inline-end:auto;font:var(--tui-font-heading-h6)}.t-img{display:block}.t-menu{margin-inline-start:-1.25rem}.t-drawer{inline-size:17.25rem}\n"], dependencies: [{ kind: "directive", type: PolymorpheusOutlet, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }, { kind: "directive", type: TuiButton, selector: "a[tuiButton],button[tuiButton],a[tuiIconButton],button[tuiIconButton]", inputs: ["size"] }, { kind: "component", type: TuiDocNavigation, selector: "tui-doc-navigation" }, { kind: "component", type: TuiDrawer, selector: "tui-drawer", inputs: ["direction", "overlay"] }, { kind: "directive", type: TuiPopup, selector: "ng-template[tuiPopup]", inputs: ["tuiPopup"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiDocSeeAlso, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TuiDocHeader, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'tui-doc-see-also', imports: [NgForOf, NgIf, RouterLink, TuiLink], changeDetection: ChangeDetectionStrategy.OnPush, template: "<h5 class=\"t-header\">{{ text }}</h5>\n<ng-container *ngFor=\"let item of seeAlso; last as last\">\n    <a\n        tuiLink\n        [innerText]=\"item\"\n        [routerLink]=\"getRouterLink(item)\"\n    ></a>\n    <ng-container *ngIf=\"!last\">{{ ', ' }}</ng-container>\n</ng-container>\n", styles: [":host{display:block}.t-header{font-size:.6875rem;line-height:1rem;text-transform:uppercase;letter-spacing:.075em;color:var(--tui-text-secondary);margin:0 0 .5rem;white-space:nowrap}\n"] }]
-        }], propDecorators: { seeAlso: [{
-                type: Input
-            }] } });
+            args: [{ selector: 'header[tuiDocHeader]', imports: [PolymorpheusOutlet, TuiButton, TuiDocNavigation, TuiDrawer, TuiPopup], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (breakpoint() === 'mobile') {\n    <button\n        appearance=\"flat-grayscale\"\n        tuiIconButton\n        type=\"button\"\n        class=\"t-menu\"\n        [iconStart]=\"icons.menu\"\n        [title]=\"menu\"\n        (click)=\"open.set(true)\"\n    ></button>\n}\n\n<tui-drawer\n    *tuiPopup=\"open()\"\n    direction=\"start\"\n    class=\"t-drawer\"\n    [overlay]=\"true\"\n    (click.self)=\"open.set(false)\"\n>\n    <tui-doc-navigation />\n</tui-drawer>\n\n<div class=\"t-logo\">\n    <img\n        *polymorpheusOutlet=\"logo as src\"\n        alt=\"Logo\"\n        class=\"t-img\"\n        [src]=\"src\"\n    />\n</div>\n<ng-content />\n", styles: [":host{position:fixed;z-index:1;display:flex;inset:0 0 auto;block-size:4.125rem;align-items:center;padding:0 1.5rem;background:var(--tui-background-base-alt);--tui-stroke-width: .09375rem}:host :host-context([tuiTheme=\"dark\"]){background:var(--tui-background-elevation-2)}:host:after{content:\"\";position:fixed;inset:3.5rem 0 0;pointer-events:none;border-radius:var(--tui-radius-xl);border:.5rem solid var(--tui-background-base-alt);box-shadow:-5rem 0 var(--tui-background-base-alt),5rem 0 var(--tui-background-base-alt)}:host-context([tuiTheme=\"dark\"]) :host:after{border:.5rem solid var(--tui-background-elevation-2);box-shadow:-5rem 0 var(--tui-background-elevation-2),5rem 0 var(--tui-background-elevation-2)}.t-logo{margin-inline-end:auto;font:var(--tui-font-heading-h6)}.t-img{display:block}.t-menu{margin-inline-start:-1.25rem}.t-drawer{inline-size:17.25rem}\n"] }]
+        }], ctorParameters: () => [] });
 
 class TuiDocSourceCode {
     constructor() {
         this.icons = inject(TUI_DOC_ICONS);
         this.sourceCode = inject(TUI_DOC_SOURCE_CODE);
         this.text = inject(TUI_DOC_SOURCE_CODE_TEXT);
-        this.header = '';
-        this.package = '';
-        this.type = '';
-        this.path = '';
-    }
-    get pathOptions() {
-        return this.getPathOptions(this.header, this.package, this.type, this.path);
-    }
-    pathIsUrl(path) {
-        return path.startsWith('http');
-    }
-    getPathOptions(header, packageName, type, path) {
-        return {
-            header,
-            package: packageName,
-            type,
-            path,
-        };
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiDocSourceCode, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiDocSourceCode, isStandalone: true, selector: "tui-doc-source-code", inputs: { header: "header", package: "package", type: "type", path: "path" }, ngImport: i0, template: "<a\n    *polymorpheusOutlet=\"pathIsUrl(path) ? path : sourceCode as link; context: pathOptions\"\n    appearance=\"icon\"\n    size=\"s\"\n    target=\"_blank\"\n    tuiIconButton\n    type=\"button\"\n    [href]=\"link\"\n    [iconStart]=\"icons.code\"\n    [style.height]=\"'var(--tui-height-l)'\"\n>\n    {{ text }}\n</a>\n", dependencies: [{ kind: "directive", type: PolymorpheusOutlet, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }, { kind: "directive", type: TuiButton, selector: "a[tuiButton],button[tuiButton],a[tuiIconButton],button[tuiIconButton]", inputs: ["size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        this.header = input('');
+        this.package = input('');
+        this.type = input('');
+        this.path = input('');
+        this.pathOptions = computed(() => ({
+            header: this.header(),
+            package: this.package(),
+            type: this.type(),
+            path: this.path(),
+        }));
+        this.pathIsUrl = computed(() => this.path()?.startsWith('http') ?? false);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TuiDocSourceCode, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.18", type: TuiDocSourceCode, isStandalone: true, selector: "tui-doc-source-code", inputs: { header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, package: { classPropertyName: "package", publicName: "package", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, path: { classPropertyName: "path", publicName: "path", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<a\n    *polymorpheusOutlet=\"pathIsUrl() ? path() : sourceCode as link; context: pathOptions()\"\n    appearance=\"secondary-grayscale\"\n    size=\"s\"\n    target=\"_blank\"\n    tuiButton\n    [href]=\"link\"\n    [iconStart]=\"icons.code\"\n>\n    {{ text }}\n</a>\n", dependencies: [{ kind: "directive", type: PolymorpheusOutlet, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }, { kind: "directive", type: TuiButton, selector: "a[tuiButton],button[tuiButton],a[tuiIconButton],button[tuiIconButton]", inputs: ["size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-__decorate([
-    tuiPure
-], TuiDocSourceCode.prototype, "pathIsUrl", null);
-__decorate([
-    tuiPure
-], TuiDocSourceCode.prototype, "getPathOptions", null);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiDocSourceCode, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TuiDocSourceCode, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'tui-doc-source-code', imports: [PolymorpheusOutlet, TuiButton], changeDetection: ChangeDetectionStrategy.OnPush, template: "<a\n    *polymorpheusOutlet=\"pathIsUrl(path) ? path : sourceCode as link; context: pathOptions\"\n    appearance=\"icon\"\n    size=\"s\"\n    target=\"_blank\"\n    tuiIconButton\n    type=\"button\"\n    [href]=\"link\"\n    [iconStart]=\"icons.code\"\n    [style.height]=\"'var(--tui-height-l)'\"\n>\n    {{ text }}\n</a>\n" }]
-        }], propDecorators: { header: [{
-                type: Input
-            }], package: [{
-                type: Input
-            }], type: [{
-                type: Input
-            }], path: [{
-                type: Input
-            }], pathIsUrl: [], getPathOptions: [] } });
+            args: [{ selector: 'tui-doc-source-code', imports: [PolymorpheusOutlet, TuiButton], changeDetection: ChangeDetectionStrategy.OnPush, template: "<a\n    *polymorpheusOutlet=\"pathIsUrl() ? path() : sourceCode as link; context: pathOptions()\"\n    appearance=\"secondary-grayscale\"\n    size=\"s\"\n    target=\"_blank\"\n    tuiButton\n    [href]=\"link\"\n    [iconStart]=\"icons.code\"\n>\n    {{ text }}\n</a>\n" }]
+        }] });
 
 class TuiDocLanguageSwitcher {
     constructor() {
@@ -1277,23 +859,22 @@ class TuiDocLanguageSwitcher {
         this.switcher.setLanguage(lang);
         this.open = false;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiDocLanguageSwitcher, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiDocLanguageSwitcher, isStandalone: true, selector: "tui-doc-language-switcher", providers: [tuiScrollbarOptionsProvider({ mode: 'hover' })], ngImport: i0, template: "<tui-badged-content>\n    <img\n        alt=\"\"\n        size=\"s\"\n        tuiBadge\n        tuiSlot=\"bottom\"\n        [src]=\"flags.get(language.value ?? '') || flags.get(switcher.language) | tuiFlag\"\n    />\n\n    <button\n        appearance=\"outline-grayscale\"\n        size=\"s\"\n        tuiButtonSelect\n        tuiIconButton\n        type=\"button\"\n        [formControl]=\"language\"\n        [iconStart]=\"icons.languages\"\n    >\n        Language\n        <tui-data-list *tuiTextfieldDropdown>\n            <tui-opt-group label=\"Language of components\">\n                <button\n                    *ngFor=\"let name of names\"\n                    new\n                    tuiOption\n                    type=\"button\"\n                    [value]=\"name | titlecase\"\n                    (click)=\"setLang(name)\"\n                >\n                    <img\n                        alt=\"\"\n                        class=\"t-flag\"\n                        [src]=\"flags.get(name) | tuiFlag\"\n                    />\n                    {{ name | titlecase }}\n                </button>\n            </tui-opt-group>\n        </tui-data-list>\n    </button>\n</tui-badged-content>\n", styles: [".t-flag{inline-size:1.75rem;block-size:1.75rem;border-radius:50%;margin-inline-end:.5rem}[tuiOption]{justify-content:flex-start;gap:.5rem}img{box-shadow:inset 0 0 0 1px var(--tui-border-normal)}\n"], dependencies: [{ kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: TitleCasePipe, name: "titlecase" }, { kind: "directive", type: TuiBadge, selector: "tui-badge,[tuiBadge]", inputs: ["size"] }, { kind: "directive", type: i2$3.TuiBadgedContentDirective, selector: "[tuiSlot]", inputs: ["tuiSlot"] }, { kind: "component", type: i2$3.TuiBadgedContentComponent, selector: "tui-badged-content" }, { kind: "directive", type: TuiButton, selector: "a[tuiButton],button[tuiButton],a[tuiIconButton],button[tuiIconButton]", inputs: ["size"] }, { kind: "directive", type: TuiButtonSelect, selector: "button[tuiButtonSelect]" }, { kind: "component", type: i3$1.TuiDataListComponent, selector: "tui-data-list", inputs: ["emptyContent", "size"] }, { kind: "directive", type: i3$1.TuiOptionNew, selector: "button[tuiOption][new], a[tuiOption][new], label[tuiOption][new]", inputs: ["disabled"] }, { kind: "directive", type: i3$1.TuiOptionWithValue, selector: "button[tuiOption][value][new], a[tuiOption][value][new], label[tuiOption][value][new]", inputs: ["disabled", "value"] }, { kind: "directive", type: i3$1.TuiOptGroup, selector: "tui-opt-group", inputs: ["label"] }, { kind: "pipe", type: TuiFlagPipe, name: "tuiFlag" }, { kind: "directive", type: i4.TuiTextfieldDropdownDirective, selector: "ng-template[tuiTextfieldDropdown]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TuiDocLanguageSwitcher, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: TuiDocLanguageSwitcher, isStandalone: true, selector: "tui-doc-language-switcher", providers: [tuiScrollbarOptionsProvider({ mode: 'hover' })], ngImport: i0, template: "<button\n    appearance=\"secondary-grayscale\"\n    size=\"s\"\n    tuiButton\n    tuiButtonSelect\n    tuiChevron\n    type=\"button\"\n    [formControl]=\"language\"\n>\n    <img\n        alt=\"\"\n        size=\"s\"\n        tuiBadge\n        [src]=\"flags.get(language.value ?? '') || flags.get(switcher.language) | tuiFlag\"\n    />\n    Language\n    <tui-data-list *tuiDropdown>\n        <tui-opt-group label=\"Language of components\">\n            @for (name of names; track name) {\n                <button\n                    tuiOption\n                    type=\"button\"\n                    [value]=\"name | titlecase\"\n                    (click)=\"setLang(name)\"\n                >\n                    <img\n                        alt=\"\"\n                        class=\"t-flag\"\n                        [src]=\"flags.get(name) | tuiFlag\"\n                    />\n                    {{ name | titlecase }}\n                </button>\n            }\n        </tui-opt-group>\n    </tui-data-list>\n</button>\n", styles: [".t-flag{inline-size:1.75rem;block-size:1.75rem;border-radius:50%;margin-inline-end:.5rem}[tuiOption]{justify-content:flex-start;gap:.5rem}img{box-shadow:inset 0 0 0 1px var(--tui-border-normal)}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: TitleCasePipe, name: "titlecase" }, { kind: "directive", type: TuiBadge, selector: "[tuiBadge],tui-icon[tuiBadge]", inputs: ["size"] }, { kind: "directive", type: TuiButton, selector: "a[tuiButton],button[tuiButton],a[tuiIconButton],button[tuiIconButton]", inputs: ["size"] }, { kind: "directive", type: TuiButtonSelect, selector: "button[tuiButtonSelect]" }, { kind: "directive", type: TuiChevron, selector: "[tuiChevron]", inputs: ["tuiChevron"] }, { kind: "component", type: i2$2.TuiDataListComponent, selector: "tui-data-list", inputs: ["emptyContent", "size"] }, { kind: "directive", type: i2$2.TuiOption, selector: "button[tuiOption], a[tuiOption], label[tuiOption]", inputs: ["disabled"] }, { kind: "directive", type: i2$2.TuiOptionWithValue, selector: "button[tuiOption][value], a[tuiOption][value], label[tuiOption][value]", inputs: ["disabled", "value"] }, { kind: "directive", type: i2$2.TuiOptGroup, selector: "tui-opt-group", inputs: ["label"] }, { kind: "pipe", type: TuiFlagPipe, name: "tuiFlag" }, { kind: "directive", type: i6.TuiDropdownContent, selector: "ng-template[tuiDropdown]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiDocLanguageSwitcher, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TuiDocLanguageSwitcher, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'tui-doc-language-switcher', imports: [
-                        NgForOf,
+            args: [{ selector: 'tui-doc-language-switcher', imports: [
                         ReactiveFormsModule,
                         TitleCasePipe,
                         TuiBadge,
-                        TuiBadgedContent,
                         TuiButton,
                         TuiButtonSelect,
+                        TuiChevron,
                         TuiDataList,
                         TuiFlagPipe,
                         TuiTextfield,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, providers: [tuiScrollbarOptionsProvider({ mode: 'hover' })], template: "<tui-badged-content>\n    <img\n        alt=\"\"\n        size=\"s\"\n        tuiBadge\n        tuiSlot=\"bottom\"\n        [src]=\"flags.get(language.value ?? '') || flags.get(switcher.language) | tuiFlag\"\n    />\n\n    <button\n        appearance=\"outline-grayscale\"\n        size=\"s\"\n        tuiButtonSelect\n        tuiIconButton\n        type=\"button\"\n        [formControl]=\"language\"\n        [iconStart]=\"icons.languages\"\n    >\n        Language\n        <tui-data-list *tuiTextfieldDropdown>\n            <tui-opt-group label=\"Language of components\">\n                <button\n                    *ngFor=\"let name of names\"\n                    new\n                    tuiOption\n                    type=\"button\"\n                    [value]=\"name | titlecase\"\n                    (click)=\"setLang(name)\"\n                >\n                    <img\n                        alt=\"\"\n                        class=\"t-flag\"\n                        [src]=\"flags.get(name) | tuiFlag\"\n                    />\n                    {{ name | titlecase }}\n                </button>\n            </tui-opt-group>\n        </tui-data-list>\n    </button>\n</tui-badged-content>\n", styles: [".t-flag{inline-size:1.75rem;block-size:1.75rem;border-radius:50%;margin-inline-end:.5rem}[tuiOption]{justify-content:flex-start;gap:.5rem}img{box-shadow:inset 0 0 0 1px var(--tui-border-normal)}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, providers: [tuiScrollbarOptionsProvider({ mode: 'hover' })], template: "<button\n    appearance=\"secondary-grayscale\"\n    size=\"s\"\n    tuiButton\n    tuiButtonSelect\n    tuiChevron\n    type=\"button\"\n    [formControl]=\"language\"\n>\n    <img\n        alt=\"\"\n        size=\"s\"\n        tuiBadge\n        [src]=\"flags.get(language.value ?? '') || flags.get(switcher.language) | tuiFlag\"\n    />\n    Language\n    <tui-data-list *tuiDropdown>\n        <tui-opt-group label=\"Language of components\">\n            @for (name of names; track name) {\n                <button\n                    tuiOption\n                    type=\"button\"\n                    [value]=\"name | titlecase\"\n                    (click)=\"setLang(name)\"\n                >\n                    <img\n                        alt=\"\"\n                        class=\"t-flag\"\n                        [src]=\"flags.get(name) | tuiFlag\"\n                    />\n                    {{ name | titlecase }}\n                </button>\n            }\n        </tui-opt-group>\n    </tui-data-list>\n</button>\n", styles: [".t-flag{inline-size:1.75rem;block-size:1.75rem;border-radius:50%;margin-inline-end:.5rem}[tuiOption]{justify-content:flex-start;gap:.5rem}img{box-shadow:inset 0 0 0 1px var(--tui-border-normal)}\n"] }]
         }] });
 function capitalize(value) {
     return `${value.charAt(0).toUpperCase()}${value.slice(1)}`;
@@ -1305,148 +886,131 @@ class TuiDocMain {
         this.icons = inject(TUI_DOC_ICONS);
         this.dir = inject(TUI_DOC_DIRECTION_ENABLED);
         this.darkMode = inject(TUI_DARK_MODE);
-        this.theme = computed(() => (this.darkMode() ? 'dark' : null));
         this.icon = computed(() => this.darkMode() ? this.icons.light : this.icons.dark);
     }
     changeTextDirection() {
         const dir = this.doc.documentElement.getAttribute('dir') ?? 'ltr';
         this.doc.documentElement.setAttribute('dir', dir === 'ltr' ? 'rtl' : 'ltr');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiDocMain, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiDocMain, isStandalone: true, selector: "tui-doc-main", ngImport: i0, template: "<tui-root [attr.tuiTheme]=\"theme()\">\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 select=\"tuiDocHeader\" />\n\n        <button\n            *ngIf=\"dir && icons.ltr\"\n            appearance=\"outline\"\n            aria-label=\"Switch directionality of the element's text\"\n            size=\"s\"\n            tuiButton\n            type=\"button\"\n            class=\"tui-doc-switch-direction\"\n            [iconEnd]=\"icons.ltr.preview\"\n            (click)=\"changeTextDirection()\"\n        >\n            <tui-icon [icon]=\"icons.ltr.direction\" />\n        </button>\n\n        <button\n            appearance=\"secondary\"\n            aria-label=\"Switch between dark and light mode\"\n            size=\"s\"\n            tuiIconButton\n            type=\"button\"\n            class=\"tui-doc-dark-mode-switch\"\n            [iconStart]=\"icon()\"\n            [style.border-radius.%]=\"100\"\n            (click)=\"darkMode.set(!darkMode())\"\n        ></button>\n    </header>\n    <ng-container ngProjectAs=\"tuiOverContent\">\n        <ng-content select=\"tuiOverContent\" />\n    </ng-container>\n    <ng-container ngProjectAs=\"tuiOverDialogs\">\n        <ng-content select=\"tuiOverDialogs\" />\n    </ng-container>\n    <ng-container ngProjectAs=\"tuiOverAlerts\">\n        <ng-content select=\"tuiOverAlerts\" />\n    </ng-container>\n    <ng-container ngProjectAs=\"tuiOverDropdowns\">\n        <ng-content select=\"tuiOverDropdowns\" />\n    </ng-container>\n    <ng-container ngProjectAs=\"tuiOverHints\">\n        <ng-content select=\"tuiOverHints\" />\n    </ng-container>\n</tui-root>\n", styles: ["@keyframes tuiShaking{0%,to{transform:translateZ(0)}10%,30%,50%,70%,90%{transform:translate3d(-.3125rem,0,0)}20%,40%,60%,80%{transform:translate3d(.3125rem,0,0)}}html,body{scroll-padding-top:4rem;background:var(--tui-background-base)}tui-root>tui-scroll-controls>.t-bar_vertical{top:4rem!important}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:.125rem .1875rem;text-wrap:wrap}a code:not(pre code):not(.hljs):not([class*=language-]){color:var(--tui-text-action)}button:focus code,a:focus code{background:var(--tui-background-base)}.tui-doc-page{isolation:isolate;padding-block-start:4rem}tui-doc-navigation.tui-doc-navigation{position:fixed;top:4rem;bottom:0;inline-size:16.25rem;border-inline-end:1px solid var(--tui-border-normal)}@media screen and (max-width: 47.9625em){tui-doc-navigation.tui-doc-navigation{display:none}}.tui-doc-content{margin-inline-start:16.25rem}@media screen and (max-width: 47.9625em){.tui-doc-content{margin-inline-start:0}}.tui-doc-outlet+*{display:block}.tui-doc-switch-direction,.tui-doc-dark-mode-switch{margin-inline-start:1rem}tui-doc-code .hljs-tag{background:none}tui-doc-code .hljs{display:block;overflow-x:auto;padding:.5em;color:var(--tui-text-primary);background-color:var(--tui-background-neutral-1)}tui-doc-code .hljs.hljs-line-numbers{background:transparent}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)}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "directive", type: TuiButton, selector: "a[tuiButton],button[tuiButton],a[tuiIconButton],button[tuiIconButton]", inputs: ["size"] }, { kind: "component", type: TuiDocHeader, selector: "header[tuiDocHeader]" }, { kind: "component", type: TuiDocNavigation, selector: "tui-doc-navigation" }, { kind: "component", type: TuiIcon, selector: "tui-icon", inputs: ["icon", "background"] }, { kind: "component", type: TuiRoot, selector: "tui-root" }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TuiDocMain, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", 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 select=\"tuiDocHeader\" />\n\n        @if (dir) {\n            <button\n                appearance=\"\"\n                aria-label=\"Switch directionality of the element's text\"\n                size=\"s\"\n                tuiIconButton\n                type=\"button\"\n                class=\"tui-doc-switch-direction\"\n                [style.border-radius.%]=\"100\"\n                (click)=\"changeTextDirection()\"\n            >\n                <tui-icon\n                    [badge]=\"icons.ltr.direction\"\n                    [icon]=\"icons.ltr.preview\"\n                />\n            </button>\n        }\n\n        <button\n            appearance=\"\"\n            aria-label=\"Switch between dark and light mode\"\n            size=\"s\"\n            tuiIconButton\n            type=\"button\"\n            class=\"tui-doc-dark-mode-switch\"\n            [style.border-radius.%]=\"100\"\n            (click)=\"darkMode.set(!darkMode())\"\n        >\n            <tui-icon [icon]=\"icon()\" />\n        </button>\n    </header>\n    <ng-container ngProjectAs=\"tuiOverContent\">\n        <ng-content select=\"tuiOverContent\" />\n    </ng-container>\n</tui-root>\n", styles: ["html,body{background:var(--tui-background-base)}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:.125rem .1875rem;text-wrap:wrap}a code:not(pre code):not(.hljs):not([class*=language-]){color:var(--tui-text-action)}button:focus code,a:focus code{background:var(--tui-background-base)}.tui-doc-page{isolation:isolate;padding-block-start:4rem}tui-doc-navigation.tui-doc-navigation{position:fixed;top:4rem;bottom:0;inline-size:16.5rem;box-sizing:border-box}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)}:host-context([tuiTheme=\"dark\"]) tui-doc-navigation.tui-doc-navigation:before,:host-context([tuiTheme=\"dark\"]) tui-doc-navigation.tui-doc-navigation:after{border:.25rem solid 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}button.tui-doc-switch-direction,button.tui-doc-dark-mode-switch{margin-inline-start:1rem;background:var(--tui-background-base)}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: "directive", type: TuiButton, selector: "a[tuiButton],button[tuiButton],a[tuiIconButton],button[tuiIconButton]", inputs: ["size"] }, { kind: "component", type: TuiDocHeader, selector: "header[tuiDocHeader]" }, { kind: "component", type: TuiDocNavigation, selector: "tui-doc-navigation" }, { kind: "component", type: TuiIcon, selector: "tui-icon:not([tuiBadge])", inputs: ["background"] }, { kind: "component", type: TuiRoot, selector: "tui-root" }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiDocMain, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TuiDocMain, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'tui-doc-main', imports: [
-                        NgIf,
-                        RouterOutlet,
-                        TuiButton,
-                        TuiDocHeader,
-                        TuiDocNavigation,
-                        TuiIcon,
-                        TuiRoot,
-                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.Default, template: "<tui-root [attr.tuiTheme]=\"theme()\">\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 select=\"tuiDocHeader\" />\n\n        <button\n            *ngIf=\"dir && icons.ltr\"\n            appearance=\"outline\"\n            aria-label=\"Switch directionality of the element's text\"\n            size=\"s\"\n            tuiButton\n            type=\"button\"\n            class=\"tui-doc-switch-direction\"\n            [iconEnd]=\"icons.ltr.preview\"\n            (click)=\"changeTextDirection()\"\n        >\n            <tui-icon [icon]=\"icons.ltr.direction\" />\n        </button>\n\n        <button\n            appearance=\"secondary\"\n            aria-label=\"Switch between dark and light mode\"\n            size=\"s\"\n            tuiIconButton\n            type=\"button\"\n            class=\"tui-doc-dark-mode-switch\"\n            [iconStart]=\"icon()\"\n            [style.border-radius.%]=\"100\"\n            (click)=\"darkMode.set(!darkMode())\"\n        ></button>\n    </header>\n    <ng-container ngProjectAs=\"tuiOverContent\">\n        <ng-content select=\"tuiOverContent\" />\n    </ng-container>\n    <ng-container ngProjectAs=\"tuiOverDialogs\">\n        <ng-content select=\"tuiOverDialogs\" />\n    </ng-container>\n    <ng-container ngProjectAs=\"tuiOverAlerts\">\n        <ng-content select=\"tuiOverAlerts\" />\n    </ng-container>\n    <ng-container ngProjectAs=\"tuiOverDropdowns\">\n        <ng-content select=\"tuiOverDropdowns\" />\n    </ng-container>\n    <ng-container ngProjectAs=\"tuiOverHints\">\n        <ng-content select=\"tuiOverHints\" />\n    </ng-container>\n</tui-root>\n", styles: ["@keyframes tuiShaking{0%,to{transform:translateZ(0)}10%,30%,50%,70%,90%{transform:translate3d(-.3125rem,0,0)}20%,40%,60%,80%{transform:translate3d(.3125rem,0,0)}}html,body{scroll-padding-top:4rem;background:var(--tui-background-base)}tui-root>tui-scroll-controls>.t-bar_vertical{top:4rem!important}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:.125rem .1875rem;text-wrap:wrap}a code:not(pre code):not(.hljs):not([class*=language-]){color:var(--tui-text-action)}button:focus code,a:focus code{background:var(--tui-background-base)}.tui-doc-page{isolation:isolate;padding-block-start:4rem}tui-doc-navigation.tui-doc-navigation{position:fixed;top:4rem;bottom:0;inline-size:16.25rem;border-inline-end:1px solid var(--tui-border-normal)}@media screen and (max-width: 47.9625em){tui-doc-navigation.tui-doc-navigation{display:none}}.tui-doc-content{margin-inline-start:16.25rem}@media screen and (max-width: 47.9625em){.tui-doc-content{margin-inline-start:0}}.tui-doc-outlet+*{display:block}.tui-doc-switch-direction,.tui-doc-dark-mode-switch{margin-inline-start:1rem}tui-doc-code .hljs-tag{background:none}tui-doc-code .hljs{display:block;overflow-x:auto;padding:.5em;color:var(--tui-text-primary);background-color:var(--tui-background-neutral-1)}tui-doc-code .hljs.hljs-line-numbers{background:transparent}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)}\n"] }]
+            args: [{ selector: 'tui-doc-main', imports: [RouterOutlet, TuiButton, TuiDocHeader, TuiDocNavigation, TuiIcon, 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 select=\"tuiDocHeader\" />\n\n        @if (dir) {\n            <button\n                appearance=\"\"\n                aria-label=\"Switch directionality of the element's text\"\n                size=\"s\"\n                tuiIconButton\n                type=\"button\"\n                class=\"tui-doc-switch-direction\"\n                [style.border-radius.%]=\"100\"\n                (click)=\"changeTextDirection()\"\n            >\n                <tui-icon\n                    [badge]=\"icons.ltr.direction\"\n                    [icon]=\"icons.ltr.preview\"\n                />\n            </button>\n        }\n\n        <button\n            appearance=\"\"\n            aria-label=\"Switch between dark and light mode\"\n            size=\"s\"\n            tuiIconButton\n            type=\"button\"\n            class=\"tui-doc-dark-mode-switch\"\n            [style.border-radius.%]=\"100\"\n            (click)=\"darkMode.set(!darkMode())\"\n        >\n            <tui-icon [icon]=\"icon()\" />\n        </button>\n    </header>\n    <ng-container ngProjectAs=\"tuiOverContent\">\n        <ng-content select=\"tuiOverContent\" />\n    </ng-container>\n</tui-root>\n", styles: ["html,body{background:var(--tui-background-base)}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:.125rem .1875rem;text-wrap:wrap}a code:not(pre code):not(.hljs):not([class*=language-]){color:var(--tui-text-action)}button:focus code,a:focus code{background:var(--tui-background-base)}.tui-doc-page{isolation:isolate;padding-block-start:4rem}tui-doc-navigation.tui-doc-navigation{position:fixed;top:4rem;bottom:0;inline-size:16.5rem;box-sizing:border-box}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)}:host-context([tuiTheme=\"dark\"]) tui-doc-navigation.tui-doc-navigation:before,:host-context([tuiTheme=\"dark\"]) tui-doc-navigation.tui-doc-navigation:after{border:.25rem solid 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}button.tui-doc-switch-direction,button.tui-doc-dark-mode-switch{margin-inline-start:1rem;background:var(--tui-background-base)}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"] }]
         }] });
 
-const [TUI_DOC_PAGE_OPTIONS, tuiDocPageOptionsProvider] = tuiCreateOptions({
-    header: '',
-    package: '',
-    type: '',
-    tags: [],
-    path: '',
-    deprecated: false,
-});
-const TUI_DOC_TABS = new InjectionToken(ngDevMode ? 'TUI_DOC_TABS' : '', {
-    factory: () => () => ({}),
-});
-/**
- * Array if related page titles
- */
-const PAGE_SEE_ALSO = new InjectionToken(ngDevMode ? 'PAGE_SEE_ALSO' : '');
-const PAGE_PROVIDERS = [
-    {
-        provide: PAGE_SEE_ALSO,
-        deps: [ElementRef, TUI_DOC_SEE_ALSO],
-        useFactory: ({ nativeElement }, seeAlsoGroups) => {
-            const currentHeader = nativeElement.getAttribute('header');
-            const groups = seeAlsoGroups.filter((group) => group.includes(currentHeader)) || [];
-            const seeAlsoSet = new Set(groups
-                .join()
-                .split(',')
-                .filter((component) => component && component !== currentHeader));
-            return Array.from(seeAlsoSet);
-        },
-    },
-];
+class TuiDocToc {
+    constructor() {
+        this.el = tuiInjectElement();
+        this.pages = inject(TUI_DOC_MAP_PAGES);
+        this.examples = [];
+        this.active = '';
+        this.toc = signal([]);
+        this.route = inject(ActivatedRoute);
+        this.seeAlso = getSeeAlso();
+        this.text = {
+            toc: inject(TUI_DOC_TOC_TEXT),
+            seeAlso: inject(TUI_DOC_SEE_ALSO_TEXT),
+        };
+    }
+    ngOnInit() {
+        setTimeout(() => {
+            const page = this.el.closest('tui-doc-page');
+            const links = page?.querySelectorAll('tui-doc-example > header .t-link');
+            const toc = Array.from(links || []).map((el) => el.textContent?.trim() || '');
+            this.toc.set(toc);
+        });
+    }
+    isActive(fragment) {
+        return this.active ? fragment === this.active : fragment === this.toc()[0];
+    }
+    getRouterLink(pageTitle) {
+        return this.pages.get(pageTitle)?.route ?? '';
+    }
+    onExample(example) {
+        const toc = this.toc();
+        this.examples = tuiArrayToggle(this.examples, example);
+        this.active =
+            toc.find((item) => this.examples.includes(tuiToKebab(item))) ||
+                toc[toc.length - 1] ||
+                '';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TuiDocToc, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: TuiDocToc, isStandalone: true, selector: "tui-doc-toc", host: { listeners: { "document:tui-example": "onExample($event.detail)" } }, ngImport: i0, template: "@if (toc().length > 1) {\n    <h2 tuiTitle=\"s\">\n        <b>{{ text.toc }}</b>\n    </h2>\n    <nav>\n        @for (item of toc(); track $index) {\n            <a\n                appearance=\"action-grayscale\"\n                routerLink=\".\"\n                tuiLink\n                type=\"button\"\n                [class._active]=\"isActive(item)\"\n                [fragment]=\"item | tuiKebab\"\n                [relativeTo]=\"route.firstChild ?? route\"\n            >\n                {{ item }}\n            </a>\n        }\n    </nav>\n    @if (seeAlso.length) {\n        <h2 tuiTitle=\"s\">\n            <b>{{ text.seeAlso }}</b>\n        </h2>\n        @for (item of seeAlso; track $index) {\n            <a\n                tuiLink\n                [innerText]=\"item\"\n                [routerLink]=\"getRouterLink(item)\"\n            ></a>\n            @if (!$last) {\n                <span>{{ ', ' }}</span>\n            }\n        }\n    }\n}\n", styles: [":host{position:sticky;top:6rem;display:block;float:inline-end;inline-size:14rem;margin-inline-start:5rem;font:var(--tui-font-body-s)}:host:empty{display:none}@media screen and (max-width: 1279.4px){:host{display:none}}nav{display:flex;flex-direction:column;box-shadow:inset 1px 0 var(--tui-border-normal);margin:1rem 0 2rem;clip-path:inset(.5rem -1rem)}nav [tuiLink]{position:relative;padding:.375rem 1rem}nav [tuiLink]._active{font-weight:700;color:var(--tui-text-primary)}nav [tuiLink]._active:before{position:absolute;display:block;inset-inline-start:-1px;inset-block:.5rem;inline-size:.1875rem;block-size:1rem;background:var(--tui-text-primary);border-radius:1rem;padding:0}[tuiTitle]{margin:.5rem 0}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "pipe", type: TuiDocKebabPipe, name: "tuiKebab" }, { kind: "directive", type: TuiLink, selector: "a[tuiLink], button[tuiLink]" }, { kind: "directive", type: TuiTitle, selector: "[tuiTitle]", inputs: ["tuiTitle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TuiDocToc, decorators: [{
+            type: Component,
+            args: [{ selector: 'tui-doc-toc', imports: [RouterLink, TuiDocKebabPipe, TuiLink, TuiTitle], changeDetection: ChangeDetectionStrategy.OnPush, host: { '(document:tui-example)': 'onExample($event.detail)' }, template: "@if (toc().length > 1) {\n    <h2 tuiTitle=\"s\">\n        <b>{{ text.toc }}</b>\n    </h2>\n    <nav>\n        @for (item of toc(); track $index) {\n            <a\n                appearance=\"action-grayscale\"\n                routerLink=\".\"\n                tuiLink\n                type=\"button\"\n                [class._active]=\"isActive(item)\"\n                [fragment]=\"item | tuiKebab\"\n                [relativeTo]=\"route.firstChild ?? route\"\n            >\n                {{ item }}\n            </a>\n        }\n    </nav>\n    @if (seeAlso.length) {\n        <h2 tuiTitle=\"s\">\n            <b>{{ text.seeAlso }}</b>\n        </h2>\n        @for (item of seeAlso; track $index) {\n            <a\n                tuiLink\n                [innerText]=\"item\"\n                [routerLink]=\"getRouterLink(item)\"\n            ></a>\n            @if (!$last) {\n                <span>{{ ', ' }}</span>\n            }\n        }\n    }\n}\n", styles: [":host{position:sticky;top:6rem;display:block;float:inline-end;inline-size:14rem;margin-inline-start:5rem;font:var(--tui-font-body-s)}:host:empty{display:none}@media screen and (max-width: 1279.4px){:host{display:none}}nav{display:flex;flex-direction:column;box-shadow:inset 1px 0 var(--tui-border-normal);margin:1rem 0 2rem;clip-path:inset(.5rem -1rem)}nav [tuiLink]{position:relative;padding:.375rem 1rem}nav [tuiLink]._active{font-weight:700;color:var(--tui-text-primary)}nav [tuiLink]._active:before{position:absolute;display:block;inset-inline-start:-1px;inset-block:.5rem;inline-size:.1875rem;block-size:1rem;background:var(--tui-text-primary);border-radius:1rem;padding:0}[tuiTitle]{margin:.5rem 0}\n"] }]
+        }] });
+function getSeeAlso() {
+    const current = inject(TuiDocPage).header() || '';
+    const groups = inject(TUI_DOC_SEE_ALSO).filter((group) => group.includes(current)) || [];
+    return Array.from(new Set(groups
+        .join()
+        .split(',')
+        .filter((component) => component && component !== current)));
+}
+
+const TUI_DOC_TABS = new InjectionToken(ngDevMode ? 'TUI_DOC_TABS' : '', { factory: () => () => ({}) });
 
 class TuiDocPageTabConnector {
     constructor() {
+        this.pageTab = input();
         this.template = inject((TemplateRef));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiDocPageTabConnector, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: TuiDocPageTabConnector, isStandalone: true, selector: "ng-template[pageTab]", inputs: { pageTab: "pageTab" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TuiDocPageTabConnector, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.18", type: TuiDocPageTabConnector, isStandalone: true, selector: "ng-template[pageTab]", inputs: { pageTab: { classPropertyName: "pageTab", publicName: "pageTab", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiDocPageTabConnector, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TuiDocPageTabConnector, decorators: [{
             type: Directive,
-            args: [{
-                    standalone: true,
-                    selector: 'ng-template[pageTab]',
-                }]
-        }], propDecorators: { pageTab: [{
-                type: Input
-            }] } });
+            args: [{ selector: 'ng-template[pageTab]' }]
+        }] });
 
 class TuiDocPage {
     constructor() {
-        this.options = inject(TUI_DOC_PAGE_OPTIONS);
+        this.tabConnectors = contentChildren(TuiDocPageTabConnector);
         this.tabs = inject(TUI_DOC_TABS)(inject(ActivatedRoute).snapshot);
         this.supportLanguage = inject(TUI_DOC_SUPPORT_LANGUAGE);
         this.defaultTabs = inject(TUI_DOC_DEFAULT_TABS);
         this.from = / /g;
         this.to = '_';
-        this.header = this.options.header;
-        this.package = this.options.package;
-        this.type = this.options.type;
-        this.tags = this.options.tags;
-        this.path = this.options.path;
-        this.deprecated = this.options.deprecated;
-        this.tabConnectors = EMPTY_QUERY;
-        this.activeItemIndex = 0;
-        this.seeAlso = inject(PAGE_SEE_ALSO);
-    }
-    get showSeeAlso() {
-        return !!this.seeAlso.length && this.activeItemIndex === 0;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiDocPage, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiDocPage, isStandalone: true, selector: "tui-doc-page", inputs: { header: "header", package: "package", type: "type", tags: "tags", path: "path", deprecated: "deprecated" }, providers: PAGE_PROVIDERS, queries: [{ propertyName: "tabConnectors", predicate: TuiDocPageTabConnector }], ngImport: i0, template: "<header class=\"t-header\">\n    <h1\n        *ngIf=\"header\"\n        class=\"t-title\"\n    >\n        {{ header }}\n        <tui-chip\n            *ngIf=\"!!deprecated || deprecated === ''\"\n            appearance=\"custom\"\n            size=\"xs\"\n            class=\"t-tag t-tag_deprecated\"\n        >\n            deprecated\n        </tui-chip>\n        <tui-chip\n            *ngIf=\"package\"\n            appearance=\"custom\"\n            size=\"xs\"\n            class=\"t-tag t-tag_package\"\n            [style.background]=\"package | tuiAutoColor\"\n        >\n            {{ package }}\n        </tui-chip>\n        <tui-chip\n            *ngFor=\"let tag of tags\"\n            appearance=\"custom\"\n            size=\"xs\"\n            class=\"t-tag t-tag_package\"\n            [style.background]=\"tag | tuiAutoColor\"\n        >\n            {{ tag }}\n        </tui-chip>\n    </h1>\n    <tui-tabs-with-more\n        *ngIf=\"tabConnectors.length\"\n        class=\"t-tabs\"\n        [(activeItemIndex)]=\"activeItemIndex\"\n    >\n        <ng-container *ngFor=\"let tab of tabConnectors; first as first; index as index\">\n            <ng-container *ngIf=\"tab.pageTab || defaultTabs[index] as tabName\">\n                <a\n                    *tuiItem\n                    routerLinkActive\n                    tuiTab\n                    [routerLink]=\"first ? './' : (tabName | tuiReplace: from : to)\"\n                    [routerLinkActiveOptions]=\"{exact: first}\"\n                >\n                    {{ tabName }}\n                </a>\n            </ng-container>\n        </ng-container>\n        <ng-container *ngFor=\"let tab of tabs | keyvalue\">\n            <a\n                *tuiItem\n                routerLinkActive\n                tuiTab\n                [routerLink]=\"tab.key\"\n            >\n                {{ tab.key }}\n            </a>\n        </ng-container>\n    </tui-tabs-with-more>\n\n    <div\n        *ngIf=\"package || path || type\"\n        class=\"t-right-side\"\n    >\n        <tui-doc-source-code\n            class=\"t-source-code\"\n            [header]=\"header\"\n            [package]=\"package\"\n            [path]=\"path\"\n            [type]=\"type\"\n        />\n\n        <tui-doc-language-switcher *ngIf=\"supportLanguage.has(header)\" />\n    </div>\n</header>\n<div class=\"t-content\">\n    <ng-content />\n    <tui-doc-see-also\n        *ngIf=\"showSeeAlso\"\n        class=\"t-see-also\"\n        [seeAlso]=\"seeAlso\"\n    />\n    <ng-container *ngFor=\"let tab of tabConnectors; index as index\">\n        <ng-container\n            *ngIf=\"index === activeItemIndex\"\n            [ngTemplateOutlet]=\"tab.template\"\n        />\n    </ng-container>\n    <ng-container *ngFor=\"let tab of tabs | keyvalue; index as index\">\n        <ng-container *ngIf=\"index + tabConnectors.length === activeItemIndex\">\n            <ng-container *polymorpheusOutlet=\"tab.value as text\">{{ text }}</ng-container>\n        </ng-container>\n    </ng-container>\n</div>\n", styles: [":host{display:flex;flex-direction:column;min-block-size:0;flex-basis:0;flex-grow:1;font:var(--tui-font-text-m)}.t-header{display:flex;font:var(--tui-font-heading-3);flex-wrap:wrap;color:var(--tui-text-primary);box-shadow:inset 0 -1px 0 0 var(--tui-border-normal);box-sizing:border-box;flex-shrink:0;margin:0 min(10vw,8.75rem)}@media screen and (max-width: 47.9625em){.t-header{font:var(--tui-font-heading-4);margin:0}}@media screen and (max-width: 47.9625em){.t-header:not(:empty){min-block-size:4.5rem;padding:0 1.25rem}}.t-title{min-inline-size:100%;padding:3.75rem 0 0;font-size:inherit;margin:0}@media screen and (max-width: 47.9625em){.t-title{padding:1.25rem 0 0}}.t-tag{vertical-align:middle;text-transform:uppercase;margin-inline-end:.5rem}.t-tag_deprecated{background-color:var(--tui-status-negative);color:#fff}.t-tag.t-tag_package{color:#000}.t-tabs{flex:1;margin:1.125rem .3125rem 0 0;box-shadow:none}@media screen and (max-width: 47.9625em){.t-tabs{margin-block-start:.25rem}}.t-content{padding:2rem 0;margin:0 min(10vw,8.75rem)}@media screen and (max-width: 47.9625em){.t-content{padding:2rem 1.25rem;margin:0}}.t-see-also{min-inline-size:18.75rem;inline-size:30%;float:inline-end;margin:0 0 1rem;margin-inline-start:1.5rem}@media screen and (max-width: 47.9625em){.t-see-also{float:none;inline-size:100%;margin:0 0 1.5rem}}.t-right-side{display:flex;gap:1rem;align-items:center;align-self:center;margin-inline-start:auto}.t-source-code{block-size:3.125rem}\n"], dependencies: [{ kind: "pipe", type: KeyValuePipe, name: "keyvalue" }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: PolymorpheusOutlet, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "pipe", type: TuiAutoColorPipe, name: "tuiAutoColor" }, { kind: "directive", type: TuiChip, selector: "tui-chip,[tuiChip]", inputs: ["size"] }, { kind: "component", type: TuiDocLanguageSwitcher, selector: "tui-doc-language-switcher" }, { kind: "component", type: TuiDocSeeAlso, selector: "tui-doc-see-also", inputs: ["seeAlso"] }, { kind: "component", type: TuiDocSourceCode, selector: "tui-doc-source-code", inputs: ["header", "package", "type", "path"] }, { kind: "pipe", type: TuiReplacePipe, name: "tuiReplace" }, { kind: "directive", type: i1$2.TuiItem, selector: "[tuiItem]" }, { kind: "directive", type: i2$1.TuiTab, selector: "a[tuiTab]:not([routerLink]), a[tuiTab][routerLink][routerLinkActive], button[tuiTab]" }, { kind: "component", type: i2$1.TuiTabsWithMore, selector: "tui-tabs-with-more, nav[tuiTabsWithMore]", inputs: ["size", "moreContent", "dropdownContent", "underline", "itemsLimit", "activeItemIndex"], outputs: ["activeItemIndexChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        this.header = input('');
+        this.package = input('');
+        this.type = input('');
+        this.tags = input([]);
+        this.path = input('');
+        this.activeItemIndex = model(0);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TuiDocPage, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: TuiDocPage, isStandalone: true, selector: "tui-doc-page", inputs: { header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, package: { classPropertyName: "package", publicName: "package", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, tags: { classPropertyName: "tags", publicName: "tags", isSignal: true, isRequired: false, transformFunction: null }, path: { classPropertyName: "path", publicName: "path", isSignal: true, isRequired: false, transformFunction: null }, activeItemIndex: { classPropertyName: "activeItemIndex", publicName: "activeItemIndex", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeItemIndex: "activeItemIndexChange" }, queries: [{ propertyName: "tabConnectors", predicate: TuiDocPageTabConnector, isSignal: true }], ngImport: i0, template: "<header\n    tuiHeader\n    class=\"t-header\"\n>\n    @if (header()) {\n        <hgroup tuiTitle>\n            <h1>\n                {{ header() }}\n                @if (package()) {\n                    <span\n                        appearance=\"custom\"\n                        size=\"m\"\n                        tuiBadge\n                        class=\"t-badge\"\n                        [style.background]=\"package() | tuiAutoColor\"\n                    >\n                        {{ package() }}\n                    </span>\n                }\n                @for (tag of tags(); track $index) {\n                    <span\n                        appearance=\"custom\"\n                        size=\"m\"\n                        tuiBadge\n                        class=\"t-badge\"\n                        [style.background]=\"tag | tuiAutoColor\"\n                    >\n                        {{ tag }}\n                    </span>\n                }\n            </h1>\n            <p class=\"t-navigation\">\n                @if (tabConnectors().length > 1) {\n                    <tui-segmented [(activeItemIndex)]=\"activeItemIndex\">\n                        @for (tab of tabConnectors(); track tab) {\n                            @if (tab.pageTab() || defaultTabs[$index]; as tabName) {\n                                <a\n                                    routerLinkActive\n                                    [routerLink]=\"$first ? './' : tabName.replace(from, to)\"\n                                    [routerLinkActiveOptions]=\"{exact: $first}\"\n                                >\n                                    {{ tabName }}\n                                </a>\n                            }\n                        }\n                        @for (tab of tabs | keyvalue; track tab) {\n                            <a\n                                routerLinkActive\n                                [routerLink]=\"tab.key\"\n                            >\n                                {{ tab.key }}\n                            </a>\n                        }\n                    </tui-segmented>\n                }\n\n                @if (package() || path() || type()) {\n                    @if (supportLanguage.has(header())) {\n                        <tui-doc-language-switcher />\n                    }\n                    <tui-doc-source-code\n                        class=\"t-source-code\"\n                        [header]=\"header()\"\n                        [package]=\"package()\"\n                        [path]=\"path()\"\n                        [type]=\"type()\"\n                    />\n                }\n            </p>\n        </hgroup>\n    }\n</header>\n<ng-content />\n@for (tab of tabConnectors(); track tab) {\n    @if ($index === activeItemIndex()) {\n        <tui-doc-toc />\n        <ng-container [ngTemplateOutlet]=\"tab.template\" />\n    }\n}\n@for (tab of tabs | keyvalue; track tab) {\n    @if ($index + tabConnectors().length === activeItemIndex()) {\n        <ng-container *polymorpheusOutlet=\"tab.value as text\">{{ text }}</ng-container>\n    }\n}\n", styles: [":host{display:block;max-inline-size:70rem;font:var(--tui-font-body-m);padding:3rem;margin:0 auto}@media screen and (max-width: 767.4px){:host{padding:1rem 1.5rem}}.t-header{margin-block-end:2rem}.t-navigation{display:flex;gap:.625rem;margin-block-start:1rem}@media screen and (max-width: 767.4px){.t-navigation{margin:.5rem 0 1rem}}.t-badge{vertical-align:middle;text-transform:uppercase;margin-inline-end:.5rem;color:#000}.t-content{padding:1rem 2rem}@media screen and (max-width: 767.4px){.t-content{padding:1rem 1.5rem}}\n"], dependencies: [{ kind: "pipe", type: KeyValuePipe, name: "keyvalue" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: PolymorpheusOutlet, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "pipe", type: TuiAutoColorPipe, name: "tuiAutoColor" }, { kind: "directive", type: TuiBadge, selector: "[tuiBadge],tui-icon[tuiBadge]", inputs: ["size"] }, { kind: "component", type: TuiDocLanguageSwitcher, selector: "tui-doc-language-switcher" }, { kind: "component", type: TuiDocSourceCode, selector: "tui-doc-source-code", inputs: ["header", "package", "type", "path"] }, { kind: "component", type: TuiDocToc, selector: "tui-doc-toc" }, { kind: "directive", type: TuiHeader, selector: "[tuiHeader]", inputs: ["tuiHeader"] }, { kind: "component", type: TuiSegmented, selector: "tui-segmented", inputs: ["size", "activeItemIndex"], outputs: ["activeItemIndexChange"] }, { kind: "directive", type: TuiTitle, selector: "[tuiTitle]", inputs: ["tuiTitle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiDocPage, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TuiDocPage, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'tui-doc-page', imports: [
+            args: [{ selector: 'tui-doc-page', imports: [
                         KeyValuePipe,
-                        NgForOf,
-                        NgIf,
                         NgTemplateOutlet,
                         PolymorpheusOutlet,
                         RouterLink,
                         RouterLinkActive,
                         TuiAutoColorPipe,
-                        TuiChip,
+                        TuiBadge,
                         TuiDocLanguageSwitcher,
-                        TuiDocSeeAlso,
                         TuiDocSourceCode,
-                        TuiReplacePipe,
-                        TuiTabs,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, providers: PAGE_PROVIDERS, template: "<header class=\"t-header\">\n    <h1\n        *ngIf=\"header\"\n        class=\"t-title\"\n    >\n        {{ header }}\n        <tui-chip\n            *ngIf=\"!!deprecated || deprecated === ''\"\n            appearance=\"custom\"\n            size=\"xs\"\n            class=\"t-tag t-tag_deprecated\"\n        >\n            deprecated\n        </tui-chip>\n        <tui-chip\n            *ngIf=\"package\"\n            appearance=\"custom\"\n            size=\"xs\"\n            class=\"t-tag t-tag_package\"\n            [style.background]=\"package | tuiAutoColor\"\n        >\n            {{ package }}\n        </tui-chip>\n        <tui-chip\n            *ngFor=\"let tag of tags\"\n            appearance=\"custom\"\n            size=\"xs\"\n            class=\"t-tag t-tag_package\"\n            [style.background]=\"tag | tuiAutoColor\"\n        >\n            {{ tag }}\n        </tui-chip>\n    </h1>\n    <tui-tabs-with-more\n        *ngIf=\"tabConnectors.length\"\n        class=\"t-tabs\"\n        [(activeItemIndex)]=\"activeItemIndex\"\n    >\n        <ng-container *ngFor=\"let tab of tabConnectors; first as first; index as index\">\n            <ng-container *ngIf=\"tab.pageTab || defaultTabs[index] as tabName\">\n                <a\n                    *tuiItem\n                    routerLinkActive\n                    tuiTab\n                    [routerLink]=\"first ? './' : (tabName | tuiReplace: from : to)\"\n                    [routerLinkActiveOptions]=\"{exact: first}\"\n                >\n                    {{ tabName }}\n                </a>\n            </ng-container>\n        </ng-container>\n        <ng-container *ngFor=\"let tab of tabs | keyvalue\">\n            <a\n                *tuiItem\n                routerLinkActive\n                tuiTab\n                [routerLink]=\"tab.key\"\n            >\n                {{ tab.key }}\n            </a>\n        </ng-container>\n    </tui-tabs-with-more>\n\n    <div\n        *ngIf=\"package || path || type\"\n        class=\"t-right-side\"\n    >\n        <tui-doc-source-code\n            class=\"t-source-code\"\n            [header]=\"header\"\n            [package]=\"package\"\n            [path]=\"path\"\n            [type]=\"type\"\n        />\n\n        <tui-doc-language-switcher *ngIf=\"supportLanguage.has(header)\" />\n    </div>\n</header>\n<div class=\"t-content\">\n    <ng-content />\n    <tui-doc-see-also\n        *ngIf=\"showSeeAlso\"\n        class=\"t-see-also\"\n        [seeAlso]=\"seeAlso\"\n    />\n    <ng-container *ngFor=\"let tab of tabConnectors; index as index\">\n        <ng-container\n            *ngIf=\"index === activeItemIndex\"\n            [ngTemplateOutlet]=\"tab.template\"\n        />\n    </ng-container>\n    <ng-container *ngFor=\"let tab of tabs | keyvalue; index as index\">\n        <ng-container *ngIf=\"index + tabConnectors.length === activeItemIndex\">\n            <ng-container *polymorpheusOutlet=\"tab.value as text\">{{ text }}</ng-container>\n        </ng-container>\n    </ng-container>\n</div>\n", styles: [":host{display:flex;flex-direction:column;min-block-size:0;flex-basis:0;flex-grow:1;font:var(--tui-font-text-m)}.t-header{display:flex;font:var(--tui-font-heading-3);flex-wrap:wrap;color:var(--tui-text-primary);box-shadow:inset 0 -1px 0 0 var(--tui-border-normal);box-sizing:border-box;flex-shrink:0;margin:0 min(10vw,8.75rem)}@media screen and (max-width: 47.9625em){.t-header{font:var(--tui-font-heading-4);margin:0}}@media screen and (max-width: 47.9625em){.t-header:not(:empty){min-block-size:4.5rem;padding:0 1.25rem}}.t-title{min-inline-size:100%;padding:3.75rem 0 0;font-size:inherit;margin:0}@media screen and (max-width: 47.9625em){.t-title{padding:1.25rem 0 0}}.t-tag{vertical-align:middle;text-transform:uppercase;margin-inline-end:.5rem}.t-tag_deprecated{background-color:var(--tui-status-negative);color:#fff}.t-tag.t-tag_package{color:#000}.t-tabs{flex:1;margin:1.125rem .3125rem 0 0;box-shadow:none}@media screen and (max-width: 47.9625em){.t-tabs{margin-block-start:.25rem}}.t-content{padding:2rem 0;margin:0 min(10vw,8.75rem)}@media screen and (max-width: 47.9625em){.t-content{padding:2rem 1.25rem;margin:0}}.t-see-also{min-inline-size:18.75rem;inline-size:30%;float:inline-end;margin:0 0 1rem;margin-inline-start:1.5rem}@media screen and (max-width: 47.9625em){.t-see-also{float:none;inline-size:100%;margin:0 0 1.5rem}}.t-right-side{display:flex;gap:1rem;align-items:center;align-self:center;margin-inline-start:auto}.t-source-code{block-size:3.125rem}\n"] }]
-        }], propDecorators: { header: [{
-                type: Input
-            }], package: [{
-                type: Input
-            }], type: [{
-                type: Input
-            }], tags: [{
-                type: Input
-            }], path: [{
-                type: Input
-            }], deprecated: [{
-                type: Input
-            }], tabConnectors: [{
-                type: ContentChildren,
-                args: [TuiDocPageTabConnector]
-            }] } });
+                        TuiDocToc,
+                        TuiHeader,
+                        TuiSegmented,
+                        TuiTitle,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<header\n    tuiHeader\n    class=\"t-header\"\n>\n    @if (header()) {\n        <hgroup tuiTitle>\n            <h1>\n                {{ header() }}\n                @if (package()) {\n                    <span\n                        appearance=\"custom\"\n                        size=\"m\"\n                        tuiBadge\n                        class=\"t-badge\"\n                        [style.background]=\"package() | tuiAutoColor\"\n                    >\n                        {{ package() }}\n                    </span>\n                }\n                @for (tag of tags(); track $index) {\n                    <span\n                        appearance=\"custom\"\n                        size=\"m\"\n                        tuiBadge\n                        class=\"t-badge\"\n                        [style.background]=\"tag | tuiAutoColor\"\n                    >\n                        {{ tag }}\n                    </span>\n                }\n            </h1>\n            <p class=\"t-navigation\">\n                @if (tabConnectors().length > 1) {\n                    <tui-segmented [(activeItemIndex)]=\"activeItemIndex\">\n                        @for (tab of tabConnectors(); track tab) {\n                            @if (tab.pageTab() || defaultTabs[$index]; as tabName) {\n                                <a\n                                    routerLinkActive\n                                    [routerLink]=\"$first ? './' : tabName.replace(from, to)\"\n                                    [routerLinkActiveOptions]=\"{exact: $first}\"\n                                >\n                                    {{ tabName }}\n                                </a>\n                            }\n                        }\n                        @for (tab of tabs | keyvalue; track tab) {\n                            <a\n                                routerLinkActive\n                                [routerLink]=\"tab.key\"\n                            >\n                                {{ tab.key }}\n                            </a>\n                        }\n                    </tui-segmented>\n                }\n\n                @if (package() || path() || type()) {\n                    @if (supportLanguage.has(header())) {\n                        <tui-doc-language-switcher />\n                    }\n                    <tui-doc-source-code\n                        class=\"t-source-code\"\n                        [header]=\"header()\"\n                        [package]=\"package()\"\n                        [path]=\"path()\"\n                        [type]=\"type()\"\n                    />\n                }\n            </p>\n        </hgroup>\n    }\n</header>\n<ng-content />\n@for (tab of tabConnectors(); track tab) {\n    @if ($index === activeItemIndex()) {\n        <tui-doc-toc />\n        <ng-container [ngTemplateOutlet]=\"tab.template\" />\n    }\n}\n@for (tab of tabs | keyvalue; track tab) {\n    @if ($index + tabConnectors().length === activeItemIndex()) {\n        <ng-container *polymorpheusOutlet=\"tab.value as text\">{{ text }}</ng-container>\n    }\n}\n", styles: [":host{display:block;max-inline-size:70rem;font:var(--tui-font-body-m);padding:3rem;margin:0 auto}@media screen and (max-width: 767.4px){:host{padding:1rem 1.5rem}}.t-header{margin-block-end:2rem}.t-navigation{display:flex;gap:.625rem;margin-block-start:1rem}@media screen and (max-width: 767.4px){.t-navigation{margin:.5rem 0 1rem}}.t-badge{vertical-align:middle;text-transform:uppercase;margin-inline-end:.5rem;color:#000}.t-content{padding:1rem 2rem}@media screen and (max-width: 767.4px){.t-content{padding:1rem 1.5rem}}\n"] }]
+        }] });
 
 const TUI_THEME_KEY = new InjectionToken(ngDevMode ? 'TUI_THEME_KEY' : '', {
     factory: () => 'data-tui-theme',
 });
-const TUI_THEMES = new InjectionToken(ngDevMode ? 'TUI_THEMES' : '', {
-    factory: () => ({}),
+const TUI_THEME = new InjectionToken(ngDevMode ? 'TUI_THEME' : '', {
+    factory: () => inject(WA_LOCAL_STORAGE)?.getItem(inject(TUI_THEME_KEY)) || 'Taiga UI',
 });
-function tuiDocThemeProvider() {
-    return {
-        provide: TUI_THEME,
-        useFactory: () => inject(WA_LOCAL_STORAGE)?.getItem(inject(TUI_THEME_KEY)) || 'Taiga UI',
-    };
-}
+const TUI_THEMES = new InjectionToken(ngDevMode ? 'TUI_THEMES' : '', { factory: () => ({}) });
 class TuiDocThemeSwitcher {
     constructor() {
         this.storage = inject(WA_LOCAL_STORAGE);
@@ -1455,22 +1019,23 @@ class TuiDocThemeSwitcher {
         this.theme = inject(TUI_THEME);
         this.themes = inject(TUI_THEMES);
         this.keys = Object.keys(this.themes);
+        inject(DOCUMENT).documentElement.setAttribute(this.key, this.theme);
     }
     onTheme(theme) {
         this.storage?.setItem(this.key, theme);
         this.location.reload();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiDocThemeSwitcher, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiDocThemeSwitcher, isStandalone: true, selector: "tui-doc-theme-switcher", ngImport: i0, template: "<tui-select\n    [ngModel]=\"theme\"\n    (ngModelChange)=\"onTheme($event)\"\n>\n    <ng-content />\n    <tui-data-list *tuiDataList>\n        <button\n            *ngFor=\"let key of keys\"\n            tuiOption\n            type=\"button\"\n            [value]=\"key\"\n        >\n            <img\n                alt=\"\"\n                [src]=\"themes[key]\"\n                [style.margin-inline-end.rem]=\"0.5\"\n                [style.width.rem]=\"1.75\"\n            />\n            {{ key }}\n        </button>\n    </tui-data-list>\n</tui-select>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i3$1.TuiDataListComponent, selector: "tui-data-list", inputs: ["emptyContent", "size"] }, { kind: "directive", type: i3$1.TuiDataListDirective, selector: "ng-template[tuiDataList]" }, { kind: "component", type: i3$1.TuiOption, selector: "button[tuiOption]:not([new]), a[tuiOption]:not([new]), label[tuiOption]:not([new])", inputs: ["disabled", "value"] }, { kind: "ngmodule", type: TuiSelectModule }, { kind: "component", type: i5.TuiSelectComponent, selector: "tui-select", inputs: ["stringify", "identityMatcher", "valueContent"] }, { kind: "directive", type: i5.TuiSelectDirective, selector: "tui-select" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TuiDocThemeSwitcher, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: TuiDocThemeSwitcher, isStandalone: true, selector: "tui-doc-theme-switcher", ngImport: i0, template: "<tui-textfield\n    tuiChevron\n    [tuiTextfieldCleaner]=\"false\"\n>\n    <label tuiLabel>\n        <ng-content />\n    </label>\n    <input\n        tuiSelect\n        [ngModel]=\"theme\"\n        (ngModelChange)=\"onTheme($event)\"\n    />\n    <tui-data-list *tuiDropdown>\n        @for (key of keys; track key) {\n            <button\n                tuiOption\n                type=\"button\"\n                [value]=\"key\"\n            >\n                <img\n                    alt=\"\"\n                    [src]=\"themes[key]\"\n                    [style.margin-inline-end.rem]=\"0.5\"\n                    [style.width.rem]=\"1.75\"\n                />\n                {{ key }}\n            </button>\n        }\n    </tui-data-list>\n</tui-textfield>\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.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$2.TuiDataListComponent, selector: "tui-data-list", inputs: ["emptyContent", "size"] }, { kind: "directive", type: i2$2.TuiOption, selector: "button[tuiOption], a[tuiOption], label[tuiOption]", inputs: ["disabled"] }, { kind: "directive", type: i2$2.TuiOptionWithValue, selector: "button[tuiOption][value], a[tuiOption][value], label[tuiOption][value]", inputs: ["disabled", "value"] }, { kind: "directive", type: i3$1.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]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiDocThemeSwitcher, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TuiDocThemeSwitcher, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'tui-doc-theme-switcher', imports: [FormsModule, NgForOf, TuiDataList, TuiSelectModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<tui-select\n    [ngModel]=\"theme\"\n    (ngModelChange)=\"onTheme($event)\"\n>\n    <ng-content />\n    <tui-data-list *tuiDataList>\n        <button\n            *ngFor=\"let key of keys\"\n            tuiOption\n            type=\"button\"\n            [value]=\"key\"\n        >\n            <img\n                alt=\"\"\n                [src]=\"themes[key]\"\n                [style.margin-inline-end.rem]=\"0.5\"\n                [style.width.rem]=\"1.75\"\n            />\n            {{ key }}\n        </button>\n    </tui-data-list>\n</tui-select>\n" }]
-        }] });
+            args: [{ selector: 'tui-doc-theme-switcher', imports: [FormsModule, TuiChevron, TuiDataList, TuiSelect, TuiTextfield], changeDetection: ChangeDetectionStrategy.OnPush, template: "<tui-textfield\n    tuiChevron\n    [tuiTextfieldCleaner]=\"false\"\n>\n    <label tuiLabel>\n        <ng-content />\n    </label>\n    <input\n        tuiSelect\n        [ngModel]=\"theme\"\n        (ngModelChange)=\"onTheme($event)\"\n    />\n    <tui-data-list *tuiDropdown>\n        @for (key of keys; track key) {\n            <button\n                tuiOption\n                type=\"button\"\n                [value]=\"key\"\n            >\n                <img\n                    alt=\"\"\n                    [src]=\"themes[key]\"\n                    [style.margin-inline-end.rem]=\"0.5\"\n                    [style.width.rem]=\"1.75\"\n                />\n                {{ key }}\n            </button>\n        }\n    </tui-data-list>\n</tui-textfield>\n" }]
+        }], ctorParameters: () => [] });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { NAVIGATION_ITEMS, NAVIGATION_LABELS, NAVIGATION_PROVIDERS, NAVIGATION_TITLE, PAGE_PROVIDERS, PAGE_SEE_ALSO, TUI_DOC_EXAMPLE_DEFAULT_OPTIONS, TUI_DOC_EXAMPLE_OPTIONS, TUI_DOC_PAGE_OPTIONS, TUI_DOC_TABS, TUI_THEMES, TUI_THEME_KEY, TuiDocAPI, TuiDocAPIItem, TuiDocAPINumberItem, TuiDocCode, TuiDocCopy, TuiDocDemo, TuiDocDocumentation, TuiDocDocumentationPropertyConnector, TuiDocExample, TuiDocExampleGetTabsPipe, TuiDocHeader, TuiDocLanguageSwitcher, TuiDocMain, TuiDocNavigation, TuiDocPage, TuiDocPageTabConnector, TuiDocScrollIntoViewLink, TuiDocSeeAlso, TuiDocSourceCode, TuiDocTab, TuiDocThemeSwitcher, TuiDocTypeReferencePipe, TuiGetColorPipe, TuiGetOpacityPipe, TuiInspectPipe, TuiIsOptionalPipe, TuiIsPrimitivePolymorpheusContentPipe, TuiShowCleanerPipe, TuiStripOptionalPipe, tuiDocExampleOptionsProvider, tuiDocPageOptionsProvider, tuiDocThemeProvider };
+export { NAVIGATION_ITEMS, NAVIGATION_LABELS, NAVIGATION_PROVIDERS, NAVIGATION_TITLE, TUI_DOC_EXAMPLE_DEFAULT_OPTIONS, TUI_DOC_EXAMPLE_OPTIONS, TUI_DOC_TABS, TUI_THEME, TUI_THEMES, TUI_THEME_KEY, TuiDocAPI, TuiDocAPIItem, TuiDocAPINumberItem, TuiDocCode, TuiDocCopy, TuiDocDemo, TuiDocExample, TuiDocExampleGetTabsPipe, TuiDocHeader, TuiDocLanguageSwitcher, TuiDocMain, TuiDocNavigation, TuiDocPage, TuiDocPageTabConnector, TuiDocScrollIntoViewLink, TuiDocSourceCode, TuiDocTab, TuiDocThemeSwitcher, TuiDocToc, TuiJsonPipe, tuiDocExampleOptionsProvider };
 //# sourceMappingURL=taiga-ui-addon-doc-components.mjs.map