@taiga-ui/addon-doc 2.20.0 → 2.24.0

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

@@ -1,25 +1,54 @@
-import { __decorate, __param, __assign, __spread, __read } from 'tslib';
-import { Input, HostBinding, Component, NgModule, Inject, ChangeDetectionStrategy, InjectionToken, Renderer2, PLATFORM_ID, ContentChild, TemplateRef, ViewChild, HostListener, forwardRef, Optional, ElementRef, Directive, EventEmitter, Output, ChangeDetectorRef, ContentChildren, Attribute, ViewEncapsulation } from '@angular/core';
+import { __awaiter, __generator, __decorate, __param, __assign, __spread, __read, __values } from 'tslib';
+import { Input, HostBinding, Component, NgModule, Inject, ChangeDetectionStrategy, InjectionToken, Renderer2, PLATFORM_ID, ContentChild, TemplateRef, ViewChild, HostListener, forwardRef, ChangeDetectorRef, Optional, ElementRef, Directive, EventEmitter, Output, ContentChildren, Attribute, Pipe, ViewEncapsulation } from '@angular/core';
+import { BehaviorSubject, Subject, timer, Observable, merge } from 'rxjs';
+import { switchMap, switchMapTo, mapTo, startWith, takeUntil, filter, map, mergeMap, debounceTime, distinctUntilChanged } from 'rxjs/operators';
 import { CommonModule, isPlatformBrowser, Location as Location$1, DOCUMENT } from '@angular/common';
 import { HighlightModule } from 'ngx-highlightjs';
-import { tuiPure, TuiDestroyService, TUI_IS_MOBILE, TuiDragModule, isPresent, uniqBy, getElementObscurers, TuiActiveZoneModule, TuiLetModule, TuiAutoFocusModule, EMPTY_QUERY, itemsQueryListObservable, watch, TUI_FOCUSABLE_ITEM_ACCESSOR, identity, tuiDefaultProp } from '@taiga-ui/cdk';
+import { tuiPure, TuiDestroyService, TUI_IS_MOBILE, TuiDragModule, isPresent, uniqBy, getElementObscurers, TuiActiveZoneModule, TuiLetModule, TuiAutoFocusModule, EMPTY_QUERY, itemsQueryListObservable, watch, TUI_FOCUSABLE_ITEM_ACCESSOR, identity, TuiSwipeService, tuiDefaultProp } from '@taiga-ui/cdk';
 import { TUI_COPY_TEXTS, TuiSelectModule, TuiRadioBlockModule, TuiCheckboxLabeledModule, TuiDataListWrapperModule, TuiAccordionModule, TuiBadgeModule, TuiToggleModule, TuiInputCountModule, TuiTabsModule, TuiTagModule } from '@taiga-ui/kit';
-import { Subject, timer, Observable, merge } from 'rxjs';
-import { switchMapTo, mapTo, startWith, takeUntil, filter, map, mergeMap, debounceTime, switchMap, distinctUntilChanged } from 'rxjs/operators';
-import { TuiButtonModule, TuiModeDirective, TuiLinkModule, TuiExpandModule, TuiGroupModule, TuiTooltipModule, TuiModeModule, TuiSvgModule, TuiDataListModule, TuiTextfieldControllerModule, TuiHintControllerModule, TuiPrimitiveTextfieldModule, TuiHostedDropdownModule, TuiDropdownControllerModule, TuiScrollbarModule, TuiNotificationsService, TuiThemeNightModule, TuiRootModule, TuiDialogModule, TuiNotificationsModule } from '@taiga-ui/core';
+import { TuiButtonModule, TuiModeDirective, TuiLinkModule, TuiExpandModule, TuiGroupModule, TuiTooltipModule, TuiModeModule, TuiSvgModule, TuiDataListModule, TuiTextfieldControllerModule, TuiHintControllerModule, TuiPrimitiveTextfieldModule, TuiHostedDropdownModule, TuiDropdownControllerModule, TuiScrollbarModule, TuiNotificationModule, TuiNotificationsService, TuiThemeNightModule, TuiRootModule, TuiDialogModule, TuiNotificationsModule } from '@taiga-ui/core';
 import { FormControl, FormGroup, ReactiveFormsModule, FormsModule } from '@angular/forms';
 import { UrlSerializer, RouterModule, Router, ActivatedRoute, NavigationEnd } from '@angular/router';
 import { Title } from '@angular/platform-browser';
 import { TuiSidebarDirective, TuiSidebarModule } from '@taiga-ui/addon-mobile';
+import { trigger, transition, style, animate } from '@angular/animations';
 import { Clipboard, ClipboardModule } from '@angular/cdk/clipboard';
 import { LOCATION, LOCAL_STORAGE, WINDOW } from '@ng-web-apis/common';
 import { PolymorpheusModule } from '@tinkoff/ng-polymorpheus';
 
