@taiga-ui/addon-doc 2.54.0 → 3.0.0-rc.0

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

@@ -1,29 +1,53 @@
-import { __awaiter, __decorate, __param } from 'tslib';
-import { Input, HostBinding, Component, NgModule, Inject, ChangeDetectionStrategy, InjectionToken, Renderer2, PLATFORM_ID, ViewChild, ContentChild, TemplateRef, HostListener, forwardRef, EventEmitter, Output, Directive, ChangeDetectorRef, ContentChildren, Attribute, Optional, Pipe, ViewEncapsulation, ElementRef } from '@angular/core';
-import { BehaviorSubject, Subject, timer, Observable, merge, identity, defer, of, ReplaySubject } from 'rxjs';
-import { switchMap, map, switchMapTo, mapTo, startWith, takeUntil, filter, debounceTime, mergeMap, take, distinctUntilChanged } from 'rxjs/operators';
+import * as i0 from '@angular/core';
+import { Component, Input, HostBinding, NgModule, ChangeDetectionStrategy, Inject, InjectionToken, Renderer2, PLATFORM_ID, forwardRef, TemplateRef, ViewChild, ContentChild, HostListener, EventEmitter, Directive, Output, ChangeDetectorRef, ContentChildren, Pipe, Attribute, Optional, ElementRef, ViewEncapsulation } from '@angular/core';
+import * as i8 from 'rxjs';
+import { BehaviorSubject, Subject, timer, merge, identity, defer, of, ReplaySubject } from 'rxjs';
+import { switchMap, map, switchMapTo, mapTo, startWith, takeUntil, filter, mergeMap, debounceTime, take, distinctUntilChanged } from 'rxjs/operators';
+import { __awaiter, __decorate } from 'tslib';
 import MarkdownIt from 'markdown-it';
+import * as i4 from '@angular/common';
 import { CommonModule, isPlatformBrowser, Location as Location$1, DOCUMENT } from '@angular/common';
+import * as i2 from 'ngx-highlightjs';
 import { HighlightModule } from 'ngx-highlightjs';
-import { tuiPure, TuiDestroyService, px, TUI_IS_MOBILE, TuiDragModule, EMPTY_QUERY, itemsQueryListObservable, watch, TUI_FOCUSABLE_ITEM_ACCESSOR, TUI_IS_CYPRESS, TuiSwipeService, getElementObscurers, isPresent, uniqBy, TuiActiveZoneModule, TuiLetModule, TuiAutoFocusModule, tuiDefaultProp } from '@taiga-ui/cdk';
+import * as i3 from '@taiga-ui/cdk';
+import { TuiDestroyService, tuiPure, tuiPx, TUI_IS_MOBILE, TuiDragModule, TUI_FOCUSABLE_ITEM_ACCESSOR, EMPTY_QUERY, itemsQueryListObservable, watch, tuiIsString, tuiIsNumber, TUI_IS_CYPRESS, isPresent, getElementObscurers, uniqBy, TuiSwipeService, TuiActiveZoneModule, TuiLetModule, TuiAutoFocusModule, tuiDefaultProp } from '@taiga-ui/cdk';
+import * as i2$1 from '@taiga-ui/kit';
 import { TUI_COPY_TEXTS, TuiSelectModule, TuiRadioBlockModule, TuiCheckboxLabeledModule, TuiDataListWrapperModule, TuiBadgeModule, TuiToggleModule, TuiInputCountModule, TuiTabsModule, TuiAccordionModule, TuiTagModule } from '@taiga-ui/kit';
-import { TuiButtonModule, TuiModeDirective, TuiLinkModule, TuiExpandModule, TuiGroupModule, TuiTooltipModule, TuiModeModule, TuiSvgModule, TuiDataListModule, TuiTextfieldControllerModule, TuiHintControllerModule, TuiPrimitiveTextfieldModule, TuiDropdownControllerModule, TuiNotificationModule, TuiNotificationsService, capitalizeFirstLetter, TuiHostedDropdownModule, TuiScrollbarModule, TuiThemeNightModule, TuiRootModule, TuiDialogModule, TuiAlertModule } from '@taiga-ui/core';
+import * as i1 from '@taiga-ui/core';
+import { TuiButtonModule, TuiModeDirective, TuiLinkModule, TuiExpandModule, TuiGroupModule, TuiTooltipModule, TuiModeModule, TuiSvgModule, TuiDataListModule, TuiTextfieldControllerModule, TuiHintControllerModule, TuiPrimitiveTextfieldModule, TuiDropdownControllerModule, TuiNotificationModule, tuiCapitalizeFirstLetter, TuiAlertService, TuiHostedDropdownModule, TuiScrollbarModule, TuiThemeNightModule, TuiRootModule, TuiDialogModule, TuiAlertModule } from '@taiga-ui/core';
+import * as i5$1 from '@angular/forms';
 import { FormControl, FormGroup, ReactiveFormsModule, FormsModule } from '@angular/forms';
+import * as i5 from '@angular/router';
 import { UrlSerializer, RouterModule, ActivatedRoute, Router, NavigationEnd } from '@angular/router';
 import { trigger, transition, style, animate } from '@angular/animations';
+import * as i8$1 from '@angular/cdk/clipboard';
 import { Clipboard, ClipboardModule } from '@angular/cdk/clipboard';
 import { LOCATION, LOCAL_STORAGE, WINDOW } from '@ng-web-apis/common';
+import * as i6 from '@tinkoff/ng-polymorpheus';
 import { PolymorpheusModule } from '@tinkoff/ng-polymorpheus';
-import { TuiSidebarDirective, TuiSidebarModule } from '@taiga-ui/addon-mobile';
+import * as i7 from '@angular/platform-browser';
 import { Title } from '@angular/platform-browser';
+import * as i4$1 from '@taiga-ui/addon-mobile';
+import { TuiSidebarDirective, TuiSidebarModule } from '@taiga-ui/addon-mobile';
 
+// TODO: delete it when all `!!raw-loader!` will be replaced by webpack `asset/source`.
+function trimExportDefault(fileContent) {
+    return fileContent.startsWith(`export default "`)
+        ? fileContent
+            .replace(/^export\sdefault\s["']/gi, ``)
+            .replace(/['"];$/gi, ``)
+            .replaceAll(`\\n`, `\n`)
+            .replaceAll(`\\"`, `"`)
+        : fileContent;
+}
 /**
  * @deprecated: use {@link tuiRawLoad} instead
  */
 // eslint-disable-next-line @typescript-eslint/naming-convention
 function rawLoad(content) {
     return __awaiter(this, void 0, void 0, function* () {
-        return content instanceof Promise ? (yield content).default : content;
+        const unpacked = content instanceof Promise ? (yield content).default : content;
+        return trimExportDefault(unpacked);
     });
 }
 const tuiRawLoad = rawLoad;
@@ -32,19 +56,19 @@ const tuiRawLoad = rawLoad;
  * @deprecated: use {@link tuiTryParseMarkdownCodeBlock} instead
  */
 // eslint-disable-next-line @typescript-eslint/naming-convention
-function tryParseMarkdownCodeBlock(text = '') {
+function tryParseMarkdownCodeBlock(text = ``) {
     const tokens = new MarkdownIt().parse(text, {});
     const result = tokens
-        .filter(({ tag, type }) => tag === 'code' && type === 'fence')
+        .filter(({ tag, type }) => tag === `code` && type === `fence`)
         .map(({ content }) => content);
     return result.length ? result : [text];
 }
 const tuiTryParseMarkdownCodeBlock = tryParseMarkdownCodeBlock;
 
-let TuiDocCodeComponent = class 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) {
@@ -53,37 +77,42 @@ let TuiDocCodeComponent = class TuiDocCodeComponent {
     get hasFilename() {
         return !!this.filename;
     }
-};
-__decorate([
-    Input()
-], TuiDocCodeComponent.prototype, "filename", void 0);
-__decorate([
-    Input()
-], TuiDocCodeComponent.prototype, "code", null);
-__decorate([
-    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",
-        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);
+}
+TuiDocCodeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiDocCodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+TuiDocCodeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TuiDocCodeComponent, selector: "tui-doc-code", inputs: { filename: "filename", code: "code" }, host: { properties: { "class._has-filename": "this.hasFilename" } }, ngImport: i0, template: "<p\n    *ngIf=\"filename\"\n    class=\"t-header\"\n>\n    {{ filename }}\n</p>\n<pre\n    *ngFor=\"let content of processor$ | async\"\n    class=\"t-code\"\n><code [lineNumbers]=\"true\" [highlight]=\"content\"></code></pre>\n", styles: [":host{display:block}.t-header{font:var(--tui-font-text-s);font-weight:bold}.t-code{margin:0}.t-code+.t-code{margin-top:1rem}.hljs:not(:empty){font:var(--tui-font-text-m);padding:1.5rem 2rem;font-family:monospace;background:var(--tui-clear-disabled);word-wrap:break-word;white-space:pre-wrap}@media all and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: .001dpcm){.hljs:not(:empty)::-webkit-scrollbar,.hljs:not(:empty)::-webkit-scrollbar-thumb{width:1rem;height:1rem;border-radius:6.25rem;background-clip:padding-box;border:2.667rem solid transparent}.hljs:not(:empty)::-webkit-scrollbar{background-color:transparent}.hljs:not(:empty)::-webkit-scrollbar-thumb{background-color:var(--tui-clear-hover)}.hljs:not(:empty)::-webkit-scrollbar-thumb:hover{background-color:var(--tui-clear-active)}.hljs:not(:empty)::-webkit-scrollbar-thumb:active{background-color:var(--tui-text-03)}}:host._has-filename .hljs:not(:empty){border-radius:.75rem}:host-context(tui-root._mobile) .hljs:not(:empty){padding:1rem}\n"], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.Highlight, selector: "[highlight]", inputs: ["highlight", "languages", "lineNumbers"], outputs: ["highlighted"] }], pipes: { "async": i4.AsyncPipe } });
+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`],
+                }]
+        }], propDecorators: { filename: [{
+                type: Input
+            }], code: [{
+                type: Input
+            }], hasFilename: [{
+                type: HostBinding,
+                args: [`class._has-filename`]
+            }] } });
 
-let TuiDocCodeModule = class TuiDocCodeModule {
-};
-TuiDocCodeModule = __decorate([
-    NgModule({
-        imports: [CommonModule, HighlightModule],
-        declarations: [TuiDocCodeComponent],
-        exports: [TuiDocCodeComponent],
-    })
-], TuiDocCodeModule);
+class TuiDocCodeModule {
+}
+TuiDocCodeModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiDocCodeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+TuiDocCodeModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiDocCodeModule, declarations: [TuiDocCodeComponent], imports: [CommonModule, HighlightModule], exports: [TuiDocCodeComponent] });
+TuiDocCodeModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiDocCodeModule, imports: [[CommonModule, HighlightModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiDocCodeModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule, HighlightModule],
+                    declarations: [TuiDocCodeComponent],
+                    exports: [TuiDocCodeComponent],
+                }]
+        }] });
 
 const COPIED_TIMEOUT = 1500;
 // @dynamic
-let TuiDocCopyComponent = class TuiDocCopyComponent {
+class TuiDocCopyComponent {
     constructor(texts$) {
         this.texts$ = texts$;
         this.copy$ = new Subject();
@@ -94,33 +123,39 @@ let TuiDocCopyComponent = class TuiDocCopyComponent {
     onClick() {
         this.copy$.next();
     }
-};
-TuiDocCopyComponent.ctorParameters = () => [
-    { type: Observable, decorators: [{ type: Inject, args: [TUI_COPY_TEXTS,] }] }
-];
+}
+TuiDocCopyComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiDocCopyComponent, deps: [{ token: TUI_COPY_TEXTS }], target: i0.ɵɵFactoryTarget.Component });
+TuiDocCopyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TuiDocCopyComponent, selector: "tui-doc-copy", providers: [TuiDestroyService], ngImport: i0, template: "<button\n    *ngIf=\"texts$ | async as texts\"\n    tuiButton\n    type=\"button\"\n    appearance=\"\"\n    size=\"s\"\n    class=\"t-copy\"\n    [title]=\"texts[0]\"\n    (click)=\"onClick()\"\n>\n    <span\n        class=\"t-content\"\n        [class.t-content_moved]=\"copied$ | async\"\n    >\n        <span\n            class=\"t-initial\"\n            [attr.data-text]=\"texts[0]\"\n        >\n            <ng-content></ng-content>\n        </span>\n        {{ texts[1] }}\n    </span>\n</button>\n", styles: [":host{position:relative;display:inline-block;vertical-align:middle}.t-copy{transition-property:background;transition-duration:.3s;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;width:100%;color:var(--tui-text-01);background:var(--tui-base-01);overflow:hidden}.t-copy:hover{background:var(--tui-base-02)}.t-initial{white-space:nowrap}.t-initial:empty:before{content:attr(data-text)}.t-content{transition-property:transform;transition-duration:.3s;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;display:flex;flex-direction:column;transform:translateY(1rem);text-align:center;line-height:2rem}.t-content_moved{transform:translateY(-1rem)}\n"], components: [{ type: i1.TuiButtonComponent, selector: "button[tuiButton], button[tuiIconButton], a[tuiButton], a[tuiIconButton]", inputs: ["appearance", "disabled", "icon", "iconRight", "shape", "showLoader", "size"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i4.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 __decorate([
     tuiPure
 ], TuiDocCopyComponent.prototype, "copied$", null);
-TuiDocCopyComponent = __decorate([
-    Component({
-        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],
-        styles: [":host{position:relative;display:inline-block;vertical-align:middle}.t-copy{transition-property:background;transition-duration:var(--tui-duration,300ms);transition-timing-function:ease-in-out;width:100%;color:var(--tui-text-01);background:var(--tui-base-01);overflow:hidden}.t-copy:hover{background:var(--tui-base-02)}.t-initial{white-space:nowrap}.t-initial:empty:before{content:attr(data-text)}.t-content{transition-property:transform;transition-duration:var(--tui-duration,300ms);transition-timing-function:ease-in-out;display:flex;flex-direction:column;transform:translateY(1rem);text-align:center;line-height:2rem}.t-content_moved{transform:translateY(-1rem)}"]
-    }),
-    __param(0, Inject(TUI_COPY_TEXTS))
-], TuiDocCopyComponent);
+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`],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    providers: [TuiDestroyService],
+                }]
+        }], ctorParameters: function () { return [{ type: i8.Observable, decorators: [{
+                    type: Inject,
+                    args: [TUI_COPY_TEXTS]
+                }] }]; }, propDecorators: { copied$: [] } });
 
-let TuiDocCopyModule = class TuiDocCopyModule {
-};
-TuiDocCopyModule = __decorate([
-    NgModule({
-        imports: [CommonModule, TuiButtonModule],
-        declarations: [TuiDocCopyComponent],
-        exports: [TuiDocCopyComponent],
-    })
-], TuiDocCopyModule);
+class TuiDocCopyModule {
+}
+TuiDocCopyModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiDocCopyModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+TuiDocCopyModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiDocCopyModule, declarations: [TuiDocCopyComponent], imports: [CommonModule, TuiButtonModule], exports: [TuiDocCopyComponent] });
+TuiDocCopyModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiDocCopyModule, imports: [[CommonModule, TuiButtonModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiDocCopyModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule, TuiButtonModule],
+                    declarations: [TuiDocCopyComponent],
+                    exports: [TuiDocCopyComponent],
+                }]
+        }] });
 
 /**
  * TODO: think about reorganization in @taiga-ui/i18n way
@@ -129,8 +164,8 @@ TuiDocCopyModule = __decorate([
  * Works with a tuple
  * [@string tuiMode tooltip content, @string word 'background', @string 'form value']
  */
