@taiga-ui/addon-doc 3.54.0 → 3.55.0

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

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@taiga-ui/addon-doc/tokens'), require('@taiga-ui/addon-doc/utils'), require('rxjs'), require('rxjs/operators'), require('@taiga-ui/cdk'), require('@taiga-ui/kit'), require('@taiga-ui/core'), require('@angular/common'), require('ngx-highlightjs'), require('@angular/cdk/clipboard'), require('@angular/forms'), require('@angular/router'), require('@angular/animations'), require('@ng-web-apis/common'), require('@taiga-ui/addon-doc/interfaces'), require('@tinkoff/ng-polymorpheus'), require('@angular/platform-browser'), require('@taiga-ui/addon-mobile'), require('@taiga-ui/addon-doc/directives'), require('@taiga-ui/i18n'), require('@taiga-ui/addon-doc/services')) :
-    typeof define === 'function' && define.amd ? define('@taiga-ui/addon-doc/components', ['exports', '@angular/core', '@taiga-ui/addon-doc/tokens', '@taiga-ui/addon-doc/utils', 'rxjs', 'rxjs/operators', '@taiga-ui/cdk', '@taiga-ui/kit', '@taiga-ui/core', '@angular/common', 'ngx-highlightjs', '@angular/cdk/clipboard', '@angular/forms', '@angular/router', '@angular/animations', '@ng-web-apis/common', '@taiga-ui/addon-doc/interfaces', '@tinkoff/ng-polymorpheus', '@angular/platform-browser', '@taiga-ui/addon-mobile', '@taiga-ui/addon-doc/directives', '@taiga-ui/i18n', '@taiga-ui/addon-doc/services'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global["taiga-ui"] = global["taiga-ui"] || {}, global["taiga-ui"]["addon-doc"] = global["taiga-ui"]["addon-doc"] || {}, global["taiga-ui"]["addon-doc"].components = {}), global.ng.core, global["taiga-ui"]["addon-doc"].tokens, global["taiga-ui"]["addon-doc"].utils, global.rxjs, global.rxjs.operators, global.i6, global.i1, global.i2, global.ng.common, global.i3, global.ng.cdk.clipboard, global.ng.forms, global.ng.router, global.ng.animations, global.common, global["taiga-ui"]["addon-doc"].interfaces, global.i5$1, global.ng.platformBrowser, global.i4$2, global["taiga-ui"]["addon-doc"].directives, global.i5$2, global["taiga-ui"]["addon-doc"].services));
-})(this, (function (exports, i0, tokens, utils, i10, operators, i6, i1, i2, i4, i3, i4$1, i5, i6$1, animations, common, interfaces, i5$1, i9, i4$2, i8, i5$2, i6$2) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@taiga-ui/addon-doc/tokens'), require('@taiga-ui/addon-doc/utils'), require('rxjs'), require('rxjs/operators'), require('@taiga-ui/core'), require('@angular/common'), require('ngx-highlightjs'), require('@angular/cdk/clipboard'), require('@taiga-ui/cdk'), require('@taiga-ui/kit'), require('@angular/forms'), require('@angular/router'), require('@angular/animations'), require('@ng-web-apis/common'), require('@taiga-ui/addon-doc/interfaces'), require('@tinkoff/ng-polymorpheus'), require('@angular/platform-browser'), require('@taiga-ui/addon-mobile'), require('@taiga-ui/addon-doc/directives'), require('@taiga-ui/i18n'), require('@taiga-ui/addon-doc/services')) :
+    typeof define === 'function' && define.amd ? define('@taiga-ui/addon-doc/components', ['exports', '@angular/core', '@taiga-ui/addon-doc/tokens', '@taiga-ui/addon-doc/utils', 'rxjs', 'rxjs/operators', '@taiga-ui/core', '@angular/common', 'ngx-highlightjs', '@angular/cdk/clipboard', '@taiga-ui/cdk', '@taiga-ui/kit', '@angular/forms', '@angular/router', '@angular/animations', '@ng-web-apis/common', '@taiga-ui/addon-doc/interfaces', '@tinkoff/ng-polymorpheus', '@angular/platform-browser', '@taiga-ui/addon-mobile', '@taiga-ui/addon-doc/directives', '@taiga-ui/i18n', '@taiga-ui/addon-doc/services'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global["taiga-ui"] = global["taiga-ui"] || {}, global["taiga-ui"]["addon-doc"] = global["taiga-ui"]["addon-doc"] || {}, global["taiga-ui"]["addon-doc"].components = {}), global.ng.core, global["taiga-ui"]["addon-doc"].tokens, global["taiga-ui"]["addon-doc"].utils, global.rxjs, global.rxjs.operators, global.i2, global.ng.common, global.i3, global.ng.cdk.clipboard, global.i6, global.i1, global.ng.forms, global.ng.router, global.ng.animations, global.common, global["taiga-ui"]["addon-doc"].interfaces, global.i5$1, global.ng.platformBrowser, global.i4$2, global["taiga-ui"]["addon-doc"].directives, global.i5$2, global["taiga-ui"]["addon-doc"].services));
+})(this, (function (exports, i0, tokens, utils, i10, operators, i2, i4, i3, i4$1, i6, i1, i5, i6$1, animations, common, interfaces, i5$1, i9, i4$2, i8, i5$2, i6$2) { 'use strict';
 
     function _interopNamespace(e) {
         if (e && e.__esModule) return e;
@@ -24,12 +24,12 @@
 
     var i0__namespace = /*#__PURE__*/_interopNamespace(i0);
     var i10__namespace = /*#__PURE__*/_interopNamespace(i10);
-    var i6__namespace$1 = /*#__PURE__*/_interopNamespace(i6);
-    var i1__namespace = /*#__PURE__*/_interopNamespace(i1);
     var i2__namespace = /*#__PURE__*/_interopNamespace(i2);
     var i4__namespace = /*#__PURE__*/_interopNamespace(i4);
     var i3__namespace = /*#__PURE__*/_interopNamespace(i3);
     var i4__namespace$1 = /*#__PURE__*/_interopNamespace(i4$1);
+    var i6__namespace$1 = /*#__PURE__*/_interopNamespace(i6);
+    var i1__namespace = /*#__PURE__*/_interopNamespace(i1);
     var i5__namespace = /*#__PURE__*/_interopNamespace(i5);
     var i6__namespace = /*#__PURE__*/_interopNamespace(i6$1);
     var i5__namespace$1 = /*#__PURE__*/_interopNamespace(i5$1);
@@ -39,6 +39,89 @@
     var i5__namespace$2 = /*#__PURE__*/_interopNamespace(i5$2);
     var i6__namespace$2 = /*#__PURE__*/_interopNamespace(i6$2);
 
+    var TuiDocCodeComponent = /** @class */ (function () {
+        function TuiDocCodeComponent(markdownCodeProcessor) {
+            var _this = this;
+            this.markdownCodeProcessor = markdownCodeProcessor;
+            this.rawLoader$$ = new i10.BehaviorSubject('');
+            this.filename = '';
+            this.copy$ = new i10.Subject();
+            this.icon$ = this.copy$.pipe(operators.switchMap(function () { return i10.timer(2000).pipe(operators.map(function () { return 'tuiIconCopyLarge'; }), operators.startWith('tuiIconCheckLarge')); }));
+            this.processor$ = this.rawLoader$$.pipe(operators.switchMap(utils.tuiRawLoad), operators.map(function (value) { return _this.markdownCodeProcessor(value); }));
+        }
+        Object.defineProperty(TuiDocCodeComponent.prototype, "code", {
+            set: function (code) {
+                this.rawLoader$$.next(code);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(TuiDocCodeComponent.prototype, "hasFilename", {
+            get: function () {
+                return !!this.filename;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        return TuiDocCodeComponent;
+    }());
+    TuiDocCodeComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiDocCodeComponent, deps: [{ token: tokens.TUI_DOC_EXAMPLE_MARKDOWN_CODE_PROCESSOR }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    TuiDocCodeComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TuiDocCodeComponent, selector: "tui-doc-code", inputs: { filename: "filename", code: "code" }, host: { properties: { "class._has-filename": "this.hasFilename" } }, ngImport: i0__namespace, template: "<p\n    *ngIf=\"filename\"\n    class=\"t-header\"\n>\n    {{ filename }}\n</p>\n<pre\n    *ngFor=\"let content of processor$ | async\"\n    class=\"t-code\"\n>\n    <code [lineNumbers]=\"true\" [highlight]=\"content\"></code>\n    <div class=\"t-code-actions\">\n        <button\n            tuiIconButton\n            appearance=\"icon\"\n            size=\"xs\"\n            class=\"t-copy-button\"\n            [icon]=\"(icon$ | async) || 'tuiIconCopyLarge'\"\n            [cdkCopyToClipboard]=\"content\"\n            (click)=\"copy$.next()\"\n        >\n        </button>\n        <ng-content></ng-content>\n    </div>\n</pre>\n", styles: [":host{display:block}.t-header{font:var(--tui-font-text-s);font-weight:bold}.t-header+.t-code{border-radius:.25rem}.t-code{position:relative;margin:0;white-space:normal;outline:1px solid var(--tui-base-03)}.t-code ::ng-deep .hljs-ln{width:-webkit-max-content;width:max-content}.t-code+.t-code{margin-top:1rem}.t-code-actions{position:absolute;top:.75rem;right:.75rem;display:flex;justify-content:center;align-items:center;flex-direction:row-reverse}:host-context(tui-root._mobile) .t-code-actions{padding:.3125rem;border-radius:.25rem;border:1px solid var(--tui-base-04)}.t-copy-button::ng-deep+*:not(:empty){margin-right:.375rem}.hljs:not(:empty){font:var(--tui-font-text-m);font-size:.875rem;padding:1.5rem 2rem;font-family:monospace;word-wrap:break-word;white-space:pre-wrap}@media all and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: .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:.375rem 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-context(tui-root._mobile) .hljs:not(:empty){padding:1rem}.t-code-actions,.hljs:not(:empty){background:var(--tui-base-01)}@supports (background: color-mix(in srgb,var(--tui-base-01),#222 2%)){.t-code-actions,.hljs:not(:empty){background:color-mix(in srgb,var(--tui-base-01),#222 2%)}}\n"], components: [{ type: i2__namespace.TuiButtonComponent, selector: "button[tuiButton], button[tuiIconButton], a[tuiButton], a[tuiIconButton]", inputs: ["appearance", "disabled", "icon", "iconRight", "shape", "showLoader", "size"] }], directives: [{ type: i4__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3__namespace.Highlight, selector: "[highlight]", inputs: ["highlight", "languages", "lineNumbers"], outputs: ["highlighted"] }, { type: i4__namespace$1.CdkCopyToClipboard, selector: "[cdkCopyToClipboard]", inputs: ["cdkCopyToClipboard", "cdkCopyToClipboardAttempts"], outputs: ["cdkCopyToClipboardCopied"] }], pipes: { "async": i4__namespace.AsyncPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiDocCodeComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'tui-doc-code',
+                        templateUrl: './code.template.html',
+                        styleUrls: ['./code.style.less'],
+                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    }]
+            }], ctorParameters: function () {
+            return [{ type: undefined, decorators: [{
+                            type: i0.Inject,
+                            args: [tokens.TUI_DOC_EXAMPLE_MARKDOWN_CODE_PROCESSOR]
+                        }] }];
+        }, propDecorators: { filename: [{
+                    type: i0.Input
+                }], code: [{
+                    type: i0.Input
+                }], hasFilename: [{
+                    type: i0.HostBinding,
+                    args: ['class._has-filename']
+                }] } });
+
+    var TuiDocCodeModule = /** @class */ (function () {
+        function TuiDocCodeModule() {
+        }
+        return TuiDocCodeModule;
+    }());
+    TuiDocCodeModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiDocCodeModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+    TuiDocCodeModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiDocCodeModule, declarations: [TuiDocCodeComponent], imports: [i4.CommonModule,
+            i2.TuiSvgModule,
+            i3.HighlightModule,
+            i2.TuiButtonModule,
+            i4$1.ClipboardModule], exports: [TuiDocCodeComponent] });
+    TuiDocCodeModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiDocCodeModule, imports: [[
+                i4.CommonModule,
+                i2.TuiSvgModule,
+                i3.HighlightModule,
+                i2.TuiButtonModule,
+                i4$1.ClipboardModule,
+            ]] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiDocCodeModule, decorators: [{
+                type: i0.NgModule,
+                args: [{
+                        imports: [
+                            i4.CommonModule,
+                            i2.TuiSvgModule,
+                            i3.HighlightModule,
+                            i2.TuiButtonModule,
+                            i4$1.ClipboardModule,
+                        ],
+                        declarations: [TuiDocCodeComponent],
+                        exports: [TuiDocCodeComponent],
+                    }]
+            }] });
+
     /*! *****************************************************************************
     Copyright (c) Microsoft Corporation.
 
@@ -396,54 +479,6 @@
                         }] }];
         }, propDecorators: { copied$: [] } });
 
-    var TuiDocCodeComponent = /** @class */ (function () {
-        function TuiDocCodeComponent(markdownCodeProcessor) {
-            var _this = this;
-            this.markdownCodeProcessor = markdownCodeProcessor;
-            this.rawLoader$$ = new i10.BehaviorSubject('');
-            this.filename = '';
-            this.processor$ = this.rawLoader$$.pipe(operators.switchMap(utils.tuiRawLoad), operators.map(function (value) { return _this.markdownCodeProcessor(value); }));
-        }
-        Object.defineProperty(TuiDocCodeComponent.prototype, "code", {
-            set: function (code) {
-                this.rawLoader$$.next(code);
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(TuiDocCodeComponent.prototype, "hasFilename", {
-            get: function () {
-                return !!this.filename;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        return TuiDocCodeComponent;
-    }());
-    TuiDocCodeComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiDocCodeComponent, deps: [{ token: tokens.TUI_DOC_EXAMPLE_MARKDOWN_CODE_PROCESSOR }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    TuiDocCodeComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TuiDocCodeComponent, selector: "tui-doc-code", inputs: { filename: "filename", code: "code" }, host: { properties: { "class._has-filename": "this.hasFilename" } }, ngImport: i0__namespace, template: "<p\n    *ngIf=\"filename\"\n    class=\"t-header\"\n>\n    {{ filename }}\n</p>\n<pre\n    *ngFor=\"let content of processor$ | async\"\n    class=\"t-code\"\n>\n    <code [lineNumbers]=\"true\" [highlight]=\"content\"></code>\n    <div class=\"t-code-actions\">\n        <tui-doc-copy class=\"t-copy\" [cdkCopyToClipboard]=\"content\"></tui-doc-copy>\n        <ng-content></ng-content>\n    </div>\n</pre>\n", styles: [":host{display:block}.t-header{font:var(--tui-font-text-s);font-weight:bold}.t-code{position:relative;margin:0;white-space:normal}.t-code:hover .t-code-actions,.t-code:focus-visible .t-code-actions{opacity:1}.t-code+.t-code{margin-top:1rem}.t-code-actions{position:absolute;top:.875rem;right:2rem;display:flex;opacity:0;grid-gap:.5rem;gap:.5rem;flex-direction:row-reverse}.hljs:not(:empty){font:var(--tui-font-text-m);padding:1.5rem 2rem;font-family:monospace;background:var(--tui-clear);word-wrap:break-word;white-space:pre-wrap}@media all and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: .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:.375rem 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}:host-context(tui-root._mobile) .hljs:not(:empty){padding:1rem}\n"], components: [{ type: TuiDocCopyComponent, selector: "tui-doc-copy" }], directives: [{ type: i4__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3__namespace.Highlight, selector: "[highlight]", inputs: ["highlight", "languages", "lineNumbers"], outputs: ["highlighted"] }, { type: i4__namespace$1.CdkCopyToClipboard, selector: "[cdkCopyToClipboard]", inputs: ["cdkCopyToClipboard", "cdkCopyToClipboardAttempts"], outputs: ["cdkCopyToClipboardCopied"] }], pipes: { "async": i4__namespace.AsyncPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiDocCodeComponent, decorators: [{
-                type: i0.Component,
-                args: [{
-                        selector: 'tui-doc-code',
-                        templateUrl: './code.template.html',
-                        styleUrls: ['./code.style.less'],
-                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    }]
-            }], ctorParameters: function () {
-            return [{ type: undefined, decorators: [{
-                            type: i0.Inject,
-                            args: [tokens.TUI_DOC_EXAMPLE_MARKDOWN_CODE_PROCESSOR]
-                        }] }];
-        }, propDecorators: { filename: [{
-                    type: i0.Input
-                }], code: [{
-                    type: i0.Input
-                }], hasFilename: [{
-                    type: i0.HostBinding,
-                    args: ['class._has-filename']
-                }] } });
-
     var TuiDocCopyModule = /** @class */ (function () {
         function TuiDocCopyModule() {
         }
@@ -461,23 +496,6 @@
                     }]
             }] });
 
-    var TuiDocCodeModule = /** @class */ (function () {
-        function TuiDocCodeModule() {
-        }
-        return TuiDocCodeModule;
-    }());
-    TuiDocCodeModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiDocCodeModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    TuiDocCodeModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiDocCodeModule, declarations: [TuiDocCodeComponent], imports: [i4.CommonModule, i3.HighlightModule, TuiDocCopyModule, i4$1.ClipboardModule], exports: [TuiDocCodeComponent] });
-    TuiDocCodeModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiDocCodeModule, imports: [[i4.CommonModule, i3.HighlightModule, TuiDocCopyModule, i4$1.ClipboardModule]] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiDocCodeModule, decorators: [{
-                type: i0.NgModule,
-                args: [{
-                        imports: [i4.CommonModule, i3.HighlightModule, TuiDocCopyModule, i4$1.ClipboardModule],
-                        declarations: [TuiDocCodeComponent],
-                        exports: [TuiDocCodeComponent],
-                    }]
-            }] });
-
     var MIN_WIDTH = 160;
     var TuiDocDemoComponent = /** @class */ (function () {
         function TuiDocDemoComponent(options, isMobile, el, locationRef, urlSerializer, texts, urlStateHandler) {
@@ -1402,7 +1420,7 @@
         return TuiDocExampleComponent;
     }());
     TuiDocExampleComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiDocExampleComponent, deps: [{ token: i4$1.Clipboard }, { token: i2.TuiAlertService }, { token: common.LOCATION }, { token: i1.TUI_COPY_TEXTS }, { token: tokens.TUI_DOC_EXAMPLE_TEXTS }, { token: tokens.TUI_DOC_CODE_EDITOR, optional: true }, { token: tokens.TUI_DOC_EXAMPLE_CONTENT_PROCESSOR }, { token: i6.TUI_IS_E2E }, { token: tokens.TUI_DOC_CODE_ACTIONS }, { token: i6$1.Router }, { token: i6$1.ActivatedRoute }, { token: i4.Location }, { token: TUI_DOC_EXAMPLE_OPTIONS }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    TuiDocExampleComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TuiDocExampleComponent, selector: "tui-doc-example", inputs: { id: "id", heading: "heading", description: "description", content: "content", fullsize: "fullsize", componentName: "componentName" }, host: { properties: { "class._fullsize": "this.fullsize" } }, ngImport: i0__namespace, template: "<h3\n    *ngIf=\"heading\"\n    class=\"t-title\"\n>\n    <span\n        *polymorpheusOutlet=\"heading | tuiDocExampleCapitalize as text\"\n        [textContent]=\"text\"\n    ></span>\n    <button\n        *ngIf=\"id\"\n        appearance=\"icon\"\n        size=\"xs\"\n        tuiIconButton\n        type=\"button\"\n        class=\"t-link-icon\"\n        [icon]=\"options.linkIcon\"\n        [title]=\"copy$ | async\"\n        (click)=\"copyExampleLink()\"\n    ></button>\n</h3>\n<h4\n    *ngIf=\"description\"\n    class=\"t-description\"\n>\n    <ng-container *polymorpheusOutlet=\"description | tuiDocExampleCapitalize as text\">\n        {{ text }}\n    </ng-container>\n</h4>\n\n<div\n    *ngIf=\"processor$ | async as files\"\n    class=\"t-example\"\n>\n    <ng-container *ngIf=\"files | tuiDocExampleGetTabs: defaultTab as tabs\">\n        <div\n            *ngIf=\"tabs.length > 1\"\n            class=\"t-tabs-wrapper\"\n        >\n            <tui-tabs-with-more\n                class=\"t-tabs\"\n                [(activeItemIndex)]=\"activeItemIndex\"\n            >\n                <ng-container *ngFor=\"let tab of tabs\">\n                    <button\n                        *tuiItem\n                        tuiTab\n                    >\n                        <ng-container *polymorpheusOutlet=\"getTabTitle(tab) as text\">\n                            {{ text }}\n                        </ng-container>\n                    </button>\n                </ng-container>\n            </tui-tabs-with-more>\n\n            <tui-loader\n                *ngIf=\"files | tuiMapper: visible\"\n                size=\"xs\"\n                [overlay]=\"true\"\n                [showLoader]=\"!!(loading$ | async)\"\n                (click)=\"edit(files)\"\n            >\n                <ng-container *ngIf=\"codeEditor?.content as content; else defaultEditContent\">\n                    <ng-container *polymorpheusOutlet=\"content as editContent\">\n                        {{ editContent }}\n                    </ng-container>\n                </ng-container>\n\n                <ng-template #defaultEditContent>\n                    <button\n                        appearance=\"flat\"\n                        size=\"s\"\n                        tuiButton\n                        type=\"button\"\n                    >\n                        Edit on {{ codeEditor!.name }}\n                    </button>\n                </ng-template>\n            </tui-loader>\n        </div>\n\n        <div\n            *ngFor=\"let tab of tabs; let index = index\"\n            class=\"t-content\"\n            [class.t-content_animated]=\"!isE2E\"\n            [class.t-content_visible]=\"activeItemIndex === index\"\n        >\n            <ng-container\n                *ngIf=\"index === defaultTabIndex; else anotherTab\"\n                [ngTemplateOutlet]=\"preview\"\n            ></ng-container>\n            <ng-template #anotherTab>\n                <ng-container\n                    [ngTemplateOutlet]=\"codeSection\"\n                    [ngTemplateOutletContext]=\"{$implicit: files?.[tabs[activeItemIndex]] || ''}\"\n                ></ng-container>\n            </ng-template>\n        </div>\n    </ng-container>\n</div>\n\n<ng-template #preview>\n    <div\n        automation-id=\"tui-doc-example\"\n        class=\"t-demo\"\n    >\n        <ng-content></ng-content>\n    </div>\n</ng-template>\n\n<ng-template\n    #codeSection\n    let-code\n>\n    <tui-doc-code [code]=\"code\">\n        <ng-container *ngFor=\"let action of codeActions\">\n            <ng-container *polymorpheusOutlet=\"action as text; context: {$implicit: code}\">\n                {{ text }}\n            </ng-container>\n        </ng-container>\n    </tui-doc-code>\n</ng-template>\n", styles: [":host{position:relative;display:block;padding-top:3.5rem;clear:right}:host :host-context(tui-root._mobile){padding-top:2rem}.t-title{font:var(--tui-font-heading-5);margin:0 0 .5rem}:host-context(tui-root._mobile) .t-title{font:var(--tui-font-heading-6)}.t-description{font:var(--tui-font-text-m);font-weight:normal;margin:0}.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 #0000001a;overflow:hidden}:host-context(tui-root._mobile) .t-example{margin-top:.75rem}.t-tabs-wrapper{display:flex;padding:0 2rem;box-shadow:inset 0 -1px var(--tui-base-03);justify-content:space-between;align-items:center}:host-context(tui-root._mobile) .t-tabs-wrapper{padding:0 1rem}.t-tabs{flex-grow:1}.t-demo{padding:2rem;max-width:100%;box-sizing:border-box;overflow-x:auto}@media all and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: .001dpcm){.t-demo::-webkit-scrollbar,.t-demo::-webkit-scrollbar-thumb{width:1rem;height:1rem;border-radius:6.25rem;background-clip:padding-box;border:.375rem solid transparent}.t-demo::-webkit-scrollbar{background-color:transparent}.t-demo::-webkit-scrollbar-thumb{background-color:var(--tui-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)}}:host-context(tui-root._mobile) .t-demo{padding:1rem}:host:not(._fullsize) .t-demo{width:-webkit-min-content;width:min-content;min-width:20rem}.t-link-icon{margin-left:.3rem;vertical-align:baseline}.t-content{will-change:opacity;height:0;visibility:hidden;opacity:0}.t-content_animated{transition:opacity .3s ease-in-out}.t-content_visible{height:auto;visibility:visible;opacity:1}\n"], components: [{ type: i2__namespace.TuiButtonComponent, selector: "button[tuiButton], button[tuiIconButton], a[tuiButton], a[tuiIconButton]", inputs: ["appearance", "disabled", "icon", "iconRight", "shape", "showLoader", "size"] }, { type: i1__namespace.TuiTabsWithMoreComponent, selector: "tui-tabs-with-more, nav[tuiTabsWithMore]", inputs: ["moreContent", "dropdownContent", "underline", "activeItemIndex", "itemsLimit"], outputs: ["activeItemIndexChange"] }, { type: i1__namespace.TuiTabComponent, selector: "a[tuiTab]:not([routerLink]), a[tuiTab][routerLink][routerLinkActive], button[tuiTab]" }, { type: i2__namespace.TuiLoaderComponent, selector: "tui-loader", inputs: ["size", "inheritColor", "overlay", "textContent", "showLoader"] }, { type: TuiDocCodeComponent, selector: "tui-doc-code", inputs: ["filename", "code"] }], directives: [{ type: i4__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5__namespace$1.PolymorpheusOutletDirective, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }, { type: i4__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6__namespace$1.TuiItemDirective, selector: "[tuiItem]" }, { type: i4__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "tuiDocExampleCapitalize": TuiDocExampleCapitalizePipe, "async": i4__namespace.AsyncPipe, "tuiDocExampleGetTabs": TuiDocExampleGetTabsPipe, "tuiMapper": i6__namespace$1.TuiMapperPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    TuiDocExampleComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TuiDocExampleComponent, selector: "tui-doc-example", inputs: { id: "id", heading: "heading", description: "description", content: "content", fullsize: "fullsize", componentName: "componentName" }, host: { properties: { "class._fullsize": "this.fullsize" } }, ngImport: i0__namespace, template: "<h3\n    *ngIf=\"heading\"\n    class=\"t-title\"\n>\n    <span\n        *polymorpheusOutlet=\"heading | tuiDocExampleCapitalize as text\"\n        [textContent]=\"text\"\n    ></span>\n    <button\n        *ngIf=\"id\"\n        appearance=\"icon\"\n        size=\"xs\"\n        tuiIconButton\n        type=\"button\"\n        class=\"t-link-icon\"\n        [icon]=\"options.linkIcon\"\n        [title]=\"copy$ | async\"\n        (click)=\"copyExampleLink()\"\n    ></button>\n</h3>\n<h4\n    *ngIf=\"description\"\n    class=\"t-description\"\n>\n    <ng-container *polymorpheusOutlet=\"description | tuiDocExampleCapitalize as text\">\n        {{ text }}\n    </ng-container>\n</h4>\n\n<div\n    *ngIf=\"processor$ | async as files\"\n    class=\"t-example\"\n>\n    <ng-container *ngIf=\"files | tuiDocExampleGetTabs: defaultTab as tabs\">\n        <div\n            *ngIf=\"tabs.length > 1\"\n            class=\"t-tabs-wrapper\"\n        >\n            <tui-tabs-with-more\n                class=\"t-tabs\"\n                [(activeItemIndex)]=\"activeItemIndex\"\n            >\n                <ng-container *ngFor=\"let tab of tabs\">\n                    <button\n                        *tuiItem\n                        tuiTab\n                    >\n                        <ng-container *polymorpheusOutlet=\"getTabTitle(tab) as text\">\n                            {{ text }}\n                        </ng-container>\n                    </button>\n                </ng-container>\n            </tui-tabs-with-more>\n\n            <tui-loader\n                *ngIf=\"files | tuiMapper: visible\"\n                size=\"xs\"\n                [overlay]=\"true\"\n                [showLoader]=\"!!(loading$ | async)\"\n                (click)=\"edit(files)\"\n            >\n                <ng-container *ngIf=\"codeEditor?.content as content; else defaultEditContent\">\n                    <ng-container *polymorpheusOutlet=\"content as editContent\">\n                        {{ editContent }}\n                    </ng-container>\n                </ng-container>\n\n                <ng-template #defaultEditContent>\n                    <button\n                        appearance=\"flat\"\n                        size=\"s\"\n                        tuiButton\n                        type=\"button\"\n                    >\n                        Edit on {{ codeEditor!.name }}\n                    </button>\n                </ng-template>\n            </tui-loader>\n        </div>\n\n        <div\n            *ngFor=\"let tab of tabs; let index = index\"\n            class=\"t-content\"\n            [class.t-content_animated]=\"!isE2E\"\n            [class.t-content_visible]=\"activeItemIndex === index\"\n        >\n            <ng-container\n                *ngIf=\"index === defaultTabIndex; else anotherTab\"\n                [ngTemplateOutlet]=\"preview\"\n            ></ng-container>\n            <ng-template #anotherTab>\n                <ng-container\n                    [ngTemplateOutlet]=\"codeSection\"\n                    [ngTemplateOutletContext]=\"{$implicit: files?.[tabs[activeItemIndex]] || ''}\"\n                ></ng-container>\n            </ng-template>\n        </div>\n    </ng-container>\n</div>\n\n<ng-template #preview>\n    <div\n        automation-id=\"tui-doc-example\"\n        class=\"t-demo\"\n    >\n        <ng-content></ng-content>\n    </div>\n</ng-template>\n\n<ng-template\n    #codeSection\n    let-code\n>\n    <tui-doc-code [code]=\"code\">\n        <ng-container *ngFor=\"let action of codeActions\">\n            <ng-container *polymorpheusOutlet=\"action as text; context: {$implicit: code}\">\n                {{ text }}\n            </ng-container>\n        </ng-container>\n    </tui-doc-code>\n</ng-template>\n", styles: [":host{position:relative;display:block;padding-top:3.5rem;clear:right}:host :host-context(tui-root._mobile){padding-top:2rem}.t-title{font:var(--tui-font-heading-5);margin:0 0 .5rem}:host-context(tui-root._mobile) .t-title{font:var(--tui-font-heading-6)}.t-description{font:var(--tui-font-text-m);font-weight:normal;margin:0}.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 #0000001a;overflow:hidden}:host-context(tui-root._mobile) .t-example{margin-top:.75rem}.t-tabs-wrapper{display:flex;padding:0 .875rem 0 2rem;box-shadow:inset 0 -1px var(--tui-base-03);justify-content:space-between;align-items:center}:host-context(tui-root._mobile) .t-tabs-wrapper{padding:0 .875rem 0 1rem}.t-tabs{flex-grow:1}.t-demo{padding:2rem;max-width:100%;box-sizing:border-box;overflow-x:auto}@media all and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: .001dpcm){.t-demo::-webkit-scrollbar,.t-demo::-webkit-scrollbar-thumb{width:1rem;height:1rem;border-radius:6.25rem;background-clip:padding-box;border:.375rem solid transparent}.t-demo::-webkit-scrollbar{background-color:transparent}.t-demo::-webkit-scrollbar-thumb{background-color:var(--tui-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)}}:host-context(tui-root._mobile) .t-demo{padding:1rem}:host:not(._fullsize) .t-demo{width:-webkit-min-content;width:min-content;min-width:20rem}.t-link-icon{margin-left:.3rem;vertical-align:baseline}.t-content{will-change:opacity;height:0;visibility:hidden;opacity:0}.t-content_animated{transition:opacity .3s ease-in-out}.t-content_visible{height:auto;visibility:visible;opacity:1}\n"], components: [{ type: i2__namespace.TuiButtonComponent, selector: "button[tuiButton], button[tuiIconButton], a[tuiButton], a[tuiIconButton]", inputs: ["appearance", "disabled", "icon", "iconRight", "shape", "showLoader", "size"] }, { type: i1__namespace.TuiTabsWithMoreComponent, selector: "tui-tabs-with-more, nav[tuiTabsWithMore]", inputs: ["moreContent", "dropdownContent", "underline", "activeItemIndex", "itemsLimit"], outputs: ["activeItemIndexChange"] }, { type: i1__namespace.TuiTabComponent, selector: "a[tuiTab]:not([routerLink]), a[tuiTab][routerLink][routerLinkActive], button[tuiTab]" }, { type: i2__namespace.TuiLoaderComponent, selector: "tui-loader", inputs: ["size", "inheritColor", "overlay", "textContent", "showLoader"] }, { type: TuiDocCodeComponent, selector: "tui-doc-code", inputs: ["filename", "code"] }], directives: [{ type: i4__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5__namespace$1.PolymorpheusOutletDirective, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }, { type: i4__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6__namespace$1.TuiItemDirective, selector: "[tuiItem]" }, { type: i4__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "tuiDocExampleCapitalize": TuiDocExampleCapitalizePipe, "async": i4__namespace.AsyncPipe, "tuiDocExampleGetTabs": TuiDocExampleGetTabsPipe, "tuiMapper": i6__namespace$1.TuiMapperPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiDocExampleComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -1528,6 +1546,15 @@
                     }]
             }] });
 
