@taiga-ui/addon-doc 3.18.0 → 3.19.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('rxjs'), require('rxjs/operators'), require('markdown-it'), 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/i18n'), require('@angular/platform-browser'), require('@taiga-ui/addon-mobile')) :
     typeof define === 'function' && define.amd ? define('@taiga-ui/addon-doc', ['exports', '@angular/core', 'rxjs', 'rxjs/operators', 'markdown-it', '@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/i18n', '@angular/platform-browser', '@taiga-ui/addon-mobile'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global["taiga-ui"] = global["taiga-ui"] || {}, global["taiga-ui"]["addon-doc"] = {}), global.ng.core, global.rxjs, global.rxjs.operators, global.MarkdownIt, global.ng.common, global.i2, global.i6, global.i1, global.i2$1, global.ng.forms, global.ng.router, global.ng.animations, global.ng.cdk.clipboard, global.common, global.i6$2, global.i5$2, global.ng.platformBrowser, global.i4));
-})(this, (function (exports, i0, i9, operators, MarkdownIt, i5, i2, i6, i1, i2$1, i5$1, i6$1, animations, i8, common, i6$2, i5$2, i8$1, i4) { 'use strict';
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global["taiga-ui"] = global["taiga-ui"] || {}, global["taiga-ui"]["addon-doc"] = {}), global.ng.core, global.rxjs, global.rxjs.operators, global.MarkdownIt, global.ng.common, global.i2, global.i6, global.i1, global.i2$1, global.ng.forms, global.ng.router, global.ng.animations, global.ng.cdk.clipboard, global.common, global.i6$2, global.i5$1, global.ng.platformBrowser, global.i4$1));
+})(this, (function (exports, i0, i9, operators, MarkdownIt, i4, i2, i6, i1, i2$1, i5, i6$1, animations, i8, common, i6$2, i5$1, i8$1, i4$1) { 'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -27,18 +27,18 @@
     var i0__namespace = /*#__PURE__*/_interopNamespace(i0);
     var i9__namespace = /*#__PURE__*/_interopNamespace(i9);
     var MarkdownIt__default = /*#__PURE__*/_interopDefaultLegacy(MarkdownIt);
-    var i5__namespace = /*#__PURE__*/_interopNamespace(i5);
+    var i4__namespace = /*#__PURE__*/_interopNamespace(i4);
     var i2__namespace = /*#__PURE__*/_interopNamespace(i2);
     var i6__namespace$1 = /*#__PURE__*/_interopNamespace(i6);
     var i1__namespace = /*#__PURE__*/_interopNamespace(i1);
     var i2__namespace$1 = /*#__PURE__*/_interopNamespace(i2$1);
-    var i5__namespace$1 = /*#__PURE__*/_interopNamespace(i5$1);
+    var i5__namespace = /*#__PURE__*/_interopNamespace(i5);
     var i6__namespace = /*#__PURE__*/_interopNamespace(i6$1);
     var i8__namespace = /*#__PURE__*/_interopNamespace(i8);
     var i6__namespace$2 = /*#__PURE__*/_interopNamespace(i6$2);
-    var i5__namespace$2 = /*#__PURE__*/_interopNamespace(i5$2);
+    var i5__namespace$1 = /*#__PURE__*/_interopNamespace(i5$1);
     var i8__namespace$1 = /*#__PURE__*/_interopNamespace(i8$1);
-    var i4__namespace = /*#__PURE__*/_interopNamespace(i4);
+    var i4__namespace$1 = /*#__PURE__*/_interopNamespace(i4$1);
 
     function tuiTryParseMarkdownCodeBlock(text) {
         if (text === void 0) { text = ""; }
@@ -58,7 +58,7 @@
     var TUI_DOC_EXAMPLE_CONTENT_PROCESSOR = new i0.InjectionToken("[TUI_DOC_EXAMPLE_CONTENT_PROCESSOR]: Processes content in example", { factory: function () { return i9.identity; } });
     var TUI_DOC_EXAMPLE_MARKDOWN_CODE_PROCESSOR = new i0.InjectionToken("[TUI_DOC_EXAMPLE_MARKDOWN_CODE_PROCESSOR]: Processes markdown in code block", { factory: function () { return tuiTryParseMarkdownCodeBlock; } });
 
-    /******************************************************************************
+    /*! *****************************************************************************
     Copyright (c) Microsoft Corporation.
 
     Permission to use, copy, modify, and/or distribute this software for any
@@ -156,7 +156,7 @@
         function step(op) {
             if (f)
                 throw new TypeError("Generator is already executing.");
-            while (g && (g = 0, op[0] && (_ = 0)), _)
+            while (_)
                 try {
                     if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done)
                         return t;
@@ -220,11 +220,7 @@
     var __createBinding = Object.create ? (function (o, m, k, k2) {
         if (k2 === undefined)
             k2 = k;
-        var desc = Object.getOwnPropertyDescriptor(m, k);
-        if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-            desc = { enumerable: true, get: function () { return m[k]; } };
-        }
-        Object.defineProperty(o, k2, desc);
+        Object.defineProperty(o, k2, { enumerable: true, get: function () { return m[k]; } });
     }) : (function (o, m, k, k2) {
         if (k2 === undefined)
             k2 = k;
@@ -297,7 +293,7 @@
                     ar[i] = from[i];
                 }
             }
-        return to.concat(ar || Array.prototype.slice.call(from));
+        return to.concat(ar || from);
     }
     function __await(v) {
         return this instanceof __await ? (this.v = v, this) : new __await(v);
@@ -379,11 +375,6 @@
             throw new TypeError("Cannot write private member to an object whose class did not declare it");
         return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
     }
-    function __classPrivateFieldIn(state, receiver) {
-        if (receiver === null || (typeof receiver !== "object" && typeof receiver !== "function"))
-            throw new TypeError("Cannot use 'in' operator on non-object");
-        return typeof state === "function" ? receiver === state : state.has(receiver);
-    }
 
     function tuiRawLoad(content) {
         return __awaiter(this, void 0, void 0, function () {
@@ -429,9 +420,9 @@
         });
         return TuiDocCodeComponent;
     }());
-    TuiDocCodeComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiDocCodeComponent, deps: [{ token: TUI_DOC_EXAMPLE_MARKDOWN_CODE_PROCESSOR }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    TuiDocCodeComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TuiDocCodeComponent, selector: "tui-doc-code", inputs: { filename: "filename", code: "code" }, host: { properties: { "class._has-filename": "this.hasFilename" } }, ngImport: i0__namespace, template: "<!-- eslint-disable @html-eslint/element-newline -->\n<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><code [lineNumbers]=\"true\" [highlight]=\"content\"></code></pre>\n", styles: [":host{display:block}.t-header{font:var(--tui-font-text-s);font-weight:bold}.t-code{margin:0}.t-code+.t-code{margin-top:1rem}.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:2.667rem 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"], directives: [{ type: i5__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2__namespace.Highlight, selector: "[highlight]", inputs: ["highlight", "languages", "lineNumbers"], outputs: ["highlighted"] }], pipes: { "async": i5__namespace.AsyncPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiDocCodeComponent, decorators: [{
+    TuiDocCodeComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiDocCodeComponent, deps: [{ token: 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: "<!-- eslint-disable @html-eslint/element-newline -->\n<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><code [lineNumbers]=\"true\" [highlight]=\"content\"></code></pre>\n", styles: [":host{display:block}.t-header{font:var(--tui-font-text-s);font-weight:bold}.t-code{margin:0}.t-code+.t-code{margin-top:1rem}.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:2.667rem 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"], directives: [{ type: i4__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2__namespace.Highlight, selector: "[highlight]", inputs: ["highlight", "languages", "lineNumbers"], outputs: ["highlighted"] }], 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',
@@ -458,13 +449,13 @@
         }
         return TuiDocCodeModule;
     }());
-    TuiDocCodeModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiDocCodeModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    TuiDocCodeModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiDocCodeModule, declarations: [TuiDocCodeComponent], imports: [i5.CommonModule, i2.HighlightModule], exports: [TuiDocCodeComponent] });
-    TuiDocCodeModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiDocCodeModule, imports: [[i5.CommonModule, i2.HighlightModule]] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiDocCodeModule, decorators: [{
+    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.HighlightModule], exports: [TuiDocCodeComponent] });
+    TuiDocCodeModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiDocCodeModule, imports: [[i4.CommonModule, i2.HighlightModule]] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiDocCodeModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
-                        imports: [i5.CommonModule, i2.HighlightModule],
+                        imports: [i4.CommonModule, i2.HighlightModule],
                         declarations: [TuiDocCodeComponent],
                         exports: [TuiDocCodeComponent],
                     }]
@@ -488,12 +479,12 @@
         };
         return TuiDocCopyComponent;
     }());
-    TuiDocCopyComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiDocCopyComponent, deps: [{ token: i1.TUI_COPY_TEXTS }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    TuiDocCopyComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TuiDocCopyComponent, selector: "tui-doc-copy", providers: [i6.TuiDestroyService], ngImport: i0__namespace, 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\n        class=\"t-content\"\n        [class.t-content_moved]=\"copied$ | async\"\n    >\n        <span\n            class=\"t-initial\"\n            [attr.data-text]=\"texts[0]\"\n        >\n            <ng-content></ng-content>\n        </span>\n        {{ texts[1] }}\n    </span>\n</button>\n", styles: [":host{position:relative;display:inline-block;vertical-align:middle}.t-copy{transition-property:background;transition-duration:var(--tui-duration, .3s);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, .3s);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)}\n"], components: [{ type: i2__namespace$1.TuiButtonComponent, selector: "button[tuiButton], button[tuiIconButton], a[tuiButton], a[tuiIconButton]", inputs: ["appearance", "disabled", "icon", "iconRight", "shape", "showLoader", "size"] }], directives: [{ type: i5__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i5__namespace.AsyncPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    TuiDocCopyComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiDocCopyComponent, deps: [{ token: i1.TUI_COPY_TEXTS }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    TuiDocCopyComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TuiDocCopyComponent, selector: "tui-doc-copy", providers: [i6.TuiDestroyService], ngImport: i0__namespace, 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\n        class=\"t-content\"\n        [class.t-content_moved]=\"copied$ | async\"\n    >\n        <span\n            class=\"t-initial\"\n            [attr.data-text]=\"texts[0]\"\n        >\n            <ng-content></ng-content>\n        </span>\n        {{ texts[1] }}\n    </span>\n</button>\n", styles: [":host{position:relative;display:inline-block;vertical-align:middle}.t-copy{transition-property:background;transition-duration:var(--tui-duration, .3s);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, .3s);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)}\n"], components: [{ type: i2__namespace$1.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"] }], pipes: { "async": i4__namespace.AsyncPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
     __decorate([
         i6.tuiPure
     ], TuiDocCopyComponent.prototype, "copied$", null);
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiDocCopyComponent, decorators: [{
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiDocCopyComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'tui-doc-copy',
@@ -514,13 +505,13 @@
         }
         return TuiDocCopyModule;
     }());
-    TuiDocCopyModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiDocCopyModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    TuiDocCopyModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiDocCopyModule, declarations: [TuiDocCopyComponent], imports: [i5.CommonModule, i2$1.TuiButtonModule], exports: [TuiDocCopyComponent] });
-    TuiDocCopyModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiDocCopyModule, imports: [[i5.CommonModule, i2$1.TuiButtonModule]] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiDocCopyModule, decorators: [{
+    TuiDocCopyModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiDocCopyModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+    TuiDocCopyModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiDocCopyModule, declarations: [TuiDocCopyComponent], imports: [i4.CommonModule, i2$1.TuiButtonModule], exports: [TuiDocCopyComponent] });
+    TuiDocCopyModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiDocCopyModule, imports: [[i4.CommonModule, i2$1.TuiButtonModule]] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiDocCopyModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
-                        imports: [i5.CommonModule, i2$1.TuiButtonModule],
+                        imports: [i4.CommonModule, i2$1.TuiButtonModule],
                         declarations: [TuiDocCopyComponent],
                         exports: [TuiDocCopyComponent],
                     }]
@@ -657,7 +648,7 @@
         TuiDocDemoComponent.prototype.createForm = function () {
             var _a = this, control = _a.control, updateOn = _a.updateOn;
             if (control) {
-                this.testForm = new i5$1.FormGroup({ testValue: control }, { updateOn: updateOn });
+                this.testForm = new i5.FormGroup({ testValue: control }, { updateOn: updateOn });
             }
         };
         TuiDocDemoComponent.prototype.getUrlTree = function () {
@@ -665,18 +656,18 @@
         };
         return TuiDocDemoComponent;
     }());
-    TuiDocDemoComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiDocDemoComponent, deps: [{ token: i6.TUI_IS_MOBILE }, { token: i0.ElementRef }, { token: i5.Location }, { token: i6$1.UrlSerializer }, { token: TUI_DOC_DEMO_TEXTS }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    TuiDocDemoComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TuiDocDemoComponent, selector: "tui-doc-demo", inputs: { control: "control" }, host: { listeners: { "window:resize": "onResize()", "document:mouseup.silent": "onMouseUp()" } }, providers: [
+    TuiDocDemoComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiDocDemoComponent, deps: [{ token: i6.TUI_IS_MOBILE }, { token: i0.ElementRef }, { token: i4.Location }, { token: i6$1.UrlSerializer }, { token: TUI_DOC_DEMO_TEXTS }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    TuiDocDemoComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TuiDocDemoComponent, selector: "tui-doc-demo", inputs: { control: "control" }, host: { listeners: { "window:resize": "onResize()", "document:mouseup.silent": "onMouseUp()" } }, providers: [
             i6.TuiDestroyService,
             {
                 provide: i2$1.TuiModeDirective,
                 useExisting: i0.forwardRef(function () { return TuiDocDemoComponent; }),
             },
-        ], queries: [{ propertyName: "template", first: true, predicate: i0.TemplateRef, descendants: true }], viewQueries: [{ propertyName: "resizeable", first: true, predicate: i6.TuiResizeableDirective, descendants: true, static: true }, { propertyName: "content", first: true, predicate: ["content"], descendants: true, static: true }, { propertyName: "resizer", first: true, predicate: ["resizer"], descendants: true, static: true }], ngImport: i0__namespace, template: "<div\n    class=\"t-bg-toggle\"\n    [tuiMode]=\"null\"\n>\n    <ng-template #tooltip>\n        {{ texts[0] }}\n        <a\n            tuiLink\n            tuiMode=\"onDark\"\n            routerLink=\"/directives/mode\"\n        >\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            [ngModel]=\"mode\"\n            (ngModelChange)=\"onModeChange($event)\"\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\n            describeId=\"form\"\n            [content]=\"tooltip\"\n        ></tui-tooltip>\n        <div\n            tuiGroup\n            class=\"t-group\"\n            [collapsed]=\"true\"\n        >\n            <tui-radio-block\n                size=\"s\"\n                nativeId=\"form\"\n                class=\"tui-group__auto-width-item\"\n                [item]=\"null\"\n                [hideRadio]=\"true\"\n                [ngModel]=\"mode\"\n                (ngModelChange)=\"onModeChange($event)\"\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                [ngModel]=\"mode\"\n                (ngModelChange)=\"onModeChange($event)\"\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                [ngModel]=\"mode\"\n                (ngModelChange)=\"onModeChange($event)\"\n            >\n                onLight\n            </tui-radio-block>\n        </div>\n    </ng-template>\n    <tui-checkbox-labeled\n        size=\"m\"\n        class=\"t-checkbox\"\n        [(ngModel)]=\"opaque\"\n    >\n        {{ texts[1] }}\n    </tui-checkbox-labeled>\n</div>\n<div\n    tuiResizeable\n    class=\"t-wrapper\"\n    [class.t-wrapper_dark]=\"mode === 'onDark'\"\n    [class.t-wrapper_gray]=\"mode === 'onLight'\"\n    [class.t-wrapper_transparent]=\"!opaque\"\n>\n    <div\n        id=\"demo-content\"\n        class=\"t-content\"\n    >\n        <div #content>\n            <form\n                *ngIf=\"testForm\"\n                class=\"t-form\"\n                [formGroup]=\"testForm\"\n            >\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                    automation-id=\"tui-demo-button__toggle-details\"\n                    class=\"t-button\"\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\n                    class=\"t-expand\"\n                    [expanded]=\"expanded\"\n                >\n                    <ng-template tuiExpandContent>\n                        <pre class=\"t-value\">Form data: {{ testForm.value | json }}</pre>\n                        <div\n                            tuiGroup\n                            class=\"t-form-controls\"\n                        >\n                            <tui-select\n                                tuiTextfieldSize=\"s\"\n                                automation-id=\"tui-demo-select__expand-update-on\"\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                                automation-id=\"tui-demo-button__reset-state\"\n                                class=\"tui-group__auto-width-item\"\n                            >\n                                Reset\n                            </button>\n                            <button\n                                tuiButton\n                                type=\"submit\"\n                                size=\"s\"\n                                automation-id=\"tui-demo-button__submit-state\"\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    </div>\n    <div\n        #resizer\n        class=\"t-resizer\"\n        [tuiResizer]=\"[1, 0]\"\n        (tuiSizeChange)=\"updateWidth($event[0])\"\n    ></div>\n</div>\n", styles: [":host{position:relative;display:block;min-width:100%;margin:1.5rem 0}.t-bg-toggle{position:absolute;bottom:calc(100% + .75rem);display:flex;align-items:center;justify-content:flex-end;pointer-events:none;width:100%}.t-bg-toggle>*{pointer-events:auto}.t-wrapper{box-shadow:0 1.5rem 1rem rgba(0,0,0,.03),0 .75rem .75rem rgba(0,0,0,.04),0 .25rem .375rem rgba(0,0,0,.05);display:flex;border:1px solid var(--tui-base-03);border-radius:var(--tui-radius-m);max-width:100%;min-height:6rem;width:100%;min-width:10rem;background-color:var(--tui-base-01);overflow:hidden}.t-wrapper.t-wrapper_transparent{background-image:linear-gradient(45deg,var(--tui-base-02) 25%,transparent 25%),linear-gradient(-45deg,var(--tui-base-02) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--tui-base-02) 75%),linear-gradient(-45deg,transparent 75%,var(--tui-base-02) 75%);background-size:1.25rem 1.25rem;background-position:0 0,0 .625rem,.625rem -.625rem,-.625rem 0}.t-wrapper.t-wrapper_dark{background-color:#454e58;color:var(--tui-base-01)}.t-wrapper.t-wrapper_gray{background-color:#e5e7ea}.t-wrapper.t-wrapper_dark.t-wrapper_transparent{background-image:linear-gradient(45deg,var(--tui-focus) 25%,transparent 25%),linear-gradient(-45deg,var(--tui-focus) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--tui-focus) 75%),linear-gradient(-45deg,transparent 75%,var(--tui-focus) 75%)}.t-wrapper.t-wrapper_gray.t-wrapper_transparent{background-image:linear-gradient(45deg,var(--tui-base-05) 25%,transparent 25%),linear-gradient(-45deg,var(--tui-base-05) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--tui-base-05) 75%),linear-gradient(-45deg,transparent 75%,var(--tui-base-05) 75%)}:host-context(tui-root._mobile) .t-wrapper{min-height:auto}.t-content{flex:1 1 0;min-width:0;padding:1.5rem;box-sizing:border-box;overflow:hidden}:host-context(tui-root._mobile) .t-content{padding:1rem}.t-form{display:flex;flex-wrap:wrap;align-items:flex-start}.t-input-wrapper{width:100%;margin-bottom:.5rem}.t-expand{width:100%}.t-icon{transition-property:transform;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out}.t-icon_rotated{transform:rotate(180deg)}.t-value{flex:1;background:var(--tui-clear-inverse);padding:.75rem;border-radius:.25rem}.t-mode{width:12.5rem}.t-select{max-width:15rem}.t-resizer{box-shadow:0 1.5rem 1rem rgba(0,0,0,.03),0 .75rem .75rem rgba(0,0,0,.04),0 .25rem .375rem rgba(0,0,0,.05);position:relative;width:3.5rem;min-height:inherit;display:flex;align-items:center;justify-content:center;flex-shrink:0;border-left:1px solid var(--tui-base-03);outline:none;background:var(--tui-base-01);color:var(--tui-text-01)}.t-resizer:before,.t-resizer:after{content:\"\";position:absolute;top:.75rem;left:50%;bottom:calc(50% + 1rem);width:1px;background:var(--tui-base-04);box-shadow:-.25rem 0 var(--tui-base-04);transform:translate(0)}.t-resizer:after{bottom:.75rem;top:calc(50% + 1rem)}:host-context(tui-root._mobile) .t-resizer{display:none}.t-resizer-text{font:var(--tui-font-text-s);position:relative;z-index:1;padding:.75rem;background:var(--tui-base-01)}.wrapper_light .t-resizer-text{background:#3e464e}.t-group,.t-checkbox{margin-left:.75rem}.t-button,.t-form-controls{margin-top:.75rem}@supports ((position: -webkit-sticky) or (position: sticky)){@media screen and (min-height: 37.5rem){:host{position:-webkit-sticky;position:sticky;top:4.625rem;z-index:2}}}\n"], components: [{ type: i2__namespace$1.TuiLinkComponent, selector: "a[tuiLink], button[tuiLink]", inputs: ["pseudo", "icon", "iconAlign", "iconRotated", "mode"], exportAs: ["tuiLink"] }, { type: i1__namespace.TuiSelectComponent, selector: "tui-select", inputs: ["stringify", "identityMatcher", "valueContent"] }, { type: i1__namespace.TuiDataListWrapperComponent, selector: "tui-data-list-wrapper:not([labels])", inputs: ["items"] }, { type: i2__namespace$1.TuiTooltipComponent, selector: "tui-tooltip", inputs: ["content", "direction", "appearance", "showDelay", "hideDelay", "describeId"] }, { type: i1__namespace.TuiRadioBlockComponent, selector: "tui-radio-block", inputs: ["item", "identityMatcher", "contentAlign", "size", "hideRadio", "pseudoDisabled"] }, { type: i1__namespace.TuiCheckboxLabeledComponent, selector: "tui-checkbox-labeled", inputs: ["size"] }, { type: i2__namespace$1.TuiButtonComponent, selector: "button[tuiButton], button[tuiIconButton], a[tuiButton], a[tuiIconButton]", inputs: ["appearance", "disabled", "icon", "iconRight", "shape", "showLoader", "size"] }, { type: i2__namespace$1.TuiSvgComponent, selector: "tui-svg", inputs: ["src"] }, { type: i2__namespace$1.TuiExpandComponent, selector: "tui-expand", inputs: ["async", "expanded"] }], directives: [{ type: i2__namespace$1.TuiModeDirective, selector: "[tuiMode]", inputs: ["tuiMode"] }, { type: i6__namespace.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["routerLink", "target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo"] }, { type: i5__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace.TuiSelectDirective, selector: "tui-select" }, { type: i2__namespace$1.TuiTextfieldSizeDirective, selector: "[tuiTextfieldSize]", inputs: ["tuiTextfieldSize"] }, { type: i2__namespace$1.TuiTextfieldCleanerDirective, selector: "[tuiTextfieldCleaner]", inputs: ["tuiTextfieldCleaner"] }, { type: i2__namespace$1.TuiHintOptionsDirective, selector: "[tuiHintContent]", inputs: ["tuiHintContent", "tuiHintDirection", "tuiHintAppearance", "tuiHintShowDelay", "tuiHintHideDelay"] }, { type: i5__namespace$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5__namespace$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i2__namespace$1.TuiDataListDirective, selector: "ng-template[tuiDataList]" }, { type: i2__namespace$1.TuiGroupDirective, selector: "[tuiGroup]:not(ng-container)", inputs: ["orientation", "adaptive", "collapsed", "rounded", "size"] }, { type: i6__namespace$1.TuiResizeableDirective, selector: "[tuiResizeable]" }, { type: i5__namespace$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i5__namespace$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i5__namespace$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i5__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2__namespace$1.TuiExpandContentDirective, selector: "[tuiExpandContent]" }, { type: i6__namespace$1.TuiResizerDirective, selector: "[tuiResizer]", inputs: ["tuiResizer"], outputs: ["tuiSizeChange"] }], pipes: { "json": i5__namespace.JsonPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+        ], queries: [{ propertyName: "template", first: true, predicate: i0.TemplateRef, descendants: true }], viewQueries: [{ propertyName: "resizeable", first: true, predicate: i6.TuiResizeableDirective, descendants: true, static: true }, { propertyName: "content", first: true, predicate: ["content"], descendants: true, static: true }, { propertyName: "resizer", first: true, predicate: ["resizer"], descendants: true, static: true }], ngImport: i0__namespace, template: "<div\n    class=\"t-bg-toggle\"\n    [tuiMode]=\"null\"\n>\n    <ng-template #tooltip>\n        {{ texts[0] }}\n        <a\n            tuiLink\n            tuiMode=\"onDark\"\n            routerLink=\"/directives/mode\"\n        >\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            [ngModel]=\"mode\"\n            (ngModelChange)=\"onModeChange($event)\"\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\n            describeId=\"form\"\n            [content]=\"tooltip\"\n        ></tui-tooltip>\n        <div\n            tuiGroup\n            class=\"t-group\"\n            [collapsed]=\"true\"\n        >\n            <tui-radio-block\n                size=\"s\"\n                nativeId=\"form\"\n                class=\"tui-group__auto-width-item\"\n                [item]=\"null\"\n                [hideRadio]=\"true\"\n                [ngModel]=\"mode\"\n                (ngModelChange)=\"onModeChange($event)\"\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                [ngModel]=\"mode\"\n                (ngModelChange)=\"onModeChange($event)\"\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                [ngModel]=\"mode\"\n                (ngModelChange)=\"onModeChange($event)\"\n            >\n                onLight\n            </tui-radio-block>\n        </div>\n    </ng-template>\n    <tui-checkbox-labeled\n        size=\"m\"\n        class=\"t-checkbox\"\n        [(ngModel)]=\"opaque\"\n    >\n        {{ texts[1] }}\n    </tui-checkbox-labeled>\n</div>\n<div\n    tuiResizeable\n    class=\"t-wrapper\"\n    [class.t-wrapper_dark]=\"mode === 'onDark'\"\n    [class.t-wrapper_gray]=\"mode === 'onLight'\"\n    [class.t-wrapper_transparent]=\"!opaque\"\n>\n    <div\n        id=\"demo-content\"\n        class=\"t-content\"\n    >\n        <div #content>\n            <form\n                *ngIf=\"testForm\"\n                class=\"t-form\"\n                [formGroup]=\"testForm\"\n            >\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                    automation-id=\"tui-demo-button__toggle-details\"\n                    class=\"t-button\"\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\n                    class=\"t-expand\"\n                    [expanded]=\"expanded\"\n                >\n                    <ng-template tuiExpandContent>\n                        <pre class=\"t-value\">Form data: {{ testForm.value | json }}</pre>\n                        <div\n                            tuiGroup\n                            class=\"t-form-controls\"\n                        >\n                            <tui-select\n                                tuiTextfieldSize=\"s\"\n                                automation-id=\"tui-demo-select__expand-update-on\"\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                                automation-id=\"tui-demo-button__reset-state\"\n                                class=\"tui-group__auto-width-item\"\n                            >\n                                Reset\n                            </button>\n                            <button\n                                tuiButton\n                                type=\"submit\"\n                                size=\"s\"\n                                automation-id=\"tui-demo-button__submit-state\"\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    </div>\n    <div\n        #resizer\n        class=\"t-resizer\"\n        [tuiResizer]=\"[1, 0]\"\n        (tuiSizeChange)=\"updateWidth($event[0])\"\n    ></div>\n</div>\n", styles: [":host{position:relative;display:block;min-width:100%;margin:1.5rem 0}.t-bg-toggle{position:absolute;bottom:calc(100% + .75rem);display:flex;align-items:center;justify-content:flex-end;pointer-events:none;width:100%}.t-bg-toggle>*{pointer-events:auto}.t-wrapper{box-shadow:0 1.5rem 1rem rgba(0,0,0,.03),0 .75rem .75rem rgba(0,0,0,.04),0 .25rem .375rem rgba(0,0,0,.05);display:flex;border:1px solid var(--tui-base-03);border-radius:var(--tui-radius-m);max-width:100%;min-height:6rem;width:100%;min-width:10rem;background-color:var(--tui-base-01);overflow:hidden}.t-wrapper.t-wrapper_transparent{background-image:linear-gradient(45deg,var(--tui-base-02) 25%,transparent 25%),linear-gradient(-45deg,var(--tui-base-02) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--tui-base-02) 75%),linear-gradient(-45deg,transparent 75%,var(--tui-base-02) 75%);background-size:1.25rem 1.25rem;background-position:0 0,0 .625rem,.625rem -.625rem,-.625rem 0}.t-wrapper.t-wrapper_dark{background-color:#454e58;color:var(--tui-base-01)}.t-wrapper.t-wrapper_gray{background-color:#e5e7ea}.t-wrapper.t-wrapper_dark.t-wrapper_transparent{background-image:linear-gradient(45deg,var(--tui-focus) 25%,transparent 25%),linear-gradient(-45deg,var(--tui-focus) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--tui-focus) 75%),linear-gradient(-45deg,transparent 75%,var(--tui-focus) 75%)}.t-wrapper.t-wrapper_gray.t-wrapper_transparent{background-image:linear-gradient(45deg,var(--tui-base-05) 25%,transparent 25%),linear-gradient(-45deg,var(--tui-base-05) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--tui-base-05) 75%),linear-gradient(-45deg,transparent 75%,var(--tui-base-05) 75%)}:host-context(tui-root._mobile) .t-wrapper{min-height:auto}.t-content{flex:1 1 0;min-width:0;padding:1.5rem;box-sizing:border-box;overflow:hidden}:host-context(tui-root._mobile) .t-content{padding:1rem}.t-form{display:flex;flex-wrap:wrap;align-items:flex-start}.t-input-wrapper{width:100%;margin-bottom:.5rem}.t-expand{width:100%}.t-icon{transition-property:transform;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out}.t-icon_rotated{transform:rotate(180deg)}.t-value{flex:1;background:var(--tui-clear-inverse);padding:.75rem;border-radius:.25rem}.t-mode{width:12.5rem}.t-select{max-width:15rem}.t-resizer{box-shadow:0 1.5rem 1rem rgba(0,0,0,.03),0 .75rem .75rem rgba(0,0,0,.04),0 .25rem .375rem rgba(0,0,0,.05);position:relative;width:3.5rem;min-height:inherit;display:flex;align-items:center;justify-content:center;flex-shrink:0;border-left:1px solid var(--tui-base-03);outline:none;background:var(--tui-base-01);color:var(--tui-text-01)}.t-resizer:before,.t-resizer:after{content:\"\";position:absolute;top:.75rem;left:50%;bottom:calc(50% + 1rem);width:1px;background:var(--tui-base-04);box-shadow:-.25rem 0 var(--tui-base-04);transform:translate(0)}.t-resizer:after{bottom:.75rem;top:calc(50% + 1rem)}:host-context(tui-root._mobile) .t-resizer{display:none}.t-resizer-text{font:var(--tui-font-text-s);position:relative;z-index:1;padding:.75rem;background:var(--tui-base-01)}.wrapper_light .t-resizer-text{background:#3e464e}.t-group,.t-checkbox{margin-left:.75rem}.t-button,.t-form-controls{margin-top:.75rem}@supports ((position: -webkit-sticky) or (position: sticky)){@media screen and (min-height: 37.5rem){:host{position:-webkit-sticky;position:sticky;top:4.625rem;z-index:2}}}\n"], components: [{ type: i2__namespace$1.TuiLinkComponent, selector: "a[tuiLink], button[tuiLink]", inputs: ["pseudo", "icon", "iconAlign", "iconRotated", "mode"], exportAs: ["tuiLink"] }, { type: i1__namespace.TuiSelectComponent, selector: "tui-select", inputs: ["stringify", "identityMatcher", "valueContent"] }, { type: i1__namespace.TuiDataListWrapperComponent, selector: "tui-data-list-wrapper:not([labels])", inputs: ["items"] }, { type: i2__namespace$1.TuiTooltipComponent, selector: "tui-tooltip", inputs: ["content", "direction", "appearance", "showDelay", "hideDelay", "describeId"] }, { type: i1__namespace.TuiRadioBlockComponent, selector: "tui-radio-block", inputs: ["item", "identityMatcher", "contentAlign", "size", "hideRadio", "pseudoDisabled"] }, { type: i1__namespace.TuiCheckboxLabeledComponent, selector: "tui-checkbox-labeled", inputs: ["size"] }, { type: i2__namespace$1.TuiButtonComponent, selector: "button[tuiButton], button[tuiIconButton], a[tuiButton], a[tuiIconButton]", inputs: ["appearance", "disabled", "icon", "iconRight", "shape", "showLoader", "size"] }, { type: i2__namespace$1.TuiSvgComponent, selector: "tui-svg", inputs: ["src"] }, { type: i2__namespace$1.TuiExpandComponent, selector: "tui-expand", inputs: ["async", "expanded"] }], directives: [{ type: i2__namespace$1.TuiModeDirective, selector: "[tuiMode]", inputs: ["tuiMode"] }, { type: i6__namespace.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["routerLink", "target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo"] }, { type: i4__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace.TuiSelectDirective, selector: "tui-select" }, { type: i2__namespace$1.TuiTextfieldSizeDirective, selector: "[tuiTextfieldSize]", inputs: ["tuiTextfieldSize"] }, { type: i2__namespace$1.TuiTextfieldCleanerDirective, selector: "[tuiTextfieldCleaner]", inputs: ["tuiTextfieldCleaner"] }, { type: i2__namespace$1.TuiHintOptionsDirective, selector: "[tuiHintContent]", inputs: ["tuiHintContent", "tuiHintDirection", "tuiHintAppearance", "tuiHintShowDelay", "tuiHintHideDelay"] }, { type: i5__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i2__namespace$1.TuiDataListDirective, selector: "ng-template[tuiDataList]" }, { type: i2__namespace$1.TuiGroupDirective, selector: "[tuiGroup]:not(ng-container)", inputs: ["orientation", "adaptive", "collapsed", "rounded", "size"] }, { type: i6__namespace$1.TuiResizeableDirective, selector: "[tuiResizeable]" }, { type: i5__namespace.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i5__namespace.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i5__namespace.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i4__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2__namespace$1.TuiExpandContentDirective, selector: "[tuiExpandContent]" }, { type: i6__namespace$1.TuiResizerDirective, selector: "[tuiResizer]", inputs: ["tuiResizer"], outputs: ["tuiSizeChange"] }], pipes: { "json": i4__namespace.JsonPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
     __decorate([
         i6.tuiPure
     ], TuiDocDemoComponent.prototype, "updateUrl", null);
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiDocDemoComponent, decorators: [{
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiDocDemoComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'tui-doc-demo',
@@ -698,9 +689,9 @@
                         }] }, { type: i0__namespace.ElementRef, decorators: [{
                             type: i0.Inject,
                             args: [i0.ElementRef]
-                        }] }, { type: i5__namespace.Location, decorators: [{
+                        }] }, { type: i4__namespace.Location, decorators: [{
                             type: i0.Inject,
-                            args: [i5.Location]
+                            args: [i4.Location]
                         }] }, { type: i6__namespace.UrlSerializer, decorators: [{
                             type: i0.Inject,
                             args: [i6$1.UrlSerializer]
@@ -735,10 +726,10 @@
         }
         return TuiDocDemoModule;
     }());
-    TuiDocDemoModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiDocDemoModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    TuiDocDemoModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiDocDemoModule, declarations: [TuiDocDemoComponent], imports: [i5.CommonModule,
-            i5$1.ReactiveFormsModule,
-            i5$1.FormsModule,
+    TuiDocDemoModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiDocDemoModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+    TuiDocDemoModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiDocDemoModule, declarations: [TuiDocDemoComponent], imports: [i4.CommonModule,
+            i5.ReactiveFormsModule,
+            i5.FormsModule,
             i6$1.RouterModule,
             i2$1.TuiLinkModule,
             i2$1.TuiButtonModule,
@@ -755,10 +746,10 @@
             i2$1.TuiTextfieldControllerModule,
             i2$1.TuiHintModule,
             i6.TuiResizerModule], exports: [TuiDocDemoComponent] });
-    TuiDocDemoModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiDocDemoModule, imports: [[
-                i5.CommonModule,
-                i5$1.ReactiveFormsModule,
-                i5$1.FormsModule,
+    TuiDocDemoModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiDocDemoModule, imports: [[
+                i4.CommonModule,
+                i5.ReactiveFormsModule,
+                i5.FormsModule,
                 i6$1.RouterModule,
                 i2$1.TuiLinkModule,
                 i2$1.TuiButtonModule,
@@ -776,13 +767,13 @@
                 i2$1.TuiHintModule,
                 i6.TuiResizerModule,
             ]] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiDocDemoModule, decorators: [{
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiDocDemoModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
                         imports: [
-                            i5.CommonModule,
-                            i5$1.ReactiveFormsModule,
-                            i5$1.FormsModule,
+                            i4.CommonModule,
+                            i5.ReactiveFormsModule,
+                            i5.FormsModule,
                             i6$1.RouterModule,
                             i2$1.TuiLinkModule,
                             i2$1.TuiButtonModule,
@@ -938,9 +929,9 @@
         };
         return TuiDocDocumentationPropertyConnectorDirective;
     }());
-    TuiDocDocumentationPropertyConnectorDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiDocDocumentationPropertyConnectorDirective, deps: [{ token: i0.TemplateRef }, { token: i5.Location }, { token: i6$1.ActivatedRoute }, { token: i6$1.UrlSerializer }], target: i0__namespace.ɵɵFactoryTarget.Directive });
-    TuiDocDocumentationPropertyConnectorDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: TuiDocDocumentationPropertyConnectorDirective, selector: "ng-template[documentationPropertyName]", inputs: { documentationPropertyName: "documentationPropertyName", documentationPropertyMode: "documentationPropertyMode", documentationPropertyType: "documentationPropertyType", documentationPropertyValue: "documentationPropertyValue", documentationPropertyDeprecated: "documentationPropertyDeprecated", documentationPropertyValues: "documentationPropertyValues" }, outputs: { documentationPropertyValueChange: "documentationPropertyValueChange" }, exportAs: ["documentationProperty"], usesOnChanges: true, ngImport: i0__namespace });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiDocDocumentationPropertyConnectorDirective, decorators: [{
+    TuiDocDocumentationPropertyConnectorDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiDocDocumentationPropertyConnectorDirective, deps: [{ token: i0.TemplateRef }, { token: i4.Location }, { token: i6$1.ActivatedRoute }, { token: i6$1.UrlSerializer }], target: i0__namespace.ɵɵFactoryTarget.Directive });
+    TuiDocDocumentationPropertyConnectorDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: TuiDocDocumentationPropertyConnectorDirective, selector: "ng-template[documentationPropertyName]", inputs: { documentationPropertyName: "documentationPropertyName", documentationPropertyMode: "documentationPropertyMode", documentationPropertyType: "documentationPropertyType", documentationPropertyValue: "documentationPropertyValue", documentationPropertyDeprecated: "documentationPropertyDeprecated", documentationPropertyValues: "documentationPropertyValues" }, outputs: { documentationPropertyValueChange: "documentationPropertyValueChange" }, exportAs: ["documentationProperty"], usesOnChanges: true, ngImport: i0__namespace });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiDocDocumentationPropertyConnectorDirective, decorators: [{
                 type: i0.Directive,
                 args: [{
                         selector: 'ng-template[documentationPropertyName]',
@@ -950,9 +941,9 @@
             return [{ type: i0__namespace.TemplateRef, decorators: [{
                             type: i0.Inject,
                             args: [i0.TemplateRef]
-                        }] }, { type: i5__namespace.Location, decorators: [{
+                        }] }, { type: i4__namespace.Location, decorators: [{
                             type: i0.Inject,
-                            args: [i5.Location]
+                            args: [i4.Location]
                         }] }, { type: i6__namespace.ActivatedRoute, decorators: [{
                             type: i0.Inject,
                             args: [i6$1.ActivatedRoute]
@@ -996,9 +987,9 @@
         };
         return TuiGetOpacityPipe;
     }());
-    TuiGetOpacityPipe.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiGetOpacityPipe, deps: [], target: i0__namespace.ɵɵFactoryTarget.Pipe });
-    TuiGetOpacityPipe.ɵpipe = i0__namespace.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiGetOpacityPipe, name: "tuiGetOpacity" });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiGetOpacityPipe, decorators: [{
+    TuiGetOpacityPipe.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiGetOpacityPipe, deps: [], target: i0__namespace.ɵɵFactoryTarget.Pipe });
+    TuiGetOpacityPipe.ɵpipe = i0__namespace.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiGetOpacityPipe, name: "tuiGetOpacity" });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiGetOpacityPipe, decorators: [{
                 type: i0.Pipe,
                 args: [{ name: "tuiGetOpacity" }]
             }] });
@@ -1031,9 +1022,9 @@
         };
         return TuiGetColorPipe;
     }());
-    TuiGetColorPipe.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiGetColorPipe, deps: [], target: i0__namespace.ɵɵFactoryTarget.Pipe });
-    TuiGetColorPipe.ɵpipe = i0__namespace.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiGetColorPipe, name: "tuiGetColorPipe" });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiGetColorPipe, decorators: [{
+    TuiGetColorPipe.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiGetColorPipe, deps: [], target: i0__namespace.ɵɵFactoryTarget.Pipe });
+    TuiGetColorPipe.ɵpipe = i0__namespace.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiGetColorPipe, name: "tuiGetColorPipe" });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiGetColorPipe, decorators: [{
                 type: i0.Pipe,
                 args: [{ name: "tuiGetColorPipe" }]
             }] });
@@ -1055,9 +1046,9 @@
         });
         return TuiInputOpacityDirective;
     }());
-    TuiInputOpacityDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiInputOpacityDirective, deps: [{ token: i0.Renderer2 }, { token: i6.TUI_FOCUSABLE_ITEM_ACCESSOR }], target: i0__namespace.ɵɵFactoryTarget.Directive });
-    TuiInputOpacityDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: TuiInputOpacityDirective, selector: "[tuiInputOpacity]", inputs: { tuiInputOpacity: "tuiInputOpacity" }, ngImport: i0__namespace });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiInputOpacityDirective, decorators: [{
+    TuiInputOpacityDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiInputOpacityDirective, deps: [{ token: i0.Renderer2 }, { token: i6.TUI_FOCUSABLE_ITEM_ACCESSOR }], target: i0__namespace.ɵɵFactoryTarget.Directive });
+    TuiInputOpacityDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: TuiInputOpacityDirective, selector: "[tuiInputOpacity]", inputs: { tuiInputOpacity: "tuiInputOpacity" }, ngImport: i0__namespace });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiInputOpacityDirective, decorators: [{
                 type: i0.Directive,
                 args: [{
                         selector: '[tuiInputOpacity]',
@@ -1082,9 +1073,9 @@
         };
         return TuiStripOptionalPipe;
     }());
-    TuiStripOptionalPipe.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiStripOptionalPipe, deps: [], target: i0__namespace.ɵɵFactoryTarget.Pipe });
-    TuiStripOptionalPipe.ɵpipe = i0__namespace.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiStripOptionalPipe, name: "tuiStripOptionalPipe" });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiStripOptionalPipe, decorators: [{
+    TuiStripOptionalPipe.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiStripOptionalPipe, deps: [], target: i0__namespace.ɵɵFactoryTarget.Pipe });
+    TuiStripOptionalPipe.ɵpipe = i0__namespace.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiStripOptionalPipe, name: "tuiStripOptionalPipe" });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiStripOptionalPipe, decorators: [{
                 type: i0.Pipe,
                 args: [{ name: "tuiStripOptionalPipe" }]
             }] });
@@ -1097,9 +1088,9 @@
         };
         return TuiIsOptionalPipe;
     }());
-    TuiIsOptionalPipe.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiIsOptionalPipe, deps: [], target: i0__namespace.ɵɵFactoryTarget.Pipe });
-    TuiIsOptionalPipe.ɵpipe = i0__namespace.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiIsOptionalPipe, name: "tuiIsOptionalPipe" });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiIsOptionalPipe, decorators: [{
+    TuiIsOptionalPipe.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiIsOptionalPipe, deps: [], target: i0__namespace.ɵɵFactoryTarget.Pipe });
+    TuiIsOptionalPipe.ɵpipe = i0__namespace.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiIsOptionalPipe, name: "tuiIsOptionalPipe" });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiIsOptionalPipe, decorators: [{
                 type: i0.Pipe,
                 args: [{ name: "tuiIsOptionalPipe" }]
             }] });
@@ -1112,9 +1103,9 @@
         };
         return TuiShowContentTooltip;
     }());
-    TuiShowContentTooltip.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiShowContentTooltip, deps: [], target: i0__namespace.ɵɵFactoryTarget.Pipe });
-    TuiShowContentTooltip.ɵpipe = i0__namespace.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiShowContentTooltip, name: "tuiShowContentTooltip" });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiShowContentTooltip, decorators: [{
+    TuiShowContentTooltip.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiShowContentTooltip, deps: [], target: i0__namespace.ɵɵFactoryTarget.Pipe });
+    TuiShowContentTooltip.ɵpipe = i0__namespace.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiShowContentTooltip, name: "tuiShowContentTooltip" });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiShowContentTooltip, decorators: [{
                 type: i0.Pipe,
                 args: [{ name: "tuiShowContentTooltip" }]
             }] });
@@ -1127,9 +1118,9 @@
         };
         return TuiShowCleanerPipe;
     }());
-    TuiShowCleanerPipe.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiShowCleanerPipe, deps: [], target: i0__namespace.ɵɵFactoryTarget.Pipe });
-    TuiShowCleanerPipe.ɵpipe = i0__namespace.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiShowCleanerPipe, name: "tuiShowCleanerPipe" });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiShowCleanerPipe, decorators: [{
+    TuiShowCleanerPipe.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiShowCleanerPipe, deps: [], target: i0__namespace.ɵɵFactoryTarget.Pipe });
+    TuiShowCleanerPipe.ɵpipe = i0__namespace.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiShowCleanerPipe, name: "tuiShowCleanerPipe" });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiShowCleanerPipe, decorators: [{
                 type: i0.Pipe,
                 args: [{ name: "tuiShowCleanerPipe" }]
             }] });
@@ -1219,9 +1210,9 @@
         };
         return TuiInspectPipe;
     }());
-    TuiInspectPipe.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiInspectPipe, deps: [{ token: i6.TUI_IS_CYPRESS }], target: i0__namespace.ɵɵFactoryTarget.Pipe });
-    TuiInspectPipe.ɵpipe = i0__namespace.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiInspectPipe, name: "tuiInspectAny" });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiInspectPipe, decorators: [{
+    TuiInspectPipe.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiInspectPipe, deps: [{ token: i6.TUI_IS_CYPRESS }], target: i0__namespace.ɵɵFactoryTarget.Pipe });
+    TuiInspectPipe.ɵpipe = i0__namespace.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiInspectPipe, name: "tuiInspectAny" });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiInspectPipe, decorators: [{
                 type: i0.Pipe,
                 args: [{ name: "tuiInspectAny" }]
             }], ctorParameters: function () {
@@ -1239,9 +1230,9 @@
         };
         return TuiIsPrimitivePolymorpheusContentPipe;
     }());
-    TuiIsPrimitivePolymorpheusContentPipe.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiIsPrimitivePolymorpheusContentPipe, deps: [], target: i0__namespace.ɵɵFactoryTarget.Pipe });
-    TuiIsPrimitivePolymorpheusContentPipe.ɵpipe = i0__namespace.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiIsPrimitivePolymorpheusContentPipe, name: "tuiIsPrimitivePolymorpheusContentPipe" });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiIsPrimitivePolymorpheusContentPipe, decorators: [{
+    TuiIsPrimitivePolymorpheusContentPipe.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiIsPrimitivePolymorpheusContentPipe, deps: [], target: i0__namespace.ɵɵFactoryTarget.Pipe });
+    TuiIsPrimitivePolymorpheusContentPipe.ɵpipe = i0__namespace.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiIsPrimitivePolymorpheusContentPipe, name: "tuiIsPrimitivePolymorpheusContentPipe" });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiIsPrimitivePolymorpheusContentPipe, decorators: [{
                 type: i0.Pipe,
                 args: [{ name: "tuiIsPrimitivePolymorpheusContentPipe" }]
             }] });
@@ -1296,13 +1287,13 @@
         };
         return TuiDocDocumentationComponent;
     }());
-    TuiDocDocumentationComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiDocDocumentationComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: TUI_DOC_DOCUMENTATION_TEXTS }, { token: TUI_DOC_EXCLUDED_PROPERTIES }, { token: i6.TuiDestroyService, self: true }, { token: TuiGetColorPipe }, { token: TuiGetOpacityPipe }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    TuiDocDocumentationComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TuiDocDocumentationComponent, selector: "tui-doc-documentation", inputs: { heading: "heading", showValues: "showValues", isAPI: "isAPI" }, providers: [TuiGetColorPipe, TuiGetOpacityPipe, i6.TuiDestroyService], queries: [{ propertyName: "propertiesConnectors", predicate: TuiDocDocumentationPropertyConnectorDirective }], ngImport: i0__namespace, template: "<h1\n    *ngIf=\"heading\"\n    class=\"t-heading\"\n>\n    {{ heading }}\n</h1>\n<ng-content></ng-content>\n<table class=\"t-table\">\n    <tr class=\"t-row t-row_header\">\n        <th class=\"t-th t-cell t-cell_prop\">{{ texts[2] }}</th>\n        <th class=\"t-th\">{{ type }}</th>\n        <th\n            *ngIf=\"showValues && !isAPI\"\n            class=\"t-th t-cell t-th_value\"\n        >\n            {{ texts[3] }}\n        </th>\n    </tr>\n    <tr\n        *ngFor=\"let propertyConnector of $any(propertiesConnectors) | tuiFilter : matcher : excludedProperties\"\n        class=\"t-row\"\n        [class.t-deprecated]=\"propertyConnector.documentationPropertyDeprecated\"\n    >\n        <td class=\"t-cell\">\n            <div\n                automation-id=\"tui-documentation__property-name\"\n                class=\"t-property\"\n            >\n                {{ propertyConnector.attrName | tuiStripOptionalPipe }}\n                <tui-badge\n                    *ngIf=\"propertyConnector.attrName | tuiIsOptionalPipe\"\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 [ngTemplateOutlet]=\"propertyConnector.template\"></ng-container>\n        </td>\n        <td class=\"t-cell\">\n            <span class=\"type\">\n                {{ propertyConnector.documentationPropertyType }}\n                <tui-tooltip\n                    *ngIf=\"propertyConnector.documentationPropertyType | tuiShowContentTooltip\"\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                            rel=\"noreferrer\"\n                            href=\"https://github.com/tinkoff/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=\"t-cell t-cell_value\"\n        >\n            <ng-container *ngIf=\"propertyConnector.shouldShowValues; else elseEmitter\">\n                <tui-select\n                    *ngIf=\"propertyConnector.hasItems; else noItems\"\n                    tuiTextfieldSize=\"m\"\n                    tuiDropdownLimitWidth=\"min\"\n                    [tuiTextfieldCleaner]=\"propertyConnector.documentationPropertyType | tuiShowCleanerPipe\"\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\n                    #selectContent\n                    let-data\n                >\n                    <code>{{ data | tuiInspectAny }}</code>\n                </ng-template>\n\n                <ng-template #noItems>\n                    <ng-container [ngSwitch]=\"propertyConnector.documentationPropertyType\">\n                        <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\n                            *ngSwitchCase=\"'color'\"\n                            tuiGroup\n                        >\n                            <tui-primitive-textfield\n                                tuiTextfieldSize=\"m\"\n                                [attr.id]=\"propertyConnector.attrName\"\n                                [tuiTextfieldLabelOutside]=\"true\"\n                                [tuiInputOpacity]=\"propertyConnector.documentationPropertyValue | tuiGetOpacity\"\n                                [value]=\"propertyConnector.documentationPropertyValue | tuiGetColorPipe\"\n                                (valueChange)=\"onColorChange(propertyConnector, $event)\"\n                            >\n                                <input\n                                    tuiTextfield\n                                    type=\"text\"\n                                />\n                            </tui-primitive-textfield>\n                            <tui-input-count\n                                tuiTextfieldSize=\"m\"\n                                [max]=\"100\"\n                                [ngModel]=\"propertyConnector.documentationPropertyValue | tuiGetOpacity\"\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\n                        <ng-container *ngSwitchCase=\"'PolymorpheusContent'\">\n                            <tui-primitive-textfield\n                                *ngIf=\"\n                                    propertyConnector.documentationPropertyValue | tuiIsPrimitivePolymorpheusContentPipe\n                                \"\n                                tuiTextfieldSize=\"m\"\n                                [nativeId]=\"propertyConnector.attrName\"\n                                [tuiTextfieldLabelOutside]=\"true\"\n                                [tuiTextfieldCleaner]=\"true\"\n                                [value]=\"propertyConnector.documentationPropertyValue.toString()\"\n                                (valueChange)=\"propertyConnector.onValueChange($event)\"\n                            >\n                                Default content\n                            </tui-primitive-textfield>\n                        </ng-container>\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", styles: [":host{display:block;min-width:100%}.t-table{width:100%;table-layout:fixed}.t-row:not(:last-child){border-bottom:1px solid var(--tui-base-03)}:host-context(tui-root._mobile) .t-row{display:flex;flex-wrap:wrap}:host-context(tui-root._mobile) .t-row_header{display:none}.t-cell{padding:1rem 1rem .875rem}.t-cell:first-child{padding-left:0}.t-cell:last-child{padding-right:0}.t-cell_prop{width:40%}.t-cell_value{text-align:right}:host-context(tui-root._mobile) .t-cell{width:100%;height:auto;padding:.5rem 0;text-align:left}.t-th{padding:.5rem 1rem;color:var(--tui-text-02);font-weight:normal;text-align:left}.t-th_value{max-width:20rem;text-align:right}:host-context(tui-root._mobile) .t-th_value{width:9.375rem}.t-property{font:var(--tui-font-text-m);margin-bottom:.25rem;font-family:monospace;color:#8f75d1}:host-context(tui-root._mobile) .t-property{padding:.5rem 0}.t-type{font-family:monospace}.t-deprecated{background-color:var(--tui-error-bg);box-shadow:-1rem 0 var(--tui-error-bg),1rem 0 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}.t-heading{font:var(--tui-font-heading-4)}\n"], components: [{ type: i1__namespace.TuiBadgeComponent, selector: "tui-badge", inputs: ["value", "size", "status", "hoverable"] }, { type: i2__namespace$1.TuiTooltipComponent, selector: "tui-tooltip", inputs: ["content", "direction", "appearance", "showDelay", "hideDelay", "describeId"] }, { type: i2__namespace$1.TuiLinkComponent, selector: "a[tuiLink], button[tuiLink]", inputs: ["pseudo", "icon", "iconAlign", "iconRotated", "mode"], exportAs: ["tuiLink"] }, { type: i1__namespace.TuiSelectComponent, selector: "tui-select", inputs: ["stringify", "identityMatcher", "valueContent"] }, { type: i1__namespace.TuiDataListWrapperComponent, selector: "tui-data-list-wrapper:not([labels])", inputs: ["items"] }, { type: i1__namespace.TuiToggleComponent, selector: "tui-toggle", inputs: ["singleColor", "showIcons", "showLoader", "size"] }, { type: i2__namespace$1.TuiPrimitiveTextfieldComponent, selector: "tui-primitive-textfield", inputs: ["editable", "filler", "iconCleaner", "readOnly", "invalid", "disabled", "prefix", "postfix", "value"], outputs: ["valueChange"] }, { type: i2__namespace$1.TuiTextfieldComponent, selector: "input[tuiTextfield], textarea[tuiTextfield]" }, { type: i1__namespace.TuiInputCountComponent, selector: "tui-input-count", inputs: ["step", "min", "max", "hideButtons", "prefix", "postfix"] }, { type: i2__namespace$1.TuiNotificationComponent, selector: "tui-notification", inputs: ["hasIcon", "status"], outputs: ["close"] }], directives: [{ type: i5__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2__namespace$1.TuiModeDirective, selector: "[tuiMode]", inputs: ["tuiMode"] }, { type: i1__namespace.TuiSelectDirective, selector: "tui-select" }, { type: i2__namespace$1.TuiTextfieldSizeDirective, selector: "[tuiTextfieldSize]", inputs: ["tuiTextfieldSize"] }, { type: i2__namespace$1.TuiDropdownOptionsDirective, selector: "[tuiDropdownAlign], [tuiDropdownDirection], [tuiDropdownLimitWidth], [tuiDropdownMinHeight], [tuiDropdownMaxHeight], [tuiDropdownOffset]", inputs: ["tuiDropdownAlign", "tuiDropdownDirection", "tuiDropdownLimitWidth", "tuiDropdownMinHeight", "tuiDropdownMaxHeight", "tuiDropdownOffset"] }, { type: i2__namespace$1.TuiTextfieldCleanerDirective, selector: "[tuiTextfieldCleaner]", inputs: ["tuiTextfieldCleaner"] }, { type: i2__namespace$1.TuiTextfieldLabelOutsideDirective, selector: "[tuiTextfieldLabelOutside]", inputs: ["tuiTextfieldLabelOutside"] }, { type: i5__namespace$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5__namespace$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i2__namespace$1.TuiDataListDirective, selector: "ng-template[tuiDataList]" }, { type: i5__namespace.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i5__namespace.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i2__namespace$1.TuiPrimitiveTextfieldDirective, selector: "tui-primitive-textfield" }, { type: i2__namespace$1.TuiGroupDirective, selector: "[tuiGroup]:not(ng-container)", inputs: ["orientation", "adaptive", "collapsed", "rounded", "size"] }, { type: TuiInputOpacityDirective, selector: "[tuiInputOpacity]", inputs: ["tuiInputOpacity"] }, { type: i1__namespace.TuiInputCountDirective, selector: "tui-input-count" }], pipes: { "tuiFilter": i6__namespace$1.TuiFilterPipe, "tuiStripOptionalPipe": TuiStripOptionalPipe, "tuiIsOptionalPipe": TuiIsOptionalPipe, "tuiShowContentTooltip": TuiShowContentTooltip, "tuiShowCleanerPipe": TuiShowCleanerPipe, "tuiInspectAny": TuiInspectPipe, "tuiGetOpacity": TuiGetOpacityPipe, "tuiGetColorPipe": TuiGetColorPipe, "tuiIsPrimitivePolymorpheusContentPipe": TuiIsPrimitivePolymorpheusContentPipe, "async": i5__namespace.AsyncPipe }, animations: [
+    TuiDocDocumentationComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiDocDocumentationComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: TUI_DOC_DOCUMENTATION_TEXTS }, { token: TUI_DOC_EXCLUDED_PROPERTIES }, { token: i6.TuiDestroyService, self: true }, { token: TuiGetColorPipe }, { token: TuiGetOpacityPipe }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    TuiDocDocumentationComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TuiDocDocumentationComponent, selector: "tui-doc-documentation", inputs: { heading: "heading", showValues: "showValues", isAPI: "isAPI" }, providers: [TuiGetColorPipe, TuiGetOpacityPipe, i6.TuiDestroyService], queries: [{ propertyName: "propertiesConnectors", predicate: TuiDocDocumentationPropertyConnectorDirective }], ngImport: i0__namespace, template: "<h1\n    *ngIf=\"heading\"\n    class=\"t-heading\"\n>\n    {{ heading }}\n</h1>\n<ng-content></ng-content>\n<table class=\"t-table\">\n    <tr class=\"t-row t-row_header\">\n        <th class=\"t-th t-cell t-cell_prop\">{{ texts[2] }}</th>\n        <th class=\"t-th\">{{ type }}</th>\n        <th\n            *ngIf=\"showValues && !isAPI\"\n            class=\"t-th t-cell t-th_value\"\n        >\n            {{ texts[3] }}\n        </th>\n    </tr>\n    <tr\n        *ngFor=\"let propertyConnector of $any(propertiesConnectors) | tuiFilter : matcher : excludedProperties\"\n        class=\"t-row\"\n        [class.t-deprecated]=\"propertyConnector.documentationPropertyDeprecated\"\n    >\n        <td class=\"t-cell\">\n            <div\n                automation-id=\"tui-documentation__property-name\"\n                class=\"t-property\"\n            >\n                {{ propertyConnector.attrName | tuiStripOptionalPipe }}\n                <tui-badge\n                    *ngIf=\"propertyConnector.attrName | tuiIsOptionalPipe\"\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 [ngTemplateOutlet]=\"propertyConnector.template\"></ng-container>\n        </td>\n        <td class=\"t-cell\">\n            <span class=\"type\">\n                {{ propertyConnector.documentationPropertyType }}\n                <tui-tooltip\n                    *ngIf=\"propertyConnector.documentationPropertyType | tuiShowContentTooltip\"\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                            rel=\"noreferrer\"\n                            href=\"https://github.com/tinkoff/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=\"t-cell t-cell_value\"\n        >\n            <ng-container *ngIf=\"propertyConnector.shouldShowValues; else elseEmitter\">\n                <tui-select\n                    *ngIf=\"propertyConnector.hasItems; else noItems\"\n                    tuiTextfieldSize=\"m\"\n                    tuiDropdownLimitWidth=\"min\"\n                    [tuiTextfieldCleaner]=\"propertyConnector.documentationPropertyType | tuiShowCleanerPipe\"\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\n                    #selectContent\n                    let-data\n                >\n                    <code>{{ data | tuiInspectAny }}</code>\n                </ng-template>\n\n                <ng-template #noItems>\n                    <ng-container [ngSwitch]=\"propertyConnector.documentationPropertyType\">\n                        <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\n                            *ngSwitchCase=\"'color'\"\n                            tuiGroup\n                        >\n                            <tui-primitive-textfield\n                                tuiTextfieldSize=\"m\"\n                                [attr.id]=\"propertyConnector.attrName\"\n                                [tuiTextfieldLabelOutside]=\"true\"\n                                [tuiInputOpacity]=\"propertyConnector.documentationPropertyValue | tuiGetOpacity\"\n                                [value]=\"propertyConnector.documentationPropertyValue | tuiGetColorPipe\"\n                                (valueChange)=\"onColorChange(propertyConnector, $event)\"\n                            >\n                                <input\n                                    tuiTextfield\n                                    type=\"text\"\n                                />\n                            </tui-primitive-textfield>\n                            <tui-input-count\n                                tuiTextfieldSize=\"m\"\n                                [max]=\"100\"\n                                [ngModel]=\"propertyConnector.documentationPropertyValue | tuiGetOpacity\"\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\n                        <ng-container *ngSwitchCase=\"'PolymorpheusContent'\">\n                            <tui-primitive-textfield\n                                *ngIf=\"\n                                    propertyConnector.documentationPropertyValue | tuiIsPrimitivePolymorpheusContentPipe\n                                \"\n                                tuiTextfieldSize=\"m\"\n                                [nativeId]=\"propertyConnector.attrName\"\n                                [tuiTextfieldLabelOutside]=\"true\"\n                                [tuiTextfieldCleaner]=\"true\"\n                                [value]=\"propertyConnector.documentationPropertyValue.toString()\"\n                                (valueChange)=\"propertyConnector.onValueChange($event)\"\n                            >\n                                Default content\n                            </tui-primitive-textfield>\n                        </ng-container>\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", styles: [":host{display:block;min-width:100%}.t-table{width:100%;table-layout:fixed}.t-row:not(:last-child){border-bottom:1px solid var(--tui-base-03)}:host-context(tui-root._mobile) .t-row{display:flex;flex-wrap:wrap}:host-context(tui-root._mobile) .t-row_header{display:none}.t-cell{padding:1rem 1rem .875rem}.t-cell:first-child{padding-left:0}.t-cell:last-child{padding-right:0}.t-cell_prop{width:40%}.t-cell_value{text-align:right}:host-context(tui-root._mobile) .t-cell{width:100%;height:auto;padding:.5rem 0;text-align:left}.t-th{padding:.5rem 1rem;color:var(--tui-text-02);font-weight:normal;text-align:left}.t-th_value{max-width:20rem;text-align:right}:host-context(tui-root._mobile) .t-th_value{width:9.375rem}.t-property{font:var(--tui-font-text-m);margin-bottom:.25rem;font-family:monospace;color:#8f75d1}:host-context(tui-root._mobile) .t-property{padding:.5rem 0}.t-type{font-family:monospace}.t-deprecated{background-color:var(--tui-error-bg);box-shadow:-1rem 0 var(--tui-error-bg),1rem 0 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}.t-heading{font:var(--tui-font-heading-4)}\n"], components: [{ type: i1__namespace.TuiBadgeComponent, selector: "tui-badge", inputs: ["value", "size", "status", "hoverable"] }, { type: i2__namespace$1.TuiTooltipComponent, selector: "tui-tooltip", inputs: ["content", "direction", "appearance", "showDelay", "hideDelay", "describeId"] }, { type: i2__namespace$1.TuiLinkComponent, selector: "a[tuiLink], button[tuiLink]", inputs: ["pseudo", "icon", "iconAlign", "iconRotated", "mode"], exportAs: ["tuiLink"] }, { type: i1__namespace.TuiSelectComponent, selector: "tui-select", inputs: ["stringify", "identityMatcher", "valueContent"] }, { type: i1__namespace.TuiDataListWrapperComponent, selector: "tui-data-list-wrapper:not([labels])", inputs: ["items"] }, { type: i1__namespace.TuiToggleComponent, selector: "tui-toggle", inputs: ["singleColor", "showIcons", "showLoader", "size"] }, { type: i2__namespace$1.TuiPrimitiveTextfieldComponent, selector: "tui-primitive-textfield", inputs: ["editable", "filler", "iconCleaner", "readOnly", "invalid", "disabled", "prefix", "postfix", "value"], outputs: ["valueChange"] }, { type: i2__namespace$1.TuiTextfieldComponent, selector: "input[tuiTextfield], textarea[tuiTextfield]" }, { type: i1__namespace.TuiInputCountComponent, selector: "tui-input-count", inputs: ["step", "min", "max", "hideButtons", "prefix", "postfix"] }, { type: i2__namespace$1.TuiNotificationComponent, selector: "tui-notification", inputs: ["hasIcon", "status"], outputs: ["close"] }], directives: [{ type: i4__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2__namespace$1.TuiModeDirective, selector: "[tuiMode]", inputs: ["tuiMode"] }, { type: i1__namespace.TuiSelectDirective, selector: "tui-select" }, { type: i2__namespace$1.TuiTextfieldSizeDirective, selector: "[tuiTextfieldSize]", inputs: ["tuiTextfieldSize"] }, { type: i2__namespace$1.TuiDropdownOptionsDirective, selector: "[tuiDropdownAlign], [tuiDropdownDirection], [tuiDropdownLimitWidth], [tuiDropdownMinHeight], [tuiDropdownMaxHeight], [tuiDropdownOffset]", inputs: ["tuiDropdownAlign", "tuiDropdownDirection", "tuiDropdownLimitWidth", "tuiDropdownMinHeight", "tuiDropdownMaxHeight", "tuiDropdownOffset"] }, { type: i2__namespace$1.TuiTextfieldCleanerDirective, selector: "[tuiTextfieldCleaner]", inputs: ["tuiTextfieldCleaner"] }, { type: i2__namespace$1.TuiTextfieldLabelOutsideDirective, selector: "[tuiTextfieldLabelOutside]", inputs: ["tuiTextfieldLabelOutside"] }, { type: i5__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i2__namespace$1.TuiDataListDirective, selector: "ng-template[tuiDataList]" }, { type: i4__namespace.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i4__namespace.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i2__namespace$1.TuiPrimitiveTextfieldDirective, selector: "tui-primitive-textfield" }, { type: i2__namespace$1.TuiGroupDirective, selector: "[tuiGroup]:not(ng-container)", inputs: ["orientation", "adaptive", "collapsed", "rounded", "size"] }, { type: TuiInputOpacityDirective, selector: "[tuiInputOpacity]", inputs: ["tuiInputOpacity"] }, { type: i1__namespace.TuiInputCountDirective, selector: "tui-input-count" }], pipes: { "tuiFilter": i6__namespace$1.TuiFilterPipe, "tuiStripOptionalPipe": TuiStripOptionalPipe, "tuiIsOptionalPipe": TuiIsOptionalPipe, "tuiShowContentTooltip": TuiShowContentTooltip, "tuiShowCleanerPipe": TuiShowCleanerPipe, "tuiInspectAny": TuiInspectPipe, "tuiGetOpacity": TuiGetOpacityPipe, "tuiGetColorPipe": TuiGetColorPipe, "tuiIsPrimitivePolymorpheusContentPipe": TuiIsPrimitivePolymorpheusContentPipe, "async": i4__namespace.AsyncPipe }, animations: [
             animations.trigger('emitEvent', [
                 animations.transition(':increment', [animations.style({ opacity: 1 }), animations.animate('500ms ease-in')]),
             ]),
         ], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiDocDocumentationComponent, decorators: [{
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiDocDocumentationComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'tui-doc-documentation',
@@ -1354,10 +1345,10 @@
         }
         return TuiInputOpacityModule;
     }());
-    TuiInputOpacityModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiInputOpacityModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    TuiInputOpacityModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiInputOpacityModule, declarations: [TuiInputOpacityDirective], exports: [TuiInputOpacityDirective] });
-    TuiInputOpacityModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiInputOpacityModule });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiInputOpacityModule, decorators: [{
+    TuiInputOpacityModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiInputOpacityModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+    TuiInputOpacityModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiInputOpacityModule, declarations: [TuiInputOpacityDirective], exports: [TuiInputOpacityDirective] });
+    TuiInputOpacityModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiInputOpacityModule });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiInputOpacityModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
                         declarations: [TuiInputOpacityDirective],
@@ -1370,8 +1361,8 @@
         }
         return TuiDocDocumentationModule;
     }());
-    TuiDocDocumentationModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiDocDocumentationModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    TuiDocDocumentationModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiDocDocumentationModule, declarations: [TuiInspectPipe,
+    TuiDocDocumentationModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiDocDocumentationModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+    TuiDocDocumentationModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiDocDocumentationModule, declarations: [TuiInspectPipe,
             TuiGetColorPipe,
             TuiGetOpacityPipe,
             TuiIsOptionalPipe,
@@ -1380,8 +1371,8 @@
             TuiShowContentTooltip,
             TuiDocDocumentationComponent,
             TuiIsPrimitivePolymorpheusContentPipe,
-            TuiDocDocumentationPropertyConnectorDirective], imports: [i5.CommonModule,
-            i5$1.FormsModule,
+            TuiDocDocumentationPropertyConnectorDirective], imports: [i4.CommonModule,
+            i5.FormsModule,
             i6$1.RouterModule,
             i1.TuiBadgeModule,
             i1.TuiSelectModule,
@@ -1400,9 +1391,9 @@
             i2$1.TuiNotificationModule,
             i6.TuiFilterPipeModule], exports: [TuiDocDocumentationComponent,
             TuiDocDocumentationPropertyConnectorDirective] });
-    TuiDocDocumentationModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiDocDocumentationModule, imports: [[
-                i5.CommonModule,
-                i5$1.FormsModule,
+    TuiDocDocumentationModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiDocDocumentationModule, imports: [[
+                i4.CommonModule,
+                i5.FormsModule,
                 i6$1.RouterModule,
                 i1.TuiBadgeModule,
                 i1.TuiSelectModule,
@@ -1421,12 +1412,12 @@
                 i2$1.TuiNotificationModule,
                 i6.TuiFilterPipeModule,
             ]] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiDocDocumentationModule, decorators: [{
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiDocDocumentationModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
                         imports: [
-                            i5.CommonModule,
-                            i5$1.FormsModule,
+                            i4.CommonModule,
+                            i5.FormsModule,
                             i6$1.RouterModule,
                             i1.TuiBadgeModule,
                             i1.TuiSelectModule,
@@ -1464,12 +1455,6 @@
                     }]
             }] });
 
-    var TUI_EXAMPLE_PRIMARY_FILE_NAME = {
-        TS: "TypeScript",
-        LESS: "LESS",
-        HTML: "HTML",
-    };
-
     var TUI_DOC_CODE_ACTIONS = new i0.InjectionToken("[TUI_DOC_CODE_ACTIONS]: Code actions for the opened tab with code example", {
         factory: function () { return ""; },
     });
@@ -1519,6 +1504,26 @@
         });
     }
 
+    var TUI_EXAMPLE_PRIMARY_FILE_NAME = {
+        TS: "TypeScript",
+        LESS: "LESS",
+        HTML: "HTML",
+    };
+
+    var TUI_DOC_EXAMPLE_DEFAULT_OPTIONS = {
+        codeEditorVisibilityHandler: function (files) { return Boolean(files[TUI_EXAMPLE_PRIMARY_FILE_NAME.TS] &&
+            files[TUI_EXAMPLE_PRIMARY_FILE_NAME.HTML]); },
+    };
+    var TUI_DOC_EXAMPLE_OPTIONS = new i0.InjectionToken("[TUI_DOC_EXAMPLE_OPTIONS]: Default parameters for DocExample component", {
+        factory: function () { return TUI_DOC_EXAMPLE_DEFAULT_OPTIONS; },
+    });
+    function tuiDocExampleOptionsProvider(options) {
+        return {
+            provide: TUI_DOC_EXAMPLE_OPTIONS,
+            useValue: Object.assign(Object.assign({}, TUI_DOC_EXAMPLE_DEFAULT_OPTIONS), options),
+        };
+    }
+
     var TuiDocExampleCapitalizePipe = /** @class */ (function () {
         function TuiDocExampleCapitalizePipe() {
         }
@@ -1527,9 +1532,9 @@
         };
         return TuiDocExampleCapitalizePipe;
     }());
-    TuiDocExampleCapitalizePipe.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiDocExampleCapitalizePipe, deps: [], target: i0__namespace.ɵɵFactoryTarget.Pipe });
-    TuiDocExampleCapitalizePipe.ɵpipe = i0__namespace.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiDocExampleCapitalizePipe, name: "tuiDocExampleCapitalize" });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiDocExampleCapitalizePipe, decorators: [{
+    TuiDocExampleCapitalizePipe.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiDocExampleCapitalizePipe, deps: [], target: i0__namespace.ɵɵFactoryTarget.Pipe });
+    TuiDocExampleCapitalizePipe.ɵpipe = i0__namespace.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiDocExampleCapitalizePipe, name: "tuiDocExampleCapitalize" });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiDocExampleCapitalizePipe, decorators: [{
                 type: i0.Pipe,
                 args: [{ name: "tuiDocExampleCapitalize" }]
             }] });
