@taiga-ui/addon-doc 2.54.1 → 2.57.0

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

@@ -285,12 +285,12 @@
      */
     // eslint-disable-next-line @typescript-eslint/naming-convention
     function tryParseMarkdownCodeBlock(text) {
-        if (text === void 0) { text = ''; }
+        if (text === void 0) { text = ""; }
         var tokens = new MarkdownIt().parse(text, {});
         var result = tokens
             .filter(function (_a) {
             var tag = _a.tag, type = _a.type;
-            return tag === 'code' && type === 'fence';
+            return tag === "code" && type === "fence";
         })
             .map(function (_a) {
             var content = _a.content;
@@ -302,8 +302,8 @@
 
     var TuiDocCodeComponent = /** @class */ (function () {
         function TuiDocCodeComponent() {
-            this.rawLoader$$ = new rxjs.BehaviorSubject('');
-            this.filename = '';
+            this.rawLoader$$ = new rxjs.BehaviorSubject("");
+            this.filename = "";
             this.processor$ = this.rawLoader$$.pipe(operators.switchMap(rawLoad), operators.map(tryParseMarkdownCodeBlock));
         }
         Object.defineProperty(TuiDocCodeComponent.prototype, "code", {
@@ -327,11 +327,11 @@
             core.Input()
         ], TuiDocCodeComponent.prototype, "code", null);
         __decorate([
-            core.HostBinding('class._has-filename')
+            core.HostBinding("class._has-filename")
         ], TuiDocCodeComponent.prototype, "hasFilename", null);
         TuiDocCodeComponent = __decorate([
             core.Component({
-                selector: 'tui-doc-code',
+                selector: "tui-doc-code",
                 template: "<p\n    *ngIf=\"filename\"\n    class=\"t-header\"\n>\n    {{ filename }}\n</p>\n<pre\n    *ngFor=\"let content of processor$ | async\"\n    class=\"t-code\"\n><code [lineNumbers]=\"true\" [highlight]=\"content\"></code></pre>\n",
                 styles: [":host{display:block}.t-header{font:var(--tui-font-text-s);font-weight:700}.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-disabled);word-wrap:break-word;white-space:pre-wrap}@media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.hljs:not(:empty)::-webkit-scrollbar,.hljs:not(:empty)::-webkit-scrollbar-thumb{width:1rem;height:1rem;border-radius:6.25rem;background-clip:padding-box;border: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}"]
             })
@@ -377,7 +377,7 @@
         ], TuiDocCopyComponent.prototype, "copied$", null);
         TuiDocCopyComponent = __decorate([
             core.Component({
-                selector: 'tui-doc-copy',
+                selector: "tui-doc-copy",
                 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",
                 changeDetection: core.ChangeDetectionStrategy.OnPush,
                 providers: [cdk.TuiDestroyService],
@@ -408,8 +408,8 @@
      * Works with a tuple
      * [@string tuiMode tooltip content, @string word 'background', @string 'form value']
      */
-    var TUI_DOC_DEMO_TEXTS = new core.InjectionToken('tui-doc-demo i18n texts', {
-        factory: function () { return ['Read more more about modes: ', 'Background', 'Form value']; },
+    var TUI_DOC_DEMO_TEXTS = new core.InjectionToken("tui-doc-demo i18n texts", {
+        factory: function () { return ["Read more more about modes: ", "Background", "Form value"]; },
     });
     /**
      * Works with a tuple
@@ -421,13 +421,13 @@
      * @string message for tooltip about ng-polymorpheus
      * ]
      */
-    var TUI_DOC_DOCUMENTATION_TEXTS = new core.InjectionToken('tui-doc-documentation i18n texts', {
+    var TUI_DOC_DOCUMENTATION_TEXTS = new core.InjectionToken("tui-doc-documentation i18n texts", {
         factory: function () { return [
-            'Argument',
-            'Type',
-            'Name and description',
-            'Value',
-            'Learn about our dynamic templates from ',
+            "Argument",
+            "Type",
+            "Name and description",
+            "Value",
+            "Learn about our dynamic templates from ",
         ]; },
     });
     /**
@@ -438,20 +438,20 @@
      * @string link to a sample copied message label
      * ]
      */
-    var TUI_DOC_EXAMPLE_TEXTS = new core.InjectionToken('tui-doc-example i18n texts', {
-        factory: function () { return ['Preview', 'Link to a sample was successfully copied', 'Done']; },
+    var TUI_DOC_EXAMPLE_TEXTS = new core.InjectionToken("tui-doc-example i18n texts", {
+        factory: function () { return ["Preview", "Link to a sample was successfully copied", "Done"]; },
     });
-    var TUI_DOC_MENU_TEXT = new core.InjectionToken('menu i18n text', {
-        factory: function () { return 'Menu'; },
+    var TUI_DOC_MENU_TEXT = new core.InjectionToken("menu i18n text", {
+        factory: function () { return "Menu"; },
     });
-    var TUI_DOC_SEARCH_TEXT = new core.InjectionToken('search i18n text', {
-        factory: function () { return 'Search'; },
+    var TUI_DOC_SEARCH_TEXT = new core.InjectionToken("search i18n text", {
+        factory: function () { return "Search"; },
     });
-    var TUI_DOC_SEE_ALSO_TEXT = new core.InjectionToken('tui-doc-see-also i18n text', {
-        factory: function () { return 'See also'; },
+    var TUI_DOC_SEE_ALSO_TEXT = new core.InjectionToken("tui-doc-see-also i18n text", {
+        factory: function () { return "See also"; },
     });
-    var TUI_DOC_SOURCE_CODE_TEXT = new core.InjectionToken('tui-doc-source-code i18n text', {
-        factory: function () { return 'Source code'; },
+    var TUI_DOC_SOURCE_CODE_TEXT = new core.InjectionToken("tui-doc-source-code i18n text", {
+        factory: function () { return "Source code"; },
     });
 
     var MIN_COMPONENT_WIDTH = 104;
@@ -467,14 +467,14 @@
             this.wrapperWidth = 0;
             this.control = null;
             this.template = null;
-            this.updateOnVariants = ['change', 'blur', 'submit'];
-            this.updateOn = 'change';
+            this.updateOnVariants = ["change", "blur", "submit"];
+            this.updateOn = "change";
             this.expanded = false;
             this.opaque = true;
             this.modeControl = new forms.FormControl();
             this.mode = null;
             this.change$ = new rxjs.Subject();
-            this.items = ['onLight', 'onDark'];
+            this.items = ["onLight", "onDark"];
             this.isBrowser = common.isPlatformBrowser(platformId);
             var parsedMode = locationRef.path().match(/tuiMode=(onDark|onLight)/);
             if (parsedMode !== null && parsedMode.length > 0) {
@@ -506,9 +506,9 @@
             }
             var paddingLeft = this.isBrowser
                 ? getComputedStyle(this.content.nativeElement).paddingLeft
-                : '0';
+                : "0";
             var offsetWidth = this.content.nativeElement.offsetWidth;
-            this.resizerText.nativeElement.textContent = String(offsetWidth - parseInt(paddingLeft || '0', 10) * 2);
+            this.resizerText.nativeElement.textContent = String(offsetWidth - parseInt(paddingLeft || "0", 10) * 2);
         };
         TuiDocDemoComponent.prototype.onDragStart = function (event) {
             event.preventDefault();
@@ -541,7 +541,7 @@
             if (!this.wrapper) {
                 return;
             }
-            this.renderer.setStyle(this.wrapper.nativeElement, 'width', cdk.px(Math.max(this.wrapperWidth - delta, MIN_COMPONENT_WIDTH)));
+            this.renderer.setStyle(this.wrapper.nativeElement, "width", cdk.px(Math.max(this.wrapperWidth - delta, MIN_COMPONENT_WIDTH)));
         };
         var TuiDocDemoComponent_1;
         TuiDocDemoComponent.ctorParameters = function () { return [
@@ -554,13 +554,13 @@
             { type: Array, decorators: [{ type: core.Inject, args: [TUI_DOC_DEMO_TEXTS,] }] }
         ]; };
         __decorate([
-            core.ViewChild('content')
+            core.ViewChild("content")
         ], TuiDocDemoComponent.prototype, "content", void 0);
         __decorate([
-            core.ViewChild('wrapper')
+            core.ViewChild("wrapper")
         ], TuiDocDemoComponent.prototype, "wrapper", void 0);
         __decorate([
-            core.ViewChild('resizerText')
+            core.ViewChild("resizerText")
         ], TuiDocDemoComponent.prototype, "resizerText", void 0);
         __decorate([
             core.Input()
@@ -569,11 +569,11 @@
             core.ContentChild(core.TemplateRef)
         ], TuiDocDemoComponent.prototype, "template", void 0);
         __decorate([
-            core.HostListener('window:resize')
+            core.HostListener("window:resize")
         ], TuiDocDemoComponent.prototype, "onResize", null);
         TuiDocDemoComponent = TuiDocDemoComponent_1 = __decorate([
             core.Component({
-                selector: 'tui-doc-demo',
+                selector: "tui-doc-demo",
                 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            [formControl]=\"modeControl\"\n        >\n            tuiMode\n            <tui-data-list-wrapper\n                *tuiDataList\n                [items]=\"items\"\n            ></tui-data-list-wrapper>\n        </tui-select>\n    </ng-container>\n    <ng-template #desktop>\n        tuiMode:\n        <tui-tooltip\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                [formControl]=\"modeControl\"\n            >\n                null\n            </tui-radio-block>\n            <tui-radio-block\n                item=\"onDark\"\n                size=\"s\"\n                nativeId=\"form\"\n                class=\"tui-group__auto-width-item\"\n                [hideRadio]=\"true\"\n                [formControl]=\"modeControl\"\n            >\n                onDark\n            </tui-radio-block>\n            <tui-radio-block\n                item=\"onLight\"\n                size=\"s\"\n                nativeId=\"form\"\n                class=\"tui-group__auto-width-item\"\n                [hideRadio]=\"true\"\n                [formControl]=\"modeControl\"\n            >\n                onLight\n            </tui-radio-block>\n        </div>\n    </ng-template>\n    <tui-checkbox-labeled\n        size=\"m\"\n        class=\"t-checkbox\"\n        [(ngModel)]=\"opaque\"\n    >\n        {{ texts[1] }}\n    </tui-checkbox-labeled>\n</div>\n<div\n    #wrapper\n    class=\"t-wrapper\"\n    [class.t-wrapper_dark]=\"modeControl.value === 'onDark'\"\n    [class.t-wrapper_gray]=\"modeControl.value === 'onLight'\"\n    [class.t-wrapper_transparent]=\"!opaque\"\n>\n    <div\n        #content\n        id=\"demoContent\"\n        class=\"t-content\"\n    >\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                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                            class=\"t-select\"\n                            [ngModel]=\"updateOn\"\n                            [ngModelOptions]=\"{standalone: true}\"\n                            (ngModelChange)=\"updateOnChange($event)\"\n                        >\n                            updateOn\n                            <tui-data-list-wrapper\n                                *tuiDataList\n                                [items]=\"updateOnVariants\"\n                            ></tui-data-list-wrapper>\n                        </tui-select>\n                        <button\n                            tuiButton\n                            type=\"reset\"\n                            size=\"s\"\n                            class=\"tui-group__auto-width-item\"\n                        >\n                            Reset\n                        </button>\n                        <button\n                            tuiButton\n                            type=\"submit\"\n                            size=\"s\"\n                            class=\"tui-group__auto-width-item\"\n                        >\n                            Submit\n                        </button>\n                    </div>\n                </ng-template>\n            </tui-expand>\n        </form>\n        <ng-content></ng-content>\n    </div>\n    <button\n        tabindex=\"-1\"\n        class=\"t-resizer\"\n        (tuiDragStart)=\"onDragStart($event)\"\n        (tuiDragContinues)=\"onDragContinues($event)\"\n        (tuiDragEnd)=\"onDragEnd()\"\n    >\n        <span\n            #resizerText\n            class=\"t-resizer-text\"\n        ></span>\n    </button>\n</div>\n",
                 changeDetection: core.ChangeDetectionStrategy.OnPush,
                 providers: [
@@ -636,7 +636,7 @@
      */
     // eslint-disable-next-line @typescript-eslint/naming-convention
     function rgbToHex(r, g, b) {
-        return "#" + [r, g, b].map(function (x) { return x.toString(16).padStart(2, '0'); }).join('');
+        return "#" + [r, g, b].map(function (x) { return x.toString(16).padStart(2, "0"); }).join("");
     }
     var tuiRgbToHex = rgbToHex;
     /**
@@ -645,10 +645,10 @@
     // eslint-disable-next-line @typescript-eslint/naming-convention
     function hexToRgb(hex) {
         var matches = hex
-            .replace('#', '')
-            .split('')
+            .replace("#", "")
+            .split("")
             .map(function (char, _, array) { return (array.length === 3 ? char + char : char); })
-            .join('')
+            .join("")
             .match(/.{2}/g);
         return matches
             ? matches.map(function (x) { return Number.parseInt(x, 16); })
@@ -658,18 +658,18 @@
 
     function inspectArray(array, depth) {
         if (depth === 0) {
-            return '[…]';
+            return "[\u2026]";
         }
-        var result = '';
+        var result = "";
         var first = true;
         for (var index = 0; index < array.length; index++) {
             if (first) {
                 first = false;
             }
             else {
-                result += ', ';
+                result += ", ";
             }
-            result += index in array ? inspectAny(array[index], depth - 1) : 'empty';
+            result += index in array ? inspectAny(array[index], depth - 1) : "empty";
         }
         return "[" + result + "]";
     }
@@ -677,7 +677,7 @@
         if (depth === 0) {
             return "{\u2026}";
         }
-        var result = '';
+        var result = "";
         var first = true;
         for (var key in object) {
             if (!object.hasOwnProperty(key)) {
@@ -687,7 +687,7 @@
                 first = false;
             }
             else {
-                result += ', ';
+                result += ", ";
             }
             result += key + ": " + inspectAny(object[key], depth - 1);
         }
@@ -703,15 +703,15 @@
     // eslint-disable-next-line @typescript-eslint/naming-convention
     function inspectAny(data, depth) {
         if (data === null) {
-            return 'null';
+            return "null";
         }
         switch (typeof data) {
-            case 'string':
+            case "string":
                 return "'" + data + "'";
-            case 'undefined':
-            case 'number':
-            case 'boolean':
-            case 'function':
+            case "undefined":
+            case "number":
+            case "boolean":
+            case "function":
                 return String(data);
         }
         if (data instanceof RegExp) {
@@ -734,7 +734,7 @@
             return null;
         }
         else if (isBooleanParamValue(prepared)) {
-            return String(prepared) === 'true';
+            return String(prepared) === "true";
         }
         else if (isNumberParamValue(prepared)) {
             return Number(prepared);
@@ -751,10 +751,10 @@
     }
     var tuiCoerceValue = coerceValue;
     function isEmptyParamValue(value) {
-        return ['undefined', 'null', 'NaN', 'Infinity'].includes(value);
+        return ["undefined", "null", "NaN", "Infinity"].includes(value);
     }
     function isBooleanParamValue(value) {
-        return value === 'true' || value === 'false';
+        return value === "true" || value === "false";
     }
     function isNumberParamValue(value) {
         // TODO: investigate to disallow potentially catastrophic exponential-time regular expressions.
@@ -762,13 +762,13 @@
         return /^-?[\d.]+(?:e-?\d+)?$/.test(value);
     }
     function isPossibleArray(value) {
-        return value.startsWith('[') && value.endsWith(']');
+        return value.startsWith("[") && value.endsWith("]");
     }
     function isPossibleObject(value) {
-        return value.startsWith('{') && value.endsWith('}');
+        return value.startsWith("{") && value.endsWith("}");
     }
 
-    var SERIALIZED_SUFFIX = '$';
+    var SERIALIZED_SUFFIX = "$";
     // @bad TODO: refactor output and value sync
     var TuiDocDocumentationPropertyConnectorDirective = /** @class */ (function () {
         function TuiDocDocumentationPropertyConnectorDirective(template, locationRef, activatedRoute, urlSerializer) {
@@ -776,9 +776,9 @@
             this.locationRef = locationRef;
             this.activatedRoute = activatedRoute;
             this.urlSerializer = urlSerializer;
-            this.documentationPropertyName = '';
+            this.documentationPropertyName = "";
             this.documentationPropertyMode = null;
-            this.documentationPropertyType = '';
+            this.documentationPropertyType = "";
             this.documentationPropertyDeprecated = false;
             this.documentationPropertyValues = null;
             this.documentationPropertyValueChange = new core.EventEmitter();
@@ -791,11 +791,11 @@
         Object.defineProperty(TuiDocDocumentationPropertyConnectorDirective.prototype, "attrName", {
             get: function () {
                 switch (this.documentationPropertyMode) {
-                    case 'input':
+                    case "input":
                         return "[" + this.documentationPropertyName + "]";
-                    case 'output':
+                    case "output":
                         return "(" + this.documentationPropertyName + ")";
-                    case 'input-output':
+                    case "input-output":
                         return "[(" + this.documentationPropertyName + ")]";
                     default:
                         return this.documentationPropertyName;
@@ -813,7 +813,7 @@
         });
         Object.defineProperty(TuiDocDocumentationPropertyConnectorDirective.prototype, "shouldShowValues", {
             get: function () {
-                return this.documentationPropertyMode !== 'output';
+                return this.documentationPropertyMode !== "output";
             },
             enumerable: true,
             configurable: true
@@ -849,7 +849,7 @@
             var computedValue = isValueAvailableByKey && this.documentationPropertyValues
                 ? this.documentationPropertyValues.indexOf(value)
                 : value;
-            var suffix = isValueAvailableByKey ? SERIALIZED_SUFFIX : '';
+            var suffix = isValueAvailableByKey ? SERIALIZED_SUFFIX : "";
             var propName = this.documentationPropertyName + suffix;
             tree.queryParams = __assign(__assign({}, tree.queryParams), (_a = {}, _a[propName] = computedValue, _a));
             this.locationRef.go(String(tree));
@@ -883,8 +883,8 @@
         ], TuiDocDocumentationPropertyConnectorDirective.prototype, "documentationPropertyValueChange", void 0);
         TuiDocDocumentationPropertyConnectorDirective = __decorate([
             core.Directive({
-                selector: 'ng-template[documentationPropertyName]',
-                exportAs: 'documentationProperty',
+                selector: "ng-template[documentationPropertyName]",
+                exportAs: "documentationProperty",
             }),
             __param(0, core.Inject(core.TemplateRef)),
             __param(1, core.Inject(common.Location)),
@@ -901,7 +901,7 @@
         function TuiDocDocumentationComponent(changeDetectorRef, texts) {
             this.changeDetectorRef = changeDetectorRef;
             this.texts = texts;
-            this.heading = '';
+            this.heading = "";
             this.showValues = true;
             this.isAPI = false;
             this.propertiesConnectors = cdk.EMPTY_QUERY;
@@ -925,71 +925,71 @@
         TuiDocDocumentationComponent.prototype.getColor = function (color) {
             if (color.length === 4) {
                 return color
-                    .split('')
+                    .split("")
                     .reduce(function (result, current) { return __spread(result, [current, current]); }, [])
-                    .join('')
-                    .replace('#', '');
+                    .join("")
+                    .replace("#", "");
             }
-            if (color.startsWith('#')) {
+            if (color.startsWith("#")) {
                 return color;
             }
-            if (color === 'transparent') {
-                return '#000000';
+            if (color === "transparent") {
+                return "#000000";
             }
             var parsed = color
-                .replace('rgb(', '')
-                .replace('rgba(', '')
-                .replace(')', '')
-                .replace(' ', '')
-                .split(',')
+                .replace("rgb(", "")
+                .replace("rgba(", "")
+                .replace(")", "")
+                .replace(" ", "")
+                .split(",")
                 .map(function (v) { return Number.parseInt(v, 10); });
             return rgbToHex.apply(void 0, __spread(parsed));
         };
         TuiDocDocumentationComponent.prototype.getOpacity = function (color) {
-            if (color.startsWith('#') || color.startsWith('rgb(')) {
+            if (color.startsWith("#") || color.startsWith("rgb(")) {
                 return 100;
             }
-            if (color === 'transparent') {
+            if (color === "transparent") {
                 return 0;
             }
-            var lastComma = color.lastIndexOf(',');
+            var lastComma = color.lastIndexOf(",");
             var parsed = color
                 .slice(lastComma)
-                .replace(')', '')
-                .replace(' ', '')
-                .replace(',', '');
+                .replace(")", "")
+                .replace(" ", "")
+                .replace(",", "");
             return Math.round(Number.parseFloat(parsed) * 100);
         };
         TuiDocDocumentationComponent.prototype.onColorChange = function (connector, color) {
-            var opacity = this.getOpacity(connector.documentationPropertyValue || '');
+            var opacity = this.getOpacity(connector.documentationPropertyValue || "");
             if (opacity === 100) {
                 connector.onValueChange(color);
                 return;
             }
-            var rgb = hexToRgb(color).join(', ');
+            var rgb = hexToRgb(color).join(", ");
             var result = "rgba(" + rgb + ", " + opacity / 100 + ")";
             connector.onValueChange(result);
         };
         TuiDocDocumentationComponent.prototype.onOpacityChange = function (connector, opacity) {
-            var hex = this.getColor(connector.documentationPropertyValue || '');
+            var hex = this.getColor(connector.documentationPropertyValue || "");
             var rgb = hexToRgb(hex);
             var result = "rgba(" + rgb + ", " + opacity / 100 + ")";
             connector.onValueChange(result);
         };
         TuiDocDocumentationComponent.prototype.stripOptional = function (name) {
-            return name.replace('?', '');
+            return name.replace("?", "");
         };
         TuiDocDocumentationComponent.prototype.isOptional = function (name) {
-            return name.includes('?');
+            return name.includes("?");
         };
         TuiDocDocumentationComponent.prototype.isPrimitivePolymorpheusContent = function (value) {
-            return typeof value === 'string' || typeof value === 'number';
+            return typeof value === "string" || typeof value === "number";
         };
         TuiDocDocumentationComponent.prototype.showCleaner = function (type) {
-            return type.includes('null');
+            return type.includes("null");
         };
         TuiDocDocumentationComponent.prototype.showContentTooltip = function (type) {
-            return type.includes('PolymorpheusContent');
+            return type.includes("PolymorpheusContent");
         };
         TuiDocDocumentationComponent.prototype.inspectAny = function (data) {
             return inspectAny(data, 2);
@@ -1012,12 +1012,12 @@
         ], TuiDocDocumentationComponent.prototype, "propertiesConnectors", void 0);
         TuiDocDocumentationComponent = __decorate([
             core.Component({
-                selector: 'tui-doc-documentation',
+                selector: "tui-doc-documentation",
                 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-cell_value\"\n        >\n            {{ texts[3] }}\n        </th>\n    </tr>\n    <tr\n        *ngFor=\"let propertyConnector of propertiesConnectors\"\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                {{ stripOptional(propertyConnector.attrName) }}\n                <tui-badge\n                    *ngIf=\"isOptional(propertyConnector.attrName)\"\n                    size=\"s\"\n                    value=\"Optional\"\n                ></tui-badge>\n            </div>\n            <span\n                *ngIf=\"propertyConnector.documentationPropertyDeprecated\"\n                class=\"t-deprecated-label\"\n            >\n                deprecated\n            </span>\n            <ng-container [ngTemplateOutlet]=\"propertyConnector.template\"></ng-container>\n        </td>\n        <td class=\"t-cell\">\n            <span class=\"type\">\n                {{ propertyConnector.documentationPropertyType }}\n                <tui-tooltip\n                    *ngIf=\"showContentTooltip(propertyConnector.documentationPropertyType)\"\n                    [describeId]=\"propertyConnector.attrName\"\n                    [content]=\"content\"\n                >\n                    <ng-template #content>\n                        {{ texts[4] }}\n                        <a\n                            tuiLink\n                            tuiMode=\"onDark\"\n                            target=\"_blank\"\n                            href=\"https://github.com/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\"\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]=\"showCleaner(propertyConnector.documentationPropertyType)\"\n                    [tuiTextfieldLabelOutside]=\"true\"\n                    [nativeId]=\"propertyConnector.attrName\"\n                    [valueContent]=\"selectContent\"\n                    [ngModel]=\"propertyConnector.documentationPropertyValue\"\n                    (ngModelChange)=\"propertyConnector.onValueChange($event)\"\n                >\n                    <code class=\"t-exception\">null</code>\n                    <tui-data-list-wrapper\n                        *tuiDataList\n                        [items]=\"propertyConnector.documentationPropertyValues\"\n                        [itemContent]=\"selectContent\"\n                    ></tui-data-list-wrapper>\n                </tui-select>\n                <ng-template\n                    #selectContent\n                    let-data\n                >\n                    <code>{{ inspectAny(data) }}</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                                tuiTextfieldType=\"text\"\n                                tuiTextfieldSize=\"m\"\n                                [attr.id]=\"propertyConnector.attrName\"\n                                [tuiTextfieldLabelOutside]=\"true\"\n                                [tuiInputOpacity]=\"getOpacity(propertyConnector.documentationPropertyValue)\"\n                                [value]=\"getColor(propertyConnector.documentationPropertyValue)\"\n                                (valueChange)=\"onColorChange(propertyConnector, $event)\"\n                            ></tui-primitive-textfield>\n                            <tui-input-count\n                                tuiTextfieldSize=\"m\"\n                                [max]=\"100\"\n                                [ngModel]=\"getOpacity(propertyConnector.documentationPropertyValue)\"\n                                (ngModelChange)=\"onOpacityChange(propertyConnector, $event)\"\n                            >\n                                Opacity\n                            </tui-input-count>\n                        </div>\n\n                        <tui-input-count\n                            *ngSwitchCase=\"'number'\"\n                            tuiTextfieldSize=\"m\"\n                            [nativeId]=\"propertyConnector.attrName\"\n                            [tuiTextfieldLabelOutside]=\"true\"\n                            [ngModel]=\"propertyConnector.documentationPropertyValue\"\n                            (ngModelChange)=\"propertyConnector.onValueChange($event)\"\n                        ></tui-input-count>\n\n                        <ng-container *ngSwitchCase=\"'PolymorpheusContent'\">\n                            <tui-primitive-textfield\n                                *ngIf=\"isPrimitivePolymorpheusContent(propertyConnector.documentationPropertyValue)\"\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",
                 changeDetection: core.ChangeDetectionStrategy.OnPush,
                 animations: [
-                    animations.trigger('emitEvent', [
-                        animations.transition(':increment', [animations.style({ opacity: 1 }), animations.animate('500ms ease-in')]),
+                    animations.trigger("emitEvent", [
+                        animations.transition(":increment", [animations.style({ opacity: 1 }), animations.animate("500ms ease-in")]),
                     ]),
                 ],
                 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;text-align:right}.t-cell_prop{width:40%}.t-cell_value{max-width:20rem}:host-context(tui-root._mobile) .t-cell_value{width:9.375rem}: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:400;text-align:left}.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)}"]
@@ -1037,7 +1037,7 @@
             set: function (opacity) {
                 var nativeFocusableElement = this.tuiFocusableComponent.nativeFocusableElement;
                 if (nativeFocusableElement) {
-                    this.renderer.setStyle(nativeFocusableElement, 'opacity', opacity / 100);
+                    this.renderer.setStyle(nativeFocusableElement, "opacity", opacity / 100);
                 }
             },
             enumerable: true,
@@ -1052,7 +1052,7 @@
         ], TuiInputOpacityDirective.prototype, "tuiInputOpacity", null);
         TuiInputOpacityDirective = __decorate([
             core.Directive({
-                selector: '[tuiInputOpacity]',
+                selector: "[tuiInputOpacity]",
             }),
             __param(0, core.Inject(core.Renderer2)),
             __param(1, core.Inject(cdk.TUI_FOCUSABLE_ITEM_ACCESSOR))
@@ -1111,13 +1111,13 @@
         return TuiDocDocumentationModule;
     }());
 
-    var TUI_DOC_CODE_ACTIONS = new core.InjectionToken('Code actions for the opened tab with code example', {
-        factory: function () { return ''; },
+    var TUI_DOC_CODE_ACTIONS = new core.InjectionToken("Code actions for the opened tab with code example", {
+        factory: function () { return ""; },
     });
 
-    var TUI_DOC_CODE_EDITOR = new core.InjectionToken('Contains service for opening online IDE e.g. Stackblitz');
+    var TUI_DOC_CODE_EDITOR = new core.InjectionToken("Contains service for opening online IDE e.g. Stackblitz");
 
-    var TUI_DOC_EXAMPLE_CONTENT_PROCESSOR = new core.InjectionToken('Processes content in example', { factory: function () { return rxjs.identity; } });
+    var TUI_DOC_EXAMPLE_CONTENT_PROCESSOR = new core.InjectionToken("Processes content in example", { factory: function () { return rxjs.identity; } });
 
     /**
      * @deprecated: use {@link tuiRawLoadRecord} instead
@@ -1170,7 +1170,7 @@
     // Ambient type cannot be used without dynamic https://github.com/angular/angular/issues/23395
     // @dynamic
     var TuiDocExampleComponent = /** @class */ (function () {
-        function TuiDocExampleComponent(id, clipboard, notifications, location, copyTexts$, texts, codeEditor, processContent, isCypress, codeActions) {
+        function TuiDocExampleComponent(id, clipboard, notifications, location, copyTexts$, texts, codeEditor, processContent, isCypress, codeActions, router, route, ngLocation) {
             var _this = this;
             this.id = id;
             this.clipboard = clipboard;
@@ -1182,9 +1182,12 @@
             this.processContent = processContent;
             this.isCypress = isCypress;
             this.codeActions = codeActions;
+            this.router = router;
+            this.route = route;
+            this.ngLocation = ngLocation;
             this.rawLoader$$ = new rxjs.BehaviorSubject({});
-            this.heading = '';
-            this.description = '';
+            this.heading = "";
+            this.description = "";
             this.componentName = this.location.pathname.slice(1);
             this.defaultTabIndex = 0;
             this.defaultTab = this.texts[this.defaultTabIndex];
@@ -1204,11 +1207,12 @@
             configurable: true
         });
         TuiDocExampleComponent.prototype.copyExampleLink = function () {
-            var hashPosition = this.location.href.indexOf('#');
+            var hashPosition = this.location.href.indexOf("#");
             var currentUrl = hashPosition > -1
                 ? this.location.href.slice(0, Math.max(0, hashPosition))
                 : this.location.href;
             var url = currentUrl + "#" + this.id;
+            this.setFragmentWithoutRedirect(this.id);
             this.clipboard.copy(url);
             this.notifications
                 .show(this.texts[1], {
@@ -1221,10 +1225,16 @@
             var _this = this;
             var _a, _b;
             this.loading$.next(true);
-            (_a = this.codeEditor) === null || _a === void 0 ? void 0 : _a.edit(this.componentName, (_b = this.id) !== null && _b !== void 0 ? _b : '', files).finally(function () { return _this.loading$.next(false); });
+            (_a = this.codeEditor) === null || _a === void 0 ? void 0 : _a.edit(this.componentName, (_b = this.id) !== null && _b !== void 0 ? _b : "", files).finally(function () { return _this.loading$.next(false); });
+        };
+        TuiDocExampleComponent.prototype.setFragmentWithoutRedirect = function (id) {
+            var url = this.router
+                .createUrlTree([], { relativeTo: this.route, fragment: id || "" })
+                .toString();
+            this.ngLocation.go(url);
         };
         TuiDocExampleComponent.ctorParameters = function () { return [
-            { type: String, decorators: [{ type: core.Attribute, args: ['id',] }] },
+            { type: String, decorators: [{ type: core.Attribute, args: ["id",] }] },
             { type: clipboard.Clipboard, decorators: [{ type: core.Inject, args: [clipboard.Clipboard,] }] },
             { type: core$1.TuiNotificationsService, decorators: [{ type: core.Inject, args: [core$1.TuiNotificationsService,] }] },
             { type: Location, decorators: [{ type: core.Inject, args: [common$1.LOCATION,] }] },
@@ -1233,7 +1243,10 @@
             { type: undefined, decorators: [{ type: core.Optional }, { type: core.Inject, args: [TUI_DOC_CODE_EDITOR,] }] },
             { type: undefined, decorators: [{ type: core.Inject, args: [TUI_DOC_EXAMPLE_CONTENT_PROCESSOR,] }] },
             { type: Boolean, decorators: [{ type: core.Inject, args: [cdk.TUI_IS_CYPRESS,] }] },
-            { type: Array, decorators: [{ type: core.Inject, args: [TUI_DOC_CODE_ACTIONS,] }] }
+            { type: Array, decorators: [{ type: core.Inject, args: [TUI_DOC_CODE_ACTIONS,] }] },
+            { type: router.Router, decorators: [{ type: core.Inject, args: [router.Router,] }] },
+            { type: router.ActivatedRoute, decorators: [{ type: core.Inject, args: [router.ActivatedRoute,] }] },
+            { type: common.Location, decorators: [{ type: core.Inject, args: [common.Location,] }] }
         ]; };
         __decorate([
             core.Input()
@@ -1249,12 +1262,12 @@
         ], TuiDocExampleComponent.prototype, "componentName", void 0);
         TuiDocExampleComponent = __decorate([
             core.Component({
-                selector: 'tui-doc-example',
+                selector: "tui-doc-example",
                 template: "<h3\n    *ngIf=\"heading\"\n    class=\"t-title\"\n>\n    <span\n        polymorpheus-outlet\n        [content]=\"heading | tuiDocExampleCapitalize\"\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    polymorpheus-outlet\n    class=\"t-description\"\n    [content]=\"description | tuiDocExampleCapitalize\"\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                        *tuiTab\n                        tuiTab\n                    >\n                        {{ tab }}\n                    </button>\n                </ng-container>\n            </tui-tabs-with-more>\n\n            <button\n                *ngIf=\"codeEditor\"\n                tuiButton\n                appearance=\"flat\"\n                size=\"s\"\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            <div\n                polymorpheus-outlet\n                [content]=\"action\"\n                [context]=\"{$implicit: code}\"\n            ></div>\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",
                 changeDetection: core.ChangeDetectionStrategy.OnPush,
                 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:400;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:0.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}"]
             }),
-            __param(0, core.Attribute('id')),
+            __param(0, core.Attribute("id")),
             __param(1, core.Inject(clipboard.Clipboard)),
             __param(2, core.Inject(core$1.TuiNotificationsService)),
             __param(3, core.Inject(common$1.LOCATION)),
@@ -1264,7 +1277,10 @@
             __param(6, core.Inject(TUI_DOC_CODE_EDITOR)),
             __param(7, core.Inject(TUI_DOC_EXAMPLE_CONTENT_PROCESSOR)),
             __param(8, core.Inject(cdk.TUI_IS_CYPRESS)),
-            __param(9, core.Inject(TUI_DOC_CODE_ACTIONS))
+            __param(9, core.Inject(TUI_DOC_CODE_ACTIONS)),
+            __param(10, core.Inject(router.Router)),
+            __param(11, core.Inject(router.ActivatedRoute)),
+            __param(12, core.Inject(common.Location))
         ], TuiDocExampleComponent);
         return TuiDocExampleComponent;
     }());
@@ -1273,10 +1289,10 @@
         function TuiDocExampleCapitalizePipe() {
         }
         TuiDocExampleCapitalizePipe.prototype.transform = function (content) {
-            return typeof content === 'string' ? core$1.capitalizeFirstLetter(content) : content;
+            return typeof content === "string" ? core$1.capitalizeFirstLetter(content) : content;
         };
         TuiDocExampleCapitalizePipe = __decorate([
-            core.Pipe({ name: 'tuiDocExampleCapitalize' })
+            core.Pipe({ name: "tuiDocExampleCapitalize" })
         ], TuiDocExampleCapitalizePipe);
         return TuiDocExampleCapitalizePipe;
     }());
@@ -1288,7 +1304,7 @@
             return __spread([defaultTab], Object.keys(content));
         };
         TuiDocExampleGetTabsPipe = __decorate([
-            core.Pipe({ name: 'tuiDocExampleGetTabs' })
+            core.Pipe({ name: "tuiDocExampleGetTabs" })
         ], TuiDocExampleGetTabsPipe);
         return TuiDocExampleGetTabsPipe;
     }());
@@ -1327,15 +1343,15 @@
         function TuiDocMainComponent(storage, windowRef) {
             this.storage = storage;
             this.windowRef = windowRef;
-            this.night = this.storage.getItem('night') === 'true' ||
-                (this.storage.getItem('night') === null &&
-                    this.windowRef.matchMedia('(prefers-color-scheme: dark)').matches);
+            this.night = this.storage.getItem("night") === "true" ||
+                (this.storage.getItem("night") === null &&
+                    this.windowRef.matchMedia("(prefers-color-scheme: dark)").matches);
             this.change$ = new rxjs.Subject();
         }
         TuiDocMainComponent_1 = TuiDocMainComponent;
         Object.defineProperty(TuiDocMainComponent.prototype, "mode", {
             get: function () {
-                return this.night ? 'onDark' : null;
+                return this.night ? "onDark" : null;
             },
             enumerable: true,
             configurable: true
@@ -1343,7 +1359,7 @@
         TuiDocMainComponent.prototype.onMode = function (night) {
             this.night = night;
             this.change$.next();
-            this.storage.setItem('night', String(night));
+            this.storage.setItem("night", String(night));
         };
         var TuiDocMainComponent_1;
         TuiDocMainComponent.ctorParameters = function () { return [
@@ -1351,11 +1367,11 @@
             { type: Window, decorators: [{ type: core.Inject, args: [common$1.WINDOW,] }] }
         ]; };
         __decorate([
-            core.HostBinding('attr.data-mode')
+            core.HostBinding("attr.data-mode")
         ], TuiDocMainComponent.prototype, "mode", null);
         TuiDocMainComponent = TuiDocMainComponent_1 = __decorate([
             core.Component({
-                selector: 'tui-doc-main',
+                selector: "tui-doc-main",
                 template: "<tui-theme-night *ngIf=\"night\"></tui-theme-night>\n<tui-root>\n    <div class=\"tui-doc-page\">\n        <tui-doc-navigation class=\"tui-doc-navigation\">\n            <ng-content select=\"tuiDocNavigation\"></ng-content>\n        </tui-doc-navigation>\n        <div class=\"tui-doc-content\">\n            <router-outlet class=\"tui-doc-outlet\"></router-outlet>\n        </div>\n    </div>\n    <header tuiDocHeader>\n        <label class=\"night-mode\">\n            Night mode\n            <tui-toggle\n                class=\"tui-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    <!-- TODO: 3.0 Remove-->\n    <ng-container ngProjectAs=\"tuiOverNotifications\">\n        <ng-content select=\"tuiOverNotifications\"></ng-content>\n    </ng-container>\n    <ng-container ngProjectAs=\"tuiOverPortals\">\n        <ng-content select=\"tuiOverPortals\"></ng-content>\n    </ng-container>\n    <ng-container ngProjectAs=\"tuiOverHints\">\n        <ng-content select=\"tuiOverHints\"></ng-content>\n    </ng-container>\n</tui-root>\n",
                 encapsulation: core.ViewEncapsulation.None,
                 providers: [
@@ -1373,7 +1389,7 @@
         return TuiDocMainComponent;
     }());
 
-    var TUI_DOC_PAGE_LOADED = new core.InjectionToken('[TUI_DOC_PAGE_LOADED] Stream that emits if loading of page is over (for example, to begin scrollIntoView)', { factory: function () { return rxjs.defer(function () { return rxjs.timer(200).pipe(operators.switchMapTo(rxjs.of(true))); }); } });
+    var TUI_DOC_PAGE_LOADED = new core.InjectionToken("[TUI_DOC_PAGE_LOADED] Stream that emits if loading of page is over (for example, to begin scrollIntoView)", { factory: function () { return rxjs.defer(function () { return rxjs.timer(200).pipe(operators.switchMapTo(rxjs.of(true))); }); } });
 
     /**
      * @deprecated: use {@link TuiScrollIntoViewLinkDirective}
@@ -1407,7 +1423,7 @@
         ], ScrollIntoViewDirective.prototype, "scrollIntoView", null);
         ScrollIntoViewDirective = __decorate([
             core.Directive({
-                selector: '[scrollIntoView]',
+                selector: "[scrollIntoView]",
                 providers: [cdk.TuiDestroyService],
             })
             // eslint-disable-next-line @typescript-eslint/naming-convention
@@ -1425,7 +1441,7 @@
         }
         TuiScrollIntoViewLinkDirective = __decorate([
             core.Directive({
-                selector: '[tuiScrollIntoViewLink]',
+                selector: "[tuiScrollIntoViewLink]",
                 providers: [cdk.TuiDestroyService],
             })
         ], TuiScrollIntoViewLinkDirective);
@@ -1461,41 +1477,41 @@
         return TuiScrollIntoViewLinkModule;
     }());
 
-    var TUI_DOC_SCROLL_BEHAVIOR = new core.InjectionToken('[TUI_DOC_SCROLL_BEHAVIOR] Defines the transition animation for scroll', { factory: function () { return 'smooth'; } });
+    var TUI_DOC_SCROLL_BEHAVIOR = new core.InjectionToken("[TUI_DOC_SCROLL_BEHAVIOR] Defines the transition animation for scroll", { factory: function () { return "smooth"; } });
 
     var MAP = {
-        а: 'f',
-        б: ',',
-        в: 'd',
-        г: 'u',
-        д: 'l',
-        е: 't',
-        ё: '`',
-        ж: ';',
-        з: 'p',
-        и: 'b',
-        й: 'q',
-        к: 'r',
-        л: 'k',
-        м: 'v',
-        н: 'y',
-        о: 'j',
-        п: 'g',
-        р: 'h',
-        с: 'c',
-        т: 'n',
-        у: 'e',
-        ф: 'a',
-        х: '[',
-        ц: 'w',
-        ч: 'x',
-        ш: 'i',
-        щ: 'o',
-        ъ: ']',
-        ы: 's',
-        ь: 'm',
-        ю: '.',
-        я: 'z',
+        а: "f",
+        б: ",",
+        в: "d",
+        г: "u",
+        д: "l",
+        е: "t",
+        ё: "`",
+        ж: ";",
+        з: "p",
+        и: "b",
+        й: "q",
+        к: "r",
+        л: "k",
+        м: "v",
+        н: "y",
+        о: "j",
+        п: "g",
+        р: "h",
+        с: "c",
+        т: "n",
+        у: "e",
+        ф: "a",
+        х: "[",
+        ц: "w",
+        ч: "x",
+        ш: "i",
+        щ: "o",
+        ъ: "]",
+        ы: "s",
+        ь: "m",
+        ю: ".",
+        я: "z",
     };
     /**
      * @deprecated: use {@link tuiTransliterateKeyboardLayout} instead
@@ -1505,7 +1521,7 @@
      */
     // eslint-disable-next-line @typescript-eslint/naming-convention
     function transliterateKeyboardLayout(string) {
-        var newStr = '';
+        var newStr = "";
         for (var i = 0; i < string.length; i++) {
             newStr += string.charAt(i) in MAP ? MAP[string.charAt(i)] : string.charAt(i);
         }
@@ -1513,17 +1529,17 @@
     }
     var tuiTransliterateKeyboardLayout = transliterateKeyboardLayout;
 
-    var TUI_DOC_PAGES = new core.InjectionToken('Documentation pages', {
+    var TUI_DOC_PAGES = new core.InjectionToken("Documentation pages", {
         factory: function () { return []; },
     });
 
-    var TUI_DOC_TITLE = new core.InjectionToken('Page title', {
-        factory: function () { return ''; },
+    var TUI_DOC_TITLE = new core.InjectionToken("Page title", {
+        factory: function () { return ""; },
     });
 
-    var NAVIGATION_TITLE = new core.InjectionToken('Page title');
-    var NAVIGATION_LABELS = new core.InjectionToken('Navigation sections labels for search');
-    var NAVIGATION_ITEMS = new core.InjectionToken('Navigation pages');
+    var NAVIGATION_TITLE = new core.InjectionToken("Page title");
+    var NAVIGATION_LABELS = new core.InjectionToken("Navigation sections labels for search");
+    var NAVIGATION_ITEMS = new core.InjectionToken("Navigation pages");
     var NAVIGATION_PROVIDERS = [
         cdk.TuiDestroyService,
         {
@@ -1589,12 +1605,12 @@
             this.readyToScroll$ = readyToScroll$;
             this.scrollBehavior = scrollBehavior;
             this.menuOpen = false;
-            this.search = '';
+            this.search = "";
             this.open = false;
             this.openPagesArr = [];
             this.openPagesGroupsArr = [];
-            this.active = '';
-            this.mode$ = this.mode.change$.pipe(operators.startWith(null), operators.map(function () { return _this.mode.mode || 'onLight'; }));
+            this.active = "";
+            this.mode$ = this.mode.change$.pipe(operators.startWith(null), operators.map(function () { return _this.mode.mode || "onLight"; }));
             // Angular can't navigate no anchor links
             // https://stackoverflow.com/questions/36101756/angular2-routing-with-hashtag-to-page-anchor
             title$.subscribe(function (title) {
@@ -1641,13 +1657,13 @@
         TuiDocNavigationComponent.prototype.onClick = function () {
             this.open = false;
             this.menuOpen = false;
-            this.search = '';
+            this.search = "";
             this.openActivePageGroup();
         };
         TuiDocNavigationComponent.prototype.filterItems = function (items, search) {
             return items.map(function (section) {
                 return cdk.uniqBy(section.filter(function (_a) {
-                    var title = _a.title, _b = _a.keywords, keywords = _b === void 0 ? '' : _b;
+                    var title = _a.title, _b = _a.keywords, keywords = _b === void 0 ? "" : _b;
                     title = title.toLowerCase();
                     search = search.toLowerCase();
                     keywords = keywords.toLowerCase();
@@ -1655,14 +1671,14 @@
                         keywords.includes(search) ||
                         title.includes(transliterateKeyboardLayout(search)) ||
                         keywords.includes(transliterateKeyboardLayout(search)) ||
-                        search.replace(/-/gi, '').includes(title));
-                }), 'title');
+                        search.replace(/-/gi, "").includes(title));
+                }), "title");
             });
         };
         TuiDocNavigationComponent.prototype.flattenSubPages = function (items) {
             return items.reduce(function (array, item) { return __spread(array, [
                 item.reduce(function (pages, page) {
-                    return 'subPages' in page
+                    return "subPages" in page
                         ? __spread(pages, page.subPages) : __spread(pages, [page]);
                 }, []),
             ]); }, []);
@@ -1680,11 +1696,11 @@
             var _this = this;
             this.items.forEach(function (pages, pagesIndex) {
                 pages.forEach(function (page, pageIndex) {
-                    if ('route' in page && _this.isActiveRoute(page.route)) {
+                    if ("route" in page && _this.isActiveRoute(page.route)) {
                         _this.openPagesArr[pagesIndex] = true;
                         _this.active = page.route;
                     }
-                    if ('subPages' in page) {
+                    if ("subPages" in page) {
                         page.subPages.forEach(function (subPage) {
                             if (_this.isActiveRoute(subPage.route)) {
                                 _this.openPagesArr[pagesIndex] = true;
@@ -1701,10 +1717,10 @@
             if (!element) {
                 return;
             }
-            element.classList.add('tui-doc-animated-example');
+            element.classList.add("tui-doc-animated-example");
             element.scrollIntoView({
-                block: 'start',
-                inline: 'nearest',
+                block: "start",
+                inline: "nearest",
                 behavior: this.scrollBehavior,
             });
         };
@@ -1725,7 +1741,7 @@
             { type: undefined, decorators: [{ type: core.Inject, args: [TUI_DOC_SCROLL_BEHAVIOR,] }] }
         ]; };
         __decorate([
-            core.HostBinding('class._open')
+            core.HostBinding("class._open")
         ], TuiDocNavigationComponent.prototype, "menuOpen", void 0);
         __decorate([
             cdk.tuiPure
@@ -1735,7 +1751,7 @@
         ], TuiDocNavigationComponent.prototype, "flattenSubPages", null);
         TuiDocNavigationComponent = __decorate([
             core.Component({
-                selector: 'tui-doc-navigation',
+                selector: "tui-doc-navigation",
                 template: "<tui-hosted-dropdown\n    *tuiLet=\"filteredItems as filtered\"\n    tuiAutoFocus\n    tuiDropdownLimitWidth=\"fixed\"\n    class=\"t-input\"\n    [autoFocus]=\"!!sidebar\"\n    [content]=\"dropdown\"\n    [canOpen]=\"canOpen\"\n    [(open)]=\"open\"\n>\n    <tui-primitive-textfield\n        iconAlign=\"left\"\n        tuiTextfieldSize=\"m\"\n        iconContent=\"tuiIconSearch\"\n        [pseudoFocused]=\"open || null\"\n        [tuiTextfieldCleaner]=\"true\"\n        [tuiTextfieldLabelOutside]=\"true\"\n        [value]=\"search\"\n        (valueChange)=\"onSearchChange($event)\"\n    >\n        {{ searchText }}\n    </tui-primitive-textfield>\n    <ng-template\n        #dropdown\n        let-activeZone\n    >\n        <tui-data-list>\n            <tui-opt-group\n                *ngFor=\"let group of filtered; let index = index\"\n                [label]=\"labels[index] || ''\"\n            >\n                <a\n                    *ngFor=\"let item of group\"\n                    tuiOption\n                    [routerLink]=\"item.route\"\n                    (click)=\"onClick()\"\n                >\n                    {{ item.title }}\n                </a>\n            </tui-opt-group>\n        </tui-data-list>\n    </ng-template>\n</tui-hosted-dropdown>\n\n<nav class=\"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                [scrollIntoView]=\"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                                [scrollIntoView]=\"isActive(subPage.route)\"\n                                (click)=\"closeMenu()\"\n                            >\n                                {{ subPage.title }}\n                            </a>\n                        </div>\n                    </tui-expand>\n                </div>\n            </ng-template>\n        </ng-template>\n    </tui-scrollbar>\n</nav>\n\n<ng-content></ng-content>\n",
                 providers: NAVIGATION_PROVIDERS,
                 changeDetection: core.ChangeDetectionStrategy.OnPush,
@@ -1794,8 +1810,8 @@
         return TuiDocNavigationModule;
     }());
 
-    var TUI_DOC_LOGO = new core.InjectionToken('Main logo', {
-        factory: function () { return ''; },
+    var TUI_DOC_LOGO = new core.InjectionToken("Main logo", {
+        factory: function () { return ""; },
     });
 
     var TuiDocHeaderComponent = /** @class */ (function () {
@@ -1805,7 +1821,7 @@
             this.router = router;
             this.swipes$ = swipes$;
             this.stream$ = new rxjs.Subject();
-            this.open$ = rxjs.merge(this.router.events.pipe(operators.mapTo(false)), this.stream$, this.swipes$.pipe(operators.filter(function (swipe) { return swipe.direction === 'left' || swipe.direction === 'right'; }), operators.map(function (swipe) { return swipe.direction === 'right'; }))).pipe(operators.startWith(false), operators.distinctUntilChanged());
+            this.open$ = rxjs.merge(this.router.events.pipe(operators.mapTo(false)), this.stream$, this.swipes$.pipe(operators.filter(function (swipe) { return swipe.direction === "left" || swipe.direction === "right"; }), operators.map(function (swipe) { return swipe.direction === "right"; }))).pipe(operators.startWith(false), operators.distinctUntilChanged());
         }
         TuiDocHeaderComponent.prototype.onClick = function () {
             this.stream$.next(true);
@@ -1823,7 +1839,7 @@
         ]; };
         TuiDocHeaderComponent = __decorate([
             core.Component({
-                selector: 'header[tuiDocHeader]',
+                selector: "header[tuiDocHeader]",
                 template: "<button\n    tuiIconButton\n    icon=\"tuiIconMenuLarge\"\n    appearance=\"icon\"\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\n    polymorpheus-outlet\n    class=\"t-logo\"\n    [content]=\"logo\"\n>\n    <ng-template let-src>\n        <img\n            alt=\"Logo\"\n            class=\"t-img\"\n            [src]=\"src\"\n        />\n    </ng-template>\n</div>\n<ng-content></ng-content>\n",
                 changeDetection: core.ChangeDetectionStrategy.OnPush,
                 styles: [":host{box-shadow:0 .125rem 1rem rgba(0,0,0,.08);position:fixed;top:0;left:0;right:0;z-index:1;display:flex;height:3.9375rem;align-items:center;padding:0 1.25rem;background:var(--tui-base-01);border-bottom:1px solid var(--tui-base-03)}.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%}"]
@@ -1880,15 +1896,15 @@
         return TuiDocMainModule;
     }());
 
-    var TUI_DOC_DEFAULT_TABS = new core.InjectionToken('Array of default tab names', {
+    var TUI_DOC_DEFAULT_TABS = new core.InjectionToken("Array of default tab names", {
         factory: function () { return []; },
     });
 
-    var TUI_DOC_SEE_ALSO = new core.InjectionToken('Array of arrays of related pages', {
+    var TUI_DOC_SEE_ALSO = new core.InjectionToken("Array of arrays of related pages", {
         factory: function () { return []; },
     });
 
-    var PAGE_SEE_ALSO = new core.InjectionToken('Page see also');
+    var PAGE_SEE_ALSO = new core.InjectionToken("Page see also");
     var PAGE_PROVIDERS = [
         {
             provide: PAGE_SEE_ALSO,
@@ -1899,11 +1915,11 @@
     // eslint-disable-next-line @typescript-eslint/naming-convention
     function seeAlsoProviderFactory(_a, seeAlsoGroups) {
         var nativeElement = _a.nativeElement;
-        var currentHeader = nativeElement.getAttribute('header');
+        var currentHeader = nativeElement.getAttribute("header");
         var groups = seeAlsoGroups.filter(function (group) { return group.includes(currentHeader); }) || [];
         var seeAlsoSet = new Set(groups
             .join()
-            .split(',')
+            .split(",")
             .filter(function (component) { return component && component !== currentHeader; }));
         return Array.from(seeAlsoSet);
     }
@@ -1921,7 +1937,7 @@
         ], TuiDocPageTabConnectorDirective.prototype, "pageTab", void 0);
         TuiDocPageTabConnectorDirective = __decorate([
             core.Directive({
-                selector: '[pageTab]',
+                selector: "[pageTab]",
             }),
             __param(0, core.Inject(core.TemplateRef))
         ], TuiDocPageTabConnectorDirective);
@@ -1935,10 +1951,10 @@
             this.deprecated = deprecated;
             this.defaultTabs = defaultTabs;
             this.seeAlso = seeAlso;
-            this.header = '';
-            this.package = '';
-            this.type = '';
-            this.path = '';
+            this.header = "";
+            this.package = "";
+            this.type = "";
+            this.path = "";
             this.tabConnectors = cdk.EMPTY_QUERY;
             this.activeItemIndex = NaN;
         }
@@ -1950,11 +1966,11 @@
             configurable: true
         });
         TuiDocPageComponent.prototype.getRouterLink = function (tab) {
-            if (tab === void 0) { tab = ''; }
-            return "./" + tab.replace(/ /g, '_');
+            if (tab === void 0) { tab = ""; }
+            return "./" + tab.replace(/ /g, "_");
         };
         TuiDocPageComponent.ctorParameters = function () { return [
-            { type: String, decorators: [{ type: core.Attribute, args: ['deprecated',] }] },
+            { type: String, decorators: [{ type: core.Attribute, args: ["deprecated",] }] },
             { type: undefined, decorators: [{ type: core.Inject, args: [TUI_DOC_DEFAULT_TABS,] }] },
             { type: undefined, decorators: [{ type: core.Inject, args: [PAGE_SEE_ALSO,] }] }
         ]; };
@@ -1975,13 +1991,13 @@
         ], TuiDocPageComponent.prototype, "tabConnectors", void 0);
         TuiDocPageComponent = __decorate([
             core.Component({
-                selector: 'tui-doc-page',
+                selector: "tui-doc-page",
                 template: "<header class=\"t-header\">\n    <h1 class=\"t-title\">\n        {{ header }}\n        <tui-tag\n            *ngIf=\"deprecated !== null\"\n            value=\"deprecated\"\n            status=\"custom\"\n            class=\"t-tag t-tag_deprecated\"\n        ></tui-tag>\n        <tui-tag\n            *ngIf=\"package\"\n            status=\"custom\"\n            class=\"t-tag t-tag_package\"\n            [value]=\"package\"\n            [autoColor]=\"true\"\n        ></tui-tag>\n    </h1>\n    <tui-tabs-with-more\n        *ngIf=\"tabConnectors.length\"\n        class=\"t-tabs\"\n        [(activeItemIndex)]=\"activeItemIndex\"\n    >\n        <ng-container *ngFor=\"let tab of tabConnectors; first as first; index as index\">\n            <ng-container *ngIf=\"first; else dynamicTab\">\n                <a\n                    *tuiTab\n                    tuiTab\n                    routerLink=\"./\"\n                    routerLinkActive\n                    [routerLinkActiveOptions]=\"{exact: true}\"\n                >\n                    {{ tab.pageTab || defaultTabs[index] }}\n                </a>\n            </ng-container>\n            <ng-template #dynamicTab>\n                <a\n                    *tuiTab\n                    tuiTab\n                    routerLinkActive\n                    [routerLink]=\"getRouterLink(tab.pageTab || defaultTabs[index])\"\n                >\n                    {{ tab.pageTab || defaultTabs[index] }}\n                </a>\n            </ng-template>\n        </ng-container>\n    </tui-tabs-with-more>\n    <tui-doc-source-code\n        class=\"t-source-code\"\n        [header]=\"header\"\n        [package]=\"package\"\n        [type]=\"type\"\n        [path]=\"path\"\n    ></tui-doc-source-code>\n</header>\n<div class=\"t-content\">\n    <ng-content></ng-content>\n    <tui-doc-see-also\n        *ngIf=\"showSeeAlso\"\n        class=\"t-see-also\"\n        [seeAlso]=\"seeAlso\"\n    ></tui-doc-see-also>\n    <ng-container *ngFor=\"let tab of tabConnectors; index as index\">\n        <ng-container\n            *ngIf=\"index === activeItemIndex\"\n            [ngTemplateOutlet]=\"tab.template\"\n        ></ng-container>\n    </ng-container>\n</div>\n",
                 changeDetection: core.ChangeDetectionStrategy.OnPush,
                 providers: PAGE_PROVIDERS,
                 styles: [":host{display:flex;flex-direction:column;min-height:0;flex-basis:0;flex-grow:1}.t-header{display:flex;font:var(--tui-font-heading-3);flex-wrap:wrap;min-height:7.25rem;color:var(--tui-text-01);box-shadow:inset 0 -1px 0 0 var(--tui-base-03);padding:3.75rem 0 0;box-sizing:border-box;flex-shrink:0;margin:0 min(10vw,8.75rem)}: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}"]
             }),
-            __param(0, core.Attribute('deprecated')),
+            __param(0, core.Attribute("deprecated")),
             __param(1, core.Inject(TUI_DOC_DEFAULT_TABS)),
             __param(2, core.Inject(PAGE_SEE_ALSO))
         ], TuiDocPageComponent);
@@ -1998,14 +2014,14 @@
         TuiDocSeeAlsoComponent.prototype.getRouterLink = function (pageTitle) {
             for (var i = 0; i < this.pages.length; i++) {
                 var page = this.pages
-                    .map(function (page) { return ('subPages' in page ? page.subPages : [page]); })
+                    .map(function (page) { return ("subPages" in page ? page.subPages : [page]); })
                     .reduce(function (pages, subPages) { return __spread(pages, subPages); }, [])
                     .find(function (page) { return page.title === pageTitle; });
                 if (page === null || page === void 0 ? void 0 : page.route) {
                     return page.route;
                 }
             }
-            return '';
+            return "";
         };
         TuiDocSeeAlsoComponent.ctorParameters = function () { return [
             { type: String, decorators: [{ type: core.Inject, args: [TUI_DOC_SEE_ALSO_TEXT,] }] },
@@ -2016,7 +2032,7 @@
         ], TuiDocSeeAlsoComponent.prototype, "seeAlso", void 0);
         TuiDocSeeAlsoComponent = __decorate([
             core.Component({
-                selector: 'tui-doc-see-also',
+                selector: "tui-doc-see-also",
                 template: "<h5 class=\"header\">{{ text }}</h5>\n<ng-container *ngFor=\"let item of seeAlso; last as last\">\n    <a\n        tuiLink\n        [routerLink]=\"getRouterLink(item)\"\n    >\n        {{ item }}\n    </a>\n    <ng-container *ngIf=\"!last\">{{ ', ' }}</ng-container>\n</ng-container>\n",
                 changeDetection: core.ChangeDetectionStrategy.OnPush,
                 styles: [":host{display:block}.header{font-size:.6875rem;line-height:1rem;text-transform:uppercase;letter-spacing:.075em;color:var(--tui-text-02);margin:0 0 .5rem;white-space:nowrap}"]
@@ -2040,18 +2056,18 @@
         return TuiDocSeeAlsoModule;
     }());
 
-    var TUI_DOC_SOURCE_CODE = new core.InjectionToken('Source code link', {
-        factory: function () { return ''; },
+    var TUI_DOC_SOURCE_CODE = new core.InjectionToken("Source code link", {
+        factory: function () { return ""; },
     });
 
     var TuiDocSourceCodeComponent = /** @class */ (function () {
         function TuiDocSourceCodeComponent(sourceCode, text) {
             this.sourceCode = sourceCode;
             this.text = text;
-            this.header = '';
-            this.package = '';
-            this.type = '';
-            this.path = '';
+            this.header = "";
+            this.package = "";
+            this.type = "";
+            this.path = "";
         }
         Object.defineProperty(TuiDocSourceCodeComponent.prototype, "pathOptions", {
             get: function () {
@@ -2089,7 +2105,7 @@
         ], TuiDocSourceCodeComponent.prototype, "getPathOptions", null);
         TuiDocSourceCodeComponent = __decorate([
             core.Component({
-                selector: 'tui-doc-source-code',
+                selector: "tui-doc-source-code",
                 template: "<div\n    *ngIf=\"!!sourceCode\"\n    polymorpheus-outlet\n    [content]=\"sourceCode\"\n    [context]=\"pathOptions\"\n>\n    <ng-template let-link>\n        <a\n            *ngIf=\"link\"\n            tuiIconButton\n            type=\"button\"\n            icon=\"tuiIconCodeLarge\"\n            appearance=\"icon\"\n            target=\"_blank\"\n            size=\"s\"\n            [title]=\"text\"\n            [href]=\"link\"\n        ></a>\n    </ng-template>\n</div>\n",
                 changeDetection: core.ChangeDetectionStrategy.OnPush
             }),
@@ -2133,21 +2149,21 @@
     }());
 
     var TUI_EXAMPLE_PRIMARY_FILE_NAME = {
-        TS: 'TypeScript',
-        LESS: 'LESS',
-        HTML: 'HTML',
+        TS: "TypeScript",
+        LESS: "LESS",
+        HTML: "HTML",
     };
 
     // TODO: 3.0 remove in ivy compilation
-    var DEMO_TEXTS = ['Сделано с помощью директивы: ', 'Фон', 'Детали формы'];
+    var DEMO_TEXTS = ["\u0421\u0434\u0435\u043B\u0430\u043D\u043E \u0441 \u043F\u043E\u043C\u043E\u0449\u044C\u044E \u0434\u0438\u0440\u0435\u043A\u0442\u0438\u0432\u044B: ", "\u0424\u043E\u043D", "\u0414\u0435\u0442\u0430\u043B\u0438 \u0444\u043E\u0440\u043C\u044B"];
     var DOC_TEXTS = [
-        'Аргумент',
-        'Тип',
-        'Имя и описание',
-        'Значение',
-        'Для работы с динамическими шаблонами используется',
+        "\u0410\u0440\u0433\u0443\u043C\u0435\u043D\u0442",
+        "\u0422\u0438\u043F",
+        "\u0418\u043C\u044F \u0438 \u043E\u043F\u0438\u0441\u0430\u043D\u0438\u0435",
+        "\u0417\u043D\u0430\u0447\u0435\u043D\u0438\u0435",
+        "\u0414\u043B\u044F \u0440\u0430\u0431\u043E\u0442\u044B \u0441 \u0434\u0438\u043D\u0430\u043C\u0438\u0447\u0435\u0441\u043A\u0438\u043C\u0438 \u0448\u0430\u0431\u043B\u043E\u043D\u0430\u043C\u0438 \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u0443\u0435\u0442\u0441\u044F",
     ];
-    var EXAMPLE_TEXTS = ['Превью', 'Ссылка на пример скопирована', 'Готово'];
+    var EXAMPLE_TEXTS = ["\u041F\u0440\u0435\u0432\u044C\u044E", "\u0421\u0441\u044B\u043B\u043A\u0430 \u043D\u0430 \u043F\u0440\u0438\u043C\u0435\u0440 \u0441\u043A\u043E\u043F\u0438\u0440\u043E\u0432\u0430\u043D\u0430", "\u0413\u043E\u0442\u043E\u0432\u043E"];
     var TUI_DOC_RUSSIAN = [
         {
             provide: TUI_DOC_DEMO_TEXTS,
@@ -2163,19 +2179,19 @@
         },
         {
             provide: TUI_DOC_MENU_TEXT,
-            useValue: 'Меню',
+            useValue: "\u041C\u0435\u043D\u044E",
         },
         {
             provide: TUI_DOC_SEARCH_TEXT,
-            useValue: 'Поиск',
+            useValue: "\u041F\u043E\u0438\u0441\u043A",
         },
         {
             provide: TUI_DOC_SEE_ALSO_TEXT,
-            useValue: 'Смотрите также',
+            useValue: "\u0421\u043C\u043E\u0442\u0440\u0438\u0442\u0435 \u0442\u0430\u043A\u0436\u0435",
         },
         {
             provide: TUI_DOC_SOURCE_CODE_TEXT,
-            useValue: 'Исходный код',
+            useValue: "\u0418\u0441\u0445\u043E\u0434\u043D\u044B\u0439 \u043A\u043E\u0434",
         },
     ];
 
@@ -2204,11 +2220,11 @@
     function generateRoutes(type) {
         return [
             {
-                path: '',
+                path: "",
                 component: type,
                 children: [
                     {
-                        path: ':tab',
+                        path: ":tab",
                         component: type,
                     },
                 ],