-const TUI_DOC_DEMO_TEXTS = new InjectionToken('tui-doc-demo i18n texts', {
-    factory: () => ['Read more more about modes: ', 'Background', 'Form value'],
+const TUI_DOC_DEMO_TEXTS = new InjectionToken(`tui-doc-demo i18n texts`, {
+    factory: () => [`Read more more about modes: `, `Background`, `Form value`],
 });
 /**
  * Works with a tuple
@@ -142,13 +177,13 @@ const TUI_DOC_DEMO_TEXTS = new InjectionToken('tui-doc-demo i18n texts', {
  * @string message for tooltip about ng-polymorpheus
  * ]
  */
-const TUI_DOC_DOCUMENTATION_TEXTS = new InjectionToken('tui-doc-documentation i18n texts', {
+const TUI_DOC_DOCUMENTATION_TEXTS = new InjectionToken(`tui-doc-documentation i18n texts`, {
     factory: () => [
-        'Argument',
-        'Type',
-        'Name and description',
-        'Value',
-        'Learn about our dynamic templates from ',
+        `Argument`,
+        `Type`,
+        `Name and description`,
+        `Value`,
+        `Learn about our dynamic templates from `,
     ],
 });
 /**
@@ -159,26 +194,25 @@ const TUI_DOC_DOCUMENTATION_TEXTS = new InjectionToken('tui-doc-documentation i1
  * @string link to a sample copied message label
  * ]
  */
-const TUI_DOC_EXAMPLE_TEXTS = new InjectionToken('tui-doc-example i18n texts', {
-    factory: () => ['Preview', 'Link to a sample was successfully copied', 'Done'],
+const TUI_DOC_EXAMPLE_TEXTS = new InjectionToken(`tui-doc-example i18n texts`, {
+    factory: () => [`Preview`, `Link to a sample was successfully copied`, `Done`],
 });
-const TUI_DOC_MENU_TEXT = new InjectionToken('menu i18n text', {
-    factory: () => 'Menu',
+const TUI_DOC_MENU_TEXT = new InjectionToken(`menu i18n text`, {
+    factory: () => `Menu`,
 });
-const TUI_DOC_SEARCH_TEXT = new InjectionToken('search i18n text', {
-    factory: () => 'Search',
+const TUI_DOC_SEARCH_TEXT = new InjectionToken(`search i18n text`, {
+    factory: () => `Search`,
 });
-const TUI_DOC_SEE_ALSO_TEXT = new InjectionToken('tui-doc-see-also i18n text', {
-    factory: () => 'See also',
+const TUI_DOC_SEE_ALSO_TEXT = new InjectionToken(`tui-doc-see-also i18n text`, {
+    factory: () => `See also`,
 });
-const TUI_DOC_SOURCE_CODE_TEXT = new InjectionToken('tui-doc-source-code i18n text', {
-    factory: () => 'Source code',
+const TUI_DOC_SOURCE_CODE_TEXT = new InjectionToken(`tui-doc-source-code i18n text`, {
+    factory: () => `Source code`,
 });
 
-var TuiDocDemoComponent_1;
 const MIN_COMPONENT_WIDTH = 104;
 // @dynamic
-let TuiDocDemoComponent = TuiDocDemoComponent_1 = class TuiDocDemoComponent {
+class TuiDocDemoComponent {
     constructor(isMobile, destroy$, renderer, platformId, locationRef, urlSerializer, texts) {
         this.isMobile = isMobile;
         this.destroy$ = destroy$;
@@ -188,14 +222,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) {
@@ -226,9 +260,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();
@@ -261,64 +295,95 @@ 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`, tuiPx(Math.max(this.wrapperWidth - delta, MIN_COMPONENT_WIDTH)));
     }
-};
-TuiDocDemoComponent.ctorParameters = () => [
-    { type: Boolean, decorators: [{ type: Inject, args: [TUI_IS_MOBILE,] }] },
-    { type: TuiDestroyService, decorators: [{ type: Inject, args: [TuiDestroyService,] }] },
-    { type: Renderer2, decorators: [{ type: Inject, args: [Renderer2,] }] },
-    { type: undefined, decorators: [{ type: Inject, args: [PLATFORM_ID,] }] },
-    { type: Location$1, decorators: [{ type: Inject, args: [Location$1,] }] },
-    { type: UrlSerializer, decorators: [{ type: Inject, args: [UrlSerializer,] }] },
-    { type: Array, decorators: [{ type: Inject, args: [TUI_DOC_DEMO_TEXTS,] }] }
-];
-__decorate([
-    ViewChild('content')
-], TuiDocDemoComponent.prototype, "content", void 0);
-__decorate([
-    ViewChild('wrapper')
-], TuiDocDemoComponent.prototype, "wrapper", void 0);
-__decorate([
-    ViewChild('resizerText')
-], TuiDocDemoComponent.prototype, "resizerText", void 0);
-__decorate([
-    Input()
-], TuiDocDemoComponent.prototype, "control", void 0);
-__decorate([
-    ContentChild(TemplateRef)
-], TuiDocDemoComponent.prototype, "template", void 0);
-__decorate([
-    HostListener('window:resize')
-], TuiDocDemoComponent.prototype, "onResize", null);
-TuiDocDemoComponent = TuiDocDemoComponent_1 = __decorate([
-    Component({
-        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: [
-            TuiDestroyService,
-            {
-                provide: TuiModeDirective,
-                useExisting: forwardRef(() => TuiDocDemoComponent_1),
-            },
-        ],
-        styles: [":host{position:relative;display:block;min-width:100%;margin:1.5rem 0}.t-bg-toggle{position:absolute;bottom:calc(100% + .75rem);display:flex;align-items:center;justify-content:flex-end;pointer-events:none;width:100%}.t-bg-toggle>*{pointer-events:auto}.t-wrapper{box-shadow:0 .5rem 1rem rgba(0,0,0,.16);display:flex;border:1px solid var(--tui-base-03);border-radius:var(--tui-radius-m);max-width:100%;min-height:6rem;width:100%;background-color:var(--tui-base-01);overflow:hidden}.t-wrapper.t-wrapper_transparent{background-image:linear-gradient(45deg,var(--tui-base-02) 25%,transparent 25%),linear-gradient(-45deg,var(--tui-base-02) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--tui-base-02) 75%),linear-gradient(-45deg,transparent 75%,var(--tui-base-02) 75%);background-size:1.25rem 1.25rem;background-position:0 0,0 .625rem,.625rem -.625rem,-.625rem 0}.t-wrapper.t-wrapper_dark{background-color:#454e58;color:var(--tui-base-01)}.t-wrapper.t-wrapper_gray{background-color:#e5e7ea}.t-wrapper.t-wrapper_dark.t-wrapper_transparent{background-image:linear-gradient(45deg,var(--tui-focus) 25%,transparent 25%),linear-gradient(-45deg,var(--tui-focus) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--tui-focus) 75%),linear-gradient(-45deg,transparent 75%,var(--tui-focus) 75%)}.t-wrapper.t-wrapper_gray.t-wrapper_transparent{background-image:linear-gradient(45deg,var(--tui-base-05) 25%,transparent 25%),linear-gradient(-45deg,var(--tui-base-05) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--tui-base-05) 75%),linear-gradient(-45deg,transparent 75%,var(--tui-base-05) 75%)}:host-context(tui-root._mobile) .t-wrapper{min-height:auto}.t-content{flex:1 1 0;min-width:0;padding:1.5rem;box-sizing:border-box;overflow:hidden}:host-context(tui-root._mobile) .t-content{padding:1rem}.t-form{display:flex;flex-wrap:wrap;align-items:flex-start}.t-input-wrapper{width:100%;margin-bottom:.5rem}.t-expand{width:100%}.t-icon{transition-property:transform;transition-duration:var(--tui-duration,300ms);transition-timing-function:ease-in-out}.t-icon_rotated{transform:rotate(180deg)}.t-value{flex:1;background:var(--tui-clear-inverse);padding:.75rem;border-radius:.25rem}.t-mode{width:12.5rem}.t-select{max-width:15rem}.t-resizer{-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:0;border:0;background:0 0;font-size:inherit;line-height:inherit;box-shadow:0 .5rem 1rem rgba(0,0,0,.16);position:relative;width:3.5rem;min-height:inherit;flex-shrink:0;border-left:1px solid var(--tui-base-03);cursor:col-resize;outline:0;background:var(--tui-base-01);color:var(--tui-text-01)}.t-resizer:after,.t-resizer:before{content:'';position:absolute;top:.75rem;left:50%;bottom:.75rem;width:1px;background:var(--tui-base-05)}.t-resizer:before{transform:translateX(.125rem)}.t-resizer:after{transform:translateX(-.1875rem)}:host-context(tui-root._mobile) .t-resizer{display:none}.t-resizer-text{font:var(--tui-font-text-s);position:relative;z-index:1;padding:.75rem;background:var(--tui-base-01)}.wrapper_light .t-resizer-text{background:#3e464e}.t-checkbox,.t-group{margin-left:.75rem}.t-button,.t-form-controls{margin-top:.75rem}@supports ((position:-webkit-sticky) or (position:sticky)){@media screen and (min-height:37.5rem){:host{position:-webkit-sticky;position:sticky;top:4.625rem;z-index:2}}}"]
-    }),
-    __param(0, Inject(TUI_IS_MOBILE)),
-    __param(1, Inject(TuiDestroyService)),
-    __param(2, Inject(Renderer2)),
-    __param(3, Inject(PLATFORM_ID)),
-    __param(4, Inject(Location$1)),
-    __param(5, Inject(UrlSerializer)),
-    __param(6, Inject(TUI_DOC_DEMO_TEXTS))
-], TuiDocDemoComponent);
+}
+TuiDocDemoComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiDocDemoComponent, deps: [{ token: TUI_IS_MOBILE }, { token: TuiDestroyService }, { token: Renderer2 }, { token: PLATFORM_ID }, { token: Location$1 }, { token: UrlSerializer }, { token: TUI_DOC_DEMO_TEXTS }], target: i0.ɵɵFactoryTarget.Component });
+TuiDocDemoComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TuiDocDemoComponent, selector: "tui-doc-demo", inputs: { control: "control" }, host: { listeners: { "window:resize": "onResize()" } }, providers: [
+        TuiDestroyService,
+        {
+            provide: TuiModeDirective,
+            useExisting: forwardRef(() => TuiDocDemoComponent),
+        },
+    ], queries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true }], viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true }, { propertyName: "wrapper", first: true, predicate: ["wrapper"], descendants: true }, { propertyName: "resizerText", first: true, predicate: ["resizerText"], descendants: true }], ngImport: i0, 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", styles: [":host{position:relative;display:block;min-width:100%;margin:1.5rem 0}.t-bg-toggle{position:absolute;bottom:calc(100% + .75rem);display:flex;align-items:center;justify-content:flex-end;pointer-events:none;width:100%}.t-bg-toggle>*{pointer-events:auto}.t-wrapper{box-shadow:0 .5rem 1rem rgba(0,0,0,.16);display:flex;border:1px solid var(--tui-base-03);border-radius:var(--tui-radius-m);max-width:100%;min-height:6rem;width:100%;background-color:var(--tui-base-01);overflow:hidden}.t-wrapper.t-wrapper_transparent{background-image:linear-gradient(45deg,var(--tui-base-02) 25%,transparent 25%),linear-gradient(-45deg,var(--tui-base-02) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--tui-base-02) 75%),linear-gradient(-45deg,transparent 75%,var(--tui-base-02) 75%);background-size:1.25rem 1.25rem;background-position:0 0,0 .625rem,.625rem -.625rem,-.625rem 0}.t-wrapper.t-wrapper_dark{background-color:#454e58;color:var(--tui-base-01)}.t-wrapper.t-wrapper_gray{background-color:#e5e7ea}.t-wrapper.t-wrapper_dark.t-wrapper_transparent{background-image:linear-gradient(45deg,var(--tui-focus) 25%,transparent 25%),linear-gradient(-45deg,var(--tui-focus) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--tui-focus) 75%),linear-gradient(-45deg,transparent 75%,var(--tui-focus) 75%)}.t-wrapper.t-wrapper_gray.t-wrapper_transparent{background-image:linear-gradient(45deg,var(--tui-base-05) 25%,transparent 25%),linear-gradient(-45deg,var(--tui-base-05) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--tui-base-05) 75%),linear-gradient(-45deg,transparent 75%,var(--tui-base-05) 75%)}:host-context(tui-root._mobile) .t-wrapper{min-height:auto}.t-content{flex:1 1 0;min-width:0;padding:1.5rem;box-sizing:border-box;overflow:hidden}:host-context(tui-root._mobile) .t-content{padding:1rem}.t-form{display:flex;flex-wrap:wrap;align-items:flex-start}.t-input-wrapper{width:100%;margin-bottom:.5rem}.t-expand{width:100%}.t-icon{transition-property:transform;transition-duration:.3s;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out}.t-icon_rotated{transform:rotate(180deg)}.t-value{flex:1;background:var(--tui-clear-inverse);padding:.75rem;border-radius:.25rem}.t-mode{width:12.5rem}.t-select{max-width:15rem}.t-resizer{-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:0;border:0;background:none;font-size:inherit;line-height:inherit;box-shadow:0 .5rem 1rem rgba(0,0,0,.16);position:relative;width:3.5rem;min-height:inherit;flex-shrink:0;border-left:1px solid var(--tui-base-03);cursor:col-resize;outline:none;background:var(--tui-base-01);color:var(--tui-text-01)}.t-resizer:before,.t-resizer:after{content:\"\";position:absolute;top:.75rem;left:50%;bottom:.75rem;width:1px;background:var(--tui-base-05)}.t-resizer:before{transform:translate(.125rem)}.t-resizer:after{transform:translate(-.1875rem)}:host-context(tui-root._mobile) .t-resizer{display:none}.t-resizer-text{font:var(--tui-font-text-s);position:relative;z-index:1;padding:.75rem;background:var(--tui-base-01)}.wrapper_light .t-resizer-text{background:#3e464e}.t-group,.t-checkbox{margin-left:.75rem}.t-button,.t-form-controls{margin-top:.75rem}@supports ((position: -webkit-sticky) or (position: sticky)){@media screen and (min-height: 37.5rem){:host{position:-webkit-sticky;position:sticky;top:4.625rem;z-index:2}}}\n"], components: [{ type: i1.TuiLinkComponent, selector: "a[tuiLink], button[tuiLink]", inputs: ["pseudo", "icon", "iconAlign", "iconRotated", "mode"], exportAs: ["tuiLink"] }, { type: i2$1.TuiSelectComponent, selector: "tui-select", inputs: ["stringify", "identityMatcher", "valueContent"] }, { type: i2$1.TuiDataListWrapperComponent, selector: "tui-data-list-wrapper:not([labels])", inputs: ["items"] }, { type: i1.TuiTooltipComponent, selector: "tui-tooltip", inputs: ["content", "mode", "direction", "showDelay", "hideDelay", "describeId"] }, { type: i2$1.TuiRadioBlockComponent, selector: "tui-radio-block", inputs: ["item", "identityMatcher", "contentAlign", "size", "hideRadio", "pseudoDisabled"] }, { type: i2$1.TuiCheckboxLabeledComponent, selector: "tui-checkbox-labeled", inputs: ["size"] }, { type: i1.TuiButtonComponent, selector: "button[tuiButton], button[tuiIconButton], a[tuiButton], a[tuiIconButton]", inputs: ["appearance", "disabled", "icon", "iconRight", "shape", "showLoader", "size"] }, { type: i1.TuiSvgComponent, selector: "tui-svg", inputs: ["src"] }, { type: i1.TuiExpandComponent, selector: "tui-expand", inputs: ["async", "expanded"] }], directives: [{ type: i1.TuiModeDirective, selector: "[tuiMode]", inputs: ["tuiMode"] }, { type: i5.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["routerLink", "target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.TuiSelectDirective, selector: "tui-select" }, { type: i1.TuiTextfieldSizeDirective, selector: "[tuiTextfieldSize]", inputs: ["tuiTextfieldSize"] }, { type: i1.TuiTextfieldCleanerDirective, selector: "[tuiTextfieldCleaner]", inputs: ["tuiTextfieldCleaner"] }, { type: i1.TuiHintControllerDirective, selector: "[tuiHintContent]", inputs: ["tuiHintContent", "tuiHintDirection", "tuiHintMode", "tuiHintShowDelay", "tuiHintHideDelay"] }, { type: i5$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5$1.FormControlDirective, selector: "[formControl]", inputs: ["disabled", "formControl", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i1.TuiDataListDirective, selector: "ng-template[tuiDataList]" }, { type: i1.TuiGroupDirective, selector: "[tuiGroup]:not(ng-container)", inputs: ["orientation", "adaptive", "collapsed", "rounded", "size"] }, { type: i5$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i5$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i5$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i5$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i1.TuiExpandContentDirective, selector: "[tuiExpandContent]" }, { type: i3.TuiDragDirective, selector: "[tuiDragStart], [tuiDragContinues], [tuiDragEnd]", outputs: ["tuiDragStart", "tuiDragContinues", "tuiDragEnd"] }], pipes: { "json": i4.JsonPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+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`],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    providers: [
+                        TuiDestroyService,
+                        {
+                            provide: TuiModeDirective,
+                            useExisting: forwardRef(() => TuiDocDemoComponent),
+                        },
+                    ],
+                }]
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [TUI_IS_MOBILE]
+                }] }, { type: i3.TuiDestroyService, decorators: [{
+                    type: Inject,
+                    args: [TuiDestroyService]
+                }] }, { type: i0.Renderer2, decorators: [{
+                    type: Inject,
+                    args: [Renderer2]
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [PLATFORM_ID]
+                }] }, { type: i4.Location, decorators: [{
+                    type: Inject,
+                    args: [Location$1]
+                }] }, { type: i5.UrlSerializer, decorators: [{
+                    type: Inject,
+                    args: [UrlSerializer]
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [TUI_DOC_DEMO_TEXTS]
+                }] }]; }, propDecorators: { content: [{
+                type: ViewChild,
+                args: [`content`]
+            }], wrapper: [{
+                type: ViewChild,
+                args: [`wrapper`]
+            }], resizerText: [{
+                type: ViewChild,
+                args: [`resizerText`]
+            }], control: [{
+                type: Input
+            }], template: [{
+                type: ContentChild,
+                args: [TemplateRef]
+            }], onResize: [{
+                type: HostListener,
+                args: [`window:resize`]
+            }] } });
 
-let TuiDocDemoModule = class TuiDocDemoModule {
-};
-TuiDocDemoModule = __decorate([
-    NgModule({
-        imports: [
+class TuiDocDemoModule {
+}
+TuiDocDemoModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiDocDemoModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+TuiDocDemoModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiDocDemoModule, declarations: [TuiDocDemoComponent], imports: [CommonModule,
+        ReactiveFormsModule,
+        FormsModule,
+        RouterModule,
+        TuiLinkModule,
+        TuiDragModule,
+        TuiButtonModule,
+        TuiSelectModule,
+        TuiExpandModule,
+        TuiGroupModule,
+        TuiTooltipModule,
+        TuiModeModule,
+        TuiRadioBlockModule,
+        TuiCheckboxLabeledModule,
+        TuiSvgModule,
+        TuiDataListWrapperModule,
+        TuiDataListModule,
+        TuiTextfieldControllerModule,
+        TuiHintControllerModule], exports: [TuiDocDemoComponent] });
+TuiDocDemoModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiDocDemoModule, imports: [[
             CommonModule,
             ReactiveFormsModule,
             FormsModule,
@@ -338,11 +403,35 @@ TuiDocDemoModule = __decorate([
             TuiDataListModule,
             TuiTextfieldControllerModule,
             TuiHintControllerModule,
-        ],
-        declarations: [TuiDocDemoComponent],
-        exports: [TuiDocDemoComponent],
-    })
-], TuiDocDemoModule);
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiDocDemoModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        ReactiveFormsModule,
+                        FormsModule,
+                        RouterModule,
+                        TuiLinkModule,
+                        TuiDragModule,
+                        TuiButtonModule,
+                        TuiSelectModule,
+                        TuiExpandModule,
+                        TuiGroupModule,
+                        TuiTooltipModule,
+                        TuiModeModule,
+                        TuiRadioBlockModule,
+                        TuiCheckboxLabeledModule,
+                        TuiSvgModule,
+                        TuiDataListWrapperModule,
+                        TuiDataListModule,
+                        TuiTextfieldControllerModule,
+                        TuiHintControllerModule,
+                    ],
+                    declarations: [TuiDocDemoComponent],
+                    exports: [TuiDocDemoComponent],
+                }]
+        }] });
 
 /**
  * TODO: duplicate, need fix it before v3
@@ -351,7 +440,7 @@ TuiDocDemoModule = __decorate([
  */
 // eslint-disable-next-line @typescript-eslint/naming-convention
 function rgbToHex(r, g, b) {
-    return `#${[r, g, b].map(x => x.toString(16).padStart(2, '0')).join('')}`;
+    return `#${[r, g, b].map(x => x.toString(16).padStart(2, `0`)).join(``)}`;
 }
 const tuiRgbToHex = rgbToHex;
 /**
@@ -360,10 +449,10 @@ const tuiRgbToHex = rgbToHex;
 // eslint-disable-next-line @typescript-eslint/naming-convention
 function hexToRgb(hex) {
     const matches = hex
-        .replace('#', '')
-        .split('')
+        .replace(`#`, ``)
+        .split(``)
         .map((char, _, array) => (array.length === 3 ? char + char : char))
-        .join('')
+        .join(``)
         .match(/.{2}/g);
     return matches
         ? matches.map(x => Number.parseInt(x, 16))
@@ -373,18 +462,18 @@ const tuiHexToRgb = hexToRgb;
 
 function inspectArray(array, depth) {
     if (depth === 0) {
-        return '[…]';
+        return `[…]`;
     }
-    let result = '';
+    let result = ``;
     let first = true;
     for (let index = 0; index < array.length; index++) {
         if (first) {
             first = false;
         }
         else {
-            result += ', ';
+            result += `, `;
         }
-        result += index in array ? inspectAny(array[index], depth - 1) : 'empty';
+        result += index in array ? inspectAny(array[index], depth - 1) : `empty`;
     }
     return `[${result}]`;
 }
@@ -392,7 +481,7 @@ function inspectObject(object, depth) {
     if (depth === 0) {
         return `{…}`;
     }
-    let result = '';
+    let result = ``;
     let first = true;
     for (const key in object) {
         if (!object.hasOwnProperty(key)) {
@@ -402,7 +491,7 @@ function inspectObject(object, depth) {
             first = false;
         }
         else {
-            result += ', ';
+            result += `, `;
         }
         result += `${key}: ${inspectAny(object[key], depth - 1)}`;
     }
@@ -418,15 +507,15 @@ function inspectObject(object, depth) {
 // eslint-disable-next-line @typescript-eslint/naming-convention
 function inspectAny(data, depth) {
     if (data === null) {
-        return 'null';
+        return `null`;
     }
     switch (typeof data) {
-        case 'string':
+        case `string`:
             return `'${data}'`;
-        case 'undefined':
-        case 'number':
-        case 'boolean':
-        case 'function':
+        case `undefined`:
+        case `number`:
+        case `boolean`:
+        case `function`:
             return String(data);
     }
     if (data instanceof RegExp) {
@@ -449,7 +538,7 @@ function coerceValue(value) {
         return null;
     }
     else if (isBooleanParamValue(prepared)) {
-        return String(prepared) === 'true';
+        return String(prepared) === `true`;
     }
     else if (isNumberParamValue(prepared)) {
         return Number(prepared);
@@ -466,10 +555,10 @@ function coerceValue(value) {
 }
 const tuiCoerceValue = coerceValue;
 function isEmptyParamValue(value) {
-    return ['undefined', 'null', 'NaN', 'Infinity'].includes(value);
+    return [`undefined`, `null`, `NaN`, `Infinity`].includes(value);
 }
 function isBooleanParamValue(value) {
-    return value === 'true' || value === 'false';
+    return value === `true` || value === `false`;
 }
 function isNumberParamValue(value) {
     // TODO: investigate to disallow potentially catastrophic exponential-time regular expressions.
@@ -477,23 +566,23 @@ function isNumberParamValue(value) {
     return /^-?[\d.]+(?:e-?\d+)?$/.test(value);
 }
 function isPossibleArray(value) {
-    return value.startsWith('[') && value.endsWith(']');
+    return value.startsWith(`[`) && value.endsWith(`]`);
 }
 function isPossibleObject(value) {
-    return value.startsWith('{') && value.endsWith('}');
+    return value.startsWith(`{`) && value.endsWith(`}`);
 }
 
-const SERIALIZED_SUFFIX = '$';
+const SERIALIZED_SUFFIX = `$`;
 // @bad TODO: refactor output and value sync
-let TuiDocDocumentationPropertyConnectorDirective = class TuiDocDocumentationPropertyConnectorDirective {
+class TuiDocDocumentationPropertyConnectorDirective {
     constructor(template, locationRef, activatedRoute, urlSerializer) {
         this.template = template;
         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();
@@ -505,11 +594,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;
@@ -519,7 +608,7 @@ let TuiDocDocumentationPropertyConnectorDirective = class TuiDocDocumentationPro
         return !!this.documentationPropertyValues;
     }
     get shouldShowValues() {
-        return this.documentationPropertyMode !== 'output';
+        return this.documentationPropertyMode !== `output`;
     }
     ngOnChanges() {
         this.changed$.next();
@@ -551,58 +640,85 @@ 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));
     }
-};
-TuiDocDocumentationPropertyConnectorDirective.ctorParameters = () => [
-    { type: TemplateRef, decorators: [{ type: Inject, args: [TemplateRef,] }] },
-    { type: Location$1, decorators: [{ type: Inject, args: [Location$1,] }] },
-    { type: ActivatedRoute, decorators: [{ type: Inject, args: [ActivatedRoute,] }] },
-    { type: UrlSerializer, decorators: [{ type: Inject, args: [UrlSerializer,] }] }
-];
-__decorate([
-    Input()
-], TuiDocDocumentationPropertyConnectorDirective.prototype, "documentationPropertyName", void 0);
-__decorate([
-    Input()
-], TuiDocDocumentationPropertyConnectorDirective.prototype, "documentationPropertyMode", void 0);
-__decorate([
-    Input()
-], TuiDocDocumentationPropertyConnectorDirective.prototype, "documentationPropertyType", void 0);
-__decorate([
-    Input()
-], TuiDocDocumentationPropertyConnectorDirective.prototype, "documentationPropertyValue", void 0);
-__decorate([
-    Input()
-], TuiDocDocumentationPropertyConnectorDirective.prototype, "documentationPropertyDeprecated", void 0);
-__decorate([
-    Input()
-], TuiDocDocumentationPropertyConnectorDirective.prototype, "documentationPropertyValues", void 0);
-__decorate([
-    Output()
-], TuiDocDocumentationPropertyConnectorDirective.prototype, "documentationPropertyValueChange", void 0);
-TuiDocDocumentationPropertyConnectorDirective = __decorate([
-    Directive({
-        selector: 'ng-template[documentationPropertyName]',
-        exportAs: 'documentationProperty',
-    }),
-    __param(0, Inject(TemplateRef)),
-    __param(1, Inject(Location$1)),
-    __param(2, Inject(ActivatedRoute)),
-    __param(3, Inject(UrlSerializer))
-], TuiDocDocumentationPropertyConnectorDirective);
+}
+TuiDocDocumentationPropertyConnectorDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiDocDocumentationPropertyConnectorDirective, deps: [{ token: TemplateRef }, { token: Location$1 }, { token: ActivatedRoute }, { token: UrlSerializer }], target: i0.ɵɵFactoryTarget.Directive });
+TuiDocDocumentationPropertyConnectorDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: TuiDocDocumentationPropertyConnectorDirective, selector: "ng-template[documentationPropertyName]", inputs: { documentationPropertyName: "documentationPropertyName", documentationPropertyMode: "documentationPropertyMode", documentationPropertyType: "documentationPropertyType", documentationPropertyValue: "documentationPropertyValue", documentationPropertyDeprecated: "documentationPropertyDeprecated", documentationPropertyValues: "documentationPropertyValues" }, outputs: { documentationPropertyValueChange: "documentationPropertyValueChange" }, exportAs: ["documentationProperty"], usesOnChanges: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiDocDocumentationPropertyConnectorDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: `ng-template[documentationPropertyName]`,
+                    exportAs: `documentationProperty`,
+                }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef, decorators: [{
+                    type: Inject,
+                    args: [TemplateRef]
+                }] }, { type: i4.Location, decorators: [{
+                    type: Inject,
+                    args: [Location$1]
+                }] }, { type: i5.ActivatedRoute, decorators: [{
+                    type: Inject,
+                    args: [ActivatedRoute]
+                }] }, { type: i5.UrlSerializer, decorators: [{
+                    type: Inject,
+                    args: [UrlSerializer]
+                }] }]; }, propDecorators: { documentationPropertyName: [{
+                type: Input
+            }], documentationPropertyMode: [{
+                type: Input
+            }], documentationPropertyType: [{
+                type: Input
+            }], documentationPropertyValue: [{
+                type: Input
+            }], documentationPropertyDeprecated: [{
+                type: Input
+            }], documentationPropertyValues: [{
+                type: Input
+            }], documentationPropertyValueChange: [{
+                type: Output
+            }] } });
+
+class TuiInputOpacityDirective {
+    constructor(renderer, tuiFocusableComponent) {
+        this.renderer = renderer;
+        this.tuiFocusableComponent = tuiFocusableComponent;
+    }
+    set tuiInputOpacity(opacity) {
+        const { nativeFocusableElement } = this.tuiFocusableComponent;
+        if (nativeFocusableElement) {
+            this.renderer.setStyle(nativeFocusableElement, `opacity`, opacity / 100);
+        }
+    }
+}
+TuiInputOpacityDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiInputOpacityDirective, deps: [{ token: Renderer2 }, { token: TUI_FOCUSABLE_ITEM_ACCESSOR }], target: i0.ɵɵFactoryTarget.Directive });
+TuiInputOpacityDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: TuiInputOpacityDirective, selector: "[tuiInputOpacity]", inputs: { tuiInputOpacity: "tuiInputOpacity" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiInputOpacityDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: `[tuiInputOpacity]`,
+                }]
+        }], ctorParameters: function () { return [{ type: i0.Renderer2, decorators: [{
+                    type: Inject,
+                    args: [Renderer2]
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [TUI_FOCUSABLE_ITEM_ACCESSOR]
+                }] }]; }, propDecorators: { tuiInputOpacity: [{
+                type: Input
+            }] } });
 
 // @bad TODO subscribe propertiesConnectors changes
 // @bad TODO refactor to make more flexible
 // @dynamic
-let TuiDocDocumentationComponent = class 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;
@@ -619,149 +735,150 @@ 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 tuiIsString(value) || tuiIsNumber(value);
     }
     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);
     }
-};
-TuiDocDocumentationComponent.ctorParameters = () => [
-    { type: ChangeDetectorRef, decorators: [{ type: Inject, args: [ChangeDetectorRef,] }] },
-    { type: Array, decorators: [{ type: Inject, args: [TUI_DOC_DOCUMENTATION_TEXTS,] }] }
-];
-__decorate([
-    Input()
-], TuiDocDocumentationComponent.prototype, "heading", void 0);
-__decorate([
-    Input()
-], TuiDocDocumentationComponent.prototype, "showValues", void 0);
-__decorate([
-    Input()
-], TuiDocDocumentationComponent.prototype, "isAPI", void 0);
-__decorate([
-    ContentChildren(TuiDocDocumentationPropertyConnectorDirective)
-], TuiDocDocumentationComponent.prototype, "propertiesConnectors", void 0);
-TuiDocDocumentationComponent = __decorate([
-    Component({
-        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')]),
-            ]),
-        ],
-        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)}"]
-    }),
-    __param(0, Inject(ChangeDetectorRef)),
-    __param(1, Inject(TUI_DOC_DOCUMENTATION_TEXTS))
-], TuiDocDocumentationComponent);
-
-let TuiInputOpacityDirective = class TuiInputOpacityDirective {
-    constructor(renderer, tuiFocusableComponent) {
-        this.renderer = renderer;
-        this.tuiFocusableComponent = tuiFocusableComponent;
-    }
-    set tuiInputOpacity(opacity) {
-        const { nativeFocusableElement } = this.tuiFocusableComponent;
-        if (nativeFocusableElement) {
-            this.renderer.setStyle(nativeFocusableElement, 'opacity', opacity / 100);
-        }
-    }
-};
-TuiInputOpacityDirective.ctorParameters = () => [
-    { type: Renderer2, decorators: [{ type: Inject, args: [Renderer2,] }] },
-    { type: undefined, decorators: [{ type: Inject, args: [TUI_FOCUSABLE_ITEM_ACCESSOR,] }] }
-];
-__decorate([
-    Input()
-], TuiInputOpacityDirective.prototype, "tuiInputOpacity", null);
-TuiInputOpacityDirective = __decorate([
-    Directive({
-        selector: '[tuiInputOpacity]',
-    }),
-    __param(0, Inject(Renderer2)),
-    __param(1, Inject(TUI_FOCUSABLE_ITEM_ACCESSOR))
-], TuiInputOpacityDirective);
+}
+TuiDocDocumentationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiDocDocumentationComponent, deps: [{ token: ChangeDetectorRef }, { token: TUI_DOC_DOCUMENTATION_TEXTS }], 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" }, 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-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", 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:normal;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)}\n"], components: [{ type: i2$1.TuiBadgeComponent, selector: "tui-badge", inputs: ["value", "size", "status", "hoverable"] }, { type: i1.TuiTooltipComponent, selector: "tui-tooltip", inputs: ["content", "mode", "direction", "showDelay", "hideDelay", "describeId"] }, { type: i1.TuiLinkComponent, selector: "a[tuiLink], button[tuiLink]", inputs: ["pseudo", "icon", "iconAlign", "iconRotated", "mode"], exportAs: ["tuiLink"] }, { type: i2$1.TuiSelectComponent, selector: "tui-select", inputs: ["stringify", "identityMatcher", "valueContent"] }, { type: i2$1.TuiDataListWrapperComponent, selector: "tui-data-list-wrapper:not([labels])", inputs: ["items"] }, { type: i2$1.TuiToggleComponent, selector: "tui-toggle", inputs: ["singleColor", "showIcons", "showLoader", "size"] }, { type: i1.TuiPrimitiveTextfieldComponent, selector: "tui-primitive-textfield", inputs: ["editable", "filler", "iconCleaner", "readOnly", "invalid", "disabled", "prefix", "postfix", "value"], outputs: ["valueChange"] }, { type: i2$1.TuiInputCountComponent, selector: "tui-input-count", inputs: ["step", "min", "max", "hideButtons", "prefix", "postfix"] }, { type: i1.TuiNotificationComponent, selector: "tui-notification", inputs: ["hasIcon", "status"], outputs: ["close"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i1.TuiModeDirective, selector: "[tuiMode]", inputs: ["tuiMode"] }, { type: i2$1.TuiSelectDirective, selector: "tui-select" }, { type: i1.TuiTextfieldSizeDirective, selector: "[tuiTextfieldSize]", inputs: ["tuiTextfieldSize"] }, { type: i1.TuiDropdownControllerDirective, selector: "[tuiDropdownAlign], [tuiDropdownDirection], [tuiDropdownLimitWidth], [tuiDropdownMinHeight], [tuiDropdownMaxHeight], [tuiDropdownSided]", inputs: ["tuiDropdownAlign", "tuiDropdownDirection", "tuiDropdownLimitWidth", "tuiDropdownMinHeight", "tuiDropdownMaxHeight", "tuiDropdownSided"] }, { type: i1.TuiTextfieldCleanerDirective, selector: "[tuiTextfieldCleaner]", inputs: ["tuiTextfieldCleaner"] }, { type: i1.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: i1.TuiDataListDirective, selector: "ng-template[tuiDataList]" }, { type: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i1.TuiPrimitiveTextfieldDirective, selector: "tui-primitive-textfield" }, { type: i1.TuiGroupDirective, selector: "[tuiGroup]:not(ng-container)", inputs: ["orientation", "adaptive", "collapsed", "rounded", "size"] }, { type: i1.TuiTextfieldTypeDirective, selector: "[tuiTextfieldType]", inputs: ["tuiTextfieldType"] }, { type: TuiInputOpacityDirective, selector: "[tuiInputOpacity]", inputs: ["tuiInputOpacity"] }, { type: i2$1.TuiInputCountDirective, selector: "tui-input-count" }], pipes: { "async": i4.AsyncPipe }, animations: [
+        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`],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    animations: [
+                        trigger(`emitEvent`, [
+                            transition(`:increment`, [style({ opacity: 1 }), animate(`500ms ease-in`)]),
+                        ]),
+                    ],
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef, decorators: [{
+                    type: Inject,
+                    args: [ChangeDetectorRef]
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [TUI_DOC_DOCUMENTATION_TEXTS]
+                }] }]; }, propDecorators: { heading: [{
+                type: Input
+            }], showValues: [{
+                type: Input
+            }], isAPI: [{
+                type: Input
+            }], propertiesConnectors: [{
+                type: ContentChildren,
+                args: [TuiDocDocumentationPropertyConnectorDirective]
+            }] } });
 
-let TuiInputOpacityModule = class TuiInputOpacityModule {
-};
-TuiInputOpacityModule = __decorate([
-    NgModule({
-        declarations: [TuiInputOpacityDirective],
-        exports: [TuiInputOpacityDirective],
-    })
-], TuiInputOpacityModule);
+class TuiInputOpacityModule {
+}
+TuiInputOpacityModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiInputOpacityModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+TuiInputOpacityModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiInputOpacityModule, declarations: [TuiInputOpacityDirective], exports: [TuiInputOpacityDirective] });
+TuiInputOpacityModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiInputOpacityModule });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiInputOpacityModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [TuiInputOpacityDirective],
+                    exports: [TuiInputOpacityDirective],
+                }]
+        }] });
 
-let TuiDocDocumentationModule = class TuiDocDocumentationModule {
-};
-TuiDocDocumentationModule = __decorate([
-    NgModule({
-        imports: [
+class TuiDocDocumentationModule {
+}
+TuiDocDocumentationModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiDocDocumentationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+TuiDocDocumentationModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiDocDocumentationModule, declarations: [TuiDocDocumentationComponent,
+        TuiDocDocumentationPropertyConnectorDirective], imports: [CommonModule,
+        FormsModule,
+        RouterModule,
+        TuiBadgeModule,
+        TuiSelectModule,
+        TuiToggleModule,
+        TuiTooltipModule,
+        TuiLinkModule,
+        TuiInputCountModule,
+        TuiModeModule,
+        TuiGroupModule,
+        TuiInputOpacityModule,
+        TuiPrimitiveTextfieldModule,
+        TuiTextfieldControllerModule,
+        TuiHintControllerModule,
+        TuiDropdownControllerModule,
+        TuiDataListModule,
+        TuiDataListWrapperModule,
+        TuiNotificationModule], exports: [TuiDocDocumentationComponent,
+        TuiDocDocumentationPropertyConnectorDirective] });
+TuiDocDocumentationModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiDocDocumentationModule, imports: [[
             CommonModule,
             FormsModule,
             RouterModule,
@@ -781,25 +898,49 @@ TuiDocDocumentationModule = __decorate([
             TuiDataListModule,
             TuiDataListWrapperModule,
             TuiNotificationModule,
-        ],
-        declarations: [
-            TuiDocDocumentationComponent,
-            TuiDocDocumentationPropertyConnectorDirective,
-        ],
-        exports: [
-            TuiDocDocumentationComponent,
-            TuiDocDocumentationPropertyConnectorDirective,
-        ],
-    })
-], TuiDocDocumentationModule);
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiDocDocumentationModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                        RouterModule,
+                        TuiBadgeModule,
+                        TuiSelectModule,
+                        TuiToggleModule,
+                        TuiTooltipModule,
+                        TuiLinkModule,
+                        TuiInputCountModule,
+                        TuiModeModule,
+                        TuiGroupModule,
+                        TuiInputOpacityModule,
+                        TuiPrimitiveTextfieldModule,
+                        TuiTextfieldControllerModule,
+                        TuiHintControllerModule,
+                        TuiDropdownControllerModule,
+                        TuiDataListModule,
+                        TuiDataListWrapperModule,
+                        TuiNotificationModule,
+                    ],
+                    declarations: [
+                        TuiDocDocumentationComponent,
+                        TuiDocDocumentationPropertyConnectorDirective,
+                    ],
+                    exports: [
+                        TuiDocDocumentationComponent,
+                        TuiDocDocumentationPropertyConnectorDirective,
+                    ],
+                }]
+        }] });
 
-const TUI_DOC_CODE_ACTIONS = new InjectionToken('Code actions for the opened tab with code example', {
-    factory: () => '',
+const TUI_DOC_CODE_ACTIONS = new InjectionToken(`Code actions for the opened tab with code example`, {
+    factory: () => ``,
 });
 
-const TUI_DOC_CODE_EDITOR = new InjectionToken('Contains service for opening online IDE e.g. Stackblitz');
+const TUI_DOC_CODE_EDITOR = new InjectionToken(`Contains service for opening online IDE e.g. Stackblitz`);
 
-const TUI_DOC_EXAMPLE_CONTENT_PROCESSOR = new InjectionToken('Processes content in example', { factory: () => identity });
+const TUI_DOC_EXAMPLE_CONTENT_PROCESSOR = new InjectionToken(`Processes content in example`, { factory: () => identity });
 
 /**
  * @deprecated: use {@link tuiRawLoadRecord} instead
@@ -818,13 +959,37 @@ function rawLoadRecord(example) {
 }
 const tuiRawLoadRecord = rawLoadRecord;
 
+class TuiDocExampleCapitalizePipe {
+    transform(content) {
+        return tuiIsString(content) ? tuiCapitalizeFirstLetter(content) : content;
+    }
+}
+TuiDocExampleCapitalizePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiDocExampleCapitalizePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+TuiDocExampleCapitalizePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiDocExampleCapitalizePipe, name: "tuiDocExampleCapitalize" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiDocExampleCapitalizePipe, decorators: [{
+            type: Pipe,
+            args: [{ name: `tuiDocExampleCapitalize` }]
+        }] });
+
+class TuiDocExampleGetTabsPipe {
+    transform(content, defaultTab) {
+        return [defaultTab, ...Object.keys(content)];
+    }
+}
+TuiDocExampleGetTabsPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiDocExampleGetTabsPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+TuiDocExampleGetTabsPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiDocExampleGetTabsPipe, name: "tuiDocExampleGetTabs" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiDocExampleGetTabsPipe, decorators: [{
+            type: Pipe,
+            args: [{ name: `tuiDocExampleGetTabs` }]
+        }] });
+
 // Ambient type cannot be used without dynamic https://github.com/angular/angular/issues/23395
 // @dynamic
-let TuiDocExampleComponent = class TuiDocExampleComponent {
-    constructor(id, clipboard, notifications, location, copyTexts$, texts, codeEditor, processContent, isCypress, codeActions) {
+class TuiDocExampleComponent {
+    constructor(id, clipboard, alertService, location, copyTexts$, texts, codeEditor, processContent, isCypress, codeActions, router, route, ngLocation) {
         this.id = id;
         this.clipboard = clipboard;
-        this.notifications = notifications;
+        this.alertService = alertService;
         this.location = location;
         this.copyTexts$ = copyTexts$;
         this.texts = texts;
@@ -832,9 +997,12 @@ let TuiDocExampleComponent = class TuiDocExampleComponent {
         this.processContent = processContent;
         this.isCypress = isCypress;
         this.codeActions = codeActions;
+        this.router = router;
+        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];
@@ -847,92 +1015,108 @@ 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;
         const url = `${currentUrl}#${this.id}`;
+        this.setFragmentWithoutRedirect(this.id);
         this.clipboard.copy(url);
-        this.notifications
-            .show(this.texts[1], {
+        this.alertService
+            .open(this.texts[1], {
             label: this.texts[2],
             status: "success" /* Success */,
         })
             .subscribe();
     }
     edit(files) {
-        var _a, _b;
+        var _a;
         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));