@@ -1542,15 +1547,15 @@
         };
         return TuiDocExampleGetTabsPipe;
     }());
-    TuiDocExampleGetTabsPipe.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiDocExampleGetTabsPipe, deps: [], target: i0__namespace.ɵɵFactoryTarget.Pipe });
-    TuiDocExampleGetTabsPipe.ɵpipe = i0__namespace.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiDocExampleGetTabsPipe, name: "tuiDocExampleGetTabs" });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiDocExampleGetTabsPipe, decorators: [{
+    TuiDocExampleGetTabsPipe.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiDocExampleGetTabsPipe, deps: [], target: i0__namespace.ɵɵFactoryTarget.Pipe });
+    TuiDocExampleGetTabsPipe.ɵpipe = i0__namespace.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiDocExampleGetTabsPipe, name: "tuiDocExampleGetTabs" });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiDocExampleGetTabsPipe, decorators: [{
                 type: i0.Pipe,
                 args: [{ name: "tuiDocExampleGetTabs" }]
             }] });
 
     var TuiDocExampleComponent = /** @class */ (function () {
-        function TuiDocExampleComponent(clipboard, alertService, location, copyTexts$, texts, codeEditor, processContent, isCypress, codeActions, router, route, ngLocation) {
+        function TuiDocExampleComponent(clipboard, alertService, location, copyTexts$, texts, codeEditor, processContent, isCypress, codeActions, router, route, ngLocation, options) {
             var _this = this;
             this.clipboard = clipboard;
             this.alertService = alertService;
@@ -1564,6 +1569,7 @@
             this.router = router;
             this.route = route;
             this.ngLocation = ngLocation;
+            this.options = options;
             this.rawLoader$$ = new i9.BehaviorSubject({});
             this.id = null;
             this.heading = '';
@@ -1578,9 +1584,7 @@
             }));
             this.processor$ = this.rawLoader$$.pipe(operators.switchMap(tuiRawLoadRecord), operators.map(function (value) { return _this.processContent(value); }));
             this.loading$ = new i9.Subject();
-            this.visible = function (files) { return Boolean(_this.codeEditor &&
-                files[TUI_EXAMPLE_PRIMARY_FILE_NAME.TS] &&
-                files[TUI_EXAMPLE_PRIMARY_FILE_NAME.HTML]); };
+            this.visible = function (files) { return Boolean(_this.codeEditor && _this.options.codeEditorVisibilityHandler(files)); };
         }
         Object.defineProperty(TuiDocExampleComponent.prototype, "content", {
             set: function (content) {
@@ -1618,9 +1622,9 @@
         };
         return TuiDocExampleComponent;
     }());
