@taiga-ui/addon-doc 5.23.0 → 5.24.0-canary.3f61c9e

package/components/navigation/navigation.component.d.ts

@@ -1,12 +1,18 @@
 import { type Signal } from '@angular/core';
 import { FormControl } from '@angular/forms';
-import { type TuiDocRoutePage, type TuiDocRoutePages } from '@taiga-ui/addon-doc/types';
+import { type TuiDocRoutePage, type TuiDocRoutePageGroup, type TuiDocRoutePages } from '@taiga-ui/addon-doc/types';
 import { TuiDrawer } from '@taiga-ui/kit/components/drawer';
 import * as i0 from "@angular/core";
+interface TuiDocNavigationBadge {
+    readonly label: string;
+    readonly appearance: 'info' | 'positive';
+}
 export declare class TuiDocNavigation {
     private readonly searchInput;
     private readonly router;
     private readonly doc;
+    private readonly current;
+    private readonly sectionLeads;
     protected readonly open: import("@angular/core").WritableSignal<boolean>;
     protected menuOpen: boolean;
     protected readonly drawer: TuiDrawer | null;
@@ -18,6 +24,8 @@ export declare class TuiDocNavigation {
     protected readonly pagesIcons: Record<string, string>;
     protected readonly icons: import("@taiga-ui/core/tokens").TuiCommonIcons;
     protected readonly flat: readonly (readonly TuiDocRoutePage[])[];
+    protected readonly sectionBadges: (TuiDocNavigationBadge | null)[];
+    protected readonly itemBadges: ReadonlyMap<TuiDocRoutePage | TuiDocRoutePageGroup, TuiDocNavigationBadge>;
     protected openPagesArr: boolean[];
     protected openPagesGroupsArr: boolean[];
     protected active: string;
@@ -28,10 +36,17 @@ export declare class TuiDocNavigation {
     protected get itemsWithoutSections(): TuiDocRoutePages;
     protected $pages<T extends TuiDocRoutePage[]>(pages: T): readonly TuiDocRoutePage[];
     protected isActive(route: string): boolean;
+    protected sectionBadge(index: number): TuiDocNavigationBadge | null;
+    protected itemBadge(item: TuiDocRoutePage | TuiDocRoutePageGroup): TuiDocNavigationBadge | null;
     protected onGroupClick(index: number): void;
     protected closeMenu(): void;
     protected onClick(): void;
     protected onFocusSearch(event: KeyboardEvent): void;
+    private mapItemBadges;
+    private leafBadge;
+    private newOrUpdated;
+    private hasRecent;
+    private isRecent;
     private filterItems;
     private isActiveRoute;
     private openActivePageGroup;
@@ -39,3 +54,4 @@ export declare class TuiDocNavigation {
     static ɵfac: i0.ɵɵFactoryDeclaration<TuiDocNavigation, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<TuiDocNavigation, "tui-doc-navigation", never, {}, {}, never, ["*"], true, never>;
 }
+export {};

package/components/page/page.component.d.ts

@@ -1,11 +1,14 @@
 import { TuiDocPageTabConnector } from './page-tab.directive';
 import * as i0 from "@angular/core";
 export declare class TuiDocPage {
+    private readonly pages;
+    private readonly major;
     protected readonly tabConnectors: import("@angular/core").Signal<readonly TuiDocPageTabConnector[]>;
     protected readonly tabs: Record<string, import("@taiga-ui/polymorpheus").PolymorpheusContent>;
     protected readonly defaultTabs: readonly string[];
     protected readonly from: RegExp;
     protected readonly to = "_";
+    protected readonly version: import("@angular/core").Signal<string>;
     readonly header: import("@angular/core").InputSignal<string>;
     readonly package: import("@angular/core").InputSignal<string>;
     readonly type: import("@angular/core").InputSignal<string>;

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

@@ -5,8 +5,8 @@ import { Location, isPlatformServer, NgTemplateOutlet, DOCUMENT, NgComponentOutl
 import * as i1 from '@angular/forms';
 import { FormsModule, FormGroup, ReactiveFormsModule, FormControl } from '@angular/forms';
 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_EXAMPLE_MARKDOWN_CODE_PROCESSOR, TUI_DOC_ICONS, TUI_DOC_DEMO_TEXTS, TUI_DOC_EXAMPLE_CONTENT_PROCESSOR, TUI_DOC_PREVIEW_TEXT, 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_MAP_PAGES, TUI_DOC_SEE_ALSO_TEXT, TUI_DOC_TOC_TEXT, TUI_DOC_SEE_ALSO, 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 { TUI_DOC_TYPE_REFERENCE_PARSER, TUI_DOC_TYPE_REFERENCE_HANDLER, TUI_DOC_URL_STATE_HANDLER, TUI_DOC_EXAMPLE_MARKDOWN_CODE_PROCESSOR, TUI_DOC_ICONS, TUI_DOC_DEMO_TEXTS, TUI_DOC_EXAMPLE_CONTENT_PROCESSOR, TUI_DOC_PREVIEW_TEXT, TUI_DOC_CODE_EDITOR, TUI_DOC_CODE_ACTIONS, TUI_DOC_TITLE, TUI_DOC_PAGES, TUI_DOC_PAGE_LOADED, TUI_DOC_VERSION, 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_MAP_PAGES, TUI_DOC_SEE_ALSO_TEXT, TUI_DOC_TOC_TEXT, TUI_DOC_SEE_ALSO, TUI_DOC_DEFAULT_TABS } from '@taiga-ui/addon-doc/tokens';
+import { tuiInspect, tuiCoerceValue, tuiRawLoad, tuiCoerceValueIsTrue, tuiCleanObject, tuiToKebab, tuiRawLoadRecord, tuiVersionParts, tuiIsRoutePageGroup, tuiTransliterateKeyboardLayout, TuiDocKebabPipe } from '@taiga-ui/addon-doc/utils';
 import { tuiIsNumber, tuiPx, tuiIsPresent, tuiArrayToggle } from '@taiga-ui/cdk/utils/miscellaneous';
 import * as i5$1 from '@taiga-ui/core/components/input';
 import { TuiInput, TuiInputDirective } from '@taiga-ui/core/components/input';
@@ -66,8 +66,8 @@ 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 { TuiRoot } from '@taiga-ui/core/components/root';
 import { TuiBadge } from '@taiga-ui/kit/components/badge';
+import { TuiRoot } from '@taiga-ui/core/components/root';
 import { TuiFade } from '@taiga-ui/kit/directives/fade';
 import { TuiAutoColorPipe } from '@taiga-ui/kit/pipes/auto-color';
 
@@ -627,6 +627,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
             args: [{ selector: '[tuiDocScrollIntoViewLink]' }]
         }] });
 
+const BADGE = {
+    new: { label: 'New', appearance: 'positive' },
+    updated: { label: 'Updated', appearance: 'info' },
+};
+const NEW_VERSION_RANGE = 6;
 function tuiUniqBy(array, key) {
     return Array.from(array
         .reduce((map, item) => (map.has(item[key]) ? map : map.set(item[key], item)), new Map())
@@ -637,6 +642,10 @@ class TuiDocNavigation {
         this.searchInput = viewChild(TuiInputDirective, { read: ElementRef });
         this.router = inject(Router);
         this.doc = inject(DOCUMENT);
+        this.current = tuiVersionParts(inject(TUI_DOC_VERSION));
+        this.sectionLeads = new Set(inject(NAVIGATION_ITEMS)
+            .slice(0, -1)
+            .map((pages) => pages[0]));
         this.open = signal(false);
         this.menuOpen = false;
         this.drawer = inject(TuiDrawer, { optional: true });
@@ -651,6 +660,9 @@ class TuiDocNavigation {
             ...array,
             item.reduce((pages, page) => 'subPages' in page ? [...pages, ...page.subPages] : [...pages, page], []),
         ], []);
+        // Inputs (items/version) are static, so badges are resolved once up front.
+        this.sectionBadges = this.items.map((section, index) => this.newOrUpdated(section[0]?.version, this.flat[index]));
+        this.itemBadges = this.mapItemBadges();
         this.openPagesArr = [];
         this.openPagesGroupsArr = [];
         this.active = '';
@@ -685,6 +697,12 @@ class TuiDocNavigation {
     isActive(route) {
         return route === this.active;
     }
+    sectionBadge(index) {
+        return this.sectionBadges[index] ?? null;
+    }
+    itemBadge(item) {
+        return this.itemBadges.get(item) ?? null;
+    }
     onGroupClick(index) {
         this.openPagesGroupsArr[index] = !this.openPagesGroupsArr[index];
     }
@@ -704,6 +722,44 @@ class TuiDocNavigation {
             event.preventDefault();
         }
     }
+    mapItemBadges() {
+        const badges = new Map();
+        const add = (item, badge) => {
+            if (badge) {
+                badges.set(item, badge);
+            }
+        };
+        for (const section of this.items) {
+            for (const item of section) {
+                if (tuiIsRoutePageGroup(item)) {
+                    add(item, this.newOrUpdated(item.version, item.subPages));
+                    item.subPages.forEach((page) => add(page, this.leafBadge(page)));
+                }
+                else {
+                    add(item, this.leafBadge(item));
+                }
+            }
+        }
+        return badges;
+    }
+    leafBadge(item) {
+        return !this.sectionLeads.has(item) && this.isRecent(item.version)
+            ? BADGE.new
+            : null;
+    }
+    newOrUpdated(version, pages = []) {
+        if (this.isRecent(version)) {
+            return BADGE.new;
+        }
+        return this.hasRecent(pages) ? BADGE.updated : null;
+    }
+    hasRecent(pages = []) {
+        return pages.some((page) => this.isRecent(page.version));
+    }
+    isRecent(version = '') {
+        const { major, minor } = tuiVersionParts(version);
+        return (major === this.current.major && this.current.minor - minor < NEW_VERSION_RANGE);
+    }
     filterItems(items, search) {
         return items.map((section) => tuiUniqBy(section.filter(({ title, keywords = '' }) => {
             search = search.toLowerCase().trim();
@@ -762,7 +818,7 @@ class TuiDocNavigation {
         target.remove();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TuiDocNavigation, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: TuiDocNavigation, isStandalone: true, selector: "tui-doc-navigation", host: { listeners: { "window:keydown": "onFocusSearch($event)" }, properties: { "class._open": "menuOpen" } }, providers: NAVIGATION_PROVIDERS, viewQueries: [{ propertyName: "searchInput", first: true, predicate: TuiInputDirective, descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "@if (searchEnabled()) {\n    <tui-textfield\n        tuiTextfieldSize=\"s\"\n        class=\"t-input\"\n        [iconStart]=\"docIcons.search\"\n        [open]=\"open() && canOpen\"\n        (keyup)=\"open.set(canOpen && $event.code !== 'Escape')\"\n        (openChange)=\"open.set($event)\"\n    >\n        @if (!search.value) {\n            <code class=\"t-slash\">/</code>\n        }\n\n        <input\n            tuiInput\n            class=\"t-prevent-ios-scroll\"\n            [formControl]=\"search\"\n            [placeholder]=\"searchText()\"\n            [tuiAutoFocus]=\"!!drawer\"\n        />\n\n        @if (canOpen) {\n            <tui-data-list *tuiDropdown>\n                @for (group of filtered(); track group) {\n                    <tui-opt-group [label]=\"labels[$index] || ''\">\n                        @for (item of group; track item) {\n                            @if (item.route.includes('://')) {\n                                <a\n                                    tuiOption\n                                    [attr.rel]=\"item.rel\"\n                                    [href]=\"item.route\"\n                                    [target]=\"item.target || '_self'\"\n                                    [textContent]=\"item.title\"\n                                ></a>\n                            } @else {\n                                <a\n                                    tuiOption\n                                    [attr.rel]=\"item.rel\"\n                                    [fragment]=\"item.fragment\"\n                                    [routerLink]=\"item.route\"\n                                    [target]=\"item.target || '_self'\"\n                                    [textContent]=\"item.title\"\n                                    (click)=\"onClick()\"\n                                ></a>\n                            }\n                        }\n                    </tui-opt-group>\n                }\n            </tui-data-list>\n        }\n    </tui-textfield>\n}\n\n<nav class=\"t-navigation\">\n    <tui-scrollbar class=\"t-scrollbar\">\n        <tui-accordion\n            size=\"s\"\n            class=\"t-accordion\"\n            [closeOthers]=\"false\"\n        >\n            @for (item of itemsWithoutSections; track item) {\n                <ng-container\n                    [ngTemplateOutlet]=\"page\"\n                    [ngTemplateOutletContext]=\"{$implicit: item}\"\n                />\n            }\n            @for (label of labels; track $index; let index = $index) {\n                <button\n                    appearance=\"\"\n                    iconEnd=\"\"\n                    class=\"t-accordion-item\"\n                    [iconStart]=\"pagesIcons[label]\"\n                    [tuiAccordion]=\"!!openPagesArr[$index]\"\n                    (tuiAccordionChange)=\"openPagesArr[$index] = !!$event\"\n                >\n                    <span class=\"t-label\">{{ label }}</span>\n                    <tui-icon\n                        class=\"t-chevron\"\n                        [class.t-chevron_active]=\"!!openPagesArr[$index]\"\n                        [icon]=\"icons.more\"\n                        [style.margin]=\"0\"\n                    />\n                </button>\n                <tui-expand [style.padding-block]=\"0\">\n                    <div\n                        *tuiItem\n                        class=\"t-section\"\n                    >\n                        @for (item of items[$index]; track $index) {\n                            <ng-container\n                                [ngTemplateOutlet]=\"pages\"\n                                [ngTemplateOutletContext]=\"{item: item, index: index * 100 + $index}\"\n                            />\n                        }\n                    </div>\n                </tui-expand>\n            }\n        </tui-accordion>\n\n        <ng-template\n            #page\n            let-item\n        >\n            @if (item.route.includes('://')) {\n                <a\n                    tuiLink\n                    class=\"t-sublink\"\n                    [attr.rel]=\"item.rel\"\n                    [href]=\"item.route\"\n                    [iconStart]=\"item.section ? '' : pagesIcons[item.title]\"\n                    [target]=\"item.target || '_self'\"\n                    [textContent]=\"item.title\"\n                ></a>\n            } @else {\n                <a\n                    routerLinkActive=\"t-sublink_active\"\n                    tuiLink\n                    class=\"t-sublink\"\n                    [attr.rel]=\"item.rel\"\n                    [iconStart]=\"item.section ? '' : pagesIcons[item.title]\"\n                    [routerLink]=\"item.route\"\n                    [target]=\"item.target || '_self'\"\n                    [textContent]=\"item.title\"\n                    [tuiDocScrollIntoViewLink]=\"isActive(item.route)\"\n                    (click)=\"closeMenu()\"\n                ></a>\n            }\n        </ng-template>\n\n        <ng-template\n            #pages\n            let-index=\"index\"\n            let-item=\"item\"\n        >\n            @if (!item.subPages) {\n                <ng-container\n                    [ngTemplateOutlet]=\"page\"\n                    [ngTemplateOutletContext]=\"{$implicit: item}\"\n                />\n            } @else {\n                <div\n                    routerLinkActive\n                    class=\"t-subsection\"\n                    [routerLinkActiveOptions]=\"{exact: false}\"\n                >\n                    @if (item.subPages) {\n                        <button\n                            tuiLink\n                            type=\"button\"\n                            class=\"t-sublink t-sublink_subsection\"\n                            (click)=\"onGroupClick(index)\"\n                        >\n                            <tui-icon\n                                class=\"t-chevron\"\n                                [class.t-chevron_active]=\"!!openPagesGroupsArr[index]\"\n                                [icon]=\"icons.more\"\n                            />\n                            {{ item.title }}\n                            <tui-icon\n                                *polymorpheusOutlet=\"item.icon as icon\"\n                                class=\"t-icon\"\n                                [icon]=\"icon\"\n                            />\n                        </button>\n                    }\n\n                    <tui-expand\n                        class=\"t-expand\"\n                        [expanded]=\"!!openPagesGroupsArr[index]\"\n                    >\n                        <div class=\"t-section t-section_nested\">\n                            @for (subPage of $pages(item.subPages); track subPage) {\n                                @if (subPage.route.includes('://')) {\n                                    <a\n                                        tuiLink\n                                        class=\"t-sublink t-sublink_small\"\n                                        [attr.rel]=\"subPage.rel\"\n                                        [href]=\"subPage.route\"\n                                        [target]=\"subPage.target || '_self'\"\n                                        [textContent]=\"subPage.title\"\n                                    ></a>\n                                } @else {\n                                    <a\n                                        routerLinkActive=\"t-sublink_active\"\n                                        tuiLink\n                                        class=\"t-sublink t-sublink_small\"\n                                        [attr.rel]=\"subPage.rel\"\n                                        [fragment]=\"subPage.fragment\"\n                                        [routerLink]=\"subPage.route\"\n                                        [target]=\"subPage.target || '_self'\"\n                                        [textContent]=\"subPage.title\"\n                                        [tuiDocScrollIntoViewLink]=\"isActive(subPage.route)\"\n                                        (click)=\"closeMenu()\"\n                                    ></a>\n                                }\n                            }\n                        </div>\n                    </tui-expand>\n                </div>\n            }\n        </ng-template>\n    </tui-scrollbar>\n</nav>\n\n<ng-content />\n", styles: [":host{z-index:1;display:flex;flex-direction:column;text-align:center;padding:0 .25rem;--tui-stroke-width: .09375rem}.t-input{margin:1.125rem 1.25rem 0}.t-slash{block-size:1rem;font-size:.5rem}.t-navigation{display:flex;flex-wrap:wrap;max-block-size:100%;min-block-size:0;flex:1 1 0;text-align:start}.t-navigation tui-scrollbar{overscroll-behavior:none}:host-context(tui-drawer){margin:-1.25rem -1.5rem;padding-inline-start:0}:host-context(tui-drawer) .t-scrollbar{display:contents}.t-accordion{inline-size:auto;margin:.5rem .375rem 1.5rem}.t-scrollbar{scroll-behavior:var(--tui-scroll-behavior);inline-size:100%}.t-label{margin-inline-start:1.1875rem;font-weight:700}.t-expand{margin-inline-start:.25rem;padding-block:0}.t-section{display:flex;flex-direction:column;align-items:flex-start}.t-section_nested{margin:0 .75rem;clip-path:inset(.5rem 0)}@supports (-webkit-touch-callout: none){.t-prevent-ios-scroll:focus{animation:tuiPreventIOSScroll 1ms}}@keyframes tuiPreventIOSScroll{0%{opacity:0}to{opacity:1}}.t-subsection{margin-inline-start:.625rem}.t-sublink{display:inline-flex;align-items:center;font:var(--tui-typography-body-s);padding-block:.5rem;padding-inline-start:.4375rem;text-decoration:none}.t-accordion>.t-sublink{block-size:2.5rem;font:var(--tui-typography-body-s);font-weight:700;color:var(--tui-text-primary);align-items:center;padding:0 1rem;margin-inline-start:1px}.t-accordion>.t-sublink:before{margin-inline-end:calc(.875rem * (1 - .25 * var(--t-zoom)))}.t-accordion>.t-sublink:after{opacity:0}.t-sublink_small{margin-inline-start:1rem;padding-inline:0}.t-sublink_subsection{margin-inline-start:0!important;padding-inline-start:1.6875rem}.t-sublink_subsection .t-chevron{position:absolute;inset-inline-start:.4375rem}.t-sublink_subsection:before{opacity:0}.t-sublink.t-sublink.t-sublink_active{color:var(--tui-text-primary);font-weight:700}.t-sublink.t-sublink.t-sublink_active:after{position:absolute;display:block;inset-block:.5rem;inset-inline-start:-1rem;block-size:auto;inline-size:.1875rem;padding:0;margin-inline-start:-1px;border-radius:1rem;background:var(--tui-text-primary);zoom:1}.t-sublink:not([data-icon-start]){margin-inline-start:1.875rem}.t-sublink:not([data-icon-start]):before{position:absolute;display:block;inset-block-start:0;inset-block-end:0;inset-inline-start:-1rem;block-size:auto;inline-size:1px;padding:0;background:var(--tui-border-normal);zoom:1}.t-chevron{transition-property:transform;transition-duration:var(--tui-duration, .3s);transition-timing-function:var(--tui-curve-productive-standard);font-size:1rem;margin-inline:-.625rem .875rem}.t-chevron_active{transform:rotate(90deg)}.t-accordion-item{block-size:2.5rem}.t-accordion-item:before{position:relative;inset-inline-start:.5625rem;font-size:1rem}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: PolymorpheusOutlet, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: i2$1.TuiAccordionComponent, selector: "tui-accordion", inputs: ["closeOthers", "size"] }, { kind: "directive", type: i2$1.TuiAccordionDirective, selector: "button[tuiAccordion]", inputs: ["tuiAccordion"], outputs: ["tuiAccordionChange"] }, { kind: "component", type: i3$1.TuiExpand, selector: "tui-expand", inputs: ["expanded"] }, { kind: "directive", type: i4$1.TuiItem, selector: "[tuiItem]" }, { kind: "directive", type: TuiAutoFocus, selector: "[tuiAutoFocus]", inputs: ["tuiAutoFocus"] }, { kind: "component", type: i5$2.TuiDataListComponent, selector: "tui-data-list", inputs: ["emptyContent", "size"] }, { kind: "directive", type: i5$2.TuiOption, selector: "button[tuiOption], a[tuiOption], label[tuiOption]", inputs: ["disabled"] }, { kind: "directive", type: i5$2.TuiOptGroup, selector: "tui-opt-group", inputs: ["label"] }, { kind: "directive", type: TuiDocScrollIntoViewLink, selector: "[tuiDocScrollIntoViewLink]", inputs: ["tuiDocScrollIntoViewLink"] }, { kind: "component", type: TuiIcon, selector: "tui-icon:not([tuiBadge])", inputs: ["background"] }, { kind: "component", type: i5.TuiTextfieldComponent, selector: "tui-textfield:not([multi])", inputs: ["content", "filler", "invalid", "tuiAppearanceFocus", "tuiAppearanceState"] }, { kind: "directive", type: i5.TuiTextfieldOptionsDirective, selector: "[tuiTextfieldAppearance],[tuiTextfieldSize],[tuiTextfieldCleaner]", inputs: ["tuiTextfieldAppearance", "tuiTextfieldSize", "tuiTextfieldCleaner"] }, { kind: "directive", type: i6.TuiDropdownContent, selector: "ng-template[tuiDropdown]" }, { kind: "directive", type: i5$1.TuiInputDirective, selector: "input[tuiInput]", inputs: ["readOnly", "readonly", "invalid", "focused", "state"] }, { kind: "directive", type: TuiLink, selector: "a[tuiLink], button[tuiLink]" }, { kind: "component", type: TuiScrollbar, selector: "tui-scrollbar" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: TuiDocNavigation, isStandalone: true, selector: "tui-doc-navigation", host: { listeners: { "window:keydown": "onFocusSearch($event)" }, properties: { "class._open": "menuOpen" } }, providers: NAVIGATION_PROVIDERS, viewQueries: [{ propertyName: "searchInput", first: true, predicate: TuiInputDirective, descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "@if (searchEnabled()) {\n    <tui-textfield\n        tuiTextfieldSize=\"s\"\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\">\n                        {{ label }}\n                        @if (sectionBadge($index); as badge) {\n                            <ng-container *ngTemplateOutlet=\"badgeTpl; context: {$implicit: badge}\" />\n                        }\n                    </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                >\n                    {{ item.title }}\n                    @if (itemBadge(item); as badge) {\n                        <ng-container *ngTemplateOutlet=\"badgeTpl; context: {$implicit: badge}\" />\n                    }\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                    [tuiDocScrollIntoViewLink]=\"isActive(item.route)\"\n                    (click)=\"closeMenu()\"\n                >\n                    {{ item.title }}\n                    @if (itemBadge(item); as badge) {\n                        <ng-container *ngTemplateOutlet=\"badgeTpl; context: {$implicit: badge}\" />\n                    }\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                            @if (itemBadge(item); as badge) {\n                                <ng-container *ngTemplateOutlet=\"badgeTpl; context: {$implicit: badge}\" />\n                            }\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                                    >\n                                        {{ subPage.title }}\n                                        @if (itemBadge(subPage); as badge) {\n                                            <ng-container *ngTemplateOutlet=\"badgeTpl; context: {$implicit: badge}\" />\n                                        }\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                                        [tuiDocScrollIntoViewLink]=\"isActive(subPage.route)\"\n                                        (click)=\"closeMenu()\"\n                                    >\n                                        {{ subPage.title }}\n                                        @if (itemBadge(subPage); as badge) {\n                                            <ng-container *ngTemplateOutlet=\"badgeTpl; context: {$implicit: badge}\" />\n                                        }\n                                    </a>\n                                }\n                            }\n                        </div>\n                    </tui-expand>\n                </div>\n            }\n        </ng-template>\n\n        <ng-template\n            #badgeTpl\n            let-badge\n        >\n            <span\n                size=\"m\"\n                tuiBadge\n                class=\"t-badge\"\n                [appearance]=\"badge.appearance\"\n            >\n                {{ badge.label }}\n            </span>\n        </ng-template>\n    </tui-scrollbar>\n</nav>\n\n<ng-content />\n", styles: [":host{z-index:1;display:flex;flex-direction:column;text-align:center;padding:0 .25rem;--tui-stroke-width: .09375rem}.t-input{margin:1.125rem 1.25rem 0}.t-slash{block-size:1rem;font-size:.5rem}.t-navigation{display:flex;flex-wrap:wrap;max-block-size:100%;min-block-size:0;flex:1 1 0;text-align:start}.t-navigation tui-scrollbar{overscroll-behavior:none}:host-context(tui-drawer){margin:-1.25rem -1.5rem;padding-inline-start:0}:host-context(tui-drawer) .t-scrollbar{display:contents}.t-accordion{inline-size:auto;margin:.5rem .375rem 1.5rem}.t-scrollbar{scroll-behavior:var(--tui-scroll-behavior);inline-size:100%}.t-label{display:inline-flex;align-items:center;margin-inline-start:1.1875rem;font-weight:700}.t-badge{margin-inline-start:.375rem;font-size:.75rem}.t-expand{margin-inline-start:.25rem;padding-block:0}.t-section{display:flex;flex-direction:column;align-items:flex-start}.t-section_nested{margin:0 .75rem;clip-path:inset(.5rem 0)}@supports (-webkit-touch-callout: none){.t-prevent-ios-scroll:focus{animation:tuiPreventIOSScroll 1ms}}@keyframes tuiPreventIOSScroll{0%{opacity:0}to{opacity:1}}.t-subsection{margin-inline-start:.625rem}.t-sublink{display:inline-flex;flex-wrap:wrap;align-items:center;max-inline-size:100%;font:var(--tui-typography-body-s);padding-block:.5rem;padding-inline-start:.4375rem;text-decoration:none}.t-accordion>.t-sublink{block-size:2.5rem;font:var(--tui-typography-body-s);font-weight:700;color:var(--tui-text-primary);align-items:center;padding:0 1rem;margin-inline-start:1px}.t-accordion>.t-sublink:before{margin-inline-end:calc(.875rem * (1 - .25 * var(--t-zoom)))}.t-accordion>.t-sublink:after{opacity:0}.t-sublink_small{margin-inline-start:1rem;padding-inline:0}.t-sublink_subsection{margin-inline-start:0!important;padding-inline-start:1.6875rem}.t-sublink_subsection .t-chevron{position:absolute;inset-inline-start:.4375rem}.t-sublink_subsection:before{opacity:0}.t-sublink.t-sublink.t-sublink_active{color:var(--tui-text-primary);font-weight:700}.t-sublink.t-sublink.t-sublink_active:after{position:absolute;display:block;inset-block:.5rem;inset-inline-start:-1rem;block-size:auto;inline-size:.1875rem;padding:0;margin-inline-start:-1px;border-radius:1rem;background:var(--tui-text-primary);zoom:1}.t-sublink:not([data-icon-start]){margin-inline-start:1.875rem}.t-sublink:not([data-icon-start]):before{position:absolute;display:block;inset-block-start:0;inset-block-end:0;inset-inline-start:-1rem;block-size:auto;inline-size:1px;padding:0;background:var(--tui-border-normal);zoom:1}.t-chevron{transition-property:transform;transition-duration:var(--tui-duration, .3s);transition-timing-function:var(--tui-curve-productive-standard);font-size:1rem;margin-inline:-.625rem .875rem}.t-chevron_active{transform:rotate(90deg)}.t-accordion-item{block-size:2.5rem}.t-accordion-item:before{position:relative;inset-inline-start:.5625rem;font-size:1rem}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: PolymorpheusOutlet, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: i2$1.TuiAccordionComponent, selector: "tui-accordion", inputs: ["closeOthers", "size"] }, { kind: "directive", type: i2$1.TuiAccordionDirective, selector: "button[tuiAccordion]", inputs: ["tuiAccordion"], outputs: ["tuiAccordionChange"] }, { kind: "component", type: i3$1.TuiExpand, selector: "tui-expand", inputs: ["expanded"] }, { kind: "directive", type: i4$1.TuiItem, selector: "[tuiItem]" }, { kind: "directive", type: TuiAutoFocus, selector: "[tuiAutoFocus]", inputs: ["tuiAutoFocus"] }, { kind: "directive", type: TuiBadge, selector: "[tuiBadge],tui-icon[tuiBadge]", inputs: ["size"] }, { kind: "component", type: i5$2.TuiDataListComponent, selector: "tui-data-list", inputs: ["emptyContent", "size"] }, { kind: "directive", type: i5$2.TuiOption, selector: "button[tuiOption], a[tuiOption], label[tuiOption]", inputs: ["disabled"] }, { kind: "directive", type: i5$2.TuiOptGroup, selector: "tui-opt-group", inputs: ["label"] }, { kind: "directive", type: TuiDocScrollIntoViewLink, selector: "[tuiDocScrollIntoViewLink]", inputs: ["tuiDocScrollIntoViewLink"] }, { kind: "component", type: TuiIcon, selector: "tui-icon:not([tuiBadge])", inputs: ["background"] }, { kind: "component", type: i5.TuiTextfieldComponent, selector: "tui-textfield:not([multi])", inputs: ["content", "filler", "invalid", "tuiAppearanceFocus", "tuiAppearanceState"] }, { kind: "directive", type: i5.TuiTextfieldOptionsDirective, selector: "[tuiTextfieldAppearance],[tuiTextfieldSize],[tuiTextfieldCleaner]", inputs: ["tuiTextfieldAppearance", "tuiTextfieldSize", "tuiTextfieldCleaner"] }, { kind: "directive", type: i6.TuiDropdownContent, selector: "ng-template[tuiDropdown]" }, { kind: "directive", type: i5$1.TuiInputDirective, selector: "input[tuiInput]", inputs: ["readOnly", "readonly", "invalid", "focused", "state"] }, { kind: "directive", type: TuiLink, selector: "a[tuiLink], button[tuiLink]" }, { kind: "component", type: TuiScrollbar, selector: "tui-scrollbar" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TuiDocNavigation, decorators: [{
             type: Component,
@@ -774,6 +830,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
                         RouterLinkActive,
                         TuiAccordion,
                         TuiAutoFocus,
+                        TuiBadge,
                         TuiDataList,
                         TuiDocScrollIntoViewLink,
                         TuiExpand,
@@ -784,7 +841,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
                     ], changeDetection: ChangeDetectionStrategy.OnPush, providers: NAVIGATION_PROVIDERS, host: {
                         '[class._open]': 'menuOpen',
                         '(window:keydown)': 'onFocusSearch($event)',
-                    }, template: "@if (searchEnabled()) {\n    <tui-textfield\n        tuiTextfieldSize=\"s\"\n        class=\"t-input\"\n        [iconStart]=\"docIcons.search\"\n        [open]=\"open() && canOpen\"\n        (keyup)=\"open.set(canOpen && $event.code !== 'Escape')\"\n        (openChange)=\"open.set($event)\"\n    >\n        @if (!search.value) {\n            <code class=\"t-slash\">/</code>\n        }\n\n        <input\n            tuiInput\n            class=\"t-prevent-ios-scroll\"\n            [formControl]=\"search\"\n            [placeholder]=\"searchText()\"\n            [tuiAutoFocus]=\"!!drawer\"\n        />\n\n        @if (canOpen) {\n            <tui-data-list *tuiDropdown>\n                @for (group of filtered(); track group) {\n                    <tui-opt-group [label]=\"labels[$index] || ''\">\n                        @for (item of group; track item) {\n                            @if (item.route.includes('://')) {\n                                <a\n                                    tuiOption\n                                    [attr.rel]=\"item.rel\"\n                                    [href]=\"item.route\"\n                                    [target]=\"item.target || '_self'\"\n                                    [textContent]=\"item.title\"\n                                ></a>\n                            } @else {\n                                <a\n                                    tuiOption\n                                    [attr.rel]=\"item.rel\"\n                                    [fragment]=\"item.fragment\"\n                                    [routerLink]=\"item.route\"\n                                    [target]=\"item.target || '_self'\"\n                                    [textContent]=\"item.title\"\n                                    (click)=\"onClick()\"\n                                ></a>\n                            }\n                        }\n                    </tui-opt-group>\n                }\n            </tui-data-list>\n        }\n    </tui-textfield>\n}\n\n<nav class=\"t-navigation\">\n    <tui-scrollbar class=\"t-scrollbar\">\n        <tui-accordion\n            size=\"s\"\n            class=\"t-accordion\"\n            [closeOthers]=\"false\"\n        >\n            @for (item of itemsWithoutSections; track item) {\n                <ng-container\n                    [ngTemplateOutlet]=\"page\"\n                    [ngTemplateOutletContext]=\"{$implicit: item}\"\n                />\n            }\n            @for (label of labels; track $index; let index = $index) {\n                <button\n                    appearance=\"\"\n                    iconEnd=\"\"\n                    class=\"t-accordion-item\"\n                    [iconStart]=\"pagesIcons[label]\"\n                    [tuiAccordion]=\"!!openPagesArr[$index]\"\n                    (tuiAccordionChange)=\"openPagesArr[$index] = !!$event\"\n                >\n                    <span class=\"t-label\">{{ label }}</span>\n                    <tui-icon\n                        class=\"t-chevron\"\n                        [class.t-chevron_active]=\"!!openPagesArr[$index]\"\n                        [icon]=\"icons.more\"\n                        [style.margin]=\"0\"\n                    />\n                </button>\n                <tui-expand [style.padding-block]=\"0\">\n                    <div\n                        *tuiItem\n                        class=\"t-section\"\n                    >\n                        @for (item of items[$index]; track $index) {\n                            <ng-container\n                                [ngTemplateOutlet]=\"pages\"\n                                [ngTemplateOutletContext]=\"{item: item, index: index * 100 + $index}\"\n                            />\n                        }\n                    </div>\n                </tui-expand>\n            }\n        </tui-accordion>\n\n        <ng-template\n            #page\n            let-item\n        >\n            @if (item.route.includes('://')) {\n                <a\n                    tuiLink\n                    class=\"t-sublink\"\n                    [attr.rel]=\"item.rel\"\n                    [href]=\"item.route\"\n                    [iconStart]=\"item.section ? '' : pagesIcons[item.title]\"\n                    [target]=\"item.target || '_self'\"\n                    [textContent]=\"item.title\"\n                ></a>\n            } @else {\n                <a\n                    routerLinkActive=\"t-sublink_active\"\n                    tuiLink\n                    class=\"t-sublink\"\n                    [attr.rel]=\"item.rel\"\n                    [iconStart]=\"item.section ? '' : pagesIcons[item.title]\"\n                    [routerLink]=\"item.route\"\n                    [target]=\"item.target || '_self'\"\n                    [textContent]=\"item.title\"\n                    [tuiDocScrollIntoViewLink]=\"isActive(item.route)\"\n                    (click)=\"closeMenu()\"\n                ></a>\n            }\n        </ng-template>\n\n        <ng-template\n            #pages\n            let-index=\"index\"\n            let-item=\"item\"\n        >\n            @if (!item.subPages) {\n                <ng-container\n                    [ngTemplateOutlet]=\"page\"\n                    [ngTemplateOutletContext]=\"{$implicit: item}\"\n                />\n            } @else {\n                <div\n                    routerLinkActive\n                    class=\"t-subsection\"\n                    [routerLinkActiveOptions]=\"{exact: false}\"\n                >\n                    @if (item.subPages) {\n                        <button\n                            tuiLink\n                            type=\"button\"\n                            class=\"t-sublink t-sublink_subsection\"\n                            (click)=\"onGroupClick(index)\"\n                        >\n                            <tui-icon\n                                class=\"t-chevron\"\n                                [class.t-chevron_active]=\"!!openPagesGroupsArr[index]\"\n                                [icon]=\"icons.more\"\n                            />\n                            {{ item.title }}\n                            <tui-icon\n                                *polymorpheusOutlet=\"item.icon as icon\"\n                                class=\"t-icon\"\n                                [icon]=\"icon\"\n                            />\n                        </button>\n                    }\n\n                    <tui-expand\n                        class=\"t-expand\"\n                        [expanded]=\"!!openPagesGroupsArr[index]\"\n                    >\n                        <div class=\"t-section t-section_nested\">\n                            @for (subPage of $pages(item.subPages); track subPage) {\n                                @if (subPage.route.includes('://')) {\n                                    <a\n                                        tuiLink\n                                        class=\"t-sublink t-sublink_small\"\n                                        [attr.rel]=\"subPage.rel\"\n                                        [href]=\"subPage.route\"\n                                        [target]=\"subPage.target || '_self'\"\n                                        [textContent]=\"subPage.title\"\n                                    ></a>\n                                } @else {\n                                    <a\n                                        routerLinkActive=\"t-sublink_active\"\n                                        tuiLink\n                                        class=\"t-sublink t-sublink_small\"\n                                        [attr.rel]=\"subPage.rel\"\n                                        [fragment]=\"subPage.fragment\"\n                                        [routerLink]=\"subPage.route\"\n                                        [target]=\"subPage.target || '_self'\"\n                                        [textContent]=\"subPage.title\"\n                                        [tuiDocScrollIntoViewLink]=\"isActive(subPage.route)\"\n                                        (click)=\"closeMenu()\"\n                                    ></a>\n                                }\n                            }\n                        </div>\n                    </tui-expand>\n                </div>\n            }\n        </ng-template>\n    </tui-scrollbar>\n</nav>\n\n<ng-content />\n", styles: [":host{z-index:1;display:flex;flex-direction:column;text-align:center;padding:0 .25rem;--tui-stroke-width: .09375rem}.t-input{margin:1.125rem 1.25rem 0}.t-slash{block-size:1rem;font-size:.5rem}.t-navigation{display:flex;flex-wrap:wrap;max-block-size:100%;min-block-size:0;flex:1 1 0;text-align:start}.t-navigation tui-scrollbar{overscroll-behavior:none}:host-context(tui-drawer){margin:-1.25rem -1.5rem;padding-inline-start:0}:host-context(tui-drawer) .t-scrollbar{display:contents}.t-accordion{inline-size:auto;margin:.5rem .375rem 1.5rem}.t-scrollbar{scroll-behavior:var(--tui-scroll-behavior);inline-size:100%}.t-label{margin-inline-start:1.1875rem;font-weight:700}.t-expand{margin-inline-start:.25rem;padding-block:0}.t-section{display:flex;flex-direction:column;align-items:flex-start}.t-section_nested{margin:0 .75rem;clip-path:inset(.5rem 0)}@supports (-webkit-touch-callout: none){.t-prevent-ios-scroll:focus{animation:tuiPreventIOSScroll 1ms}}@keyframes tuiPreventIOSScroll{0%{opacity:0}to{opacity:1}}.t-subsection{margin-inline-start:.625rem}.t-sublink{display:inline-flex;align-items:center;font:var(--tui-typography-body-s);padding-block:.5rem;padding-inline-start:.4375rem;text-decoration:none}.t-accordion>.t-sublink{block-size:2.5rem;font:var(--tui-typography-body-s);font-weight:700;color:var(--tui-text-primary);align-items:center;padding:0 1rem;margin-inline-start:1px}.t-accordion>.t-sublink:before{margin-inline-end:calc(.875rem * (1 - .25 * var(--t-zoom)))}.t-accordion>.t-sublink:after{opacity:0}.t-sublink_small{margin-inline-start:1rem;padding-inline:0}.t-sublink_subsection{margin-inline-start:0!important;padding-inline-start:1.6875rem}.t-sublink_subsection .t-chevron{position:absolute;inset-inline-start:.4375rem}.t-sublink_subsection:before{opacity:0}.t-sublink.t-sublink.t-sublink_active{color:var(--tui-text-primary);font-weight:700}.t-sublink.t-sublink.t-sublink_active:after{position:absolute;display:block;inset-block:.5rem;inset-inline-start:-1rem;block-size:auto;inline-size:.1875rem;padding:0;margin-inline-start:-1px;border-radius:1rem;background:var(--tui-text-primary);zoom:1}.t-sublink:not([data-icon-start]){margin-inline-start:1.875rem}.t-sublink:not([data-icon-start]):before{position:absolute;display:block;inset-block-start:0;inset-block-end:0;inset-inline-start:-1rem;block-size:auto;inline-size:1px;padding:0;background:var(--tui-border-normal);zoom:1}.t-chevron{transition-property:transform;transition-duration:var(--tui-duration, .3s);transition-timing-function:var(--tui-curve-productive-standard);font-size:1rem;margin-inline:-.625rem .875rem}.t-chevron_active{transform:rotate(90deg)}.t-accordion-item{block-size:2.5rem}.t-accordion-item:before{position:relative;inset-inline-start:.5625rem;font-size:1rem}\n"] }]
+                    }, template: "@if (searchEnabled()) {\n    <tui-textfield\n        tuiTextfieldSize=\"s\"\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\">\n                        {{ label }}\n                        @if (sectionBadge($index); as badge) {\n                            <ng-container *ngTemplateOutlet=\"badgeTpl; context: {$implicit: badge}\" />\n                        }\n                    </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                >\n                    {{ item.title }}\n                    @if (itemBadge(item); as badge) {\n                        <ng-container *ngTemplateOutlet=\"badgeTpl; context: {$implicit: badge}\" />\n                    }\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                    [tuiDocScrollIntoViewLink]=\"isActive(item.route)\"\n                    (click)=\"closeMenu()\"\n                >\n                    {{ item.title }}\n                    @if (itemBadge(item); as badge) {\n                        <ng-container *ngTemplateOutlet=\"badgeTpl; context: {$implicit: badge}\" />\n                    }\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                            @if (itemBadge(item); as badge) {\n                                <ng-container *ngTemplateOutlet=\"badgeTpl; context: {$implicit: badge}\" />\n                            }\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                                    >\n                                        {{ subPage.title }}\n                                        @if (itemBadge(subPage); as badge) {\n                                            <ng-container *ngTemplateOutlet=\"badgeTpl; context: {$implicit: badge}\" />\n                                        }\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                                        [tuiDocScrollIntoViewLink]=\"isActive(subPage.route)\"\n                                        (click)=\"closeMenu()\"\n                                    >\n                                        {{ subPage.title }}\n                                        @if (itemBadge(subPage); as badge) {\n                                            <ng-container *ngTemplateOutlet=\"badgeTpl; context: {$implicit: badge}\" />\n                                        }\n                                    </a>\n                                }\n                            }\n                        </div>\n                    </tui-expand>\n                </div>\n            }\n        </ng-template>\n\n        <ng-template\n            #badgeTpl\n            let-badge\n        >\n            <span\n                size=\"m\"\n                tuiBadge\n                class=\"t-badge\"\n                [appearance]=\"badge.appearance\"\n            >\n                {{ badge.label }}\n            </span>\n        </ng-template>\n    </tui-scrollbar>\n</nav>\n\n<ng-content />\n", styles: [":host{z-index:1;display:flex;flex-direction:column;text-align:center;padding:0 .25rem;--tui-stroke-width: .09375rem}.t-input{margin:1.125rem 1.25rem 0}.t-slash{block-size:1rem;font-size:.5rem}.t-navigation{display:flex;flex-wrap:wrap;max-block-size:100%;min-block-size:0;flex:1 1 0;text-align:start}.t-navigation tui-scrollbar{overscroll-behavior:none}:host-context(tui-drawer){margin:-1.25rem -1.5rem;padding-inline-start:0}:host-context(tui-drawer) .t-scrollbar{display:contents}.t-accordion{inline-size:auto;margin:.5rem .375rem 1.5rem}.t-scrollbar{scroll-behavior:var(--tui-scroll-behavior);inline-size:100%}.t-label{display:inline-flex;align-items:center;margin-inline-start:1.1875rem;font-weight:700}.t-badge{margin-inline-start:.375rem;font-size:.75rem}.t-expand{margin-inline-start:.25rem;padding-block:0}.t-section{display:flex;flex-direction:column;align-items:flex-start}.t-section_nested{margin:0 .75rem;clip-path:inset(.5rem 0)}@supports (-webkit-touch-callout: none){.t-prevent-ios-scroll:focus{animation:tuiPreventIOSScroll 1ms}}@keyframes tuiPreventIOSScroll{0%{opacity:0}to{opacity:1}}.t-subsection{margin-inline-start:.625rem}.t-sublink{display:inline-flex;flex-wrap:wrap;align-items:center;max-inline-size:100%;font:var(--tui-typography-body-s);padding-block:.5rem;padding-inline-start:.4375rem;text-decoration:none}.t-accordion>.t-sublink{block-size:2.5rem;font:var(--tui-typography-body-s);font-weight:700;color:var(--tui-text-primary);align-items:center;padding:0 1rem;margin-inline-start:1px}.t-accordion>.t-sublink:before{margin-inline-end:calc(.875rem * (1 - .25 * var(--t-zoom)))}.t-accordion>.t-sublink:after{opacity:0}.t-sublink_small{margin-inline-start:1rem;padding-inline:0}.t-sublink_subsection{margin-inline-start:0!important;padding-inline-start:1.6875rem}.t-sublink_subsection .t-chevron{position:absolute;inset-inline-start:.4375rem}.t-sublink_subsection:before{opacity:0}.t-sublink.t-sublink.t-sublink_active{color:var(--tui-text-primary);font-weight:700}.t-sublink.t-sublink.t-sublink_active:after{position:absolute;display:block;inset-block:.5rem;inset-inline-start:-1rem;block-size:auto;inline-size:.1875rem;padding:0;margin-inline-start:-1px;border-radius:1rem;background:var(--tui-text-primary);zoom:1}.t-sublink:not([data-icon-start]){margin-inline-start:1.875rem}.t-sublink:not([data-icon-start]):before{position:absolute;display:block;inset-block-start:0;inset-block-end:0;inset-inline-start:-1rem;block-size:auto;inline-size:1px;padding:0;background:var(--tui-border-normal);zoom:1}.t-chevron{transition-property:transform;transition-duration:var(--tui-duration, .3s);transition-timing-function:var(--tui-curve-productive-standard);font-size:1rem;margin-inline:-.625rem .875rem}.t-chevron_active{transform:rotate(90deg)}.t-accordion-item{block-size:2.5rem}.t-accordion-item:before{position:relative;inset-inline-start:.5625rem;font-size:1rem}\n"] }]
         }], ctorParameters: () => [] });
 
 class TuiDocHeader {
@@ -908,11 +965,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
 
 class TuiDocPage {
     constructor() {
+        this.pages = inject(TUI_DOC_MAP_PAGES);
+        this.major = tuiVersionParts(inject(TUI_DOC_VERSION)).major;
         this.tabConnectors = contentChildren(TuiDocPageTabConnector);
         this.tabs = inject(TUI_DOC_TABS)(inject(ActivatedRoute).snapshot);
         this.defaultTabs = inject(TUI_DOC_DEFAULT_TABS);
         this.from = / /g;
         this.to = '_';
+        this.version = computed(() => {
+            const explicit = this.pages.get(this.header())?.version;
+            if (explicit) {
+                return explicit;
+            }
+            return this.package() && !Number.isNaN(this.major) ? `${this.major}.0.0` : '';
+        });
         this.header = input('');
         this.package = input('');
         this.type = input('');
@@ -921,7 +987,7 @@ class TuiDocPage {
         this.activeItemIndex = model(0);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TuiDocPage, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", 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\n                tuiFade\n                class=\"t-navigation\"\n            >\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                    <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-typography-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:not(:empty){scrollbar-width:none;-ms-overflow-style:none;display:flex;gap:.625rem;margin-block-start:1rem;overflow:auto}.t-navigation:not(:empty)::-webkit-scrollbar,.t-navigation:not(:empty)::-webkit-scrollbar-thumb{display:none}@media screen and (max-width:767.4px){.t-navigation:not(:empty){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}}.t-source-code{display:flex}\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: TuiDocSourceCode, selector: "tui-doc-source-code", inputs: ["header", "package", "type", "path"] }, { kind: "component", type: TuiDocToc, selector: "tui-doc-toc" }, { kind: "directive", type: TuiFade, selector: "[tuiFade]", inputs: ["tuiFadeHeight", "tuiFadeSize", "tuiFadeOffset", "tuiFade"] }, { kind: "directive", type: TuiHeader, selector: "[tuiHeader]", inputs: ["tuiHeader"] }, { kind: "component", type: TuiSegmented, selector: "tui-segmented", inputs: ["size", "activeItemIndex", "disabled"], outputs: ["activeItemIndexChange"] }, { kind: "directive", type: TuiTitle, selector: "[tuiTitle]", inputs: ["tuiTitle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: 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                @if (version(); as version) {\n                    <span\n                        appearance=\"neutral\"\n                        size=\"m\"\n                        tuiBadge\n                        class=\"t-badge t-version\"\n                    >\n                        v{{ version }}+\n                    </span>\n                }\n            </h1>\n            <p\n                tuiFade\n                class=\"t-navigation\"\n            >\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                    <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-typography-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:not(:empty){scrollbar-width:none;-ms-overflow-style:none;display:flex;gap:.625rem;margin-block-start:1rem;overflow:auto}.t-navigation:not(:empty)::-webkit-scrollbar,.t-navigation:not(:empty)::-webkit-scrollbar-thumb{display:none}@media screen and (max-width:767.4px){.t-navigation:not(:empty){margin:.5rem 0 1rem}}.t-badge{vertical-align:middle;text-transform:uppercase;margin-inline-end:.5rem;color:#000}.t-version{text-transform:none}.t-content{padding:1rem 2rem}@media screen and (max-width:767.4px){.t-content{padding:1rem 1.5rem}}.t-source-code{display:flex}\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: TuiDocSourceCode, selector: "tui-doc-source-code", inputs: ["header", "package", "type", "path"] }, { kind: "component", type: TuiDocToc, selector: "tui-doc-toc" }, { kind: "directive", type: TuiFade, selector: "[tuiFade]", inputs: ["tuiFadeHeight", "tuiFadeSize", "tuiFadeOffset", "tuiFade"] }, { kind: "directive", type: TuiHeader, selector: "[tuiHeader]", inputs: ["tuiHeader"] }, { kind: "component", type: TuiSegmented, selector: "tui-segmented", inputs: ["size", "activeItemIndex", "disabled"], outputs: ["activeItemIndexChange"] }, { kind: "directive", type: TuiTitle, selector: "[tuiTitle]", inputs: ["tuiTitle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TuiDocPage, decorators: [{
             type: Component,
@@ -939,7 +1005,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
                         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\n                tuiFade\n                class=\"t-navigation\"\n            >\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                    <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-typography-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:not(:empty){scrollbar-width:none;-ms-overflow-style:none;display:flex;gap:.625rem;margin-block-start:1rem;overflow:auto}.t-navigation:not(:empty)::-webkit-scrollbar,.t-navigation:not(:empty)::-webkit-scrollbar-thumb{display:none}@media screen and (max-width:767.4px){.t-navigation:not(:empty){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}}.t-source-code{display:flex}\n"] }]
+                    ], 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                @if (version(); as version) {\n                    <span\n                        appearance=\"neutral\"\n                        size=\"m\"\n                        tuiBadge\n                        class=\"t-badge t-version\"\n                    >\n                        v{{ version }}+\n                    </span>\n                }\n            </h1>\n            <p\n                tuiFade\n                class=\"t-navigation\"\n            >\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                    <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-typography-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:not(:empty){scrollbar-width:none;-ms-overflow-style:none;display:flex;gap:.625rem;margin-block-start:1rem;overflow:auto}.t-navigation:not(:empty)::-webkit-scrollbar,.t-navigation:not(:empty)::-webkit-scrollbar-thumb{display:none}@media screen and (max-width:767.4px){.t-navigation:not(:empty){margin:.5rem 0 1rem}}.t-badge{vertical-align:middle;text-transform:uppercase;margin-inline-end:.5rem;color:#000}.t-version{text-transform:none}.t-content{padding:1rem 2rem}@media screen and (max-width:767.4px){.t-content{padding:1rem 1.5rem}}.t-source-code{display:flex}\n"] }]
         }] });
 
 const TUI_THEME_KEY = new InjectionToken(ngDevMode ? 'TUI_THEME_KEY' : '', {