-    }
-};
-TuiDocExampleComponent.ctorParameters = () => [
-    { 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,] }] },
-    { type: Observable, decorators: [{ type: Inject, args: [TUI_COPY_TEXTS,] }] },
-    { type: Array, decorators: [{ type: Inject, args: [TUI_DOC_EXAMPLE_TEXTS,] }] },
-    { type: undefined, decorators: [{ type: Optional }, { type: Inject, args: [TUI_DOC_CODE_EDITOR,] }] },
-    { type: undefined, decorators: [{ type: Inject, args: [TUI_DOC_EXAMPLE_CONTENT_PROCESSOR,] }] },
-    { type: Boolean, decorators: [{ type: Inject, args: [TUI_IS_CYPRESS,] }] },
-    { type: Array, decorators: [{ type: Inject, args: [TUI_DOC_CODE_ACTIONS,] }] }
-];
-__decorate([
-    Input()
-], TuiDocExampleComponent.prototype, "heading", void 0);
-__decorate([
-    Input()
-], TuiDocExampleComponent.prototype, "description", void 0);
-__decorate([
-    Input()
-], TuiDocExampleComponent.prototype, "content", null);
-__decorate([
-    Input()
-], TuiDocExampleComponent.prototype, "componentName", void 0);
-TuiDocExampleComponent = __decorate([
-    Component({
-        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(1, Inject(Clipboard)),
-    __param(2, Inject(TuiNotificationsService)),
-    __param(3, Inject(LOCATION)),
-    __param(4, Inject(TUI_COPY_TEXTS)),
-    __param(5, Inject(TUI_DOC_EXAMPLE_TEXTS)),
-    __param(6, Optional()),
-    __param(6, Inject(TUI_DOC_CODE_EDITOR)),
-    __param(7, Inject(TUI_DOC_EXAMPLE_CONTENT_PROCESSOR)),
-    __param(8, Inject(TUI_IS_CYPRESS)),
-    __param(9, Inject(TUI_DOC_CODE_ACTIONS))
-], TuiDocExampleComponent);
-
-let TuiDocExampleCapitalizePipe = class TuiDocExampleCapitalizePipe {
-    transform(content) {
-        return typeof content === 'string' ? capitalizeFirstLetter(content) : content;
+        (_a = this.codeEditor) === null || _a === void 0 ? void 0 : _a.edit(this.componentName, this.id || ``, files).finally(() => this.loading$.next(false));
     }
-};
-TuiDocExampleCapitalizePipe = __decorate([
-    Pipe({ name: 'tuiDocExampleCapitalize' })
-], TuiDocExampleCapitalizePipe);
-
-let TuiDocExampleGetTabsPipe = class TuiDocExampleGetTabsPipe {
-    transform(content, defaultTab) {
-        return [defaultTab, ...Object.keys(content)];
+    setFragmentWithoutRedirect(id) {
+        const url = this.router
+            .createUrlTree([], { relativeTo: this.route, fragment: id || `` })
+            .toString();
+        this.ngLocation.go(url);
     }
-};
-TuiDocExampleGetTabsPipe = __decorate([
-    Pipe({ name: 'tuiDocExampleGetTabs' })
-], TuiDocExampleGetTabsPipe);
+}
+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=\"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            <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: i1.TuiButtonComponent, selector: "button[tuiButton], button[tuiIconButton], a[tuiButton], a[tuiIconButton]", inputs: ["appearance", "disabled", "icon", "iconRight", "shape", "showLoader", "size"] }, { type: i2$1.TuiTabsWithMoreComponent, selector: "tui-tabs-with-more, nav[tuiTabsWithMore]", inputs: ["moreContent", "dropdownContent", "underline", "activeItemIndex", "itemsLimit"], outputs: ["activeItemIndexChange"] }, { type: i2$1.TuiTabComponent, selector: "a[tuiTab]:not([routerLink]), a[tuiTab][routerLink][routerLinkActive], button[tuiTab]" }, { type: TuiDocCopyComponent, selector: "tui-doc-copy" }, { type: TuiDocCodeComponent, selector: "tui-doc-code", inputs: ["filename", "code"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.PolymorpheusOutletDirective, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.TuiItemDirective, selector: "[tuiItem]" }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i8$1.CdkCopyToClipboard, selector: "[cdkCopyToClipboard]", inputs: ["cdkCopyToClipboard", "cdkCopyToClipboardAttempts"], outputs: ["cdkCopyToClipboardCopied"] }], pipes: { "tuiDocExampleCapitalize": TuiDocExampleCapitalizePipe, "async": i4.AsyncPipe, "tuiDocExampleGetTabs": TuiDocExampleGetTabsPipe }, 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`],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Attribute,
+                    args: [`id`]
+                }] }, { type: i8$1.Clipboard, decorators: [{
+                    type: Inject,
+                    args: [Clipboard]
+                }] }, { type: i1.TuiAlertService, decorators: [{
+                    type: Inject,
+                    args: [TuiAlertService]
+                }] }, { type: Location, decorators: [{
+                    type: Inject,
+                    args: [LOCATION]
+                }] }, { type: i8.Observable, decorators: [{
+                    type: Inject,
+                    args: [TUI_COPY_TEXTS]
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [TUI_DOC_EXAMPLE_TEXTS]
+                }] }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [TUI_DOC_CODE_EDITOR]
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [TUI_DOC_EXAMPLE_CONTENT_PROCESSOR]
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [TUI_IS_CYPRESS]
+                }] }, { type: Array, decorators: [{
+                    type: Inject,
+                    args: [TUI_DOC_CODE_ACTIONS]
+                }] }, { type: i5.Router, decorators: [{
+                    type: Inject,
+                    args: [Router]
+                }] }, { type: i5.ActivatedRoute, decorators: [{
+                    type: Inject,
+                    args: [ActivatedRoute]
+                }] }, { type: i4.Location, decorators: [{
+                    type: Inject,
+                    args: [Location$1]
+                }] }]; }, propDecorators: { heading: [{
+                type: Input
+            }], description: [{
+                type: Input
+            }], content: [{
+                type: Input
+            }], componentName: [{
+                type: Input
+            }] } });
 