-    TuiDocExampleComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiDocExampleComponent, deps: [{ token: i8.Clipboard }, { token: i2$1.TuiAlertService }, { token: common.LOCATION }, { token: i1.TUI_COPY_TEXTS }, { token: TUI_DOC_EXAMPLE_TEXTS }, { token: TUI_DOC_CODE_EDITOR, optional: true }, { token: TUI_DOC_EXAMPLE_CONTENT_PROCESSOR }, { token: i6.TUI_IS_CYPRESS }, { token: TUI_DOC_CODE_ACTIONS }, { token: i6$1.Router }, { token: i6$1.ActivatedRoute }, { token: i5.Location }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    TuiDocExampleComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TuiDocExampleComponent, selector: "tui-doc-example", inputs: { id: "id", heading: "heading", description: "description", content: "content", componentName: "componentName" }, 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        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    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 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\n                        *tuiItem\n                        tuiTab\n                    >\n                        {{ tab }}\n                    </button>\n                </ng-container>\n            </tui-tabs-with-more>\n\n            <button\n                *ngIf=\"files | tuiMapper : visible\"\n                tuiButton\n                appearance=\"flat\"\n                size=\"s\"\n                type=\"button\"\n                [showLoader]=\"!!(loading$ | async)\"\n                (click)=\"edit(files)\"\n            >\n                Edit on {{ codeEditor!.name }}\n            </button>\n        </div>\n\n        <div\n            *ngFor=\"let tab of tabs; let index = index\"\n            class=\"t-content\"\n            [class.t-content_animated]=\"!isCypress\"\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    <section class=\"t-code-actions\">\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-copy [cdkCopyToClipboard]=\"code\"></tui-doc-copy>\n    </section>\n    <tui-doc-code [code]=\"code\"></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 rgba(0,0,0,.1)}: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;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:2.667rem 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}.t-code-actions{position:absolute;top:4.375rem;right:1rem;display:flex;justify-content:flex-end;align-items:center}.t-code-actions>*{margin-left:.5rem}.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$1.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: TuiDocCopyComponent, selector: "tui-doc-copy" }, { type: TuiDocCodeComponent, selector: "tui-doc-code", inputs: ["filename", "code"] }], directives: [{ type: i5__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6__namespace$2.PolymorpheusOutletDirective, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }, { type: i5__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6__namespace$1.TuiItemDirective, selector: "[tuiItem]" }, { type: i5__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i8__namespace.CdkCopyToClipboard, selector: "[cdkCopyToClipboard]", inputs: ["cdkCopyToClipboard", "cdkCopyToClipboardAttempts"], outputs: ["cdkCopyToClipboardCopied"] }], pipes: { "tuiDocExampleCapitalize": TuiDocExampleCapitalizePipe, "async": i5__namespace.AsyncPipe, "tuiDocExampleGetTabs": TuiDocExampleGetTabsPipe, "tuiMapper": i6__namespace$1.TuiMapperPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiDocExampleComponent, decorators: [{
+    TuiDocExampleComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiDocExampleComponent, deps: [{ token: i8.Clipboard }, { token: i2$1.TuiAlertService }, { token: common.LOCATION }, { token: i1.TUI_COPY_TEXTS }, { token: TUI_DOC_EXAMPLE_TEXTS }, { token: TUI_DOC_CODE_EDITOR, optional: true }, { token: TUI_DOC_EXAMPLE_CONTENT_PROCESSOR }, { token: i6.TUI_IS_CYPRESS }, { token: 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", componentName: "componentName" }, 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        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    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 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\n                        *tuiItem\n                        tuiTab\n                    >\n                        {{ tab }}\n                    </button>\n                </ng-container>\n            </tui-tabs-with-more>\n\n            <button\n                *ngIf=\"files | tuiMapper : visible\"\n                tuiButton\n                appearance=\"flat\"\n                size=\"s\"\n                type=\"button\"\n                [showLoader]=\"!!(loading$ | async)\"\n                (click)=\"edit(files)\"\n            >\n                Edit on {{ codeEditor!.name }}\n            </button>\n        </div>\n\n        <div\n            *ngFor=\"let tab of tabs; let index = index\"\n            class=\"t-content\"\n            [class.t-content_animated]=\"!isCypress\"\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    <section class=\"t-code-actions\">\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-copy [cdkCopyToClipboard]=\"code\"></tui-doc-copy>\n    </section>\n    <tui-doc-code [code]=\"code\"></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 rgba(0,0,0,.1)}: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;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:2.667rem 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}.t-code-actions{position:absolute;top:4.375rem;right:1rem;display:flex;justify-content:flex-end;align-items:center}.t-code-actions>*{margin-left:.5rem}.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$1.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: TuiDocCopyComponent, selector: "tui-doc-copy" }, { type: TuiDocCodeComponent, selector: "tui-doc-code", inputs: ["filename", "code"] }], directives: [{ type: i4__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6__namespace$2.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"] }, { type: i8__namespace.CdkCopyToClipboard, selector: "[cdkCopyToClipboard]", inputs: ["cdkCopyToClipboard", "cdkCopyToClipboardAttempts"], outputs: ["cdkCopyToClipboardCopied"] }], 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: [{
                         selector: 'tui-doc-example',
@@ -1664,9 +1668,12 @@
                         }] }, { type: i6__namespace.ActivatedRoute, decorators: [{
                             type: i0.Inject,
                             args: [i6$1.ActivatedRoute]
-                        }] }, { type: i5__namespace.Location, decorators: [{
+                        }] }, { type: i4__namespace.Location, decorators: [{
+                            type: i0.Inject,
+                            args: [i4.Location]
+                        }] }, { type: undefined, decorators: [{
                             type: i0.Inject,
-                            args: [i5.Location]
+                            args: [TUI_DOC_EXAMPLE_OPTIONS]
                         }] }];
         }, propDecorators: { id: [{
                     type: i0.Input
@@ -1685,10 +1692,10 @@
         }
         return TuiDocExampleModule;
     }());