+function rawLoad(content) {
+    return __awaiter(this, void 0, void 0, function () {
+        var _a;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    if (!(content instanceof Promise)) return [3 /*break*/, 2];
+                    return [4 /*yield*/, content];
+                case 1:
+                    _a = (_b.sent()).default;
+                    return [3 /*break*/, 3];
+                case 2:
+                    _a = content;
+                    _b.label = 3;
+                case 3: return [2 /*return*/, _a];
+            }
+        });
+    });
+}
+
 var TuiDocCodeComponent = /** @class */ (function () {
     function TuiDocCodeComponent() {
+        this.rawLoader$$ = new BehaviorSubject('');
+        this.processor$ = this.rawLoader$$.pipe(switchMap(rawLoad));
         this.filename = '';
-        this.code = '';
     }
+    Object.defineProperty(TuiDocCodeComponent.prototype, "code", {
+        set: function (code) {
+            this.rawLoader$$.next(code);
+        },
+        enumerable: true,
+        configurable: true
+    });
     Object.defineProperty(TuiDocCodeComponent.prototype, "hasFilename", {
         get: function () {
             return !!this.filename;
@@ -32,14 +61,14 @@ var TuiDocCodeComponent = /** @class */ (function () {
     ], TuiDocCodeComponent.prototype, "filename", void 0);
     __decorate([
         Input()
-    ], TuiDocCodeComponent.prototype, "code", void 0);
+    ], TuiDocCodeComponent.prototype, "code", null);
     __decorate([
         HostBinding('class._has-filename')
     ], TuiDocCodeComponent.prototype, "hasFilename", null);
     TuiDocCodeComponent = __decorate([
         Component({
             selector: 'tui-doc-code',
-            template: "<p *ngIf=\"filename\" class=\"t-header\">{{filename}}</p>\n<pre class=\"t-code\"><code [lineNumbers]=\"true\" [highlight]=\"code\"></code></pre>\n",
+            template: "<p *ngIf=\"filename\" class=\"t-header\">{{filename}}</p>\n<pre\n    class=\"t-code\"\n><code [lineNumbers]=\"true\" [highlight]=\"processor$ | async\"></code></pre>\n",
             styles: [":host{display:block}.t-header{font:var(--tui-font-text-s);font-weight:700}.t-code{margin:0}.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:6px 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}@media screen and (max-width:47.9375em){.hljs:not(:empty){padding:1rem}}"]
         })
     ], TuiDocCodeComponent);
@@ -85,7 +114,7 @@ var TuiDocCopyComponent = /** @class */ (function () {
     TuiDocCopyComponent = __decorate([
         Component({
             selector: 'tui-doc-copy',
-            template: "<button\n    *ngIf=\"texts$ | async as texts\"\n    tuiButton\n    type=\"button\"\n    class=\"t-copy\"\n    appearance=\"\"\n    size=\"s\"\n    [title]=\"texts[0]\"\n    (click)=\"onClick()\"\n>\n    <span class=\"t-content\" [class.t-content_moved]=\"copied$ | async\">\n        <span class=\"t-initial\" [attr.data-text]=\"texts[0]\">\n            <ng-content></ng-content>\n        </span>\n        {{texts[1]}}\n    </span>\n</button>\n",
+            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 class=\"t-content\" [class.t-content_moved]=\"copied$ | async\">\n        <span class=\"t-initial\" [attr.data-text]=\"texts[0]\">\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)}"]
@@ -115,7 +144,9 @@ var TuiDocCopyModule = /** @class */ (function () {
  * Works with a tuple
  * [@string tuiMode tooltip content, @string word 'background', @string 'form value']
  */
-var TUI_DOC_DEMO_TEXTS = new InjectionToken('tui-doc-demo i18n texts', { factory: function () { return ['Read more more about modes: ', 'Background', 'Form value']; } });
+var TUI_DOC_DEMO_TEXTS = new InjectionToken('tui-doc-demo i18n texts', {
+    factory: function () { return ['Read more more about modes: ', 'Background', 'Form value']; },
+});
 /**
  * Works with a tuple
  * [
@@ -143,15 +174,21 @@ var TUI_DOC_DOCUMENTATION_TEXTS = new InjectionToken('tui-doc-documentation i18n
  * @string link to a sample copied message label
  * ]
  */
-var TUI_DOC_EXAMPLE_TEXTS = new InjectionToken('tui-doc-example i18n texts', { factory: function () { return ['Preview', 'Link to a sample was successfully copied', 'Done']; } });
+var TUI_DOC_EXAMPLE_TEXTS = new InjectionToken('tui-doc-example i18n texts', {
+    factory: function () { return ['Preview', 'Link to a sample was successfully copied', 'Done']; },
+});
 var TUI_DOC_MENU_TEXT = new InjectionToken('menu i18n text', {
     factory: function () { return 'Menu'; },
 });
 var TUI_DOC_SEARCH_TEXT = new InjectionToken('search i18n text', {
     factory: function () { return 'Search'; },
 });
-var TUI_DOC_SEE_ALSO_TEXT = new InjectionToken('tui-doc-see-also i18n text', { factory: function () { return 'See also'; } });
-var TUI_DOC_SOURCE_CODE_TEXT = new InjectionToken('tui-doc-source-code i18n text', { factory: function () { return 'Source code'; } });
+var TUI_DOC_SEE_ALSO_TEXT = new InjectionToken('tui-doc-see-also i18n text', {
+    factory: function () { return 'See also'; },
+});
+var TUI_DOC_SOURCE_CODE_TEXT = new InjectionToken('tui-doc-source-code i18n text', {
+    factory: function () { return 'Source code'; },
+});
 
 var MIN_COMPONENT_WIDTH = 104;
 // @dynamic
@@ -272,7 +309,7 @@ var TuiDocDemoComponent = /** @class */ (function () {
     TuiDocDemoComponent = TuiDocDemoComponent_1 = __decorate([
         Component({
             selector: 'tui-doc-demo',
-            template: "<div class=\"t-bg-toggle\" [tuiMode]=\"null\">\n    <ng-template #tooltip>\n        {{texts[0]}}\n        <a tuiLink tuiMode=\"onDark\" routerLink=\"/directives/mode\">\n            <code>tuiMode</code>\n        </a>\n    </ng-template>\n    <ng-container *ngIf=\"isMobile else desktop\">\n        <tui-select\n            class=\"t-mode\"\n            tuiTextfieldSize=\"s\"\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 describeId=\"form\" [content]=\"tooltip\"></tui-tooltip>\n        <div tuiGroup class=\"tui-space_left-3\" [collapsed]=\"true\">\n            <tui-radio-block\n                class=\"tui-group__auto-width-item\"\n                size=\"s\"\n                nativeId=\"form\"\n                [item]=\"null\"\n                [hideRadio]=\"true\"\n                [formControl]=\"modeControl\"\n            >\n                null\n            </tui-radio-block>\n            <tui-radio-block\n                class=\"tui-group__auto-width-item\"\n                item=\"onDark\"\n                size=\"s\"\n                nativeId=\"form\"\n                [hideRadio]=\"true\"\n                [formControl]=\"modeControl\"\n            >\n                onDark\n            </tui-radio-block>\n            <tui-radio-block\n                class=\"tui-group__auto-width-item\"\n                item=\"onLight\"\n                size=\"s\"\n                nativeId=\"form\"\n                [hideRadio]=\"true\"\n                [formControl]=\"modeControl\"\n            >\n                onLight\n            </tui-radio-block>\n        </div>\n    </ng-template>\n    <tui-checkbox-labeled\n        class=\"tui-space_left-3\"\n        size=\"m\"\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 #content id=\"demoContent\" class=\"t-content\">\n        <form *ngIf=\"testForm\" class=\"t-form\" [formGroup]=\"testForm\">\n            <div class=\"t-input-wrapper\">\n                <ng-container *ngTemplateOutlet=\"template\"></ng-container>\n            </div>\n            <button\n                tuiButton\n                type=\"button\"\n                class=\"tui-space_top-3\"\n                size=\"s\"\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 class=\"t-expand\" [expanded]=\"expanded\">\n                <ng-template tuiExpandContent>\n                    <pre class=\"t-value\">\nForm data: {{testForm.value | json}}</pre\n                    >\n                    <div tuiGroup class=\"tui-space_top-3\">\n                        <tui-select\n                            class=\"t-select\"\n                            tuiTextfieldSize=\"s\"\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                            class=\"tui-group__auto-width-item\"\n                            type=\"reset\"\n                            size=\"s\"\n                        >\n                            Reset\n                        </button>\n                        <button\n                            tuiButton\n                            class=\"tui-group__auto-width-item\"\n                            type=\"submit\"\n                            size=\"s\"\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        class=\"t-resizer\"\n        tabindex=\"-1\"\n        (tuiDragStart)=\"onDragStart($event)\"\n        (tuiDragContinues)=\"onDragContinues($event)\"\n        (tuiDragEnd)=\"onDragEnd()\"\n    >\n        <span #resizerText class=\"t-resizer-text\"></span>\n    </button>\n</div>\n",
+            template: "<div class=\"t-bg-toggle\" [tuiMode]=\"null\">\n    <ng-template #tooltip>\n        {{ texts[0] }}\n        <a tuiLink tuiMode=\"onDark\" routerLink=\"/directives/mode\">\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 describeId=\"form\" [content]=\"tooltip\"></tui-tooltip>\n        <div tuiGroup class=\"tui-space_left-3\" [collapsed]=\"true\">\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=\"tui-space_left-3\"\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 #content id=\"demoContent\" class=\"t-content\">\n        <form *ngIf=\"testForm\" class=\"t-form\" [formGroup]=\"testForm\">\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=\"tui-space_top-3\"\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 class=\"t-expand\" [expanded]=\"expanded\">\n                <ng-template tuiExpandContent>\n                    <pre class=\"t-value\">\nForm data: {{ testForm.value | json }}</pre\n                    >\n                    <div tuiGroup class=\"tui-space_top-3\">\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 #resizerText class=\"t-resizer-text\"></span>\n    </button>\n</div>\n",
             changeDetection: ChangeDetectionStrategy.OnPush,
             providers: [
                 TuiDestroyService,
@@ -281,7 +318,7 @@ var TuiDocDemoComponent = /** @class */ (function () {
                     useExisting: forwardRef(function () { return 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.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.wrapper_dark{background-color:#454e58;color:var(--tui-base-01)}.t-wrapper.wrapper_gray{background-color:#e5e7ea}.t-wrapper.wrapper_dark.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.wrapper_gray.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%)}.t-content{flex:1 1 0;min-width:0;padding:1.5rem;box-sizing:border-box;overflow:hidden}@media screen and (max-width:47.9375em){.t-wrapper{min-height:auto}.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)}@media screen and (max-width:47.9375em){.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}@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}}}"]
+            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%)}.t-content{flex:1 1 0;min-width:0;padding:1.5rem;box-sizing:border-box;overflow:hidden}@media screen and (max-width:47.9375em){.t-wrapper{min-height:auto}.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)}@media screen and (max-width:47.9375em){.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}@supports (position:sticky){@media screen and (min-height:37.5rem){:host{position:sticky;top:4.625rem;z-index:2}}}"]
         }),
         __param(0, Inject(TUI_IS_MOBILE)),
         __param(1, Inject(TuiDestroyService)),
@@ -434,7 +471,7 @@ function itemsProviderFactory(pages) {
 var SCROLL_INTO_VIEW_DELAY = 200;
 // @dynamic
 var TuiDocNavigationComponent = /** @class */ (function () {
-    function TuiDocNavigationComponent(titleService, title$, documentRef, mode, sidebar, labels, items, searchText, router, activatedRoute) {
+    function TuiDocNavigationComponent(changeDetectorRef, titleService, title$, documentRef, mode, sidebar, labels, items, searchText, router, activatedRoute) {
         var _this = this;
         this.documentRef = documentRef;
         this.mode = mode;
@@ -454,6 +491,7 @@ var TuiDocNavigationComponent = /** @class */ (function () {
         // Angular can't navigate no anchor links
         // https://stackoverflow.com/questions/36101756/angular2-routing-with-hashtag-to-page-anchor
         title$.subscribe(function (title) {
+            changeDetectorRef.markForCheck();
             titleService.setTitle(title);
             _this.openActivePageGroup();
             _this.handleAnchorLink(_this.activatedRoute.snapshot.fragment);
@@ -543,7 +581,7 @@ var TuiDocNavigationComponent = /** @class */ (function () {
                     page.subPages.forEach(function (subPage) {
                         if (_this.isActiveRoute(subPage.route)) {
                             _this.openPagesArr[pagesIndex] = true;
-                            _this.openPagesGroupsArr[pagesIndex + pageIndex] = true;
+                            _this.openPagesGroupsArr[pagesIndex * 100 + pageIndex] = true;
                             _this.active = subPage.route;
                         }
                     });
@@ -564,6 +602,7 @@ var TuiDocNavigationComponent = /** @class */ (function () {
         });
     };
     TuiDocNavigationComponent.ctorParameters = function () { return [
+        { 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,] }] },
@@ -587,22 +626,23 @@ var TuiDocNavigationComponent = /** @class */ (function () {
     TuiDocNavigationComponent = __decorate([
         Component({
             selector: 'tui-doc-navigation',
-            template: "<tui-hosted-dropdown\n    *tuiLet=\"filteredItems as filtered\"\n    class=\"input\"\n    tuiAutoFocus\n    tuiDropdownLimitWidth=\"fixed\"\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 #dropdown let-activeZone>\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=\"navigation\">\n    <tui-scrollbar [tuiMode]=\"mode$ | async\" class=\"scrollbar\">\n        <tui-accordion [closeOthers]=\"false\" [rounded]=\"false\">\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=\"tui-space_left-2\">\n                    <strong>{{label}}</strong>\n                </span>\n                <ng-template tuiAccordionItemContent>\n                    <div class=\"section\">\n                        <ng-container\n                            *ngFor=\"let item of items[index]; index as subIndex\"\n                        >\n                            <ng-container\n                                *ngTemplateOutlet=\"pages; context: {item: item, index: index + subIndex}\"\n                            >\n                            </ng-container>\n                        </ng-container>\n                    </div>\n                </ng-template>\n            </tui-accordion-item>\n        </tui-accordion>\n        <div class=\"items-container\">\n            <ng-container\n                *ngFor=\"let item of itemsWithoutSections; let index = index\"\n            >\n                <ng-container\n                    *ngTemplateOutlet=\"pages; context: {item: item, index: (items.length - 1) + index}\"\n                >\n                </ng-container>\n            </ng-container>\n        </div>\n\n        <ng-template #pages let-item=\"item\" let-index=\"index\">\n            <a\n                *ngIf=\"!item.subPages; else subPages\"\n                tuiLink\n                class=\"sublink\"\n                routerLinkActive=\"sublink_active\"\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=\"subsection\"\n                    [routerLinkActiveOptions]=\"{exact: false}\"\n                >\n                    <button\n                        *ngIf=\"item.subPages\"\n                        tuiLink\n                        type=\"button\"\n                        class=\"sublink sublink_subsection\"\n                        (click)=\"onGroupClick(index)\"\n                    >\n                        <tui-svg\n                            src=\"tuiIconChevronRight\"\n                            class=\"chevron\"\n                            [class.chevron_active]=\"!!openPagesGroupsArr[index]\"\n                        ></tui-svg>\n                        {{item.title}}\n                    </button>\n                    <tui-expand\n                        class=\"tui-space_left-1\"\n                        [expanded]=\"!!openPagesGroupsArr[index]\"\n                    >\n                        <div class=\"section section_bordered\">\n                            <a\n                                *ngFor=\"let subPage of item.subPages\"\n                                tuiLink\n                                class=\"sublink sublink_small\"\n                                routerLinkActive=\"sublink_active\"\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",
+            template: "<tui-hosted-dropdown\n    *tuiLet=\"filteredItems as filtered\"\n    tuiAutoFocus\n    tuiDropdownLimitWidth=\"fixed\"\n    class=\"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 #dropdown let-activeZone>\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=\"navigation\">\n    <tui-scrollbar class=\"scrollbar\" [tuiMode]=\"mode$ | async\">\n        <tui-accordion [closeOthers]=\"false\" [rounded]=\"false\">\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=\"tui-space_left-2\">\n                    <strong>{{ label }}</strong>\n                </span>\n                <ng-template tuiAccordionItemContent>\n                    <div class=\"section\">\n                        <ng-container\n                            *ngFor=\"let item of items[index]; index as subIndex\"\n                        >\n                            <ng-container\n                                *ngTemplateOutlet=\"pages; context: {item: item, index: index * 100 + subIndex}\"\n                            ></ng-container>\n                        </ng-container>\n                    </div>\n                </ng-template>\n            </tui-accordion-item>\n        </tui-accordion>\n        <div class=\"items-container\">\n            <ng-container\n                *ngFor=\"let item of itemsWithoutSections; let index = index\"\n            >\n                <ng-container\n                    *ngTemplateOutlet=\"pages; context: {item: item, index: items.length - 1 + index}\"\n                ></ng-container>\n            </ng-container>\n        </div>\n\n        <ng-template #pages let-item=\"item\" let-index=\"index\">\n            <a\n                *ngIf=\"!item.subPages; else subPages\"\n                tuiLink\n                routerLinkActive=\"sublink_active\"\n                class=\"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=\"subsection\"\n                    [routerLinkActiveOptions]=\"{exact: false}\"\n                >\n                    <button\n                        *ngIf=\"item.subPages\"\n                        tuiLink\n                        type=\"button\"\n                        class=\"sublink sublink_subsection\"\n                        (click)=\"onGroupClick(index)\"\n                    >\n                        <tui-svg\n                            src=\"tuiIconChevronRight\"\n                            class=\"chevron\"\n                            [class.chevron_active]=\"!!openPagesGroupsArr[index]\"\n                        ></tui-svg>\n                        {{ item.title }}\n                    </button>\n                    <tui-expand\n                        class=\"tui-space_left-1\"\n                        [expanded]=\"!!openPagesGroupsArr[index]\"\n                    >\n                        <div class=\"section section_bordered\">\n                            <a\n                                *ngFor=\"let subPage of item.subPages\"\n                                tuiLink\n                                routerLinkActive=\"sublink_active\"\n                                class=\"sublink 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{display:flex;flex-direction:column;text-align:center;background:var(--tui-base-01);z-index:1}.input{display:block;margin:1.25rem}.navigation{display:flex;max-height:100%;min-height:0;flex:1 1 0;text-align:left}.scrollbar{width:100%;scroll-behavior:smooth}.items-container{display:flex;flex-direction:column;padding:0 16px}.section{display:flex;flex-direction:column;align-items:flex-start;margin:-1rem 0 -.5rem}.section_bordered{margin:.5rem 0;border-left:1px solid var(--tui-base-03)}.subsection{margin-left:.5rem}.sublink{-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:0;border:0;background:0 0;font-size:inherit;font:var(--tui-font-text-m);margin-left:.5rem;line-height:2.75rem}.sublink_small{margin-left:1rem;line-height:1.5rem}.sublink_small:not(:first-child){margin-top:1rem}.sublink_subsection{margin-left:0;line-height:2.75rem}.sublink_active{color:var(--tui-text-01)}.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}.chevron_active{transform:rotate(90deg)}"]
+            styles: [":host{z-index:1;display:flex;flex-direction:column;text-align:center;background:var(--tui-base-01)}.input{display:block;margin:1.25rem}.navigation{display:flex;max-height:100%;min-height:0;flex:1 1 0;text-align:left}.scrollbar{width:100%;scroll-behavior:smooth}.items-container{display:flex;flex-direction:column;padding:0 16px}.section{display:flex;flex-direction:column;align-items:flex-start;margin:-1rem 0 -.5rem}.section_bordered{margin:.5rem 0;border-left:1px solid var(--tui-base-03)}.subsection{margin-left:.5rem}.sublink{-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:0;border:0;background:0 0;font-size:inherit;font:var(--tui-font-text-m);margin-left:.5rem;line-height:2.75rem}.sublink_small{margin-left:1rem;line-height:1.5rem}.sublink_small:not(:first-child){margin-top:1rem}.sublink_subsection{margin-left:0;line-height:2.75rem}.sublink_active{color:var(--tui-text-01)}.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}.chevron_active{transform:rotate(90deg)}"]
         }),
-        __param(0, Inject(Title)),
-        __param(1, Inject(NAVIGATION_TITLE)),
-        __param(2, Inject(DOCUMENT)),
-        __param(3, Inject(TuiModeDirective)),
-        __param(4, Optional()),
-        __param(4, Inject(TuiSidebarDirective)),
-        __param(5, Inject(NAVIGATION_LABELS)),
-        __param(6, Inject(NAVIGATION_ITEMS)),
-        __param(7, Inject(TUI_DOC_SEARCH_TEXT)),
-        __param(8, Inject(Router)),
-        __param(9, Inject(ActivatedRoute))
+        __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))
     ], TuiDocNavigationComponent);
     return TuiDocNavigationComponent;
 }());
@@ -790,6 +830,7 @@ var TuiDocDocumentationPropertyConnectorDirective = /** @class */ (function () {
         this.documentationPropertyValues = null;
         this.documentationPropertyValueChange = new EventEmitter();
         this.changed$ = new Subject();
+        this.emits$ = new BehaviorSubject(1);
     }
     TuiDocDocumentationPropertyConnectorDirective.prototype.ngOnInit = function () {
         this.parseParams(this.activatedRoute.snapshot.queryParams);
@@ -858,6 +899,11 @@ var TuiDocDocumentationPropertyConnectorDirective = /** @class */ (function () {
         tree.queryParams = __assign(__assign({}, tree.queryParams), (_a = {}, _a[propName] = computedValue, _a));
         this.locationRef.go(String(tree));
     };
+    TuiDocDocumentationPropertyConnectorDirective.prototype.emitEvent = function (event) {
+        // For more convenient debugging
+        console.log(this.attrName, event);
+        this.emits$.next(this.emits$.value + 1);
+    };
     TuiDocDocumentationPropertyConnectorDirective.ctorParameters = function () { return [
         { type: TemplateRef, decorators: [{ type: Inject, args: [TemplateRef,] }] },
         { type: Location$1, decorators: [{ type: Inject, args: [Location$1,] }] },
@@ -888,6 +934,7 @@ var TuiDocDocumentationPropertyConnectorDirective = /** @class */ (function () {
     TuiDocDocumentationPropertyConnectorDirective = __decorate([
         Directive({
             selector: 'ng-template[documentationPropertyName]',
+            exportAs: 'documentationProperty',
         }),
         __param(0, Inject(TemplateRef)),
         __param(1, Inject(Location$1)),
@@ -1013,9 +1060,14 @@ var TuiDocDocumentationComponent = /** @class */ (function () {
     TuiDocDocumentationComponent = __decorate([
         Component({
             selector: 'tui-doc-documentation',
-            template: "<h1 *ngIf=\"heading\" class=\"tui-text_h4\">{{heading}}</h1>\n<ng-content></ng-content>\n<table class=\"tui-table tui-table_layout_fixed tui-table_font-size_s\">\n    <tr class=\"tui-table__tr tui-table__tr_hover_disabled t-row t-row_header\">\n        <th class=\"tui-table__th tui-table__th_first t-cell t-cell_prop\">\n            {{texts[2]}}\n        </th>\n        <td class=\"tui-table__th\">{{type}}</td>\n        <td\n            *ngIf=\"showValues && !isAPI\"\n            class=\"\n                tui-table__th tui-table__th_last tui-table__th_text_right\n                t-cell t-cell_value\n            \"\n        >\n            {{texts[3]}}\n        </td>\n    </tr>\n    <tr\n        *ngFor=\"let propertyConnector of propertiesConnectors; last as lastItem\"\n        class=\"tui-table__tr tui-table__tr_hover_disabled t-row\"\n        [class.t-deprecated]=\"propertyConnector.documentationPropertyDeprecated\"\n        [class.tui-table__tr_border_none]=\"lastItem\"\n    >\n        <td\n            class=\"\n                tui-table__td tui-table__td_first tui-table__td_align_center\n                t-cell\n            \"\n        >\n            <div\n                class=\"t-property t-cell\"\n                automation-id=\"tui-documentation__property-name\"\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                >deprecated</span\n            >\n            <ng-container\n                *ngTemplateOutlet=\"propertyConnector.template\"\n            ></ng-container>\n        </td>\n        <td class=\"tui-table__td tui-table__td_align_center 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/TinkoffCreditSystems/ng-polymorpheus\"\n                            ><code>ng-polymorpheus</code></a\n                        >\n                    </ng-template>\n                </tui-tooltip>\n            </span>\n        </td>\n        <td\n            *ngIf=\"showValues\"\n            class=\"\n                tui-table__td\n                tui-table__td_align_center\n                tui-table__td_last\n                tui-table__td_text_right\n                t-cell\n            \"\n        >\n            <ng-container *ngIf=\"propertyConnector.shouldShowValues\">\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 #selectContent let-data>\n                    <code>{{inspectAny(data)}}</code>\n                </ng-template>\n\n                <ng-template #noItems>\n                    <ng-container\n                        [ngSwitch]=\"propertyConnector.documentationPropertyType\"\n                    >\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 *ngSwitchCase=\"'color'\" tuiGroup>\n                            <tui-primitive-textfield\n                                tuiTextfieldType=\"color\"\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                    </ng-container>\n                </ng-template>\n            </ng-container>\n        </td>\n    </tr>\n</table>\n",
+            template: "<h1 *ngIf=\"heading\" class=\"tui-text_h4\">{{ heading }}</h1>\n<ng-content></ng-content>\n<table class=\"tui-table tui-table_layout_fixed tui-table_font-size_s\">\n    <tr class=\"tui-table__tr tui-table__tr_hover_disabled t-row t-row_header\">\n        <th class=\"tui-table__th tui-table__th_first t-cell t-cell_prop\">\n            {{ texts[2] }}\n        </th>\n        <td class=\"tui-table__th\">{{ type }}</td>\n        <td\n            *ngIf=\"showValues && !isAPI\"\n            class=\"\n                tui-table__th tui-table__th_last tui-table__th_text_right\n                t-cell t-cell_value\n            \"\n        >\n            {{ texts[3] }}\n        </td>\n    </tr>\n    <tr\n        *ngFor=\"let propertyConnector of propertiesConnectors; last as lastItem\"\n        class=\"tui-table__tr tui-table__tr_hover_disabled t-row\"\n        [class.t-deprecated]=\"propertyConnector.documentationPropertyDeprecated\"\n        [class.tui-table__tr_border_none]=\"lastItem\"\n    >\n        <td\n            class=\"\n                tui-table__td tui-table__td_first tui-table__td_align_center\n                t-cell\n            \"\n        >\n            <div\n                automation-id=\"tui-documentation__property-name\"\n                class=\"t-property t-cell\"\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\n                *ngTemplateOutlet=\"propertyConnector.template\"\n            ></ng-container>\n        </td>\n        <td class=\"tui-table__td tui-table__td_align_center 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/TinkoffCreditSystems/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=\"\n                tui-table__td\n                tui-table__td_align_center\n                tui-table__td_last\n                tui-table__td_text_right\n                t-cell\n            \"\n        >\n            <ng-container\n                *ngIf=\"propertyConnector.shouldShowValues; else elseEmitter\"\n            >\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 #selectContent let-data>\n                    <code>{{ inspectAny(data) }}</code>\n                </ng-template>\n\n                <ng-template #noItems>\n                    <ng-container\n                        [ngSwitch]=\"propertyConnector.documentationPropertyType\"\n                    >\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 *ngSwitchCase=\"'color'\" tuiGroup>\n                            <tui-primitive-textfield\n                                tuiTextfieldType=\"color\"\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                    </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,
-            styles: [":host{display:block;min-width:100%}.t-cell_prop{width:40%}.t-cell_value{max-width:20rem}@media screen and (max-width:47.9375em){.t-row{display:flex;flex-wrap:wrap}.t-row_header{display:none}.t-cell_value{width:9.375rem}.t-cell{width:100%;height:auto;padding:.5rem 0;text-align:left}}.t-property{font:var(--tui-font-text-m);margin-bottom:.25rem;font-family:monospace;color:#8f75d1}.t-type{font-family:monospace}.t-deprecated{background-color:var(--tui-error-bg)}.t-deprecated-label{margin-right:.125rem;color:var(--tui-error-fill)}"]
+            animations: [
+                trigger('emitEvent', [
+                    transition(':increment', [style({ opacity: 1 }), animate('500ms ease-in')]),
+                ]),
+            ],
+            styles: [":host{display:block;min-width:100%}.t-cell_prop{width:40%}.t-cell_value{max-width:20rem}@media screen and (max-width:47.9375em){.t-row{display:flex;flex-wrap:wrap}.t-row_header{display:none}.t-cell_value{width:9.375rem}.t-cell{width:100%;height:auto;padding:.5rem 0;text-align:left}}.t-property{font:var(--tui-font-text-m);margin-bottom:.25rem;font-family:monospace;color:#8f75d1}.t-type{font-family:monospace}.t-deprecated{background-color: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}"]
         }),
         __param(0, Inject(ChangeDetectorRef)),
         __param(1, Inject(TUI_DOC_DOCUMENTATION_TEXTS))
@@ -1091,6 +1143,7 @@ var TuiDocDocumentationModule = /** @class */ (function () {
                 TuiDropdownControllerModule,
                 TuiDataListModule,
                 TuiDataListWrapperModule,
+                TuiNotificationModule,
             ],
             declarations: [
                 TuiDocDocumentationComponent,
@@ -1107,9 +1160,49 @@ var TuiDocDocumentationModule = /** @class */ (function () {
 
 var TUI_DOC_CODE_EDITOR = new InjectionToken('Contains service for opening online IDE e.g. Stackblitz');
 
-var TUI_DOC_EXAMPLE_CONTENT_PROCESSOR = new InjectionToken('Processes content in example', {
-    factory: function () { return identity; },
-});
+var TUI_DOC_EXAMPLE_CONTENT_PROCESSOR = new InjectionToken('Processes content in example', { factory: function () { return identity; } });
+
+function rawLoadRecord(example) {
+    return __awaiter(this, void 0, void 0, function () {
+        var processedContent, _a, _b, _c, key, content, _d, _e, e_1_1;
+        var e_1, _f;
+        return __generator(this, function (_g) {
+            switch (_g.label) {
+                case 0:
+                    processedContent = {};
+                    _g.label = 1;
+                case 1:
+                    _g.trys.push([1, 6, 7, 8]);
+                    _a = __values(Object.entries(example)), _b = _a.next();
+                    _g.label = 2;
+                case 2:
+                    if (!!_b.done) return [3 /*break*/, 5];
+                    _c = __read(_b.value, 2), key = _c[0], content = _c[1];
+                    _d = processedContent;
+                    _e = key;
+                    return [4 /*yield*/, rawLoad(content)];
+                case 3:
+                    _d[_e] = _g.sent();
+                    _g.label = 4;
+                case 4:
+                    _b = _a.next();
+                    return [3 /*break*/, 2];
+                case 5: return [3 /*break*/, 8];
+                case 6:
+                    e_1_1 = _g.sent();
+                    e_1 = { error: e_1_1 };
+                    return [3 /*break*/, 8];
+                case 7:
+                    try {
+                        if (_b && !_b.done && (_f = _a.return)) _f.call(_a);
+                    }
+                    finally { if (e_1) throw e_1.error; }
+                    return [7 /*endfinally*/];
+                case 8: return [2 /*return*/, processedContent];
+            }
+        });
+    });
+}
 
 // Ambient type cannot be used without dynamic https://github.com/angular/angular/issues/23395
 // @dynamic
@@ -1123,49 +1216,21 @@ var TuiDocExampleComponent = /** @class */ (function () {
         this.texts = texts;
         this.codeEditor = codeEditor;
         this.processContent = processContent;
+        this.rawLoader$$ = new BehaviorSubject({});
         this.heading = '';
         this.description = '';
         this.componentName = this.location.pathname.slice(1);
         this.activeItemIndex = 0;
-        this.processedContent = {};
         this.defaultTab = this.texts[0];
         this.copy$ = this.copyTexts$.pipe(map(function (_a) {
             var _b = __read(_a, 1), copy = _b[0];
             return copy;
         }));
+        this.processor$ = this.rawLoader$$.pipe(switchMap(rawLoadRecord), map(this.processContent));
     }
     Object.defineProperty(TuiDocExampleComponent.prototype, "content", {
         set: function (content) {
-            this.processedContent = this.processContent(content);
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(TuiDocExampleComponent.prototype, "activeItem", {
-        get: function () {
-            return this.tabs[this.activeItemIndex];
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(TuiDocExampleComponent.prototype, "tabs", {
-        get: function () {
-            return this.getTabs(this.processedContent);
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(TuiDocExampleComponent.prototype, "code", {
-        get: function () {
-            var code = this.processedContent[this.activeItem];
-            return code ? code.trim() : '';
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(TuiDocExampleComponent.prototype, "isDefaultItem", {
-        get: function () {
-            return this.activeItem === this.defaultTab;
+            this.rawLoader$$.next(content);
         },
         enumerable: true,
         configurable: true
@@ -1184,9 +1249,6 @@ var TuiDocExampleComponent = /** @class */ (function () {
         })
             .subscribe();
     };
-    TuiDocExampleComponent.prototype.getTabs = function (content) {
-        return __spread([this.defaultTab], Object.keys(content));
-    };
     TuiDocExampleComponent.ctorParameters = function () { return [
         { type: String, decorators: [{ type: Attribute, args: ['id',] }] },
         { type: Clipboard, decorators: [{ type: Inject, args: [Clipboard,] }] },
@@ -1209,15 +1271,12 @@ var TuiDocExampleComponent = /** @class */ (function () {
     __decorate([
         Input()
     ], TuiDocExampleComponent.prototype, "componentName", void 0);
-    __decorate([
-        tuiPure
-    ], TuiDocExampleComponent.prototype, "getTabs", null);
     TuiDocExampleComponent = __decorate([
         Component({
             selector: 'tui-doc-example',
-            template: "<h3 *ngIf=\"heading\" class=\"t-title\">\n    <span polymorpheus-outlet [content]=\"heading\"></span>\n    <button\n        *ngIf=\"id\"\n        tuiIconButton\n        type=\"button\"\n        size=\"xs\"\n        class=\"t-link-icon\"\n        icon=\"tuiIconLinkLarge\"\n        appearance=\"icon\"\n        [title]=\"copy$ | async\"\n        (click)=\"copyExampleLink()\"\n    ></button>\n</h3>\n<h4\n    *ngIf=\"description\"\n    class=\"t-description\"\n    polymorpheus-outlet\n    [content]=\"description\"\n></h4>\n<div class=\"t-example\">\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 *tuiTab tuiTab>{{tab}}</button>\n            </ng-container>\n        </tui-tabs-with-more>\n\n        <button\n            *ngIf=\"codeEditor\"\n            tuiButton\n            appearance=\"flat\"\n            size=\"s\"\n            (click)=\"codeEditor.open(componentName, id || '',  processedContent)\"\n        >\n            Edit on {{codeEditor.name}}\n        </button>\n    </div>\n    <ng-container [ngSwitch]=\"activeItem\">\n        <div\n            *ngIf=\"isDefaultItem; else codeTab\"\n            class=\"t-demo\"\n            automation-id=\"tui-doc-example\"\n        >\n            <ng-content></ng-content>\n        </div>\n        <ng-template #codeTab>\n            <tui-doc-copy\n                class=\"t-copy-code\"\n                [cdkCopyToClipboard]=\"code\"\n            ></tui-doc-copy>\n            <tui-doc-code [code]=\"code\"></tui-doc-code>\n        </ng-template>\n    </ng-container>\n</div>\n",
+            template: "<h3 *ngIf=\"heading\" class=\"t-title\">\n    <span polymorpheus-outlet [content]=\"heading\"></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\"\n></h4>\n\n<div *ngIf=\"processor$ | async as content\" class=\"t-example\">\n    <ng-container *ngIf=\"content | 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 *tuiTab tuiTab>{{tab}}</button>\n                </ng-container>\n            </tui-tabs-with-more>\n\n            <button\n                *ngIf=\"codeEditor\"\n                tuiButton\n                appearance=\"flat\"\n                size=\"s\"\n                (click)=\"codeEditor.open(componentName, id || '',  content)\"\n            >\n                Edit on {{codeEditor.name}}\n            </button>\n        </div>\n\n        <ng-container\n            *ngIf=\"{\n                activeTab: tabs[activeItemIndex],\n                code: content[tabs[activeItemIndex]] || ''\n            } as state\"\n        >\n            <div\n                *ngIf=\"state.activeTab == defaultTab; else codeSection\"\n                automation-id=\"tui-doc-example\"\n                class=\"t-demo\"\n            >\n                <ng-content></ng-content>\n            </div>\n\n            <ng-template #codeSection>\n                <tui-doc-copy\n                    class=\"t-copy-code\"\n                    [cdkCopyToClipboard]=\"state.code\"\n                ></tui-doc-copy>\n                <tui-doc-code [code]=\"state.code\"></tui-doc-code>\n            </ng-template>\n        </ng-container>\n    </ng-container>\n</div>\n",
             changeDetection: ChangeDetectionStrategy.OnPush,
-            styles: [":host{position:relative;display:block;padding-top:3.5rem;clear:right}.t-title{font:var(--tui-font-heading-5);margin:0 0 .5rem}@media screen and (max-width:47.9375em){:host{padding-top:2rem}.t-title{font:var(--tui-font-heading-6)}}.t-description{font:var(--tui-font-text-m);font-weight:400;margin:0}.t-description:first-letter,.t-title:first-letter{text-transform:capitalize}.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)}.t-tabs-wrapper{padding:0 2rem;box-shadow:inset 0 -1px var(--tui-base-03);display:flex;justify-content:space-between;align-items:center}@media screen and (max-width:47.9375em){.t-example{margin-top:.75rem}.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:6px 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)}}@media screen and (max-width:47.9375em){.t-demo{padding:1rem}}.t-copy-code{position:absolute;top:4.375rem;right:1rem}.t-link-icon{margin-left:.3rem;vertical-align:baseline}"]
+            styles: [":host{position:relative;display:block;padding-top:3.5rem;clear:right}.t-title{font:var(--tui-font-heading-5);margin:0 0 .5rem}@media screen and (max-width:47.9375em){:host{padding-top:2rem}.t-title{font:var(--tui-font-heading-6)}}.t-description{font:var(--tui-font-text-m);font-weight:400;margin:0}.t-description:first-letter,.t-title:first-letter{text-transform:capitalize}.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)}.t-tabs-wrapper{display:flex;padding:0 2rem;box-shadow:inset 0 -1px var(--tui-base-03);justify-content:space-between;align-items:center}@media screen and (max-width:47.9375em){.t-example{margin-top:.75rem}.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:6px 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)}}@media screen and (max-width:47.9375em){.t-demo{padding:1rem}}.t-copy-code{position:absolute;top:4.375rem;right:1rem}.t-link-icon{margin-left:.3rem;vertical-align:baseline}"]
         }),
         __param(0, Attribute('id')),
         __param(1, Inject(Clipboard)),
@@ -1232,6 +1291,18 @@ var TuiDocExampleComponent = /** @class */ (function () {
     return TuiDocExampleComponent;
 }());
 
+var TuiDocExampleGetTabsPipe = /** @class */ (function () {
+    function TuiDocExampleGetTabsPipe() {
+    }
+    TuiDocExampleGetTabsPipe.prototype.transform = function (content, defaultTab) {
+        return __spread([defaultTab], Object.keys(content));
+    };
+    TuiDocExampleGetTabsPipe = __decorate([
+        Pipe({ name: 'tuiDocExampleGetTabs' })
+    ], TuiDocExampleGetTabsPipe);
+    return TuiDocExampleGetTabsPipe;
+}());
+
 var TuiDocExampleModule = /** @class */ (function () {
     function TuiDocExampleModule() {
     }
@@ -1246,8 +1317,8 @@ var TuiDocExampleModule = /** @class */ (function () {
                 TuiDocCodeModule,
                 PolymorpheusModule,
             ],
-            declarations: [TuiDocExampleComponent],
-            exports: [TuiDocExampleComponent],
+            declarations: [TuiDocExampleComponent, TuiDocExampleGetTabsPipe],
+            exports: [TuiDocExampleComponent, TuiDocExampleGetTabsPipe],
         })
     ], TuiDocExampleModule);
     return TuiDocExampleModule;
@@ -1291,8 +1362,9 @@ var TuiDocMainComponent = /** @class */ (function () {
                     provide: TuiModeDirective,
                     useExisting: forwardRef(function () { return TuiDocMainComponent_1; }),
                 },
+                TuiSwipeService,
             ],
-            styles: ["html{scroll-padding-top:4rem;height:auto}@-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(.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}:focus code:not(.exception){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}.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-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-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}"]
+            styles: ["html{scroll-padding-top:4rem;height:auto}tui-root>tui-scroll-controls{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(.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}:focus code:not(.exception){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}.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-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-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))
@@ -1305,12 +1377,13 @@ var TUI_DOC_LOGO = new InjectionToken('Main logo', {
 });
 
 var TuiDocHeaderComponent = /** @class */ (function () {
-    function TuiDocHeaderComponent(logo, menu, router) {
+    function TuiDocHeaderComponent(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$).pipe(startWith(false), distinctUntilChanged());
+        this.open$ = merge(this.router.events.pipe(mapTo(false)), this.stream$, this.swipes$.pipe(filter(function (swipe) { return swipe.direction === 'left' || swipe.direction === 'right'; }), map(function (swipe) { return swipe.direction === 'right'; }))).pipe(startWith(false), distinctUntilChanged());
     }
     TuiDocHeaderComponent.prototype.onClick = function () {
         this.stream$.next(true);
@@ -1323,18 +1396,20 @@ var TuiDocHeaderComponent = /** @class */ (function () {
     TuiDocHeaderComponent.ctorParameters = function () { return [
         { 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: Router, decorators: [{ type: Inject, args: [Router,] }] },
+        { type: TuiSwipeService, decorators: [{ type: Inject, args: [TuiSwipeService,] }] }
     ]; };
     TuiDocHeaderComponent = __decorate([
         Component({
             selector: 'header[tuiDocHeader]',
-            template: "<button\n    tuiIconButton\n    class=\"menu\"\n    icon=\"tuiIconMenuLarge\"\n    appearance=\"icon\"\n    [title]=\"menu\"\n    (click)=\"onClick()\"\n    (tuiActiveZoneChange)=\"onActiveZone($event)\"\n>\n    <tui-doc-navigation\n        *tuiSidebar=\"open$ | async\"\n        class=\"navigation\"\n    ></tui-doc-navigation>\n</button>\n<div polymorpheus-outlet class=\"logo tui-text_h5\" [content]=\"logo\">\n    <ng-template let-src>\n        <img class=\"img\" alt=\"Logo\" [src]=\"src\" />\n    </ng-template>\n</div>\n<ng-content></ng-content>\n",
+            template: "<button\n    tuiIconButton\n    icon=\"tuiIconMenuLarge\"\n    appearance=\"icon\"\n    class=\"menu\"\n    [title]=\"menu\"\n    (click)=\"onClick()\"\n    (tuiActiveZoneChange)=\"onActiveZone($event)\"\n>\n    <tui-doc-navigation\n        *tuiSidebar=\"open$ | async\"\n        class=\"navigation\"\n    ></tui-doc-navigation>\n</button>\n<div polymorpheus-outlet class=\"logo tui-text_h5\" [content]=\"logo\">\n    <ng-template let-src>\n        <img alt=\"Logo\" class=\"img\" [src]=\"src\" />\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;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);z-index:1}.logo{margin-right:auto}.img{display:block}.menu{margin-left:-1.25rem}@media screen and (min-width:80em){.menu{display:none}}.navigation{min-height:100%}"]
+            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)}.logo{margin-right:auto}.img{display:block}.menu{margin-left:-1.25rem}@media screen and (min-width:48em){.menu{display:none}}.navigation{min-height:100%}"]
         }),
         __param(0, Inject(TUI_DOC_LOGO)),
         __param(1, Inject(TUI_DOC_MENU_TEXT)),
-        __param(2, Inject(Router))
+        __param(2, Inject(Router)),
+        __param(3, Inject(TuiSwipeService))
     ], TuiDocHeaderComponent);
     return TuiDocHeaderComponent;
 }());
@@ -1477,10 +1552,10 @@ var TuiDocPageComponent = /** @class */ (function () {
     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            class=\"t-tag t-tag_deprecated\"\n            value=\"deprecated\"\n            status=\"custom\"\n        ></tui-tag>\n        <tui-tag\n            *ngIf=\"package\"\n            class=\"t-tag t-tag_package\"\n            status=\"custom\"\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\n            *ngFor=\"let tab of tabConnectors; first as first; index as index\"\n        >\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 *ngIf=\"index === activeItemIndex\">\n            <ng-container *ngTemplateOutlet=\"tab.template\"></ng-container>\n        </ng-container>\n    </ng-container>\n</div>\n",
+            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\n            *ngFor=\"let tab of tabConnectors; first as first; index as index\"\n        >\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 *ngIf=\"index === activeItemIndex\">\n            <ng-container *ngTemplateOutlet=\"tab.template\"></ng-container>\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{font:var(--tui-font-heading-3);display:flex;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)}@media screen and (max-width:47.9375em){.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}@media screen and (max-width:47.9375em){.t-tabs{margin-top:.25rem}}.t-content{padding:2rem 0;margin:0 min(10vw,8.75rem)}@media screen and (max-width:47.9375em){.t-content{padding:2rem 1.25rem;margin:0}}.t-see-also{min-width:18.75rem;width:30%;float:right;margin-left:1.5rem}@media screen and (max-width:47.9375em){.t-see-also{float:none;width:100%;margin:0 0 1.5rem}}.t-source-code{align-self:flex-end;line-height:2.75rem}"]
+            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)}@media screen and (max-width:47.9375em){.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}@media screen and (max-width:47.9375em){.t-tabs{margin-top:.25rem}}.t-content{padding:2rem 0;margin:0 min(10vw,8.75rem)}@media screen and (max-width:47.9375em){.t-content{padding:2rem 1.25rem;margin:0}}.t-see-also{min-width:18.75rem;width:30%;float:right;margin-left:1.5rem}@media screen and (max-width:47.9375em){.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)),
@@ -1518,7 +1593,7 @@ var TuiDocSeeAlsoComponent = /** @class */ (function () {
     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 tuiLink [routerLink]=\"getRouterLink(item)\">{{item}}</a>\n    <ng-container *ngIf=\"!last\">, </ng-container>\n</ng-container>\n",
+            template: "<h5 class=\"header\">{{ text }}</h5>\n<ng-container *ngFor=\"let item of seeAlso; last as last\">\n    <a tuiLink [routerLink]=\"getRouterLink(item)\">{{ item }}</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}"]
         }),
@@ -1591,7 +1666,7 @@ var TuiDocSourceCodeComponent = /** @class */ (function () {
     TuiDocSourceCodeComponent = __decorate([
         Component({
             selector: 'tui-doc-source-code',
-            template: "<div\n    polymorpheus-outlet\n    *ngIf=\"!!sourceCode\"\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",
+            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)),
@@ -1717,5 +1792,5 @@ var TuiAddonDocModule = /** @class */ (function () {
  * Generated bundle index. Do not edit.
  */
 
-export { DEMO_TEXTS, DOC_TEXTS, EXAMPLE_TEXTS, ScrollIntoViewDirective, ScrollIntoViewModule, 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_RUSSIAN, 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, TuiAddonDocModule, TuiDocCodeComponent, TuiDocCodeModule, TuiDocCopyComponent, TuiDocCopyModule, TuiDocDemoComponent, TuiDocDemoModule, TuiDocDocumentationComponent, TuiDocDocumentationModule, TuiDocDocumentationPropertyConnectorDirective, TuiDocExampleComponent, TuiDocExampleModule, TuiDocMainComponent, TuiDocMainModule, TuiDocNavigationComponent, TuiDocNavigationModule, TuiDocPageComponent, TuiDocPageModule, TuiDocPageTabConnectorDirective, generateRoutes, NAVIGATION_TITLE as ɵa, NAVIGATION_LABELS as ɵb, NAVIGATION_ITEMS as ɵc, NAVIGATION_PROVIDERS as ɵd, titleProviderFactory as ɵe, labelsProviderFactory as ɵf, itemsProviderFactory as ɵg, TuiInputOpacityModule as ɵh, TuiInputOpacityDirective as ɵi, TuiDocHeaderModule as ɵj, TuiDocHeaderComponent as ɵk, PAGE_SEE_ALSO as ɵl, PAGE_PROVIDERS as ɵm, seeAlsoProviderFactory as ɵn, TuiDocSeeAlsoModule as ɵo, TuiDocSeeAlsoComponent as ɵp, TuiDocSourceCodeModule as ɵq, TuiDocSourceCodeComponent as ɵr };
+export { DEMO_TEXTS, DOC_TEXTS, EXAMPLE_TEXTS, ScrollIntoViewDirective, ScrollIntoViewModule, 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_RUSSIAN, 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, TuiAddonDocModule, TuiDocCodeComponent, TuiDocCodeModule, TuiDocCopyComponent, TuiDocCopyModule, TuiDocDemoComponent, TuiDocDemoModule, TuiDocDocumentationComponent, TuiDocDocumentationModule, TuiDocDocumentationPropertyConnectorDirective, TuiDocExampleComponent, TuiDocExampleModule, TuiDocMainComponent, TuiDocMainModule, TuiDocNavigationComponent, TuiDocNavigationModule, TuiDocPageComponent, TuiDocPageModule, TuiDocPageTabConnectorDirective, generateRoutes, NAVIGATION_TITLE as ɵa, NAVIGATION_LABELS as ɵb, NAVIGATION_ITEMS as ɵc, NAVIGATION_PROVIDERS as ɵd, titleProviderFactory as ɵe, labelsProviderFactory as ɵf, itemsProviderFactory as ɵg, TuiInputOpacityModule as ɵh, TuiInputOpacityDirective as ɵi, TuiDocExampleGetTabsPipe as ɵj, TuiDocHeaderModule as ɵk, TuiDocHeaderComponent as ɵl, PAGE_SEE_ALSO as ɵm, PAGE_PROVIDERS as ɵn, seeAlsoProviderFactory as ɵo, TuiDocSeeAlsoModule as ɵp, TuiDocSeeAlsoComponent as ɵq, TuiDocSourceCodeModule as ɵr, TuiDocSourceCodeComponent as ɵs };
 //# sourceMappingURL=taiga-ui-addon-doc.js.map