-let TuiDocExampleModule = class TuiDocExampleModule {
-};
-TuiDocExampleModule = __decorate([
-    NgModule({
-        imports: [
+class TuiDocExampleModule {
+}
+TuiDocExampleModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiDocExampleModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+TuiDocExampleModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiDocExampleModule, declarations: [TuiDocExampleComponent,
+        TuiDocExampleGetTabsPipe,
+        TuiDocExampleCapitalizePipe], imports: [CommonModule,
+        ClipboardModule,
+        TuiTabsModule,
+        TuiButtonModule,
+        TuiDocCopyModule,
+        TuiDocCodeModule,
+        PolymorpheusModule], exports: [TuiDocExampleComponent,
+        TuiDocExampleGetTabsPipe,
+        TuiDocExampleCapitalizePipe] });
+TuiDocExampleModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiDocExampleModule, imports: [[
             CommonModule,
             ClipboardModule,
             TuiTabsModule,
@@ -940,174 +1124,69 @@ TuiDocExampleModule = __decorate([
             TuiDocCopyModule,
             TuiDocCodeModule,
             PolymorpheusModule,
-        ],
-        declarations: [
-            TuiDocExampleComponent,
-            TuiDocExampleGetTabsPipe,
-            TuiDocExampleCapitalizePipe,
-        ],
-        exports: [
-            TuiDocExampleComponent,
-            TuiDocExampleGetTabsPipe,
-            TuiDocExampleCapitalizePipe,
-        ],
-    })
-], TuiDocExampleModule);
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiDocExampleModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        ClipboardModule,
+                        TuiTabsModule,
+                        TuiButtonModule,
+                        TuiDocCopyModule,
+                        TuiDocCodeModule,
+                        PolymorpheusModule,
+                    ],
+                    declarations: [
+                        TuiDocExampleComponent,
+                        TuiDocExampleGetTabsPipe,
+                        TuiDocExampleCapitalizePipe,
+                    ],
+                    exports: [
+                        TuiDocExampleComponent,
+                        TuiDocExampleGetTabsPipe,
+                        TuiDocExampleCapitalizePipe,
+                    ],
+                }]
+        }] });
 