-    TuiDocExampleModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiDocExampleModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    TuiDocExampleModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiDocExampleModule, declarations: [TuiDocExampleComponent,
+    TuiDocExampleModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiDocExampleModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+    TuiDocExampleModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiDocExampleModule, declarations: [TuiDocExampleComponent,
             TuiDocExampleGetTabsPipe,
-            TuiDocExampleCapitalizePipe], imports: [i5.CommonModule,
+            TuiDocExampleCapitalizePipe], imports: [i4.CommonModule,
             i8.ClipboardModule,
             i1.TuiTabsModule,
             i2$1.TuiButtonModule,
@@ -1698,8 +1705,8 @@
             i6.TuiMapperPipeModule], exports: [TuiDocExampleComponent,
             TuiDocExampleGetTabsPipe,
             TuiDocExampleCapitalizePipe] });
-    TuiDocExampleModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiDocExampleModule, imports: [[
-                i5.CommonModule,
+    TuiDocExampleModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiDocExampleModule, imports: [[
+                i4.CommonModule,
                 i8.ClipboardModule,
                 i1.TuiTabsModule,
                 i2$1.TuiButtonModule,
@@ -1708,11 +1715,11 @@
                 i6$2.PolymorpheusModule,
                 i6.TuiMapperPipeModule,
             ]] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiDocExampleModule, decorators: [{
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiDocExampleModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
                         imports: [
-                            i5.CommonModule,
+                            i4.CommonModule,
                             i8.ClipboardModule,
                             i1.TuiTabsModule,
                             i2$1.TuiButtonModule,
@@ -1735,52 +1742,60 @@
             }] });
 
     var TuiLanguageSwitcherComponent = /** @class */ (function () {
-        function TuiLanguageSwitcherComponent(switcher, options) {
+        function TuiLanguageSwitcherComponent(switcher, flagPipe) {
             this.switcher = switcher;
-            this.options = options;
-            this.path = this.options
-                .path('tuiIcon')
-                .replace('tuiIcon.svg#tuiIcon', '');
-            this.language = new i5$1.FormControl(i2$1.tuiCapitalizeFirstLetter(this.switcher.language));
+            this.flagPipe = flagPipe;
+            this.language = new i5.FormControl(i2$1.tuiCapitalizeFirstLetter(this.switcher.language));
             this.flags = new Map([
-                ['chinese', i5$2.TuiCountryIsoCode.CN],
-                ['dutch', i5$2.TuiCountryIsoCode.NL],
-                ['english', i5$2.TuiCountryIsoCode.GB],
-                ['french', i5$2.TuiCountryIsoCode.FR],
-                ['german', i5$2.TuiCountryIsoCode.DE],
-                ['italian', i5$2.TuiCountryIsoCode.IT],
-                ['polish', i5$2.TuiCountryIsoCode.PL],
-                ['portuguese', i5$2.TuiCountryIsoCode.PT],
-                ['russian', i5$2.TuiCountryIsoCode.RU],
-                ['spanish', i5$2.TuiCountryIsoCode.ES],
-                ['turkish', i5$2.TuiCountryIsoCode.TR],
-                ['ukrainian', i5$2.TuiCountryIsoCode.UA],
-                ['vietnamese', i5$2.TuiCountryIsoCode.VN],
+                ['chinese', i5$1.TuiCountryIsoCode.CN],
+                ['dutch', i5$1.TuiCountryIsoCode.NL],
+                ['english', i5$1.TuiCountryIsoCode.GB],
+                ['french', i5$1.TuiCountryIsoCode.FR],
+                ['german', i5$1.TuiCountryIsoCode.DE],
+                ['italian', i5$1.TuiCountryIsoCode.IT],
+                ['polish', i5$1.TuiCountryIsoCode.PL],
+                ['portuguese', i5$1.TuiCountryIsoCode.PT],
+                ['russian', i5$1.TuiCountryIsoCode.RU],
+                ['spanish', i5$1.TuiCountryIsoCode.ES],
+                ['turkish', i5$1.TuiCountryIsoCode.TR],
+                ['ukrainian', i5$1.TuiCountryIsoCode.UA],
+                ['vietnamese', i5$1.TuiCountryIsoCode.VN],
             ]);
             this.names = Array.from(this.flags.keys());
         }
+        /**
+         * @deprecated use `<img [src]="countryIsoCode | tuiFlagPipe" />`
+         * TODO drop in v4.0
+         */
         TuiLanguageSwitcherComponent.prototype.getFlagPath = function (code) {
-            return code ? "" + this.path + code + ".png" : null;
+            return this.flagPipe.transform(code);
         };
         return TuiLanguageSwitcherComponent;
     }());
-    TuiLanguageSwitcherComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiLanguageSwitcherComponent, deps: [{ token: i5$2.TuiLanguageSwitcher }, { token: i2$1.TUI_SVG_OPTIONS }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    TuiLanguageSwitcherComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TuiLanguageSwitcherComponent, selector: "tui-language-switcher", ngImport: i0__namespace, template: "<tui-select [formControl]=\"language\">\n    <ng-content></ng-content>\n    <tui-data-list *tuiDataList>\n        <button\n            *ngFor=\"let name of names\"\n            tuiOption\n            [value]=\"name | titlecase\"\n            (click)=\"switcher.setLanguage(name)\"\n        >\n            <img\n                alt=\"\"\n                class=\"t-flag\"\n                [src]=\"getFlagPath(flags.get(name))\"\n            />\n            {{ name | titlecase }}\n        </button>\n    </tui-data-list>\n</tui-select>\n", styles: [".t-flag{width:1.75rem;height:1.25rem;margin-right:.5rem}\n"], components: [{ type: i1__namespace.TuiSelectComponent, selector: "tui-select", inputs: ["stringify", "identityMatcher", "valueContent"] }, { type: i2__namespace$1.TuiDataListComponent, selector: "tui-data-list", inputs: ["role", "emptyContent", "size"] }, { type: i2__namespace$1.TuiOptionComponent, selector: "button[tuiOption], a[tuiOption]", inputs: ["size", "role", "disabled", "value"] }], directives: [{ type: i1__namespace.TuiSelectDirective, selector: "tui-select" }, { type: i5__namespace$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5__namespace$1.FormControlDirective, selector: "[formControl]", inputs: ["disabled", "formControl", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i2__namespace$1.TuiDataListDirective, selector: "ng-template[tuiDataList]" }, { type: i5__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "titlecase": i5__namespace.TitleCasePipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiLanguageSwitcherComponent, decorators: [{
+    TuiLanguageSwitcherComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiLanguageSwitcherComponent, deps: [{ token: i5$1.TuiLanguageSwitcher }, { token: i2$1.TuiFlagPipe }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    TuiLanguageSwitcherComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TuiLanguageSwitcherComponent, selector: "tui-language-switcher", providers: [
+            // TODO: for backward compatibility only. Drop in v4.0
+            i2$1.TuiFlagPipe,
+        ], ngImport: i0__namespace, template: "<tui-select [formControl]=\"language\">\n    <ng-content></ng-content>\n    <tui-data-list *tuiDataList>\n        <button\n            *ngFor=\"let name of names\"\n            tuiOption\n            [value]=\"name | titlecase\"\n            (click)=\"switcher.setLanguage(name)\"\n        >\n            <img\n                alt=\"\"\n                class=\"t-flag\"\n                [src]=\"flags.get(name) | tuiFlag\"\n            />\n            {{ name | titlecase }}\n        </button>\n    </tui-data-list>\n</tui-select>\n", styles: [".t-flag{width:1.75rem;height:1.25rem;margin-right:.5rem}\n"], components: [{ type: i1__namespace.TuiSelectComponent, selector: "tui-select", inputs: ["stringify", "identityMatcher", "valueContent"] }, { type: i2__namespace$1.TuiDataListComponent, selector: "tui-data-list", inputs: ["role", "emptyContent", "size"] }, { type: i2__namespace$1.TuiOptionComponent, selector: "button[tuiOption], a[tuiOption]", inputs: ["size", "role", "disabled", "value"] }], directives: [{ type: i1__namespace.TuiSelectDirective, selector: "tui-select" }, { type: i5__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5__namespace.FormControlDirective, selector: "[formControl]", inputs: ["disabled", "formControl", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i2__namespace$1.TuiDataListDirective, selector: "ng-template[tuiDataList]" }, { type: i4__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "titlecase": i4__namespace.TitleCasePipe, "tuiFlag": i2__namespace$1.TuiFlagPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiLanguageSwitcherComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'tui-language-switcher',
                         templateUrl: './language-switcher.component.html',
                         styleUrls: ['./language-switcher.component.less'],
+                        providers: [
+                            // TODO: for backward compatibility only. Drop in v4.0
+                            i2$1.TuiFlagPipe,
+                        ],
                         changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     }]
             }], ctorParameters: function () {
-            return [{ type: i5__namespace$2.TuiLanguageSwitcher, decorators: [{
+            return [{ type: i5__namespace$1.TuiLanguageSwitcher, decorators: [{
                             type: i0.Inject,
-                            args: [i5$2.TuiLanguageSwitcher]
-                        }] }, { type: undefined, decorators: [{
+                            args: [i5$1.TuiLanguageSwitcher]
+                        }] }, { type: i2__namespace$1.TuiFlagPipe, decorators: [{
                             type: i0.Inject,
-                            args: [i2$1.TUI_SVG_OPTIONS]
+                            args: [i2$1.TuiFlagPipe]
                         }] }];
         } });
 
@@ -1789,15 +1804,31 @@
         }
         return TuiLanguageSwitcherModule;
     }());
-    TuiLanguageSwitcherModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiLanguageSwitcherModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    TuiLanguageSwitcherModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiLanguageSwitcherModule, declarations: [TuiLanguageSwitcherComponent], imports: [i5.CommonModule, i1.TuiSelectModule, i2$1.TuiDataListModule, i5$1.ReactiveFormsModule], exports: [TuiLanguageSwitcherComponent] });
-    TuiLanguageSwitcherModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiLanguageSwitcherModule, imports: [[i5.CommonModule, i1.TuiSelectModule, i2$1.TuiDataListModule, i5$1.ReactiveFormsModule]] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiLanguageSwitcherModule, decorators: [{
+    TuiLanguageSwitcherModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiLanguageSwitcherModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+    TuiLanguageSwitcherModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiLanguageSwitcherModule, declarations: [TuiLanguageSwitcherComponent], imports: [i4.CommonModule,
+            i2$1.TuiFlagPipeModule,
+            i1.TuiSelectModule,
+            i2$1.TuiDataListModule,
+            i5.ReactiveFormsModule], exports: [TuiLanguageSwitcherComponent] });
+    TuiLanguageSwitcherModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiLanguageSwitcherModule, imports: [[
+                i4.CommonModule,
+                i2$1.TuiFlagPipeModule,
+                i1.TuiSelectModule,
+                i2$1.TuiDataListModule,
+                i5.ReactiveFormsModule,
+            ]] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiLanguageSwitcherModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
                         exports: [TuiLanguageSwitcherComponent],
                         declarations: [TuiLanguageSwitcherComponent],
-                        imports: [i5.CommonModule, i1.TuiSelectModule, i2$1.TuiDataListModule, i5$1.ReactiveFormsModule],
+                        imports: [
+                            i4.CommonModule,
+                            i2$1.TuiFlagPipeModule,
+                            i1.TuiSelectModule,
+                            i2$1.TuiDataListModule,
+                            i5.ReactiveFormsModule,
+                        ],
                     }]
             }] });
 
