@taiga-ui/addon-doc 2.23.0 → 2.27.0

package/bundles/taiga-ui-addon-doc.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('ngx-highlightjs'), require('@taiga-ui/cdk'), require('@taiga-ui/kit'), require('rxjs'), require('rxjs/operators'), require('@taiga-ui/core'), require('@angular/forms'), require('@angular/router'), require('@angular/platform-browser'), require('@taiga-ui/addon-mobile'), require('@angular/animations'), require('@angular/cdk/clipboard'), require('@ng-web-apis/common'), require('@tinkoff/ng-polymorpheus')) :
-    typeof define === 'function' && define.amd ? define('@taiga-ui/addon-doc', ['exports', '@angular/core', '@angular/common', 'ngx-highlightjs', '@taiga-ui/cdk', '@taiga-ui/kit', 'rxjs', 'rxjs/operators', '@taiga-ui/core', '@angular/forms', '@angular/router', '@angular/platform-browser', '@taiga-ui/addon-mobile', '@angular/animations', '@angular/cdk/clipboard', '@ng-web-apis/common', '@tinkoff/ng-polymorpheus'], factory) :
-    (global = global || self, factory((global['taiga-ui'] = global['taiga-ui'] || {}, global['taiga-ui']['addon-doc'] = {}), global.ng.core, global.ng.common, global.ngxHighlightjs, global.cdk, global.kit, global.rxjs, global.rxjs.operators, global.core$1, global.ng.forms, global.ng.router, global.ng.platformBrowser, global.addonMobile, global.ng.animations, global.ng.cdk.clipboard, global.common$1, global.ngPolymorpheus));
-}(this, (function (exports, core, common, ngxHighlightjs, cdk, kit, rxjs, operators, core$1, forms, router, platformBrowser, addonMobile, animations, clipboard, common$1, ngPolymorpheus) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('rxjs'), require('rxjs/operators'), require('@angular/common'), require('ngx-highlightjs'), require('@taiga-ui/cdk'), require('@taiga-ui/kit'), require('@taiga-ui/core'), require('@angular/forms'), require('@angular/router'), require('@angular/animations'), require('@angular/cdk/clipboard'), require('@ng-web-apis/common'), require('@tinkoff/ng-polymorpheus'), require('@taiga-ui/addon-mobile'), require('@angular/platform-browser')) :
+    typeof define === 'function' && define.amd ? define('@taiga-ui/addon-doc', ['exports', '@angular/core', 'rxjs', 'rxjs/operators', '@angular/common', 'ngx-highlightjs', '@taiga-ui/cdk', '@taiga-ui/kit', '@taiga-ui/core', '@angular/forms', '@angular/router', '@angular/animations', '@angular/cdk/clipboard', '@ng-web-apis/common', '@tinkoff/ng-polymorpheus', '@taiga-ui/addon-mobile', '@angular/platform-browser'], factory) :
+    (global = global || self, factory((global['taiga-ui'] = global['taiga-ui'] || {}, global['taiga-ui']['addon-doc'] = {}), global.ng.core, global.rxjs, global.rxjs.operators, global.ng.common, global.ngxHighlightjs, global.cdk, global.kit, global.core$1, global.ng.forms, global.ng.router, global.ng.animations, global.ng.cdk.clipboard, global.common$1, global.ngPolymorpheus, global.addonMobile, global.ng.platformBrowser));
+}(this, (function (exports, core, rxjs, operators, common, ngxHighlightjs, cdk, kit, core$1, forms, router, animations, clipboard, common$1, ngPolymorpheus, addonMobile, platformBrowser) { 'use strict';
 
     /*! *****************************************************************************
     Copyright (c) Microsoft Corporation.
@@ -223,11 +223,39 @@
         return value;
     }
 
+    function rawLoad(content) {
+        return __awaiter(this, void 0, void 0, function () {
+            var _a;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        if (!(content instanceof Promise)) return [3 /*break*/, 2];
+                        return [4 /*yield*/, content];
+                    case 1:
+                        _a = (_b.sent()).default;
+                        return [3 /*break*/, 3];
+                    case 2:
+                        _a = content;
+                        _b.label = 3;
+                    case 3: return [2 /*return*/, _a];
+                }
+            });
+        });
+    }
+
     var TuiDocCodeComponent = /** @class */ (function () {
         function TuiDocCodeComponent() {
+            this.rawLoader$$ = new rxjs.BehaviorSubject('');
             this.filename = '';
-            this.code = '';
+            this.processor$ = this.rawLoader$$.pipe(operators.switchMap(rawLoad));
         }
+        Object.defineProperty(TuiDocCodeComponent.prototype, "code", {
+            set: function (code) {
+                this.rawLoader$$.next(code);
+            },
+            enumerable: true,
+            configurable: true
+        });
         Object.defineProperty(TuiDocCodeComponent.prototype, "hasFilename", {
             get: function () {
                 return !!this.filename;
@@ -240,14 +268,14 @@
         ], TuiDocCodeComponent.prototype, "filename", void 0);
         __decorate([
             core.Input()
-        ], TuiDocCodeComponent.prototype, "code", void 0);
+        ], TuiDocCodeComponent.prototype, "code", null);
         __decorate([
             core.HostBinding('class._has-filename')
         ], TuiDocCodeComponent.prototype, "hasFilename", null);
         TuiDocCodeComponent = __decorate([
             core.Component({
                 selector: 'tui-doc-code',
-                template: "<p *ngIf=\"filename\" class=\"t-header\">{{filename}}</p>\n<pre class=\"t-code\"><code [lineNumbers]=\"true\" [highlight]=\"code\"></code></pre>\n",
+                template: "<p *ngIf=\"filename\" class=\"t-header\">{{filename}}</p>\n<pre\n    class=\"t-code\"\n><code [lineNumbers]=\"true\" [highlight]=\"processor$ | async\"></code></pre>\n",
                 styles: [":host{display:block}.t-header{font:var(--tui-font-text-s);font-weight:700}.t-code{margin:0}.hljs:not(:empty){font:var(--tui-font-text-m);padding:1.5rem 2rem;font-family:monospace;background:var(--tui-clear-disabled);word-wrap:break-word;white-space:pre-wrap}@media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.hljs:not(:empty)::-webkit-scrollbar,.hljs:not(:empty)::-webkit-scrollbar-thumb{width:1rem;height:1rem;border-radius:6.25rem;background-clip:padding-box;border:6px solid transparent}.hljs:not(:empty)::-webkit-scrollbar{background-color:transparent}.hljs:not(:empty)::-webkit-scrollbar-thumb{background-color:var(--tui-clear-hover)}.hljs:not(:empty)::-webkit-scrollbar-thumb:hover{background-color:var(--tui-clear-active)}.hljs:not(:empty)::-webkit-scrollbar-thumb:active{background-color:var(--tui-text-03)}}:host._has-filename .hljs:not(:empty){border-radius:.75rem}@media screen and (max-width:47.9375em){.hljs:not(:empty){padding:1rem}}"]
             })
         ], TuiDocCodeComponent);
@@ -293,7 +321,7 @@
         TuiDocCopyComponent = __decorate([
             core.Component({
                 selector: 'tui-doc-copy',
-                template: "<button\n    *ngIf=\"texts$ | async as texts\"\n    tuiButton\n    type=\"button\"\n    class=\"t-copy\"\n    appearance=\"\"\n    size=\"s\"\n    [title]=\"texts[0]\"\n    (click)=\"onClick()\"\n>\n    <span class=\"t-content\" [class.t-content_moved]=\"copied$ | async\">\n        <span class=\"t-initial\" [attr.data-text]=\"texts[0]\">\n            <ng-content></ng-content>\n        </span>\n        {{texts[1]}}\n    </span>\n</button>\n",
+                template: "<button\n    *ngIf=\"texts$ | async as texts\"\n    tuiButton\n    type=\"button\"\n    appearance=\"\"\n    size=\"s\"\n    class=\"t-copy\"\n    [title]=\"texts[0]\"\n    (click)=\"onClick()\"\n>\n    <span class=\"t-content\" [class.t-content_moved]=\"copied$ | async\">\n        <span class=\"t-initial\" [attr.data-text]=\"texts[0]\">\n            <ng-content></ng-content>\n        </span>\n        {{ texts[1] }}\n    </span>\n</button>\n",
                 changeDetection: core.ChangeDetectionStrategy.OnPush,
                 providers: [cdk.TuiDestroyService],
                 styles: [":host{position:relative;display:inline-block;vertical-align:middle}.t-copy{transition-property:background;transition-duration:var(--tui-duration,300ms);transition-timing-function:ease-in-out;width:100%;color:var(--tui-text-01);background:var(--tui-base-01);overflow:hidden}.t-copy:hover{background:var(--tui-base-02)}.t-initial{white-space:nowrap}.t-initial:empty:before{content:attr(data-text)}.t-content{transition-property:transform;transition-duration:var(--tui-duration,300ms);transition-timing-function:ease-in-out;display:flex;flex-direction:column;transform:translateY(1rem);text-align:center;line-height:2rem}.t-content_moved{transform:translateY(-1rem)}"]
@@ -323,7 +351,9 @@
      * Works with a tuple
      * [@string tuiMode tooltip content, @string word 'background', @string 'form value']
      */
-    var TUI_DOC_DEMO_TEXTS = new core.InjectionToken('tui-doc-demo i18n texts', { factory: function () { return ['Read more more about modes: ', 'Background', 'Form value']; } });
+    var TUI_DOC_DEMO_TEXTS = new core.InjectionToken('tui-doc-demo i18n texts', {
+        factory: function () { return ['Read more more about modes: ', 'Background', 'Form value']; },
+    });
     /**
      * Works with a tuple
      * [
@@ -351,15 +381,21 @@
      * @string link to a sample copied message label
      * ]
      */
-    var TUI_DOC_EXAMPLE_TEXTS = new core.InjectionToken('tui-doc-example i18n texts', { factory: function () { return ['Preview', 'Link to a sample was successfully copied', 'Done']; } });
+    var TUI_DOC_EXAMPLE_TEXTS = new core.InjectionToken('tui-doc-example i18n texts', {
+        factory: function () { return ['Preview', 'Link to a sample was successfully copied', 'Done']; },
+    });
     var TUI_DOC_MENU_TEXT = new core.InjectionToken('menu i18n text', {
         factory: function () { return 'Menu'; },
     });
     var TUI_DOC_SEARCH_TEXT = new core.InjectionToken('search i18n text', {
         factory: function () { return 'Search'; },
     });
-    var TUI_DOC_SEE_ALSO_TEXT = new core.InjectionToken('tui-doc-see-also i18n text', { factory: function () { return 'See also'; } });
-    var TUI_DOC_SOURCE_CODE_TEXT = new core.InjectionToken('tui-doc-source-code i18n text', { factory: function () { return 'Source code'; } });
+    var TUI_DOC_SEE_ALSO_TEXT = new core.InjectionToken('tui-doc-see-also i18n text', {
+        factory: function () { return 'See also'; },
+    });
+    var TUI_DOC_SOURCE_CODE_TEXT = new core.InjectionToken('tui-doc-source-code i18n text', {
+        factory: function () { return 'Source code'; },
+    });
 
     var MIN_COMPONENT_WIDTH = 104;
     // @dynamic
@@ -370,6 +406,8 @@
             this.destroy$ = destroy$;
             this.renderer = renderer;
             this.texts = texts;
+            this.initialX = 0;
+            this.wrapperWidth = 0;
             this.control = null;
             this.updateOnVariants = ['change', 'blur', 'submit'];
             this.updateOn = 'change';
@@ -379,8 +417,6 @@
             this.mode = null;
             this.change$ = new rxjs.Subject();
             this.items = ['onLight', 'onDark'];
-            this.initialX = 0;
-            this.wrapperWidth = 0;
             this.isBrowser = common.isPlatformBrowser(platformId);
             var parsedMode = locationRef.path().match(/tui-mode=(onDark|onLight)/);
             if (parsedMode !== null && parsedMode.length > 0) {
@@ -397,6 +433,9 @@
             });
         }
         TuiDocDemoComponent_1 = TuiDocDemoComponent;
+        TuiDocDemoComponent.prototype.onResize = function () {
+            this.setResizerTextContent();
+        };
         TuiDocDemoComponent.prototype.ngOnInit = function () {
             this.createForm();
         };
@@ -413,9 +452,6 @@
             var offsetWidth = this.content.nativeElement.offsetWidth;
             this.resizerText.nativeElement.textContent = String(offsetWidth - parseInt(paddingLeft || '0', 10) * 2);
         };
-        TuiDocDemoComponent.prototype.onResize = function () {
-            this.setResizerTextContent();
-        };
         TuiDocDemoComponent.prototype.onDragStart = function (event) {
             event.preventDefault();
             this.initialX = event.clientX;
@@ -459,12 +495,6 @@
             { type: router.UrlSerializer, decorators: [{ type: core.Inject, args: [router.UrlSerializer,] }] },
             { type: Array, decorators: [{ type: core.Inject, args: [TUI_DOC_DEMO_TEXTS,] }] }
         ]; };
-        __decorate([
-            core.Input()
-        ], TuiDocDemoComponent.prototype, "control", void 0);
-        __decorate([
-            core.ContentChild(core.TemplateRef)
-        ], TuiDocDemoComponent.prototype, "template", void 0);
         __decorate([
             core.ViewChild('content')
         ], TuiDocDemoComponent.prototype, "content", void 0);
@@ -474,13 +504,19 @@
         __decorate([
             core.ViewChild('resizerText')
         ], TuiDocDemoComponent.prototype, "resizerText", void 0);
+        __decorate([
+            core.Input()
+        ], TuiDocDemoComponent.prototype, "control", void 0);
+        __decorate([
+            core.ContentChild(core.TemplateRef)
+        ], TuiDocDemoComponent.prototype, "template", void 0);
         __decorate([
             core.HostListener('window:resize')
         ], TuiDocDemoComponent.prototype, "onResize", null);
         TuiDocDemoComponent = TuiDocDemoComponent_1 = __decorate([
             core.Component({
                 selector: 'tui-doc-demo',
-                template: "<div class=\"t-bg-toggle\" [tuiMode]=\"null\">\n    <ng-template #tooltip>\n        {{texts[0]}}\n        <a tuiLink tuiMode=\"onDark\" routerLink=\"/directives/mode\">\n            <code>tuiMode</code>\n        </a>\n    </ng-template>\n    <ng-container *ngIf=\"isMobile else desktop\">\n        <tui-select\n            class=\"t-mode\"\n            tuiTextfieldSize=\"s\"\n            [tuiTextfieldCleaner]=\"true\"\n            [tuiHintContent]=\"tooltip\"\n            [formControl]=\"modeControl\"\n        >\n            tuiMode\n            <tui-data-list-wrapper\n                *tuiDataList\n                [items]=\"items\"\n            ></tui-data-list-wrapper>\n        </tui-select>\n    </ng-container>\n    <ng-template #desktop>\n        tuiMode:\n        <tui-tooltip describeId=\"form\" [content]=\"tooltip\"></tui-tooltip>\n        <div tuiGroup class=\"tui-space_left-3\" [collapsed]=\"true\">\n            <tui-radio-block\n                class=\"tui-group__auto-width-item\"\n                size=\"s\"\n                nativeId=\"form\"\n                [item]=\"null\"\n                [hideRadio]=\"true\"\n                [formControl]=\"modeControl\"\n            >\n                null\n            </tui-radio-block>\n            <tui-radio-block\n                class=\"tui-group__auto-width-item\"\n                item=\"onDark\"\n                size=\"s\"\n                nativeId=\"form\"\n                [hideRadio]=\"true\"\n                [formControl]=\"modeControl\"\n            >\n                onDark\n            </tui-radio-block>\n            <tui-radio-block\n                class=\"tui-group__auto-width-item\"\n                item=\"onLight\"\n                size=\"s\"\n                nativeId=\"form\"\n                [hideRadio]=\"true\"\n                [formControl]=\"modeControl\"\n            >\n                onLight\n            </tui-radio-block>\n        </div>\n    </ng-template>\n    <tui-checkbox-labeled\n        class=\"tui-space_left-3\"\n        size=\"m\"\n        [(ngModel)]=\"opaque\"\n    >\n        {{texts[1]}}\n    </tui-checkbox-labeled>\n</div>\n<div\n    #wrapper\n    class=\"t-wrapper\"\n    [class.t-wrapper_dark]=\"modeControl.value === 'onDark'\"\n    [class.t-wrapper_gray]=\"modeControl.value === 'onLight'\"\n    [class.t-wrapper_transparent]=\"!opaque\"\n>\n    <div #content id=\"demoContent\" class=\"t-content\">\n        <form *ngIf=\"testForm\" class=\"t-form\" [formGroup]=\"testForm\">\n            <div class=\"t-input-wrapper\">\n                <ng-container *ngTemplateOutlet=\"template\"></ng-container>\n            </div>\n            <button\n                tuiButton\n                type=\"button\"\n                class=\"tui-space_top-3\"\n                size=\"s\"\n                [iconRight]=\"icon\"\n                (click)=\"toggleDetails()\"\n            >\n                {{texts[2]}}\n            </button>\n            <ng-template #icon>\n                <tui-svg\n                    src=\"tuiIconChevronDown\"\n                    class=\"t-icon\"\n                    [class.t-icon_rotated]=\"expanded\"\n                ></tui-svg>\n            </ng-template>\n            <tui-expand class=\"t-expand\" [expanded]=\"expanded\">\n                <ng-template tuiExpandContent>\n                    <pre class=\"t-value\">\nForm data: {{testForm.value | json}}</pre\n                    >\n                    <div tuiGroup class=\"tui-space_top-3\">\n                        <tui-select\n                            class=\"t-select\"\n                            tuiTextfieldSize=\"s\"\n                            [ngModel]=\"updateOn\"\n                            [ngModelOptions]=\"{standalone: true}\"\n                            (ngModelChange)=\"updateOnChange($event)\"\n                        >\n                            updateOn\n                            <tui-data-list-wrapper\n                                *tuiDataList\n                                [items]=\"updateOnVariants\"\n                            ></tui-data-list-wrapper>\n                        </tui-select>\n                        <button\n                            tuiButton\n                            class=\"tui-group__auto-width-item\"\n                            type=\"reset\"\n                            size=\"s\"\n                        >\n                            Reset\n                        </button>\n                        <button\n                            tuiButton\n                            class=\"tui-group__auto-width-item\"\n                            type=\"submit\"\n                            size=\"s\"\n                        >\n                            Submit\n                        </button>\n                    </div>\n                </ng-template>\n            </tui-expand>\n        </form>\n        <ng-content></ng-content>\n    </div>\n    <button\n        class=\"t-resizer\"\n        tabindex=\"-1\"\n        (tuiDragStart)=\"onDragStart($event)\"\n        (tuiDragContinues)=\"onDragContinues($event)\"\n        (tuiDragEnd)=\"onDragEnd()\"\n    >\n        <span #resizerText class=\"t-resizer-text\"></span>\n    </button>\n</div>\n",
+                template: "<div class=\"t-bg-toggle\" [tuiMode]=\"null\">\n    <ng-template #tooltip>\n        {{ texts[0] }}\n        <a tuiLink tuiMode=\"onDark\" routerLink=\"/directives/mode\">\n            <code>tuiMode</code>\n        </a>\n    </ng-template>\n    <ng-container *ngIf=\"isMobile; else desktop\">\n        <tui-select\n            tuiTextfieldSize=\"s\"\n            class=\"t-mode\"\n            [tuiTextfieldCleaner]=\"true\"\n            [tuiHintContent]=\"tooltip\"\n            [formControl]=\"modeControl\"\n        >\n            tuiMode\n            <tui-data-list-wrapper\n                *tuiDataList\n                [items]=\"items\"\n            ></tui-data-list-wrapper>\n        </tui-select>\n    </ng-container>\n    <ng-template #desktop>\n        tuiMode:\n        <tui-tooltip describeId=\"form\" [content]=\"tooltip\"></tui-tooltip>\n        <div tuiGroup class=\"tui-space_left-3\" [collapsed]=\"true\">\n            <tui-radio-block\n                size=\"s\"\n                nativeId=\"form\"\n                class=\"tui-group__auto-width-item\"\n                [item]=\"null\"\n                [hideRadio]=\"true\"\n                [formControl]=\"modeControl\"\n            >\n                null\n            </tui-radio-block>\n            <tui-radio-block\n                item=\"onDark\"\n                size=\"s\"\n                nativeId=\"form\"\n                class=\"tui-group__auto-width-item\"\n                [hideRadio]=\"true\"\n                [formControl]=\"modeControl\"\n            >\n                onDark\n            </tui-radio-block>\n            <tui-radio-block\n                item=\"onLight\"\n                size=\"s\"\n                nativeId=\"form\"\n                class=\"tui-group__auto-width-item\"\n                [hideRadio]=\"true\"\n                [formControl]=\"modeControl\"\n            >\n                onLight\n            </tui-radio-block>\n        </div>\n    </ng-template>\n    <tui-checkbox-labeled\n        size=\"m\"\n        class=\"tui-space_left-3\"\n        [(ngModel)]=\"opaque\"\n    >\n        {{ texts[1] }}\n    </tui-checkbox-labeled>\n</div>\n<div\n    #wrapper\n    class=\"t-wrapper\"\n    [class.t-wrapper_dark]=\"modeControl.value === 'onDark'\"\n    [class.t-wrapper_gray]=\"modeControl.value === 'onLight'\"\n    [class.t-wrapper_transparent]=\"!opaque\"\n>\n    <div #content id=\"demoContent\" class=\"t-content\">\n        <form *ngIf=\"testForm\" class=\"t-form\" [formGroup]=\"testForm\">\n            <div class=\"t-input-wrapper\">\n                <ng-container *ngTemplateOutlet=\"template\"></ng-container>\n            </div>\n            <button\n                tuiButton\n                type=\"button\"\n                size=\"s\"\n                class=\"tui-space_top-3\"\n                [iconRight]=\"icon\"\n                (click)=\"toggleDetails()\"\n            >\n                {{ texts[2] }}\n            </button>\n            <ng-template #icon>\n                <tui-svg\n                    src=\"tuiIconChevronDown\"\n                    class=\"t-icon\"\n                    [class.t-icon_rotated]=\"expanded\"\n                ></tui-svg>\n            </ng-template>\n            <tui-expand class=\"t-expand\" [expanded]=\"expanded\">\n                <ng-template tuiExpandContent>\n                    <pre class=\"t-value\">\nForm data: {{ testForm.value | json }}</pre\n                    >\n                    <div tuiGroup class=\"tui-space_top-3\">\n                        <tui-select\n                            tuiTextfieldSize=\"s\"\n                            class=\"t-select\"\n                            [ngModel]=\"updateOn\"\n                            [ngModelOptions]=\"{standalone: true}\"\n                            (ngModelChange)=\"updateOnChange($event)\"\n                        >\n                            updateOn\n                            <tui-data-list-wrapper\n                                *tuiDataList\n                                [items]=\"updateOnVariants\"\n                            ></tui-data-list-wrapper>\n                        </tui-select>\n                        <button\n                            tuiButton\n                            type=\"reset\"\n                            size=\"s\"\n                            class=\"tui-group__auto-width-item\"\n                        >\n                            Reset\n                        </button>\n                        <button\n                            tuiButton\n                            type=\"submit\"\n                            size=\"s\"\n                            class=\"tui-group__auto-width-item\"\n                        >\n                            Submit\n                        </button>\n                    </div>\n                </ng-template>\n            </tui-expand>\n        </form>\n        <ng-content></ng-content>\n    </div>\n    <button\n        tabindex=\"-1\"\n        class=\"t-resizer\"\n        (tuiDragStart)=\"onDragStart($event)\"\n        (tuiDragContinues)=\"onDragContinues($event)\"\n        (tuiDragEnd)=\"onDragEnd()\"\n    >\n        <span #resizerText class=\"t-resizer-text\"></span>\n    </button>\n</div>\n",
                 changeDetection: core.ChangeDetectionStrategy.OnPush,
                 providers: [
                     cdk.TuiDestroyService,
@@ -535,995 +571,1012 @@
         return TuiDocDemoModule;
     }());
 
-    var 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) {
-        var newStr = '';
-        for (var 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(function (x) {
+                var hex = x.toString(16);
+                return hex.length === 1 ? '0' + hex : hex;
+            })
+                .join(''));
+    }
+    function hexToRgb(hex) {
+        var matches = hex
+            .replace('#', '')
+            .split('')
+            .map(function (char, _, array) { return (array.length === 3 ? char + char : char); })
+            .join('')
+            .match(/.{2}/g);
+        return matches
+            ? matches.map(function (x) { return Number.parseInt(x, 16); })
+            : [0, 0, 0];
     }
 
-    var TUI_DOC_PAGES = new core.InjectionToken('Documentation pages', {
-        factory: function () { return []; },
-    });
-
-    var TUI_DOC_TITLE = new core.InjectionToken('Page title', {
-        factory: function () { return ''; },
-    });
-
-    var NAVIGATION_TITLE = new core.InjectionToken('Page title');
-    var NAVIGATION_LABELS = new core.InjectionToken('Navigation sections labels for search');
-    var NAVIGATION_ITEMS = new core.InjectionToken('Navigation pages');
-    var NAVIGATION_PROVIDERS = [
-        cdk.TuiDestroyService,
-        {
-            provide: NAVIGATION_TITLE,
-            deps: [router.Router, router.ActivatedRoute, TUI_DOC_TITLE, cdk.TuiDestroyService],
-            useFactory: titleProviderFactory,
-        },
-        {
-            provide: NAVIGATION_LABELS,
-            deps: [TUI_DOC_PAGES],
-            useFactory: labelsProviderFactory,
-        },
-        {
-            provide: NAVIGATION_ITEMS,
-            deps: [TUI_DOC_PAGES],
-            useFactory: itemsProviderFactory,
-        },
-    ];
-    function titleProviderFactory(router$1, activatedRoute, titlePrefix, destroy$) {
-        return router$1.events.pipe(operators.filter(function (event) { return event instanceof router.NavigationEnd; }), operators.map(function () { return activatedRoute.firstChild; }), operators.filter(cdk.isPresent), operators.mergeMap(function (_a) {
-            var data = _a.data;
-            return data;
-        }), operators.map(function (_a) {
-            var title = _a.title;
-            return titlePrefix + title;
-        }), operators.takeUntil(destroy$));
+    function inspectArray(array, depth) {
+        if (depth === 0) {
+            return '[…]';
+        }
+        var result = '';
+        var first = true;
+        for (var 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(function (_a) {
-            var section = _a.section;
-            return section;
-        })
-            .filter(cdk.isPresent)
-            .filter(function (item, index, array) { return array.indexOf(item) === index; });
+    function inspectObject(object, depth) {
+        if (depth === 0) {
+            return "{\u2026}";
+        }
+        var result = '';
+        var first = true;
+        for (var 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) {
-        var labels = labelsProviderFactory(pages);
-        return __spread(labels.map(function (label) { return pages.filter(function (_a) {
-            var section = _a.section;
-            return section === label;
-        }); }), [
-            pages.filter(function (page) { return !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);
     }
 
-    var SCROLL_INTO_VIEW_DELAY = 200;
-    // @dynamic
-    var TuiDocNavigationComponent = /** @class */ (function () {
-        function TuiDocNavigationComponent(changeDetectorRef, titleService, title$, documentRef, mode, sidebar, labels, items, searchText, router, activatedRoute) {
-            var _this = this;
-            this.documentRef = documentRef;
-            this.mode = mode;
-            this.sidebar = sidebar;
-            this.labels = labels;
-            this.items = items;
-            this.searchText = searchText;
-            this.router = router;
+    var SERIALIZED_SUFFIX = '$';
+    // @bad TODO: refactor output and value sync
+    var TuiDocDocumentationPropertyConnectorDirective = /** @class */ (function () {
+        function TuiDocDocumentationPropertyConnectorDirective(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(operators.startWith(null), operators.map(function () { return _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(function (title) {
-                changeDetectorRef.markForCheck();
-                titleService.setTitle(title);
-                _this.openActivePageGroup();
-                _this.handleAnchorLink(_this.activatedRoute.snapshot.fragment);
-            });
-        }
-        Object.defineProperty(TuiDocNavigationComponent.prototype, "canOpen", {
-            get: function () {
-                return this.search.length > 2;
-            },
-            enumerable: true,
-            configurable: true
-        });
-        Object.defineProperty(TuiDocNavigationComponent.prototype, "filteredItems", {
+            this.urlSerializer = urlSerializer;
+            this.documentationPropertyName = '';
+            this.documentationPropertyMode = null;
+            this.documentationPropertyType = '';
+            this.documentationPropertyValue = null;
+            this.documentationPropertyDeprecated = false;
+            this.documentationPropertyValues = null;
+            this.documentationPropertyValueChange = new core.EventEmitter();
+            this.changed$ = new rxjs.Subject();
+            this.emits$ = new rxjs.BehaviorSubject(1);
+        }
+        TuiDocDocumentationPropertyConnectorDirective.prototype.ngOnInit = function () {
+            this.parseParams(this.activatedRoute.snapshot.queryParams);
+        };
+        Object.defineProperty(TuiDocDocumentationPropertyConnectorDirective.prototype, "attrName", {
             get: function () {
-                return this.filterItems(this.flattenSubPages(this.items), this.search);
+                switch (this.documentationPropertyMode) {
+                    case 'input':
+                        return "[" + this.documentationPropertyName + "]";
+                    case 'output':
+                        return "(" + this.documentationPropertyName + ")";
+                    case 'input-output':
+                        return "[(" + this.documentationPropertyName + ")]";
+                    default:
+                        return this.documentationPropertyName;
+                }
             },
             enumerable: true,
             configurable: true
         });
-        Object.defineProperty(TuiDocNavigationComponent.prototype, "itemsWithoutSections", {
+        Object.defineProperty(TuiDocDocumentationPropertyConnectorDirective.prototype, "hasItems", {
             get: function () {
-                return this.items[this.items.length - 1];
+                return !!this.documentationPropertyValues;
             },
             enumerable: true,
             configurable: true
         });
-        TuiDocNavigationComponent.prototype.isActive = function (route) {
-            return route === this.active;
-        };
-        TuiDocNavigationComponent.prototype.onGroupClick = function (index) {
-            this.openPagesGroupsArr[index] = !this.openPagesGroupsArr[index];
-        };
-        TuiDocNavigationComponent.prototype.closeMenu = function () {
-            this.menuOpen = false;
-        };
-        TuiDocNavigationComponent.prototype.onSearchChange = function (search) {
-            this.search = search;
-            this.open = this.canOpen;
-        };
-        TuiDocNavigationComponent.prototype.onClick = function () {
-            this.open = false;
-            this.menuOpen = false;
-            this.search = '';
-            this.openActivePageGroup();
-        };
-        TuiDocNavigationComponent.prototype.filterItems = function (items, search) {
-            return items.map(function (section) {
-                return cdk.uniqBy(section.filter(function (_a) {
-                    var title = _a.title, _b = _a.keywords, keywords = _b === void 0 ? '' : _b;
-                    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');
-            });
-        };
-        TuiDocNavigationComponent.prototype.flattenSubPages = function (items) {
-            return items.reduce(function (array, item) { return __spread(array, [
-                item.reduce(function (pages, page) {
-                    return 'subPages' in page
-                        ? __spread(pages, page.subPages) : __spread(pages, [page]);
-                }, []),
-            ]); }, []);
-        };
-        TuiDocNavigationComponent.prototype.isActiveRoute = function (route) {
-            return this.router.isActive(route, false);
+        Object.defineProperty(TuiDocDocumentationPropertyConnectorDirective.prototype, "shouldShowValues", {
+            get: function () {
+                return this.documentationPropertyMode !== 'output';
+            },
+            enumerable: true,
+            configurable: true
+        });
+        TuiDocDocumentationPropertyConnectorDirective.prototype.ngOnChanges = function () {
+            this.changed$.next();
         };
-        TuiDocNavigationComponent.prototype.handleAnchorLink = function (hash) {
-            var _this = this;
-            setTimeout(function () {
-                _this.navigateToAnchorLink(hash);
-            }, SCROLL_INTO_VIEW_DELAY);
+        TuiDocDocumentationPropertyConnectorDirective.prototype.onValueChange = function (value) {
+            this.documentationPropertyValue = value;
+            this.documentationPropertyValueChange.emit(value);
+            this.setQueryParam(value);
         };
-        TuiDocNavigationComponent.prototype.openActivePageGroup = function () {
-            var _this = this;
-            this.items.forEach(function (pages, pagesIndex) {
-                pages.forEach(function (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(function (subPage) {
-                            if (_this.isActiveRoute(subPage.route)) {
-                                _this.openPagesArr[pagesIndex] = true;
-                                _this.openPagesGroupsArr[pagesIndex * 100 + pageIndex] = true;
-                                _this.active = subPage.route;
-                            }
-                        });
-                    }
-                });
-            });
+        TuiDocDocumentationPropertyConnectorDirective.prototype.emitEvent = function (event) {
+            // For more convenient debugging
+            console.log(this.attrName, event);
+            this.emits$.next(this.emits$.value + 1);
         };
-        TuiDocNavigationComponent.prototype.navigateToAnchorLink = function (fragment) {
-            var element = fragment && this.documentRef.querySelector("#" + fragment);
-            if (!element) {
+        TuiDocDocumentationPropertyConnectorDirective.prototype.parseParams = function (params) {
+            if (!params[this.documentationPropertyName] &&
+                !params[this.documentationPropertyName + SERIALIZED_SUFFIX]) {
                 return;
             }
-            element.classList.add('tui-doc-animated-example');
-            element.scrollIntoView({
-                block: 'start',
-                inline: 'nearest',
-                behavior: 'smooth',
-            });
+            var 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]);
         };
-        TuiDocNavigationComponent.ctorParameters = function () { return [
-            { type: core.ChangeDetectorRef, decorators: [{ type: core.Inject, args: [core.ChangeDetectorRef,] }] },
-            { type: platformBrowser.Title, decorators: [{ type: core.Inject, args: [platformBrowser.Title,] }] },
-            { type: rxjs.Observable, decorators: [{ type: core.Inject, args: [NAVIGATION_TITLE,] }] },
-            { type: Document, decorators: [{ type: core.Inject, args: [common.DOCUMENT,] }] },
-            { type: core$1.TuiModeDirective, decorators: [{ type: core.Inject, args: [core$1.TuiModeDirective,] }] },
-            { type: undefined, decorators: [{ type: core.Optional }, { type: core.Inject, args: [addonMobile.TuiSidebarDirective,] }] },
-            { type: Array, decorators: [{ type: core.Inject, args: [NAVIGATION_LABELS,] }] },
-            { type: undefined, decorators: [{ type: core.Inject, args: [NAVIGATION_ITEMS,] }] },
-            { type: String, decorators: [{ type: core.Inject, args: [TUI_DOC_SEARCH_TEXT,] }] },
-            { type: router.Router, decorators: [{ type: core.Inject, args: [router.Router,] }] },
-            { type: router.ActivatedRoute, decorators: [{ type: core.Inject, args: [router.ActivatedRoute,] }] }
+        TuiDocDocumentationPropertyConnectorDirective.prototype.setQueryParam = function (value) {
+            var _a;
+            var tree = this.urlSerializer.parse(this.locationRef.path());
+            var isValueAvailableByKey = value instanceof Object;
+            var computedValue = isValueAvailableByKey && this.documentationPropertyValues
+                ? this.documentationPropertyValues.indexOf(value)
+                : value;
+            var suffix = isValueAvailableByKey ? SERIALIZED_SUFFIX : '';
+            var propName = this.documentationPropertyName + suffix;
+            tree.queryParams = __assign(__assign({}, tree.queryParams), (_a = {}, _a[propName] = computedValue, _a));
+            this.locationRef.go(String(tree));
+        };
+        TuiDocDocumentationPropertyConnectorDirective.ctorParameters = function () { return [
+            { type: core.TemplateRef, decorators: [{ type: core.Inject, args: [core.TemplateRef,] }] },
+            { type: common.Location, decorators: [{ type: core.Inject, args: [common.Location,] }] },
+            { type: router.ActivatedRoute, decorators: [{ type: core.Inject, args: [router.ActivatedRoute,] }] },
+            { type: router.UrlSerializer, decorators: [{ type: core.Inject, args: [router.UrlSerializer,] }] }
         ]; };
         __decorate([
-            core.HostBinding('class._open')
-        ], TuiDocNavigationComponent.prototype, "menuOpen", void 0);
+            core.Input()
+        ], TuiDocDocumentationPropertyConnectorDirective.prototype, "documentationPropertyName", void 0);
         __decorate([
-            cdk.tuiPure
-        ], TuiDocNavigationComponent.prototype, "filterItems", null);
+            core.Input()
+        ], TuiDocDocumentationPropertyConnectorDirective.prototype, "documentationPropertyMode", void 0);
         __decorate([
-            cdk.tuiPure
-        ], TuiDocNavigationComponent.prototype, "flattenSubPages", null);
-        TuiDocNavigationComponent = __decorate([
-            core.Component({
-                selector: 'tui-doc-navigation',
-                template: "<tui-hosted-dropdown\n    *tuiLet=\"filteredItems as filtered\"\n    class=\"input\"\n    tuiAutoFocus\n    tuiDropdownLimitWidth=\"fixed\"\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 [tuiMode]=\"mode$ | async\" class=\"scrollbar\">\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                            >\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                >\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                class=\"sublink\"\n                routerLinkActive=\"sublink_active\"\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                                class=\"sublink sublink_small\"\n                                routerLinkActive=\"sublink_active\"\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: core.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)}"]
+            core.Input()
+        ], TuiDocDocumentationPropertyConnectorDirective.prototype, "documentationPropertyType", void 0);
+        __decorate([
+            core.Input()
+        ], TuiDocDocumentationPropertyConnectorDirective.prototype, "documentationPropertyValue", void 0);
+        __decorate([
+            core.Input()
+        ], TuiDocDocumentationPropertyConnectorDirective.prototype, "documentationPropertyDeprecated", void 0);
+        __decorate([
+            core.Input()
+        ], TuiDocDocumentationPropertyConnectorDirective.prototype, "documentationPropertyValues", void 0);
+        __decorate([
+            core.Output()
+        ], TuiDocDocumentationPropertyConnectorDirective.prototype, "documentationPropertyValueChange", void 0);
+        TuiDocDocumentationPropertyConnectorDirective = __decorate([
+            core.Directive({
+                selector: 'ng-template[documentationPropertyName]',
+                exportAs: 'documentationProperty',
             }),
-            __param(0, core.Inject(core.ChangeDetectorRef)),
-            __param(1, core.Inject(platformBrowser.Title)),
-            __param(2, core.Inject(NAVIGATION_TITLE)),
-            __param(3, core.Inject(common.DOCUMENT)),
-            __param(4, core.Inject(core$1.TuiModeDirective)),
-            __param(5, core.Optional()),
-            __param(5, core.Inject(addonMobile.TuiSidebarDirective)),
-            __param(6, core.Inject(NAVIGATION_LABELS)),
-            __param(7, core.Inject(NAVIGATION_ITEMS)),
-            __param(8, core.Inject(TUI_DOC_SEARCH_TEXT)),
-            __param(9, core.Inject(router.Router)),
-            __param(10, core.Inject(router.ActivatedRoute))
-        ], TuiDocNavigationComponent);
-        return TuiDocNavigationComponent;
+            __param(0, core.Inject(core.TemplateRef)),
+            __param(1, core.Inject(common.Location)),
+            __param(2, core.Inject(router.ActivatedRoute)),
+            __param(3, core.Inject(router.UrlSerializer))
+        ], TuiDocDocumentationPropertyConnectorDirective);
+        return TuiDocDocumentationPropertyConnectorDirective;
     }());
 
-    var ScrollIntoViewDirective = /** @class */ (function () {
-        function ScrollIntoViewDirective(destroy$, _a) {
-            var nativeElement = _a.nativeElement;
-            this.scroll$ = new rxjs.Subject();
-            this.scroll$
-                .pipe(operators.debounceTime(750), operators.filter(function (shallWe) { return shallWe && !!cdk.getElementObscurers(nativeElement); }), operators.takeUntil(destroy$))
-                .subscribe(function () {
-                nativeElement.scrollIntoView();
-            });
+    // @bad TODO subscribe propertiesConnectors changes
+    // @bad TODO refactor to make more flexible
+    // @dynamic
+    var TuiDocDocumentationComponent = /** @class */ (function () {
+        function TuiDocDocumentationComponent(changeDetectorRef, texts) {
+            this.changeDetectorRef = changeDetectorRef;
+            this.texts = texts;
+            this.heading = '';
+            this.showValues = true;
+            this.isAPI = false;
+            this.propertiesConnectors = cdk.EMPTY_QUERY;
+            this.activeItemIndex = 0;
         }
-        Object.defineProperty(ScrollIntoViewDirective.prototype, "scrollIntoView", {
-            set: function (shallWe) {
-                this.scroll$.next(shallWe);
+        TuiDocDocumentationComponent.prototype.ngAfterContentInit = function () {
+            cdk.itemsQueryListObservable(this.propertiesConnectors)
+                .pipe(operators.switchMap(function (items) { return rxjs.merge.apply(void 0, __spread(items.map(function (_a) {
+                var changed$ = _a.changed$;
+                return changed$;
+            }))); }), cdk.watch(this.changeDetectorRef))
+                .subscribe();
+        };
+        Object.defineProperty(TuiDocDocumentationComponent.prototype, "type", {
+            get: function () {
+                return this.isAPI ? this.texts[0] : this.texts[1];
             },
             enumerable: true,
             configurable: true
         });
-        ScrollIntoViewDirective.ctorParameters = function () { return [
-            { type: cdk.TuiDestroyService, decorators: [{ type: core.Inject, args: [cdk.TuiDestroyService,] }] },
-            { type: core.ElementRef, decorators: [{ type: core.Inject, args: [core.ElementRef,] }] }
+        TuiDocDocumentationComponent.prototype.getColor = function (color) {
+            if (color.length === 4) {
+                return color
+                    .split('')
+                    .reduce(function (result, current) { return __spread(result, [current, current]); }, [])
+                    .join('')
+                    .replace('#', '');
+            }
+            if (color.startsWith('#')) {
+                return color;
+            }
+            if (color === 'transparent') {
+                return '#000000';
+            }
+            var parsed = color
+                .replace('rgb(', '')
+                .replace('rgba(', '')
+                .replace(')', '')
+                .replace(' ', '')
+                .split(',')
+                .map(function (v) { return Number.parseInt(v, 10); });
+            return rgbToHex.apply(void 0, __spread(parsed));
+        };
+        TuiDocDocumentationComponent.prototype.getOpacity = function (color) {
+            if (color.startsWith('#') || color.startsWith('rgb(')) {
+                return 100;
+            }
+            if (color === 'transparent') {
+                return 0;
+            }
+            var lastComma = color.lastIndexOf(',');
+            var parsed = color
+                .substr(lastComma)
+                .replace(')', '')
+                .replace(' ', '')
+                .replace(',', '');
+            return Math.round(Number.parseFloat(parsed) * 100);
+        };
+        TuiDocDocumentationComponent.prototype.onColorChange = function (connector, color) {
+            var opacity = this.getOpacity(connector.documentationPropertyValue || '');
+            if (opacity === 100) {
+                connector.onValueChange(color);
+                return;
+            }
+            var rgb = hexToRgb(color).join(', ');
+            var result = "rgba(" + rgb + ", " + opacity / 100 + ")";
+            connector.onValueChange(result);
+        };
+        TuiDocDocumentationComponent.prototype.onOpacityChange = function (connector, opacity) {
+            var hex = this.getColor(connector.documentationPropertyValue || '');
+            var rgb = hexToRgb(hex);
+            var result = "rgba(" + rgb + ", " + opacity / 100 + ")";
+            connector.onValueChange(result);
+        };
+        TuiDocDocumentationComponent.prototype.stripOptional = function (name) {
+            return name.replace('?', '');
+        };
+        TuiDocDocumentationComponent.prototype.isOptional = function (name) {
+            return name.includes('?');
+        };
+        TuiDocDocumentationComponent.prototype.showCleaner = function (type) {
+            return type.includes('null');
+        };
+        TuiDocDocumentationComponent.prototype.showContentTooltip = function (type) {
+            return type.includes('PolymorpheusContent');
+        };
+        TuiDocDocumentationComponent.prototype.inspectAny = function (data) {
+            return inspectAny(data, 2);
+        };
+        TuiDocDocumentationComponent.ctorParameters = function () { return [
+            { type: core.ChangeDetectorRef, decorators: [{ type: core.Inject, args: [core.ChangeDetectorRef,] }] },
+            { type: Array, decorators: [{ type: core.Inject, args: [TUI_DOC_DOCUMENTATION_TEXTS,] }] }
         ]; };
         __decorate([
             core.Input()
-        ], ScrollIntoViewDirective.prototype, "scrollIntoView", null);
-        ScrollIntoViewDirective = __decorate([
+        ], TuiDocDocumentationComponent.prototype, "heading", void 0);
+        __decorate([
+            core.Input()
+        ], TuiDocDocumentationComponent.prototype, "showValues", void 0);
+        __decorate([
+            core.Input()
+        ], TuiDocDocumentationComponent.prototype, "isAPI", void 0);
+        __decorate([
+            core.ContentChildren(TuiDocDocumentationPropertyConnectorDirective)
+        ], TuiDocDocumentationComponent.prototype, "propertiesConnectors", void 0);
+        TuiDocDocumentationComponent = __decorate([
+            core.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=\"tui-table__th tui-table__th_last tui-table__th_text_right t-cell t-cell_value\"\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=\"tui-table__td tui-table__td_first tui-table__td_align_center t-cell\"\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=\"tui-table__td tui-table__td_align_center tui-table__td_last tui-table__td_text_right t-cell\"\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: core.ChangeDetectionStrategy.OnPush,
+                animations: [
+                    animations.trigger('emitEvent', [
+                        animations.transition(':increment', [animations.style({ opacity: 1 }), animations.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, core.Inject(core.ChangeDetectorRef)),
+            __param(1, core.Inject(TUI_DOC_DOCUMENTATION_TEXTS))
+        ], TuiDocDocumentationComponent);
+        return TuiDocDocumentationComponent;
+    }());
+
+    var TuiInputOpacityDirective = /** @class */ (function () {
+        function TuiInputOpacityDirective(renderer, tuiFocusableComponent) {
+            this.renderer = renderer;
+            this.tuiFocusableComponent = tuiFocusableComponent;
+        }
+        Object.defineProperty(TuiInputOpacityDirective.prototype, "tuiInputOpacity", {
+            set: function (opacity) {
+                var nativeFocusableElement = this.tuiFocusableComponent.nativeFocusableElement;
+                if (nativeFocusableElement) {
+                    this.renderer.setStyle(nativeFocusableElement, 'opacity', opacity / 100);
+                }
+            },
+            enumerable: true,
+            configurable: true
+        });
+        TuiInputOpacityDirective.ctorParameters = function () { return [
+            { type: core.Renderer2, decorators: [{ type: core.Inject, args: [core.Renderer2,] }] },
+            { type: undefined, decorators: [{ type: core.Inject, args: [cdk.TUI_FOCUSABLE_ITEM_ACCESSOR,] }] }
+        ]; };
+        __decorate([
+            core.Input()
+        ], TuiInputOpacityDirective.prototype, "tuiInputOpacity", null);
+        TuiInputOpacityDirective = __decorate([
             core.Directive({
-                selector: '[scrollIntoView]',
-                providers: [cdk.TuiDestroyService],
+                selector: '[tuiInputOpacity]',
             }),
-            __param(0, core.Inject(cdk.TuiDestroyService)),
-            __param(1, core.Inject(core.ElementRef))
-        ], ScrollIntoViewDirective);
-        return ScrollIntoViewDirective;
+            __param(0, core.Inject(core.Renderer2)),
+            __param(1, core.Inject(cdk.TUI_FOCUSABLE_ITEM_ACCESSOR))
+        ], TuiInputOpacityDirective);
+        return TuiInputOpacityDirective;
     }());
 
-    var ScrollIntoViewModule = /** @class */ (function () {
-        function ScrollIntoViewModule() {
+    var TuiInputOpacityModule = /** @class */ (function () {
+        function TuiInputOpacityModule() {
         }
-        ScrollIntoViewModule = __decorate([
+        TuiInputOpacityModule = __decorate([
             core.NgModule({
-                declarations: [ScrollIntoViewDirective],
-                exports: [ScrollIntoViewDirective],
+                declarations: [TuiInputOpacityDirective],
+                exports: [TuiInputOpacityDirective],
             })
-        ], ScrollIntoViewModule);
-        return ScrollIntoViewModule;
+        ], TuiInputOpacityModule);
+        return TuiInputOpacityModule;
     }());
 
-    var TuiDocNavigationModule = /** @class */ (function () {
-        function TuiDocNavigationModule() {
+    var TuiDocDocumentationModule = /** @class */ (function () {
+        function TuiDocDocumentationModule() {
         }
-        TuiDocNavigationModule = __decorate([
+        TuiDocDocumentationModule = __decorate([
             core.NgModule({
                 imports: [
                     common.CommonModule,
                     forms.FormsModule,
                     router.RouterModule,
-                    ScrollIntoViewModule,
-                    core$1.TuiButtonModule,
+                    kit.TuiBadgeModule,
+                    kit.TuiSelectModule,
+                    kit.TuiToggleModule,
+                    core$1.TuiTooltipModule,
+                    core$1.TuiLinkModule,
+                    kit.TuiInputCountModule,
+                    core$1.TuiModeModule,
+                    core$1.TuiGroupModule,
+                    TuiInputOpacityModule,
                     core$1.TuiPrimitiveTextfieldModule,
                     core$1.TuiTextfieldControllerModule,
-                    cdk.TuiActiveZoneModule,
-                    cdk.TuiLetModule,
-                    core$1.TuiModeModule,
-                    core$1.TuiLinkModule,
-                    core$1.TuiExpandModule,
-                    core$1.TuiHostedDropdownModule,
+                    core$1.TuiHintControllerModule,
                     core$1.TuiDropdownControllerModule,
-                    kit.TuiAccordionModule,
-                    core$1.TuiScrollbarModule,
-                    core$1.TuiSvgModule,
                     core$1.TuiDataListModule,
-                    cdk.TuiAutoFocusModule,
+                    kit.TuiDataListWrapperModule,
+                    core$1.TuiNotificationModule,
+                ],
+                declarations: [
+                    TuiDocDocumentationComponent,
+                    TuiDocDocumentationPropertyConnectorDirective,
+                ],
+                exports: [
+                    TuiDocDocumentationComponent,
+                    TuiDocDocumentationPropertyConnectorDirective,
                 ],
-                declarations: [TuiDocNavigationComponent],
-                exports: [TuiDocNavigationComponent],
             })
-        ], TuiDocNavigationModule);
-        return TuiDocNavigationModule;
+        ], TuiDocDocumentationModule);
+        return TuiDocDocumentationModule;
     }());
 
-    function rgbToHex(r, g, b) {
-        return ('#' +
-            [r, g, b]
-                .map(function (x) {
-                var hex = x.toString(16);
-                return hex.length === 1 ? '0' + hex : hex;
-            })
-                .join(''));
-    }
-    function hexToRgb(hex) {
-        var matches = hex
-            .replace('#', '')
-            .split('')
-            .map(function (char, _, array) { return (array.length === 3 ? char + char : char); })
-            .join('')
-            .match(/.{2}/g);
-        return matches
-            ? matches.map(function (x) { return Number.parseInt(x, 16); })
-            : [0, 0, 0];
+    var TUI_DOC_CODE_EDITOR = new core.InjectionToken('Contains service for opening online IDE e.g. Stackblitz');
+
+    var TUI_DOC_EXAMPLE_CONTENT_PROCESSOR = new core.InjectionToken('Processes content in example', { factory: function () { return cdk.identity; } });
+
+    function rawLoadRecord(example) {
+        return __awaiter(this, void 0, void 0, function () {
+            var processedContent, _a, _b, _c, key, content, _d, _e, e_1_1;
+            var e_1, _f;
+            return __generator(this, function (_g) {
+                switch (_g.label) {
+                    case 0:
+                        processedContent = {};
+                        _g.label = 1;
+                    case 1:
+                        _g.trys.push([1, 6, 7, 8]);
+                        _a = __values(Object.entries(example)), _b = _a.next();
+                        _g.label = 2;
+                    case 2:
+                        if (!!_b.done) return [3 /*break*/, 5];
+                        _c = __read(_b.value, 2), key = _c[0], content = _c[1];
+                        _d = processedContent;
+                        _e = key;
+                        return [4 /*yield*/, rawLoad(content)];
+                    case 3:
+                        _d[_e] = _g.sent();
+                        _g.label = 4;
+                    case 4:
+                        _b = _a.next();
+                        return [3 /*break*/, 2];
+                    case 5: return [3 /*break*/, 8];
+                    case 6:
+                        e_1_1 = _g.sent();
+                        e_1 = { error: e_1_1 };
+                        return [3 /*break*/, 8];
+                    case 7:
+                        try {
+                            if (_b && !_b.done && (_f = _a.return)) _f.call(_a);
+                        }
+                        finally { if (e_1) throw e_1.error; }
+                        return [7 /*endfinally*/];
+                    case 8: return [2 /*return*/, processedContent];
+                }
+            });
+        });
     }
 
-    function inspectArray(array, depth) {
-        if (depth === 0) {
-            return '[…]';
-        }
-        var result = '';
-        var first = true;
-        for (var index = 0; index < array.length; index++) {
-            if (first) {
-                first = false;
-            }
-            else {
-                result += ', ';
-            }
-            result += index in array ? inspectAny(array[index], depth - 1) : 'empty';
+    // Ambient type cannot be used without dynamic https://github.com/angular/angular/issues/23395
+    // @dynamic
+    var TuiDocExampleComponent = /** @class */ (function () {
+        function TuiDocExampleComponent(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 rxjs.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(operators.map(function (_a) {
+                var _b = __read(_a, 1), copy = _b[0];
+                return copy;
+            }));
+            this.processor$ = this.rawLoader$$.pipe(operators.switchMap(rawLoadRecord), operators.map(this.processContent));
         }
-        return "[" + result + "]";
-    }
-    function inspectObject(object, depth) {
-        if (depth === 0) {
-            return "{\u2026}";
-        }
-        var result = '';
-        var first = true;
-        for (var key in object) {
-            if (!object.hasOwnProperty(key)) {
-                continue;
-            }
-            if (first) {
-                first = false;
-            }
-            else {
-                result += ', ';
-            }
-            result += key + ": " + inspectAny(object[key], depth - 1);
-        }
-        return "{" + result + "}";
-    }
-    // @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);
-    }
-
-    var SERIALIZED_SUFFIX = '$';
-    // @bad TODO: refactor output and value sync
-    var TuiDocDocumentationPropertyConnectorDirective = /** @class */ (function () {
-        function TuiDocDocumentationPropertyConnectorDirective(template, locationRef, activatedRoute, urlSerializer) {
-            this.template = template;
-            this.locationRef = locationRef;
-            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 core.EventEmitter();
-            this.changed$ = new rxjs.Subject();
-            this.emits$ = new rxjs.BehaviorSubject(1);
-        }
-        TuiDocDocumentationPropertyConnectorDirective.prototype.ngOnInit = function () {
-            this.parseParams(this.activatedRoute.snapshot.queryParams);
-        };
-        Object.defineProperty(TuiDocDocumentationPropertyConnectorDirective.prototype, "attrName", {
-            get: function () {
-                switch (this.documentationPropertyMode) {
-                    case 'input':
-                        return "[" + this.documentationPropertyName + "]";
-                    case 'output':
-                        return "(" + this.documentationPropertyName + ")";
-                    case 'input-output':
-                        return "[(" + this.documentationPropertyName + ")]";
-                    default:
-                        return this.documentationPropertyName;
-                }
-            },
-            enumerable: true,
-            configurable: true
-        });
-        Object.defineProperty(TuiDocDocumentationPropertyConnectorDirective.prototype, "hasItems", {
-            get: function () {
-                return !!this.documentationPropertyValues;
-            },
-            enumerable: true,
-            configurable: true
-        });
-        Object.defineProperty(TuiDocDocumentationPropertyConnectorDirective.prototype, "shouldShowValues", {
-            get: function () {
-                return this.documentationPropertyMode !== 'output';
+        Object.defineProperty(TuiDocExampleComponent.prototype, "content", {
+            set: function (content) {
+                this.rawLoader$$.next(content);
             },
             enumerable: true,
             configurable: true
         });
-        TuiDocDocumentationPropertyConnectorDirective.prototype.ngOnChanges = function () {
-            this.changed$.next();
-        };
-        TuiDocDocumentationPropertyConnectorDirective.prototype.onValueChange = function (value) {
-            this.documentationPropertyValue = value;
-            this.documentationPropertyValueChange.emit(value);
-            this.setQueryParam(value);
-        };
-        TuiDocDocumentationPropertyConnectorDirective.prototype.parseParams = function (params) {
-            if (!params[this.documentationPropertyName] &&
-                !params[this.documentationPropertyName + SERIALIZED_SUFFIX]) {
-                return;
-            }
-            var 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]);
-        };
-        TuiDocDocumentationPropertyConnectorDirective.prototype.setQueryParam = function (value) {
-            var _a;
-            var tree = this.urlSerializer.parse(this.locationRef.path());
-            var isValueAvailableByKey = value instanceof Object;
-            var computedValue = isValueAvailableByKey && this.documentationPropertyValues
-                ? this.documentationPropertyValues.indexOf(value)
-                : value;
-            var suffix = isValueAvailableByKey ? SERIALIZED_SUFFIX : '';
-            var propName = this.documentationPropertyName + suffix;
-            tree.queryParams = __assign(__assign({}, tree.queryParams), (_a = {}, _a[propName] = computedValue, _a));
-            this.locationRef.go(String(tree));
-        };
-        TuiDocDocumentationPropertyConnectorDirective.prototype.emitEvent = function (event) {
-            // For more convenient debugging
-            // tslint:disable-next-line:no-console
-            console.log(this.attrName, event);
-            this.emits$.next(this.emits$.value + 1);
+        TuiDocExampleComponent.prototype.copyExampleLink = function () {
+            var hashPosition = this.location.href.indexOf('#');
+            var currentUrl = hashPosition > -1
+                ? this.location.href.substr(0, hashPosition)
+                : this.location.href;
+            var url = currentUrl + "#" + this.id;
+            this.clipboard.copy(url);
+            this.notifications
+                .show(this.texts[1], {
+                label: this.texts[2],
+                status: "success" /* Success */,
+            })
+                .subscribe();
         };
-        TuiDocDocumentationPropertyConnectorDirective.ctorParameters = function () { return [
-            { type: core.TemplateRef, decorators: [{ type: core.Inject, args: [core.TemplateRef,] }] },
-            { type: common.Location, decorators: [{ type: core.Inject, args: [common.Location,] }] },
-            { type: router.ActivatedRoute, decorators: [{ type: core.Inject, args: [router.ActivatedRoute,] }] },
-            { type: router.UrlSerializer, decorators: [{ type: core.Inject, args: [router.UrlSerializer,] }] }
+        TuiDocExampleComponent.ctorParameters = function () { return [
+            { type: String, decorators: [{ type: core.Attribute, args: ['id',] }] },
+            { type: clipboard.Clipboard, decorators: [{ type: core.Inject, args: [clipboard.Clipboard,] }] },
+            { type: core$1.TuiNotificationsService, decorators: [{ type: core.Inject, args: [core$1.TuiNotificationsService,] }] },
+            { type: Location, decorators: [{ type: core.Inject, args: [common$1.LOCATION,] }] },
+            { type: rxjs.Observable, decorators: [{ type: core.Inject, args: [kit.TUI_COPY_TEXTS,] }] },
+            { type: Array, decorators: [{ type: core.Inject, args: [TUI_DOC_EXAMPLE_TEXTS,] }] },
+            { type: undefined, decorators: [{ type: core.Optional }, { type: core.Inject, args: [TUI_DOC_CODE_EDITOR,] }] },
+            { type: undefined, decorators: [{ type: core.Inject, args: [TUI_DOC_EXAMPLE_CONTENT_PROCESSOR,] }] }
         ]; };
         __decorate([
             core.Input()
-        ], TuiDocDocumentationPropertyConnectorDirective.prototype, "documentationPropertyName", void 0);
-        __decorate([
-            core.Input()
-        ], TuiDocDocumentationPropertyConnectorDirective.prototype, "documentationPropertyMode", void 0);
-        __decorate([
-            core.Input()
-        ], TuiDocDocumentationPropertyConnectorDirective.prototype, "documentationPropertyType", void 0);
+        ], TuiDocExampleComponent.prototype, "heading", void 0);
         __decorate([
             core.Input()
-        ], TuiDocDocumentationPropertyConnectorDirective.prototype, "documentationPropertyValue", void 0);
+        ], TuiDocExampleComponent.prototype, "description", void 0);
         __decorate([
             core.Input()
-        ], TuiDocDocumentationPropertyConnectorDirective.prototype, "documentationPropertyDeprecated", void 0);
+        ], TuiDocExampleComponent.prototype, "content", null);
         __decorate([
             core.Input()
-        ], TuiDocDocumentationPropertyConnectorDirective.prototype, "documentationPropertyValues", void 0);
-        __decorate([
-            core.Output()
-        ], TuiDocDocumentationPropertyConnectorDirective.prototype, "documentationPropertyValueChange", void 0);
-        TuiDocDocumentationPropertyConnectorDirective = __decorate([
-            core.Directive({
-                selector: 'ng-template[documentationPropertyName]',
-                exportAs: 'documentationProperty',
+        ], TuiDocExampleComponent.prototype, "componentName", void 0);
+        TuiDocExampleComponent = __decorate([
+            core.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: core.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, core.Inject(core.TemplateRef)),
-            __param(1, core.Inject(common.Location)),
-            __param(2, core.Inject(router.ActivatedRoute)),
-            __param(3, core.Inject(router.UrlSerializer))
-        ], TuiDocDocumentationPropertyConnectorDirective);
-        return TuiDocDocumentationPropertyConnectorDirective;
+            __param(0, core.Attribute('id')),
+            __param(1, core.Inject(clipboard.Clipboard)),
+            __param(2, core.Inject(core$1.TuiNotificationsService)),
+            __param(3, core.Inject(common$1.LOCATION)),
+            __param(4, core.Inject(kit.TUI_COPY_TEXTS)),
+            __param(5, core.Inject(TUI_DOC_EXAMPLE_TEXTS)),
+            __param(6, core.Optional()),
+            __param(6, core.Inject(TUI_DOC_CODE_EDITOR)),
+            __param(7, core.Inject(TUI_DOC_EXAMPLE_CONTENT_PROCESSOR))
+        ], TuiDocExampleComponent);
+        return TuiDocExampleComponent;
     }());
 
-    // @bad TODO subscribe propertiesConnectors changes
-    // @bad TODO refactor to make more flexible
-    // @dynamic
-    var TuiDocDocumentationComponent = /** @class */ (function () {
-        function TuiDocDocumentationComponent(changeDetectorRef, texts) {
-            this.changeDetectorRef = changeDetectorRef;
-            this.texts = texts;
-            this.heading = '';
-            this.showValues = true;
-            this.isAPI = false;
-            this.propertiesConnectors = cdk.EMPTY_QUERY;
-            this.activeItemIndex = 0;
+    var TuiDocExampleGetTabsPipe = /** @class */ (function () {
+        function TuiDocExampleGetTabsPipe() {
         }
-        TuiDocDocumentationComponent.prototype.ngAfterContentInit = function () {
-            cdk.itemsQueryListObservable(this.propertiesConnectors)
-                .pipe(operators.switchMap(function (items) { return rxjs.merge.apply(void 0, __spread(items.map(function (_a) {
-                var changed$ = _a.changed$;
-                return changed$;
-            }))); }), cdk.watch(this.changeDetectorRef))
-                .subscribe();
+        TuiDocExampleGetTabsPipe.prototype.transform = function (content, defaultTab) {
+            return __spread([defaultTab], Object.keys(content));
         };
-        Object.defineProperty(TuiDocDocumentationComponent.prototype, "type", {
+        TuiDocExampleGetTabsPipe = __decorate([
+            core.Pipe({ name: 'tuiDocExampleGetTabs' })
+        ], TuiDocExampleGetTabsPipe);
+        return TuiDocExampleGetTabsPipe;
+    }());
+
+    var TuiDocExampleModule = /** @class */ (function () {
+        function TuiDocExampleModule() {
+        }
+        TuiDocExampleModule = __decorate([
+            core.NgModule({
+                imports: [
+                    common.CommonModule,
+                    clipboard.ClipboardModule,
+                    kit.TuiTabsModule,
+                    core$1.TuiButtonModule,
+                    TuiDocCopyModule,
+                    TuiDocCodeModule,
+                    ngPolymorpheus.PolymorpheusModule,
+                ],
+                declarations: [TuiDocExampleComponent, TuiDocExampleGetTabsPipe],
+                exports: [TuiDocExampleComponent, TuiDocExampleGetTabsPipe],
+            })
+        ], TuiDocExampleModule);
+        return TuiDocExampleModule;
+    }());
+
+    // @dynamic
+    var TuiDocMainComponent = /** @class */ (function () {
+        function TuiDocMainComponent(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 rxjs.Subject();
+        }
+        TuiDocMainComponent_1 = TuiDocMainComponent;
+        Object.defineProperty(TuiDocMainComponent.prototype, "mode", {
             get: function () {
-                return this.isAPI ? this.texts[0] : this.texts[1];
+                return this.night ? 'onDark' : null;
             },
             enumerable: true,
             configurable: true
         });
-        TuiDocDocumentationComponent.prototype.getColor = function (color) {
-            if (color.length === 4) {
-                return color
-                    .split('')
-                    .reduce(function (result, current) { return __spread(result, [current, current]); }, [])
-                    .join('')
-                    .replace('#', '');
-            }
-            if (color.startsWith('#')) {
-                return color;
-            }
-            if (color === 'transparent') {
-                return '#000000';
-            }
-            var parsed = color
-                .replace('rgb(', '')
-                .replace('rgba(', '')
-                .replace(')', '')
-                .replace(' ', '')
-                .split(',')
-                .map(function (v) { return Number.parseInt(v, 10); });
-            return rgbToHex.apply(void 0, __spread(parsed));
-        };
-        TuiDocDocumentationComponent.prototype.getOpacity = function (color) {
-            if (color.startsWith('#') || color.startsWith('rgb(')) {
-                return 100;
-            }
-            if (color === 'transparent') {
-                return 0;
-            }
-            var lastComma = color.lastIndexOf(',');
-            var parsed = color
-                .substr(lastComma)
-                .replace(')', '')
-                .replace(' ', '')
-                .replace(',', '');
-            return Math.round(Number.parseFloat(parsed) * 100);
-        };
-        TuiDocDocumentationComponent.prototype.onColorChange = function (connector, color) {
-            var opacity = this.getOpacity(connector.documentationPropertyValue || '');
-            if (opacity === 100) {
-                connector.onValueChange(color);
-                return;
-            }
-            var rgb = hexToRgb(color).join(', ');
-            var result = "rgba(" + rgb + ", " + opacity / 100 + ")";
-            connector.onValueChange(result);
-        };
-        TuiDocDocumentationComponent.prototype.onOpacityChange = function (connector, opacity) {
-            var hex = this.getColor(connector.documentationPropertyValue || '');
-            var rgb = hexToRgb(hex);
-            var result = "rgba(" + rgb + ", " + opacity / 100 + ")";
-            connector.onValueChange(result);
-        };
-        TuiDocDocumentationComponent.prototype.stripOptional = function (name) {
-            return name.replace('?', '');
-        };
-        TuiDocDocumentationComponent.prototype.isOptional = function (name) {
-            return name.includes('?');
-        };
-        TuiDocDocumentationComponent.prototype.showCleaner = function (type) {
-            return type.includes('null');
-        };
-        TuiDocDocumentationComponent.prototype.showContentTooltip = function (type) {
-            return type.includes('PolymorpheusContent');
-        };
-        TuiDocDocumentationComponent.prototype.inspectAny = function (data) {
-            return inspectAny(data, 2);
+        TuiDocMainComponent.prototype.onMode = function (night) {
+            this.night = night;
+            this.change$.next();
+            this.storage.setItem('night', String(night));
         };
-        TuiDocDocumentationComponent.ctorParameters = function () { return [
-            { type: core.ChangeDetectorRef, decorators: [{ type: core.Inject, args: [core.ChangeDetectorRef,] }] },
-            { type: Array, decorators: [{ type: core.Inject, args: [TUI_DOC_DOCUMENTATION_TEXTS,] }] }
+        var TuiDocMainComponent_1;
+        TuiDocMainComponent.ctorParameters = function () { return [
+            { type: Storage, decorators: [{ type: core.Inject, args: [common$1.LOCAL_STORAGE,] }] },
+            { type: Window, decorators: [{ type: core.Inject, args: [common$1.WINDOW,] }] }
         ]; };
-        __decorate([
-            core.Input()
-        ], TuiDocDocumentationComponent.prototype, "heading", void 0);
-        __decorate([
-            core.Input()
-        ], TuiDocDocumentationComponent.prototype, "showValues", void 0);
-        __decorate([
-            core.Input()
-        ], TuiDocDocumentationComponent.prototype, "isAPI", void 0);
-        __decorate([
-            core.ContentChildren(TuiDocDocumentationPropertyConnectorDirective)
-        ], TuiDocDocumentationComponent.prototype, "propertiesConnectors", void 0);
-        TuiDocDocumentationComponent = __decorate([
+        TuiDocMainComponent = TuiDocMainComponent_1 = __decorate([
             core.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                class=\"t-property t-cell\"\n                automation-id=\"tui-documentation__property-name\"\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                >deprecated</span\n            >\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                            ><code>ng-polymorpheus</code></a\n                        >\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: core.ChangeDetectionStrategy.OnPush,
-                animations: [
-                    animations.trigger('emitEvent', [
-                        animations.transition(':increment', [animations.style({ opacity: 1 }), animations.animate('500ms ease-in')]),
-                    ]),
+                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: core.ViewEncapsulation.None,
+                providers: [
+                    {
+                        provide: core$1.TuiModeDirective,
+                        useExisting: core.forwardRef(function () { return TuiDocMainComponent_1; }),
+                    },
+                    cdk.TuiSwipeService,
                 ],
-                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}"]
+                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, core.Inject(core.ChangeDetectorRef)),
-            __param(1, core.Inject(TUI_DOC_DOCUMENTATION_TEXTS))
-        ], TuiDocDocumentationComponent);
-        return TuiDocDocumentationComponent;
+            __param(0, core.Inject(common$1.LOCAL_STORAGE)),
+            __param(1, core.Inject(common$1.WINDOW))
+        ], TuiDocMainComponent);
+        return TuiDocMainComponent;
     }());
 
-    var TuiInputOpacityDirective = /** @class */ (function () {
-        function TuiInputOpacityDirective(renderer, tuiFocusableComponent) {
-            this.renderer = renderer;
-            this.tuiFocusableComponent = tuiFocusableComponent;
+    var ScrollIntoViewDirective = /** @class */ (function () {
+        function ScrollIntoViewDirective(destroy$, _a) {
+            var nativeElement = _a.nativeElement;
+            this.scroll$ = new rxjs.Subject();
+            this.scroll$
+                .pipe(operators.debounceTime(750), operators.filter(function (shallWe) { return shallWe && !!cdk.getElementObscurers(nativeElement); }), operators.takeUntil(destroy$))
+                .subscribe(function () {
+                nativeElement.scrollIntoView();
+            });
         }
-        Object.defineProperty(TuiInputOpacityDirective.prototype, "tuiInputOpacity", {
-            set: function (opacity) {
-                var nativeFocusableElement = this.tuiFocusableComponent.nativeFocusableElement;
-                if (nativeFocusableElement) {
-                    this.renderer.setStyle(nativeFocusableElement, 'opacity', opacity / 100);
-                }
+        Object.defineProperty(ScrollIntoViewDirective.prototype, "scrollIntoView", {
+            set: function (shallWe) {
+                this.scroll$.next(shallWe);
             },
             enumerable: true,
             configurable: true
         });
-        TuiInputOpacityDirective.ctorParameters = function () { return [
-            { type: core.Renderer2, decorators: [{ type: core.Inject, args: [core.Renderer2,] }] },
-            { type: undefined, decorators: [{ type: core.Inject, args: [cdk.TUI_FOCUSABLE_ITEM_ACCESSOR,] }] }
-        ]; };
-        __decorate([
-            core.Input()
-        ], TuiInputOpacityDirective.prototype, "tuiInputOpacity", null);
-        TuiInputOpacityDirective = __decorate([
-            core.Directive({
-                selector: '[tuiInputOpacity]',
-            }),
-            __param(0, core.Inject(core.Renderer2)),
-            __param(1, core.Inject(cdk.TUI_FOCUSABLE_ITEM_ACCESSOR))
-        ], TuiInputOpacityDirective);
-        return TuiInputOpacityDirective;
-    }());
-
-    var TuiInputOpacityModule = /** @class */ (function () {
-        function TuiInputOpacityModule() {
-        }
-        TuiInputOpacityModule = __decorate([
-            core.NgModule({
-                declarations: [TuiInputOpacityDirective],
-                exports: [TuiInputOpacityDirective],
-            })
-        ], TuiInputOpacityModule);
-        return TuiInputOpacityModule;
-    }());
-
-    var TuiDocDocumentationModule = /** @class */ (function () {
-        function TuiDocDocumentationModule() {
-        }
-        TuiDocDocumentationModule = __decorate([
-            core.NgModule({
-                imports: [
-                    common.CommonModule,
-                    forms.FormsModule,
-                    router.RouterModule,
-                    kit.TuiBadgeModule,
-                    kit.TuiSelectModule,
-                    kit.TuiToggleModule,
-                    core$1.TuiTooltipModule,
-                    core$1.TuiLinkModule,
-                    kit.TuiInputCountModule,
-                    core$1.TuiModeModule,
-                    core$1.TuiGroupModule,
-                    TuiInputOpacityModule,
-                    core$1.TuiPrimitiveTextfieldModule,
-                    core$1.TuiTextfieldControllerModule,
-                    core$1.TuiHintControllerModule,
-                    core$1.TuiDropdownControllerModule,
-                    core$1.TuiDataListModule,
-                    kit.TuiDataListWrapperModule,
-                    core$1.TuiNotificationModule,
-                ],
-                declarations: [
-                    TuiDocDocumentationComponent,
-                    TuiDocDocumentationPropertyConnectorDirective,
-                ],
-                exports: [
-                    TuiDocDocumentationComponent,
-                    TuiDocDocumentationPropertyConnectorDirective,
-                ],
+        ScrollIntoViewDirective.ctorParameters = function () { return [
+            { type: cdk.TuiDestroyService, decorators: [{ type: core.Inject, args: [cdk.TuiDestroyService,] }] },
+            { type: core.ElementRef, decorators: [{ type: core.Inject, args: [core.ElementRef,] }] }
+        ]; };
+        __decorate([
+            core.Input()
+        ], ScrollIntoViewDirective.prototype, "scrollIntoView", null);
+        ScrollIntoViewDirective = __decorate([
+            core.Directive({
+                selector: '[scrollIntoView]',
+                providers: [cdk.TuiDestroyService],
+            }),
+            __param(0, core.Inject(cdk.TuiDestroyService)),
+            __param(1, core.Inject(core.ElementRef))
+        ], ScrollIntoViewDirective);
+        return ScrollIntoViewDirective;
+    }());
+
+    var ScrollIntoViewModule = /** @class */ (function () {
+        function ScrollIntoViewModule() {
+        }
+        ScrollIntoViewModule = __decorate([
+            core.NgModule({
+                declarations: [ScrollIntoViewDirective],
+                exports: [ScrollIntoViewDirective],
             })
-        ], TuiDocDocumentationModule);
-        return TuiDocDocumentationModule;
+        ], ScrollIntoViewModule);
+        return ScrollIntoViewModule;
     }());
 
-    var TUI_DOC_CODE_EDITOR = new core.InjectionToken('Contains service for opening online IDE e.g. Stackblitz');
+    var 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) {
+        var newStr = '';
+        for (var i = 0; i < string.length; i++) {
+            newStr += string.charAt(i) in MAP ? MAP[string.charAt(i)] : string.charAt(i);
+        }
+        return newStr;
+    }
 
-    var TUI_DOC_EXAMPLE_CONTENT_PROCESSOR = new core.InjectionToken('Processes content in example', {
-        factory: function () { return cdk.identity; },
+    var TUI_DOC_PAGES = new core.InjectionToken('Documentation pages', {
+        factory: function () { return []; },
     });
 
-    // Ambient type cannot be used without dynamic https://github.com/angular/angular/issues/23395
+    var TUI_DOC_TITLE = new core.InjectionToken('Page title', {
+        factory: function () { return ''; },
+    });
+
+    var NAVIGATION_TITLE = new core.InjectionToken('Page title');
+    var NAVIGATION_LABELS = new core.InjectionToken('Navigation sections labels for search');
+    var NAVIGATION_ITEMS = new core.InjectionToken('Navigation pages');
+    var NAVIGATION_PROVIDERS = [
+        cdk.TuiDestroyService,
+        {
+            provide: NAVIGATION_TITLE,
+            deps: [router.Router, router.ActivatedRoute, TUI_DOC_TITLE, cdk.TuiDestroyService],
+            useFactory: titleProviderFactory,
+        },
+        {
+            provide: NAVIGATION_LABELS,
+            deps: [TUI_DOC_PAGES],
+            useFactory: labelsProviderFactory,
+        },
+        {
+            provide: NAVIGATION_ITEMS,
+            deps: [TUI_DOC_PAGES],
+            useFactory: itemsProviderFactory,
+        },
+    ];
+    function titleProviderFactory(router$1, activatedRoute, titlePrefix, destroy$) {
+        return router$1.events.pipe(operators.filter(function (event) { return event instanceof router.NavigationEnd; }), operators.map(function () { return activatedRoute.firstChild; }), operators.filter(cdk.isPresent), operators.mergeMap(function (_a) {
+            var data = _a.data;
+            return data;
+        }), operators.map(function (_a) {
+            var title = _a.title;
+            return titlePrefix + title;
+        }), operators.takeUntil(destroy$));
+    }
+    function labelsProviderFactory(pages) {
+        return pages
+            .map(function (_a) {
+            var section = _a.section;
+            return section;
+        })
+            .filter(cdk.isPresent)
+            .filter(function (item, index, array) { return array.indexOf(item) === index; });
+    }
+    function itemsProviderFactory(pages) {
+        var labels = labelsProviderFactory(pages);
+        return __spread(labels.map(function (label) { return pages.filter(function (_a) {
+            var section = _a.section;
+            return section === label;
+        }); }), [
+            pages.filter(function (page) { return !page.section; }),
+        ]);
+    }
+
+    var SCROLL_INTO_VIEW_DELAY = 200;
     // @dynamic
-    var TuiDocExampleComponent = /** @class */ (function () {
-        function TuiDocExampleComponent(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.heading = '';
-            this.description = '';
-            this.componentName = this.location.pathname.slice(1);
-            this.activeItemIndex = 0;
-            this.processedContent = {};
-            this.defaultTab = this.texts[0];
-            this.copy$ = this.copyTexts$.pipe(operators.map(function (_a) {
-                var _b = __read(_a, 1), copy = _b[0];
-                return copy;
-            }));
+    var TuiDocNavigationComponent = /** @class */ (function () {
+        function TuiDocNavigationComponent(changeDetectorRef, titleService, title$, documentRef, mode, sidebar, labels, items, searchText, router, activatedRoute) {
+            var _this = this;
+            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.menuOpen = false;
+            this.search = '';
+            this.open = false;
+            this.openPagesArr = [];
+            this.openPagesGroupsArr = [];
+            this.active = '';
+            this.mode$ = this.mode.change$.pipe(operators.startWith(null), operators.map(function () { return _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(function (title) {
+                changeDetectorRef.markForCheck();
+                titleService.setTitle(title);
+                _this.openActivePageGroup();
+                _this.handleAnchorLink(_this.activatedRoute.snapshot.fragment);
+            });
         }
-        Object.defineProperty(TuiDocExampleComponent.prototype, "content", {
-            set: function (content) {
-                this.processedContent = this.processContent(content);
-            },
-            enumerable: true,
-            configurable: true
-        });
-        Object.defineProperty(TuiDocExampleComponent.prototype, "activeItem", {
-            get: function () {
-                return this.tabs[this.activeItemIndex];
-            },
-            enumerable: true,
-            configurable: true
-        });
-        Object.defineProperty(TuiDocExampleComponent.prototype, "tabs", {
+        Object.defineProperty(TuiDocNavigationComponent.prototype, "canOpen", {
             get: function () {
-                return this.getTabs(this.processedContent);
+                return this.search.length > 2;
             },
             enumerable: true,
             configurable: true
         });
-        Object.defineProperty(TuiDocExampleComponent.prototype, "code", {
+        Object.defineProperty(TuiDocNavigationComponent.prototype, "filteredItems", {
             get: function () {
-                var code = this.processedContent[this.activeItem];
-                return code ? code.trim() : '';
+                return this.filterItems(this.flattenSubPages(this.items), this.search);
             },
             enumerable: true,
             configurable: true
         });
-        Object.defineProperty(TuiDocExampleComponent.prototype, "isDefaultItem", {
+        Object.defineProperty(TuiDocNavigationComponent.prototype, "itemsWithoutSections", {
             get: function () {
-                return this.activeItem === this.defaultTab;
+                return this.items[this.items.length - 1];
             },
             enumerable: true,
             configurable: true
         });
-        TuiDocExampleComponent.prototype.copyExampleLink = function () {
-            var hashPosition = this.location.href.indexOf('#');
-            var currentUrl = hashPosition > -1
-                ? this.location.href.substr(0, hashPosition)
-                : this.location.href;
-            var url = currentUrl + "#" + this.id;
-            this.clipboard.copy(url);
-            this.notifications
-                .show(this.texts[1], {
-                label: this.texts[2],
-                status: "success" /* Success */,
-            })
-                .subscribe();
+        TuiDocNavigationComponent.prototype.isActive = function (route) {
+            return route === this.active;
+        };
+        TuiDocNavigationComponent.prototype.onGroupClick = function (index) {
+            this.openPagesGroupsArr[index] = !this.openPagesGroupsArr[index];
+        };
+        TuiDocNavigationComponent.prototype.closeMenu = function () {
+            this.menuOpen = false;
+        };
+        TuiDocNavigationComponent.prototype.onSearchChange = function (search) {
+            this.search = search;
+            this.open = this.canOpen;
+        };
+        TuiDocNavigationComponent.prototype.onClick = function () {
+            this.open = false;
+            this.menuOpen = false;
+            this.search = '';
+            this.openActivePageGroup();
+        };
+        TuiDocNavigationComponent.prototype.filterItems = function (items, search) {
+            return items.map(function (section) {
+                return cdk.uniqBy(section.filter(function (_a) {
+                    var title = _a.title, _b = _a.keywords, keywords = _b === void 0 ? '' : _b;
+                    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');
+            });
+        };
+        TuiDocNavigationComponent.prototype.flattenSubPages = function (items) {
+            return items.reduce(function (array, item) { return __spread(array, [
+                item.reduce(function (pages, page) {
+                    return 'subPages' in page
+                        ? __spread(pages, page.subPages) : __spread(pages, [page]);
+                }, []),
+            ]); }, []);
+        };
+        TuiDocNavigationComponent.prototype.isActiveRoute = function (route) {
+            return this.router.isActive(route, false);
+        };
+        TuiDocNavigationComponent.prototype.handleAnchorLink = function (hash) {
+            var _this = this;
+            setTimeout(function () {
+                _this.navigateToAnchorLink(hash);
+            }, SCROLL_INTO_VIEW_DELAY);
+        };
+        TuiDocNavigationComponent.prototype.openActivePageGroup = function () {
+            var _this = this;
+            this.items.forEach(function (pages, pagesIndex) {
+                pages.forEach(function (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(function (subPage) {
+                            if (_this.isActiveRoute(subPage.route)) {
+                                _this.openPagesArr[pagesIndex] = true;
+                                _this.openPagesGroupsArr[pagesIndex * 100 + pageIndex] = true;
+                                _this.active = subPage.route;
+                            }
+                        });
+                    }
+                });
+            });
         };
-        TuiDocExampleComponent.prototype.getTabs = function (content) {
-            return __spread([this.defaultTab], Object.keys(content));
+        TuiDocNavigationComponent.prototype.navigateToAnchorLink = function (fragment) {
+            var 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 = function () { return [
-            { type: String, decorators: [{ type: core.Attribute, args: ['id',] }] },
-            { type: clipboard.Clipboard, decorators: [{ type: core.Inject, args: [clipboard.Clipboard,] }] },
-            { type: core$1.TuiNotificationsService, decorators: [{ type: core.Inject, args: [core$1.TuiNotificationsService,] }] },
-            { type: Location, decorators: [{ type: core.Inject, args: [common$1.LOCATION,] }] },
-            { type: rxjs.Observable, decorators: [{ type: core.Inject, args: [kit.TUI_COPY_TEXTS,] }] },
-            { type: Array, decorators: [{ type: core.Inject, args: [TUI_DOC_EXAMPLE_TEXTS,] }] },
-            { type: undefined, decorators: [{ type: core.Optional }, { type: core.Inject, args: [TUI_DOC_CODE_EDITOR,] }] },
-            { type: undefined, decorators: [{ type: core.Inject, args: [TUI_DOC_EXAMPLE_CONTENT_PROCESSOR,] }] }
+        TuiDocNavigationComponent.ctorParameters = function () { return [
+            { type: core.ChangeDetectorRef, decorators: [{ type: core.Inject, args: [core.ChangeDetectorRef,] }] },
+            { type: platformBrowser.Title, decorators: [{ type: core.Inject, args: [platformBrowser.Title,] }] },
+            { type: rxjs.Observable, decorators: [{ type: core.Inject, args: [NAVIGATION_TITLE,] }] },
+            { type: Document, decorators: [{ type: core.Inject, args: [common.DOCUMENT,] }] },
+            { type: core$1.TuiModeDirective, decorators: [{ type: core.Inject, args: [core$1.TuiModeDirective,] }] },
+            { type: undefined, decorators: [{ type: core.Optional }, { type: core.Inject, args: [addonMobile.TuiSidebarDirective,] }] },
+            { type: Array, decorators: [{ type: core.Inject, args: [NAVIGATION_LABELS,] }] },
+            { type: undefined, decorators: [{ type: core.Inject, args: [NAVIGATION_ITEMS,] }] },
+            { type: String, decorators: [{ type: core.Inject, args: [TUI_DOC_SEARCH_TEXT,] }] },
+            { type: router.Router, decorators: [{ type: core.Inject, args: [router.Router,] }] },
+            { type: router.ActivatedRoute, decorators: [{ type: core.Inject, args: [router.ActivatedRoute,] }] }
         ]; };
         __decorate([
-            core.Input()
-        ], TuiDocExampleComponent.prototype, "heading", void 0);
-        __decorate([
-            core.Input()
-        ], TuiDocExampleComponent.prototype, "description", void 0);
-        __decorate([
-            core.Input()
-        ], TuiDocExampleComponent.prototype, "content", null);
+            core.HostBinding('class._open')
+        ], TuiDocNavigationComponent.prototype, "menuOpen", void 0);
         __decorate([
-            core.Input()
-        ], TuiDocExampleComponent.prototype, "componentName", void 0);
+            cdk.tuiPure
+        ], TuiDocNavigationComponent.prototype, "filterItems", null);
         __decorate([
             cdk.tuiPure
-        ], TuiDocExampleComponent.prototype, "getTabs", null);
-        TuiDocExampleComponent = __decorate([
+        ], TuiDocNavigationComponent.prototype, "flattenSubPages", null);
+        TuiDocNavigationComponent = __decorate([
             core.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        class=\"t-link-icon\"\n        icon=\"tuiIconLinkLarge\"\n        appearance=\"icon\"\n        [title]=\"copy$ | async\"\n        (click)=\"copyExampleLink()\"\n    ></button>\n</h3>\n<h4\n    *ngIf=\"description\"\n    class=\"t-description\"\n    polymorpheus-outlet\n    [content]=\"description\"\n></h4>\n<div class=\"t-example\">\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 || '',  processedContent)\"\n        >\n            Edit on {{codeEditor.name}}\n        </button>\n    </div>\n    <ng-container [ngSwitch]=\"activeItem\">\n        <div\n            *ngIf=\"isDefaultItem; else codeTab\"\n            class=\"t-demo\"\n            automation-id=\"tui-doc-example\"\n        >\n            <ng-content></ng-content>\n        </div>\n        <ng-template #codeTab>\n            <tui-doc-copy\n                class=\"t-copy-code\"\n                [cdkCopyToClipboard]=\"code\"\n            ></tui-doc-copy>\n            <tui-doc-code [code]=\"code\"></tui-doc-code>\n        </ng-template>\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: core.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, core.Attribute('id')),
-            __param(1, core.Inject(clipboard.Clipboard)),
-            __param(2, core.Inject(core$1.TuiNotificationsService)),
-            __param(3, core.Inject(common$1.LOCATION)),
-            __param(4, core.Inject(kit.TUI_COPY_TEXTS)),
-            __param(5, core.Inject(TUI_DOC_EXAMPLE_TEXTS)),
-            __param(6, core.Optional()),
-            __param(6, core.Inject(TUI_DOC_CODE_EDITOR)),
-            __param(7, core.Inject(TUI_DOC_EXAMPLE_CONTENT_PROCESSOR))
-        ], TuiDocExampleComponent);
-        return TuiDocExampleComponent;
+            __param(0, core.Inject(core.ChangeDetectorRef)),
+            __param(1, core.Inject(platformBrowser.Title)),
+            __param(2, core.Inject(NAVIGATION_TITLE)),
+            __param(3, core.Inject(common.DOCUMENT)),
+            __param(4, core.Inject(core$1.TuiModeDirective)),
+            __param(5, core.Optional()),
+            __param(5, core.Inject(addonMobile.TuiSidebarDirective)),
+            __param(6, core.Inject(NAVIGATION_LABELS)),
+            __param(7, core.Inject(NAVIGATION_ITEMS)),
+            __param(8, core.Inject(TUI_DOC_SEARCH_TEXT)),
+            __param(9, core.Inject(router.Router)),
+            __param(10, core.Inject(router.ActivatedRoute))
+        ], TuiDocNavigationComponent);
+        return TuiDocNavigationComponent;
     }());
 
-    var TuiDocExampleModule = /** @class */ (function () {
-        function TuiDocExampleModule() {
+    var TuiDocNavigationModule = /** @class */ (function () {
+        function TuiDocNavigationModule() {
         }
-        TuiDocExampleModule = __decorate([
+        TuiDocNavigationModule = __decorate([
             core.NgModule({
                 imports: [
                     common.CommonModule,
-                    clipboard.ClipboardModule,
-                    kit.TuiTabsModule,
+                    forms.FormsModule,
+                    router.RouterModule,
+                    ScrollIntoViewModule,
                     core$1.TuiButtonModule,
-                    TuiDocCopyModule,
-                    TuiDocCodeModule,
-                    ngPolymorpheus.PolymorpheusModule,
+                    core$1.TuiPrimitiveTextfieldModule,
+                    core$1.TuiTextfieldControllerModule,
+                    cdk.TuiActiveZoneModule,
+                    cdk.TuiLetModule,
+                    core$1.TuiModeModule,
+                    core$1.TuiLinkModule,
+                    core$1.TuiExpandModule,
+                    core$1.TuiHostedDropdownModule,
+                    core$1.TuiDropdownControllerModule,
+                    kit.TuiAccordionModule,
+                    core$1.TuiScrollbarModule,
+                    core$1.TuiSvgModule,
+                    core$1.TuiDataListModule,
+                    cdk.TuiAutoFocusModule,
                 ],
-                declarations: [TuiDocExampleComponent],
-                exports: [TuiDocExampleComponent],
+                declarations: [TuiDocNavigationComponent],
+                exports: [TuiDocNavigationComponent],
             })
-        ], TuiDocExampleModule);
-        return TuiDocExampleModule;
-    }());
-
-    // @dynamic
-    var TuiDocMainComponent = /** @class */ (function () {
-        function TuiDocMainComponent(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 rxjs.Subject();
-        }
-        TuiDocMainComponent_1 = TuiDocMainComponent;
-        Object.defineProperty(TuiDocMainComponent.prototype, "mode", {
-            get: function () {
-                return this.night ? 'onDark' : null;
-            },
-            enumerable: true,
-            configurable: true
-        });
-        TuiDocMainComponent.prototype.onMode = function (night) {
-            this.night = night;
-            this.change$.next();
-            this.storage.setItem('night', String(night));
-        };
-        var TuiDocMainComponent_1;
-        TuiDocMainComponent.ctorParameters = function () { return [
-            { type: Storage, decorators: [{ type: core.Inject, args: [common$1.LOCAL_STORAGE,] }] },
-            { type: Window, decorators: [{ type: core.Inject, args: [common$1.WINDOW,] }] }
-        ]; };
-        TuiDocMainComponent = TuiDocMainComponent_1 = __decorate([
-            core.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: core.ViewEncapsulation.None,
-                providers: [
-                    {
-                        provide: core$1.TuiModeDirective,
-                        useExisting: core.forwardRef(function () { return TuiDocMainComponent_1; }),
-                    },
-                    cdk.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, core.Inject(common$1.LOCAL_STORAGE)),
-            __param(1, core.Inject(common$1.WINDOW))
-        ], TuiDocMainComponent);
-        return TuiDocMainComponent;
+        ], TuiDocNavigationModule);
+        return TuiDocNavigationModule;
     }());
 
     var TUI_DOC_LOGO = new core.InjectionToken('Main logo', {
@@ -1556,7 +1609,7 @@
         TuiDocHeaderComponent = __decorate([
             core.Component({
                 selector: 'header[tuiDocHeader]',
-                template: "<button\n    tuiIconButton\n    class=\"menu\"\n    icon=\"tuiIconMenuLarge\"\n    appearance=\"icon\"\n    [title]=\"menu\"\n    (click)=\"onClick()\"\n    (tuiActiveZoneChange)=\"onActiveZone($event)\"\n>\n    <tui-doc-navigation\n        *tuiSidebar=\"open$ | async\"\n        class=\"navigation\"\n    ></tui-doc-navigation>\n</button>\n<div polymorpheus-outlet class=\"logo tui-text_h5\" [content]=\"logo\">\n    <ng-template let-src>\n        <img class=\"img\" alt=\"Logo\" [src]=\"src\" />\n    </ng-template>\n</div>\n<ng-content></ng-content>\n",
+                template: "<button\n    tuiIconButton\n    icon=\"tuiIconMenuLarge\"\n    appearance=\"icon\"\n    class=\"menu\"\n    [title]=\"menu\"\n    (click)=\"onClick()\"\n    (tuiActiveZoneChange)=\"onActiveZone($event)\"\n>\n    <tui-doc-navigation\n        *tuiSidebar=\"open$ | async\"\n        class=\"navigation\"\n    ></tui-doc-navigation>\n</button>\n<div polymorpheus-outlet class=\"logo tui-text_h5\" [content]=\"logo\">\n    <ng-template let-src>\n        <img alt=\"Logo\" class=\"img\" [src]=\"src\" />\n    </ng-template>\n</div>\n<ng-content></ng-content>\n",
                 changeDetection: core.ChangeDetectionStrategy.OnPush,
                 styles: [":host{box-shadow:0 .125rem 1rem rgba(0,0,0,.08);position:fixed;top:0;left:0;right:0;z-index:1;display:flex;height:3.9375rem;align-items:center;padding:0 1.25rem;background:var(--tui-base-01);border-bottom:1px solid var(--tui-base-03)}.logo{margin-right:auto}.img{display:block}.menu{margin-left:-1.25rem}@media screen and (min-width:48em){.menu{display:none}}.navigation{min-height:100%}"]
             }),
@@ -1616,26 +1669,6 @@
         factory: function () { return []; },
     });
 
-    var TuiDocPageTabConnectorDirective = /** @class */ (function () {
-        function TuiDocPageTabConnectorDirective(template) {
-            this.template = template;
-        }
-        TuiDocPageTabConnectorDirective.ctorParameters = function () { return [
-            { type: core.TemplateRef, decorators: [{ type: core.Inject, args: [core.TemplateRef,] }] }
-        ]; };
-        __decorate([
-            core.Input(),
-            cdk.tuiDefaultProp()
-        ], TuiDocPageTabConnectorDirective.prototype, "pageTab", void 0);
-        TuiDocPageTabConnectorDirective = __decorate([
-            core.Directive({
-                selector: '[pageTab]',
-            }),
-            __param(0, core.Inject(core.TemplateRef))
-        ], TuiDocPageTabConnectorDirective);
-        return TuiDocPageTabConnectorDirective;
-    }());
-
     var TUI_DOC_SEE_ALSO = new core.InjectionToken('Array of arrays of related pages', {
         factory: function () { return []; },
     });
@@ -1658,6 +1691,26 @@
         return Array.from(seeAlsoSet);
     }
 
+    var TuiDocPageTabConnectorDirective = /** @class */ (function () {
+        function TuiDocPageTabConnectorDirective(template) {
+            this.template = template;
+        }
+        TuiDocPageTabConnectorDirective.ctorParameters = function () { return [
+            { type: core.TemplateRef, decorators: [{ type: core.Inject, args: [core.TemplateRef,] }] }
+        ]; };
+        __decorate([
+            core.Input(),
+            cdk.tuiDefaultProp()
+        ], TuiDocPageTabConnectorDirective.prototype, "pageTab", void 0);
+        TuiDocPageTabConnectorDirective = __decorate([
+            core.Directive({
+                selector: '[pageTab]',
+            }),
+            __param(0, core.Inject(core.TemplateRef))
+        ], TuiDocPageTabConnectorDirective);
+        return TuiDocPageTabConnectorDirective;
+    }());
+
     // Ambient type cannot be used without dynamic https://github.com/angular/angular/issues/23395
     // @dynamic
     var TuiDocPageComponent = /** @class */ (function () {
@@ -1669,8 +1722,8 @@
             this.package = '';
             this.type = '';
             this.path = '';
-            this.activeItemIndex = NaN;
             this.tabConnectors = cdk.EMPTY_QUERY;
+            this.activeItemIndex = NaN;
         }
         Object.defineProperty(TuiDocPageComponent.prototype, "showSeeAlso", {
             get: function () {
@@ -1706,7 +1759,7 @@
         TuiDocPageComponent = __decorate([
             core.Component({
                 selector: 'tui-doc-page',
-                template: "<header class=\"t-header\">\n    <h1 class=\"t-title\">\n        {{header}}\n        <tui-tag\n            *ngIf=\"deprecated !== null\"\n            class=\"t-tag t-tag_deprecated\"\n            value=\"deprecated\"\n            status=\"custom\"\n        ></tui-tag>\n        <tui-tag\n            *ngIf=\"package\"\n            class=\"t-tag t-tag_package\"\n            status=\"custom\"\n            [value]=\"package\"\n            [autoColor]=\"true\"\n        ></tui-tag>\n    </h1>\n    <tui-tabs-with-more\n        *ngIf=\"tabConnectors.length\"\n        class=\"t-tabs\"\n        [(activeItemIndex)]=\"activeItemIndex\"\n    >\n        <ng-container\n            *ngFor=\"let tab of tabConnectors; first as first; index as index\"\n        >\n            <ng-container *ngIf=\"first; else dynamicTab\">\n                <a\n                    *tuiTab\n                    tuiTab\n                    routerLink=\"./\"\n                    routerLinkActive\n                    [routerLinkActiveOptions]=\"{ exact: true }\"\n                >\n                    {{tab.pageTab || defaultTabs[index]}}\n                </a>\n            </ng-container>\n            <ng-template #dynamicTab>\n                <a\n                    *tuiTab\n                    tuiTab\n                    routerLinkActive\n                    [routerLink]=\"getRouterLink(tab.pageTab || defaultTabs[index])\"\n                >\n                    {{tab.pageTab || defaultTabs[index]}}\n                </a>\n            </ng-template>\n        </ng-container>\n    </tui-tabs-with-more>\n    <tui-doc-source-code\n        class=\"t-source-code\"\n        [header]=\"header\"\n        [package]=\"package\"\n        [type]=\"type\"\n        [path]=\"path\"\n    ></tui-doc-source-code>\n</header>\n<div class=\"t-content\">\n    <ng-content></ng-content>\n    <tui-doc-see-also\n        *ngIf=\"showSeeAlso\"\n        class=\"t-see-also\"\n        [seeAlso]=\"seeAlso\"\n    ></tui-doc-see-also>\n    <ng-container *ngFor=\"let tab of tabConnectors; index as index\">\n        <ng-container *ngIf=\"index === activeItemIndex\">\n            <ng-container *ngTemplateOutlet=\"tab.template\"></ng-container>\n        </ng-container>\n    </ng-container>\n</div>\n",
+                template: "<header class=\"t-header\">\n    <h1 class=\"t-title\">\n        {{ header }}\n        <tui-tag\n            *ngIf=\"deprecated !== null\"\n            value=\"deprecated\"\n            status=\"custom\"\n            class=\"t-tag t-tag_deprecated\"\n        ></tui-tag>\n        <tui-tag\n            *ngIf=\"package\"\n            status=\"custom\"\n            class=\"t-tag t-tag_package\"\n            [value]=\"package\"\n            [autoColor]=\"true\"\n        ></tui-tag>\n    </h1>\n    <tui-tabs-with-more\n        *ngIf=\"tabConnectors.length\"\n        class=\"t-tabs\"\n        [(activeItemIndex)]=\"activeItemIndex\"\n    >\n        <ng-container\n            *ngFor=\"let tab of tabConnectors; first as first; index as index\"\n        >\n            <ng-container *ngIf=\"first; else dynamicTab\">\n                <a\n                    *tuiTab\n                    tuiTab\n                    routerLink=\"./\"\n                    routerLinkActive\n                    [routerLinkActiveOptions]=\"{exact: true}\"\n                >\n                    {{ tab.pageTab || defaultTabs[index] }}\n                </a>\n            </ng-container>\n            <ng-template #dynamicTab>\n                <a\n                    *tuiTab\n                    tuiTab\n                    routerLinkActive\n                    [routerLink]=\"getRouterLink(tab.pageTab || defaultTabs[index])\"\n                >\n                    {{ tab.pageTab || defaultTabs[index] }}\n                </a>\n            </ng-template>\n        </ng-container>\n    </tui-tabs-with-more>\n    <tui-doc-source-code\n        class=\"t-source-code\"\n        [header]=\"header\"\n        [package]=\"package\"\n        [type]=\"type\"\n        [path]=\"path\"\n    ></tui-doc-source-code>\n</header>\n<div class=\"t-content\">\n    <ng-content></ng-content>\n    <tui-doc-see-also\n        *ngIf=\"showSeeAlso\"\n        class=\"t-see-also\"\n        [seeAlso]=\"seeAlso\"\n    ></tui-doc-see-also>\n    <ng-container *ngFor=\"let tab of tabConnectors; index as index\">\n        <ng-container *ngIf=\"index === activeItemIndex\">\n            <ng-container *ngTemplateOutlet=\"tab.template\"></ng-container>\n        </ng-container>\n    </ng-container>\n</div>\n",
                 changeDetection: core.ChangeDetectionStrategy.OnPush,
                 providers: PAGE_PROVIDERS,
                 styles: [":host{display:flex;flex-direction:column;min-height:0;flex-basis:0;flex-grow:1}.t-header{display:flex;font:var(--tui-font-heading-3);flex-wrap:wrap;min-height:7.25rem;color:var(--tui-text-01);box-shadow:inset 0 -1px 0 0 var(--tui-base-03);padding:3.75rem 0 0;box-sizing:border-box;flex-shrink:0;margin:0 min(10vw,8.75rem)}@media screen and (max-width:47.9375em){.t-header{font:var(--tui-font-heading-4);min-height:4.5rem;padding:1.25rem 1.25rem 0;margin:0}}.t-title{min-width:100%;font-size:inherit;margin:0}.t-tag{vertical-align:middle;text-transform:uppercase;margin-right:.5rem}.t-tag_deprecated{background-color:var(--tui-error-fill)}.t-tag.t-tag_package{color:#000}.t-tabs{flex:1;margin:1.125rem .3125rem 0 0}@media screen and (max-width:47.9375em){.t-tabs{margin-top:.25rem}}.t-content{padding:2rem 0;margin:0 min(10vw,8.75rem)}@media screen and (max-width:47.9375em){.t-content{padding:2rem 1.25rem;margin:0}}.t-see-also{min-width:18.75rem;width:30%;float:right;margin-left:1.5rem}@media screen and (max-width:47.9375em){.t-see-also{float:none;width:100%;margin:0 0 1.5rem}}.t-source-code{align-self:flex-end;line-height:2.75rem}"]
@@ -1747,7 +1800,7 @@
         TuiDocSeeAlsoComponent = __decorate([
             core.Component({
                 selector: 'tui-doc-see-also',
-                template: "<h5 class=\"header\">{{text}}</h5>\n<ng-container *ngFor=\"let item of seeAlso; last as last\">\n    <a tuiLink [routerLink]=\"getRouterLink(item)\">{{item}}</a>\n    <ng-container *ngIf=\"!last\">, </ng-container>\n</ng-container>\n",
+                template: "<h5 class=\"header\">{{ text }}</h5>\n<ng-container *ngFor=\"let item of seeAlso; last as last\">\n    <a tuiLink [routerLink]=\"getRouterLink(item)\">{{ item }}</a>\n    <ng-container *ngIf=\"!last\">,</ng-container>\n</ng-container>\n",
                 changeDetection: core.ChangeDetectionStrategy.OnPush,
                 styles: [":host{display:block}.header{font-size:.6875rem;line-height:1rem;text-transform:uppercase;letter-spacing:.075em;color:var(--tui-text-02);margin:0 0 .5rem;white-space:nowrap}"]
             }),
@@ -1820,7 +1873,7 @@
         TuiDocSourceCodeComponent = __decorate([
             core.Component({
                 selector: 'tui-doc-source-code',
-                template: "<div\n    polymorpheus-outlet\n    *ngIf=\"!!sourceCode\"\n    [content]=\"sourceCode\"\n    [context]=\"pathOptions\"\n>\n    <ng-template let-link>\n        <a\n            *ngIf=\"link\"\n            tuiIconButton\n            type=\"button\"\n            icon=\"tuiIconCodeLarge\"\n            appearance=\"icon\"\n            target=\"_blank\"\n            size=\"s\"\n            [title]=\"text\"\n            [href]=\"link\"\n        ></a>\n    </ng-template>\n</div>\n",
+                template: "<div\n    *ngIf=\"!!sourceCode\"\n    polymorpheus-outlet\n    [content]=\"sourceCode\"\n    [context]=\"pathOptions\"\n>\n    <ng-template let-link>\n        <a\n            *ngIf=\"link\"\n            tuiIconButton\n            type=\"button\"\n            icon=\"tuiIconCodeLarge\"\n            appearance=\"icon\"\n            target=\"_blank\"\n            size=\"s\"\n            [title]=\"text\"\n            [href]=\"link\"\n        ></a>\n    </ng-template>\n</div>\n",
                 changeDetection: core.ChangeDetectionStrategy.OnPush
             }),
             __param(0, core.Inject(TUI_DOC_SOURCE_CODE)),
@@ -1903,6 +1956,23 @@
         },
     ];
 
+    var TuiAddonDocModule = /** @class */ (function () {
+        function TuiAddonDocModule() {
+        }
+        TuiAddonDocModule = __decorate([
+            core.NgModule({
+                exports: [
+                    TuiDocCodeModule,
+                    TuiDocDemoModule,
+                    TuiDocDocumentationModule,
+                    TuiDocPageModule,
+                    TuiDocExampleModule,
+                ],
+            })
+        ], TuiAddonDocModule);
+        return TuiAddonDocModule;
+    }());
+
     /**
      * Generates typical page routing structure
      */
@@ -1921,23 +1991,6 @@
         ];
     }
 
-    var TuiAddonDocModule = /** @class */ (function () {
-        function TuiAddonDocModule() {
-        }
-        TuiAddonDocModule = __decorate([
-            core.NgModule({
-                exports: [
-                    TuiDocCodeModule,
-                    TuiDocDemoModule,
-                    TuiDocDocumentationModule,
-                    TuiDocPageModule,
-                    TuiDocExampleModule,
-                ],
-            })
-        ], TuiAddonDocModule);
-        return TuiAddonDocModule;
-    }());
-
     exports.DEMO_TEXTS = DEMO_TEXTS;
     exports.DOC_TEXTS = DOC_TEXTS;
     exports.EXAMPLE_TEXTS = EXAMPLE_TEXTS;
@@ -1979,24 +2032,25 @@
     exports.TuiDocPageModule = TuiDocPageModule;
     exports.TuiDocPageTabConnectorDirective = TuiDocPageTabConnectorDirective;
     exports.generateRoutes = generateRoutes;
-    exports.ɵa = NAVIGATION_TITLE;
-    exports.ɵb = NAVIGATION_LABELS;
-    exports.ɵc = NAVIGATION_ITEMS;
-    exports.ɵd = NAVIGATION_PROVIDERS;
-    exports.ɵe = titleProviderFactory;
-    exports.ɵf = labelsProviderFactory;
-    exports.ɵg = itemsProviderFactory;
-    exports.ɵh = TuiInputOpacityModule;
-    exports.ɵi = TuiInputOpacityDirective;
-    exports.ɵj = TuiDocHeaderModule;
-    exports.ɵk = TuiDocHeaderComponent;
-    exports.ɵl = PAGE_SEE_ALSO;
-    exports.ɵm = PAGE_PROVIDERS;
-    exports.ɵn = seeAlsoProviderFactory;
-    exports.ɵo = TuiDocSeeAlsoModule;
-    exports.ɵp = TuiDocSeeAlsoComponent;
-    exports.ɵq = TuiDocSourceCodeModule;
-    exports.ɵr = TuiDocSourceCodeComponent;
+    exports.ɵa = TuiInputOpacityModule;
+    exports.ɵb = TuiInputOpacityDirective;
+    exports.ɵc = TuiDocExampleGetTabsPipe;
+    exports.ɵd = TuiDocHeaderModule;
+    exports.ɵe = NAVIGATION_TITLE;
+    exports.ɵf = NAVIGATION_LABELS;
+    exports.ɵg = NAVIGATION_ITEMS;
+    exports.ɵh = NAVIGATION_PROVIDERS;
+    exports.ɵi = titleProviderFactory;
+    exports.ɵj = labelsProviderFactory;
+    exports.ɵk = itemsProviderFactory;
+    exports.ɵl = TuiDocHeaderComponent;
+    exports.ɵm = PAGE_SEE_ALSO;
+    exports.ɵn = PAGE_PROVIDERS;
+    exports.ɵo = seeAlsoProviderFactory;
+    exports.ɵp = TuiDocSeeAlsoModule;
+    exports.ɵq = TuiDocSeeAlsoComponent;
+    exports.ɵr = TuiDocSourceCodeModule;
+    exports.ɵs = TuiDocSourceCodeComponent;
 
     Object.defineProperty(exports, '__esModule', { value: true });