@taiga-ui/addon-doc 2.24.0 → 2.25.0

package/fesm2015/taiga-ui-addon-doc.js

@@ -1,20 +1,20 @@
 import { __awaiter, __decorate, __param } from 'tslib';
-import { Input, HostBinding, Component, NgModule, Inject, ChangeDetectionStrategy, InjectionToken, Renderer2, PLATFORM_ID, ContentChild, TemplateRef, ViewChild, HostListener, forwardRef, ChangeDetectorRef, Optional, ElementRef, Directive, EventEmitter, Output, ContentChildren, Attribute, Pipe, ViewEncapsulation } from '@angular/core';
+import { Input, HostBinding, Component, NgModule, Inject, ChangeDetectionStrategy, InjectionToken, Renderer2, PLATFORM_ID, ContentChild, TemplateRef, ViewChild, HostListener, forwardRef, EventEmitter, Output, Directive, ChangeDetectorRef, ContentChildren, Attribute, Optional, Pipe, ViewEncapsulation, ElementRef } from '@angular/core';
 import { BehaviorSubject, Subject, timer, Observable, merge } from 'rxjs';
-import { switchMap, switchMapTo, mapTo, startWith, takeUntil, filter, map, mergeMap, debounceTime, distinctUntilChanged } from 'rxjs/operators';
+import { switchMap, switchMapTo, mapTo, startWith, takeUntil, map, debounceTime, filter, mergeMap, distinctUntilChanged } from 'rxjs/operators';
 import { CommonModule, isPlatformBrowser, Location as Location$1, DOCUMENT } from '@angular/common';
 import { HighlightModule } from 'ngx-highlightjs';
-import { tuiPure, TuiDestroyService, TUI_IS_MOBILE, TuiDragModule, isPresent, uniqBy, getElementObscurers, TuiActiveZoneModule, TuiLetModule, TuiAutoFocusModule, EMPTY_QUERY, itemsQueryListObservable, watch, TUI_FOCUSABLE_ITEM_ACCESSOR, identity, TuiSwipeService, tuiDefaultProp } from '@taiga-ui/cdk';
-import { TUI_COPY_TEXTS, TuiSelectModule, TuiRadioBlockModule, TuiCheckboxLabeledModule, TuiDataListWrapperModule, TuiAccordionModule, TuiBadgeModule, TuiToggleModule, TuiInputCountModule, TuiTabsModule, TuiTagModule } from '@taiga-ui/kit';
-import { TuiButtonModule, TuiModeDirective, TuiLinkModule, TuiExpandModule, TuiGroupModule, TuiTooltipModule, TuiModeModule, TuiSvgModule, TuiDataListModule, TuiTextfieldControllerModule, TuiHintControllerModule, TuiPrimitiveTextfieldModule, TuiHostedDropdownModule, TuiDropdownControllerModule, TuiScrollbarModule, TuiNotificationModule, TuiNotificationsService, TuiThemeNightModule, TuiRootModule, TuiDialogModule, TuiNotificationsModule } from '@taiga-ui/core';
+import { tuiPure, TuiDestroyService, TUI_IS_MOBILE, TuiDragModule, EMPTY_QUERY, itemsQueryListObservable, watch, TUI_FOCUSABLE_ITEM_ACCESSOR, identity, TuiSwipeService, getElementObscurers, isPresent, uniqBy, TuiActiveZoneModule, TuiLetModule, TuiAutoFocusModule, tuiDefaultProp } from '@taiga-ui/cdk';
+import { TUI_COPY_TEXTS, TuiSelectModule, TuiRadioBlockModule, TuiCheckboxLabeledModule, TuiDataListWrapperModule, TuiBadgeModule, TuiToggleModule, TuiInputCountModule, TuiTabsModule, TuiAccordionModule, TuiTagModule } from '@taiga-ui/kit';
+import { TuiButtonModule, TuiModeDirective, TuiLinkModule, TuiExpandModule, TuiGroupModule, TuiTooltipModule, TuiModeModule, TuiSvgModule, TuiDataListModule, TuiTextfieldControllerModule, TuiHintControllerModule, TuiPrimitiveTextfieldModule, TuiDropdownControllerModule, TuiNotificationModule, TuiNotificationsService, TuiHostedDropdownModule, TuiScrollbarModule, TuiThemeNightModule, TuiRootModule, TuiDialogModule, TuiNotificationsModule } from '@taiga-ui/core';
 import { FormControl, FormGroup, ReactiveFormsModule, FormsModule } from '@angular/forms';
-import { UrlSerializer, RouterModule, Router, ActivatedRoute, NavigationEnd } from '@angular/router';
-import { Title } from '@angular/platform-browser';
-import { TuiSidebarDirective, TuiSidebarModule } from '@taiga-ui/addon-mobile';
+import { UrlSerializer, RouterModule, ActivatedRoute, Router, NavigationEnd } from '@angular/router';
 import { trigger, transition, style, animate } from '@angular/animations';
 import { Clipboard, ClipboardModule } from '@angular/cdk/clipboard';
 import { LOCATION, LOCAL_STORAGE, WINDOW } from '@ng-web-apis/common';
 import { PolymorpheusModule } from '@tinkoff/ng-polymorpheus';