@@ -1928,9 +1959,9 @@
         });
         return TuiScrollIntoViewLinkDirective;
     }());
-    TuiScrollIntoViewLinkDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiScrollIntoViewLinkDirective, deps: [{ token: i6.TuiDestroyService, self: true }, { token: i0.ElementRef }, { token: TUI_DOC_PAGE_LOADED }], target: i0__namespace.ɵɵFactoryTarget.Directive });
-    TuiScrollIntoViewLinkDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: TuiScrollIntoViewLinkDirective, selector: "[tuiScrollIntoViewLink]", inputs: { tuiScrollIntoViewLink: "tuiScrollIntoViewLink" }, providers: [i6.TuiDestroyService], ngImport: i0__namespace });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiScrollIntoViewLinkDirective, decorators: [{
+    TuiScrollIntoViewLinkDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiScrollIntoViewLinkDirective, deps: [{ token: i6.TuiDestroyService, self: true }, { token: i0.ElementRef }, { token: TUI_DOC_PAGE_LOADED }], target: i0__namespace.ɵɵFactoryTarget.Directive });
+    TuiScrollIntoViewLinkDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: TuiScrollIntoViewLinkDirective, selector: "[tuiScrollIntoViewLink]", inputs: { tuiScrollIntoViewLink: "tuiScrollIntoViewLink" }, providers: [i6.TuiDestroyService], ngImport: i0__namespace });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiScrollIntoViewLinkDirective, decorators: [{
                 type: i0.Directive,
                 args: [{
                         selector: '[tuiScrollIntoViewLink]',
@@ -1971,7 +2002,7 @@
             this.openPagesArr = [];
             this.openPagesGroupsArr = [];
             this.active = '';
-            this.search = new i5$1.FormControl('');
+            this.search = new i5.FormControl('');
             this.filtered$ = i6.tuiControlValue(this.search).pipe(operators.filter(function (search) { return search.length > 2; }), operators.map(function (search) { return _this.filterItems(_this.flattenSubPages(_this.items), search); }));
             this.mode$ = this.mode.change$.pipe(operators.startWith(null), operators.map(function () { return _this.mode.mode || 'onLight'; }));
             // Angular can't navigate no anchor links
@@ -2081,15 +2112,15 @@
         };
         return TuiDocNavigationComponent;
     }());
-    TuiDocNavigationComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiDocNavigationComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i8$1.Title }, { token: NAVIGATION_TITLE }, { token: i5.DOCUMENT }, { token: i2$1.TuiModeDirective }, { token: i4.TuiSidebarDirective, optional: true }, { token: NAVIGATION_LABELS }, { token: NAVIGATION_ITEMS }, { token: TUI_DOC_SEARCH_TEXT }, { token: i6$1.Router }, { token: i6$1.ActivatedRoute }, { token: i6.TuiDestroyService, self: true }, { token: TUI_DOC_PAGE_LOADED }, { token: TUI_DOC_SCROLL_BEHAVIOR }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    TuiDocNavigationComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", 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    tuiTextfieldIconLeft=\"tuiIconSearch\"\n    class=\"t-input\"\n    [formControl]=\"search\"\n    [tuiAutoFocus]=\"!!sidebar\"\n    [tuiTextfieldCleaner]=\"true\"\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                    [routerLink]=\"item.route\"\n                    (click)=\"onClick(input)\"\n                >\n                    {{ item.title }}\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-item=\"item\"\n            let-index=\"index\"\n        >\n            <a\n                *ngIf=\"!item.subPages; else subPages\"\n                tuiLink\n                routerLinkActive=\"t-sublink_active\"\n                class=\"t-sublink\"\n                [routerLink]=\"item.route\"\n                [tuiScrollIntoViewLink]=\"isActive(item.route)\"\n                (click)=\"closeMenu()\"\n            >\n                {{ item.title }}\n            </a>\n            <ng-template #subPages>\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                            src=\"tuiIconChevronRight\"\n                            class=\"t-chevron\"\n                            [class.t-chevron_active]=\"!!openPagesGroupsArr[index]\"\n                        ></tui-svg>\n                        {{ item.title }}\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 item.subPages\"\n                                tuiLink\n                                routerLinkActive=\"t-sublink_active\"\n                                class=\"t-sublink t-sublink_small\"\n                                [routerLink]=\"subPage.route\"\n                                [tuiScrollIntoViewLink]=\"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", 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_active{color:var(--tui-text-01)}.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$1.TuiDataListComponent, selector: "tui-data-list", inputs: ["role", "emptyContent", "size"] }, { type: i2__namespace$1.TuiOptionComponent, selector: "button[tuiOption], a[tuiOption]", inputs: ["size", "role", "disabled", "value"] }, { type: i2__namespace$1.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$1.TuiLinkComponent, selector: "a[tuiLink], button[tuiLink]", inputs: ["pseudo", "icon", "iconAlign", "iconRotated", "mode"], exportAs: ["tuiLink"] }, { type: i2__namespace$1.TuiSvgComponent, selector: "tui-svg", inputs: ["src"] }, { type: i2__namespace$1.TuiExpandComponent, selector: "tui-expand", inputs: ["async", "expanded"] }], directives: [{ type: i1__namespace.TuiInputDirective, selector: "tui-input" }, { type: i2__namespace$1.TuiTextfieldSizeDirective, selector: "[tuiTextfieldSize]", inputs: ["tuiTextfieldSize"] }, { type: i2__namespace$1.TuiTextfieldIconLeftDirective, selector: "[tuiTextfieldIconLeft]", inputs: ["tuiTextfieldIconLeft"] }, { type: i5__namespace$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5__namespace$1.FormControlDirective, selector: "[formControl]", inputs: ["disabled", "formControl", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i6__namespace$1.TuiAutoFocusDirective, selector: "[tuiAutoFocus]", inputs: ["tuiAutoFocus"] }, { type: i2__namespace$1.TuiTextfieldCleanerDirective, selector: "[tuiTextfieldCleaner]", inputs: ["tuiTextfieldCleaner"] }, { type: i2__namespace$1.TuiTextfieldLabelOutsideDirective, selector: "[tuiTextfieldLabelOutside]", inputs: ["tuiTextfieldLabelOutside"] }, { type: i5__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace$1.TuiDataListDirective, selector: "ng-template[tuiDataList]" }, { type: i5__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2__namespace$1.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: i2__namespace$1.TuiModeDirective, selector: "[tuiMode]", inputs: ["tuiMode"] }, { type: i1__namespace.TuiAccordionItemContentDirective, selector: "ng-template[tuiAccordionItemContent]" }, { type: i5__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i6__namespace.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "routerLinkActive"], exportAs: ["routerLinkActive"] }, { type: TuiScrollIntoViewLinkDirective, selector: "[tuiScrollIntoViewLink]", inputs: ["tuiScrollIntoViewLink"] }], pipes: { "async": i5__namespace.AsyncPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    TuiDocNavigationComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiDocNavigationComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i8$1.Title }, { token: NAVIGATION_TITLE }, { token: i4.DOCUMENT }, { token: i2$1.TuiModeDirective }, { token: i4$1.TuiSidebarDirective, optional: true }, { token: NAVIGATION_LABELS }, { token: NAVIGATION_ITEMS }, { token: TUI_DOC_SEARCH_TEXT }, { token: i6$1.Router }, { token: i6$1.ActivatedRoute }, { token: i6.TuiDestroyService, self: true }, { token: TUI_DOC_PAGE_LOADED }, { token: TUI_DOC_SCROLL_BEHAVIOR }], 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    tuiTextfieldIconLeft=\"tuiIconSearch\"\n    class=\"t-input\"\n    [formControl]=\"search\"\n    [tuiAutoFocus]=\"!!sidebar\"\n    [tuiTextfieldCleaner]=\"true\"\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                    [routerLink]=\"item.route\"\n                    (click)=\"onClick(input)\"\n                >\n                    {{ item.title }}\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-item=\"item\"\n            let-index=\"index\"\n        >\n            <a\n                *ngIf=\"!item.subPages; else subPages\"\n                tuiLink\n                routerLinkActive=\"t-sublink_active\"\n                class=\"t-sublink\"\n                [routerLink]=\"item.route\"\n                [tuiScrollIntoViewLink]=\"isActive(item.route)\"\n                (click)=\"closeMenu()\"\n            >\n                {{ item.title }}\n            </a>\n            <ng-template #subPages>\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                            src=\"tuiIconChevronRight\"\n                            class=\"t-chevron\"\n                            [class.t-chevron_active]=\"!!openPagesGroupsArr[index]\"\n                        ></tui-svg>\n                        {{ item.title }}\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 item.subPages\"\n                                tuiLink\n                                routerLinkActive=\"t-sublink_active\"\n                                class=\"t-sublink t-sublink_small\"\n                                [routerLink]=\"subPage.route\"\n                                [tuiScrollIntoViewLink]=\"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", 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_active{color:var(--tui-text-01)}.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$1.TuiDataListComponent, selector: "tui-data-list", inputs: ["role", "emptyContent", "size"] }, { type: i2__namespace$1.TuiOptionComponent, selector: "button[tuiOption], a[tuiOption]", inputs: ["size", "role", "disabled", "value"] }, { type: i2__namespace$1.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$1.TuiLinkComponent, selector: "a[tuiLink], button[tuiLink]", inputs: ["pseudo", "icon", "iconAlign", "iconRotated", "mode"], exportAs: ["tuiLink"] }, { type: i2__namespace$1.TuiSvgComponent, selector: "tui-svg", inputs: ["src"] }, { type: i2__namespace$1.TuiExpandComponent, selector: "tui-expand", inputs: ["async", "expanded"] }], directives: [{ type: i1__namespace.TuiInputDirective, selector: "tui-input" }, { type: i2__namespace$1.TuiTextfieldSizeDirective, selector: "[tuiTextfieldSize]", inputs: ["tuiTextfieldSize"] }, { type: i2__namespace$1.TuiTextfieldIconLeftDirective, selector: "[tuiTextfieldIconLeft]", inputs: ["tuiTextfieldIconLeft"] }, { 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$1.TuiTextfieldCleanerDirective, selector: "[tuiTextfieldCleaner]", inputs: ["tuiTextfieldCleaner"] }, { type: i2__namespace$1.TuiTextfieldLabelOutsideDirective, selector: "[tuiTextfieldLabelOutside]", inputs: ["tuiTextfieldLabelOutside"] }, { type: i4__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace$1.TuiDataListDirective, selector: "ng-template[tuiDataList]" }, { type: i4__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2__namespace$1.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: i2__namespace$1.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: TuiScrollIntoViewLinkDirective, selector: "[tuiScrollIntoViewLink]", inputs: ["tuiScrollIntoViewLink"] }], pipes: { "async": i4__namespace.AsyncPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
     __decorate([
         i6.tuiPure
     ], TuiDocNavigationComponent.prototype, "filterItems", null);
     __decorate([
         i6.tuiPure
     ], TuiDocNavigationComponent.prototype, "flattenSubPages", null);
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiDocNavigationComponent, decorators: [{
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiDocNavigationComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'tui-doc-navigation',
@@ -2110,7 +2141,7 @@
                             args: [NAVIGATION_TITLE]
                         }] }, { type: Document, decorators: [{
                             type: i0.Inject,
-                            args: [i5.DOCUMENT]
+                            args: [i4.DOCUMENT]
                         }] }, { type: i2__namespace$1.TuiModeDirective, decorators: [{
                             type: i0.Inject,
                             args: [i2$1.TuiModeDirective]
@@ -2118,7 +2149,7 @@
                             type: i0.Optional
                         }, {
                             type: i0.Inject,
-                            args: [i4.TuiSidebarDirective]
+                            args: [i4$1.TuiSidebarDirective]
                         }] }, { type: undefined, decorators: [{
                             type: i0.Inject,
                             args: [NAVIGATION_LABELS]
@@ -2174,9 +2205,9 @@
         };
         return TuiDocHeaderComponent;
     }());