-var TuiDocMainComponent_1;
-// @dynamic
-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.change$ = new Subject();
-    }
-    get mode() {
-        return this.night ? 'onDark' : null;
-    }
-    onMode(night) {
-        this.night = night;
-        this.change$.next();
-        this.storage.setItem('night', String(night));
-    }
-};
-TuiDocMainComponent.ctorParameters = () => [
-    { type: Storage, decorators: [{ type: Inject, args: [LOCAL_STORAGE,] }] },
-    { type: Window, decorators: [{ type: Inject, args: [WINDOW,] }] }
-];
-__decorate([
-    HostBinding('attr.data-mode')
-], TuiDocMainComponent.prototype, "mode", null);
-TuiDocMainComponent = TuiDocMainComponent_1 = __decorate([
-    Component({
-        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: [
-            {
-                provide: TuiModeDirective,
-                useExisting: forwardRef(() => TuiDocMainComponent_1),
-            },
-            TuiSwipeService,
-        ],
-        styles: ["html{scroll-padding-top:4rem;height:auto}tui-root>tui-scroll-controls>.bar_vertical{top:4rem!important}@-webkit-keyframes tuiShaking{from,to{transform:translate3d(0,0,0)}10%,30%,50%,70%,90%{transform:translate3d(-.3125rem,0,0)}20%,40%,60%,80%{transform:translate3d(.3125rem,0,0)}}@keyframes tuiShaking{from,to{transform:translate3d(0,0,0)}10%,30%,50%,70%,90%{transform:translate3d(-.3125rem,0,0)}20%,40%,60%,80%{transform:translate3d(.3125rem,0,0)}}body{background:var(--tui-base-01);height:auto}tui-doc-main{display:block}code:not(.hljs):not([class*=language-]):not(.exception){transition-property:background;transition-duration:var(--tui-duration,300ms);transition-timing-function:ease-in-out;background:var(--tui-base-02);color:var(--tui-text-02);vertical-align:middle;box-shadow:inset 0 -2px var(--tui-secondary);padding:.375rem .5rem;font-size:.875rem;border-radius:.5rem}a:focus code,button:focus code{background:var(--tui-base-01)}.tui-doc-page{position:relative;z-index:0;padding-top:4rem}tui-doc-navigation.tui-doc-navigation{position:fixed;top:4rem;bottom:0;width:16.25rem;border-right:1px solid var(--tui-base-03)}.tui-doc-content{margin-left:16.25rem}@media screen and (max-width:47.9375em){tui-doc-navigation.tui-doc-navigation{display:none}.tui-doc-content{margin-left:0}}.tui-doc-outlet+*{display:block}.tui-doc-animated-example{-webkit-animation:1s .3s tuiShaking;animation:1s .3s tuiShaking}label.night-mode{cursor:pointer}label.night-mode .tui-toggle{margin-left:.5rem}.hljs-tag{background:0 0}.hljs{display:block;overflow-x:auto;padding:.5em;color:var(--tui-text-01);background-color:var(--tui-clear-disabled)}.hljs.hljs-line-numbers{background:0 0}.hljs-subst,.hljs-title{font-weight:400;color:var(--tui-text-01)}.hljs-comment,.hljs-quote{color:var(--tui-text-03);font-style:italic}.hljs-meta{color:#e38162}.hljs-keyword,.hljs-literal,.hljs-name,.hljs-section,.hljs-selector-class,.hljs-selector-id,.hljs-selector-tag,.hljs-type{font-weight:700;color:var(--tui-link)}.hljs-attribute,.hljs-link,.hljs-number,.hljs-regexp{font-weight:700;color:var(--tui-support-06)}.hljs-link,.hljs-number,.hljs-regexp{font-weight:400}.hljs-string{color:var(--tui-positive);font-weight:700}.hljs-bullet,.hljs-formula,.hljs-symbol{color:var(--tui-text-01);background:var(--tui-base-02);font-style:italic}.hljs-doctag{text-decoration:underline}.hljs-template-variable,.hljs-variable{color:var(--tui-link-hover)}[data-mode=onDark] .hljs-template-variable,[data-mode=onDark] .hljs-variable{color:var(--tui-warning-fill)}.hljs-addition{background:var(--tui-success-bg)}.hljs-deletion{background:var(--tui-error-bg)}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:700}.hljs .hljs-line-numbers{padding:0}.hljs-ln-numbers{vertical-align:top;opacity:.3;text-align:right;padding-right:1em!important}"]
-    }),
-    __param(0, Inject(LOCAL_STORAGE)),
-    __param(1, Inject(WINDOW))
-], TuiDocMainComponent);
+const TUI_DOC_PAGE_LOADED = new InjectionToken(`[TUI_DOC_PAGE_LOADED] Stream that emits if loading of page is over (for example, to begin scrollIntoView)`, { factory: () => defer(() => timer(200).pipe(switchMapTo(of(true)))) });
 
-const TUI_DOC_PAGE_LOADED = new InjectionToken('[TUI_DOC_PAGE_LOADED] Stream that emits if loading of page is over (for example, to begin scrollIntoView)', { factory: () => defer(() => timer(200).pipe(switchMapTo(of(true)))) });
-
-/**
- * @deprecated: use {@link TuiScrollIntoViewLinkDirective}
- * TODO: remove in v3.0
- */
-let ScrollIntoViewDirective = 
-// eslint-disable-next-line @typescript-eslint/naming-convention
-class ScrollIntoViewDirective {
-    constructor(destroy$, { nativeElement }, readyToScroll$) {
-        this.readyToScroll$ = readyToScroll$;
-        this.scroll$ = new ReplaySubject(1);
-        this.readyToScroll$
-            .pipe(filter(Boolean), switchMapTo(this.scroll$), debounceTime(750), filter(shallWe => shallWe && !!getElementObscurers(nativeElement)), takeUntil(destroy$))
-            .subscribe(() => {
-            nativeElement.scrollIntoView();
-        });
-    }
-    set scrollIntoView(shallWe) {
-        this.scroll$.next(shallWe);
-    }
-};
-ScrollIntoViewDirective.ctorParameters = () => [
-    { type: TuiDestroyService, decorators: [{ type: Inject, args: [TuiDestroyService,] }] },
-    { type: ElementRef, decorators: [{ type: Inject, args: [ElementRef,] }] },
-    { type: Observable, decorators: [{ type: Inject, args: [TUI_DOC_PAGE_LOADED,] }] }
-];
-__decorate([
-    Input()
-], ScrollIntoViewDirective.prototype, "scrollIntoView", null);
-ScrollIntoViewDirective = __decorate([
-    Directive({
-        selector: '[scrollIntoView]',
-        providers: [TuiDestroyService],
-    })
-    // eslint-disable-next-line @typescript-eslint/naming-convention
-    ,
-    __param(0, Inject(TuiDestroyService)),
-    __param(1, Inject(ElementRef)),
-    __param(2, Inject(TUI_DOC_PAGE_LOADED))
-], ScrollIntoViewDirective);
-let TuiScrollIntoViewLinkDirective = class TuiScrollIntoViewLinkDirective extends ScrollIntoViewDirective {
-};
-TuiScrollIntoViewLinkDirective = __decorate([
-    Directive({
-        selector: '[tuiScrollIntoViewLink]',
-        providers: [TuiDestroyService],
-    })
-], TuiScrollIntoViewLinkDirective);
-
-/**
- * @deprecated: use {@link TuiScrollIntoViewLinkModule}
- * TODO: remove in v3.0
- */
-let ScrollIntoViewModule = 
-// eslint-disable-next-line @typescript-eslint/naming-convention
-class ScrollIntoViewModule {
-};
-ScrollIntoViewModule = __decorate([
-    NgModule({
-        declarations: [ScrollIntoViewDirective],
-        exports: [ScrollIntoViewDirective],
-    })
-    // eslint-disable-next-line @typescript-eslint/naming-convention
-], ScrollIntoViewModule);
-let TuiScrollIntoViewLinkModule = class TuiScrollIntoViewLinkModule {
-};
-TuiScrollIntoViewLinkModule = __decorate([
-    NgModule({
-        declarations: [TuiScrollIntoViewLinkDirective],
-        exports: [TuiScrollIntoViewLinkDirective],
-    })
-], TuiScrollIntoViewLinkModule);
-
-const TUI_DOC_SCROLL_BEHAVIOR = new InjectionToken('[TUI_DOC_SCROLL_BEHAVIOR] Defines the transition animation for scroll', { factory: () => 'smooth' });
+const TUI_DOC_SCROLL_BEHAVIOR = new InjectionToken(`[TUI_DOC_SCROLL_BEHAVIOR] Defines the transition animation for scroll`, { factory: () => `smooth` });
 
 const MAP = {
-    а: 'f',
-    б: ',',
-    в: 'd',
-    г: 'u',
-    д: 'l',
-    е: 't',
-    ё: '`',
-    ж: ';',
-    з: 'p',
-    и: 'b',
-    й: 'q',
-    к: 'r',
-    л: 'k',
-    м: 'v',
-    н: 'y',
-    о: 'j',
-    п: 'g',
-    р: 'h',
-    с: 'c',
-    т: 'n',
-    у: 'e',
-    ф: 'a',
-    х: '[',
-    ц: 'w',
-    ч: 'x',
-    ш: 'i',
-    щ: 'o',
-    ъ: ']',
-    ы: 's',
-    ь: 'm',
-    ю: '.',
-    я: 'z',
+    а: `f`,
+    б: `,`,
+    в: `d`,
+    г: `u`,
+    д: `l`,
+    е: `t`,
+    ё: `\``,
+    ж: `;`,
+    з: `p`,
+    и: `b`,
+    й: `q`,
+    к: `r`,
+    л: `k`,
+    м: `v`,
+    н: `y`,
+    о: `j`,
+    п: `g`,
+    р: `h`,
+    с: `c`,
+    т: `n`,
+    у: `e`,
+    ф: `a`,
+    х: `[`,
+    ц: `w`,
+    ч: `x`,
+    ш: `i`,
+    щ: `o`,
+    ъ: `]`,
+    ы: `s`,
+    ь: `m`,
+    ю: `.`,
+    я: `z`,
 };
 /**
  * @deprecated: use {@link tuiTransliterateKeyboardLayout} instead
@@ -1117,7 +1196,7 @@ const MAP = {
  */
 // eslint-disable-next-line @typescript-eslint/naming-convention
 function transliterateKeyboardLayout(string) {
-    let newStr = '';
+    let newStr = ``;
     for (let i = 0; i < string.length; i++) {
         newStr += string.charAt(i) in MAP ? MAP[string.charAt(i)] : string.charAt(i);
     }
@@ -1125,17 +1204,17 @@ function transliterateKeyboardLayout(string) {
 }
 const tuiTransliterateKeyboardLayout = transliterateKeyboardLayout;
 
-const TUI_DOC_PAGES = new InjectionToken('Documentation pages', {
+const TUI_DOC_PAGES = new InjectionToken(`Documentation pages`, {
     factory: () => [],
 });
 
-const TUI_DOC_TITLE = new InjectionToken('Page title', {
-    factory: () => '',
+const TUI_DOC_TITLE = new InjectionToken(`Page title`, {
+    factory: () => ``,
 });
 
-const NAVIGATION_TITLE = new InjectionToken('Page title');
-const NAVIGATION_LABELS = new InjectionToken('Navigation sections labels for search');
-const NAVIGATION_ITEMS = new InjectionToken('Navigation pages');
+const NAVIGATION_TITLE = new InjectionToken(`Page title`);
+const NAVIGATION_LABELS = new InjectionToken(`Navigation sections labels for search`);
+const NAVIGATION_ITEMS = new InjectionToken(`Navigation pages`);
 const NAVIGATION_PROVIDERS = [
     TuiDestroyService,
     {
@@ -1174,8 +1253,59 @@ function itemsProviderFactory(pages) {
     ];
 }
 
+/**
+ * @deprecated: use {@link TuiScrollIntoViewLinkDirective}
+ * TODO: remove in v3.0
+ */
+// eslint-disable-next-line @typescript-eslint/naming-convention
+class ScrollIntoViewDirective {
+    constructor(destroy$, { nativeElement }, readyToScroll$) {
+        this.readyToScroll$ = readyToScroll$;
+        this.scroll$ = new ReplaySubject(1);
+        this.readyToScroll$
+            .pipe(filter(Boolean), switchMapTo(this.scroll$), debounceTime(750), filter(shallWe => shallWe && !!getElementObscurers(nativeElement)), takeUntil(destroy$))
+            .subscribe(() => {
+            nativeElement.scrollIntoView();
+        });
+    }
+    set scrollIntoView(shallWe) {
+        this.scroll$.next(shallWe);
+    }
+}
+ScrollIntoViewDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ScrollIntoViewDirective, deps: [{ token: TuiDestroyService }, { token: ElementRef }, { token: TUI_DOC_PAGE_LOADED }], target: i0.ɵɵFactoryTarget.Directive });
+ScrollIntoViewDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: ScrollIntoViewDirective, selector: "[scrollIntoView]", inputs: { scrollIntoView: "scrollIntoView" }, providers: [TuiDestroyService], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ScrollIntoViewDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: `[scrollIntoView]`,
+                    providers: [TuiDestroyService],
+                }]
+        }], ctorParameters: function () { return [{ type: i3.TuiDestroyService, decorators: [{
+                    type: Inject,
+                    args: [TuiDestroyService]
+                }] }, { type: i0.ElementRef, decorators: [{
+                    type: Inject,
+                    args: [ElementRef]
+                }] }, { type: i8.Observable, decorators: [{
+                    type: Inject,
+                    args: [TUI_DOC_PAGE_LOADED]
+                }] }]; }, propDecorators: { scrollIntoView: [{
+                type: Input
+            }] } });
+class TuiScrollIntoViewLinkDirective extends ScrollIntoViewDirective {
+}
+TuiScrollIntoViewLinkDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiScrollIntoViewLinkDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+TuiScrollIntoViewLinkDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: TuiScrollIntoViewLinkDirective, selector: "[tuiScrollIntoViewLink]", providers: [TuiDestroyService], usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiScrollIntoViewLinkDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: `[tuiScrollIntoViewLink]`,
+                    providers: [TuiDestroyService],
+                }]
+        }] });
+
 // @dynamic
-let TuiDocNavigationComponent = class TuiDocNavigationComponent {
+class TuiDocNavigationComponent {
     constructor(changeDetectorRef, titleService, title$, documentRef, mode, sidebar, labels, items, searchText, router, activatedRoute, destroy$, readyToScroll$, scrollBehavior) {
         this.documentRef = documentRef;
         this.mode = mode;
@@ -1189,12 +1319,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 => {
@@ -1229,11 +1359,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();
@@ -1241,13 +1371,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], []),
         ], []);
@@ -1263,11 +1393,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;
@@ -1284,69 +1414,233 @@ 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,
         });
     }