+import { TuiSidebarDirective, TuiSidebarModule } from '@taiga-ui/addon-mobile';
+import { Title } from '@angular/platform-browser';
 
 function rawLoad(content) {
     return __awaiter(this, void 0, void 0, function* () {
@@ -324,258 +324,565 @@ TuiDocDemoModule = __decorate([
     })
 ], TuiDocDemoModule);
 
-const MAP = {
-    а: 'f',
-    б: ',',
-    в: 'd',
-    г: 'u',
-    д: 'l',
-    е: 't',
-    ё: '`',
-    ж: ';',
-    з: 'p',
-    и: 'b',
-    й: 'q',
-    к: 'r',
-    л: 'k',
-    м: 'v',
-    н: 'y',
-    о: 'j',
-    п: 'g',
-    р: 'h',
-    с: 'c',
-    т: 'n',
-    у: 'e',
-    ф: 'a',
-    х: '[',
-    ц: 'w',
-    ч: 'x',
-    ш: 'i',
-    щ: 'o',
-    ъ: ']',
-    ы: 's',
-    ь: 'm',
-    ю: '.',
-    я: 'z',
-};
-/**
- * Translates text mistakenly typed in the Russian layout into English
- * @param string string with Russian layout characters
- * @return string with English layout characters
- */
-function transliterateKeyboardLayout(string) {
-    let newStr = '';
-    for (let i = 0; i < string.length; i++) {
-        newStr += string.charAt(i) in MAP ? MAP[string.charAt(i)] : string.charAt(i);
-    }
-    return newStr;
+function rgbToHex(r, g, b) {
+    return ('#' +
+        [r, g, b]
+            .map(x => {
+            const hex = x.toString(16);
+            return hex.length === 1 ? '0' + hex : hex;
+        })
+            .join(''));
+}
+function hexToRgb(hex) {
+    const matches = hex
+        .replace('#', '')
+        .split('')
+        .map((char, _, array) => (array.length === 3 ? char + char : char))
+        .join('')
+        .match(/.{2}/g);
+    return matches
+        ? matches.map(x => Number.parseInt(x, 16))
+        : [0, 0, 0];
 }
 
-const TUI_DOC_PAGES = new InjectionToken('Documentation pages', {
-    factory: () => [],
-});
-
-const TUI_DOC_TITLE = new InjectionToken('Page title', {
-    factory: () => '',
-});
-
-const NAVIGATION_TITLE = new InjectionToken('Page title');
-const NAVIGATION_LABELS = new InjectionToken('Navigation sections labels for search');
-const NAVIGATION_ITEMS = new InjectionToken('Navigation pages');
-const NAVIGATION_PROVIDERS = [
-    TuiDestroyService,
-    {
-        provide: NAVIGATION_TITLE,
-        deps: [Router, ActivatedRoute, TUI_DOC_TITLE, TuiDestroyService],
-        useFactory: titleProviderFactory,
-    },
-    {
-        provide: NAVIGATION_LABELS,
-        deps: [TUI_DOC_PAGES],
-        useFactory: labelsProviderFactory,
-    },
-    {
-        provide: NAVIGATION_ITEMS,
-        deps: [TUI_DOC_PAGES],
-        useFactory: itemsProviderFactory,
-    },
-];
-function titleProviderFactory(router, activatedRoute, titlePrefix, destroy$) {
-    return router.events.pipe(filter(event => event instanceof NavigationEnd), map(() => activatedRoute.firstChild), filter(isPresent), mergeMap(({ data }) => data), map(({ title }) => titlePrefix + title), takeUntil(destroy$));
+function inspectArray(array, depth) {
+    if (depth === 0) {
+        return '[…]';
+    }
+    let result = '';
+    let first = true;
+    for (let index = 0; index < array.length; index++) {
+        if (first) {
+            first = false;
+        }
+        else {
+            result += ', ';
+        }
+        result += index in array ? inspectAny(array[index], depth - 1) : 'empty';
+    }
+    return `[${result}]`;
 }
-function labelsProviderFactory(pages) {
-    return pages
-        .map(({ section }) => section)
-        .filter(isPresent)
-        .filter((item, index, array) => array.indexOf(item) === index);
+function inspectObject(object, depth) {
+    if (depth === 0) {
+        return `{…}`;
+    }
+    let result = '';
+    let first = true;
+    for (const key in object) {
+        if (!object.hasOwnProperty(key)) {
+            continue;
+        }
+        if (first) {
+            first = false;
+        }
+        else {
+            result += ', ';
+        }
+        result += `${key}: ${inspectAny(object[key], depth - 1)}`;
+    }
+    return `{${result}}`;
 }
-function itemsProviderFactory(pages) {
-    const labels = labelsProviderFactory(pages);
-    return [
-        ...labels.map(label => pages.filter(({ section }) => section === label)),
-        pages.filter(page => !page.section),
-    ];
+// @bad TODO add more types
+/**
+ * Returns readable JS entity
+ * @param data
+ * @param depth
+ * @return readable JS entity
+ */
+function inspectAny(data, depth) {
+    if (data === null) {
+        return 'null';
+    }
+    switch (typeof data) {
+        case 'string':
+            return `'${data}'`;
+        case 'undefined':
+        case 'number':
+        case 'boolean':
+        case 'function':
+            return String(data);
+    }
+    if (data instanceof RegExp) {
+        return data.toString();
+    }
+    if (Array.isArray(data)) {
+        return inspectArray(data, depth);
+    }
+    return inspectObject(data, depth);
 }
 
-const SCROLL_INTO_VIEW_DELAY = 200;
-// @dynamic
-let TuiDocNavigationComponent = class TuiDocNavigationComponent {
-    constructor(changeDetectorRef, titleService, title$, documentRef, mode, sidebar, labels, items, searchText, router, activatedRoute) {
-        this.documentRef = documentRef;
-        this.mode = mode;
-        this.sidebar = sidebar;
-        this.labels = labels;
-        this.items = items;
-        this.searchText = searchText;
-        this.router = router;
+const SERIALIZED_SUFFIX = '$';
+// @bad TODO: refactor output and value sync
+let TuiDocDocumentationPropertyConnectorDirective = class TuiDocDocumentationPropertyConnectorDirective {
+    constructor(template, locationRef, activatedRoute, urlSerializer) {
+        this.template = template;
+        this.locationRef = locationRef;
         this.activatedRoute = activatedRoute;
-        this.search = '';
-        this.open = false;
-        this.openPagesArr = [];
-        this.openPagesGroupsArr = [];
-        this.active = '';
-        this.menuOpen = false;
-        this.mode$ = this.mode.change$.pipe(startWith(null), map(() => this.mode.mode || 'onLight'));
-        // Angular can't navigate no anchor links
-        // https://stackoverflow.com/questions/36101756/angular2-routing-with-hashtag-to-page-anchor
-        title$.subscribe(title => {
-            changeDetectorRef.markForCheck();
-            titleService.setTitle(title);
-            this.openActivePageGroup();
-            this.handleAnchorLink(this.activatedRoute.snapshot.fragment);
-        });
-    }
-    get canOpen() {
-        return this.search.length > 2;
+        this.urlSerializer = urlSerializer;
+        this.documentationPropertyName = '';
+        this.documentationPropertyMode = null;
+        this.documentationPropertyType = '';
+        this.documentationPropertyValue = null;
+        this.documentationPropertyDeprecated = false;
+        this.documentationPropertyValues = null;
+        this.documentationPropertyValueChange = new EventEmitter();
+        this.changed$ = new Subject();
+        this.emits$ = new BehaviorSubject(1);
     }
-    get filteredItems() {
-        return this.filterItems(this.flattenSubPages(this.items), this.search);
+    ngOnInit() {
+        this.parseParams(this.activatedRoute.snapshot.queryParams);
     }
-    get itemsWithoutSections() {
-        return this.items[this.items.length - 1];
+    get attrName() {
+        switch (this.documentationPropertyMode) {
+            case 'input':
+                return `[${this.documentationPropertyName}]`;
+            case 'output':
+                return `(${this.documentationPropertyName})`;
+            case 'input-output':
+                return `[(${this.documentationPropertyName})]`;
+            default:
+                return this.documentationPropertyName;
+        }
     }
-    isActive(route) {
-        return route === this.active;
+    get hasItems() {
+        return !!this.documentationPropertyValues;
     }
-    onGroupClick(index) {
-        this.openPagesGroupsArr[index] = !this.openPagesGroupsArr[index];
+    get shouldShowValues() {
+        return this.documentationPropertyMode !== 'output';
     }
-    closeMenu() {
-        this.menuOpen = false;
+    ngOnChanges() {
+        this.changed$.next();
     }
-    onSearchChange(search) {
-        this.search = search;
-        this.open = this.canOpen;
+    onValueChange(value) {
+        this.documentationPropertyValue = value;
+        this.documentationPropertyValueChange.emit(value);
+        this.setQueryParam(value);
     }
-    onClick() {
-        this.open = false;
-        this.menuOpen = false;
-        this.search = '';
-        this.openActivePageGroup();
+    parseParams(params) {
+        if (!params[this.documentationPropertyName] &&
+            !params[this.documentationPropertyName + SERIALIZED_SUFFIX]) {
+            return;
+        }
+        const isValueAvailableByKey = !!params[this.documentationPropertyName + SERIALIZED_SUFFIX];
+        if (isValueAvailableByKey && this.documentationPropertyValues) {
+            this.onValueChange(this.documentationPropertyValues[params[this.documentationPropertyName + SERIALIZED_SUFFIX]]);
+            return;
+        }
+        this.onValueChange(!isNaN(Number(params[this.documentationPropertyName]))
+            ? Number(params[this.documentationPropertyName])
+            : params[this.documentationPropertyName]);
     }
-    filterItems(items, search) {
-        return items.map(section => uniqBy(section.filter(({ title, keywords = '' }) => {
-            title = title.toLowerCase();
-            search = search.toLowerCase();
-            keywords = keywords.toLowerCase();
-            return (title.includes(search) ||
-                keywords.includes(search) ||
-                title.includes(transliterateKeyboardLayout(search)) ||
-                keywords.includes(transliterateKeyboardLayout(search)) ||
-                search.replace(/-/gi, '').includes(title));
-        }), 'title'));
+    setQueryParam(value) {
+        const tree = this.urlSerializer.parse(this.locationRef.path());
+        const isValueAvailableByKey = value instanceof Object;
+        const computedValue = isValueAvailableByKey && this.documentationPropertyValues
+            ? this.documentationPropertyValues.indexOf(value)
+            : value;
+        const suffix = isValueAvailableByKey ? SERIALIZED_SUFFIX : '';
+        const propName = this.documentationPropertyName + suffix;
+        tree.queryParams = Object.assign(Object.assign({}, tree.queryParams), { [propName]: computedValue });
+        this.locationRef.go(String(tree));
     }
-    flattenSubPages(items) {
-        return items.reduce((array, item) => [
-            ...array,
-            item.reduce((pages, page) => 'subPages' in page
-                ? [...pages, ...page.subPages]
-                : [...pages, page], []),
-        ], []);
+    emitEvent(event) {
+        // For more convenient debugging
+        console.log(this.attrName, event);
+        this.emits$.next(this.emits$.value + 1);
     }
-    isActiveRoute(route) {
-        return this.router.isActive(route, false);
+};
+TuiDocDocumentationPropertyConnectorDirective.ctorParameters = () => [
+    { type: TemplateRef, decorators: [{ type: Inject, args: [TemplateRef,] }] },
+    { type: Location$1, decorators: [{ type: Inject, args: [Location$1,] }] },
+    { type: ActivatedRoute, decorators: [{ type: Inject, args: [ActivatedRoute,] }] },
+    { type: UrlSerializer, decorators: [{ type: Inject, args: [UrlSerializer,] }] }
+];
+__decorate([
+    Input()
+], TuiDocDocumentationPropertyConnectorDirective.prototype, "documentationPropertyName", void 0);
+__decorate([
+    Input()
+], TuiDocDocumentationPropertyConnectorDirective.prototype, "documentationPropertyMode", void 0);
+__decorate([
+    Input()
+], TuiDocDocumentationPropertyConnectorDirective.prototype, "documentationPropertyType", void 0);
+__decorate([
+    Input()
+], TuiDocDocumentationPropertyConnectorDirective.prototype, "documentationPropertyValue", void 0);
+__decorate([
+    Input()
+], TuiDocDocumentationPropertyConnectorDirective.prototype, "documentationPropertyDeprecated", void 0);
+__decorate([
+    Input()
+], TuiDocDocumentationPropertyConnectorDirective.prototype, "documentationPropertyValues", void 0);
+__decorate([
+    Output()
+], TuiDocDocumentationPropertyConnectorDirective.prototype, "documentationPropertyValueChange", void 0);
+TuiDocDocumentationPropertyConnectorDirective = __decorate([
+    Directive({
+        selector: 'ng-template[documentationPropertyName]',
+        exportAs: 'documentationProperty',
+    }),
+    __param(0, Inject(TemplateRef)),
+    __param(1, Inject(Location$1)),
+    __param(2, Inject(ActivatedRoute)),
+    __param(3, Inject(UrlSerializer))
+], TuiDocDocumentationPropertyConnectorDirective);
+
+// @bad TODO subscribe propertiesConnectors changes
+// @bad TODO refactor to make more flexible
+// @dynamic
+let TuiDocDocumentationComponent = class TuiDocDocumentationComponent {
+    constructor(changeDetectorRef, texts) {
+        this.changeDetectorRef = changeDetectorRef;
+        this.texts = texts;
+        this.heading = '';
+        this.showValues = true;
+        this.isAPI = false;
+        this.propertiesConnectors = EMPTY_QUERY;
+        this.activeItemIndex = 0;
     }
-    handleAnchorLink(hash) {
-        setTimeout(() => {
-            this.navigateToAnchorLink(hash);
-        }, SCROLL_INTO_VIEW_DELAY);
+    ngAfterContentInit() {
+        itemsQueryListObservable(this.propertiesConnectors)
+            .pipe(switchMap(items => merge(...items.map(({ changed$ }) => changed$))), watch(this.changeDetectorRef))
+            .subscribe();
     }
-    openActivePageGroup() {
-        this.items.forEach((pages, pagesIndex) => {
-            pages.forEach((page, pageIndex) => {
-                if ('route' in page && this.isActiveRoute(page.route)) {
-                    this.openPagesArr[pagesIndex] = true;
-                    this.active = page.route;
-                }
-                if ('subPages' in page) {
-                    page.subPages.forEach(subPage => {
-                        if (this.isActiveRoute(subPage.route)) {
-                            this.openPagesArr[pagesIndex] = true;
-                            this.openPagesGroupsArr[pagesIndex * 100 + pageIndex] = true;
-                            this.active = subPage.route;
-                        }
-                    });
-                }
-            });
-        });
+    get type() {
+        return this.isAPI ? this.texts[0] : this.texts[1];
     }
-    navigateToAnchorLink(fragment) {
-        const element = fragment && this.documentRef.querySelector(`#${fragment}`);
-        if (!element) {
+    getColor(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 rgbToHex(...parsed);
+    }
+    getOpacity(color) {
+        if (color.startsWith('#') || color.startsWith('rgb(')) {
+            return 100;
+        }
+        if (color === 'transparent') {
+            return 0;
+        }
+        const lastComma = color.lastIndexOf(',');
+        const parsed = color
+            .substr(lastComma)
+            .replace(')', '')
+            .replace(' ', '')
+            .replace(',', '');
+        return Math.round(Number.parseFloat(parsed) * 100);
+    }
+    onColorChange(connector, color) {
+        const opacity = this.getOpacity(connector.documentationPropertyValue || '');
+        if (opacity === 100) {
+            connector.onValueChange(color);
             return;
         }
-        element.classList.add('tui-doc-animated-example');
-        element.scrollIntoView({
-            block: 'start',
-            inline: 'nearest',
-            behavior: 'smooth',
-        });
+        const rgb = hexToRgb(color).join(', ');
+        const result = `rgba(${rgb}, ${opacity / 100})`;
+        connector.onValueChange(result);
+    }
+    onOpacityChange(connector, opacity) {
+        const hex = this.getColor(connector.documentationPropertyValue || '');
+        const rgb = hexToRgb(hex);
+        const result = `rgba(${rgb}, ${opacity / 100})`;
+        connector.onValueChange(result);
+    }
+    stripOptional(name) {
+        return name.replace('?', '');
+    }
+    isOptional(name) {
+        return name.includes('?');
+    }
+    showCleaner(type) {
+        return type.includes('null');
+    }
+    showContentTooltip(type) {
+        return type.includes('PolymorpheusContent');
+    }
+    inspectAny(data) {
+        return inspectAny(data, 2);
     }
 };
-TuiDocNavigationComponent.ctorParameters = () => [
+TuiDocDocumentationComponent.ctorParameters = () => [
     { type: ChangeDetectorRef, decorators: [{ type: Inject, args: [ChangeDetectorRef,] }] },
-    { type: Title, decorators: [{ type: Inject, args: [Title,] }] },
-    { type: Observable, decorators: [{ type: Inject, args: [NAVIGATION_TITLE,] }] },
-    { type: Document, decorators: [{ type: Inject, args: [DOCUMENT,] }] },
-    { type: TuiModeDirective, decorators: [{ type: Inject, args: [TuiModeDirective,] }] },
-    { type: undefined, decorators: [{ type: Optional }, { type: Inject, args: [TuiSidebarDirective,] }] },
-    { type: Array, decorators: [{ type: Inject, args: [NAVIGATION_LABELS,] }] },
-    { type: undefined, decorators: [{ type: Inject, args: [NAVIGATION_ITEMS,] }] },
-    { type: String, decorators: [{ type: Inject, args: [TUI_DOC_SEARCH_TEXT,] }] },
-    { type: Router, decorators: [{ type: Inject, args: [Router,] }] },
-    { type: ActivatedRoute, decorators: [{ type: Inject, args: [ActivatedRoute,] }] }
+    { type: Array, decorators: [{ type: Inject, args: [TUI_DOC_DOCUMENTATION_TEXTS,] }] }
 ];
 __decorate([
-    HostBinding('class._open')
-], TuiDocNavigationComponent.prototype, "menuOpen", void 0);
+    Input()
+], TuiDocDocumentationComponent.prototype, "heading", void 0);
 __decorate([
-    tuiPure
-], TuiDocNavigationComponent.prototype, "filterItems", null);
+    Input()
+], TuiDocDocumentationComponent.prototype, "showValues", void 0);
 __decorate([
-    tuiPure
-], TuiDocNavigationComponent.prototype, "flattenSubPages", null);
-TuiDocNavigationComponent = __decorate([
+    Input()
+], TuiDocDocumentationComponent.prototype, "isAPI", void 0);
+__decorate([
+    ContentChildren(TuiDocDocumentationPropertyConnectorDirective)
+], TuiDocDocumentationComponent.prototype, "propertiesConnectors", void 0);
+TuiDocDocumentationComponent = __decorate([
     Component({
-        selector: 'tui-doc-navigation',
-        template: "<tui-hosted-dropdown\n    *tuiLet=\"filteredItems as filtered\"\n    tuiAutoFocus\n    tuiDropdownLimitWidth=\"fixed\"\n    class=\"input\"\n    [autoFocus]=\"!!sidebar\"\n    [content]=\"dropdown\"\n    [canOpen]=\"canOpen\"\n    [(open)]=\"open\"\n>\n    <tui-primitive-textfield\n        iconAlign=\"left\"\n        tuiTextfieldSize=\"m\"\n        iconContent=\"tuiIconSearch\"\n        [pseudoFocused]=\"open || null\"\n        [tuiTextfieldCleaner]=\"true\"\n        [tuiTextfieldLabelOutside]=\"true\"\n        [value]=\"search\"\n        (valueChange)=\"onSearchChange($event)\"\n    >\n        {{ searchText }}\n    </tui-primitive-textfield>\n    <ng-template #dropdown let-activeZone>\n        <tui-data-list>\n            <tui-opt-group\n                *ngFor=\"let group of filtered; let index = index\"\n                [label]=\"labels[index] || ''\"\n            >\n                <a\n                    *ngFor=\"let item of group\"\n                    tuiOption\n                    [routerLink]=\"item.route\"\n                    (click)=\"onClick()\"\n                >\n                    {{ item.title }}\n                </a>\n            </tui-opt-group>\n        </tui-data-list>\n    </ng-template>\n</tui-hosted-dropdown>\n\n<nav class=\"navigation\">\n    <tui-scrollbar class=\"scrollbar\" [tuiMode]=\"mode$ | async\">\n        <tui-accordion [closeOthers]=\"false\" [rounded]=\"false\">\n            <tui-accordion-item\n                *ngFor=\"let label of labels; index as index\"\n                size=\"s\"\n                [borders]=\"null\"\n                [(open)]=\"!!openPagesArr[index]\"\n            >\n                <span class=\"tui-space_left-2\">\n                    <strong>{{ label }}</strong>\n                </span>\n                <ng-template tuiAccordionItemContent>\n                    <div class=\"section\">\n                        <ng-container\n                            *ngFor=\"let item of items[index]; index as subIndex\"\n                        >\n                            <ng-container\n                                *ngTemplateOutlet=\"pages; context: {item: item, index: index * 100 + subIndex}\"\n                            ></ng-container>\n                        </ng-container>\n                    </div>\n                </ng-template>\n            </tui-accordion-item>\n        </tui-accordion>\n        <div class=\"items-container\">\n            <ng-container\n                *ngFor=\"let item of itemsWithoutSections; let index = index\"\n            >\n                <ng-container\n                    *ngTemplateOutlet=\"pages; context: {item: item, index: items.length - 1 + index}\"\n                ></ng-container>\n            </ng-container>\n        </div>\n\n        <ng-template #pages let-item=\"item\" let-index=\"index\">\n            <a\n                *ngIf=\"!item.subPages; else subPages\"\n                tuiLink\n                routerLinkActive=\"sublink_active\"\n                class=\"sublink\"\n                [routerLink]=\"item.route\"\n                [scrollIntoView]=\"isActive(item.route)\"\n                (click)=\"closeMenu()\"\n            >\n                {{ item.title }}\n            </a>\n            <ng-template #subPages>\n                <div\n                    routerLinkActive\n                    class=\"subsection\"\n                    [routerLinkActiveOptions]=\"{exact: false}\"\n                >\n                    <button\n                        *ngIf=\"item.subPages\"\n                        tuiLink\n                        type=\"button\"\n                        class=\"sublink sublink_subsection\"\n                        (click)=\"onGroupClick(index)\"\n                    >\n                        <tui-svg\n                            src=\"tuiIconChevronRight\"\n                            class=\"chevron\"\n                            [class.chevron_active]=\"!!openPagesGroupsArr[index]\"\n                        ></tui-svg>\n                        {{ item.title }}\n                    </button>\n                    <tui-expand\n                        class=\"tui-space_left-1\"\n                        [expanded]=\"!!openPagesGroupsArr[index]\"\n                    >\n                        <div class=\"section section_bordered\">\n                            <a\n                                *ngFor=\"let subPage of item.subPages\"\n                                tuiLink\n                                routerLinkActive=\"sublink_active\"\n                                class=\"sublink sublink_small\"\n                                [routerLink]=\"subPage.route\"\n                                [scrollIntoView]=\"isActive(subPage.route)\"\n                                (click)=\"closeMenu()\"\n                            >\n                                {{ subPage.title }}\n                            </a>\n                        </div>\n                    </tui-expand>\n                </div>\n            </ng-template>\n        </ng-template>\n    </tui-scrollbar>\n</nav>\n\n<ng-content></ng-content>\n",
-        providers: NAVIGATION_PROVIDERS,
+        selector: 'tui-doc-documentation',
+        template: "<h1 *ngIf=\"heading\" class=\"tui-text_h4\">{{ heading }}</h1>\n<ng-content></ng-content>\n<table class=\"tui-table tui-table_layout_fixed tui-table_font-size_s\">\n    <tr class=\"tui-table__tr tui-table__tr_hover_disabled t-row t-row_header\">\n        <th class=\"tui-table__th tui-table__th_first t-cell t-cell_prop\">\n            {{ texts[2] }}\n        </th>\n        <td class=\"tui-table__th\">{{ type }}</td>\n        <td\n            *ngIf=\"showValues && !isAPI\"\n            class=\"\n                tui-table__th tui-table__th_last tui-table__th_text_right\n                t-cell t-cell_value\n            \"\n        >\n            {{ texts[3] }}\n        </td>\n    </tr>\n    <tr\n        *ngFor=\"let propertyConnector of propertiesConnectors; last as lastItem\"\n        class=\"tui-table__tr tui-table__tr_hover_disabled t-row\"\n        [class.t-deprecated]=\"propertyConnector.documentationPropertyDeprecated\"\n        [class.tui-table__tr_border_none]=\"lastItem\"\n    >\n        <td\n            class=\"\n                tui-table__td tui-table__td_first tui-table__td_align_center\n                t-cell\n            \"\n        >\n            <div\n                automation-id=\"tui-documentation__property-name\"\n                class=\"t-property t-cell\"\n            >\n                {{ stripOptional(propertyConnector.attrName) }}\n                <tui-badge\n                    *ngIf=\"isOptional(propertyConnector.attrName)\"\n                    size=\"s\"\n                    value=\"Optional\"\n                ></tui-badge>\n            </div>\n            <span\n                *ngIf=\"propertyConnector.documentationPropertyDeprecated\"\n                class=\"t-deprecated-label\"\n            >\n                deprecated\n            </span>\n            <ng-container\n                *ngTemplateOutlet=\"propertyConnector.template\"\n            ></ng-container>\n        </td>\n        <td class=\"tui-table__td tui-table__td_align_center t-cell\">\n            <span class=\"type\">\n                {{ propertyConnector.documentationPropertyType }}\n                <tui-tooltip\n                    *ngIf=\"showContentTooltip(propertyConnector.documentationPropertyType)\"\n                    [describeId]=\"propertyConnector.attrName\"\n                    [content]=\"content\"\n                >\n                    <ng-template #content>\n                        {{ texts[4] }}\n                        <a\n                            tuiLink\n                            tuiMode=\"onDark\"\n                            target=\"_blank\"\n                            href=\"https://github.com/TinkoffCreditSystems/ng-polymorpheus\"\n                        >\n                            <code>ng-polymorpheus</code>\n                        </a>\n                    </ng-template>\n                </tui-tooltip>\n            </span>\n        </td>\n        <td\n            *ngIf=\"showValues\"\n            class=\"\n                tui-table__td\n                tui-table__td_align_center\n                tui-table__td_last\n                tui-table__td_text_right\n                t-cell\n            \"\n        >\n            <ng-container\n                *ngIf=\"propertyConnector.shouldShowValues; else elseEmitter\"\n            >\n                <tui-select\n                    *ngIf=\"propertyConnector.hasItems; else noItems\"\n                    tuiTextfieldSize=\"m\"\n                    tuiDropdownLimitWidth=\"min\"\n                    [tuiTextfieldCleaner]=\"showCleaner(propertyConnector.documentationPropertyType)\"\n                    [tuiTextfieldLabelOutside]=\"true\"\n                    [nativeId]=\"propertyConnector.attrName\"\n                    [valueContent]=\"selectContent\"\n                    [ngModel]=\"propertyConnector.documentationPropertyValue\"\n                    (ngModelChange)=\"propertyConnector.onValueChange($event)\"\n                >\n                    <code class=\"t-exception\">null</code>\n                    <tui-data-list-wrapper\n                        *tuiDataList\n                        [items]=\"propertyConnector.documentationPropertyValues\"\n                        [itemContent]=\"selectContent\"\n                    ></tui-data-list-wrapper>\n                </tui-select>\n                <ng-template #selectContent let-data>\n                    <code>{{ inspectAny(data) }}</code>\n                </ng-template>\n\n                <ng-template #noItems>\n                    <ng-container\n                        [ngSwitch]=\"propertyConnector.documentationPropertyType\"\n                    >\n                        <tui-toggle\n                            *ngSwitchCase=\"'boolean'\"\n                            size=\"l\"\n                            [nativeId]=\"propertyConnector.attrName\"\n                            [showIcons]=\"true\"\n                            [ngModel]=\"propertyConnector.documentationPropertyValue\"\n                            (ngModelChange)=\"propertyConnector.onValueChange($event)\"\n                        ></tui-toggle>\n\n                        <tui-primitive-textfield\n                            *ngSwitchCase=\"'string'\"\n                            tuiTextfieldSize=\"m\"\n                            [nativeId]=\"propertyConnector.attrName\"\n                            [tuiTextfieldLabelOutside]=\"true\"\n                            [tuiTextfieldCleaner]=\"true\"\n                            [value]=\"propertyConnector.documentationPropertyValue || ''\"\n                            (valueChange)=\"propertyConnector.onValueChange($event)\"\n                        ></tui-primitive-textfield>\n\n                        <div *ngSwitchCase=\"'color'\" tuiGroup>\n                            <tui-primitive-textfield\n                                tuiTextfieldType=\"color\"\n                                tuiTextfieldSize=\"m\"\n                                [attr.id]=\"propertyConnector.attrName\"\n                                [tuiTextfieldLabelOutside]=\"true\"\n                                [tuiInputOpacity]=\"getOpacity(propertyConnector.documentationPropertyValue)\"\n                                [value]=\"getColor(propertyConnector.documentationPropertyValue)\"\n                                (valueChange)=\"onColorChange(propertyConnector, $event)\"\n                            ></tui-primitive-textfield>\n                            <tui-input-count\n                                tuiTextfieldSize=\"m\"\n                                [max]=\"100\"\n                                [ngModel]=\"getOpacity(propertyConnector.documentationPropertyValue)\"\n                                (ngModelChange)=\"onOpacityChange(propertyConnector, $event)\"\n                            >\n                                Opacity\n                            </tui-input-count>\n                        </div>\n\n                        <tui-input-count\n                            *ngSwitchCase=\"'number'\"\n                            tuiTextfieldSize=\"m\"\n                            [nativeId]=\"propertyConnector.attrName\"\n                            [tuiTextfieldLabelOutside]=\"true\"\n                            [ngModel]=\"propertyConnector.documentationPropertyValue\"\n                            (ngModelChange)=\"propertyConnector.onValueChange($event)\"\n                        ></tui-input-count>\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$ | async\"\n                >\n                    Emit!\n                </tui-notification>\n            </ng-template>\n        </td>\n    </tr>\n</table>\n",
         changeDetection: ChangeDetectionStrategy.OnPush,
-        styles: [":host{z-index:1;display:flex;flex-direction:column;text-align:center;background:var(--tui-base-01)}.input{display:block;margin:1.25rem}.navigation{display:flex;max-height:100%;min-height:0;flex:1 1 0;text-align:left}.scrollbar{width:100%;scroll-behavior:smooth}.items-container{display:flex;flex-direction:column;padding:0 16px}.section{display:flex;flex-direction:column;align-items:flex-start;margin:-1rem 0 -.5rem}.section_bordered{margin:.5rem 0;border-left:1px solid var(--tui-base-03)}.subsection{margin-left:.5rem}.sublink{-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:0;border:0;background:0 0;font-size:inherit;font:var(--tui-font-text-m);margin-left:.5rem;line-height:2.75rem}.sublink_small{margin-left:1rem;line-height:1.5rem}.sublink_small:not(:first-child){margin-top:1rem}.sublink_subsection{margin-left:0;line-height:2.75rem}.sublink_active{color:var(--tui-text-01)}.chevron{transition-property:transform;transition-duration:var(--tui-duration,300ms);transition-timing-function:ease-in-out;width:1rem;height:1rem;margin:-.25rem .25rem 0 -.1875rem}.chevron_active{transform:rotate(90deg)}"]
+        animations: [
+            trigger('emitEvent', [
+                transition(':increment', [style({ opacity: 1 }), animate('500ms ease-in')]),
+            ]),
+        ],
+        styles: [":host{display:block;min-width:100%}.t-cell_prop{width:40%}.t-cell_value{max-width:20rem}@media screen and (max-width:47.9375em){.t-row{display:flex;flex-wrap:wrap}.t-row_header{display:none}.t-cell_value{width:9.375rem}.t-cell{width:100%;height:auto;padding:.5rem 0;text-align:left}}.t-property{font:var(--tui-font-text-m);margin-bottom:.25rem;font-family:monospace;color:#8f75d1}.t-type{font-family:monospace}.t-deprecated{background-color:var(--tui-error-bg)}.t-deprecated-label{margin-right:.125rem;color:var(--tui-error-fill)}.t-exception{display:block;width:-webkit-max-content;width:-moz-max-content;width:max-content}.t-output{text-align:left;opacity:0}"]
     }),
     __param(0, Inject(ChangeDetectorRef)),
-    __param(1, Inject(Title)),
-    __param(2, Inject(NAVIGATION_TITLE)),
-    __param(3, Inject(DOCUMENT)),
-    __param(4, Inject(TuiModeDirective)),
-    __param(5, Optional()),
-    __param(5, Inject(TuiSidebarDirective)),
-    __param(6, Inject(NAVIGATION_LABELS)),
-    __param(7, Inject(NAVIGATION_ITEMS)),
-    __param(8, Inject(TUI_DOC_SEARCH_TEXT)),
-    __param(9, Inject(Router)),
-    __param(10, Inject(ActivatedRoute))
-], TuiDocNavigationComponent);
+    __param(1, Inject(TUI_DOC_DOCUMENTATION_TEXTS))
+], TuiDocDocumentationComponent);
+
+let TuiInputOpacityDirective = class TuiInputOpacityDirective {
+    constructor(renderer, tuiFocusableComponent) {
+        this.renderer = renderer;
+        this.tuiFocusableComponent = tuiFocusableComponent;
+    }
+    set tuiInputOpacity(opacity) {
+        const { nativeFocusableElement } = this.tuiFocusableComponent;
+        if (nativeFocusableElement) {
+            this.renderer.setStyle(nativeFocusableElement, 'opacity', opacity / 100);
+        }
+    }
+};
+TuiInputOpacityDirective.ctorParameters = () => [
+    { type: Renderer2, decorators: [{ type: Inject, args: [Renderer2,] }] },
+    { type: undefined, decorators: [{ type: Inject, args: [TUI_FOCUSABLE_ITEM_ACCESSOR,] }] }
+];
+__decorate([
+    Input()
+], TuiInputOpacityDirective.prototype, "tuiInputOpacity", null);
+TuiInputOpacityDirective = __decorate([
+    Directive({
+        selector: '[tuiInputOpacity]',
+    }),
+    __param(0, Inject(Renderer2)),
+    __param(1, Inject(TUI_FOCUSABLE_ITEM_ACCESSOR))
+], TuiInputOpacityDirective);
+
+let TuiInputOpacityModule = class TuiInputOpacityModule {
+};
+TuiInputOpacityModule = __decorate([
+    NgModule({
+        declarations: [TuiInputOpacityDirective],
+        exports: [TuiInputOpacityDirective],
+    })
+], TuiInputOpacityModule);
+
+let TuiDocDocumentationModule = class TuiDocDocumentationModule {
+};
+TuiDocDocumentationModule = __decorate([
+    NgModule({
+        imports: [
+            CommonModule,
+            FormsModule,
+            RouterModule,
+            TuiBadgeModule,
+            TuiSelectModule,
+            TuiToggleModule,
+            TuiTooltipModule,
+            TuiLinkModule,
+            TuiInputCountModule,
+            TuiModeModule,
+            TuiGroupModule,
+            TuiInputOpacityModule,
+            TuiPrimitiveTextfieldModule,
+            TuiTextfieldControllerModule,
+            TuiHintControllerModule,
+            TuiDropdownControllerModule,
+            TuiDataListModule,
+            TuiDataListWrapperModule,
+            TuiNotificationModule,
+        ],
+        declarations: [
+            TuiDocDocumentationComponent,
+            TuiDocDocumentationPropertyConnectorDirective,
+        ],
+        exports: [
+            TuiDocDocumentationComponent,
+            TuiDocDocumentationPropertyConnectorDirective,
+        ],
+    })
+], TuiDocDocumentationModule);
+
+const TUI_DOC_CODE_EDITOR = new InjectionToken('Contains service for opening online IDE e.g. Stackblitz');
+
+const TUI_DOC_EXAMPLE_CONTENT_PROCESSOR = new InjectionToken('Processes content in example', { factory: () => identity });
+
+function rawLoadRecord(example) {
+    return __awaiter(this, void 0, void 0, function* () {
+        const processedContent = {};
+        for (const [key, content] of Object.entries(example)) {
+            processedContent[key] = yield rawLoad(content);
+        }
+        return processedContent;
+    });
+}
+
+// Ambient type cannot be used without dynamic https://github.com/angular/angular/issues/23395
+// @dynamic
+let TuiDocExampleComponent = class TuiDocExampleComponent {
+    constructor(id, clipboard, notifications, location, copyTexts$, texts, codeEditor, processContent) {
+        this.id = id;
+        this.clipboard = clipboard;
+        this.notifications = notifications;
+        this.location = location;
+        this.copyTexts$ = copyTexts$;
+        this.texts = texts;
+        this.codeEditor = codeEditor;
+        this.processContent = processContent;
+        this.rawLoader$$ = new BehaviorSubject({});
+        this.heading = '';
+        this.description = '';
+        this.componentName = this.location.pathname.slice(1);
+        this.activeItemIndex = 0;
+        this.defaultTab = this.texts[0];
+        this.copy$ = this.copyTexts$.pipe(map(([copy]) => copy));
+        this.processor$ = this.rawLoader$$.pipe(switchMap(rawLoadRecord), map(this.processContent));
+    }
+    set content(content) {
+        this.rawLoader$$.next(content);
+    }
+    copyExampleLink() {
+        const hashPosition = this.location.href.indexOf('#');
+        const currentUrl = hashPosition > -1
+            ? this.location.href.substr(0, hashPosition)
+            : this.location.href;
+        const url = `${currentUrl}#${this.id}`;
+        this.clipboard.copy(url);
+        this.notifications
+            .show(this.texts[1], {
+            label: this.texts[2],
+            status: "success" /* Success */,
+        })
+            .subscribe();
+    }
+};
+TuiDocExampleComponent.ctorParameters = () => [
+    { type: String, decorators: [{ type: Attribute, args: ['id',] }] },
+    { type: Clipboard, decorators: [{ type: Inject, args: [Clipboard,] }] },
+    { type: TuiNotificationsService, decorators: [{ type: Inject, args: [TuiNotificationsService,] }] },
+    { type: Location, decorators: [{ type: Inject, args: [LOCATION,] }] },
+    { type: Observable, decorators: [{ type: Inject, args: [TUI_COPY_TEXTS,] }] },
+    { type: Array, decorators: [{ type: Inject, args: [TUI_DOC_EXAMPLE_TEXTS,] }] },
+    { type: undefined, decorators: [{ type: Optional }, { type: Inject, args: [TUI_DOC_CODE_EDITOR,] }] },
+    { type: undefined, decorators: [{ type: Inject, args: [TUI_DOC_EXAMPLE_CONTENT_PROCESSOR,] }] }
+];
+__decorate([
+    Input()
+], TuiDocExampleComponent.prototype, "heading", void 0);
+__decorate([
+    Input()
+], TuiDocExampleComponent.prototype, "description", void 0);
+__decorate([
+    Input()
+], TuiDocExampleComponent.prototype, "content", null);
+__decorate([
+    Input()
+], TuiDocExampleComponent.prototype, "componentName", void 0);
+TuiDocExampleComponent = __decorate([
+    Component({
+        selector: 'tui-doc-example',
+        template: "<h3 *ngIf=\"heading\" class=\"t-title\">\n    <span polymorpheus-outlet [content]=\"heading\"></span>\n    <button\n        *ngIf=\"id\"\n        tuiIconButton\n        type=\"button\"\n        size=\"xs\"\n        icon=\"tuiIconLinkLarge\"\n        appearance=\"icon\"\n        class=\"t-link-icon\"\n        [title]=\"copy$ | async\"\n        (click)=\"copyExampleLink()\"\n    ></button>\n</h3>\n<h4\n    *ngIf=\"description\"\n    polymorpheus-outlet\n    class=\"t-description\"\n    [content]=\"description\"\n></h4>\n\n<div *ngIf=\"processor$ | async as content\" class=\"t-example\">\n    <ng-container *ngIf=\"content | tuiDocExampleGetTabs: defaultTab as tabs\">\n        <div class=\"t-tabs-wrapper\">\n            <tui-tabs-with-more\n                class=\"t-tabs\"\n                [(activeItemIndex)]=\"activeItemIndex\"\n            >\n                <ng-container *ngFor=\"let tab of tabs\">\n                    <button *tuiTab tuiTab>{{tab}}</button>\n                </ng-container>\n            </tui-tabs-with-more>\n\n            <button\n                *ngIf=\"codeEditor\"\n                tuiButton\n                appearance=\"flat\"\n                size=\"s\"\n                (click)=\"codeEditor.open(componentName, id || '',  content)\"\n            >\n                Edit on {{codeEditor.name}}\n            </button>\n        </div>\n\n        <ng-container\n            *ngIf=\"{\n                activeTab: tabs[activeItemIndex],\n                code: content[tabs[activeItemIndex]] || ''\n            } as state\"\n        >\n            <div\n                *ngIf=\"state.activeTab == defaultTab; else codeSection\"\n                automation-id=\"tui-doc-example\"\n                class=\"t-demo\"\n            >\n                <ng-content></ng-content>\n            </div>\n\n            <ng-template #codeSection>\n                <tui-doc-copy\n                    class=\"t-copy-code\"\n                    [cdkCopyToClipboard]=\"state.code\"\n                ></tui-doc-copy>\n                <tui-doc-code [code]=\"state.code\"></tui-doc-code>\n            </ng-template>\n        </ng-container>\n    </ng-container>\n</div>\n",
+        changeDetection: ChangeDetectionStrategy.OnPush,
+        styles: [":host{position:relative;display:block;padding-top:3.5rem;clear:right}.t-title{font:var(--tui-font-heading-5);margin:0 0 .5rem}@media screen and (max-width:47.9375em){:host{padding-top:2rem}.t-title{font:var(--tui-font-heading-6)}}.t-description{font:var(--tui-font-text-m);font-weight:400;margin:0}.t-description:first-letter,.t-title:first-letter{text-transform:capitalize}.t-example{position:relative;margin-top:1.5rem;border:1px solid var(--tui-base-03);border-radius:var(--tui-radius-m);box-shadow:0 .125rem .1875rem rgba(0,0,0,.1)}.t-tabs-wrapper{display:flex;padding:0 2rem;box-shadow:inset 0 -1px var(--tui-base-03);justify-content:space-between;align-items:center}@media screen and (max-width:47.9375em){.t-example{margin-top:.75rem}.t-tabs-wrapper{padding:0 1rem}}.t-tabs{flex-grow:1}.t-demo{padding:2rem;overflow-x:auto}@media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.t-demo::-webkit-scrollbar,.t-demo::-webkit-scrollbar-thumb{width:1rem;height:1rem;border-radius:6.25rem;background-clip:padding-box;border:6px solid transparent}.t-demo::-webkit-scrollbar{background-color:transparent}.t-demo::-webkit-scrollbar-thumb{background-color:var(--tui-clear-hover)}.t-demo::-webkit-scrollbar-thumb:hover{background-color:var(--tui-clear-active)}.t-demo::-webkit-scrollbar-thumb:active{background-color:var(--tui-text-03)}}@media screen and (max-width:47.9375em){.t-demo{padding:1rem}}.t-copy-code{position:absolute;top:4.375rem;right:1rem}.t-link-icon{margin-left:.3rem;vertical-align:baseline}"]
+    }),
+    __param(0, Attribute('id')),
+    __param(1, Inject(Clipboard)),
+    __param(2, Inject(TuiNotificationsService)),
+    __param(3, Inject(LOCATION)),
+    __param(4, Inject(TUI_COPY_TEXTS)),
+    __param(5, Inject(TUI_DOC_EXAMPLE_TEXTS)),
+    __param(6, Optional()),
+    __param(6, Inject(TUI_DOC_CODE_EDITOR)),
+    __param(7, Inject(TUI_DOC_EXAMPLE_CONTENT_PROCESSOR))
+], TuiDocExampleComponent);
+
+let TuiDocExampleGetTabsPipe = class TuiDocExampleGetTabsPipe {
+    transform(content, defaultTab) {
+        return [defaultTab, ...Object.keys(content)];
+    }
+};
+TuiDocExampleGetTabsPipe = __decorate([
+    Pipe({ name: 'tuiDocExampleGetTabs' })
+], TuiDocExampleGetTabsPipe);
+
+let TuiDocExampleModule = class TuiDocExampleModule {
+};
+TuiDocExampleModule = __decorate([
+    NgModule({
+        imports: [
+            CommonModule,
+            ClipboardModule,
+            TuiTabsModule,
+            TuiButtonModule,
+            TuiDocCopyModule,
+            TuiDocCodeModule,
+            PolymorpheusModule,
+        ],
+        declarations: [TuiDocExampleComponent, TuiDocExampleGetTabsPipe],
+        exports: [TuiDocExampleComponent, TuiDocExampleGetTabsPipe],
+    })
+], TuiDocExampleModule);
+
+var TuiDocMainComponent_1;
+// @dynamic
+let TuiDocMainComponent = TuiDocMainComponent_1 = class TuiDocMainComponent {
+    constructor(storage, windowRef) {
+        this.storage = storage;
+        this.windowRef = windowRef;
+        this.night = this.storage.getItem('night') === 'true' ||
+            (this.storage.getItem('night') === null &&
+                this.windowRef.matchMedia('(prefers-color-scheme: dark)').matches);
+        this.change$ = new Subject();
+    }
+    get mode() {
+        return this.night ? 'onDark' : null;
+    }
+    onMode(night) {
+        this.night = night;
+        this.change$.next();
+        this.storage.setItem('night', String(night));
+    }
+};
+TuiDocMainComponent.ctorParameters = () => [
+    { type: Storage, decorators: [{ type: Inject, args: [LOCAL_STORAGE,] }] },
+    { type: Window, decorators: [{ type: Inject, args: [WINDOW,] }] }
+];
+TuiDocMainComponent = TuiDocMainComponent_1 = __decorate([
+    Component({
+        selector: 'tui-doc-main',
+        template: "<tui-theme-night *ngIf=\"night\"></tui-theme-night>\n<tui-root>\n    <div class=\"tui-doc-page\">\n        <tui-doc-navigation class=\"tui-doc-navigation\">\n            <ng-content select=\"tuiDocNavigation\"></ng-content>\n        </tui-doc-navigation>\n        <div class=\"tui-doc-content\">\n            <router-outlet class=\"tui-doc-outlet\"></router-outlet>\n        </div>\n    </div>\n    <header tuiDocHeader>\n        <label class=\"night-mode\">\n            Night mode\n            <tui-toggle\n                class=\"tui-space_left-2\"\n                [ngModel]=\"night\"\n                (ngModelChange)=\"onMode($event)\"\n            ></tui-toggle>\n        </label>\n        <ng-content select=\"tuiDocHeader\"></ng-content>\n    </header>\n    <ng-container ngProjectAs=\"tuiOverContent\">\n        <ng-content select=\"tuiOverContent\"></ng-content>\n    </ng-container>\n    <ng-container ngProjectAs=\"tuiOverDialogs\">\n        <ng-content select=\"tuiOverDialogs\"></ng-content>\n    </ng-container>\n    <ng-container ngProjectAs=\"tuiOverNotifications\">\n        <ng-content select=\"tuiOverNotifications\"></ng-content>\n    </ng-container>\n    <ng-container ngProjectAs=\"tuiOverPortals\">\n        <ng-content select=\"tuiOverPortals\"></ng-content>\n    </ng-container>\n    <ng-container ngProjectAs=\"tuiOverHints\">\n        <ng-content select=\"tuiOverHints\"></ng-content>\n    </ng-container>\n</tui-root>\n",
+        encapsulation: ViewEncapsulation.None,
+        providers: [
+            {
+                provide: TuiModeDirective,
+                useExisting: forwardRef(() => TuiDocMainComponent_1),
+            },
+            TuiSwipeService,
+        ],
+        styles: ["html{scroll-padding-top:4rem;height:auto}tui-root>tui-scroll-controls{top:4rem!important}@-webkit-keyframes tuiShaking{from,to{transform:translate3d(0,0,0)}10%,30%,50%,70%,90%{transform:translate3d(-.3125rem,0,0)}20%,40%,60%,80%{transform:translate3d(.3125rem,0,0)}}@keyframes tuiShaking{from,to{transform:translate3d(0,0,0)}10%,30%,50%,70%,90%{transform:translate3d(-.3125rem,0,0)}20%,40%,60%,80%{transform:translate3d(.3125rem,0,0)}}body{background:var(--tui-base-01);height:auto}tui-doc-main{display:block}code:not(.hljs):not(.exception){transition-property:background;transition-duration:var(--tui-duration,300ms);transition-timing-function:ease-in-out;background:var(--tui-base-02);color:var(--tui-text-02);vertical-align:middle;box-shadow:inset 0 -2px var(--tui-secondary);padding:.375rem .5rem;font-size:.875rem;border-radius:.5rem}:focus code:not(.exception){background:var(--tui-base-01)}.tui-doc-page{position:relative;z-index:0;padding-top:4rem}tui-doc-navigation.tui-doc-navigation{position:fixed;top:4rem;bottom:0;width:16.25rem;border-right:1px solid var(--tui-base-03)}.tui-doc-content{margin-left:16.25rem}@media screen and (max-width:47.9375em){tui-doc-navigation.tui-doc-navigation{display:none}.tui-doc-content{margin-left:0}}.tui-doc-outlet+*{display:block}.tui-doc-animated-example{-webkit-animation:1s .3s tuiShaking;animation:1s .3s tuiShaking}label.night-mode{cursor:pointer}.hljs-tag{background:0 0}.hljs{display:block;overflow-x:auto;padding:.5em;color:var(--tui-text-01);background-color:var(--tui-clear-disabled)}.hljs-subst,.hljs-title{font-weight:400;color:var(--tui-text-01)}.hljs-comment,.hljs-quote{color:var(--tui-text-03);font-style:italic}.hljs-meta{color:#e38162}.hljs-keyword,.hljs-literal,.hljs-name,.hljs-section,.hljs-selector-class,.hljs-selector-id,.hljs-selector-tag,.hljs-type{font-weight:700;color:var(--tui-link)}.hljs-attribute,.hljs-link,.hljs-number,.hljs-regexp{font-weight:700;color:var(--tui-support-06)}.hljs-link,.hljs-number,.hljs-regexp{font-weight:400}.hljs-string{color:var(--tui-positive);font-weight:700}.hljs-bullet,.hljs-formula,.hljs-symbol{color:var(--tui-text-01);background:var(--tui-base-02);font-style:italic}.hljs-doctag{text-decoration:underline}.hljs-template-variable,.hljs-variable{color:var(--tui-warning-fill)}.hljs-addition{background:var(--tui-success-bg)}.hljs-deletion{background:var(--tui-error-bg)}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:700}.hljs .hljs-line-numbers{padding:0}.hljs-ln-numbers{vertical-align:top;opacity:.3;text-align:right;padding-right:1em!important}"]
+    }),
+    __param(0, Inject(LOCAL_STORAGE)),
+    __param(1, Inject(WINDOW))
+], TuiDocMainComponent);
 
 let ScrollIntoViewDirective = class ScrollIntoViewDirective {
     constructor(destroy$, { nativeElement }) {
@@ -615,595 +922,288 @@ ScrollIntoViewModule = __decorate([
     })
 ], ScrollIntoViewModule);
 
-let TuiDocNavigationModule = class TuiDocNavigationModule {
-};
-TuiDocNavigationModule = __decorate([
-    NgModule({
-        imports: [
-            CommonModule,
-            FormsModule,
-            RouterModule,
-            ScrollIntoViewModule,
-            TuiButtonModule,
-            TuiPrimitiveTextfieldModule,
-            TuiTextfieldControllerModule,
-            TuiActiveZoneModule,
-            TuiLetModule,
-            TuiModeModule,
-            TuiLinkModule,
-            TuiExpandModule,
-            TuiHostedDropdownModule,
-            TuiDropdownControllerModule,
-            TuiAccordionModule,
-            TuiScrollbarModule,
-            TuiSvgModule,
-            TuiDataListModule,
-            TuiAutoFocusModule,
-        ],
-        declarations: [TuiDocNavigationComponent],
-        exports: [TuiDocNavigationComponent],
-    })
-], TuiDocNavigationModule);
-
-function rgbToHex(r, g, b) {
-    return ('#' +
-        [r, g, b]
-            .map(x => {
-            const hex = x.toString(16);
-            return hex.length === 1 ? '0' + hex : hex;
-        })
-            .join(''));
-}
-function hexToRgb(hex) {
-    const matches = hex
-        .replace('#', '')
-        .split('')
-        .map((char, _, array) => (array.length === 3 ? char + char : char))
-        .join('')
-        .match(/.{2}/g);
-    return matches
-        ? matches.map(x => Number.parseInt(x, 16))
-        : [0, 0, 0];
+const MAP = {
+    а: 'f',
+    б: ',',
+    в: 'd',
+    г: 'u',
+    д: 'l',
+    е: 't',
+    ё: '`',
+    ж: ';',
+    з: 'p',
+    и: 'b',
+    й: 'q',
+    к: 'r',
+    л: 'k',
+    м: 'v',
+    н: 'y',
+    о: 'j',
+    п: 'g',
+    р: 'h',
+    с: 'c',
+    т: 'n',
+    у: 'e',
+    ф: 'a',
+    х: '[',
+    ц: 'w',
+    ч: 'x',
+    ш: 'i',
+    щ: 'o',
+    ъ: ']',
+    ы: 's',
+    ь: 'm',
+    ю: '.',
+    я: 'z',
+};
+/**
+ * Translates text mistakenly typed in the Russian layout into English
+ * @param string string with Russian layout characters
+ * @return string with English layout characters
+ */
+function transliterateKeyboardLayout(string) {
+    let newStr = '';
+    for (let i = 0; i < string.length; i++) {
+        newStr += string.charAt(i) in MAP ? MAP[string.charAt(i)] : string.charAt(i);
+    }
+    return newStr;
 }
 
-function inspectArray(array, depth) {
-    if (depth === 0) {
-        return '[…]';
-    }
-    let result = '';
-    let first = true;
-    for (let index = 0; index < array.length; index++) {
-        if (first) {
-            first = false;
-        }
-        else {
-            result += ', ';
-        }
-        result += index in array ? inspectAny(array[index], depth - 1) : 'empty';
-    }
-    return `[${result}]`;
+const TUI_DOC_PAGES = new InjectionToken('Documentation pages', {
+    factory: () => [],
+});
+
+const TUI_DOC_TITLE = new InjectionToken('Page title', {
+    factory: () => '',
+});
+
+const NAVIGATION_TITLE = new InjectionToken('Page title');
+const NAVIGATION_LABELS = new InjectionToken('Navigation sections labels for search');
+const NAVIGATION_ITEMS = new InjectionToken('Navigation pages');
+const NAVIGATION_PROVIDERS = [
+    TuiDestroyService,
+    {
+        provide: NAVIGATION_TITLE,
+        deps: [Router, ActivatedRoute, TUI_DOC_TITLE, TuiDestroyService],
+        useFactory: titleProviderFactory,
+    },
+    {
+        provide: NAVIGATION_LABELS,
+        deps: [TUI_DOC_PAGES],
+        useFactory: labelsProviderFactory,
+    },
+    {
+        provide: NAVIGATION_ITEMS,
+        deps: [TUI_DOC_PAGES],
+        useFactory: itemsProviderFactory,
+    },
+];
+function titleProviderFactory(router, activatedRoute, titlePrefix, destroy$) {
+    return router.events.pipe(filter(event => event instanceof NavigationEnd), map(() => activatedRoute.firstChild), filter(isPresent), mergeMap(({ data }) => data), map(({ title }) => titlePrefix + title), takeUntil(destroy$));
 }
-function inspectObject(object, depth) {
-    if (depth === 0) {
-        return `{…}`;
-    }
-    let result = '';
-    let first = true;
-    for (const key in object) {
-        if (!object.hasOwnProperty(key)) {
-            continue;
-        }
-        if (first) {
-            first = false;
-        }
-        else {
-            result += ', ';
-        }
-        result += `${key}: ${inspectAny(object[key], depth - 1)}`;
-    }
-    return `{${result}}`;
+function labelsProviderFactory(pages) {
+    return pages
+        .map(({ section }) => section)
+        .filter(isPresent)
+        .filter((item, index, array) => array.indexOf(item) === index);
 }
-// @bad TODO add more types
-/**
- * Returns readable JS entity
- * @param data
- * @param depth
- * @return readable JS entity
- */
-function inspectAny(data, depth) {
-    if (data === null) {
-        return 'null';
-    }
-    switch (typeof data) {
-        case 'string':
-            return `'${data}'`;
-        case 'undefined':
-        case 'number':
-        case 'boolean':
-        case 'function':
-            return String(data);
-    }
-    if (data instanceof RegExp) {
-        return data.toString();
-    }
-    if (Array.isArray(data)) {
-        return inspectArray(data, depth);
-    }
-    return inspectObject(data, depth);
+function itemsProviderFactory(pages) {
+    const labels = labelsProviderFactory(pages);
+    return [
+        ...labels.map(label => pages.filter(({ section }) => section === label)),
+        pages.filter(page => !page.section),
+    ];
 }
 
-const SERIALIZED_SUFFIX = '$';
-// @bad TODO: refactor output and value sync
-let TuiDocDocumentationPropertyConnectorDirective = class TuiDocDocumentationPropertyConnectorDirective {
-    constructor(template, locationRef, activatedRoute, urlSerializer) {
-        this.template = template;
-        this.locationRef = locationRef;
+const SCROLL_INTO_VIEW_DELAY = 200;
+// @dynamic
+let TuiDocNavigationComponent = class TuiDocNavigationComponent {
+    constructor(changeDetectorRef, titleService, title$, documentRef, mode, sidebar, labels, items, searchText, router, activatedRoute) {
+        this.documentRef = documentRef;
+        this.mode = mode;
+        this.sidebar = sidebar;
+        this.labels = labels;
+        this.items = items;
+        this.searchText = searchText;
+        this.router = router;
         this.activatedRoute = activatedRoute;
-        this.urlSerializer = urlSerializer;
-        this.documentationPropertyName = '';
-        this.documentationPropertyMode = null;
-        this.documentationPropertyType = '';
-        this.documentationPropertyValue = null;
-        this.documentationPropertyDeprecated = false;
-        this.documentationPropertyValues = null;
-        this.documentationPropertyValueChange = new EventEmitter();
-        this.changed$ = new Subject();
-        this.emits$ = new BehaviorSubject(1);
+        this.search = '';
+        this.open = false;
+        this.openPagesArr = [];
+        this.openPagesGroupsArr = [];
+        this.active = '';
+        this.menuOpen = false;
+        this.mode$ = this.mode.change$.pipe(startWith(null), map(() => this.mode.mode || 'onLight'));
+        // Angular can't navigate no anchor links
+        // https://stackoverflow.com/questions/36101756/angular2-routing-with-hashtag-to-page-anchor
+        title$.subscribe(title => {
+            changeDetectorRef.markForCheck();
+            titleService.setTitle(title);
+            this.openActivePageGroup();
+            this.handleAnchorLink(this.activatedRoute.snapshot.fragment);
+        });
     }
-    ngOnInit() {
-        this.parseParams(this.activatedRoute.snapshot.queryParams);
+    get canOpen() {
+        return this.search.length > 2;
     }
-    get attrName() {
-        switch (this.documentationPropertyMode) {
-            case 'input':
-                return `[${this.documentationPropertyName}]`;
-            case 'output':
-                return `(${this.documentationPropertyName})`;
-            case 'input-output':
-                return `[(${this.documentationPropertyName})]`;
-            default:
-                return this.documentationPropertyName;
-        }
+    get filteredItems() {
+        return this.filterItems(this.flattenSubPages(this.items), this.search);
     }
-    get hasItems() {
-        return !!this.documentationPropertyValues;
+    get itemsWithoutSections() {
+        return this.items[this.items.length - 1];
     }
-    get shouldShowValues() {
-        return this.documentationPropertyMode !== 'output';
+    isActive(route) {
+        return route === this.active;
     }
-    ngOnChanges() {
-        this.changed$.next();
+    onGroupClick(index) {
+        this.openPagesGroupsArr[index] = !this.openPagesGroupsArr[index];
     }
-    onValueChange(value) {
-        this.documentationPropertyValue = value;
-        this.documentationPropertyValueChange.emit(value);
-        this.setQueryParam(value);
+    closeMenu() {
+        this.menuOpen = false;
     }
-    parseParams(params) {
-        if (!params[this.documentationPropertyName] &&
-            !params[this.documentationPropertyName + SERIALIZED_SUFFIX]) {
-            return;
-        }
-        const isValueAvailableByKey = !!params[this.documentationPropertyName + SERIALIZED_SUFFIX];
-        if (isValueAvailableByKey && this.documentationPropertyValues) {
-            this.onValueChange(this.documentationPropertyValues[params[this.documentationPropertyName + SERIALIZED_SUFFIX]]);
-            return;
-        }
-        this.onValueChange(!isNaN(Number(params[this.documentationPropertyName]))
-            ? Number(params[this.documentationPropertyName])
-            : params[this.documentationPropertyName]);
-    }
-    setQueryParam(value) {
-        const tree = this.urlSerializer.parse(this.locationRef.path());
-        const isValueAvailableByKey = value instanceof Object;
-        const computedValue = isValueAvailableByKey && this.documentationPropertyValues
-            ? this.documentationPropertyValues.indexOf(value)
-            : value;
-        const suffix = isValueAvailableByKey ? SERIALIZED_SUFFIX : '';
-        const propName = this.documentationPropertyName + suffix;
-        tree.queryParams = Object.assign(Object.assign({}, tree.queryParams), { [propName]: computedValue });
-        this.locationRef.go(String(tree));
-    }
-    emitEvent(event) {
-        // For more convenient debugging
-        console.log(this.attrName, event);
-        this.emits$.next(this.emits$.value + 1);
-    }
-};
-TuiDocDocumentationPropertyConnectorDirective.ctorParameters = () => [
-    { type: TemplateRef, decorators: [{ type: Inject, args: [TemplateRef,] }] },
-    { type: Location$1, decorators: [{ type: Inject, args: [Location$1,] }] },
-    { type: ActivatedRoute, decorators: [{ type: Inject, args: [ActivatedRoute,] }] },
-    { type: UrlSerializer, decorators: [{ type: Inject, args: [UrlSerializer,] }] }
-];
-__decorate([
-    Input()
-], TuiDocDocumentationPropertyConnectorDirective.prototype, "documentationPropertyName", void 0);
-__decorate([
-    Input()
-], TuiDocDocumentationPropertyConnectorDirective.prototype, "documentationPropertyMode", void 0);
-__decorate([
-    Input()
-], TuiDocDocumentationPropertyConnectorDirective.prototype, "documentationPropertyType", void 0);
-__decorate([
-    Input()
-], TuiDocDocumentationPropertyConnectorDirective.prototype, "documentationPropertyValue", void 0);
-__decorate([
-    Input()
-], TuiDocDocumentationPropertyConnectorDirective.prototype, "documentationPropertyDeprecated", void 0);
-__decorate([
-    Input()
-], TuiDocDocumentationPropertyConnectorDirective.prototype, "documentationPropertyValues", void 0);
-__decorate([
-    Output()
-], TuiDocDocumentationPropertyConnectorDirective.prototype, "documentationPropertyValueChange", void 0);
-TuiDocDocumentationPropertyConnectorDirective = __decorate([
-    Directive({
-        selector: 'ng-template[documentationPropertyName]',
-        exportAs: 'documentationProperty',
-    }),
-    __param(0, Inject(TemplateRef)),
-    __param(1, Inject(Location$1)),
-    __param(2, Inject(ActivatedRoute)),
-    __param(3, Inject(UrlSerializer))
-], TuiDocDocumentationPropertyConnectorDirective);
-
-// @bad TODO subscribe propertiesConnectors changes
-// @bad TODO refactor to make more flexible
-// @dynamic
-let TuiDocDocumentationComponent = class TuiDocDocumentationComponent {
-    constructor(changeDetectorRef, texts) {
-        this.changeDetectorRef = changeDetectorRef;
-        this.texts = texts;
-        this.heading = '';
-        this.showValues = true;
-        this.isAPI = false;
-        this.propertiesConnectors = EMPTY_QUERY;
-        this.activeItemIndex = 0;
-    }
-    ngAfterContentInit() {
-        itemsQueryListObservable(this.propertiesConnectors)
-            .pipe(switchMap(items => merge(...items.map(({ changed$ }) => changed$))), watch(this.changeDetectorRef))
-            .subscribe();
-    }
-    get type() {
-        return this.isAPI ? this.texts[0] : this.texts[1];
-    }
-    getColor(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 rgbToHex(...parsed);
-    }
-    getOpacity(color) {
-        if (color.startsWith('#') || color.startsWith('rgb(')) {
-            return 100;
-        }
-        if (color === 'transparent') {
-            return 0;
-        }
-        const lastComma = color.lastIndexOf(',');
-        const parsed = color
-            .substr(lastComma)
-            .replace(')', '')
-            .replace(' ', '')
-            .replace(',', '');
-        return Math.round(Number.parseFloat(parsed) * 100);
-    }
-    onColorChange(connector, color) {
-        const opacity = this.getOpacity(connector.documentationPropertyValue || '');
-        if (opacity === 100) {
-            connector.onValueChange(color);
-            return;
-        }
-        const rgb = hexToRgb(color).join(', ');
-        const result = `rgba(${rgb}, ${opacity / 100})`;
-        connector.onValueChange(result);
-    }
-    onOpacityChange(connector, opacity) {
-        const hex = this.getColor(connector.documentationPropertyValue || '');
-        const rgb = hexToRgb(hex);
-        const result = `rgba(${rgb}, ${opacity / 100})`;
-        connector.onValueChange(result);
-    }
-    stripOptional(name) {
-        return name.replace('?', '');
-    }
-    isOptional(name) {
-        return name.includes('?');
-    }
-    showCleaner(type) {
-        return type.includes('null');
+    onSearchChange(search) {
+        this.search = search;
+        this.open = this.canOpen;
     }
-    showContentTooltip(type) {
-        return type.includes('PolymorpheusContent');
+    onClick() {
+        this.open = false;
+        this.menuOpen = false;
+        this.search = '';
+        this.openActivePageGroup();
     }
-    inspectAny(data) {
-        return inspectAny(data, 2);
+    filterItems(items, search) {
+        return items.map(section => uniqBy(section.filter(({ title, keywords = '' }) => {
+            title = title.toLowerCase();
+            search = search.toLowerCase();
+            keywords = keywords.toLowerCase();
+            return (title.includes(search) ||
+                keywords.includes(search) ||
+                title.includes(transliterateKeyboardLayout(search)) ||
+                keywords.includes(transliterateKeyboardLayout(search)) ||
+                search.replace(/-/gi, '').includes(title));
+        }), 'title'));
     }
-};
-TuiDocDocumentationComponent.ctorParameters = () => [
-    { type: ChangeDetectorRef, decorators: [{ type: Inject, args: [ChangeDetectorRef,] }] },
-    { type: Array, decorators: [{ type: Inject, args: [TUI_DOC_DOCUMENTATION_TEXTS,] }] }
-];
-__decorate([
-    Input()
-], TuiDocDocumentationComponent.prototype, "heading", void 0);
-__decorate([
-    Input()
-], TuiDocDocumentationComponent.prototype, "showValues", void 0);
-__decorate([
-    Input()
-], TuiDocDocumentationComponent.prototype, "isAPI", void 0);
-__decorate([
-    ContentChildren(TuiDocDocumentationPropertyConnectorDirective)
-], TuiDocDocumentationComponent.prototype, "propertiesConnectors", void 0);
-TuiDocDocumentationComponent = __decorate([
-    Component({
-        selector: 'tui-doc-documentation',
-        template: "<h1 *ngIf=\"heading\" class=\"tui-text_h4\">{{ heading }}</h1>\n<ng-content></ng-content>\n<table class=\"tui-table tui-table_layout_fixed tui-table_font-size_s\">\n    <tr class=\"tui-table__tr tui-table__tr_hover_disabled t-row t-row_header\">\n        <th class=\"tui-table__th tui-table__th_first t-cell t-cell_prop\">\n            {{ texts[2] }}\n        </th>\n        <td class=\"tui-table__th\">{{ type }}</td>\n        <td\n            *ngIf=\"showValues && !isAPI\"\n            class=\"\n                tui-table__th tui-table__th_last tui-table__th_text_right\n                t-cell t-cell_value\n            \"\n        >\n            {{ texts[3] }}\n        </td>\n    </tr>\n    <tr\n        *ngFor=\"let propertyConnector of propertiesConnectors; last as lastItem\"\n        class=\"tui-table__tr tui-table__tr_hover_disabled t-row\"\n        [class.t-deprecated]=\"propertyConnector.documentationPropertyDeprecated\"\n        [class.tui-table__tr_border_none]=\"lastItem\"\n    >\n        <td\n            class=\"\n                tui-table__td tui-table__td_first tui-table__td_align_center\n                t-cell\n            \"\n        >\n            <div\n                automation-id=\"tui-documentation__property-name\"\n                class=\"t-property t-cell\"\n            >\n                {{ stripOptional(propertyConnector.attrName) }}\n                <tui-badge\n                    *ngIf=\"isOptional(propertyConnector.attrName)\"\n                    size=\"s\"\n                    value=\"Optional\"\n                ></tui-badge>\n            </div>\n            <span\n                *ngIf=\"propertyConnector.documentationPropertyDeprecated\"\n                class=\"t-deprecated-label\"\n            >\n                deprecated\n            </span>\n            <ng-container\n                *ngTemplateOutlet=\"propertyConnector.template\"\n            ></ng-container>\n        </td>\n        <td class=\"tui-table__td tui-table__td_align_center t-cell\">\n            <span class=\"type\">\n                {{ propertyConnector.documentationPropertyType }}\n                <tui-tooltip\n                    *ngIf=\"showContentTooltip(propertyConnector.documentationPropertyType)\"\n                    [describeId]=\"propertyConnector.attrName\"\n                    [content]=\"content\"\n                >\n                    <ng-template #content>\n                        {{ texts[4] }}\n                        <a\n                            tuiLink\n                            tuiMode=\"onDark\"\n                            target=\"_blank\"\n                            href=\"https://github.com/TinkoffCreditSystems/ng-polymorpheus\"\n                        >\n                            <code>ng-polymorpheus</code>\n                        </a>\n                    </ng-template>\n                </tui-tooltip>\n            </span>\n        </td>\n        <td\n            *ngIf=\"showValues\"\n            class=\"\n                tui-table__td\n                tui-table__td_align_center\n                tui-table__td_last\n                tui-table__td_text_right\n                t-cell\n            \"\n        >\n            <ng-container\n                *ngIf=\"propertyConnector.shouldShowValues; else elseEmitter\"\n            >\n                <tui-select\n                    *ngIf=\"propertyConnector.hasItems; else noItems\"\n                    tuiTextfieldSize=\"m\"\n                    tuiDropdownLimitWidth=\"min\"\n                    [tuiTextfieldCleaner]=\"showCleaner(propertyConnector.documentationPropertyType)\"\n                    [tuiTextfieldLabelOutside]=\"true\"\n                    [nativeId]=\"propertyConnector.attrName\"\n                    [valueContent]=\"selectContent\"\n                    [ngModel]=\"propertyConnector.documentationPropertyValue\"\n                    (ngModelChange)=\"propertyConnector.onValueChange($event)\"\n                >\n                    <code class=\"t-exception\">null</code>\n                    <tui-data-list-wrapper\n                        *tuiDataList\n                        [items]=\"propertyConnector.documentationPropertyValues\"\n                        [itemContent]=\"selectContent\"\n                    ></tui-data-list-wrapper>\n                </tui-select>\n                <ng-template #selectContent let-data>\n                    <code>{{ inspectAny(data) }}</code>\n                </ng-template>\n\n                <ng-template #noItems>\n                    <ng-container\n                        [ngSwitch]=\"propertyConnector.documentationPropertyType\"\n                    >\n                        <tui-toggle\n                            *ngSwitchCase=\"'boolean'\"\n                            size=\"l\"\n                            [nativeId]=\"propertyConnector.attrName\"\n                            [showIcons]=\"true\"\n                            [ngModel]=\"propertyConnector.documentationPropertyValue\"\n                            (ngModelChange)=\"propertyConnector.onValueChange($event)\"\n                        ></tui-toggle>\n\n                        <tui-primitive-textfield\n                            *ngSwitchCase=\"'string'\"\n                            tuiTextfieldSize=\"m\"\n                            [nativeId]=\"propertyConnector.attrName\"\n                            [tuiTextfieldLabelOutside]=\"true\"\n                            [tuiTextfieldCleaner]=\"true\"\n                            [value]=\"propertyConnector.documentationPropertyValue || ''\"\n                            (valueChange)=\"propertyConnector.onValueChange($event)\"\n                        ></tui-primitive-textfield>\n\n                        <div *ngSwitchCase=\"'color'\" tuiGroup>\n                            <tui-primitive-textfield\n                                tuiTextfieldType=\"color\"\n                                tuiTextfieldSize=\"m\"\n                                [attr.id]=\"propertyConnector.attrName\"\n                                [tuiTextfieldLabelOutside]=\"true\"\n                                [tuiInputOpacity]=\"getOpacity(propertyConnector.documentationPropertyValue)\"\n                                [value]=\"getColor(propertyConnector.documentationPropertyValue)\"\n                                (valueChange)=\"onColorChange(propertyConnector, $event)\"\n                            ></tui-primitive-textfield>\n                            <tui-input-count\n                                tuiTextfieldSize=\"m\"\n                                [max]=\"100\"\n                                [ngModel]=\"getOpacity(propertyConnector.documentationPropertyValue)\"\n                                (ngModelChange)=\"onOpacityChange(propertyConnector, $event)\"\n                            >\n                                Opacity\n                            </tui-input-count>\n                        </div>\n\n                        <tui-input-count\n                            *ngSwitchCase=\"'number'\"\n                            tuiTextfieldSize=\"m\"\n                            [nativeId]=\"propertyConnector.attrName\"\n                            [tuiTextfieldLabelOutside]=\"true\"\n                            [ngModel]=\"propertyConnector.documentationPropertyValue\"\n                            (ngModelChange)=\"propertyConnector.onValueChange($event)\"\n                        ></tui-input-count>\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$ | async\"\n                >\n                    Emit!\n                </tui-notification>\n            </ng-template>\n        </td>\n    </tr>\n</table>\n",
-        changeDetection: ChangeDetectionStrategy.OnPush,
-        animations: [
-            trigger('emitEvent', [
-                transition(':increment', [style({ opacity: 1 }), animate('500ms ease-in')]),
-            ]),
-        ],
-        styles: [":host{display:block;min-width:100%}.t-cell_prop{width:40%}.t-cell_value{max-width:20rem}@media screen and (max-width:47.9375em){.t-row{display:flex;flex-wrap:wrap}.t-row_header{display:none}.t-cell_value{width:9.375rem}.t-cell{width:100%;height:auto;padding:.5rem 0;text-align:left}}.t-property{font:var(--tui-font-text-m);margin-bottom:.25rem;font-family:monospace;color:#8f75d1}.t-type{font-family:monospace}.t-deprecated{background-color:var(--tui-error-bg)}.t-deprecated-label{margin-right:.125rem;color:var(--tui-error-fill)}.t-exception{display:block;width:-webkit-max-content;width:-moz-max-content;width:max-content}.t-output{text-align:left;opacity:0}"]
-    }),
-    __param(0, Inject(ChangeDetectorRef)),
-    __param(1, Inject(TUI_DOC_DOCUMENTATION_TEXTS))
-], TuiDocDocumentationComponent);
-
-let TuiInputOpacityDirective = class TuiInputOpacityDirective {
-    constructor(renderer, tuiFocusableComponent) {
-        this.renderer = renderer;
-        this.tuiFocusableComponent = tuiFocusableComponent;
+    flattenSubPages(items) {
+        return items.reduce((array, item) => [
+            ...array,
+            item.reduce((pages, page) => 'subPages' in page
+                ? [...pages, ...page.subPages]
+                : [...pages, page], []),
+        ], []);
     }
-    set tuiInputOpacity(opacity) {
-        const { nativeFocusableElement } = this.tuiFocusableComponent;
-        if (nativeFocusableElement) {
-            this.renderer.setStyle(nativeFocusableElement, 'opacity', opacity / 100);
-        }
+    isActiveRoute(route) {
+        return this.router.isActive(route, false);
     }
-};
-TuiInputOpacityDirective.ctorParameters = () => [
-    { type: Renderer2, decorators: [{ type: Inject, args: [Renderer2,] }] },
-    { type: undefined, decorators: [{ type: Inject, args: [TUI_FOCUSABLE_ITEM_ACCESSOR,] }] }
-];
-__decorate([
-    Input()
-], TuiInputOpacityDirective.prototype, "tuiInputOpacity", null);
-TuiInputOpacityDirective = __decorate([
-    Directive({
-        selector: '[tuiInputOpacity]',
-    }),
-    __param(0, Inject(Renderer2)),
-    __param(1, Inject(TUI_FOCUSABLE_ITEM_ACCESSOR))
-], TuiInputOpacityDirective);
-
-let TuiInputOpacityModule = class TuiInputOpacityModule {
-};
-TuiInputOpacityModule = __decorate([
-    NgModule({
-        declarations: [TuiInputOpacityDirective],
-        exports: [TuiInputOpacityDirective],
-    })
-], TuiInputOpacityModule);
-
-let TuiDocDocumentationModule = class TuiDocDocumentationModule {
-};
-TuiDocDocumentationModule = __decorate([
-    NgModule({
-        imports: [
-            CommonModule,
-            FormsModule,
-            RouterModule,
-            TuiBadgeModule,
-            TuiSelectModule,
-            TuiToggleModule,
-            TuiTooltipModule,
-            TuiLinkModule,
-            TuiInputCountModule,
-            TuiModeModule,
-            TuiGroupModule,
-            TuiInputOpacityModule,
-            TuiPrimitiveTextfieldModule,
-            TuiTextfieldControllerModule,
-            TuiHintControllerModule,
-            TuiDropdownControllerModule,
-            TuiDataListModule,
-            TuiDataListWrapperModule,
-            TuiNotificationModule,
-        ],
-        declarations: [
-            TuiDocDocumentationComponent,
-            TuiDocDocumentationPropertyConnectorDirective,
-        ],
-        exports: [
-            TuiDocDocumentationComponent,
-            TuiDocDocumentationPropertyConnectorDirective,
-        ],
-    })
-], TuiDocDocumentationModule);
-
-const TUI_DOC_CODE_EDITOR = new InjectionToken('Contains service for opening online IDE e.g. Stackblitz');
-
-const TUI_DOC_EXAMPLE_CONTENT_PROCESSOR = new InjectionToken('Processes content in example', { factory: () => identity });
-
-function rawLoadRecord(example) {
-    return __awaiter(this, void 0, void 0, function* () {
-        const processedContent = {};
-        for (const [key, content] of Object.entries(example)) {
-            processedContent[key] = yield rawLoad(content);
-        }
-        return processedContent;
-    });
-}
-
-// Ambient type cannot be used without dynamic https://github.com/angular/angular/issues/23395
-// @dynamic
-let TuiDocExampleComponent = class TuiDocExampleComponent {
-    constructor(id, clipboard, notifications, location, copyTexts$, texts, codeEditor, processContent) {
-        this.id = id;
-        this.clipboard = clipboard;
-        this.notifications = notifications;
-        this.location = location;
-        this.copyTexts$ = copyTexts$;
-        this.texts = texts;
-        this.codeEditor = codeEditor;
-        this.processContent = processContent;
-        this.rawLoader$$ = new BehaviorSubject({});
-        this.heading = '';
-        this.description = '';
-        this.componentName = this.location.pathname.slice(1);
-        this.activeItemIndex = 0;
-        this.defaultTab = this.texts[0];
-        this.copy$ = this.copyTexts$.pipe(map(([copy]) => copy));
-        this.processor$ = this.rawLoader$$.pipe(switchMap(rawLoadRecord), map(this.processContent));
+    handleAnchorLink(hash) {
+        setTimeout(() => {
+            this.navigateToAnchorLink(hash);
+        }, SCROLL_INTO_VIEW_DELAY);
     }
-    set content(content) {
-        this.rawLoader$$.next(content);
+    openActivePageGroup() {
+        this.items.forEach((pages, pagesIndex) => {
+            pages.forEach((page, pageIndex) => {
+                if ('route' in page && this.isActiveRoute(page.route)) {
+                    this.openPagesArr[pagesIndex] = true;
+                    this.active = page.route;
+                }
+                if ('subPages' in page) {
+                    page.subPages.forEach(subPage => {
+                        if (this.isActiveRoute(subPage.route)) {
+                            this.openPagesArr[pagesIndex] = true;
+                            this.openPagesGroupsArr[pagesIndex * 100 + pageIndex] = true;
+                            this.active = subPage.route;
+                        }
+                    });
+                }
+            });
+        });
     }
-    copyExampleLink() {
-        const hashPosition = this.location.href.indexOf('#');
-        const currentUrl = hashPosition > -1
-            ? this.location.href.substr(0, hashPosition)
-            : this.location.href;
-        const url = `${currentUrl}#${this.id}`;
-        this.clipboard.copy(url);
-        this.notifications
-            .show(this.texts[1], {
-            label: this.texts[2],
-            status: "success" /* Success */,
-        })
-            .subscribe();
+    navigateToAnchorLink(fragment) {
+        const element = fragment && this.documentRef.querySelector(`#${fragment}`);
+        if (!element) {
+            return;
+        }
+        element.classList.add('tui-doc-animated-example');
+        element.scrollIntoView({
+            block: 'start',
+            inline: 'nearest',
+            behavior: 'smooth',
+        });
     }
 };
-TuiDocExampleComponent.ctorParameters = () => [
-    { type: String, decorators: [{ type: Attribute, args: ['id',] }] },
-    { type: Clipboard, decorators: [{ type: Inject, args: [Clipboard,] }] },
-    { type: TuiNotificationsService, decorators: [{ type: Inject, args: [TuiNotificationsService,] }] },
-    { type: Location, decorators: [{ type: Inject, args: [LOCATION,] }] },
-    { type: Observable, decorators: [{ type: Inject, args: [TUI_COPY_TEXTS,] }] },
-    { type: Array, decorators: [{ type: Inject, args: [TUI_DOC_EXAMPLE_TEXTS,] }] },
-    { type: undefined, decorators: [{ type: Optional }, { type: Inject, args: [TUI_DOC_CODE_EDITOR,] }] },
-    { type: undefined, decorators: [{ type: Inject, args: [TUI_DOC_EXAMPLE_CONTENT_PROCESSOR,] }] }
+TuiDocNavigationComponent.ctorParameters = () => [
+    { type: ChangeDetectorRef, decorators: [{ type: Inject, args: [ChangeDetectorRef,] }] },
+    { type: Title, decorators: [{ type: Inject, args: [Title,] }] },
+    { type: Observable, decorators: [{ type: Inject, args: [NAVIGATION_TITLE,] }] },
+    { type: Document, decorators: [{ type: Inject, args: [DOCUMENT,] }] },
+    { type: TuiModeDirective, decorators: [{ type: Inject, args: [TuiModeDirective,] }] },
+    { type: undefined, decorators: [{ type: Optional }, { type: Inject, args: [TuiSidebarDirective,] }] },
+    { type: Array, decorators: [{ type: Inject, args: [NAVIGATION_LABELS,] }] },
+    { type: undefined, decorators: [{ type: Inject, args: [NAVIGATION_ITEMS,] }] },
+    { type: String, decorators: [{ type: Inject, args: [TUI_DOC_SEARCH_TEXT,] }] },
+    { type: Router, decorators: [{ type: Inject, args: [Router,] }] },
+    { type: ActivatedRoute, decorators: [{ type: Inject, args: [ActivatedRoute,] }] }
 ];
 __decorate([
-    Input()
-], TuiDocExampleComponent.prototype, "heading", void 0);
-__decorate([
-    Input()
-], TuiDocExampleComponent.prototype, "description", void 0);
+    HostBinding('class._open')
+], TuiDocNavigationComponent.prototype, "menuOpen", void 0);
 __decorate([
-    Input()
-], TuiDocExampleComponent.prototype, "content", null);
+    tuiPure
+], TuiDocNavigationComponent.prototype, "filterItems", null);
 __decorate([
-    Input()
-], TuiDocExampleComponent.prototype, "componentName", void 0);
-TuiDocExampleComponent = __decorate([
+    tuiPure
+], TuiDocNavigationComponent.prototype, "flattenSubPages", null);
+TuiDocNavigationComponent = __decorate([
     Component({
-        selector: 'tui-doc-example',
-        template: "<h3 *ngIf=\"heading\" class=\"t-title\">\n    <span polymorpheus-outlet [content]=\"heading\"></span>\n    <button\n        *ngIf=\"id\"\n        tuiIconButton\n        type=\"button\"\n        size=\"xs\"\n        icon=\"tuiIconLinkLarge\"\n        appearance=\"icon\"\n        class=\"t-link-icon\"\n        [title]=\"copy$ | async\"\n        (click)=\"copyExampleLink()\"\n    ></button>\n</h3>\n<h4\n    *ngIf=\"description\"\n    polymorpheus-outlet\n    class=\"t-description\"\n    [content]=\"description\"\n></h4>\n\n<div *ngIf=\"processor$ | async as content\" class=\"t-example\">\n    <ng-container *ngIf=\"content | tuiDocExampleGetTabs: defaultTab as tabs\">\n        <div class=\"t-tabs-wrapper\">\n            <tui-tabs-with-more\n                class=\"t-tabs\"\n                [(activeItemIndex)]=\"activeItemIndex\"\n            >\n                <ng-container *ngFor=\"let tab of tabs\">\n                    <button *tuiTab tuiTab>{{tab}}</button>\n                </ng-container>\n            </tui-tabs-with-more>\n\n            <button\n                *ngIf=\"codeEditor\"\n                tuiButton\n                appearance=\"flat\"\n                size=\"s\"\n                (click)=\"codeEditor.open(componentName, id || '',  content)\"\n            >\n                Edit on {{codeEditor.name}}\n            </button>\n        </div>\n\n        <ng-container\n            *ngIf=\"{\n                activeTab: tabs[activeItemIndex],\n                code: content[tabs[activeItemIndex]] || ''\n            } as state\"\n        >\n            <div\n                *ngIf=\"state.activeTab == defaultTab; else codeSection\"\n                automation-id=\"tui-doc-example\"\n                class=\"t-demo\"\n            >\n                <ng-content></ng-content>\n            </div>\n\n            <ng-template #codeSection>\n                <tui-doc-copy\n                    class=\"t-copy-code\"\n                    [cdkCopyToClipboard]=\"state.code\"\n                ></tui-doc-copy>\n                <tui-doc-code [code]=\"state.code\"></tui-doc-code>\n            </ng-template>\n        </ng-container>\n    </ng-container>\n</div>\n",
+        selector: 'tui-doc-navigation',
+        template: "<tui-hosted-dropdown\n    *tuiLet=\"filteredItems as filtered\"\n    tuiAutoFocus\n    tuiDropdownLimitWidth=\"fixed\"\n    class=\"input\"\n    [autoFocus]=\"!!sidebar\"\n    [content]=\"dropdown\"\n    [canOpen]=\"canOpen\"\n    [(open)]=\"open\"\n>\n    <tui-primitive-textfield\n        iconAlign=\"left\"\n        tuiTextfieldSize=\"m\"\n        iconContent=\"tuiIconSearch\"\n        [pseudoFocused]=\"open || null\"\n        [tuiTextfieldCleaner]=\"true\"\n        [tuiTextfieldLabelOutside]=\"true\"\n        [value]=\"search\"\n        (valueChange)=\"onSearchChange($event)\"\n    >\n        {{ searchText }}\n    </tui-primitive-textfield>\n    <ng-template #dropdown let-activeZone>\n        <tui-data-list>\n            <tui-opt-group\n                *ngFor=\"let group of filtered; let index = index\"\n                [label]=\"labels[index] || ''\"\n            >\n                <a\n                    *ngFor=\"let item of group\"\n                    tuiOption\n                    [routerLink]=\"item.route\"\n                    (click)=\"onClick()\"\n                >\n                    {{ item.title }}\n                </a>\n            </tui-opt-group>\n        </tui-data-list>\n    </ng-template>\n</tui-hosted-dropdown>\n\n<nav class=\"navigation\">\n    <tui-scrollbar class=\"scrollbar\" [tuiMode]=\"mode$ | async\">\n        <tui-accordion [closeOthers]=\"false\" [rounded]=\"false\">\n            <tui-accordion-item\n                *ngFor=\"let label of labels; index as index\"\n                size=\"s\"\n                [borders]=\"null\"\n                [(open)]=\"!!openPagesArr[index]\"\n            >\n                <span class=\"tui-space_left-2\">\n                    <strong>{{ label }}</strong>\n                </span>\n                <ng-template tuiAccordionItemContent>\n                    <div class=\"section\">\n                        <ng-container\n                            *ngFor=\"let item of items[index]; index as subIndex\"\n                        >\n                            <ng-container\n                                *ngTemplateOutlet=\"pages; context: {item: item, index: index * 100 + subIndex}\"\n                            ></ng-container>\n                        </ng-container>\n                    </div>\n                </ng-template>\n            </tui-accordion-item>\n        </tui-accordion>\n        <div class=\"items-container\">\n            <ng-container\n                *ngFor=\"let item of itemsWithoutSections; let index = index\"\n            >\n                <ng-container\n                    *ngTemplateOutlet=\"pages; context: {item: item, index: items.length - 1 + index}\"\n                ></ng-container>\n            </ng-container>\n        </div>\n\n        <ng-template #pages let-item=\"item\" let-index=\"index\">\n            <a\n                *ngIf=\"!item.subPages; else subPages\"\n                tuiLink\n                routerLinkActive=\"sublink_active\"\n                class=\"sublink\"\n                [routerLink]=\"item.route\"\n                [scrollIntoView]=\"isActive(item.route)\"\n                (click)=\"closeMenu()\"\n            >\n                {{ item.title }}\n            </a>\n            <ng-template #subPages>\n                <div\n                    routerLinkActive\n                    class=\"subsection\"\n                    [routerLinkActiveOptions]=\"{exact: false}\"\n                >\n                    <button\n                        *ngIf=\"item.subPages\"\n                        tuiLink\n                        type=\"button\"\n                        class=\"sublink sublink_subsection\"\n                        (click)=\"onGroupClick(index)\"\n                    >\n                        <tui-svg\n                            src=\"tuiIconChevronRight\"\n                            class=\"chevron\"\n                            [class.chevron_active]=\"!!openPagesGroupsArr[index]\"\n                        ></tui-svg>\n                        {{ item.title }}\n                    </button>\n                    <tui-expand\n                        class=\"tui-space_left-1\"\n                        [expanded]=\"!!openPagesGroupsArr[index]\"\n                    >\n                        <div class=\"section section_bordered\">\n                            <a\n                                *ngFor=\"let subPage of item.subPages\"\n                                tuiLink\n                                routerLinkActive=\"sublink_active\"\n                                class=\"sublink sublink_small\"\n                                [routerLink]=\"subPage.route\"\n                                [scrollIntoView]=\"isActive(subPage.route)\"\n                                (click)=\"closeMenu()\"\n                            >\n                                {{ subPage.title }}\n                            </a>\n                        </div>\n                    </tui-expand>\n                </div>\n            </ng-template>\n        </ng-template>\n    </tui-scrollbar>\n</nav>\n\n<ng-content></ng-content>\n",
+        providers: NAVIGATION_PROVIDERS,
         changeDetection: ChangeDetectionStrategy.OnPush,
-        styles: [":host{position:relative;display:block;padding-top:3.5rem;clear:right}.t-title{font:var(--tui-font-heading-5);margin:0 0 .5rem}@media screen and (max-width:47.9375em){:host{padding-top:2rem}.t-title{font:var(--tui-font-heading-6)}}.t-description{font:var(--tui-font-text-m);font-weight:400;margin:0}.t-description:first-letter,.t-title:first-letter{text-transform:capitalize}.t-example{position:relative;margin-top:1.5rem;border:1px solid var(--tui-base-03);border-radius:var(--tui-radius-m);box-shadow:0 .125rem .1875rem rgba(0,0,0,.1)}.t-tabs-wrapper{display:flex;padding:0 2rem;box-shadow:inset 0 -1px var(--tui-base-03);justify-content:space-between;align-items:center}@media screen and (max-width:47.9375em){.t-example{margin-top:.75rem}.t-tabs-wrapper{padding:0 1rem}}.t-tabs{flex-grow:1}.t-demo{padding:2rem;overflow-x:auto}@media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.t-demo::-webkit-scrollbar,.t-demo::-webkit-scrollbar-thumb{width:1rem;height:1rem;border-radius:6.25rem;background-clip:padding-box;border:6px solid transparent}.t-demo::-webkit-scrollbar{background-color:transparent}.t-demo::-webkit-scrollbar-thumb{background-color:var(--tui-clear-hover)}.t-demo::-webkit-scrollbar-thumb:hover{background-color:var(--tui-clear-active)}.t-demo::-webkit-scrollbar-thumb:active{background-color:var(--tui-text-03)}}@media screen and (max-width:47.9375em){.t-demo{padding:1rem}}.t-copy-code{position:absolute;top:4.375rem;right:1rem}.t-link-icon{margin-left:.3rem;vertical-align:baseline}"]
+        styles: [":host{z-index:1;display:flex;flex-direction:column;text-align:center;background:var(--tui-base-01)}.input{display:block;margin:1.25rem}.navigation{display:flex;max-height:100%;min-height:0;flex:1 1 0;text-align:left}.scrollbar{width:100%;scroll-behavior:smooth}.items-container{display:flex;flex-direction:column;padding:0 16px}.section{display:flex;flex-direction:column;align-items:flex-start;margin:-1rem 0 -.5rem}.section_bordered{margin:.5rem 0;border-left:1px solid var(--tui-base-03)}.subsection{margin-left:.5rem}.sublink{-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:0;border:0;background:0 0;font-size:inherit;font:var(--tui-font-text-m);margin-left:.5rem;line-height:2.75rem}.sublink_small{margin-left:1rem;line-height:1.5rem}.sublink_small:not(:first-child){margin-top:1rem}.sublink_subsection{margin-left:0;line-height:2.75rem}.sublink_active{color:var(--tui-text-01)}.chevron{transition-property:transform;transition-duration:var(--tui-duration,300ms);transition-timing-function:ease-in-out;width:1rem;height:1rem;margin:-.25rem .25rem 0 -.1875rem}.chevron_active{transform:rotate(90deg)}"]
     }),
-    __param(0, Attribute('id')),
-    __param(1, Inject(Clipboard)),
-    __param(2, Inject(TuiNotificationsService)),
-    __param(3, Inject(LOCATION)),
-    __param(4, Inject(TUI_COPY_TEXTS)),
-    __param(5, Inject(TUI_DOC_EXAMPLE_TEXTS)),
-    __param(6, Optional()),
-    __param(6, Inject(TUI_DOC_CODE_EDITOR)),
-    __param(7, Inject(TUI_DOC_EXAMPLE_CONTENT_PROCESSOR))
-], TuiDocExampleComponent);
-
-let TuiDocExampleGetTabsPipe = class TuiDocExampleGetTabsPipe {
-    transform(content, defaultTab) {
-        return [defaultTab, ...Object.keys(content)];
-    }
-};
-TuiDocExampleGetTabsPipe = __decorate([
-    Pipe({ name: 'tuiDocExampleGetTabs' })
-], TuiDocExampleGetTabsPipe);
+    __param(0, Inject(ChangeDetectorRef)),
+    __param(1, Inject(Title)),
+    __param(2, Inject(NAVIGATION_TITLE)),
+    __param(3, Inject(DOCUMENT)),
+    __param(4, Inject(TuiModeDirective)),
+    __param(5, Optional()),
+    __param(5, Inject(TuiSidebarDirective)),
+    __param(6, Inject(NAVIGATION_LABELS)),
+    __param(7, Inject(NAVIGATION_ITEMS)),
+    __param(8, Inject(TUI_DOC_SEARCH_TEXT)),
+    __param(9, Inject(Router)),
+    __param(10, Inject(ActivatedRoute))
+], TuiDocNavigationComponent);
 
-let TuiDocExampleModule = class TuiDocExampleModule {
+let TuiDocNavigationModule = class TuiDocNavigationModule {
 };
-TuiDocExampleModule = __decorate([
+TuiDocNavigationModule = __decorate([
     NgModule({
         imports: [
             CommonModule,
-            ClipboardModule,
-            TuiTabsModule,
+            FormsModule,
+            RouterModule,
+            ScrollIntoViewModule,
             TuiButtonModule,
-            TuiDocCopyModule,
-            TuiDocCodeModule,
-            PolymorpheusModule,
+            TuiPrimitiveTextfieldModule,
+            TuiTextfieldControllerModule,
+            TuiActiveZoneModule,
+            TuiLetModule,
+            TuiModeModule,
+            TuiLinkModule,
+            TuiExpandModule,
+            TuiHostedDropdownModule,
+            TuiDropdownControllerModule,
+            TuiAccordionModule,
+            TuiScrollbarModule,
+            TuiSvgModule,
+            TuiDataListModule,
+            TuiAutoFocusModule,
         ],
-        declarations: [TuiDocExampleComponent, TuiDocExampleGetTabsPipe],
-        exports: [TuiDocExampleComponent, TuiDocExampleGetTabsPipe],
+        declarations: [TuiDocNavigationComponent],
+        exports: [TuiDocNavigationComponent],
     })
-], TuiDocExampleModule);
-
-var TuiDocMainComponent_1;
-// @dynamic
-let TuiDocMainComponent = TuiDocMainComponent_1 = class TuiDocMainComponent {
-    constructor(storage, windowRef) {
-        this.storage = storage;
-        this.windowRef = windowRef;
-        this.night = this.storage.getItem('night') === 'true' ||
-            (this.storage.getItem('night') === null &&
-                this.windowRef.matchMedia('(prefers-color-scheme: dark)').matches);
-        this.change$ = new Subject();
-    }
-    get mode() {
-        return this.night ? 'onDark' : null;
-    }
-    onMode(night) {
-        this.night = night;
-        this.change$.next();
-        this.storage.setItem('night', String(night));
-    }
-};
-TuiDocMainComponent.ctorParameters = () => [
-    { type: Storage, decorators: [{ type: Inject, args: [LOCAL_STORAGE,] }] },
-    { type: Window, decorators: [{ type: Inject, args: [WINDOW,] }] }
-];
-TuiDocMainComponent = TuiDocMainComponent_1 = __decorate([
-    Component({
-        selector: 'tui-doc-main',
-        template: "<tui-theme-night *ngIf=\"night\"></tui-theme-night>\n<tui-root>\n    <div class=\"tui-doc-page\">\n        <tui-doc-navigation class=\"tui-doc-navigation\">\n            <ng-content select=\"tuiDocNavigation\"></ng-content>\n        </tui-doc-navigation>\n        <div class=\"tui-doc-content\">\n            <router-outlet class=\"tui-doc-outlet\"></router-outlet>\n        </div>\n    </div>\n    <header tuiDocHeader>\n        <label class=\"night-mode\">\n            Night mode\n            <tui-toggle\n                class=\"tui-space_left-2\"\n                [ngModel]=\"night\"\n                (ngModelChange)=\"onMode($event)\"\n            ></tui-toggle>\n        </label>\n        <ng-content select=\"tuiDocHeader\"></ng-content>\n    </header>\n    <ng-container ngProjectAs=\"tuiOverContent\">\n        <ng-content select=\"tuiOverContent\"></ng-content>\n    </ng-container>\n    <ng-container ngProjectAs=\"tuiOverDialogs\">\n        <ng-content select=\"tuiOverDialogs\"></ng-content>\n    </ng-container>\n    <ng-container ngProjectAs=\"tuiOverNotifications\">\n        <ng-content select=\"tuiOverNotifications\"></ng-content>\n    </ng-container>\n    <ng-container ngProjectAs=\"tuiOverPortals\">\n        <ng-content select=\"tuiOverPortals\"></ng-content>\n    </ng-container>\n    <ng-container ngProjectAs=\"tuiOverHints\">\n        <ng-content select=\"tuiOverHints\"></ng-content>\n    </ng-container>\n</tui-root>\n",
-        encapsulation: ViewEncapsulation.None,
-        providers: [
-            {
-                provide: TuiModeDirective,
-                useExisting: forwardRef(() => TuiDocMainComponent_1),
-            },
-            TuiSwipeService,
-        ],
-        styles: ["html{scroll-padding-top:4rem;height:auto}tui-root>tui-scroll-controls{top:4rem!important}@-webkit-keyframes tuiShaking{from,to{transform:translate3d(0,0,0)}10%,30%,50%,70%,90%{transform:translate3d(-.3125rem,0,0)}20%,40%,60%,80%{transform:translate3d(.3125rem,0,0)}}@keyframes tuiShaking{from,to{transform:translate3d(0,0,0)}10%,30%,50%,70%,90%{transform:translate3d(-.3125rem,0,0)}20%,40%,60%,80%{transform:translate3d(.3125rem,0,0)}}body{background:var(--tui-base-01);height:auto}tui-doc-main{display:block}code:not(.hljs):not(.exception){transition-property:background;transition-duration:var(--tui-duration,300ms);transition-timing-function:ease-in-out;background:var(--tui-base-02);color:var(--tui-text-02);vertical-align:middle;box-shadow:inset 0 -2px var(--tui-secondary);padding:.375rem .5rem;font-size:.875rem;border-radius:.5rem}:focus code:not(.exception){background:var(--tui-base-01)}.tui-doc-page{position:relative;z-index:0;padding-top:4rem}tui-doc-navigation.tui-doc-navigation{position:fixed;top:4rem;bottom:0;width:16.25rem;border-right:1px solid var(--tui-base-03)}.tui-doc-content{margin-left:16.25rem}@media screen and (max-width:47.9375em){tui-doc-navigation.tui-doc-navigation{display:none}.tui-doc-content{margin-left:0}}.tui-doc-outlet+*{display:block}.tui-doc-animated-example{-webkit-animation:1s .3s tuiShaking;animation:1s .3s tuiShaking}label.night-mode{cursor:pointer}.hljs-tag{background:0 0}.hljs{display:block;overflow-x:auto;padding:.5em;color:var(--tui-text-01);background-color:var(--tui-clear-disabled)}.hljs-subst,.hljs-title{font-weight:400;color:var(--tui-text-01)}.hljs-comment,.hljs-quote{color:var(--tui-text-03);font-style:italic}.hljs-meta{color:#e38162}.hljs-keyword,.hljs-literal,.hljs-name,.hljs-section,.hljs-selector-class,.hljs-selector-id,.hljs-selector-tag,.hljs-type{font-weight:700;color:var(--tui-link)}.hljs-attribute,.hljs-link,.hljs-number,.hljs-regexp{font-weight:700;color:var(--tui-support-06)}.hljs-link,.hljs-number,.hljs-regexp{font-weight:400}.hljs-string{color:var(--tui-positive);font-weight:700}.hljs-bullet,.hljs-formula,.hljs-symbol{color:var(--tui-text-01);background:var(--tui-base-02);font-style:italic}.hljs-doctag{text-decoration:underline}.hljs-template-variable,.hljs-variable{color:var(--tui-warning-fill)}.hljs-addition{background:var(--tui-success-bg)}.hljs-deletion{background:var(--tui-error-bg)}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:700}.hljs .hljs-line-numbers{padding:0}.hljs-ln-numbers{vertical-align:top;opacity:.3;text-align:right;padding-right:1em!important}"]
-    }),
-    __param(0, Inject(LOCAL_STORAGE)),
-    __param(1, Inject(WINDOW))
-], TuiDocMainComponent);
+], TuiDocNavigationModule);
 
 const TUI_DOC_LOGO = new InjectionToken('Main logo', {
     factory: () => '',
@@ -1288,25 +1288,6 @@ const TUI_DOC_DEFAULT_TABS = new InjectionToken('Array of default tab names', {
     factory: () => [],
 });
 
-let TuiDocPageTabConnectorDirective = class TuiDocPageTabConnectorDirective {
-    constructor(template) {
-        this.template = template;
-    }
-};
-TuiDocPageTabConnectorDirective.ctorParameters = () => [
-    { type: TemplateRef, decorators: [{ type: Inject, args: [TemplateRef,] }] }
-];
-__decorate([
-    Input(),
-    tuiDefaultProp()
-], TuiDocPageTabConnectorDirective.prototype, "pageTab", void 0);
-TuiDocPageTabConnectorDirective = __decorate([
-    Directive({
-        selector: '[pageTab]',
-    }),
-    __param(0, Inject(TemplateRef))
-], TuiDocPageTabConnectorDirective);
-
 const TUI_DOC_SEE_ALSO = new InjectionToken('Array of arrays of related pages', {
     factory: () => [],
 });
@@ -1328,6 +1309,25 @@ function seeAlsoProviderFactory({ nativeElement }, seeAlsoGroups) {
     return Array.from(seeAlsoSet);
 }
 
+let TuiDocPageTabConnectorDirective = class TuiDocPageTabConnectorDirective {
+    constructor(template) {
+        this.template = template;
+    }
+};
+TuiDocPageTabConnectorDirective.ctorParameters = () => [
+    { type: TemplateRef, decorators: [{ type: Inject, args: [TemplateRef,] }] }
+];
+__decorate([
+    Input(),
+    tuiDefaultProp()
+], TuiDocPageTabConnectorDirective.prototype, "pageTab", void 0);
+TuiDocPageTabConnectorDirective = __decorate([
+    Directive({
+        selector: '[pageTab]',
+    }),
+    __param(0, Inject(TemplateRef))
+], TuiDocPageTabConnectorDirective);
+
 // Ambient type cannot be used without dynamic https://github.com/angular/angular/issues/23395
 // @dynamic
 let TuiDocPageComponent = class TuiDocPageComponent {
@@ -1552,6 +1552,20 @@ const TUI_DOC_RUSSIAN = [
     },
 ];
 
+let TuiAddonDocModule = class TuiAddonDocModule {
+};
+TuiAddonDocModule = __decorate([
+    NgModule({
+        exports: [
+            TuiDocCodeModule,
+            TuiDocDemoModule,
+            TuiDocDocumentationModule,
+            TuiDocPageModule,
+            TuiDocExampleModule,
+        ],
+    })
+], TuiAddonDocModule);
+
 /**
  * Generates typical page routing structure
  */
@@ -1570,20 +1584,6 @@ function generateRoutes(type) {
     ];
 }
 
-let TuiAddonDocModule = class TuiAddonDocModule {
-};
-TuiAddonDocModule = __decorate([
-    NgModule({
-        exports: [
-            TuiDocCodeModule,
-            TuiDocDemoModule,
-            TuiDocDocumentationModule,
-            TuiDocPageModule,
-            TuiDocExampleModule,
-        ],
-    })
-], TuiAddonDocModule);
-
 /**
  * Public API Surface of @taiga-ui/addon-doc
  */
@@ -1592,5 +1592,5 @@ TuiAddonDocModule = __decorate([
  * Generated bundle index. Do not edit.
  */
 
-export { DEMO_TEXTS, DOC_TEXTS, EXAMPLE_TEXTS, ScrollIntoViewDirective, ScrollIntoViewModule, TUI_DOC_CODE_EDITOR, TUI_DOC_DEFAULT_TABS, TUI_DOC_DEMO_TEXTS, TUI_DOC_DOCUMENTATION_TEXTS, TUI_DOC_EXAMPLE_CONTENT_PROCESSOR, TUI_DOC_EXAMPLE_TEXTS, TUI_DOC_LOGO, TUI_DOC_MENU_TEXT, TUI_DOC_PAGES, TUI_DOC_RUSSIAN, TUI_DOC_SEARCH_TEXT, TUI_DOC_SEE_ALSO, TUI_DOC_SEE_ALSO_TEXT, TUI_DOC_SOURCE_CODE, TUI_DOC_SOURCE_CODE_TEXT, TUI_DOC_TITLE, TuiAddonDocModule, TuiDocCodeComponent, TuiDocCodeModule, TuiDocCopyComponent, TuiDocCopyModule, TuiDocDemoComponent, TuiDocDemoModule, TuiDocDocumentationComponent, TuiDocDocumentationModule, TuiDocDocumentationPropertyConnectorDirective, TuiDocExampleComponent, TuiDocExampleModule, TuiDocMainComponent, TuiDocMainModule, TuiDocNavigationComponent, TuiDocNavigationModule, TuiDocPageComponent, TuiDocPageModule, TuiDocPageTabConnectorDirective, generateRoutes, NAVIGATION_TITLE as ɵa, NAVIGATION_LABELS as ɵb, NAVIGATION_ITEMS as ɵc, NAVIGATION_PROVIDERS as ɵd, titleProviderFactory as ɵe, labelsProviderFactory as ɵf, itemsProviderFactory as ɵg, TuiInputOpacityModule as ɵh, TuiInputOpacityDirective as ɵi, TuiDocExampleGetTabsPipe as ɵj, TuiDocHeaderModule as ɵk, TuiDocHeaderComponent as ɵl, PAGE_SEE_ALSO as ɵm, PAGE_PROVIDERS as ɵn, seeAlsoProviderFactory as ɵo, TuiDocSeeAlsoModule as ɵp, TuiDocSeeAlsoComponent as ɵq, TuiDocSourceCodeModule as ɵr, TuiDocSourceCodeComponent as ɵs };
+export { DEMO_TEXTS, DOC_TEXTS, EXAMPLE_TEXTS, ScrollIntoViewDirective, ScrollIntoViewModule, TUI_DOC_CODE_EDITOR, TUI_DOC_DEFAULT_TABS, TUI_DOC_DEMO_TEXTS, TUI_DOC_DOCUMENTATION_TEXTS, TUI_DOC_EXAMPLE_CONTENT_PROCESSOR, TUI_DOC_EXAMPLE_TEXTS, TUI_DOC_LOGO, TUI_DOC_MENU_TEXT, TUI_DOC_PAGES, TUI_DOC_RUSSIAN, TUI_DOC_SEARCH_TEXT, TUI_DOC_SEE_ALSO, TUI_DOC_SEE_ALSO_TEXT, TUI_DOC_SOURCE_CODE, TUI_DOC_SOURCE_CODE_TEXT, TUI_DOC_TITLE, TuiAddonDocModule, TuiDocCodeComponent, TuiDocCodeModule, TuiDocCopyComponent, TuiDocCopyModule, TuiDocDemoComponent, TuiDocDemoModule, TuiDocDocumentationComponent, TuiDocDocumentationModule, TuiDocDocumentationPropertyConnectorDirective, TuiDocExampleComponent, TuiDocExampleModule, TuiDocMainComponent, TuiDocMainModule, TuiDocNavigationComponent, TuiDocNavigationModule, TuiDocPageComponent, TuiDocPageModule, TuiDocPageTabConnectorDirective, generateRoutes, TuiInputOpacityModule as ɵa, TuiInputOpacityDirective as ɵb, TuiDocExampleGetTabsPipe as ɵc, TuiDocHeaderModule as ɵd, NAVIGATION_TITLE as ɵe, NAVIGATION_LABELS as ɵf, NAVIGATION_ITEMS as ɵg, NAVIGATION_PROVIDERS as ɵh, titleProviderFactory as ɵi, labelsProviderFactory as ɵj, itemsProviderFactory as ɵk, TuiDocHeaderComponent as ɵl, PAGE_SEE_ALSO as ɵm, PAGE_PROVIDERS as ɵn, seeAlsoProviderFactory as ɵo, TuiDocSeeAlsoModule as ɵp, TuiDocSeeAlsoComponent as ɵq, TuiDocSourceCodeModule as ɵr, TuiDocSourceCodeComponent as ɵs };
 //# sourceMappingURL=taiga-ui-addon-doc.js.map