-    TuiDocHeaderComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiDocHeaderComponent, deps: [{ token: TUI_DOC_LOGO }, { token: TUI_DOC_MENU_TEXT }, { token: i6$1.Router }, { token: i6.TuiSwipeService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    TuiDocHeaderComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TuiDocHeaderComponent, selector: "header[tuiDocHeader]", ngImport: i0__namespace, template: "<button\n    tuiIconButton\n    icon=\"tuiIconMenuLarge\"\n    appearance=\"icon\"\n    type=\"button\"\n    class=\"t-menu\"\n    [title]=\"menu\"\n    (click)=\"onClick()\"\n    (tuiActiveZoneChange)=\"onActiveZone($event)\"\n>\n    <tui-doc-navigation\n        *tuiSidebar=\"!!(open$ | async)\"\n        class=\"t-navigation\"\n    ></tui-doc-navigation>\n</button>\n<div class=\"t-logo\">\n    <img\n        *polymorpheusOutlet=\"logo as src\"\n        alt=\"Logo\"\n        class=\"t-img\"\n        [src]=\"src\"\n    />\n</div>\n<ng-content></ng-content>\n", 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)}.t-logo{margin-right:auto;font:var(--tui-font-heading-5)}.t-img{display:block}.t-menu{margin-left:-1.25rem}@media screen and (min-width: 48em){.t-menu{display:none}}.t-navigation{min-height:100%}\n"], components: [{ type: i2__namespace$1.TuiButtonComponent, selector: "button[tuiButton], button[tuiIconButton], a[tuiButton], a[tuiIconButton]", inputs: ["appearance", "disabled", "icon", "iconRight", "shape", "showLoader", "size"] }, { type: TuiDocNavigationComponent, selector: "tui-doc-navigation" }], directives: [{ type: i6__namespace$1.TuiActiveZoneDirective, selector: "[tuiActiveZone]:not(ng-container), [tuiActiveZoneChange]:not(ng-container), [tuiActiveZoneParent]:not(ng-container)", inputs: ["tuiActiveZoneParent"], outputs: ["tuiActiveZoneChange"], exportAs: ["tuiActiveZone"] }, { type: i4__namespace.TuiSidebarDirective, selector: "[tuiSidebar]", inputs: ["tuiSidebarDirection", "tuiSidebarAutoWidth", "tuiSidebar"] }, { type: i6__namespace$2.PolymorpheusOutletDirective, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }], pipes: { "async": i5__namespace.AsyncPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiDocHeaderComponent, decorators: [{
+    TuiDocHeaderComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiDocHeaderComponent, deps: [{ token: TUI_DOC_LOGO }, { token: TUI_DOC_MENU_TEXT }, { token: i6$1.Router }, { token: i6.TuiSwipeService }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    TuiDocHeaderComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TuiDocHeaderComponent, selector: "header[tuiDocHeader]", ngImport: i0__namespace, template: "<button\n    tuiIconButton\n    icon=\"tuiIconMenuLarge\"\n    appearance=\"icon\"\n    type=\"button\"\n    class=\"t-menu\"\n    [title]=\"menu\"\n    (click)=\"onClick()\"\n    (tuiActiveZoneChange)=\"onActiveZone($event)\"\n>\n    <tui-doc-navigation\n        *tuiSidebar=\"!!(open$ | async)\"\n        class=\"t-navigation\"\n    ></tui-doc-navigation>\n</button>\n<div class=\"t-logo\">\n    <img\n        *polymorpheusOutlet=\"logo as src\"\n        alt=\"Logo\"\n        class=\"t-img\"\n        [src]=\"src\"\n    />\n</div>\n<ng-content></ng-content>\n", 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)}.t-logo{margin-right:auto;font:var(--tui-font-heading-5)}.t-img{display:block}.t-menu{margin-left:-1.25rem}@media screen and (min-width: 48em){.t-menu{display:none}}.t-navigation{min-height:100%}\n"], components: [{ type: i2__namespace$1.TuiButtonComponent, selector: "button[tuiButton], button[tuiIconButton], a[tuiButton], a[tuiIconButton]", inputs: ["appearance", "disabled", "icon", "iconRight", "shape", "showLoader", "size"] }, { type: TuiDocNavigationComponent, selector: "tui-doc-navigation" }], directives: [{ type: i6__namespace$1.TuiActiveZoneDirective, selector: "[tuiActiveZone]:not(ng-container), [tuiActiveZoneChange]:not(ng-container), [tuiActiveZoneParent]:not(ng-container)", inputs: ["tuiActiveZoneParent"], outputs: ["tuiActiveZoneChange"], exportAs: ["tuiActiveZone"] }, { type: i4__namespace$1.TuiSidebarDirective, selector: "[tuiSidebar]", inputs: ["tuiSidebarDirection", "tuiSidebarAutoWidth", "tuiSidebar"] }, { type: i6__namespace$2.PolymorpheusOutletDirective, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }], 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: TuiDocHeaderComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'header[tuiDocHeader]',
@@ -2223,15 +2254,15 @@
         };
         return TuiDocMainComponent;
     }());