-};
-TuiDocNavigationComponent.ctorParameters = () => [
-    { type: ChangeDetectorRef, decorators: [{ type: Inject, args: [ChangeDetectorRef,] }] },
-    { type: Title, decorators: [{ type: Inject, args: [Title,] }] },
-    { type: Observable, decorators: [{ type: Inject, args: [NAVIGATION_TITLE,] }] },
-    { type: Document, decorators: [{ type: Inject, args: [DOCUMENT,] }] },
-    { type: TuiModeDirective, decorators: [{ type: Inject, args: [TuiModeDirective,] }] },
-    { type: undefined, decorators: [{ type: Optional }, { type: Inject, args: [TuiSidebarDirective,] }] },
-    { type: Array, decorators: [{ type: Inject, args: [NAVIGATION_LABELS,] }] },
-    { type: undefined, decorators: [{ type: Inject, args: [NAVIGATION_ITEMS,] }] },
-    { type: String, decorators: [{ type: Inject, args: [TUI_DOC_SEARCH_TEXT,] }] },
-    { type: Router, decorators: [{ type: Inject, args: [Router,] }] },
-    { type: ActivatedRoute, decorators: [{ type: Inject, args: [ActivatedRoute,] }] },
-    { type: Observable, decorators: [{ type: Inject, args: [TuiDestroyService,] }] },
-    { type: Observable, decorators: [{ type: Inject, args: [TUI_DOC_PAGE_LOADED,] }] },
-    { type: undefined, decorators: [{ type: Inject, args: [TUI_DOC_SCROLL_BEHAVIOR,] }] }
-];
-__decorate([
-    HostBinding('class._open')
-], TuiDocNavigationComponent.prototype, "menuOpen", void 0);
+}
+TuiDocNavigationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiDocNavigationComponent, deps: [{ token: ChangeDetectorRef }, { token: Title }, { token: NAVIGATION_TITLE }, { token: DOCUMENT }, { token: TuiModeDirective }, { token: TuiSidebarDirective, optional: true }, { token: NAVIGATION_LABELS }, { token: NAVIGATION_ITEMS }, { token: TUI_DOC_SEARCH_TEXT }, { token: Router }, { token: ActivatedRoute }, { token: TuiDestroyService }, { token: TUI_DOC_PAGE_LOADED }, { token: TUI_DOC_SCROLL_BEHAVIOR }], target: i0.ɵɵFactoryTarget.Component });
+TuiDocNavigationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TuiDocNavigationComponent, selector: "tui-doc-navigation", host: { properties: { "class._open": "this.menuOpen" } }, providers: NAVIGATION_PROVIDERS, ngImport: i0, 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        tuiTextfieldSize=\"m\"\n        tuiTextfieldIconLeft=\"tuiIconSearch\"\n        [pseudoFocus]=\"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", styles: [":host{z-index:1;display:flex;flex-direction:column;text-align:center;background:var(--tui-base-01)}.t-input{display:block;margin:1.25rem}.t-navigation{display:flex;max-height:100%;min-height:0;flex:1 1 0;text-align:left}.t-scrollbar{width:100%;scroll-behavior:smooth}.t-items-container{display:flex;flex-direction:column;padding:0 1rem}.t-label{margin-left:.5rem}.t-expand{margin-left:.25rem}.t-section{display:flex;flex-direction:column;align-items:flex-start;margin:-1rem 0 -.5rem}.t-section_bordered{margin:.5rem 0;border-left:1px solid var(--tui-base-03)}.t-subsection{margin-left:.5rem}.t-sublink{-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:1rem 0 0;border:0;background:none;font-size:inherit;line-height:inherit;font:var(--tui-font-text-m);margin-left:.5rem}.t-sublink_small{margin-left:1rem;line-height:1.5rem;padding-top:.5rem}.t-sublink_subsection{margin-left:0;line-height:1.6rem}.t-sublink_active{color:var(--tui-text-01)}.t-chevron{transition-property:transform;transition-duration:.3s;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;width:1rem;height:1rem;margin:-.25rem .25rem 0 -.1875rem}.t-chevron_active{transform:rotate(90deg)}\n"], components: [{ type: i1.TuiHostedDropdownComponent, selector: "tui-hosted-dropdown", inputs: ["content", "canOpen", "open"], outputs: ["openChange", "focusedChange"] }, { type: i1.TuiPrimitiveTextfieldComponent, selector: "tui-primitive-textfield", inputs: ["editable", "filler", "iconCleaner", "readOnly", "invalid", "disabled", "prefix", "postfix", "value"], outputs: ["valueChange"] }, { type: i1.TuiDataListComponent, selector: "tui-data-list", inputs: ["role", "emptyContent"] }, { type: i1.TuiOptionComponent, selector: "button[tuiOption], a[tuiOption]", inputs: ["size", "role", "disabled", "value"] }, { type: i1.TuiScrollbarComponent, selector: "tui-scrollbar", inputs: ["hidden"] }, { type: i2$1.TuiAccordionComponent, selector: "tui-accordion", inputs: ["closeOthers", "rounded"] }, { type: i2$1.TuiAccordionItemComponent, selector: "tui-accordion-item", inputs: ["noPadding", "showArrow", "borders", "size", "disabled", "disableHover", "open", "async"], outputs: ["openChange"] }, { type: i1.TuiLinkComponent, selector: "a[tuiLink], button[tuiLink]", inputs: ["pseudo", "icon", "iconAlign", "iconRotated", "mode"], exportAs: ["tuiLink"] }, { type: i1.TuiSvgComponent, selector: "tui-svg", inputs: ["src"] }, { type: i1.TuiExpandComponent, selector: "tui-expand", inputs: ["async", "expanded"] }], directives: [{ type: i3.TuiLetDirective, selector: "[tuiLet]", inputs: ["tuiLet"] }, { type: i3.TuiAutoFocusDirective, selector: "[tuiAutoFocus]", inputs: ["autoFocus"] }, { type: i1.TuiDropdownControllerDirective, selector: "[tuiDropdownAlign], [tuiDropdownDirection], [tuiDropdownLimitWidth], [tuiDropdownMinHeight], [tuiDropdownMaxHeight], [tuiDropdownSided]", inputs: ["tuiDropdownAlign", "tuiDropdownDirection", "tuiDropdownLimitWidth", "tuiDropdownMinHeight", "tuiDropdownMaxHeight", "tuiDropdownSided"] }, { type: i1.TuiPrimitiveTextfieldDirective, selector: "tui-primitive-textfield" }, { type: i1.TuiTextfieldSizeDirective, selector: "[tuiTextfieldSize]", inputs: ["tuiTextfieldSize"] }, { type: i1.TuiTextfieldIconLeftDirective, selector: "[tuiTextfieldIconLeft]", inputs: ["tuiTextfieldIconLeft"] }, { type: i1.TuiTextfieldCleanerDirective, selector: "[tuiTextfieldCleaner]", inputs: ["tuiTextfieldCleaner"] }, { type: i1.TuiTextfieldLabelOutsideDirective, selector: "[tuiTextfieldLabelOutside]", inputs: ["tuiTextfieldLabelOutside"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.TuiOptGroupDirective, selector: "tui-opt-group", inputs: ["label"] }, { type: i5.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["routerLink", "target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo"] }, { type: i1.TuiModeDirective, selector: "[tuiMode]", inputs: ["tuiMode"] }, { type: i2$1.TuiAccordionItemContentDirective, selector: "ng-template[tuiAccordionItemContent]" }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "routerLinkActive"], exportAs: ["routerLinkActive"] }, { type: ScrollIntoViewDirective, selector: "[scrollIntoView]", inputs: ["scrollIntoView"] }], pipes: { "async": i4.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 __decorate([
     tuiPure
 ], TuiDocNavigationComponent.prototype, "filterItems", null);
 __decorate([
     tuiPure
 ], TuiDocNavigationComponent.prototype, "flattenSubPages", null);
-TuiDocNavigationComponent = __decorate([
-    Component({
-        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,
-        styles: [":host{z-index:1;display:flex;flex-direction:column;text-align:center;background:var(--tui-base-01)}.t-input{display:block;margin:1.25rem}.t-navigation{display:flex;max-height:100%;min-height:0;flex:1 1 0;text-align:left}.t-scrollbar{width:100%;scroll-behavior:smooth}.t-items-container{display:flex;flex-direction:column;padding:0 1rem}.t-label{margin-left:.5rem}.t-expand{margin-left:.25rem}.t-section{display:flex;flex-direction:column;align-items:flex-start;margin:-1rem 0 -.5rem}.t-section_bordered{margin:.5rem 0;border-left:1px solid var(--tui-base-03)}.t-subsection{margin-left:.5rem}.t-sublink{-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:1rem 0 0;border:0;background:0 0;font-size:inherit;line-height:inherit;font:var(--tui-font-text-m);margin-left:.5rem}.t-sublink_small{margin-left:1rem;line-height:1.5rem;padding-top:.5rem}.t-sublink_subsection{margin-left:0;line-height:1.6rem}.t-sublink_active{color:var(--tui-text-01)}.t-chevron{transition-property:transform;transition-duration:var(--tui-duration,300ms);transition-timing-function:ease-in-out;width:1rem;height:1rem;margin:-.25rem .25rem 0 -.1875rem}.t-chevron_active{transform:rotate(90deg)}"]
-    }),
-    __param(0, Inject(ChangeDetectorRef)),
-    __param(1, Inject(Title)),
-    __param(2, Inject(NAVIGATION_TITLE)),
-    __param(3, Inject(DOCUMENT)),
-    __param(4, Inject(TuiModeDirective)),
-    __param(5, Optional()),
-    __param(5, Inject(TuiSidebarDirective)),
-    __param(6, Inject(NAVIGATION_LABELS)),
-    __param(7, Inject(NAVIGATION_ITEMS)),
-    __param(8, Inject(TUI_DOC_SEARCH_TEXT)),
-    __param(9, Inject(Router)),
-    __param(10, Inject(ActivatedRoute)),
-    __param(11, Inject(TuiDestroyService)),
-    __param(12, Inject(TUI_DOC_PAGE_LOADED)),
-    __param(13, Inject(TUI_DOC_SCROLL_BEHAVIOR))
-], TuiDocNavigationComponent);
+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`],
+                    providers: NAVIGATION_PROVIDERS,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef, decorators: [{
+                    type: Inject,
+                    args: [ChangeDetectorRef]
+                }] }, { type: i7.Title, decorators: [{
+                    type: Inject,
+                    args: [Title]
+                }] }, { type: i8.Observable, decorators: [{
+                    type: Inject,
+                    args: [NAVIGATION_TITLE]
+                }] }, { type: Document, decorators: [{
+                    type: Inject,
+                    args: [DOCUMENT]
+                }] }, { type: i1.TuiModeDirective, decorators: [{
+                    type: Inject,
+                    args: [TuiModeDirective]
+                }] }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [TuiSidebarDirective]
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [NAVIGATION_LABELS]
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [NAVIGATION_ITEMS]
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [TUI_DOC_SEARCH_TEXT]
+                }] }, { type: i5.Router, decorators: [{
+                    type: Inject,
+                    args: [Router]
+                }] }, { type: i5.ActivatedRoute, decorators: [{
+                    type: Inject,
+                    args: [ActivatedRoute]
+                }] }, { type: i8.Observable, decorators: [{
+                    type: Inject,
+                    args: [TuiDestroyService]
+                }] }, { type: i8.Observable, decorators: [{
+                    type: Inject,
+                    args: [TUI_DOC_PAGE_LOADED]
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [TUI_DOC_SCROLL_BEHAVIOR]
+                }] }]; }, propDecorators: { menuOpen: [{
+                type: HostBinding,
+                args: [`class._open`]
+            }], filterItems: [], flattenSubPages: [] } });
 
-let TuiDocNavigationModule = class TuiDocNavigationModule {
-};
-TuiDocNavigationModule = __decorate([
-    NgModule({
-        imports: [
+const TUI_DOC_LOGO = new InjectionToken(`Main logo`, {
+    factory: () => ``,
+});
+
+class TuiDocHeaderComponent {
+    constructor(logo, menu, router, swipes$) {
+        this.logo = logo;
+        this.menu = menu;
+        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());
+    }
+    onClick() {
+        this.stream$.next(true);
+    }
+    onActiveZone(active) {
+        if (!active) {
+            this.stream$.next(false);
+        }
+    }
+}
+TuiDocHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiDocHeaderComponent, deps: [{ token: TUI_DOC_LOGO }, { token: TUI_DOC_MENU_TEXT }, { token: Router }, { token: TuiSwipeService }], target: i0.ɵɵFactoryTarget.Component });
+TuiDocHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TuiDocHeaderComponent, selector: "header[tuiDocHeader]", ngImport: i0, 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 class=\"t-logo\">\n    <img\n        *polymorpheusOutlet=\"logo as src\"\n        alt=\"Logo\"\n        class=\"t-img\"\n        [src]=\"src\"\n    />\n</div>\n<ng-content></ng-content>\n", styles: [":host{box-shadow:0 .125rem 1rem rgba(0,0,0,.08);position:fixed;top:0;left:0;right:0;z-index:1;display:flex;height:3.9375rem;align-items:center;padding:0 1.25rem;background:var(--tui-base-01);border-bottom:1px solid var(--tui-base-03)}.t-logo{margin-right:auto;font:var(--tui-font-heading-5)}.t-img{display:block}.t-menu{margin-left:-1.25rem}@media screen and (min-width: 48em){.t-menu{display:none}}.t-navigation{min-height:100%}\n"], components: [{ type: i1.TuiButtonComponent, selector: "button[tuiButton], button[tuiIconButton], a[tuiButton], a[tuiIconButton]", inputs: ["appearance", "disabled", "icon", "iconRight", "shape", "showLoader", "size"] }, { type: TuiDocNavigationComponent, selector: "tui-doc-navigation" }], directives: [{ type: i3.TuiActiveZoneDirective, selector: "[tuiActiveZone]:not(ng-container), [tuiActiveZoneChange]:not(ng-container), [tuiActiveZoneParent]:not(ng-container)", inputs: ["tuiActiveZoneParent"], outputs: ["tuiActiveZoneChange"], exportAs: ["tuiActiveZone"] }, { type: i4$1.TuiSidebarDirective, selector: "[tuiSidebar]", inputs: ["tuiSidebarDirection", "tuiSidebarAutoWidth", "tuiSidebar"] }, { type: i6.PolymorpheusOutletDirective, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }], pipes: { "async": i4.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+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`],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [TUI_DOC_LOGO]
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [TUI_DOC_MENU_TEXT]
+                }] }, { type: i5.Router, decorators: [{
+                    type: Inject,
+                    args: [Router]
+                }] }, { type: i3.TuiSwipeService, decorators: [{
+                    type: Inject,
+                    args: [TuiSwipeService]
+                }] }]; } });
+
+// @dynamic
+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.change$ = new Subject();
+    }
+    get mode() {
+        return this.night ? `onDark` : null;
+    }
+    onMode(night) {
+        this.night = night;
+        this.change$.next();
+        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 });
+TuiDocMainComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TuiDocMainComponent, selector: "tui-doc-main", host: { properties: { "attr.data-mode": "this.mode" } }, providers: [
+        {
+            provide: TuiModeDirective,
+            useExisting: forwardRef(() => TuiDocMainComponent),
+        },
+        TuiSwipeService,
+    ], ngImport: i0, 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", styles: ["html{scroll-padding-top:4rem;height:auto}tui-root>tui-scroll-controls>.bar_vertical{top:4rem!important}@-webkit-keyframes tuiShaking{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-.3125rem)}20%,40%,60%,80%{transform:translate(.3125rem)}}@keyframes tuiShaking{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-.3125rem)}20%,40%,60%,80%{transform:translate(.3125rem)}}body{background:var(--tui-base-01);height:auto}tui-doc-main{display:block}code:not(.hljs):not([class*=\"language-\"]):not(.exception){transition-property:background;transition-duration:.3s;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;background:var(--tui-base-02);color:var(--tui-text-02);vertical-align:middle;box-shadow:inset 0 -2px var(--tui-secondary);padding:.375rem .5rem;font-size:.875rem;border-radius:.5rem}button:focus code,a:focus code{background:var(--tui-base-01)}.tui-doc-page{position:relative;z-index:0;padding-top:4rem}tui-doc-navigation.tui-doc-navigation{position:fixed;top:4rem;bottom:0;width:16.25rem;border-right:1px solid var(--tui-base-03)}@media screen and (max-width: 47.9375em){tui-doc-navigation.tui-doc-navigation{display:none}}.tui-doc-content{margin-left:16.25rem}@media screen and (max-width: 47.9375em){.tui-doc-content{margin-left:0}}.tui-doc-outlet+*{display:block}.tui-doc-animated-example{-webkit-animation:1s .3s tuiShaking;animation:1s .3s tuiShaking}label.night-mode{cursor:pointer}label.night-mode .tui-toggle{margin-left:.5rem}.hljs-tag{background:none}.hljs{display:block;overflow-x:auto;padding:.5em;color:var(--tui-text-01);background-color:var(--tui-clear-disabled)}.hljs.hljs-line-numbers{background:transparent}.hljs-subst,.hljs-title{font-weight:normal;color:var(--tui-text-01)}.hljs-comment,.hljs-quote{color:var(--tui-text-03);font-style:italic}.hljs-meta{color:#e38162}.hljs-section,.hljs-name,.hljs-literal,.hljs-keyword,.hljs-selector-tag,.hljs-type,.hljs-selector-id,.hljs-selector-class{font-weight:bold;color:var(--tui-link)}.hljs-attribute,.hljs-number,.hljs-regexp,.hljs-link{font-weight:bold;color:var(--tui-support-06)}.hljs-number,.hljs-regexp,.hljs-link{font-weight:normal}.hljs-string{color:var(--tui-positive);font-weight:bold}.hljs-symbol,.hljs-bullet,.hljs-formula{color:var(--tui-text-01);background:var(--tui-base-02);font-style:italic}.hljs-doctag{text-decoration:underline}.hljs-variable,.hljs-template-variable{color:var(--tui-link-hover)}[data-mode=onDark] .hljs-variable,[data-mode=onDark] .hljs-template-variable{color:var(--tui-warning-fill)}.hljs-addition{background:var(--tui-success-bg)}.hljs-deletion{background:var(--tui-error-bg)}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:bold}.hljs .hljs-line-numbers{padding:0}.hljs-ln-numbers{vertical-align:top;opacity:.3;text-align:right;padding-right:1em!important}\n"], components: [{ type: i1.TuiThemeNightComponent, selector: "tui-theme-night" }, { type: i1.TuiRootComponent, selector: "tui-root" }, { type: TuiDocNavigationComponent, selector: "tui-doc-navigation" }, { type: TuiDocHeaderComponent, selector: "header[tuiDocHeader]" }, { type: i2$1.TuiToggleComponent, selector: "tui-toggle", inputs: ["singleColor", "showIcons", "showLoader", "size"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.RouterOutlet, selector: "router-outlet", outputs: ["activate", "deactivate"], exportAs: ["outlet"] }, { 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"] }], encapsulation: i0.ViewEncapsulation.None });
+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`],
+                    encapsulation: ViewEncapsulation.None,
+                    providers: [
+                        {
+                            provide: TuiModeDirective,
+                            useExisting: forwardRef(() => TuiDocMainComponent),
+                        },
+                        TuiSwipeService,
+                    ],
+                }]
+        }], ctorParameters: function () { return [{ type: Storage, decorators: [{
+                    type: Inject,
+                    args: [LOCAL_STORAGE]
+                }] }, { type: Window, decorators: [{
+                    type: Inject,
+                    args: [WINDOW]
+                }] }]; }, propDecorators: { mode: [{
+                type: HostBinding,
+                args: [`attr.data-mode`]
+            }] } });
+
+/**
+ * @deprecated: use {@link TuiScrollIntoViewLinkModule}
+ * TODO: remove in v3.0
+ */
+// eslint-disable-next-line @typescript-eslint/naming-convention
+class ScrollIntoViewModule {
+}
+ScrollIntoViewModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ScrollIntoViewModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ScrollIntoViewModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ScrollIntoViewModule, declarations: [ScrollIntoViewDirective], exports: [ScrollIntoViewDirective] });
+ScrollIntoViewModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ScrollIntoViewModule });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ScrollIntoViewModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [ScrollIntoViewDirective],
+                    exports: [ScrollIntoViewDirective],
+                }]
+        }] });
+class TuiScrollIntoViewLinkModule {
+}
+TuiScrollIntoViewLinkModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiScrollIntoViewLinkModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+TuiScrollIntoViewLinkModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiScrollIntoViewLinkModule, declarations: [TuiScrollIntoViewLinkDirective], exports: [TuiScrollIntoViewLinkDirective] });
+TuiScrollIntoViewLinkModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiScrollIntoViewLinkModule });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiScrollIntoViewLinkModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [TuiScrollIntoViewLinkDirective],
+                    exports: [TuiScrollIntoViewLinkDirective],
+                }]
+        }] });
+
+class TuiDocNavigationModule {
+}
+TuiDocNavigationModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiDocNavigationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+TuiDocNavigationModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiDocNavigationModule, declarations: [TuiDocNavigationComponent], imports: [CommonModule,
+        FormsModule,
+        RouterModule,
+        ScrollIntoViewModule,
+        TuiScrollIntoViewLinkModule,
+        TuiButtonModule,
+        TuiPrimitiveTextfieldModule,
+        TuiTextfieldControllerModule,
+        TuiActiveZoneModule,
+        TuiLetModule,
+        TuiModeModule,
+        TuiLinkModule,
+        TuiExpandModule,
+        TuiHostedDropdownModule,
+        TuiDropdownControllerModule,
+        TuiAccordionModule,
+        TuiScrollbarModule,
+        TuiSvgModule,
+        TuiDataListModule,
+        TuiAutoFocusModule], exports: [TuiDocNavigationComponent] });
+TuiDocNavigationModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiDocNavigationModule, imports: [[
             CommonModule,
             FormsModule,
             RouterModule,
@@ -1367,75 +1661,84 @@ TuiDocNavigationModule = __decorate([
             TuiSvgModule,
             TuiDataListModule,
             TuiAutoFocusModule,
-        ],
-        declarations: [TuiDocNavigationComponent],
-        exports: [TuiDocNavigationComponent],
-    })
-], TuiDocNavigationModule);
-
-const TUI_DOC_LOGO = new InjectionToken('Main logo', {
-    factory: () => '',
-});
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiDocNavigationModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                        RouterModule,
+                        ScrollIntoViewModule,
+                        TuiScrollIntoViewLinkModule,
+                        TuiButtonModule,
+                        TuiPrimitiveTextfieldModule,
+                        TuiTextfieldControllerModule,
+                        TuiActiveZoneModule,
+                        TuiLetModule,
+                        TuiModeModule,
+                        TuiLinkModule,
+                        TuiExpandModule,
+                        TuiHostedDropdownModule,
+                        TuiDropdownControllerModule,
+                        TuiAccordionModule,
+                        TuiScrollbarModule,
+                        TuiSvgModule,
+                        TuiDataListModule,
+                        TuiAutoFocusModule,
+                    ],
+                    declarations: [TuiDocNavigationComponent],
+                    exports: [TuiDocNavigationComponent],
+                }]
+        }] });
 
-let TuiDocHeaderComponent = class TuiDocHeaderComponent {
-    constructor(logo, menu, router, swipes$) {
-        this.logo = logo;
-        this.menu = menu;
-        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());
-    }
-    onClick() {
-        this.stream$.next(true);
-    }
-    onActiveZone(active) {
-        if (!active) {
-            this.stream$.next(false);
-        }
-    }
-};
-TuiDocHeaderComponent.ctorParameters = () => [
-    { type: undefined, decorators: [{ type: Inject, args: [TUI_DOC_LOGO,] }] },
-    { type: String, decorators: [{ type: Inject, args: [TUI_DOC_MENU_TEXT,] }] },
-    { type: Router, decorators: [{ type: Inject, args: [Router,] }] },
-    { type: TuiSwipeService, decorators: [{ type: Inject, args: [TuiSwipeService,] }] }
-];
-TuiDocHeaderComponent = __decorate([
-    Component({
-        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%}"]
-    }),
-    __param(0, Inject(TUI_DOC_LOGO)),
-    __param(1, Inject(TUI_DOC_MENU_TEXT)),
-    __param(2, Inject(Router)),
-    __param(3, Inject(TuiSwipeService))
-], TuiDocHeaderComponent);
-
-let TuiDocHeaderModule = class TuiDocHeaderModule {
-};
-TuiDocHeaderModule = __decorate([
-    NgModule({
-        imports: [
+class TuiDocHeaderModule {
+}
+TuiDocHeaderModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiDocHeaderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+TuiDocHeaderModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiDocHeaderModule, declarations: [TuiDocHeaderComponent], imports: [CommonModule,
+        PolymorpheusModule,
+        TuiButtonModule,
+        TuiSidebarModule,
+        TuiActiveZoneModule,
+        TuiDocNavigationModule], exports: [TuiDocHeaderComponent] });
+TuiDocHeaderModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiDocHeaderModule, imports: [[
             CommonModule,
             PolymorpheusModule,
             TuiButtonModule,
             TuiSidebarModule,
             TuiActiveZoneModule,
             TuiDocNavigationModule,
-        ],
-        declarations: [TuiDocHeaderComponent],
-        exports: [TuiDocHeaderComponent],
-    })
-], TuiDocHeaderModule);
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiDocHeaderModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        PolymorpheusModule,
+                        TuiButtonModule,
+                        TuiSidebarModule,
+                        TuiActiveZoneModule,
+                        TuiDocNavigationModule,
+                    ],
+                    declarations: [TuiDocHeaderComponent],
+                    exports: [TuiDocHeaderComponent],
+                }]
+        }] });
 
-let TuiDocMainModule = class TuiDocMainModule {
-};
-TuiDocMainModule = __decorate([
-    NgModule({
-        imports: [
+class TuiDocMainModule {
+}
+TuiDocMainModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiDocMainModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+TuiDocMainModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiDocMainModule, declarations: [TuiDocMainComponent], imports: [CommonModule,
+        RouterModule,
+        FormsModule,
+        TuiToggleModule,
+        TuiThemeNightModule,
+        TuiDocHeaderModule,
+        TuiRootModule,
+        TuiDialogModule,
+        TuiAlertModule,
+        TuiDocNavigationModule], exports: [TuiDocMainComponent] });
+TuiDocMainModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiDocMainModule, imports: [[
             CommonModule,
             RouterModule,
             FormsModule,
@@ -1446,21 +1749,36 @@ TuiDocMainModule = __decorate([
             TuiDialogModule,
             TuiAlertModule,
             TuiDocNavigationModule,
-        ],
-        declarations: [TuiDocMainComponent],
-        exports: [TuiDocMainComponent],
-    })
-], TuiDocMainModule);
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiDocMainModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        RouterModule,
+                        FormsModule,
+                        TuiToggleModule,
+                        TuiThemeNightModule,
+                        TuiDocHeaderModule,
+                        TuiRootModule,
+                        TuiDialogModule,
+                        TuiAlertModule,
+                        TuiDocNavigationModule,
+                    ],
+                    declarations: [TuiDocMainComponent],
+                    exports: [TuiDocMainComponent],
+                }]
+        }] });
 
-const TUI_DOC_DEFAULT_TABS = new InjectionToken('Array of default tab names', {
+const TUI_DOC_DEFAULT_TABS = new InjectionToken(`Array of default tab names`, {
     factory: () => [],
 });
 
-const TUI_DOC_SEE_ALSO = new InjectionToken('Array of arrays of related pages', {
+const TUI_DOC_SEE_ALSO = new InjectionToken(`Array of arrays of related pages`, {
     factory: () => [],
 });
 
-const PAGE_SEE_ALSO = new InjectionToken('Page see also');
+const PAGE_SEE_ALSO = new InjectionToken(`Page see also`);
 const PAGE_PROVIDERS = [
     {
         provide: PAGE_SEE_ALSO,
@@ -1470,90 +1788,92 @@ const PAGE_PROVIDERS = [
 ];
 // eslint-disable-next-line @typescript-eslint/naming-convention
 function seeAlsoProviderFactory({ nativeElement }, seeAlsoGroups) {
-    const currentHeader = nativeElement.getAttribute('header');
+    const currentHeader = nativeElement.getAttribute(`header`);
     const groups = seeAlsoGroups.filter(group => group.includes(currentHeader)) || [];
     const seeAlsoSet = new Set(groups
         .join()
-        .split(',')
+        .split(`,`)
         .filter(component => component && component !== currentHeader));
     return Array.from(seeAlsoSet);
 }
 
-let TuiDocPageTabConnectorDirective = class TuiDocPageTabConnectorDirective {
+class TuiDocPageTabConnectorDirective {
     constructor(template) {
         this.template = template;
     }
-};
-TuiDocPageTabConnectorDirective.ctorParameters = () => [
-    { type: TemplateRef, decorators: [{ type: Inject, args: [TemplateRef,] }] }
-];
+}
+TuiDocPageTabConnectorDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiDocPageTabConnectorDirective, deps: [{ token: TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+TuiDocPageTabConnectorDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: TuiDocPageTabConnectorDirective, selector: "[pageTab]", inputs: { pageTab: "pageTab" }, ngImport: i0 });
 __decorate([
-    Input(),
     tuiDefaultProp()
 ], TuiDocPageTabConnectorDirective.prototype, "pageTab", void 0);
-TuiDocPageTabConnectorDirective = __decorate([
-    Directive({
-        selector: '[pageTab]',
-    }),
-    __param(0, Inject(TemplateRef))
-], TuiDocPageTabConnectorDirective);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiDocPageTabConnectorDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: `[pageTab]`,
+                }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef, decorators: [{
+                    type: Inject,
+                    args: [TemplateRef]
+                }] }]; }, propDecorators: { pageTab: [{
+                type: Input
+            }] } });
 
-// Ambient type cannot be used without dynamic https://github.com/angular/angular/issues/23395
-// @dynamic
-let TuiDocPageComponent = class TuiDocPageComponent {
-    constructor(deprecated, defaultTabs, seeAlso) {
-        this.deprecated = deprecated;
-        this.defaultTabs = defaultTabs;
-        this.seeAlso = seeAlso;
-        this.header = '';
-        this.package = '';
-        this.type = '';
-        this.path = '';
-        this.tabConnectors = EMPTY_QUERY;
-        this.activeItemIndex = NaN;
+const TUI_DOC_SOURCE_CODE = new InjectionToken(`Source code link`, {
+    factory: () => null,
+});
+
+class TuiDocSourceCodeComponent {
+    constructor(sourceCode, text) {
+        this.sourceCode = sourceCode;
+        this.text = text;
+        this.header = ``;
+        this.package = ``;
+        this.type = ``;
+        this.path = ``;
     }
-    get showSeeAlso() {
-        return !!this.seeAlso.length && this.activeItemIndex === 0;
+    get pathOptions() {
+        return this.getPathOptions(this.header, this.package, this.type, this.path);
     }
-    getRouterLink(tab = '') {
-        return `./${tab.replace(/ /g, '_')}`;
+    getPathOptions(header, packageName, type, path) {
+        return {
+            header,
+            package: packageName,
+            type,
+            path,
+        };
     }
-};
-TuiDocPageComponent.ctorParameters = () => [
-    { 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,] }] }
-];
-__decorate([
-    Input()
-], TuiDocPageComponent.prototype, "header", void 0);
-__decorate([
-    Input()
-], TuiDocPageComponent.prototype, "package", void 0);
-__decorate([
-    Input()
-], TuiDocPageComponent.prototype, "type", void 0);
-__decorate([
-    Input()
-], TuiDocPageComponent.prototype, "path", void 0);
+}
+TuiDocSourceCodeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiDocSourceCodeComponent, deps: [{ token: TUI_DOC_SOURCE_CODE }, { token: TUI_DOC_SOURCE_CODE_TEXT }], target: i0.ɵɵFactoryTarget.Component });
+TuiDocSourceCodeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TuiDocSourceCodeComponent, selector: "tui-doc-source-code", inputs: { header: "header", package: "package", type: "type", path: "path" }, ngImport: i0, template: "<a\n    *polymorpheusOutlet=\"sourceCode as link; context: pathOptions\"\n    tuiIconButton\n    type=\"button\"\n    icon=\"tuiIconCodeLarge\"\n    appearance=\"icon\"\n    target=\"_blank\"\n    size=\"s\"\n    [title]=\"text\"\n    [href]=\"link\"\n></a>\n", components: [{ type: i1.TuiButtonComponent, selector: "button[tuiButton], button[tuiIconButton], a[tuiButton], a[tuiIconButton]", inputs: ["appearance", "disabled", "icon", "iconRight", "shape", "showLoader", "size"] }], directives: [{ type: i6.PolymorpheusOutletDirective, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 __decorate([
-    ContentChildren(TuiDocPageTabConnectorDirective)
-], TuiDocPageComponent.prototype, "tabConnectors", void 0);
-TuiDocPageComponent = __decorate([
-    Component({
-        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(1, Inject(TUI_DOC_DEFAULT_TABS)),
-    __param(2, Inject(PAGE_SEE_ALSO))
-], TuiDocPageComponent);
+    tuiPure
+], TuiDocSourceCodeComponent.prototype, "getPathOptions", null);
+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`,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [TUI_DOC_SOURCE_CODE]
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [TUI_DOC_SOURCE_CODE_TEXT]
+                }] }]; }, propDecorators: { header: [{
+                type: Input
+            }], package: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }], path: [{
+                type: Input
+            }], getPathOptions: [] } });
 
 // @dynamic