+    function labelsProviderFactory(pages) {
+        return pages
+            .map(function (_a) {
+            var section = _a.section;
+            return section;
+        })
+            .filter(i6.tuiIsPresent)
+            .filter(function (item, index, array) { return array.indexOf(item) === index; });
+    }
     /**
      * Page title
      */
@@ -1572,15 +1599,6 @@
             },
         },
     ];
-    function labelsProviderFactory(pages) {
-        return pages
-            .map(function (_a) {
-            var section = _a.section;
-            return section;
-        })
-            .filter(i6.tuiIsPresent)
-            .filter(function (item, index, array) { return array.indexOf(item) === index; });
-    }
 
     var TuiDocNavigationComponent = /** @class */ (function () {
         function TuiDocNavigationComponent(cdr, titleService, title$, doc, mode, sidebar, labels, items, searchText, router, activatedRoute, destroy$, readyToScroll$, scrollBehavior, docIcons, icons) {
@@ -1719,7 +1737,7 @@
         return TuiDocNavigationComponent;
     }());
     TuiDocNavigationComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiDocNavigationComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i9.Title }, { token: NAVIGATION_TITLE }, { token: i4.DOCUMENT }, { token: i2.TuiModeDirective }, { token: i4$2.TuiSidebarDirective, optional: true }, { token: NAVIGATION_LABELS }, { token: NAVIGATION_ITEMS }, { token: tokens.TUI_DOC_SEARCH_TEXT }, { token: i6$1.Router }, { token: i6$1.ActivatedRoute }, { token: i6.TuiDestroyService, self: true }, { token: tokens.TUI_DOC_PAGE_LOADED }, { token: tokens.TUI_DOC_SCROLL_BEHAVIOR }, { token: tokens.TUI_DOC_ICONS }, { token: i2.TUI_COMMON_ICONS }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    TuiDocNavigationComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TuiDocNavigationComponent, selector: "tui-doc-navigation", host: { properties: { "class._open": "this.menuOpen" } }, providers: NAVIGATION_PROVIDERS, ngImport: i0__namespace, template: "<tui-input\n    #input\n    tuiTextfieldSize=\"m\"\n    class=\"t-input\"\n    [formControl]=\"search\"\n    [tuiAutoFocus]=\"!!sidebar\"\n    [tuiTextfieldCleaner]=\"true\"\n    [tuiTextfieldIconLeft]=\"docIcons.search\"\n    [tuiTextfieldLabelOutside]=\"true\"\n>\n    {{ searchText }}\n    <ng-container *ngIf=\"canOpen\">\n        <tui-data-list *tuiDataList>\n            <tui-opt-group\n                *ngFor=\"let group of filtered$ | async; let index = index\"\n                [label]=\"labels[index] || ''\"\n            >\n                <a\n                    *ngFor=\"let item of group\"\n                    tuiOption\n                    [fragment]=\"item.fragment\"\n                    [routerLink]=\"item.route\"\n                    (click)=\"onClick(input)\"\n                >\n                    {{ item.title }}\n                    <tui-svg\n                        *polymorpheusOutlet=\"item.icon as icon\"\n                        class=\"t-icon\"\n                        [src]=\"icon\"\n                    ></tui-svg>\n                </a>\n            </tui-opt-group>\n        </tui-data-list>\n    </ng-container>\n</tui-input>\n\n<nav class=\"t-navigation\">\n    <tui-scrollbar\n        class=\"t-scrollbar\"\n        [tuiMode]=\"mode$ | async\"\n    >\n        <tui-accordion\n            [closeOthers]=\"false\"\n            [rounded]=\"false\"\n        >\n            <tui-accordion-item\n                *ngFor=\"let label of labels; index as index\"\n                size=\"s\"\n                [borders]=\"null\"\n                [(open)]=\"!!openPagesArr[index]\"\n            >\n                <span class=\"t-label\">\n                    <strong>{{ label }}</strong>\n                </span>\n                <ng-template tuiAccordionItemContent>\n                    <div class=\"t-section\">\n                        <ng-container\n                            *ngFor=\"let item of items[index]; index as subIndex\"\n                            [ngTemplateOutlet]=\"pages\"\n                            [ngTemplateOutletContext]=\"{item: item, index: index * 100 + subIndex}\"\n                        ></ng-container>\n                    </div>\n                </ng-template>\n            </tui-accordion-item>\n        </tui-accordion>\n        <div class=\"t-items-container\">\n            <ng-container\n                *ngFor=\"let item of itemsWithoutSections; let index = index\"\n                [ngTemplateOutlet]=\"pages\"\n                [ngTemplateOutletContext]=\"{item: item, index: items.length - 1 + index}\"\n            ></ng-container>\n        </div>\n\n        <ng-template\n            #pages\n            let-index=\"index\"\n            let-item=\"item\"\n        >\n            <a\n                *ngIf=\"!item.subPages; else subPagesTemplate\"\n                routerLinkActive=\"t-sublink_active\"\n                tuiLink\n                class=\"t-sublink\"\n                [routerLink]=\"item.route\"\n                [tuiScrollIntoViewLink]=\"isActive(item.route)\"\n                (click)=\"closeMenu()\"\n            >\n                {{ item.title }}\n                <tui-svg\n                    *polymorpheusOutlet=\"item.icon as icon\"\n                    class=\"t-icon\"\n                    [src]=\"icon\"\n                ></tui-svg>\n            </a>\n\n            <ng-template #subPagesTemplate>\n                <div\n                    routerLinkActive\n                    class=\"t-subsection\"\n                    [routerLinkActiveOptions]=\"{exact: false}\"\n                >\n                    <button\n                        *ngIf=\"item.subPages\"\n                        tuiLink\n                        type=\"button\"\n                        class=\"t-sublink t-sublink_subsection\"\n                        (click)=\"onGroupClick(index)\"\n                    >\n                        <tui-svg\n                            class=\"t-chevron\"\n                            [class.t-chevron_active]=\"!!openPagesGroupsArr[index]\"\n                            [src]=\"icons.more\"\n                        ></tui-svg>\n                        {{ item.title }}\n                        <tui-svg\n                            *polymorpheusOutlet=\"item.icon as icon\"\n                            class=\"t-icon\"\n                            [src]=\"icon\"\n                        ></tui-svg>\n                    </button>\n                    <tui-expand\n                        class=\"t-expand\"\n                        [expanded]=\"!!openPagesGroupsArr[index]\"\n                    >\n                        <div class=\"t-section t-section_bordered\">\n                            <a\n                                *ngFor=\"let subPage of $pages(item.subPages)\"\n                                routerLinkActive=\"t-sublink_active\"\n                                tuiLink\n                                class=\"t-sublink t-sublink_small\"\n                                [fragment]=\"subPage.fragment\"\n                                [routerLink]=\"subPage.route\"\n                                [tuiScrollIntoViewLink]=\"isActive(subPage.route)\"\n                                (click)=\"closeMenu()\"\n                            >\n                                {{ subPage.title }}\n                                <tui-svg\n                                    *polymorpheusOutlet=\"subPage.icon as icon\"\n                                    class=\"t-icon\"\n                                    [src]=\"icon\"\n                                ></tui-svg>\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", styles: [":host{z-index:1;display:flex;flex-direction:column;text-align:center;background:var(--tui-base-01)}.t-input{margin:1.25rem}.t-navigation{display:flex;max-height:100%;min-height:0;flex:1 1 0;text-align:left}.t-scrollbar{scroll-behavior:smooth;width:100%}@media screen and (prefers-reduced-motion: reduce){.t-scrollbar{scroll-behavior:auto}}.t-items-container{display:flex;flex-direction:column;padding:0 1rem}.t-label{margin-left:.5rem}.t-expand{margin-left:.25rem}.t-section{display:flex;flex-direction:column;align-items:flex-start;margin:-1rem 0 -.5rem}.t-section_bordered{margin:.5rem 0;border-left:1px solid var(--tui-base-03)}.t-subsection{margin-left:.5rem}.t-sublink{-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:1rem 0 0;border:0;background:none;font-size:inherit;line-height:inherit;font:var(--tui-font-text-m);margin-left:.5rem}.t-sublink_small{margin-left:1rem;line-height:1.5rem;padding-top:.5rem}.t-sublink_subsection{margin-left:0;line-height:1.6rem}.t-sublink.t-sublink.t-sublink_active{color:var(--tui-text-01)}.t-icon{margin-left:.5rem}.t-chevron{transition-property:transform;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;width:1rem;height:1rem;margin:-.25rem .25rem 0 -.1875rem}.t-chevron_active{transform:rotate(90deg)}\n"], components: [{ type: i1__namespace.TuiInputComponent, selector: "tui-input" }, { type: i2__namespace.TuiDataListComponent, selector: "tui-data-list", inputs: ["role", "emptyContent", "size"] }, { type: i2__namespace.TuiOptionComponent, selector: "button[tuiOption], a[tuiOption]", inputs: ["size", "role", "disabled", "value"] }, { type: i2__namespace.TuiSvgComponent, selector: "tui-svg", inputs: ["src"] }, { type: i2__namespace.TuiScrollbarComponent, selector: "tui-scrollbar", inputs: ["hidden"] }, { type: i1__namespace.TuiAccordionComponent, selector: "tui-accordion", inputs: ["closeOthers", "rounded"] }, { type: i1__namespace.TuiAccordionItemComponent, selector: "tui-accordion-item", inputs: ["noPadding", "showArrow", "borders", "size", "disabled", "disableHover", "open", "async"], outputs: ["openChange"] }, { type: i2__namespace.TuiLinkComponent, selector: "a[tuiLink], button[tuiLink]", inputs: ["pseudo", "icon", "iconAlign", "iconRotated", "mode"], exportAs: ["tuiLink"] }, { type: i2__namespace.TuiExpandComponent, selector: "tui-expand", inputs: ["async", "expanded"] }], directives: [{ type: i1__namespace.TuiInputDirective, selector: "tui-input" }, { type: i2__namespace.TuiTextfieldSizeDirective, selector: "[tuiTextfieldSize]", inputs: ["tuiTextfieldSize"] }, { type: i5__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5__namespace.FormControlDirective, selector: "[formControl]", inputs: ["disabled", "formControl", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i6__namespace$1.TuiAutoFocusDirective, selector: "[tuiAutoFocus]", inputs: ["tuiAutoFocus"] }, { type: i2__namespace.TuiTextfieldCleanerDirective, selector: "[tuiTextfieldCleaner]", inputs: ["tuiTextfieldCleaner"] }, { type: i2__namespace.TuiTextfieldIconLeftDirective, selector: "[tuiTextfieldIconLeft]", inputs: ["tuiTextfieldIconLeft"] }, { type: i2__namespace.TuiTextfieldLabelOutsideDirective, selector: "[tuiTextfieldLabelOutside]", inputs: ["tuiTextfieldLabelOutside"] }, { type: i4__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace.TuiDataListDirective, selector: "ng-template[tuiDataList]" }, { type: i4__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2__namespace.TuiOptGroupDirective, selector: "tui-opt-group", inputs: ["label"] }, { type: i6__namespace.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["routerLink", "target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo"] }, { type: i5__namespace$1.PolymorpheusOutletDirective, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }, { type: i2__namespace.TuiModeDirective, selector: "[tuiMode]", inputs: ["tuiMode"] }, { type: i1__namespace.TuiAccordionItemContentDirective, selector: "ng-template[tuiAccordionItemContent]" }, { type: i4__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i6__namespace.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "routerLinkActive"], exportAs: ["routerLinkActive"] }, { type: i8__namespace.TuiScrollIntoViewLinkDirective, selector: "[tuiScrollIntoViewLink]", inputs: ["tuiScrollIntoViewLink"] }], pipes: { "async": i4__namespace.AsyncPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    TuiDocNavigationComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TuiDocNavigationComponent, selector: "tui-doc-navigation", host: { properties: { "class._open": "this.menuOpen" } }, providers: NAVIGATION_PROVIDERS, ngImport: i0__namespace, template: "<tui-input\n    #input\n    tuiTextfieldSize=\"m\"\n    class=\"t-input\"\n    [formControl]=\"search\"\n    [tuiAutoFocus]=\"!!sidebar\"\n    [tuiTextfieldCleaner]=\"true\"\n    [tuiTextfieldIconLeft]=\"docIcons.search\"\n    [tuiTextfieldLabelOutside]=\"true\"\n>\n    {{ searchText }}\n    <ng-container *ngIf=\"canOpen\">\n        <tui-data-list *tuiDataList>\n            <tui-opt-group\n                *ngFor=\"let group of filtered$ | async; let index = index\"\n                [label]=\"labels[index] || ''\"\n            >\n                <a\n                    *ngFor=\"let item of group\"\n                    tuiOption\n                    [fragment]=\"item.fragment\"\n                    [routerLink]=\"item.route\"\n                    (click)=\"onClick(input)\"\n                >\n                    {{ item.title }}\n                    <tui-svg\n                        *polymorpheusOutlet=\"item.icon as icon\"\n                        class=\"t-icon\"\n                        [src]=\"icon\"\n                    ></tui-svg>\n                </a>\n            </tui-opt-group>\n        </tui-data-list>\n    </ng-container>\n</tui-input>\n\n<nav class=\"t-navigation\">\n    <tui-scrollbar\n        class=\"t-scrollbar\"\n        [tuiMode]=\"mode$ | async\"\n    >\n        <tui-accordion\n            [closeOthers]=\"false\"\n            [rounded]=\"false\"\n        >\n            <tui-accordion-item\n                *ngFor=\"let label of labels; index as index\"\n                size=\"s\"\n                [borders]=\"null\"\n                [(open)]=\"!!openPagesArr[index]\"\n            >\n                <span class=\"t-label\">\n                    <strong>{{ label }}</strong>\n                </span>\n                <ng-template tuiAccordionItemContent>\n                    <div class=\"t-section\">\n                        <ng-container\n                            *ngFor=\"let item of items[index]; index as subIndex\"\n                            [ngTemplateOutlet]=\"pages\"\n                            [ngTemplateOutletContext]=\"{item: item, index: index * 100 + subIndex}\"\n                        ></ng-container>\n                    </div>\n                </ng-template>\n            </tui-accordion-item>\n        </tui-accordion>\n        <div class=\"t-items-container\">\n            <ng-container\n                *ngFor=\"let item of itemsWithoutSections; let index = index\"\n                [ngTemplateOutlet]=\"pages\"\n                [ngTemplateOutletContext]=\"{item: item, index: items.length - 1 + index}\"\n            ></ng-container>\n        </div>\n\n        <ng-template\n            #pages\n            let-index=\"index\"\n            let-item=\"item\"\n        >\n            <a\n                *ngIf=\"!item.subPages; else subPagesTemplate\"\n                routerLinkActive=\"t-sublink_active\"\n                tuiLink\n                class=\"t-sublink\"\n                [routerLink]=\"item.route\"\n                [tuiScrollIntoViewLink]=\"isActive(item.route)\"\n                (click)=\"closeMenu()\"\n            >\n                {{ item.title }}\n                <tui-svg\n                    *polymorpheusOutlet=\"item.icon as icon\"\n                    class=\"t-icon\"\n                    [src]=\"icon\"\n                ></tui-svg>\n            </a>\n\n            <ng-template #subPagesTemplate>\n                <div\n                    routerLinkActive\n                    class=\"t-subsection\"\n                    [routerLinkActiveOptions]=\"{exact: false}\"\n                >\n                    <button\n                        *ngIf=\"item.subPages\"\n                        tuiLink\n                        type=\"button\"\n                        class=\"t-sublink t-sublink_subsection\"\n                        (click)=\"onGroupClick(index)\"\n                    >\n                        <tui-svg\n                            class=\"t-chevron\"\n                            [class.t-chevron_active]=\"!!openPagesGroupsArr[index]\"\n                            [src]=\"icons.more\"\n                        ></tui-svg>\n                        {{ item.title }}\n                        <tui-svg\n                            *polymorpheusOutlet=\"item.icon as icon\"\n                            class=\"t-icon\"\n                            [src]=\"icon\"\n                        ></tui-svg>\n                    </button>\n                    <tui-expand\n                        class=\"t-expand\"\n                        [expanded]=\"!!openPagesGroupsArr[index]\"\n                    >\n                        <div class=\"t-section t-section_bordered\">\n                            <a\n                                *ngFor=\"let subPage of $pages(item.subPages)\"\n                                routerLinkActive=\"t-sublink_active\"\n                                tuiLink\n                                class=\"t-sublink t-sublink_small\"\n                                [fragment]=\"subPage.fragment\"\n                                [routerLink]=\"subPage.route\"\n                                [tuiScrollIntoViewLink]=\"isActive(subPage.route)\"\n                                (click)=\"closeMenu()\"\n                            >\n                                {{ subPage.title }}\n                                <tui-svg\n                                    *polymorpheusOutlet=\"subPage.icon as icon\"\n                                    class=\"t-icon\"\n                                    [src]=\"icon\"\n                                ></tui-svg>\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", styles: [":host{z-index:1;display:flex;flex-direction:column;text-align:center;background:var(--tui-base-01)}.t-input{margin:1.25rem}.t-navigation{display:flex;max-height:100%;min-height:0;flex:1 1 0;text-align:left}.t-scrollbar{scroll-behavior:smooth;width:100%}@media screen and (prefers-reduced-motion: reduce){.t-scrollbar{scroll-behavior:auto}}.t-items-container{display:flex;flex-direction:column;padding:0 1rem}.t-label{margin-left:.5rem}.t-expand{margin-left:.25rem}.t-section{display:flex;flex-direction:column;align-items:flex-start;margin:-1rem 0 -.5rem}.t-section_bordered{margin:.5rem 0;border-left:1px solid var(--tui-base-03)}.t-subsection{margin-left:.5rem}.t-sublink{-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:1rem 0 0;border:0;background:none;font-size:inherit;line-height:inherit;text-decoration:none;font:var(--tui-font-text-m);margin-left:.5rem}.t-sublink_small{margin-left:1rem;line-height:1.5rem;padding-top:.5rem}.t-sublink_subsection{margin-left:0;line-height:1.6rem}.t-sublink.t-sublink.t-sublink_active{color:var(--tui-text-01)}.t-icon{margin-left:.5rem}.t-chevron{transition-property:transform;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;width:1rem;height:1rem;margin:-.25rem .25rem 0 -.1875rem}.t-chevron_active{transform:rotate(90deg)}\n"], components: [{ type: i1__namespace.TuiInputComponent, selector: "tui-input" }, { type: i2__namespace.TuiDataListComponent, selector: "tui-data-list", inputs: ["role", "emptyContent", "size"] }, { type: i2__namespace.TuiOptionComponent, selector: "button[tuiOption], a[tuiOption]", inputs: ["size", "role", "disabled", "value"] }, { type: i2__namespace.TuiSvgComponent, selector: "tui-svg", inputs: ["src"] }, { type: i2__namespace.TuiScrollbarComponent, selector: "tui-scrollbar", inputs: ["hidden"] }, { type: i1__namespace.TuiAccordionComponent, selector: "tui-accordion", inputs: ["closeOthers", "rounded"] }, { type: i1__namespace.TuiAccordionItemComponent, selector: "tui-accordion-item", inputs: ["noPadding", "showArrow", "borders", "size", "disabled", "disableHover", "open", "async"], outputs: ["openChange"] }, { type: i2__namespace.TuiLinkComponent, selector: "a[tuiLink], button[tuiLink]", inputs: ["pseudo", "icon", "iconAlign", "iconRotated", "mode"], exportAs: ["tuiLink"] }, { type: i2__namespace.TuiExpandComponent, selector: "tui-expand", inputs: ["async", "expanded"] }], directives: [{ type: i1__namespace.TuiInputDirective, selector: "tui-input" }, { type: i2__namespace.TuiTextfieldSizeDirective, selector: "[tuiTextfieldSize]", inputs: ["tuiTextfieldSize"] }, { type: i5__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5__namespace.FormControlDirective, selector: "[formControl]", inputs: ["disabled", "formControl", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i6__namespace$1.TuiAutoFocusDirective, selector: "[tuiAutoFocus]", inputs: ["tuiAutoFocus"] }, { type: i2__namespace.TuiTextfieldCleanerDirective, selector: "[tuiTextfieldCleaner]", inputs: ["tuiTextfieldCleaner"] }, { type: i2__namespace.TuiTextfieldIconLeftDirective, selector: "[tuiTextfieldIconLeft]", inputs: ["tuiTextfieldIconLeft"] }, { type: i2__namespace.TuiTextfieldLabelOutsideDirective, selector: "[tuiTextfieldLabelOutside]", inputs: ["tuiTextfieldLabelOutside"] }, { type: i4__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace.TuiDataListDirective, selector: "ng-template[tuiDataList]" }, { type: i4__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2__namespace.TuiOptGroupDirective, selector: "tui-opt-group", inputs: ["label"] }, { type: i6__namespace.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["routerLink", "target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo"] }, { type: i5__namespace$1.PolymorpheusOutletDirective, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }, { type: i2__namespace.TuiModeDirective, selector: "[tuiMode]", inputs: ["tuiMode"] }, { type: i1__namespace.TuiAccordionItemContentDirective, selector: "ng-template[tuiAccordionItemContent]" }, { type: i4__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i6__namespace.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "routerLinkActive"], exportAs: ["routerLinkActive"] }, { type: i8__namespace.TuiScrollIntoViewLinkDirective, selector: "[tuiScrollIntoViewLink]", inputs: ["tuiScrollIntoViewLink"] }], pipes: { "async": i4__namespace.AsyncPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
     __decorate([
         i6.tuiPure
     ], TuiDocNavigationComponent.prototype, "filterItems", null);