-    TuiDocMainComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiDocMainComponent, deps: [{ token: common.LOCAL_STORAGE }, { token: common.WINDOW }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    TuiDocMainComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TuiDocMainComponent, selector: "tui-doc-main", host: { properties: { "attr.data-mode": "this.mode" } }, providers: [
+    TuiDocMainComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiDocMainComponent, deps: [{ token: common.LOCAL_STORAGE }, { token: common.WINDOW }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    TuiDocMainComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TuiDocMainComponent, selector: "tui-doc-main", host: { properties: { "attr.data-mode": "this.mode" } }, providers: [
             {
                 provide: i2$1.TuiModeDirective,
                 useExisting: i0.forwardRef(function () { return TuiDocMainComponent; }),
             },
             i6.TuiSwipeService,
-        ], ngImport: i0__namespace, 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-toggle\"\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=\"tuiOverAlerts\">\n        <ng-content select=\"tuiOverAlerts\"></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", styles: ["html{scroll-padding-top:4rem;height:auto}tui-root>tui-scroll-controls>.t-bar_vertical{top:4rem!important}@keyframes tuiShaking{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-.3125rem)}20%,40%,60%,80%{transform:translate(.3125rem)}}body{background:var(--tui-base-01);height:auto}tui-doc-main{display:block}code:not(.hljs):not([class*=\"language-\"]):not(.exception){transition-property:background;transition-duration:var(--tui-duration, .3s);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}button:focus code,a:focus code{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)}@media screen and (max-width: 47.9625em){tui-doc-navigation.tui-doc-navigation{display:none}}.tui-doc-content{margin-left:16.25rem}@media screen and (max-width: 47.9625em){.tui-doc-content{margin-left:0}}.tui-doc-outlet+*{display:block}.tui-doc-animated-example{animation:1s .3s tuiShaking}label.night-mode{cursor:pointer}label.night-mode .tui-toggle{margin-left:.5rem}.hljs-tag{background:none}.hljs{display:block;overflow-x:auto;padding:.5em;color:var(--tui-text-01);background-color:var(--tui-clear)}.hljs.hljs-line-numbers{background:transparent}.hljs-subst,.hljs-title{font-weight:normal;color:var(--tui-text-01)}.hljs-comment,.hljs-quote{color:var(--tui-text-03);font-style:italic}.hljs-meta{color:#e38162}.hljs-section,.hljs-name,.hljs-literal,.hljs-keyword,.hljs-selector-tag,.hljs-type,.hljs-selector-id,.hljs-selector-class{font-weight:bold;color:var(--tui-link)}.hljs-attribute,.hljs-number,.hljs-regexp,.hljs-link{font-weight:bold;color:var(--tui-support-06)}.hljs-number,.hljs-regexp,.hljs-link{font-weight:normal}.hljs-string{color:var(--tui-positive);font-weight:bold}.hljs-symbol,.hljs-bullet,.hljs-formula{color:var(--tui-text-01);background:var(--tui-base-02);font-style:italic}.hljs-doctag{text-decoration:underline}.hljs-variable,.hljs-template-variable{color:var(--tui-link-hover)}[data-mode=onDark] .hljs-variable,[data-mode=onDark] .hljs-template-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:bold}.hljs .hljs-line-numbers{padding:0}.hljs-ln-numbers{vertical-align:top;opacity:.3;text-align:right;padding-right:1em!important}\n"], components: [{ type: i2__namespace$1.TuiThemeNightComponent, selector: "tui-theme-night" }, { type: i2__namespace$1.TuiRootComponent, selector: "tui-root" }, { type: TuiDocNavigationComponent, selector: "tui-doc-navigation" }, { type: TuiDocHeaderComponent, selector: "header[tuiDocHeader]" }, { type: i1__namespace.TuiToggleComponent, selector: "tui-toggle", inputs: ["singleColor", "showIcons", "showLoader", "size"] }], directives: [{ type: i5__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6__namespace.RouterOutlet, selector: "router-outlet", outputs: ["activate", "deactivate"], exportAs: ["outlet"] }, { type: i5__namespace$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5__namespace$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.Default, encapsulation: i0__namespace.ViewEncapsulation.None });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiDocMainComponent, decorators: [{
+        ], ngImport: i0__namespace, 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        <ng-content select=\"tuiDocHeader\"></ng-content>\n        <button\n            tuiIconButton\n            tuiMode=\"onLight\"\n            appearance=\"secondary\"\n            size=\"s\"\n            shape=\"rounded\"\n            type=\"button\"\n            class=\"tui-doc-night-mode-switch\"\n            [icon]=\"night ? 'tuiIconSunLarge' : 'tuiIconMoonLarge'\"\n            (click)=\"onMode(!night)\"\n        ></button>\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=\"tuiOverAlerts\">\n        <ng-content select=\"tuiOverAlerts\"></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", styles: ["html{scroll-padding-top:4rem;height:auto}tui-root>tui-scroll-controls>.t-bar_vertical{top:4rem!important}@keyframes tuiShaking{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-.3125rem)}20%,40%,60%,80%{transform:translate(.3125rem)}}body{background:var(--tui-base-01);height:auto}tui-doc-main{display:block}code:not(.hljs):not([class*=\"language-\"]):not(.exception){transition-property:background;transition-duration:var(--tui-duration, .3s);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}button:focus code,a:focus code{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)}@media screen and (max-width: 47.9625em){tui-doc-navigation.tui-doc-navigation{display:none}}.tui-doc-content{margin-left:16.25rem}@media screen and (max-width: 47.9625em){.tui-doc-content{margin-left:0}}.tui-doc-outlet+*{display:block}.tui-doc-animated-example{animation:1s .3s tuiShaking}.tui-doc-night-mode-switch{margin-left:1rem}.tui-doc-night-mode-switch tui-svg{color:var(--tui-text-02)}.hljs-tag{background:none}.hljs{display:block;overflow-x:auto;padding:.5em;color:var(--tui-text-01);background-color:var(--tui-clear)}.hljs.hljs-line-numbers{background:transparent}.hljs-subst,.hljs-title{font-weight:normal;color:var(--tui-text-01)}.hljs-comment,.hljs-quote{color:var(--tui-text-03);font-style:italic}.hljs-meta{color:#e38162}.hljs-section,.hljs-name,.hljs-literal,.hljs-keyword,.hljs-selector-tag,.hljs-type,.hljs-selector-id,.hljs-selector-class{font-weight:bold;color:var(--tui-link)}.hljs-attribute,.hljs-number,.hljs-regexp,.hljs-link{font-weight:bold;color:var(--tui-support-06)}.hljs-number,.hljs-regexp,.hljs-link{font-weight:normal}.hljs-string{color:var(--tui-positive);font-weight:bold}.hljs-symbol,.hljs-bullet,.hljs-formula{color:var(--tui-text-01);background:var(--tui-base-02);font-style:italic}.hljs-doctag{text-decoration:underline}.hljs-variable,.hljs-template-variable{color:var(--tui-link-hover)}[data-mode=onDark] .hljs-variable,[data-mode=onDark] .hljs-template-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:bold}.hljs .hljs-line-numbers{padding:0}.hljs-ln-numbers{vertical-align:top;opacity:.3;text-align:right;padding-right:1em!important}\n"], components: [{ type: i2__namespace$1.TuiThemeNightComponent, selector: "tui-theme-night" }, { type: i2__namespace$1.TuiRootComponent, selector: "tui-root" }, { type: TuiDocNavigationComponent, selector: "tui-doc-navigation" }, { type: TuiDocHeaderComponent, selector: "header[tuiDocHeader]" }, { type: i2__namespace$1.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: i6__namespace.RouterOutlet, selector: "router-outlet", outputs: ["activate", "deactivate"], exportAs: ["outlet"] }, { type: i2__namespace$1.TuiModeDirective, selector: "[tuiMode]", inputs: ["tuiMode"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.Default, encapsulation: i0__namespace.ViewEncapsulation.None });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiDocMainComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'tui-doc-main',
@@ -2267,10 +2298,10 @@
         }
         return TuiScrollIntoViewLinkModule;
     }());
-    TuiScrollIntoViewLinkModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiScrollIntoViewLinkModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    TuiScrollIntoViewLinkModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiScrollIntoViewLinkModule, declarations: [TuiScrollIntoViewLinkDirective], exports: [TuiScrollIntoViewLinkDirective] });
-    TuiScrollIntoViewLinkModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiScrollIntoViewLinkModule });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiScrollIntoViewLinkModule, decorators: [{
+    TuiScrollIntoViewLinkModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiScrollIntoViewLinkModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+    TuiScrollIntoViewLinkModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiScrollIntoViewLinkModule, declarations: [TuiScrollIntoViewLinkDirective], exports: [TuiScrollIntoViewLinkDirective] });
+    TuiScrollIntoViewLinkModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiScrollIntoViewLinkModule });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiScrollIntoViewLinkModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
                         declarations: [TuiScrollIntoViewLinkDirective],
@@ -2283,9 +2314,9 @@
         }
         return TuiDocNavigationModule;
     }());
-    TuiDocNavigationModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiDocNavigationModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    TuiDocNavigationModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiDocNavigationModule, declarations: [TuiDocNavigationComponent], imports: [i5.CommonModule,
-            i5$1.ReactiveFormsModule,
+    TuiDocNavigationModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiDocNavigationModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+    TuiDocNavigationModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiDocNavigationModule, declarations: [TuiDocNavigationComponent], imports: [i4.CommonModule,
+            i5.ReactiveFormsModule,
             i6$1.RouterModule,
             i6$2.PolymorpheusModule,
             TuiScrollIntoViewLinkModule,
@@ -2304,9 +2335,9 @@
             i2$1.TuiSvgModule,
             i2$1.TuiDataListModule,
             i6.TuiAutoFocusModule], exports: [TuiDocNavigationComponent] });
