@taiga-ui/addon-doc 3.14.0-dev.main-6fca3d4 → 3.14.0-dev.main-49a682e

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

@@ -48,8 +48,8 @@ function tuiTryParseMarkdownCodeBlock(text = ``) {
 
 class TuiDocCodeComponent {
     constructor() {
-        this.rawLoader$$ = new BehaviorSubject(``);
-        this.filename = ``;
+        this.rawLoader$$ = new BehaviorSubject('');
+        this.filename = '';
         this.processor$ = this.rawLoader$$.pipe(switchMap(tuiRawLoad), map(tuiTryParseMarkdownCodeBlock));
     }
     set code(code) {
@@ -64,9 +64,9 @@ TuiDocCodeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiDocCodeComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: `tui-doc-code`,
-                    templateUrl: `./code.template.html`,
-                    styleUrls: [`./code.style.less`],
+                    selector: 'tui-doc-code',
+                    templateUrl: './code.template.html',
+                    styleUrls: ['./code.style.less'],
                 }]
         }], propDecorators: { filename: [{
                 type: Input
@@ -74,7 +74,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 type: Input
             }], hasFilename: [{
                 type: HostBinding,
-                args: [`class._has-filename`]
+                args: ['class._has-filename']
             }] } });
 
 class TuiDocCodeModule {
@@ -112,9 +112,9 @@ __decorate([
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiDocCopyComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: `tui-doc-copy`,
-                    templateUrl: `./copy.template.html`,
-                    styleUrls: [`./copy.style.less`],
+                    selector: 'tui-doc-copy',
+                    templateUrl: './copy.template.html',
+                    styleUrls: ['./copy.style.less'],
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     providers: [TuiDestroyService],
                 }]
@@ -200,14 +200,14 @@ class TuiDocDemoComponent {
         this.texts = texts;
         this.control = null;
         this.template = null;
-        this.updateOnVariants = [`change`, `blur`, `submit`];
+        this.updateOnVariants = ['change', 'blur', 'submit'];
         this.updateOn = this.updateOnVariants[0];
         this.expanded = false;
         this.opaque = true;
         this.mode = this.getUrlTree().queryParams.tuiMode || null;
         this.sandboxWidth = parseInt(this.getUrlTree().queryParams.sandboxWidth, 10);
         this.change$ = new Subject();
-        this.items = [`onLight`, `onDark`];
+        this.items = ['onLight', 'onDark'];
     }
     onResize() {
         this.updateWidth();
@@ -241,7 +241,7 @@ class TuiDocDemoComponent {
         const clamped = Math.round(tuiClamp(safe, MIN_WIDTH, total)) - this.delta;
         const validated = safe < total ? clamped : NaN;
         this.resizer.nativeElement.textContent = String(clamped);
-        this.resizeable.nativeElement.style.width = validated ? tuiPx(safe) : ``;
+        this.resizeable.nativeElement.style.width = validated ? tuiPx(safe) : '';
         this.sandboxWidth = validated;
     }
     get delta() {
@@ -284,9 +284,9 @@ __decorate([
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiDocDemoComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: `tui-doc-demo`,
-                    templateUrl: `./demo.template.html`,
-                    styleUrls: [`./demo.style.less`],
+                    selector: 'tui-doc-demo',
+                    templateUrl: './demo.template.html',
+                    styleUrls: ['./demo.style.less'],
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     providers: [
                         TuiDestroyService,
@@ -316,10 +316,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 args: [TuiResizeableDirective, { static: true }]
             }], content: [{
                 type: ViewChild,
-                args: [`content`, { static: true }]
+                args: ['content', { static: true }]
             }], resizer: [{
                 type: ViewChild,
-                args: [`resizer`, { static: true }]
+                args: ['resizer', { static: true }]
             }], control: [{
                 type: Input
             }], template: [{
@@ -327,10 +327,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 args: [TemplateRef]
             }], onResize: [{
                 type: HostListener,
-                args: [`window:resize`]
+                args: ['window:resize']
             }], onMouseUp: [{
                 type: HostListener,
-                args: [`document:mouseup.silent`]
+                args: ['document:mouseup.silent']
             }], updateUrl: [] } });
 
 class TuiDocDemoModule {
@@ -449,7 +449,7 @@ function isPossibleObject(value) {
     return value.startsWith(`{`) && value.endsWith(`}`);
 }
 
-const SERIALIZED_SUFFIX = `$`;
+const SERIALIZED_SUFFIX = '$';
 // @bad TODO: refactor output and value sync
 class TuiDocDocumentationPropertyConnectorDirective {
     constructor(template, locationRef, activatedRoute, urlSerializer) {
@@ -457,9 +457,9 @@ class TuiDocDocumentationPropertyConnectorDirective {
         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();
@@ -471,11 +471,11 @@ class TuiDocDocumentationPropertyConnectorDirective {
     }
     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;
@@ -485,7 +485,7 @@ class TuiDocDocumentationPropertyConnectorDirective {
         return !!this.documentationPropertyValues;
     }
     get shouldShowValues() {
-        return this.documentationPropertyMode !== `output`;
+        return this.documentationPropertyMode !== 'output';
     }
     ngOnChanges() {
         this.changed$.next();
@@ -517,7 +517,7 @@ class TuiDocDocumentationPropertyConnectorDirective {
         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));
@@ -528,8 +528,8 @@ TuiDocDocumentationPropertyConnectorDirective.ɵdir = i0.ɵɵngDeclareDirective(
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiDocDocumentationPropertyConnectorDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: `ng-template[documentationPropertyName]`,
-                    exportAs: `documentationProperty`,
+                    selector: 'ng-template[documentationPropertyName]',
+                    exportAs: 'documentationProperty',
                 }]
         }], ctorParameters: function () { return [{ type: i0.TemplateRef, decorators: [{
                     type: Inject,
@@ -623,7 +623,7 @@ 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);
         }
     }
 }
@@ -632,7 +632,7 @@ TuiInputOpacityDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiInputOpacityDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: `[tuiInputOpacity]`,
+                    selector: '[tuiInputOpacity]',
                 }]
         }], ctorParameters: function () { return [{ type: i0.Renderer2, decorators: [{
                     type: Inject,
@@ -807,7 +807,7 @@ class TuiDocDocumentationComponent {
         this.destroy$ = destroy$;
         this.getColor = getColor;
         this.getOpacity = getOpacity;
-        this.heading = ``;
+        this.heading = '';
         this.showValues = true;
         this.isAPI = false;
         this.propertiesConnectors = EMPTY_QUERY;
@@ -823,17 +823,17 @@ class TuiDocDocumentationComponent {
         return this.isAPI ? this.texts[0] : this.texts[1];
     }
     onColorChange(connector, color) {
-        const opacity = this.getOpacity.transform(connector.documentationPropertyValue || ``);
+        const opacity = this.getOpacity.transform(connector.documentationPropertyValue || '');
         if (opacity === 100) {
             connector.onValueChange(color);
             return;
         }
-        const rgb = tuiHexToRgb(color).join(`, `);
+        const rgb = tuiHexToRgb(color).join(', ');
         const result = `rgba(${rgb}, ${opacity / 100})`;
         connector.onValueChange(result);
     }
     onOpacityChange(connector, opacity) {
-        const hex = this.getColor.transform(connector.documentationPropertyValue || ``);
+        const hex = this.getColor.transform(connector.documentationPropertyValue || '');
         const rgb = tuiHexToRgb(hex);
         const result = `rgba(${rgb}, ${opacity / 100})`;
         connector.onValueChange(result);
@@ -841,20 +841,20 @@ class TuiDocDocumentationComponent {
 }
 TuiDocDocumentationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiDocDocumentationComponent, deps: [{ token: ChangeDetectorRef }, { token: TUI_DOC_DOCUMENTATION_TEXTS }, { token: TUI_DOC_EXCLUDED_PROPERTIES }, { token: TuiDestroyService, self: true }, { token: TuiGetColorPipe }, { token: TuiGetOpacityPipe }], target: i0.ɵɵFactoryTarget.Component });
 TuiDocDocumentationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TuiDocDocumentationComponent, selector: "tui-doc-documentation", inputs: { heading: "heading", showValues: "showValues", isAPI: "isAPI" }, providers: [TuiGetColorPipe, TuiGetOpacityPipe, TuiDestroyService], queries: [{ propertyName: "propertiesConnectors", predicate: TuiDocDocumentationPropertyConnectorDirective }], ngImport: i0, template: "<h1\n    *ngIf=\"heading\"\n    class=\"t-heading\"\n>\n    {{ heading }}\n</h1>\n<ng-content></ng-content>\n<table class=\"t-table\">\n    <tr class=\"t-row t-row_header\">\n        <th class=\"t-th t-cell t-cell_prop\">{{ texts[2] }}</th>\n        <th class=\"t-th\">{{ type }}</th>\n        <th\n            *ngIf=\"showValues && !isAPI\"\n            class=\"t-th t-cell t-th_value\"\n        >\n            {{ texts[3] }}\n        </th>\n    </tr>\n    <tr\n        *ngFor=\"let propertyConnector of $any(propertiesConnectors) | tuiFilter : matcher : excludedProperties\"\n        class=\"t-row\"\n        [class.t-deprecated]=\"propertyConnector.documentationPropertyDeprecated\"\n    >\n        <td class=\"t-cell\">\n            <div\n                automation-id=\"tui-documentation__property-name\"\n                class=\"t-property\"\n            >\n                {{ propertyConnector.attrName | tuiStripOptionalPipe }}\n                <tui-badge\n                    *ngIf=\"propertyConnector.attrName | tuiIsOptionalPipe\"\n                    size=\"s\"\n                    value=\"Optional\"\n                ></tui-badge>\n            </div>\n            <span\n                *ngIf=\"propertyConnector.documentationPropertyDeprecated\"\n                class=\"t-deprecated-label\"\n            >\n                deprecated\n            </span>\n            <ng-container [ngTemplateOutlet]=\"propertyConnector.template\"></ng-container>\n        </td>\n        <td class=\"t-cell\">\n            <span class=\"type\">\n                {{ propertyConnector.documentationPropertyType }}\n                <tui-tooltip\n                    *ngIf=\"propertyConnector.documentationPropertyType | tuiShowContentTooltip\"\n                    [describeId]=\"propertyConnector.attrName\"\n                    [content]=\"content\"\n                >\n                    <ng-template #content>\n                        {{ texts[4] }}\n                        <a\n                            tuiLink\n                            tuiMode=\"onDark\"\n                            target=\"_blank\"\n                            href=\"https://github.com/tinkoff/ng-polymorpheus\"\n                        >\n                            <code>ng-polymorpheus</code>\n                        </a>\n                    </ng-template>\n                </tui-tooltip>\n            </span>\n        </td>\n        <td\n            *ngIf=\"showValues\"\n            class=\"t-cell t-cell_value\"\n        >\n            <ng-container *ngIf=\"propertyConnector.shouldShowValues; else elseEmitter\">\n                <tui-select\n                    *ngIf=\"propertyConnector.hasItems; else noItems\"\n                    tuiTextfieldSize=\"m\"\n                    tuiDropdownLimitWidth=\"min\"\n                    [tuiTextfieldCleaner]=\"propertyConnector.documentationPropertyType | tuiShowCleanerPipe\"\n                    [tuiTextfieldLabelOutside]=\"true\"\n                    [nativeId]=\"propertyConnector.attrName\"\n                    [valueContent]=\"selectContent\"\n                    [ngModel]=\"propertyConnector.documentationPropertyValue\"\n                    (ngModelChange)=\"propertyConnector.onValueChange($event)\"\n                >\n                    <code class=\"t-exception\">null</code>\n                    <tui-data-list-wrapper\n                        *tuiDataList\n                        [items]=\"propertyConnector.documentationPropertyValues\"\n                        [itemContent]=\"selectContent\"\n                    ></tui-data-list-wrapper>\n                </tui-select>\n                <ng-template\n                    #selectContent\n                    let-data\n                >\n                    <code>{{ data | tuiInspectAny }}</code>\n                </ng-template>\n\n                <ng-template #noItems>\n                    <ng-container [ngSwitch]=\"propertyConnector.documentationPropertyType\">\n                        <tui-toggle\n                            *ngSwitchCase=\"'boolean'\"\n                            size=\"l\"\n                            [nativeId]=\"propertyConnector.attrName\"\n                            [showIcons]=\"true\"\n                            [ngModel]=\"propertyConnector.documentationPropertyValue\"\n                            (ngModelChange)=\"propertyConnector.onValueChange($event)\"\n                        ></tui-toggle>\n\n                        <tui-primitive-textfield\n                            *ngSwitchCase=\"'string'\"\n                            tuiTextfieldSize=\"m\"\n                            [nativeId]=\"propertyConnector.attrName\"\n                            [tuiTextfieldLabelOutside]=\"true\"\n                            [tuiTextfieldCleaner]=\"true\"\n                            [value]=\"propertyConnector.documentationPropertyValue || ''\"\n                            (valueChange)=\"propertyConnector.onValueChange($event)\"\n                        ></tui-primitive-textfield>\n\n                        <div\n                            *ngSwitchCase=\"'color'\"\n                            tuiGroup\n                        >\n                            <tui-primitive-textfield\n                                tuiTextfieldSize=\"m\"\n                                [attr.id]=\"propertyConnector.attrName\"\n                                [tuiTextfieldLabelOutside]=\"true\"\n                                [tuiInputOpacity]=\"propertyConnector.documentationPropertyValue | tuiGetOpacity\"\n                                [value]=\"propertyConnector.documentationPropertyValue | tuiGetColorPipe\"\n                                (valueChange)=\"onColorChange(propertyConnector, $event)\"\n                            >\n                                <input\n                                    tuiTextfield\n                                    type=\"text\"\n                                />\n                            </tui-primitive-textfield>\n                            <tui-input-count\n                                tuiTextfieldSize=\"m\"\n                                [max]=\"100\"\n                                [ngModel]=\"propertyConnector.documentationPropertyValue | tuiGetOpacity\"\n                                (ngModelChange)=\"onOpacityChange(propertyConnector, $event)\"\n                            >\n                                Opacity\n                            </tui-input-count>\n                        </div>\n\n                        <tui-input-count\n                            *ngSwitchCase=\"'number'\"\n                            tuiTextfieldSize=\"m\"\n                            [nativeId]=\"propertyConnector.attrName\"\n                            [tuiTextfieldLabelOutside]=\"true\"\n                            [ngModel]=\"propertyConnector.documentationPropertyValue\"\n                            (ngModelChange)=\"propertyConnector.onValueChange($event)\"\n                        ></tui-input-count>\n\n                        <ng-container *ngSwitchCase=\"'PolymorpheusContent'\">\n                            <tui-primitive-textfield\n                                *ngIf=\"\n                                    propertyConnector.documentationPropertyValue | tuiIsPrimitivePolymorpheusContentPipe\n                                \"\n                                tuiTextfieldSize=\"m\"\n                                [nativeId]=\"propertyConnector.attrName\"\n                                [tuiTextfieldLabelOutside]=\"true\"\n                                [tuiTextfieldCleaner]=\"true\"\n                                [value]=\"propertyConnector.documentationPropertyValue.toString()\"\n                                (valueChange)=\"propertyConnector.onValueChange($event)\"\n                            >\n                                Default content\n                            </tui-primitive-textfield>\n                        </ng-container>\n                    </ng-container>\n                </ng-template>\n            </ng-container>\n\n            <ng-template #elseEmitter>\n                <tui-notification\n                    class=\"t-output\"\n                    [@emitEvent]=\"propertyConnector.emits$ | async\"\n                >\n                    Emit!\n                </tui-notification>\n            </ng-template>\n        </td>\n    </tr>\n</table>\n", styles: [":host{display:block;min-width:100%}.t-table{width:100%;table-layout:fixed}.t-row:not(:last-child){border-bottom:1px solid var(--tui-base-03)}:host-context(tui-root._mobile) .t-row{display:flex;flex-wrap:wrap}:host-context(tui-root._mobile) .t-row_header{display:none}.t-cell{padding:1rem 1rem .875rem}.t-cell:first-child{padding-left:0}.t-cell:last-child{padding-right:0}.t-cell_prop{width:40%}.t-cell_value{text-align:right}:host-context(tui-root._mobile) .t-cell{width:100%;height:auto;padding:.5rem 0;text-align:left}.t-th{padding:.5rem 1rem;color:var(--tui-text-02);font-weight:normal;text-align:left}.t-th_value{max-width:20rem;text-align:right}:host-context(tui-root._mobile) .t-th_value{width:9.375rem}.t-property{font:var(--tui-font-text-m);margin-bottom:.25rem;font-family:monospace;color:#8f75d1}:host-context(tui-root._mobile) .t-property{padding:.5rem 0}.t-type{font-family:monospace}.t-deprecated{background-color:var(--tui-error-bg);box-shadow:-1rem 0 var(--tui-error-bg),1rem 0 var(--tui-error-bg)}.t-deprecated-label{margin-right:.125rem;color:var(--tui-error-fill)}.t-exception{display:block;width:-webkit-max-content;width:-moz-max-content;width:max-content}.t-output{text-align:left;opacity:0}.t-heading{font:var(--tui-font-heading-4)}\n"], components: [{ type: i1.TuiBadgeComponent, selector: "tui-badge", inputs: ["value", "size", "status", "hoverable"] }, { type: i2$1.TuiTooltipComponent, selector: "tui-tooltip", inputs: ["content", "direction", "appearance", "showDelay", "hideDelay", "describeId"] }, { type: i2$1.TuiLinkComponent, selector: "a[tuiLink], button[tuiLink]", inputs: ["pseudo", "icon", "iconAlign", "iconRotated", "mode"], exportAs: ["tuiLink"] }, { type: i1.TuiSelectComponent, selector: "tui-select", inputs: ["stringify", "identityMatcher", "valueContent"] }, { type: i1.TuiDataListWrapperComponent, selector: "tui-data-list-wrapper:not([labels])", inputs: ["items"] }, { type: i1.TuiToggleComponent, selector: "tui-toggle", inputs: ["singleColor", "showIcons", "showLoader", "size"] }, { type: i2$1.TuiPrimitiveTextfieldComponent, selector: "tui-primitive-textfield", inputs: ["editable", "filler", "iconCleaner", "readOnly", "invalid", "disabled", "prefix", "postfix", "value"], outputs: ["valueChange"] }, { type: i2$1.TuiTextfieldComponent, selector: "input[tuiTextfield], textarea[tuiTextfield]" }, { type: i1.TuiInputCountComponent, selector: "tui-input-count", inputs: ["step", "min", "max", "hideButtons", "prefix", "postfix"] }, { type: i2$1.TuiNotificationComponent, selector: "tui-notification", inputs: ["hasIcon", "status"], outputs: ["close"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2$1.TuiModeDirective, selector: "[tuiMode]", inputs: ["tuiMode"] }, { type: i1.TuiSelectDirective, selector: "tui-select" }, { type: i2$1.TuiTextfieldSizeDirective, selector: "[tuiTextfieldSize]", inputs: ["tuiTextfieldSize"] }, { type: i2$1.TuiDropdownOptionsDirective, selector: "[tuiDropdownAlign], [tuiDropdownDirection], [tuiDropdownLimitWidth], [tuiDropdownMinHeight], [tuiDropdownMaxHeight], [tuiDropdownOffset]", inputs: ["tuiDropdownAlign", "tuiDropdownDirection", "tuiDropdownLimitWidth", "tuiDropdownMinHeight", "tuiDropdownMaxHeight", "tuiDropdownOffset"] }, { type: i2$1.TuiTextfieldCleanerDirective, selector: "[tuiTextfieldCleaner]", inputs: ["tuiTextfieldCleaner"] }, { type: i2$1.TuiTextfieldLabelOutsideDirective, selector: "[tuiTextfieldLabelOutside]", inputs: ["tuiTextfieldLabelOutside"] }, { type: i5$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i2$1.TuiDataListDirective, selector: "ng-template[tuiDataList]" }, { type: i5.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i5.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i2$1.TuiPrimitiveTextfieldDirective, selector: "tui-primitive-textfield" }, { type: i2$1.TuiGroupDirective, selector: "[tuiGroup]:not(ng-container)", inputs: ["orientation", "adaptive", "collapsed", "rounded", "size"] }, { type: TuiInputOpacityDirective, selector: "[tuiInputOpacity]", inputs: ["tuiInputOpacity"] }, { type: i1.TuiInputCountDirective, selector: "tui-input-count" }], pipes: { "tuiFilter": i6$1.TuiFilterPipe, "tuiStripOptionalPipe": TuiStripOptionalPipe, "tuiIsOptionalPipe": TuiIsOptionalPipe, "tuiShowContentTooltip": TuiShowContentTooltip, "tuiShowCleanerPipe": TuiShowCleanerPipe, "tuiInspectAny": TuiInspectPipe, "tuiGetOpacity": TuiGetOpacityPipe, "tuiGetColorPipe": TuiGetColorPipe, "tuiIsPrimitivePolymorpheusContentPipe": TuiIsPrimitivePolymorpheusContentPipe, "async": i5.AsyncPipe }, animations: [
-        trigger(`emitEvent`, [
-            transition(`:increment`, [style({ opacity: 1 }), animate(`500ms ease-in`)]),
+        trigger('emitEvent', [
+            transition(':increment', [style({ opacity: 1 }), animate('500ms ease-in')]),
         ]),
     ], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiDocDocumentationComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: `tui-doc-documentation`,
-                    templateUrl: `./documentation.template.html`,
-                    styleUrls: [`./documentation.style.less`],
+                    selector: 'tui-doc-documentation',
+                    templateUrl: './documentation.template.html',
+                    styleUrls: ['./documentation.style.less'],
                     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')]),
                         ]),
                     ],
                     providers: [TuiGetColorPipe, TuiGetOpacityPipe, TuiDestroyService],
@@ -1065,8 +1065,8 @@ 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];
@@ -1082,7 +1082,7 @@ 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;
@@ -1099,28 +1099,28 @@ class TuiDocExampleComponent {
     edit(files) {
         var _a;
         this.loading$.next(true);
-        (_a = this.codeEditor) === null || _a === void 0 ? void 0 : _a.edit(this.componentName, this.id || ``, files).finally(() => this.loading$.next(false));
+        (_a = this.codeEditor) === null || _a === void 0 ? void 0 : _a.edit(this.componentName, this.id || '', 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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiDocExampleComponent, deps: [{ token: `id`, attribute: true }, { token: Clipboard }, { token: TuiAlertService }, { token: LOCATION }, { token: TUI_COPY_TEXTS }, { token: TUI_DOC_EXAMPLE_TEXTS }, { token: TUI_DOC_CODE_EDITOR, optional: true }, { token: TUI_DOC_EXAMPLE_CONTENT_PROCESSOR }, { token: TUI_IS_CYPRESS }, { token: TUI_DOC_CODE_ACTIONS }, { token: Router }, { token: ActivatedRoute }, { token: Location$1 }], target: i0.ɵɵFactoryTarget.Component });
+TuiDocExampleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiDocExampleComponent, deps: [{ token: 'id', attribute: true }, { token: Clipboard }, { token: TuiAlertService }, { token: LOCATION }, { token: TUI_COPY_TEXTS }, { token: TUI_DOC_EXAMPLE_TEXTS }, { token: TUI_DOC_CODE_EDITOR, optional: true }, { token: TUI_DOC_EXAMPLE_CONTENT_PROCESSOR }, { token: TUI_IS_CYPRESS }, { token: TUI_DOC_CODE_ACTIONS }, { token: Router }, { token: ActivatedRoute }, { token: Location$1 }], target: i0.ɵɵFactoryTarget.Component });
 TuiDocExampleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TuiDocExampleComponent, selector: "tui-doc-example", inputs: { heading: "heading", description: "description", content: "content", componentName: "componentName" }, ngImport: i0, template: "<h3\n    *ngIf=\"heading\"\n    class=\"t-title\"\n>\n    <span\n        *polymorpheusOutlet=\"heading | tuiDocExampleCapitalize as text\"\n        [textContent]=\"text\"\n    ></span>\n    <button\n        *ngIf=\"id\"\n        tuiIconButton\n        type=\"button\"\n        size=\"xs\"\n        icon=\"tuiIconLinkLarge\"\n        appearance=\"icon\"\n        class=\"t-link-icon\"\n        [title]=\"copy$ | async\"\n        (click)=\"copyExampleLink()\"\n    ></button>\n</h3>\n<h4\n    *ngIf=\"description\"\n    class=\"t-description\"\n>\n    <ng-container *polymorpheusOutlet=\"description | tuiDocExampleCapitalize as text\">\n        {{ text }}\n    </ng-container>\n</h4>\n\n<div\n    *ngIf=\"processor$ | async as files\"\n    class=\"t-example\"\n>\n    <ng-container *ngIf=\"files | tuiDocExampleGetTabs : defaultTab as tabs\">\n        <div class=\"t-tabs-wrapper\">\n            <tui-tabs-with-more\n                class=\"t-tabs\"\n                [(activeItemIndex)]=\"activeItemIndex\"\n            >\n                <ng-container *ngFor=\"let tab of tabs\">\n                    <button\n                        *tuiItem\n                        tuiTab\n                    >\n                        {{ tab }}\n                    </button>\n                </ng-container>\n            </tui-tabs-with-more>\n\n            <button\n                *ngIf=\"files | tuiMapper : visible\"\n                tuiButton\n                appearance=\"flat\"\n                size=\"s\"\n                [showLoader]=\"!!(loading$ | async)\"\n                (click)=\"edit(files)\"\n            >\n                Edit on {{ codeEditor!.name }}\n            </button>\n        </div>\n\n        <div\n            *ngFor=\"let tab of tabs; let index = index\"\n            class=\"t-content\"\n            [class.t-content_animated]=\"!isCypress\"\n            [class.t-content_visible]=\"activeItemIndex === index\"\n        >\n            <ng-container\n                *ngIf=\"index === defaultTabIndex; else anotherTab\"\n                [ngTemplateOutlet]=\"preview\"\n            ></ng-container>\n            <ng-template #anotherTab>\n                <ng-container\n                    [ngTemplateOutlet]=\"codeSection\"\n                    [ngTemplateOutletContext]=\"{$implicit: files[tabs[activeItemIndex]] || ''}\"\n                ></ng-container>\n            </ng-template>\n        </div>\n    </ng-container>\n</div>\n\n<ng-template #preview>\n    <div\n        automation-id=\"tui-doc-example\"\n        class=\"t-demo\"\n    >\n        <ng-content></ng-content>\n    </div>\n</ng-template>\n\n<ng-template\n    #codeSection\n    let-code\n>\n    <section class=\"t-code-actions\">\n        <ng-container *ngFor=\"let action of codeActions\">\n            <ng-container *polymorpheusOutlet=\"action as text; context: {$implicit: code}\">\n                {{ text }}\n            </ng-container>\n        </ng-container>\n        <tui-doc-copy [cdkCopyToClipboard]=\"code\"></tui-doc-copy>\n    </section>\n    <tui-doc-code [code]=\"code\"></tui-doc-code>\n</ng-template>\n", styles: [":host{position:relative;display:block;padding-top:3.5rem;clear:right}:host :host-context(tui-root._mobile){padding-top:2rem}.t-title{font:var(--tui-font-heading-5);margin:0 0 .5rem}:host-context(tui-root._mobile) .t-title{font:var(--tui-font-heading-6)}.t-description{font:var(--tui-font-text-m);font-weight:normal;margin:0}.t-example{position:relative;margin-top:1.5rem;border:1px solid var(--tui-base-03);border-radius:var(--tui-radius-m);box-shadow:0 .125rem .1875rem rgba(0,0,0,.1)}:host-context(tui-root._mobile) .t-example{margin-top:.75rem}.t-tabs-wrapper{display:flex;padding:0 2rem;box-shadow:inset 0 -1px var(--tui-base-03);justify-content:space-between;align-items:center}:host-context(tui-root._mobile) .t-tabs-wrapper{padding:0 1rem}.t-tabs{flex-grow:1}.t-demo{padding:2rem;overflow-x:auto}@media all and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: .001dpcm){.t-demo::-webkit-scrollbar,.t-demo::-webkit-scrollbar-thumb{width:1rem;height:1rem;border-radius:6.25rem;background-clip:padding-box;border:2.667rem solid transparent}.t-demo::-webkit-scrollbar{background-color:transparent}.t-demo::-webkit-scrollbar-thumb{background-color:var(--tui-clear-hover)}.t-demo::-webkit-scrollbar-thumb:hover{background-color:var(--tui-clear-active)}.t-demo::-webkit-scrollbar-thumb:active{background-color:var(--tui-text-03)}}:host-context(tui-root._mobile) .t-demo{padding:1rem}.t-code-actions{position:absolute;top:4.375rem;right:1rem;display:flex;justify-content:flex-end;align-items:center}.t-code-actions>*{margin-left:.5rem}.t-link-icon{margin-left:.3rem;vertical-align:baseline}.t-content{will-change:opacity;height:0;visibility:hidden;opacity:0}.t-content_animated{transition:opacity .3s ease-in-out}.t-content_visible{height:auto;visibility:visible;opacity:1}\n"], components: [{ type: i2$1.TuiButtonComponent, selector: "button[tuiButton], button[tuiIconButton], a[tuiButton], a[tuiIconButton]", inputs: ["appearance", "disabled", "icon", "iconRight", "shape", "showLoader", "size"] }, { type: i1.TuiTabsWithMoreComponent, selector: "tui-tabs-with-more, nav[tuiTabsWithMore]", inputs: ["moreContent", "dropdownContent", "underline", "activeItemIndex", "itemsLimit"], outputs: ["activeItemIndexChange"] }, { type: i1.TuiTabComponent, selector: "a[tuiTab]:not([routerLink]), a[tuiTab][routerLink][routerLinkActive], button[tuiTab]" }, { type: TuiDocCopyComponent, selector: "tui-doc-copy" }, { type: TuiDocCodeComponent, selector: "tui-doc-code", inputs: ["filename", "code"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6$2.PolymorpheusOutletDirective, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6$1.TuiItemDirective, selector: "[tuiItem]" }, { type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i8.CdkCopyToClipboard, selector: "[cdkCopyToClipboard]", inputs: ["cdkCopyToClipboard", "cdkCopyToClipboardAttempts"], outputs: ["cdkCopyToClipboardCopied"] }], pipes: { "tuiDocExampleCapitalize": TuiDocExampleCapitalizePipe, "async": i5.AsyncPipe, "tuiDocExampleGetTabs": TuiDocExampleGetTabsPipe, "tuiMapper": i6$1.TuiMapperPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiDocExampleComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: `tui-doc-example`,
-                    templateUrl: `./example.template.html`,
-                    styleUrls: [`./example.style.less`],
+                    selector: 'tui-doc-example',
+                    templateUrl: './example.template.html',
+                    styleUrls: ['./example.style.less'],
                     changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
         }], ctorParameters: function () { return [{ type: undefined, decorators: [{
                     type: Attribute,
-                    args: [`id`]
+                    args: ['id']
                 }] }, { type: i8.Clipboard, decorators: [{
                     type: Inject,
                     args: [Clipboard]
@@ -1224,22 +1224,22 @@ 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());
     }
@@ -1252,9 +1252,9 @@ TuiLanguageSwitcherComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiLanguageSwitcherComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: `tui-language-switcher`,
-                    templateUrl: `./language-switcher.component.html`,
-                    styleUrls: [`./language-switcher.component.less`],
+                    selector: 'tui-language-switcher',
+                    templateUrl: './language-switcher.component.html',
+                    styleUrls: ['./language-switcher.component.less'],
                     changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
         }], ctorParameters: function () { return [{ type: i5$2.TuiLanguageSwitcher, decorators: [{
@@ -1393,7 +1393,7 @@ TuiScrollIntoViewLinkDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiScrollIntoViewLinkDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: `[tuiScrollIntoViewLink]`,
+                    selector: '[tuiScrollIntoViewLink]',
                     providers: [TuiDestroyService],
                 }]
         }], ctorParameters: function () { return [{ type: i6$1.TuiDestroyService, decorators: [{
@@ -1427,17 +1427,17 @@ class TuiDocNavigationComponent {
         this.menuOpen = false;
         this.openPagesArr = [];
         this.openPagesGroupsArr = [];
-        this.active = ``;
-        this.search = new FormControl(``);
+        this.active = '';
+        this.search = new FormControl('');
         this.filtered$ = tuiControlValue(this.search).pipe(filter(search => search.length > 2), map(search => this.filterItems(this.flattenSubPages(this.items), search)));
-        this.mode$ = this.mode.change$.pipe(startWith(null), map(() => this.mode.mode || `onLight`));
+        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 => {
             changeDetectorRef.markForCheck();
             titleService.setTitle(title);
             this.openActivePageGroup();
-            this.handleAnchorLink(this.activatedRoute.snapshot.fragment || ``);
+            this.handleAnchorLink(this.activatedRoute.snapshot.fragment || '');
         });
     }
     get canOpen() {
@@ -1459,11 +1459,11 @@ class TuiDocNavigationComponent {
     onClick(input) {
         input.open = false;
         this.menuOpen = false;
-        this.search.setValue(``);
+        this.search.setValue('');
         this.openActivePageGroup();
     }
     filterItems(items, search) {
-        return items.map(section => tuiUniqBy(section.filter(({ title, keywords = `` }) => {
+        return items.map(section => tuiUniqBy(section.filter(({ title, keywords = '' }) => {
             title = title.toLowerCase();
             search = search.toLowerCase();
             keywords = keywords.toLowerCase();
@@ -1471,13 +1471,13 @@ class TuiDocNavigationComponent {
                 keywords.includes(search) ||
                 title.includes(tuiTransliterateKeyboardLayout(search)) ||
                 keywords.includes(tuiTransliterateKeyboardLayout(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], []),
         ], []);
@@ -1493,11 +1493,11 @@ 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;
@@ -1515,10 +1515,10 @@ 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,
         });
     }
@@ -1534,9 +1534,9 @@ __decorate([
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiDocNavigationComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: `tui-doc-navigation`,
-                    templateUrl: `navigation.template.html`,
-                    styleUrls: [`navigation.style.less`],
+                    selector: 'tui-doc-navigation',
+                    templateUrl: 'navigation.template.html',
+                    styleUrls: ['navigation.style.less'],
                     providers: NAVIGATION_PROVIDERS,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
@@ -1588,7 +1588,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                     args: [TUI_DOC_SCROLL_BEHAVIOR]
                 }] }]; }, propDecorators: { menuOpen: [{
                 type: HostBinding,
-                args: [`class._open`]
+                args: ['class._open']
             }], filterItems: [], flattenSubPages: [] } });
 
 const TUI_DOC_LOGO = new InjectionToken(`[TUI_DOC_LOGO]: Main logo`, {
@@ -1602,7 +1602,7 @@ 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);
@@ -1618,9 +1618,9 @@ TuiDocHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiDocHeaderComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: `header[tuiDocHeader]`,
-                    templateUrl: `./header.template.html`,
-                    styleUrls: [`./header.style.less`],
+                    selector: 'header[tuiDocHeader]',
+                    templateUrl: './header.template.html',
+                    styleUrls: ['./header.style.less'],
                     changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
         }], ctorParameters: function () { return [{ type: undefined, decorators: [{
@@ -1641,18 +1641,18 @@ 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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiDocMainComponent, deps: [{ token: LOCAL_STORAGE }, { token: WINDOW }], target: i0.ɵɵFactoryTarget.Component });
@@ -1666,9 +1666,9 @@ TuiDocMainComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiDocMainComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: `tui-doc-main`,
-                    templateUrl: `./main.template.html`,
-                    styleUrls: [`./main.style.less`],
+                    selector: 'tui-doc-main',
+                    templateUrl: './main.template.html',
+                    styleUrls: ['./main.style.less'],
                     encapsulation: ViewEncapsulation.None,
                     providers: [
                         {
@@ -1686,7 +1686,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                     args: [WINDOW]
                 }] }]; }, propDecorators: { mode: [{
                 type: HostBinding,
-                args: [`attr.data-mode`]
+                args: ['attr.data-mode']
             }] } });
 
 class TuiScrollIntoViewLinkModule {
@@ -1893,7 +1893,7 @@ __decorate([
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiDocPageTabConnectorDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: `[pageTab]`,
+                    selector: '[pageTab]',
                 }]
         }], ctorParameters: function () { return [{ type: i0.TemplateRef, decorators: [{
                     type: Inject,
@@ -1910,10 +1910,10 @@ 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);
@@ -1935,8 +1935,8 @@ __decorate([
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiDocSourceCodeComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: `tui-doc-source-code`,
-                    templateUrl: `./source-code.template.html`,
+                    selector: 'tui-doc-source-code',
+                    templateUrl: './source-code.template.html',
                     changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
         }], ctorParameters: function () { return [{ type: undefined, decorators: [{
@@ -1964,14 +1964,14 @@ 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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiDocSeeAlsoComponent, deps: [{ token: TUI_DOC_SEE_ALSO_TEXT }, { token: TUI_DOC_PAGES }], target: i0.ɵɵFactoryTarget.Component });
@@ -1979,9 +1979,9 @@ TuiDocSeeAlsoComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiDocSeeAlsoComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: `tui-doc-see-also`,
-                    templateUrl: `./see-also.template.html`,
-                    styleUrls: [`./see-also.style.less`],
+                    selector: 'tui-doc-see-also',
+                    templateUrl: './see-also.template.html',
+                    styleUrls: ['./see-also.style.less'],
                     changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
         }], ctorParameters: function () { return [{ type: undefined, decorators: [{
@@ -1999,34 +1999,34 @@ 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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiDocPageComponent, deps: [{ token: `deprecated`, attribute: true }, { token: TUI_DOC_DEFAULT_TABS }, { token: PAGE_SEE_ALSO }], target: i0.ɵɵFactoryTarget.Component });
+TuiDocPageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiDocPageComponent, deps: [{ token: 'deprecated', attribute: true }, { token: TUI_DOC_DEFAULT_TABS }, { token: PAGE_SEE_ALSO }], target: i0.ɵɵFactoryTarget.Component });
 TuiDocPageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TuiDocPageComponent, selector: "tui-doc-page", inputs: { header: "header", package: "package", type: "type", path: "path" }, providers: PAGE_PROVIDERS, queries: [{ propertyName: "tabConnectors", predicate: TuiDocPageTabConnectorDirective }], ngImport: i0, 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                    *tuiItem\n                    tuiTab\n                    routerLink=\"./\"\n                    routerLinkActive\n                    [routerLinkActiveOptions]=\"{exact: true}\"\n                >\n                    {{ tab.pageTab || defaultTabs[index] }}\n                </a>\n            </ng-container>\n            <ng-template #dynamicTab>\n                <a\n                    *tuiItem\n                    tuiTab\n                    routerLinkActive\n                    [routerLink]=\"getRouterLink(tab.pageTab || defaultTabs[index])\"\n                >\n                    {{ tab.pageTab || defaultTabs[index] }}\n                </a>\n            </ng-template>\n        </ng-container>\n    </tui-tabs-with-more>\n    <tui-doc-source-code\n        class=\"t-source-code\"\n        [header]=\"header\"\n        [package]=\"package\"\n        [type]=\"type\"\n        [path]=\"path\"\n    ></tui-doc-source-code>\n</header>\n<div class=\"t-content\">\n    <ng-content></ng-content>\n    <tui-doc-see-also\n        *ngIf=\"showSeeAlso\"\n        class=\"t-see-also\"\n        [seeAlso]=\"seeAlso\"\n    ></tui-doc-see-also>\n    <ng-container *ngFor=\"let tab of tabConnectors; index as index\">\n        <ng-container\n            *ngIf=\"index === activeItemIndex\"\n            [ngTemplateOutlet]=\"tab.template\"\n        ></ng-container>\n    </ng-container>\n</div>\n", styles: [":host{display:flex;flex-direction:column;min-height:0;flex-basis:0;flex-grow:1}.t-header{display:flex;font:var(--tui-font-heading-3);flex-wrap:wrap;min-height:7.25rem;color:var(--tui-text-01);box-shadow:inset 0 -1px 0 0 var(--tui-base-03);padding:3.75rem 0 0;box-sizing:border-box;flex-shrink:0;margin:0 min(10vw,8.75rem)}:host-context(tui-root._mobile) .t-header{font:var(--tui-font-heading-4);min-height:4.5rem;padding:1.25rem 1.25rem 0;margin:0}.t-title{min-width:100%;font-size:inherit;margin:0}.t-tag{vertical-align:middle;text-transform:uppercase;margin-right:.5rem}.t-tag_deprecated{background-color:var(--tui-error-fill)}.t-tag.t-tag_package{color:#000}.t-tabs{flex:1;margin:1.125rem .3125rem 0 0}:host-context(tui-root._mobile) .t-tabs{margin-top:.25rem}.t-content{padding:2rem 0;margin:0 min(10vw,8.75rem)}:host-context(tui-root._mobile) .t-content{padding:2rem 1.25rem;margin:0}.t-see-also{min-width:18.75rem;width:30%;float:right;margin-left:1.5rem}:host-context(tui-root._mobile) .t-see-also{float:none;width:100%;margin:0 0 1.5rem}.t-source-code{align-self:flex-end;line-height:2.75rem}\n"], components: [{ type: i1.TuiTagComponent, selector: "tui-tag, a[tuiTag]", inputs: ["value", "editable", "separator", "maxLength", "size", "showLoader", "status", "hoverable", "removable", "disabled", "autoColor", "leftContent"], outputs: ["edited"] }, { type: i1.TuiTabsWithMoreComponent, selector: "tui-tabs-with-more, nav[tuiTabsWithMore]", inputs: ["moreContent", "dropdownContent", "underline", "activeItemIndex", "itemsLimit"], outputs: ["activeItemIndexChange"] }, { type: i1.TuiTabComponent, selector: "a[tuiTab]:not([routerLink]), a[tuiTab][routerLink][routerLinkActive], button[tuiTab]" }, { type: TuiDocSourceCodeComponent, selector: "tui-doc-source-code", inputs: ["header", "package", "type", "path"] }, { type: TuiDocSeeAlsoComponent, selector: "tui-doc-see-also", inputs: ["seeAlso"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6$1.TuiItemDirective, selector: "[tuiItem]" }, { type: i6.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["routerLink", "target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo"] }, { type: i6.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "routerLinkActive"], exportAs: ["routerLinkActive"] }, { type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiDocPageComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: `tui-doc-page`,
-                    templateUrl: `./page.template.html`,
-                    styleUrls: [`./page.style.less`],
+                    selector: 'tui-doc-page',
+                    templateUrl: './page.template.html',
+                    styleUrls: ['./page.style.less'],
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     providers: PAGE_PROVIDERS,
                 }]
         }], ctorParameters: function () { return [{ type: undefined, decorators: [{
                     type: Attribute,
-                    args: [`deprecated`]
+                    args: ['deprecated']
                 }] }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [TUI_DOC_DEFAULT_TABS]