-let TuiDocSeeAlsoComponent = class TuiDocSeeAlsoComponent {
+class TuiDocSeeAlsoComponent {
     constructor(text, pages) {
         this.text = text;
         this.pages = pages;
@@ -1562,206 +1882,234 @@ 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 = () => [
-    { type: String, decorators: [{ type: Inject, args: [TUI_DOC_SEE_ALSO_TEXT,] }] },
-    { type: undefined, decorators: [{ type: Inject, args: [TUI_DOC_PAGES,] }] }
-];
-__decorate([
-    Input()
-], TuiDocSeeAlsoComponent.prototype, "seeAlso", void 0);
-TuiDocSeeAlsoComponent = __decorate([
-    Component({
-        selector: 'tui-doc-see-also',
-        template: "<h5 class=\"header\">{{ text }}</h5>\n<ng-container *ngFor=\"let item of seeAlso; last as last\">\n    <a\n        tuiLink\n        [routerLink]=\"getRouterLink(item)\"\n    >\n        {{ item }}\n    </a>\n    <ng-container *ngIf=\"!last\">{{ ', ' }}</ng-container>\n</ng-container>\n",
-        changeDetection: ChangeDetectionStrategy.OnPush,
-        styles: [":host{display:block}.header{font-size:.6875rem;line-height:1rem;text-transform:uppercase;letter-spacing:.075em;color:var(--tui-text-02);margin:0 0 .5rem;white-space:nowrap}"]
-    }),
-    __param(0, Inject(TUI_DOC_SEE_ALSO_TEXT)),
-    __param(1, Inject(TUI_DOC_PAGES))
-], TuiDocSeeAlsoComponent);
-
-let TuiDocSeeAlsoModule = class TuiDocSeeAlsoModule {
-};
-TuiDocSeeAlsoModule = __decorate([
-    NgModule({
-        imports: [CommonModule, RouterModule, TuiLinkModule],
-        declarations: [TuiDocSeeAlsoComponent],
-        exports: [TuiDocSeeAlsoComponent],
-    })
-], TuiDocSeeAlsoModule);
-
-const TUI_DOC_SOURCE_CODE = new InjectionToken('Source code link', {
-    factory: () => '',
-});
+}
+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 });
+TuiDocSeeAlsoComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TuiDocSeeAlsoComponent, selector: "tui-doc-see-also", inputs: { seeAlso: "seeAlso" }, ngImport: i0, template: "<h5 class=\"header\">{{ text }}</h5>\n<ng-container *ngFor=\"let item of seeAlso; last as last\">\n    <a\n        tuiLink\n        [routerLink]=\"getRouterLink(item)\"\n    >\n        {{ item }}\n    </a>\n    <ng-container *ngIf=\"!last\">{{ ', ' }}</ng-container>\n</ng-container>\n", styles: [":host{display:block}.header{font-size:.6875rem;line-height:1rem;text-transform:uppercase;letter-spacing:.075em;color:var(--tui-text-02);margin:0 0 .5rem;white-space:nowrap}\n"], components: [{ type: i1.TuiLinkComponent, selector: "a[tuiLink], button[tuiLink]", inputs: ["pseudo", "icon", "iconAlign", "iconRotated", "mode"], exportAs: ["tuiLink"] }], directives: [{ type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["routerLink", "target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+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`],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [TUI_DOC_SEE_ALSO_TEXT]
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [TUI_DOC_PAGES]
+                }] }]; }, propDecorators: { seeAlso: [{
+                type: Input
+            }] } });
 