-    TuiDocNavigationModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiDocNavigationModule, imports: [[
-                i5.CommonModule,
-                i5$1.ReactiveFormsModule,
+    TuiDocNavigationModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiDocNavigationModule, imports: [[
+                i4.CommonModule,
+                i5.ReactiveFormsModule,
                 i6$1.RouterModule,
                 i6$2.PolymorpheusModule,
                 TuiScrollIntoViewLinkModule,
@@ -2326,12 +2357,12 @@
                 i2$1.TuiDataListModule,
                 i6.TuiAutoFocusModule,
             ]] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiDocNavigationModule, decorators: [{
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiDocNavigationModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
                         imports: [
-                            i5.CommonModule,
-                            i5$1.ReactiveFormsModule,
+                            i4.CommonModule,
+                            i5.ReactiveFormsModule,
                             i6$1.RouterModule,
                             i6$2.PolymorpheusModule,
                             TuiScrollIntoViewLinkModule,
@@ -2361,29 +2392,29 @@
         }
         return TuiDocHeaderModule;
     }());
-    TuiDocHeaderModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiDocHeaderModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    TuiDocHeaderModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiDocHeaderModule, declarations: [TuiDocHeaderComponent], imports: [i5.CommonModule,
+    TuiDocHeaderModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiDocHeaderModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+    TuiDocHeaderModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiDocHeaderModule, declarations: [TuiDocHeaderComponent], imports: [i4.CommonModule,
             i6$2.PolymorpheusModule,
             i2$1.TuiButtonModule,
-            i4.TuiSidebarModule,
+            i4$1.TuiSidebarModule,
             i6.TuiActiveZoneModule,
             TuiDocNavigationModule], exports: [TuiDocHeaderComponent] });
-    TuiDocHeaderModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiDocHeaderModule, imports: [[
-                i5.CommonModule,
+    TuiDocHeaderModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiDocHeaderModule, imports: [[
+                i4.CommonModule,
                 i6$2.PolymorpheusModule,
                 i2$1.TuiButtonModule,
-                i4.TuiSidebarModule,
+                i4$1.TuiSidebarModule,
                 i6.TuiActiveZoneModule,
                 TuiDocNavigationModule,
             ]] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiDocHeaderModule, decorators: [{
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiDocHeaderModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
                         imports: [
-                            i5.CommonModule,
+                            i4.CommonModule,
                             i6$2.PolymorpheusModule,
                             i2$1.TuiButtonModule,
-                            i4.TuiSidebarModule,
+                            i4$1.TuiSidebarModule,
                             i6.TuiActiveZoneModule,
                             TuiDocNavigationModule,
                         ],
@@ -2397,42 +2428,42 @@
         }
         return TuiDocMainModule;
     }());
-    TuiDocMainModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiDocMainModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    TuiDocMainModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiDocMainModule, declarations: [TuiDocMainComponent], imports: [i5.CommonModule,
+    TuiDocMainModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiDocMainModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+    TuiDocMainModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiDocMainModule, declarations: [TuiDocMainComponent], imports: [i4.CommonModule,
             i6$1.RouterModule,
-            i5$1.FormsModule,
-            i1.TuiToggleModule,
             i2$1.TuiThemeNightModule,
             TuiDocHeaderModule,
             i2$1.TuiRootModule,
             i2$1.TuiDialogModule,
             i2$1.TuiAlertModule,
+            i2$1.TuiButtonModule,
+            i2$1.TuiModeModule,
             TuiDocNavigationModule], exports: [TuiDocMainComponent] });
-    TuiDocMainModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiDocMainModule, imports: [[
-                i5.CommonModule,
+    TuiDocMainModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiDocMainModule, imports: [[
+                i4.CommonModule,
                 i6$1.RouterModule,
-                i5$1.FormsModule,
-                i1.TuiToggleModule,
                 i2$1.TuiThemeNightModule,
                 TuiDocHeaderModule,
                 i2$1.TuiRootModule,
                 i2$1.TuiDialogModule,
                 i2$1.TuiAlertModule,
+                i2$1.TuiButtonModule,
+                i2$1.TuiModeModule,
                 TuiDocNavigationModule,
             ]] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiDocMainModule, decorators: [{
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiDocMainModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
                         imports: [
-                            i5.CommonModule,
+                            i4.CommonModule,
                             i6$1.RouterModule,
-                            i5$1.FormsModule,
-                            i1.TuiToggleModule,
                             i2$1.TuiThemeNightModule,
                             TuiDocHeaderModule,
                             i2$1.TuiRootModule,
                             i2$1.TuiDialogModule,
                             i2$1.TuiAlertModule,
+                            i2$1.TuiButtonModule,
+                            i2$1.TuiModeModule,
                             TuiDocNavigationModule,
                         ],
                         declarations: [TuiDocMainComponent],
@@ -2472,12 +2503,12 @@
         }
         return TuiDocPageTabConnectorDirective;
     }());
-    TuiDocPageTabConnectorDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiDocPageTabConnectorDirective, deps: [{ token: i0.TemplateRef }], target: i0__namespace.ɵɵFactoryTarget.Directive });
-    TuiDocPageTabConnectorDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: TuiDocPageTabConnectorDirective, selector: "[pageTab]", inputs: { pageTab: "pageTab" }, ngImport: i0__namespace });
+    TuiDocPageTabConnectorDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiDocPageTabConnectorDirective, deps: [{ token: i0.TemplateRef }], target: i0__namespace.ɵɵFactoryTarget.Directive });
+    TuiDocPageTabConnectorDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: TuiDocPageTabConnectorDirective, selector: "[pageTab]", inputs: { pageTab: "pageTab" }, ngImport: i0__namespace });
     __decorate([
         i6.tuiDefaultProp()
     ], TuiDocPageTabConnectorDirective.prototype, "pageTab", void 0);
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiDocPageTabConnectorDirective, decorators: [{
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiDocPageTabConnectorDirective, decorators: [{
                 type: i0.Directive,
                 args: [{
                         selector: '[pageTab]',
@@ -2521,12 +2552,12 @@
         };
         return TuiDocSourceCodeComponent;
     }());
-    TuiDocSourceCodeComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiDocSourceCodeComponent, deps: [{ token: TUI_DOC_SOURCE_CODE }, { token: TUI_DOC_SOURCE_CODE_TEXT }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    TuiDocSourceCodeComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TuiDocSourceCodeComponent, selector: "tui-doc-source-code", inputs: { header: "header", package: "package", type: "type", path: "path" }, ngImport: i0__namespace, template: "<a\n    *polymorpheusOutlet=\"sourceCode as link; context: pathOptions\"\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", components: [{ type: i2__namespace$1.TuiButtonComponent, selector: "button[tuiButton], button[tuiIconButton], a[tuiButton], a[tuiIconButton]", inputs: ["appearance", "disabled", "icon", "iconRight", "shape", "showLoader", "size"] }], directives: [{ type: i6__namespace$2.PolymorpheusOutletDirective, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    TuiDocSourceCodeComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiDocSourceCodeComponent, deps: [{ token: TUI_DOC_SOURCE_CODE }, { token: TUI_DOC_SOURCE_CODE_TEXT }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    TuiDocSourceCodeComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TuiDocSourceCodeComponent, selector: "tui-doc-source-code", inputs: { header: "header", package: "package", type: "type", path: "path" }, ngImport: i0__namespace, template: "<a\n    *polymorpheusOutlet=\"sourceCode as link; context: pathOptions\"\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", components: [{ type: i2__namespace$1.TuiButtonComponent, selector: "button[tuiButton], button[tuiIconButton], a[tuiButton], a[tuiIconButton]", inputs: ["appearance", "disabled", "icon", "iconRight", "shape", "showLoader", "size"] }], directives: [{ type: i6__namespace$2.PolymorpheusOutletDirective, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
     __decorate([
         i6.tuiPure
     ], TuiDocSourceCodeComponent.prototype, "getPathOptions", null);
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiDocSourceCodeComponent, decorators: [{
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiDocSourceCodeComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'tui-doc-source-code',
@@ -2571,9 +2602,9 @@
         };
         return TuiDocSeeAlsoComponent;
     }());
-    TuiDocSeeAlsoComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiDocSeeAlsoComponent, deps: [{ token: TUI_DOC_SEE_ALSO_TEXT }, { token: TUI_DOC_PAGES }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    TuiDocSeeAlsoComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TuiDocSeeAlsoComponent, selector: "tui-doc-see-also", inputs: { seeAlso: "seeAlso" }, ngImport: i0__namespace, template: "<h5 class=\"t-header\">{{ text }}</h5>\n<ng-container *ngFor=\"let item of seeAlso; last as last\">\n    <a\n        tuiLink\n        [routerLink]=\"getRouterLink(item)\"\n        [innerText]=\"item\"\n    ></a>\n    <ng-container *ngIf=\"!last\">{{ ', ' }}</ng-container>\n</ng-container>\n", styles: [":host{display:block}.t-header{font-size:.6875rem;line-height:1rem;text-transform:uppercase;letter-spacing:.075em;color:var(--tui-text-02);margin:0 0 .5rem;white-space:nowrap}\n"], components: [{ type: i2__namespace$1.TuiLinkComponent, selector: "a[tuiLink], button[tuiLink]", inputs: ["pseudo", "icon", "iconAlign", "iconRotated", "mode"], exportAs: ["tuiLink"] }], directives: [{ type: i5__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6__namespace.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["routerLink", "target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo"] }, { type: i5__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiDocSeeAlsoComponent, decorators: [{
+    TuiDocSeeAlsoComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiDocSeeAlsoComponent, deps: [{ token: TUI_DOC_SEE_ALSO_TEXT }, { token: TUI_DOC_PAGES }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    TuiDocSeeAlsoComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TuiDocSeeAlsoComponent, selector: "tui-doc-see-also", inputs: { seeAlso: "seeAlso" }, ngImport: i0__namespace, template: "<h5 class=\"t-header\">{{ text }}</h5>\n<ng-container *ngFor=\"let item of seeAlso; last as last\">\n    <a\n        tuiLink\n        [routerLink]=\"getRouterLink(item)\"\n        [innerText]=\"item\"\n    ></a>\n    <ng-container *ngIf=\"!last\">{{ ', ' }}</ng-container>\n</ng-container>\n", styles: [":host{display:block}.t-header{font-size:.6875rem;line-height:1rem;text-transform:uppercase;letter-spacing:.075em;color:var(--tui-text-02);margin:0 0 .5rem;white-space:nowrap}\n"], components: [{ type: i2__namespace$1.TuiLinkComponent, selector: "a[tuiLink], button[tuiLink]", inputs: ["pseudo", "icon", "iconAlign", "iconRotated", "mode"], exportAs: ["tuiLink"] }], directives: [{ type: i4__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6__namespace.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["routerLink", "target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo"] }, { type: i4__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiDocSeeAlsoComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'tui-doc-see-also',
@@ -2618,9 +2649,9 @@
         };
         return TuiDocPageComponent;
     }());
-    TuiDocPageComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiDocPageComponent, deps: [{ token: TUI_DOC_DEFAULT_TABS }, { token: PAGE_SEE_ALSO }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    TuiDocPageComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TuiDocPageComponent, selector: "tui-doc-page", inputs: { header: "header", package: "package", type: "type", path: "path", deprecated: "deprecated" }, providers: PAGE_PROVIDERS, queries: [{ propertyName: "tabConnectors", predicate: TuiDocPageTabConnectorDirective }], ngImport: i0__namespace, template: "<header class=\"t-header\">\n    <h1 class=\"t-title\">\n        {{ header }}\n        <tui-tag\n            *ngIf=\"!!deprecated || deprecated === ''\"\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 *ngFor=\"let tab of tabConnectors; first as first; index as index\">\n            <ng-container *ngIf=\"first; else dynamicTab\">\n                <a\n                    *tuiItem\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                    *tuiItem\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\n            *ngIf=\"index === activeItemIndex\"\n            [ngTemplateOutlet]=\"tab.template\"\n        ></ng-container>\n    </ng-container>\n</div>\n", 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)}:host-context(tui-root._mobile) .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}:host-context(tui-root._mobile) .t-tabs{margin-top:.25rem}.t-content{padding:2rem 0;margin:0 min(10vw,8.75rem)}:host-context(tui-root._mobile) .t-content{padding:2rem 1.25rem;margin:0}.t-see-also{min-width:18.75rem;width:30%;float:right;margin-left:1.5rem}:host-context(tui-root._mobile) .t-see-also{float:none;width:100%;margin:0 0 1.5rem}.t-source-code{align-self:flex-end;line-height:2.75rem;margin-left:auto}\n"], components: [{ type: i1__namespace.TuiTagComponent, selector: "tui-tag, a[tuiTag]", inputs: ["value", "editable", "separator", "maxLength", "size", "showLoader", "status", "hoverable", "removable", "disabled", "autoColor", "leftContent"], outputs: ["edited"] }, { 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: TuiDocSourceCodeComponent, selector: "tui-doc-source-code", inputs: ["header", "package", "type", "path"] }, { type: TuiDocSeeAlsoComponent, selector: "tui-doc-see-also", inputs: ["seeAlso"] }], directives: [{ type: i5__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6__namespace$1.TuiItemDirective, selector: "[tuiItem]" }, { type: i6__namespace.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["routerLink", "target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo"] }, { type: i6__namespace.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "routerLinkActive"], exportAs: ["routerLinkActive"] }, { type: i5__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiDocPageComponent, decorators: [{
+    TuiDocPageComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiDocPageComponent, deps: [{ token: TUI_DOC_DEFAULT_TABS }, { token: PAGE_SEE_ALSO }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    TuiDocPageComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TuiDocPageComponent, selector: "tui-doc-page", inputs: { header: "header", package: "package", type: "type", path: "path", deprecated: "deprecated" }, providers: PAGE_PROVIDERS, queries: [{ propertyName: "tabConnectors", predicate: TuiDocPageTabConnectorDirective }], ngImport: i0__namespace, template: "<header class=\"t-header\">\n    <h1 class=\"t-title\">\n        {{ header }}\n        <tui-tag\n            *ngIf=\"!!deprecated || deprecated === ''\"\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 *ngFor=\"let tab of tabConnectors; first as first; index as index\">\n            <ng-container *ngIf=\"first; else dynamicTab\">\n                <a\n                    *tuiItem\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                    *tuiItem\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\n            *ngIf=\"index === activeItemIndex\"\n            [ngTemplateOutlet]=\"tab.template\"\n        ></ng-container>\n    </ng-container>\n</div>\n", 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)}:host-context(tui-root._mobile) .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}:host-context(tui-root._mobile) .t-tabs{margin-top:.25rem}.t-content{padding:2rem 0;margin:0 min(10vw,8.75rem)}:host-context(tui-root._mobile) .t-content{padding:2rem 1.25rem;margin:0}.t-see-also{min-width:18.75rem;width:30%;float:right;margin-left:1.5rem}:host-context(tui-root._mobile) .t-see-also{float:none;width:100%;margin:0 0 1.5rem}.t-source-code{align-self:flex-end;line-height:2.75rem;margin-left:auto}\n"], components: [{ type: i1__namespace.TuiTagComponent, selector: "tui-tag, a[tuiTag]", inputs: ["value", "editable", "separator", "maxLength", "size", "showLoader", "status", "hoverable", "removable", "disabled", "autoColor", "leftContent"], outputs: ["edited"] }, { 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: TuiDocSourceCodeComponent, selector: "tui-doc-source-code", inputs: ["header", "package", "type", "path"] }, { type: TuiDocSeeAlsoComponent, selector: "tui-doc-see-also", inputs: ["seeAlso"] }], directives: [{ type: i4__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6__namespace$1.TuiItemDirective, selector: "[tuiItem]" }, { type: i6__namespace.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["routerLink", "target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo"] }, { type: i6__namespace.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "routerLinkActive"], exportAs: ["routerLinkActive"] }, { type: i4__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiDocPageComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'tui-doc-page',
@@ -2657,13 +2688,13 @@
         }
         return TuiDocSeeAlsoModule;
     }());
-    TuiDocSeeAlsoModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiDocSeeAlsoModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    TuiDocSeeAlsoModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiDocSeeAlsoModule, declarations: [TuiDocSeeAlsoComponent], imports: [i5.CommonModule, i6$1.RouterModule, i2$1.TuiLinkModule], exports: [TuiDocSeeAlsoComponent] });
-    TuiDocSeeAlsoModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiDocSeeAlsoModule, imports: [[i5.CommonModule, i6$1.RouterModule, i2$1.TuiLinkModule]] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiDocSeeAlsoModule, decorators: [{
+    TuiDocSeeAlsoModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiDocSeeAlsoModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+    TuiDocSeeAlsoModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiDocSeeAlsoModule, declarations: [TuiDocSeeAlsoComponent], imports: [i4.CommonModule, i6$1.RouterModule, i2$1.TuiLinkModule], exports: [TuiDocSeeAlsoComponent] });
+    TuiDocSeeAlsoModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiDocSeeAlsoModule, imports: [[i4.CommonModule, i6$1.RouterModule, i2$1.TuiLinkModule]] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiDocSeeAlsoModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
-                        imports: [i5.CommonModule, i6$1.RouterModule, i2$1.TuiLinkModule],
+                        imports: [i4.CommonModule, i6$1.RouterModule, i2$1.TuiLinkModule],
                         declarations: [TuiDocSeeAlsoComponent],
                         exports: [TuiDocSeeAlsoComponent],
                     }]
@@ -2674,14 +2705,14 @@
         }
         return TuiDocSourceCodeModule;
     }());
-    TuiDocSourceCodeModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiDocSourceCodeModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    TuiDocSourceCodeModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiDocSourceCodeModule, declarations: [TuiDocSourceCodeComponent], imports: [i5.CommonModule, i6$2.PolymorpheusModule, i2$1.TuiButtonModule], exports: [TuiDocSourceCodeComponent] });
-    TuiDocSourceCodeModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiDocSourceCodeModule, imports: [[i5.CommonModule, i6$2.PolymorpheusModule, i2$1.TuiButtonModule]] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiDocSourceCodeModule, decorators: [{
+    TuiDocSourceCodeModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiDocSourceCodeModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+    TuiDocSourceCodeModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiDocSourceCodeModule, declarations: [TuiDocSourceCodeComponent], imports: [i4.CommonModule, i6$2.PolymorpheusModule, i2$1.TuiButtonModule], exports: [TuiDocSourceCodeComponent] });
+    TuiDocSourceCodeModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiDocSourceCodeModule, imports: [[i4.CommonModule, i6$2.PolymorpheusModule, i2$1.TuiButtonModule]] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiDocSourceCodeModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
                         declarations: [TuiDocSourceCodeComponent],
-                        imports: [i5.CommonModule, i6$2.PolymorpheusModule, i2$1.TuiButtonModule],
+                        imports: [i4.CommonModule, i6$2.PolymorpheusModule, i2$1.TuiButtonModule],
                         exports: [TuiDocSourceCodeComponent],
                     }]
             }] });
@@ -2691,26 +2722,26 @@
         }
         return TuiDocPageModule;
     }());
-    TuiDocPageModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiDocPageModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    TuiDocPageModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiDocPageModule, declarations: [TuiDocPageComponent, TuiDocPageTabConnectorDirective], imports: [i5.CommonModule,
+    TuiDocPageModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiDocPageModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+    TuiDocPageModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiDocPageModule, declarations: [TuiDocPageComponent, TuiDocPageTabConnectorDirective], imports: [i4.CommonModule,
             i6$1.RouterModule,
             TuiDocSeeAlsoModule,
             i1.TuiTabsModule,
             i1.TuiTagModule,
             TuiDocSourceCodeModule], exports: [TuiDocPageComponent, TuiDocPageTabConnectorDirective] });
-    TuiDocPageModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiDocPageModule, imports: [[
-                i5.CommonModule,
+    TuiDocPageModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiDocPageModule, imports: [[
+                i4.CommonModule,
                 i6$1.RouterModule,
                 TuiDocSeeAlsoModule,
                 i1.TuiTabsModule,
                 i1.TuiTagModule,
                 TuiDocSourceCodeModule,
             ]] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiDocPageModule, decorators: [{
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiDocPageModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
                         imports: [
-                            i5.CommonModule,
+                            i4.CommonModule,
                             i6$1.RouterModule,
                             TuiDocSeeAlsoModule,
                             i1.TuiTabsModule,
@@ -2764,18 +2795,18 @@
         }
         return TuiAddonDocModule;
     }());
-    TuiAddonDocModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiAddonDocModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    TuiAddonDocModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiAddonDocModule, exports: [TuiDocCodeModule,
+    TuiAddonDocModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiAddonDocModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+    TuiAddonDocModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiAddonDocModule, exports: [TuiDocCodeModule,
             TuiDocDemoModule,
             TuiDocDocumentationModule,
             TuiDocPageModule,
             TuiDocExampleModule] });
-    TuiAddonDocModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiAddonDocModule, imports: [TuiDocCodeModule,
+    TuiAddonDocModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiAddonDocModule, imports: [TuiDocCodeModule,
             TuiDocDemoModule,
             TuiDocDocumentationModule,
             TuiDocPageModule,
             TuiDocExampleModule] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiAddonDocModule, decorators: [{
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiAddonDocModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
                         exports: [
@@ -2817,7 +2848,9 @@
     exports.TUI_DOC_DEMO_TEXTS = TUI_DOC_DEMO_TEXTS;
     exports.TUI_DOC_DOCUMENTATION_TEXTS = TUI_DOC_DOCUMENTATION_TEXTS;
     exports.TUI_DOC_EXAMPLE_CONTENT_PROCESSOR = TUI_DOC_EXAMPLE_CONTENT_PROCESSOR;
+    exports.TUI_DOC_EXAMPLE_DEFAULT_OPTIONS = TUI_DOC_EXAMPLE_DEFAULT_OPTIONS;
     exports.TUI_DOC_EXAMPLE_MARKDOWN_CODE_PROCESSOR = TUI_DOC_EXAMPLE_MARKDOWN_CODE_PROCESSOR;
+    exports.TUI_DOC_EXAMPLE_OPTIONS = TUI_DOC_EXAMPLE_OPTIONS;
     exports.TUI_DOC_EXAMPLE_TEXTS = TUI_DOC_EXAMPLE_TEXTS;
     exports.TUI_DOC_EXCLUDED_PROPERTIES = TUI_DOC_EXCLUDED_PROPERTIES;
     exports.TUI_DOC_LOGO = TUI_DOC_LOGO;
@@ -2860,6 +2893,7 @@
     exports.TuiScrollIntoViewLinkDirective = TuiScrollIntoViewLinkDirective;
     exports.TuiScrollIntoViewLinkModule = TuiScrollIntoViewLinkModule;
     exports.tuiCoerceValue = tuiCoerceValue;
+    exports.tuiDocExampleOptionsProvider = tuiDocExampleOptionsProvider;
     exports.tuiDocExcludeProperties = tuiDocExcludeProperties;
     exports.tuiGenerateRoutes = tuiGenerateRoutes;
     exports.tuiRawLoad = tuiRawLoad;