@taiga-ui/addon-doc 2.75.0 → 2.77.0

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

@@ -44,8 +44,8 @@ const tuiTryParseMarkdownCodeBlock = tryParseMarkdownCodeBlock;
 
 let TuiDocCodeComponent = class TuiDocCodeComponent {
     constructor() {
-        this.rawLoader$$ = new BehaviorSubject(``);
-        this.filename = ``;
+        this.rawLoader$$ = new BehaviorSubject('');
+        this.filename = '';
         this.processor$ = this.rawLoader$$.pipe(switchMap(rawLoad), map(tryParseMarkdownCodeBlock));
     }
     set code(code) {
@@ -62,12 +62,12 @@ __decorate([
     Input()
 ], TuiDocCodeComponent.prototype, "code", null);
 __decorate([
-    HostBinding(`class._has-filename`)
+    HostBinding('class._has-filename')
 ], TuiDocCodeComponent.prototype, "hasFilename", null);
 TuiDocCodeComponent = __decorate([
     Component({
-        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",
+        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>\n<code [lineNumbers]=\"true\" [highlight]=\"content\"></code>\n</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}"]
     })
 ], TuiDocCodeComponent);
@@ -104,7 +104,7 @@ __decorate([
 ], TuiDocCopyComponent.prototype, "copied$", null);
 TuiDocCopyComponent = __decorate([
     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: ChangeDetectionStrategy.OnPush,
         providers: [TuiDestroyService],
@@ -189,14 +189,14 @@ let TuiDocDemoComponent = TuiDocDemoComponent_1 = class TuiDocDemoComponent {
         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 FormControl();
         this.mode = null;
         this.change$ = new Subject();
-        this.items = [`onLight`, `onDark`];
+        this.items = ['onLight', 'onDark'];
         this.isBrowser = isPlatformBrowser(platformId);
         const parsedMode = locationRef.path().match(/tuiMode=(onDark|onLight)/);
         if (parsedMode !== null && parsedMode.length > 0) {
@@ -227,9 +227,9 @@ let TuiDocDemoComponent = TuiDocDemoComponent_1 = class TuiDocDemoComponent {
         }
         const paddingLeft = this.isBrowser
             ? getComputedStyle(this.content.nativeElement).paddingLeft
-            : `0`;
+            : '0';
         const { offsetWidth } = this.content.nativeElement;
-        this.resizerText.nativeElement.textContent = String(offsetWidth - parseInt(paddingLeft || `0`, 10) * 2);
+        this.resizerText.nativeElement.textContent = String(offsetWidth - parseInt(paddingLeft || '0', 10) * 2);
     }
     onDragStart(event) {
         event.preventDefault();
@@ -262,7 +262,7 @@ let TuiDocDemoComponent = TuiDocDemoComponent_1 = class TuiDocDemoComponent {
         if (!this.wrapper) {
             return;
         }
-        this.renderer.setStyle(this.wrapper.nativeElement, `width`, px(Math.max(this.wrapperWidth - delta, MIN_COMPONENT_WIDTH)));
+        this.renderer.setStyle(this.wrapper.nativeElement, 'width', px(Math.max(this.wrapperWidth - delta, MIN_COMPONENT_WIDTH)));
     }
 };
 TuiDocDemoComponent.ctorParameters = () => [
@@ -275,13 +275,13 @@ TuiDocDemoComponent.ctorParameters = () => [
     { type: Array, decorators: [{ type: Inject, args: [TUI_DOC_DEMO_TEXTS,] }] }
 ];
 __decorate([
-    ViewChild(`content`)
+    ViewChild('content')
 ], TuiDocDemoComponent.prototype, "content", void 0);
 __decorate([
-    ViewChild(`wrapper`)
+    ViewChild('wrapper')
 ], TuiDocDemoComponent.prototype, "wrapper", void 0);
 __decorate([
-    ViewChild(`resizerText`)
+    ViewChild('resizerText')
 ], TuiDocDemoComponent.prototype, "resizerText", void 0);
 __decorate([
     Input()
@@ -290,11 +290,11 @@ __decorate([
     ContentChild(TemplateRef)
 ], TuiDocDemoComponent.prototype, "template", void 0);
 __decorate([
-    HostListener(`window:resize`)
+    HostListener('window:resize')
 ], TuiDocDemoComponent.prototype, "onResize", null);
 TuiDocDemoComponent = TuiDocDemoComponent_1 = __decorate([
     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: ChangeDetectionStrategy.OnPush,
         providers: [
@@ -449,10 +449,10 @@ function coerceValue(value) {
     if (isEmptyParamValue(prepared)) {
         return null;
     }
-    else if (isBooleanParamValue(prepared)) {
+    if (isBooleanParamValue(prepared)) {
         return String(prepared) === `true`;
     }
-    else if (isNumberParamValue(prepared)) {
+    if (isNumberParamValue(prepared)) {
         return Number(prepared);
     }
     const decodedValue = decodeURIComponent(prepared);
@@ -484,7 +484,7 @@ function isPossibleObject(value) {
     return value.startsWith(`{`) && value.endsWith(`}`);
 }
 
-const SERIALIZED_SUFFIX = `$`;
+const SERIALIZED_SUFFIX = '$';
 // @bad TODO: refactor output and value sync
 let TuiDocDocumentationPropertyConnectorDirective = class TuiDocDocumentationPropertyConnectorDirective {
     constructor(template, locationRef, activatedRoute, urlSerializer) {
@@ -492,9 +492,9 @@ let TuiDocDocumentationPropertyConnectorDirective = class TuiDocDocumentationPro
         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 EventEmitter();
@@ -506,11 +506,11 @@ let TuiDocDocumentationPropertyConnectorDirective = class TuiDocDocumentationPro
     }
     get attrName() {
         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;
@@ -520,7 +520,7 @@ let TuiDocDocumentationPropertyConnectorDirective = class TuiDocDocumentationPro
         return !!this.documentationPropertyValues;
     }
     get shouldShowValues() {
-        return this.documentationPropertyMode !== `output`;
+        return this.documentationPropertyMode !== 'output';
     }
     ngOnChanges() {
         this.changed$.next();
@@ -552,7 +552,7 @@ let TuiDocDocumentationPropertyConnectorDirective = class TuiDocDocumentationPro
         const computedValue = isValueAvailableByKey && this.documentationPropertyValues
             ? this.documentationPropertyValues.indexOf(value)
             : value;
-        const suffix = isValueAvailableByKey ? SERIALIZED_SUFFIX : ``;
+        const suffix = isValueAvailableByKey ? SERIALIZED_SUFFIX : '';
         const propName = this.documentationPropertyName + suffix;
         tree.queryParams = Object.assign(Object.assign({}, tree.queryParams), { [propName]: computedValue });
         this.locationRef.go(String(tree));
@@ -587,8 +587,8 @@ __decorate([
 ], TuiDocDocumentationPropertyConnectorDirective.prototype, "documentationPropertyValueChange", void 0);
 TuiDocDocumentationPropertyConnectorDirective = __decorate([
     Directive({
-        selector: `ng-template[documentationPropertyName]`,
-        exportAs: `documentationProperty`,
+        selector: 'ng-template[documentationPropertyName]',
+        exportAs: 'documentationProperty',
     }),
     __param(0, Inject(TemplateRef)),
     __param(1, Inject(Location$1)),
@@ -603,7 +603,7 @@ let TuiDocDocumentationComponent = class TuiDocDocumentationComponent {
     constructor(changeDetectorRef, texts) {
         this.changeDetectorRef = changeDetectorRef;
         this.texts = texts;
-        this.heading = ``;
+        this.heading = '';
         this.showValues = true;
         this.isAPI = false;
         this.propertiesConnectors = EMPTY_QUERY;
@@ -620,71 +620,71 @@ let TuiDocDocumentationComponent = class TuiDocDocumentationComponent {
     getColor(color) {
         if (color.length === 4) {
             return color
-                .split(``)
+                .split('')
                 .reduce((result, current) => [...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';
         }
         const parsed = color
-            .replace(`rgb(`, ``)
-            .replace(`rgba(`, ``)
-            .replace(`)`, ``)
-            .replace(` `, ``)
-            .split(`,`)
+            .replace('rgb(', '')
+            .replace('rgba(', '')
+            .replace(')', '')
+            .replace(' ', '')
+            .split(',')
             .map(v => Number.parseInt(v, 10));
         return rgbToHex(...parsed);
     }
     getOpacity(color) {
-        if (color.startsWith(`#`) || color.startsWith(`rgb(`)) {
+        if (color.startsWith('#') || color.startsWith('rgb(')) {
             return 100;
         }
-        if (color === `transparent`) {
+        if (color === 'transparent') {
             return 0;
         }
-        const lastComma = color.lastIndexOf(`,`);
+        const lastComma = color.lastIndexOf(',');
         const parsed = color
             .slice(lastComma)
-            .replace(`)`, ``)
-            .replace(` `, ``)
-            .replace(`,`, ``);
+            .replace(')', '')
+            .replace(' ', '')
+            .replace(',', '');
         return Math.round(Number.parseFloat(parsed) * 100);
     }
     onColorChange(connector, color) {
-        const opacity = this.getOpacity(connector.documentationPropertyValue || ``);
+        const opacity = this.getOpacity(connector.documentationPropertyValue || '');
         if (opacity === 100) {
             connector.onValueChange(color);
             return;
         }
-        const rgb = hexToRgb(color).join(`, `);
+        const rgb = hexToRgb(color).join(', ');
         const result = `rgba(${rgb}, ${opacity / 100})`;
         connector.onValueChange(result);
     }
     onOpacityChange(connector, opacity) {
-        const hex = this.getColor(connector.documentationPropertyValue || ``);
+        const hex = this.getColor(connector.documentationPropertyValue || '');
         const rgb = hexToRgb(hex);
         const result = `rgba(${rgb}, ${opacity / 100})`;
         connector.onValueChange(result);
     }
     stripOptional(name) {
-        return name.replace(`?`, ``);
+        return name.replace('?', '');
     }
     isOptional(name) {
-        return name.includes(`?`);
+        return name.includes('?');
     }
     isPrimitivePolymorpheusContent(value) {
-        return typeof value === `string` || typeof value === `number`;
+        return typeof value === 'string' || typeof value === 'number';
     }
     showCleaner(type) {
-        return type.includes(`null`);
+        return type.includes('null');
     }
     showContentTooltip(type) {
-        return type.includes(`PolymorpheusContent`);
+        return type.includes('PolymorpheusContent');
     }
     inspectAny(data) {
         return inspectAny(data, 2);
@@ -708,12 +708,12 @@ __decorate([
 ], TuiDocDocumentationComponent.prototype, "propertiesConnectors", void 0);
 TuiDocDocumentationComponent = __decorate([
     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: ChangeDetectionStrategy.OnPush,
         animations: [
-            trigger(`emitEvent`, [
-                transition(`:increment`, [style({ opacity: 1 }), animate(`500ms ease-in`)]),
+            trigger('emitEvent', [
+                transition(':increment', [style({ opacity: 1 }), 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)}"]
@@ -730,7 +730,7 @@ let TuiInputOpacityDirective = class TuiInputOpacityDirective {
     set tuiInputOpacity(opacity) {
         const { nativeFocusableElement } = this.tuiFocusableComponent;
         if (nativeFocusableElement) {
-            this.renderer.setStyle(nativeFocusableElement, `opacity`, opacity / 100);
+            this.renderer.setStyle(nativeFocusableElement, 'opacity', opacity / 100);
         }
     }
 };
@@ -743,7 +743,7 @@ __decorate([
 ], TuiInputOpacityDirective.prototype, "tuiInputOpacity", null);
 TuiInputOpacityDirective = __decorate([
     Directive({
-        selector: `[tuiInputOpacity]`,
+        selector: '[tuiInputOpacity]',
     }),
     __param(0, Inject(Renderer2)),
     __param(1, Inject(TUI_FOCUSABLE_ITEM_ACCESSOR))
@@ -837,8 +837,8 @@ let TuiDocExampleComponent = class TuiDocExampleComponent {
         this.route = route;
         this.ngLocation = ngLocation;
         this.rawLoader$$ = new 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];
@@ -851,7 +851,7 @@ let TuiDocExampleComponent = class TuiDocExampleComponent {
         this.rawLoader$$.next(content);
     }
     copyExampleLink() {
-        const hashPosition = this.location.href.indexOf(`#`);
+        const hashPosition = this.location.href.indexOf('#');
         const currentUrl = hashPosition > -1
             ? this.location.href.slice(0, Math.max(0, hashPosition))
             : this.location.href;
@@ -868,17 +868,17 @@ let TuiDocExampleComponent = class TuiDocExampleComponent {
     edit(files) {
         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(() => 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(() => this.loading$.next(false));
     }
     setFragmentWithoutRedirect(id) {
         const url = this.router
-            .createUrlTree([], { relativeTo: this.route, fragment: id || `` })
+            .createUrlTree([], { relativeTo: this.route, fragment: id || '' })
             .toString();
         this.ngLocation.go(url);
     }
 };
 TuiDocExampleComponent.ctorParameters = () => [
-    { type: String, decorators: [{ type: Attribute, args: [`id`,] }] },
+    { type: String, decorators: [{ type: Attribute, args: ['id',] }] },
     { type: Clipboard, decorators: [{ type: Inject, args: [Clipboard,] }] },
     { type: TuiNotificationsService, decorators: [{ type: Inject, args: [TuiNotificationsService,] }] },
     { type: Location, decorators: [{ type: Inject, args: [LOCATION,] }] },
@@ -906,12 +906,12 @@ __decorate([
 ], TuiDocExampleComponent.prototype, "componentName", void 0);
 TuiDocExampleComponent = __decorate([
     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: 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, Attribute(`id`)),
+    __param(0, Attribute('id')),
     __param(1, Inject(Clipboard)),
     __param(2, Inject(TuiNotificationsService)),
     __param(3, Inject(LOCATION)),
@@ -975,22 +975,22 @@ let TuiLanguageSwitcherComponent = class TuiLanguageSwitcherComponent {
     constructor(switcher, iconsPath) {
         this.switcher = switcher;
         this.iconsPath = iconsPath;
-        this.path = this.iconsPath(`tuiIcon`).replace(`tuiIcon.svg#tuiIcon`, ``);
+        this.path = this.iconsPath('tuiIcon').replace('tuiIcon.svg#tuiIcon', '');
         this.language = new FormControl(tuiCapitalizeFirstLetter(this.switcher.language));
         this.flags = new Map([
-            [`chinese`, TuiCountryIsoCode.CN],
-            [`dutch`, TuiCountryIsoCode.NL],
-            [`english`, TuiCountryIsoCode.GB],
-            [`french`, TuiCountryIsoCode.FR],
-            [`german`, TuiCountryIsoCode.DE],
-            [`italian`, TuiCountryIsoCode.IT],
-            [`polish`, TuiCountryIsoCode.PL],
-            [`portuguese`, TuiCountryIsoCode.PT],
-            [`russian`, TuiCountryIsoCode.RU],
-            [`spanish`, TuiCountryIsoCode.ES],
-            [`turkish`, TuiCountryIsoCode.TR],
-            [`ukrainian`, TuiCountryIsoCode.UA],
-            [`vietnamese`, TuiCountryIsoCode.VN],
+            ['chinese', TuiCountryIsoCode.CN],
+            ['dutch', TuiCountryIsoCode.NL],
+            ['english', TuiCountryIsoCode.GB],
+            ['french', TuiCountryIsoCode.FR],
+            ['german', TuiCountryIsoCode.DE],
+            ['italian', TuiCountryIsoCode.IT],
+            ['polish', TuiCountryIsoCode.PL],
+            ['portuguese', TuiCountryIsoCode.PT],
+            ['russian', TuiCountryIsoCode.RU],
+            ['spanish', TuiCountryIsoCode.ES],
+            ['turkish', TuiCountryIsoCode.TR],
+            ['ukrainian', TuiCountryIsoCode.UA],
+            ['vietnamese', TuiCountryIsoCode.VN],
         ]);
         this.names = Array.from(this.flags.keys());
     }
@@ -1004,7 +1004,7 @@ TuiLanguageSwitcherComponent.ctorParameters = () => [
 ];
 TuiLanguageSwitcherComponent = __decorate([
     Component({
-        selector: `tui-language-switcher`,
+        selector: 'tui-language-switcher',
         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",
         changeDetection: ChangeDetectionStrategy.OnPush,
         styles: [".t-flag{width:1.75rem;height:1.25rem;margin-right:.5rem}"]
@@ -1029,18 +1029,18 @@ let TuiDocMainComponent = TuiDocMainComponent_1 = class TuiDocMainComponent {
     constructor(storage, windowRef) {
         this.storage = storage;
         this.windowRef = windowRef;
-        this.night = this.storage.getItem(`night`) === `true` ||
-            (this.storage.getItem(`night`) === null &&
-                this.windowRef.matchMedia(`(prefers-color-scheme: dark)`).matches);
+        this.night = this.storage.getItem('night') === 'true' ||
+            (this.storage.getItem('night') === null &&
+                this.windowRef.matchMedia('(prefers-color-scheme: dark)').matches);
         this.change$ = new Subject();
     }
     get mode() {
-        return this.night ? `onDark` : null;
+        return this.night ? 'onDark' : null;
     }
     onMode(night) {
         this.night = night;
         this.change$.next();
-        this.storage.setItem(`night`, String(night));
+        this.storage.setItem('night', String(night));
     }
 };
 TuiDocMainComponent.ctorParameters = () => [
@@ -1048,11 +1048,11 @@ TuiDocMainComponent.ctorParameters = () => [
     { type: Window, decorators: [{ type: Inject, args: [WINDOW,] }] }
 ];
 __decorate([
-    HostBinding(`attr.data-mode`)
+    HostBinding('attr.data-mode')
 ], TuiDocMainComponent.prototype, "mode", null);
 TuiDocMainComponent = TuiDocMainComponent_1 = __decorate([
     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: ViewEncapsulation.None,
         providers: [
@@ -1100,7 +1100,7 @@ __decorate([
 ], ScrollIntoViewDirective.prototype, "scrollIntoView", null);
 ScrollIntoViewDirective = __decorate([
     Directive({
-        selector: `[scrollIntoView]`,
+        selector: '[scrollIntoView]',
         providers: [TuiDestroyService],
     })
     // eslint-disable-next-line @typescript-eslint/naming-convention
@@ -1113,7 +1113,7 @@ let TuiScrollIntoViewLinkDirective = class TuiScrollIntoViewLinkDirective extend
 };
 TuiScrollIntoViewLinkDirective = __decorate([
     Directive({
-        selector: `[tuiScrollIntoViewLink]`,
+        selector: '[tuiScrollIntoViewLink]',
         providers: [TuiDestroyService],
     })
 ], TuiScrollIntoViewLinkDirective);
@@ -1258,12 +1258,12 @@ let TuiDocNavigationComponent = class TuiDocNavigationComponent {
         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(startWith(null), map(() => this.mode.mode || `onLight`));
+        this.active = '';
+        this.mode$ = this.mode.change$.pipe(startWith(null), map(() => this.mode.mode || 'onLight'));
         // Angular can't navigate no anchor links
         // https://stackoverflow.com/questions/36101756/angular2-routing-with-hashtag-to-page-anchor
         title$.subscribe(title => {
@@ -1298,11 +1298,11 @@ let TuiDocNavigationComponent = class TuiDocNavigationComponent {
     onClick() {
         this.open = false;
         this.menuOpen = false;
-        this.search = ``;
+        this.search = '';
         this.openActivePageGroup();
     }
     filterItems(items, search) {
-        return items.map(section => uniqBy(section.filter(({ title, keywords = `` }) => {
+        return items.map(section => uniqBy(section.filter(({ title, keywords = '' }) => {
             title = title.toLowerCase();
             search = search.toLowerCase();
             keywords = keywords.toLowerCase();
@@ -1310,13 +1310,13 @@ let TuiDocNavigationComponent = class TuiDocNavigationComponent {
                 keywords.includes(search) ||
                 title.includes(transliterateKeyboardLayout(search)) ||
                 keywords.includes(transliterateKeyboardLayout(search)) ||
-                search.replace(/-/gi, ``).includes(title));
-        }), `title`));
+                search.replace(/-/gi, '').includes(title));
+        }), 'title'));
     }
     flattenSubPages(items) {
         return items.reduce((array, item) => [
             ...array,
-            item.reduce((pages, page) => `subPages` in page
+            item.reduce((pages, page) => 'subPages' in page
                 ? [...pages, ...page.subPages]
                 : [...pages, page], []),
         ], []);
@@ -1332,11 +1332,11 @@ let TuiDocNavigationComponent = class TuiDocNavigationComponent {
     openActivePageGroup() {
         this.items.forEach((pages, pagesIndex) => {
             pages.forEach((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(subPage => {
                         if (this.isActiveRoute(subPage.route)) {
                             this.openPagesArr[pagesIndex] = true;
@@ -1354,10 +1354,10 @@ let TuiDocNavigationComponent = class TuiDocNavigationComponent {
         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,
         });
     }
@@ -1379,7 +1379,7 @@ TuiDocNavigationComponent.ctorParameters = () => [
     { type: undefined, decorators: [{ type: Inject, args: [TUI_DOC_SCROLL_BEHAVIOR,] }] }
 ];
 __decorate([
-    HostBinding(`class._open`)
+    HostBinding('class._open')
 ], TuiDocNavigationComponent.prototype, "menuOpen", void 0);
 __decorate([
     tuiPure
@@ -1389,7 +1389,7 @@ __decorate([
 ], TuiDocNavigationComponent.prototype, "flattenSubPages", null);
 TuiDocNavigationComponent = __decorate([
     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: ChangeDetectionStrategy.OnPush,
@@ -1454,7 +1454,7 @@ let TuiDocHeaderComponent = class TuiDocHeaderComponent {
         this.router = router;
         this.swipes$ = swipes$;
         this.stream$ = new Subject();
-        this.open$ = merge(this.router.events.pipe(mapTo(false)), this.stream$, this.swipes$.pipe(filter(swipe => swipe.direction === `left` || swipe.direction === `right`), map(swipe => swipe.direction === `right`))).pipe(startWith(false), distinctUntilChanged());
+        this.open$ = merge(this.router.events.pipe(mapTo(false)), this.stream$, this.swipes$.pipe(filter(swipe => swipe.direction === 'left' || swipe.direction === 'right'), map(swipe => swipe.direction === 'right'))).pipe(startWith(false), distinctUntilChanged());
     }
     onClick() {
         this.stream$.next(true);
@@ -1473,7 +1473,7 @@ TuiDocHeaderComponent.ctorParameters = () => [
 ];
 TuiDocHeaderComponent = __decorate([
     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: 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%}"]
@@ -1563,7 +1563,7 @@ __decorate([
 ], TuiDocPageTabConnectorDirective.prototype, "pageTab", void 0);
 TuiDocPageTabConnectorDirective = __decorate([
     Directive({
-        selector: `[pageTab]`,
+        selector: '[pageTab]',
     }),
     __param(0, Inject(TemplateRef))
 ], TuiDocPageTabConnectorDirective);
@@ -1575,22 +1575,22 @@ let TuiDocPageComponent = class TuiDocPageComponent {
         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 = EMPTY_QUERY;
         this.activeItemIndex = NaN;
     }
     get showSeeAlso() {
         return !!this.seeAlso.length && this.activeItemIndex === 0;
     }
-    getRouterLink(tab = ``) {
-        return `./${tab.replace(/ /g, `_`)}`;
+    getRouterLink(tab = '') {
+        return `./${tab.replace(/ /g, '_')}`;
     }
 };
 TuiDocPageComponent.ctorParameters = () => [
-    { type: String, decorators: [{ type: Attribute, args: [`deprecated`,] }] },
+    { type: String, decorators: [{ type: Attribute, args: ['deprecated',] }] },
     { type: undefined, decorators: [{ type: Inject, args: [TUI_DOC_DEFAULT_TABS,] }] },
     { type: undefined, decorators: [{ type: Inject, args: [PAGE_SEE_ALSO,] }] }
 ];
@@ -1611,13 +1611,13 @@ __decorate([
 ], TuiDocPageComponent.prototype, "tabConnectors", void 0);
 TuiDocPageComponent = __decorate([
     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: 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, Attribute(`deprecated`)),
+    __param(0, Attribute('deprecated')),
     __param(1, Inject(TUI_DOC_DEFAULT_TABS)),
     __param(2, Inject(PAGE_SEE_ALSO))
 ], TuiDocPageComponent);
@@ -1632,14 +1632,14 @@ let TuiDocSeeAlsoComponent = class TuiDocSeeAlsoComponent {
     getRouterLink(pageTitle) {
         for (let i = 0; i < this.pages.length; i++) {
             const page = this.pages
-                .map(page => (`subPages` in page ? page.subPages : [page]))
+                .map(page => ('subPages' in page ? page.subPages : [page]))
                 .reduce((pages, subPages) => [...pages, ...subPages], [])
                 .find((page) => page.title === pageTitle);
             if (page === null || page === void 0 ? void 0 : page.route) {
                 return page.route;
             }
         }
-        return ``;
+        return '';
     }
 };
 TuiDocSeeAlsoComponent.ctorParameters = () => [
@@ -1651,7 +1651,7 @@ __decorate([
 ], TuiDocSeeAlsoComponent.prototype, "seeAlso", void 0);
 TuiDocSeeAlsoComponent = __decorate([
     Component({
-        selector: `tui-doc-see-also`,
+        selector: 'tui-doc-see-also',
         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    >\n        {{ item }}\n    </a>\n    <ng-container *ngIf=\"!last\">{{ ', ' }}</ng-container>\n</ng-container>\n",
         changeDetection: ChangeDetectionStrategy.OnPush,
         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}"]
@@ -1678,10 +1678,10 @@ let TuiDocSourceCodeComponent = class TuiDocSourceCodeComponent {
     constructor(sourceCode, text) {
         this.sourceCode = sourceCode;
         this.text = text;
-        this.header = ``;
-        this.package = ``;
-        this.type = ``;
-        this.path = ``;
+        this.header = '';
+        this.package = '';
+        this.type = '';
+        this.path = '';
     }
     get pathOptions() {
         return this.getPathOptions(this.header, this.package, this.type, this.path);
@@ -1716,7 +1716,7 @@ __decorate([
 ], TuiDocSourceCodeComponent.prototype, "getPathOptions", null);
 TuiDocSourceCodeComponent = __decorate([
     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: ChangeDetectionStrategy.OnPush
     }),