-let TuiDocSourceCodeComponent = class TuiDocSourceCodeComponent {
-    constructor(sourceCode, text) {
-        this.sourceCode = sourceCode;
-        this.text = text;
-        this.header = '';
-        this.package = '';
-        this.type = '';
-        this.path = '';
+// Ambient type cannot be used without dynamic https://github.com/angular/angular/issues/23395
+// @dynamic
+class TuiDocPageComponent {
+    constructor(deprecated, defaultTabs, seeAlso) {
+        this.deprecated = deprecated;
+        this.defaultTabs = defaultTabs;
+        this.seeAlso = seeAlso;
+        this.header = ``;
+        this.package = ``;
+        this.type = ``;
+        this.path = ``;
+        this.tabConnectors = EMPTY_QUERY;
+        this.activeItemIndex = NaN;
     }
-    get pathOptions() {
-        return this.getPathOptions(this.header, this.package, this.type, this.path);
+    get showSeeAlso() {
+        return !!this.seeAlso.length && this.activeItemIndex === 0;
     }
-    getPathOptions(header, packageName, type, path) {
-        return {
-            header,
-            package: packageName,
-            type,
-            path,
-        };
+    getRouterLink(tab = ``) {
+        return `./${tab.replace(/ /g, `_`)}`;
     }
-};
-TuiDocSourceCodeComponent.ctorParameters = () => [
-    { type: undefined, decorators: [{ type: Inject, args: [TUI_DOC_SOURCE_CODE,] }] },
-    { type: String, decorators: [{ type: Inject, args: [TUI_DOC_SOURCE_CODE_TEXT,] }] }
-];
-__decorate([
-    Input()
-], TuiDocSourceCodeComponent.prototype, "header", void 0);
-__decorate([
-    Input()
-], TuiDocSourceCodeComponent.prototype, "package", void 0);
-__decorate([
-    Input()
-], TuiDocSourceCodeComponent.prototype, "type", void 0);
-__decorate([
-    Input()
-], TuiDocSourceCodeComponent.prototype, "path", void 0);
-__decorate([
-    tuiPure
-], TuiDocSourceCodeComponent.prototype, "getPathOptions", null);
-TuiDocSourceCodeComponent = __decorate([
-    Component({
-        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
-    }),
-    __param(0, Inject(TUI_DOC_SOURCE_CODE)),
-    __param(1, Inject(TUI_DOC_SOURCE_CODE_TEXT))
-], TuiDocSourceCodeComponent);
+}
+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: i2$1.TuiTagComponent, selector: "tui-tag, a[tuiTag]", inputs: ["value", "editable", "allowSpaces", "separator", "maxLength", "size", "showLoader", "status", "hoverable", "removable", "disabled", "autoColor", "leftContent"], outputs: ["edited"] }, { type: i2$1.TuiTabsWithMoreComponent, selector: "tui-tabs-with-more, nav[tuiTabsWithMore]", inputs: ["moreContent", "dropdownContent", "underline", "activeItemIndex", "itemsLimit"], outputs: ["activeItemIndexChange"] }, { type: i2$1.TuiTabComponent, selector: "a[tuiTab]:not([routerLink]), a[tuiTab][routerLink][routerLinkActive], button[tuiTab]" }, { type: TuiDocSourceCodeComponent, selector: "tui-doc-source-code", inputs: ["header", "package", "type", "path"] }, { type: TuiDocSeeAlsoComponent, selector: "tui-doc-see-also", inputs: ["seeAlso"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.TuiItemDirective, selector: "[tuiItem]" }, { type: i5.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["routerLink", "target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo"] }, { type: i5.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "routerLinkActive"], exportAs: ["routerLinkActive"] }, { type: i4.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`],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    providers: PAGE_PROVIDERS,
+                }]
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Attribute,
+                    args: [`deprecated`]
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [TUI_DOC_DEFAULT_TABS]
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [PAGE_SEE_ALSO]
+                }] }]; }, propDecorators: { header: [{
+                type: Input
+            }], package: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }], path: [{
+                type: Input
+            }], tabConnectors: [{
+                type: ContentChildren,
+                args: [TuiDocPageTabConnectorDirective]
+            }] } });
 
-let TuiDocSourceCodeModule = class TuiDocSourceCodeModule {
-};
-TuiDocSourceCodeModule = __decorate([
-    NgModule({
-        declarations: [TuiDocSourceCodeComponent],
-        imports: [CommonModule, PolymorpheusModule, TuiButtonModule],
-        exports: [TuiDocSourceCodeComponent],
-    })
-], TuiDocSourceCodeModule);
+class TuiDocSeeAlsoModule {
+}
+TuiDocSeeAlsoModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiDocSeeAlsoModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+TuiDocSeeAlsoModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiDocSeeAlsoModule, declarations: [TuiDocSeeAlsoComponent], imports: [CommonModule, RouterModule, TuiLinkModule], exports: [TuiDocSeeAlsoComponent] });
+TuiDocSeeAlsoModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiDocSeeAlsoModule, imports: [[CommonModule, RouterModule, TuiLinkModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiDocSeeAlsoModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule, RouterModule, TuiLinkModule],
+                    declarations: [TuiDocSeeAlsoComponent],
+                    exports: [TuiDocSeeAlsoComponent],
+                }]
+        }] });
 
-let TuiDocPageModule = class TuiDocPageModule {
-};
-TuiDocPageModule = __decorate([
-    NgModule({
-        imports: [
+class TuiDocSourceCodeModule {
+}
+TuiDocSourceCodeModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiDocSourceCodeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+TuiDocSourceCodeModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiDocSourceCodeModule, declarations: [TuiDocSourceCodeComponent], imports: [CommonModule, PolymorpheusModule, TuiButtonModule], exports: [TuiDocSourceCodeComponent] });
+TuiDocSourceCodeModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiDocSourceCodeModule, imports: [[CommonModule, PolymorpheusModule, TuiButtonModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiDocSourceCodeModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [TuiDocSourceCodeComponent],
+                    imports: [CommonModule, PolymorpheusModule, TuiButtonModule],
+                    exports: [TuiDocSourceCodeComponent],
+                }]
+        }] });
+
+class TuiDocPageModule {
+}
+TuiDocPageModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiDocPageModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+TuiDocPageModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiDocPageModule, declarations: [TuiDocPageComponent, TuiDocPageTabConnectorDirective], imports: [CommonModule,
+        RouterModule,
+        TuiDocSeeAlsoModule,
+        TuiTabsModule,
+        TuiTagModule,
+        TuiDocSourceCodeModule], exports: [TuiDocPageComponent, TuiDocPageTabConnectorDirective] });
+TuiDocPageModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiDocPageModule, imports: [[
             CommonModule,
             RouterModule,
             TuiDocSeeAlsoModule,
             TuiTabsModule,
             TuiTagModule,
             TuiDocSourceCodeModule,
-        ],
-        declarations: [TuiDocPageComponent, TuiDocPageTabConnectorDirective],
-        exports: [TuiDocPageComponent, TuiDocPageTabConnectorDirective],
-    })
-], TuiDocPageModule);
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiDocPageModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        RouterModule,
+                        TuiDocSeeAlsoModule,
+                        TuiTabsModule,
+                        TuiTagModule,
+                        TuiDocSourceCodeModule,
+                    ],
+                    declarations: [TuiDocPageComponent, TuiDocPageTabConnectorDirective],
+                    exports: [TuiDocPageComponent, TuiDocPageTabConnectorDirective],
+                }]
+        }] });
 
 const TUI_EXAMPLE_PRIMARY_FILE_NAME = {
-    TS: 'TypeScript',
-    LESS: 'LESS',
-    HTML: 'HTML',
+    TS: `TypeScript`,
+    LESS: `LESS`,
+    HTML: `HTML`,
 };
 
-// TODO: 3.0 remove in ivy compilation
-const DEMO_TEXTS = ['Сделано с помощью директивы: ', 'Фон', 'Детали формы'];
-const DOC_TEXTS = [
-    'Аргумент',
-    'Тип',
-    'Имя и описание',
-    'Значение',
-    'Для работы с динамическими шаблонами используется',
-];
-const EXAMPLE_TEXTS = ['Превью', 'Ссылка на пример скопирована', 'Готово'];
 const TUI_DOC_RUSSIAN = [
     {
         provide: TUI_DOC_DEMO_TEXTS,
-        useValue: DEMO_TEXTS,
+        useValue: [`Сделано с помощью директивы: `, `Фон`, `Детали формы`],
     },
     {
         provide: TUI_DOC_DOCUMENTATION_TEXTS,
-        useValue: DOC_TEXTS,
+        useValue: [
+            `Аргумент`,
+            `Тип`,
+            `Имя и описание`,
+            `Значение`,
+            `Для работы с динамическими шаблонами используется`,
+        ],
     },
     {
         provide: TUI_DOC_EXAMPLE_TEXTS,
-        useValue: EXAMPLE_TEXTS,
+        useValue: [`Превью`, `Ссылка на пример скопирована`, `Готово`],
     },
     {
         provide: TUI_DOC_MENU_TEXT,
-        useValue: 'Меню',
+        useValue: `Меню`,
     },
     {
         provide: TUI_DOC_SEARCH_TEXT,
-        useValue: 'Поиск',
+        useValue: `Поиск`,
     },
     {
         provide: TUI_DOC_SEE_ALSO_TEXT,
-        useValue: 'Смотрите также',
+        useValue: `Смотрите также`,
     },
     {
         provide: TUI_DOC_SOURCE_CODE_TEXT,
-        useValue: 'Исходный код',
+        useValue: `Исходный код`,
     },
 ];
 
-let TuiAddonDocModule = class TuiAddonDocModule {
-};
-TuiAddonDocModule = __decorate([
-    NgModule({
-        exports: [
-            TuiDocCodeModule,
-            TuiDocDemoModule,
-            TuiDocDocumentationModule,
-            TuiDocPageModule,
-            TuiDocExampleModule,
-        ],
-    })
-], TuiAddonDocModule);
+class TuiAddonDocModule {
+}
+TuiAddonDocModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiAddonDocModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+TuiAddonDocModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiAddonDocModule, exports: [TuiDocCodeModule,
+        TuiDocDemoModule,
+        TuiDocDocumentationModule,
+        TuiDocPageModule,
+        TuiDocExampleModule] });
+TuiAddonDocModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiAddonDocModule, imports: [TuiDocCodeModule,
+        TuiDocDemoModule,
+        TuiDocDocumentationModule,
+        TuiDocPageModule,
+        TuiDocExampleModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiAddonDocModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    exports: [
+                        TuiDocCodeModule,
+                        TuiDocDemoModule,
+                        TuiDocDocumentationModule,
+                        TuiDocPageModule,
+                        TuiDocExampleModule,
+                    ],
+                }]
+        }] });
 
-/**
- * @deprecated: use {@link tuiGenerateRoutes} instead
- * Generates typical page routing structure
- */
-// eslint-disable-next-line @typescript-eslint/naming-convention
-function generateRoutes(type) {
+function tuiGenerateRoutes(type) {
     return [
         {
-            path: '',
+            path: ``,
             component: type,
             children: [
                 {
-                    path: ':tab',
+                    path: `:tab`,
                     component: type,
                 },
             ],
         },
     ];
 }
-const tuiGenerateRoutes = generateRoutes;
 
 /**
  * Public API Surface of @taiga-ui/addon-doc
@@ -1771,5 +2119,5 @@ const tuiGenerateRoutes = generateRoutes;
  * Generated bundle index. Do not edit.
  */
 
-export { DEMO_TEXTS, DOC_TEXTS, EXAMPLE_TEXTS, ScrollIntoViewDirective, ScrollIntoViewModule, TUI_DOC_CODE_ACTIONS, TUI_DOC_CODE_EDITOR, TUI_DOC_DEFAULT_TABS, TUI_DOC_DEMO_TEXTS, TUI_DOC_DOCUMENTATION_TEXTS, TUI_DOC_EXAMPLE_CONTENT_PROCESSOR, TUI_DOC_EXAMPLE_TEXTS, TUI_DOC_LOGO, TUI_DOC_MENU_TEXT, TUI_DOC_PAGES, TUI_DOC_PAGE_LOADED, TUI_DOC_RUSSIAN, TUI_DOC_SCROLL_BEHAVIOR, TUI_DOC_SEARCH_TEXT, TUI_DOC_SEE_ALSO, TUI_DOC_SEE_ALSO_TEXT, TUI_DOC_SOURCE_CODE, TUI_DOC_SOURCE_CODE_TEXT, TUI_DOC_TITLE, TUI_EXAMPLE_PRIMARY_FILE_NAME, TuiAddonDocModule, TuiDocCodeComponent, TuiDocCodeModule, TuiDocCopyComponent, TuiDocCopyModule, TuiDocDemoComponent, TuiDocDemoModule, TuiDocDocumentationComponent, TuiDocDocumentationModule, TuiDocDocumentationPropertyConnectorDirective, TuiDocExampleComponent, TuiDocExampleModule, TuiDocMainComponent, TuiDocMainModule, TuiDocNavigationComponent, TuiDocNavigationModule, TuiDocPageComponent, TuiDocPageModule, TuiDocPageTabConnectorDirective, TuiScrollIntoViewLinkDirective, TuiScrollIntoViewLinkModule, coerceValue, generateRoutes, rawLoad, rawLoadRecord, tryParseMarkdownCodeBlock, tuiCoerceValue, tuiGenerateRoutes, tuiRawLoad, tuiRawLoadRecord, tuiTryParseMarkdownCodeBlock, TuiInputOpacityModule as ɵa, TuiInputOpacityDirective as ɵb, TuiDocExampleGetTabsPipe as ɵc, TuiDocExampleCapitalizePipe as ɵd, TuiDocHeaderModule as ɵe, NAVIGATION_TITLE as ɵf, NAVIGATION_LABELS as ɵg, NAVIGATION_ITEMS as ɵh, NAVIGATION_PROVIDERS as ɵi, titleProviderFactory as ɵj, labelsProviderFactory as ɵk, itemsProviderFactory as ɵl, TuiDocHeaderComponent as ɵm, PAGE_SEE_ALSO as ɵn, PAGE_PROVIDERS as ɵo, seeAlsoProviderFactory as ɵp, TuiDocSeeAlsoModule as ɵq, TuiDocSeeAlsoComponent as ɵr, TuiDocSourceCodeModule as ɵs, TuiDocSourceCodeComponent as ɵt };
+export { ScrollIntoViewDirective, ScrollIntoViewModule, TUI_DOC_CODE_ACTIONS, TUI_DOC_CODE_EDITOR, TUI_DOC_DEFAULT_TABS, TUI_DOC_DEMO_TEXTS, TUI_DOC_DOCUMENTATION_TEXTS, TUI_DOC_EXAMPLE_CONTENT_PROCESSOR, TUI_DOC_EXAMPLE_TEXTS, TUI_DOC_LOGO, TUI_DOC_MENU_TEXT, TUI_DOC_PAGES, TUI_DOC_PAGE_LOADED, TUI_DOC_RUSSIAN, TUI_DOC_SCROLL_BEHAVIOR, TUI_DOC_SEARCH_TEXT, TUI_DOC_SEE_ALSO, TUI_DOC_SEE_ALSO_TEXT, TUI_DOC_SOURCE_CODE, TUI_DOC_SOURCE_CODE_TEXT, TUI_DOC_TITLE, TUI_EXAMPLE_PRIMARY_FILE_NAME, TuiAddonDocModule, TuiDocCodeComponent, TuiDocCodeModule, TuiDocCopyComponent, TuiDocCopyModule, TuiDocDemoComponent, TuiDocDemoModule, TuiDocDocumentationComponent, TuiDocDocumentationModule, TuiDocDocumentationPropertyConnectorDirective, TuiDocExampleCapitalizePipe, TuiDocExampleComponent, TuiDocExampleGetTabsPipe, TuiDocExampleModule, TuiDocMainComponent, TuiDocMainModule, TuiDocNavigationComponent, TuiDocNavigationModule, TuiDocPageComponent, TuiDocPageModule, TuiDocPageTabConnectorDirective, TuiScrollIntoViewLinkDirective, TuiScrollIntoViewLinkModule, coerceValue, rawLoad, rawLoadRecord, tryParseMarkdownCodeBlock, tuiCoerceValue, tuiGenerateRoutes, tuiRawLoad, tuiRawLoadRecord, tuiTryParseMarkdownCodeBlock };
 //# sourceMappingURL=taiga-ui-addon-doc.js.map