@taiga-ui/addon-doc 3.11.0 → 3.12.1

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Component, Input, HostBinding, NgModule, ChangeDetectionStrategy, Inject, InjectionToken, Renderer2, PLATFORM_ID, forwardRef, TemplateRef, ViewChild, ContentChild, HostListener, EventEmitter, Directive, Output, Pipe, ChangeDetectorRef, ContentChildren, Attribute, Optional, ElementRef, ViewEncapsulation } from '@angular/core';
+import { Component, Input, HostBinding, NgModule, ChangeDetectionStrategy, Inject, InjectionToken, Renderer2, PLATFORM_ID, forwardRef, TemplateRef, Self, ViewChild, ContentChild, HostListener, EventEmitter, Directive, Output, Pipe, ChangeDetectorRef, ContentChildren, Attribute, Optional, ElementRef, ViewEncapsulation } from '@angular/core';
 import * as i9 from 'rxjs';
 import { BehaviorSubject, Subject, timer, merge, identity, defer, of, ReplaySubject } from 'rxjs';
 import { switchMap, map, switchMapTo, mapTo, startWith, takeUntil, filter, mergeMap, debounceTime, take, distinctUntilChanged } from 'rxjs/operators';
@@ -10,7 +10,7 @@ import { CommonModule, isPlatformBrowser, Location as Location$1, DOCUMENT } fro
 import * as i2 from 'ngx-highlightjs';
 import { HighlightModule } from 'ngx-highlightjs';
 import * as i6$1 from '@taiga-ui/cdk';
-import { TuiDestroyService, tuiPure, tuiPx, TUI_IS_MOBILE, TuiDragModule, TUI_FOCUSABLE_ITEM_ACCESSOR, TUI_IS_CYPRESS, EMPTY_QUERY, tuiItemsQueryListObservable, tuiWatch, tuiRgbToHex, tuiHexToRgb, tuiIsString, tuiIsNumber, TuiMapperPipeModule, tuiIsPresent, tuiGetElementObscures, tuiControlValue, tuiUniqBy, TuiSwipeService, TuiActiveZoneModule, TuiLetModule, TuiAutoFocusModule, tuiDefaultProp } from '@taiga-ui/cdk';
+import { TuiDestroyService, tuiPure, tuiPx, TUI_IS_MOBILE, tuiDebounce, TuiDragModule, tuiRgbToHex, TUI_FOCUSABLE_ITEM_ACCESSOR, TUI_IS_CYPRESS, tuiIsString, tuiIsNumber, EMPTY_QUERY, tuiItemsQueryListObservable, tuiWatch, tuiHexToRgb, TuiMapperPipeModule, tuiIsPresent, tuiGetElementObscures, tuiControlValue, tuiUniqBy, TuiSwipeService, TuiActiveZoneModule, TuiLetModule, TuiAutoFocusModule, tuiDefaultProp } from '@taiga-ui/cdk';
 import * as i1 from '@taiga-ui/kit';
 import { TUI_COPY_TEXTS, TuiSelectModule, TuiRadioBlockModule, TuiCheckboxLabeledModule, TuiDataListWrapperModule, TuiBadgeModule, TuiToggleModule, TuiInputCountModule, TuiTabsModule, TuiInputModule, TuiAccordionModule, TuiTagModule } from '@taiga-ui/kit';
 import * as i2$1 from '@taiga-ui/core';
@@ -196,6 +196,8 @@ class TuiDocDemoComponent {
         this.isMobile = isMobile;
         this.destroy$ = destroy$;
         this.renderer = renderer;
+        this.locationRef = locationRef;
+        this.urlSerializer = urlSerializer;
         this.texts = texts;
         this.initialX = 0;
         this.wrapperWidth = 0;
@@ -214,15 +216,6 @@ class TuiDocDemoComponent {
         if (parsedMode !== null && parsedMode.length > 0) {
             this.modeControl.setValue(parsedMode[1]);
         }
-        this.modeControl.valueChanges
-            .pipe(startWith(this.modeControl.value), takeUntil(this.destroy$))
-            .subscribe(mode => {
-            const urlTree = urlSerializer.parse(locationRef.path());
-            urlTree.queryParams = Object.assign(Object.assign({}, urlTree.queryParams), { tuiMode: mode });
-            locationRef.go(String(urlTree));
-            this.mode = mode;
-            this.change$.next();
-        });
     }
     onResize() {
         this.setResizerTextContent();
@@ -231,17 +224,27 @@ class TuiDocDemoComponent {
         this.createForm();
     }
     ngAfterViewInit() {
-        this.setResizerTextContent();
+        this.modeControl.valueChanges
+            .pipe(startWith(this.modeControl.value), takeUntil(this.destroy$))
+            .subscribe(mode => {
+            this.updateUrl(mode);
+            const wrapperWidth = parseInt(this.getUrlTree().queryParams.sandboxWidth, 10) +
+                this.getPaddingOfWrapper() +
+                this.getResizeButtonWidth();
+            if (!Number.isNaN(wrapperWidth)) {
+                this.wrapperWidth = wrapperWidth;
+                this.setWidthWrapper(tuiPx(wrapperWidth));
+            }
+            this.setResizerTextContent();
+            this.mode = mode;
+            this.change$.next();
+        });
     }
     setResizerTextContent() {
         if (!this.content || !this.resizerText) {
             return;
         }
-        const paddingLeft = this.isBrowser
-            ? getComputedStyle(this.content.nativeElement).paddingLeft
-            : `0`;
-        const { offsetWidth } = this.content.nativeElement;
-        this.resizerText.nativeElement.textContent = String(offsetWidth - parseInt(paddingLeft || `0`, 10) * 2);
+        this.resizerText.nativeElement.textContent = (this.content.nativeElement.offsetWidth - this.getPaddingOfWrapper()).toString();
     }
     onDragStart(event) {
         event.preventDefault();
@@ -255,6 +258,7 @@ class TuiDocDemoComponent {
     }
     onDragEnd() {
         this.wrapperWidth = this.wrapper ? this.wrapper.nativeElement.offsetWidth : 0;
+        this.updateSandboxWidth();
     }
     toggleDetails() {
         this.expanded = !this.expanded;
@@ -271,13 +275,45 @@ class TuiDocDemoComponent {
         this.testForm = new FormGroup({ testValue: control }, { updateOn });
     }
     resizeContent(delta) {
+        this.setWidthWrapper(tuiPx(Math.max(this.wrapperWidth - delta, MIN_COMPONENT_WIDTH)));
+    }
+    setWidthWrapper(width) {
         if (!this.wrapper) {
             return;
         }
-        this.renderer.setStyle(this.wrapper.nativeElement, `width`, tuiPx(Math.max(this.wrapperWidth - delta, MIN_COMPONENT_WIDTH)));
+        this.renderer.setStyle(this.wrapper.nativeElement, `width`, width);
+    }
+    updateUrl(mode) {
+        const urlTree = this.getUrlTree();
+        const modeParam = (mode !== null && mode !== void 0 ? mode : urlTree.queryParams.tuiMode) ? { tuiMode: mode } : {};
+        const sandboxWidth = parseInt(urlTree.queryParams.sandboxWidth, 10);
+        const resizeParam = !Number.isNaN(sandboxWidth) && MIN_COMPONENT_WIDTH > sandboxWidth
+            ? { sandboxWidth }
+            : {};
+        urlTree.queryParams = Object.assign(Object.assign(Object.assign({}, urlTree.queryParams), modeParam), resizeParam);
+        this.locationRef.go(String(urlTree));
+    }
+    getUrlTree() {
+        return this.urlSerializer.parse(this.locationRef.path());
+    }
+    getPaddingOfWrapper() {
+        const paddingLeft = this.isBrowser && this.content
+            ? getComputedStyle(this.content.nativeElement).paddingLeft
+            : `0`;
+        return parseInt(paddingLeft || `0`, 10) * 2;
+    }
+    getResizeButtonWidth() {
+        var _a, _b, _c;
+        return (_c = (_b = (_a = this.resizerText) === null || _a === void 0 ? void 0 : _a.nativeElement.parentElement) === null || _b === void 0 ? void 0 : _b.offsetWidth) !== null && _c !== void 0 ? _c : 0;
+    }
+    updateSandboxWidth() {
+        var _a, _b;
+        const urlTree = this.getUrlTree();
+        urlTree.queryParams.sandboxWidth = parseInt((_b = (_a = this.resizerText) === null || _a === void 0 ? void 0 : _a.nativeElement.textContent) !== null && _b !== void 0 ? _b : `0`, 10);
+        this.locationRef.go(String(urlTree));
     }
 }
-TuiDocDemoComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiDocDemoComponent, deps: [{ token: TUI_IS_MOBILE }, { token: TuiDestroyService }, { token: Renderer2 }, { token: PLATFORM_ID }, { token: Location$1 }, { token: UrlSerializer }, { token: TUI_DOC_DEMO_TEXTS }], target: i0.ɵɵFactoryTarget.Component });
+TuiDocDemoComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiDocDemoComponent, deps: [{ token: TUI_IS_MOBILE }, { token: TuiDestroyService, self: true }, { token: Renderer2 }, { token: PLATFORM_ID }, { token: Location$1 }, { token: UrlSerializer }, { token: TUI_DOC_DEMO_TEXTS }], target: i0.ɵɵFactoryTarget.Component });
 TuiDocDemoComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TuiDocDemoComponent, selector: "tui-doc-demo", inputs: { control: "control" }, host: { listeners: { "window:resize": "onResize()" } }, providers: [
         TuiDestroyService,
         {
@@ -285,6 +321,9 @@ TuiDocDemoComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
             useExisting: forwardRef(() => TuiDocDemoComponent),
         },
     ], queries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true }], viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true }, { propertyName: "wrapper", first: true, predicate: ["wrapper"], descendants: true }, { propertyName: "resizerText", first: true, predicate: ["resizerText"], descendants: true }], ngImport: i0, template: "<div\n    class=\"t-bg-toggle\"\n    [tuiMode]=\"null\"\n>\n    <ng-template #tooltip>\n        {{ texts[0] }}\n        <a\n            tuiLink\n            tuiMode=\"onDark\"\n            routerLink=\"/directives/mode\"\n        >\n            <code>tuiMode</code>\n        </a>\n    </ng-template>\n    <ng-container *ngIf=\"isMobile; else desktop\">\n        <tui-select\n            tuiTextfieldSize=\"s\"\n            class=\"t-mode\"\n            [tuiTextfieldCleaner]=\"true\"\n            [tuiHintContent]=\"tooltip\"\n            [formControl]=\"modeControl\"\n        >\n            tuiMode\n            <tui-data-list-wrapper\n                *tuiDataList\n                [items]=\"items\"\n            ></tui-data-list-wrapper>\n        </tui-select>\n    </ng-container>\n    <ng-template #desktop>\n        tuiMode:\n        <tui-tooltip\n            describeId=\"form\"\n            [content]=\"tooltip\"\n        ></tui-tooltip>\n        <div\n            tuiGroup\n            class=\"t-group\"\n            [collapsed]=\"true\"\n        >\n            <tui-radio-block\n                size=\"s\"\n                nativeId=\"form\"\n                class=\"tui-group__auto-width-item\"\n                [item]=\"null\"\n                [hideRadio]=\"true\"\n                [formControl]=\"modeControl\"\n            >\n                null\n            </tui-radio-block>\n            <tui-radio-block\n                item=\"onDark\"\n                size=\"s\"\n                nativeId=\"form\"\n                class=\"tui-group__auto-width-item\"\n                [hideRadio]=\"true\"\n                [formControl]=\"modeControl\"\n            >\n                onDark\n            </tui-radio-block>\n            <tui-radio-block\n                item=\"onLight\"\n                size=\"s\"\n                nativeId=\"form\"\n                class=\"tui-group__auto-width-item\"\n                [hideRadio]=\"true\"\n                [formControl]=\"modeControl\"\n            >\n                onLight\n            </tui-radio-block>\n        </div>\n    </ng-template>\n    <tui-checkbox-labeled\n        size=\"m\"\n        class=\"t-checkbox\"\n        [(ngModel)]=\"opaque\"\n    >\n        {{ texts[1] }}\n    </tui-checkbox-labeled>\n</div>\n<div\n    #wrapper\n    class=\"t-wrapper\"\n    [class.t-wrapper_dark]=\"modeControl.value === 'onDark'\"\n    [class.t-wrapper_gray]=\"modeControl.value === 'onLight'\"\n    [class.t-wrapper_transparent]=\"!opaque\"\n>\n    <div\n        #content\n        id=\"demoContent\"\n        class=\"t-content\"\n    >\n        <form\n            *ngIf=\"testForm\"\n            class=\"t-form\"\n            [formGroup]=\"testForm\"\n        >\n            <div class=\"t-input-wrapper\">\n                <ng-container [ngTemplateOutlet]=\"template\"></ng-container>\n            </div>\n            <button\n                tuiButton\n                type=\"button\"\n                size=\"s\"\n                class=\"t-button\"\n                [iconRight]=\"icon\"\n                (click)=\"toggleDetails()\"\n            >\n                {{ texts[2] }}\n            </button>\n            <ng-template #icon>\n                <tui-svg\n                    src=\"tuiIconChevronDown\"\n                    class=\"t-icon\"\n                    [class.t-icon_rotated]=\"expanded\"\n                ></tui-svg>\n            </ng-template>\n            <tui-expand\n                class=\"t-expand\"\n                [expanded]=\"expanded\"\n            >\n                <ng-template tuiExpandContent>\n                    <pre class=\"t-value\">Form data: {{ testForm.value | json }}</pre>\n                    <div\n                        tuiGroup\n                        class=\"t-form-controls\"\n                    >\n                        <tui-select\n                            tuiTextfieldSize=\"s\"\n                            class=\"t-select\"\n                            [ngModel]=\"updateOn\"\n                            [ngModelOptions]=\"{standalone: true}\"\n                            (ngModelChange)=\"updateOnChange($event)\"\n                        >\n                            updateOn\n                            <tui-data-list-wrapper\n                                *tuiDataList\n                                [items]=\"updateOnVariants\"\n                            ></tui-data-list-wrapper>\n                        </tui-select>\n                        <button\n                            tuiButton\n                            type=\"reset\"\n                            size=\"s\"\n                            class=\"tui-group__auto-width-item\"\n                        >\n                            Reset\n                        </button>\n                        <button\n                            tuiButton\n                            type=\"submit\"\n                            size=\"s\"\n                            class=\"tui-group__auto-width-item\"\n                        >\n                            Submit\n                        </button>\n                    </div>\n                </ng-template>\n            </tui-expand>\n        </form>\n        <ng-content></ng-content>\n    </div>\n    <button\n        tabindex=\"-1\"\n        class=\"t-resizer\"\n        (tuiDragStart)=\"onDragStart($event)\"\n        (tuiDragContinues)=\"onDragContinues($event)\"\n        (tuiDragEnd)=\"onDragEnd()\"\n    >\n        <span\n            #resizerText\n            class=\"t-resizer-text\"\n        ></span>\n    </button>\n</div>\n", styles: [":host{position:relative;display:block;min-width:100%;margin:1.5rem 0}.t-bg-toggle{position:absolute;bottom:calc(100% + .75rem);display:flex;align-items:center;justify-content:flex-end;pointer-events:none;width:100%}.t-bg-toggle>*{pointer-events:auto}.t-wrapper{box-shadow:0 1.5rem 1rem rgba(0,0,0,.03),0 .75rem .75rem rgba(0,0,0,.04),0 .25rem .375rem rgba(0,0,0,.05);display:flex;border:1px solid var(--tui-base-03);border-radius:var(--tui-radius-m);max-width:100%;min-height:6rem;width:100%;background-color:var(--tui-base-01);overflow:hidden}.t-wrapper.t-wrapper_transparent{background-image:linear-gradient(45deg,var(--tui-base-02) 25%,transparent 25%),linear-gradient(-45deg,var(--tui-base-02) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--tui-base-02) 75%),linear-gradient(-45deg,transparent 75%,var(--tui-base-02) 75%);background-size:1.25rem 1.25rem;background-position:0 0,0 .625rem,.625rem -.625rem,-.625rem 0}.t-wrapper.t-wrapper_dark{background-color:#454e58;color:var(--tui-base-01)}.t-wrapper.t-wrapper_gray{background-color:#e5e7ea}.t-wrapper.t-wrapper_dark.t-wrapper_transparent{background-image:linear-gradient(45deg,var(--tui-focus) 25%,transparent 25%),linear-gradient(-45deg,var(--tui-focus) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--tui-focus) 75%),linear-gradient(-45deg,transparent 75%,var(--tui-focus) 75%)}.t-wrapper.t-wrapper_gray.t-wrapper_transparent{background-image:linear-gradient(45deg,var(--tui-base-05) 25%,transparent 25%),linear-gradient(-45deg,var(--tui-base-05) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--tui-base-05) 75%),linear-gradient(-45deg,transparent 75%,var(--tui-base-05) 75%)}:host-context(tui-root._mobile) .t-wrapper{min-height:auto}.t-content{flex:1 1 0;min-width:0;padding:1.5rem;box-sizing:border-box;overflow:hidden}:host-context(tui-root._mobile) .t-content{padding:1rem}.t-form{display:flex;flex-wrap:wrap;align-items:flex-start}.t-input-wrapper{width:100%;margin-bottom:.5rem}.t-expand{width:100%}.t-icon{transition-property:transform;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out}.t-icon_rotated{transform:rotate(180deg)}.t-value{flex:1;background:var(--tui-clear-inverse);padding:.75rem;border-radius:.25rem}.t-mode{width:12.5rem}.t-select{max-width:15rem}.t-resizer{-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:0;border:0;background:none;font-size:inherit;line-height:inherit;box-shadow:0 1.5rem 1rem rgba(0,0,0,.03),0 .75rem .75rem rgba(0,0,0,.04),0 .25rem .375rem rgba(0,0,0,.05);position:relative;width:3.5rem;min-height:inherit;flex-shrink:0;border-left:1px solid var(--tui-base-03);cursor:col-resize;outline:none;background:var(--tui-base-01);color:var(--tui-text-01)}.t-resizer:before,.t-resizer:after{content:\"\";position:absolute;top:.75rem;left:50%;bottom:.75rem;width:1px;background:var(--tui-base-05)}.t-resizer:before{transform:translate(.125rem)}.t-resizer:after{transform:translate(-.1875rem)}:host-context(tui-root._mobile) .t-resizer{display:none}.t-resizer-text{font:var(--tui-font-text-s);position:relative;z-index:1;padding:.75rem;background:var(--tui-base-01)}.wrapper_light .t-resizer-text{background:#3e464e}.t-group,.t-checkbox{margin-left:.75rem}.t-button,.t-form-controls{margin-top:.75rem}@supports ((position: -webkit-sticky) or (position: sticky)){@media screen and (min-height: 37.5rem){:host{position:-webkit-sticky;position:sticky;top:4.625rem;z-index:2}}}\n"], components: [{ type: i2$1.TuiLinkComponent, selector: "a[tuiLink], button[tuiLink]", inputs: ["pseudo", "icon", "iconAlign", "iconRotated", "mode"], exportAs: ["tuiLink"] }, { type: i1.TuiSelectComponent, selector: "tui-select", inputs: ["stringify", "identityMatcher", "valueContent"] }, { type: i1.TuiDataListWrapperComponent, selector: "tui-data-list-wrapper:not([labels])", inputs: ["items"] }, { type: i2$1.TuiTooltipComponent, selector: "tui-tooltip", inputs: ["content", "direction", "appearance", "showDelay", "hideDelay", "describeId"] }, { type: i1.TuiRadioBlockComponent, selector: "tui-radio-block", inputs: ["item", "identityMatcher", "contentAlign", "size", "hideRadio", "pseudoDisabled"] }, { type: i1.TuiCheckboxLabeledComponent, selector: "tui-checkbox-labeled", inputs: ["size"] }, { type: i2$1.TuiButtonComponent, selector: "button[tuiButton], button[tuiIconButton], a[tuiButton], a[tuiIconButton]", inputs: ["appearance", "disabled", "icon", "iconRight", "shape", "showLoader", "size"] }, { type: i2$1.TuiSvgComponent, selector: "tui-svg", inputs: ["src"] }, { type: i2$1.TuiExpandComponent, selector: "tui-expand", inputs: ["async", "expanded"] }], directives: [{ type: i2$1.TuiModeDirective, selector: "[tuiMode]", inputs: ["tuiMode"] }, { type: i6.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["routerLink", "target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.TuiSelectDirective, selector: "tui-select" }, { type: i2$1.TuiTextfieldSizeDirective, selector: "[tuiTextfieldSize]", inputs: ["tuiTextfieldSize"] }, { type: i2$1.TuiTextfieldCleanerDirective, selector: "[tuiTextfieldCleaner]", inputs: ["tuiTextfieldCleaner"] }, { type: i2$1.TuiHintOptionsDirective, selector: "[tuiHintContent]", inputs: ["tuiHintContent", "tuiHintDirection", "tuiHintAppearance", "tuiHintShowDelay", "tuiHintHideDelay"] }, { type: i5$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5$1.FormControlDirective, selector: "[formControl]", inputs: ["disabled", "formControl", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i2$1.TuiDataListDirective, selector: "ng-template[tuiDataList]" }, { type: i2$1.TuiGroupDirective, selector: "[tuiGroup]:not(ng-container)", inputs: ["orientation", "adaptive", "collapsed", "rounded", "size"] }, { type: i5$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i5$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i5$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i5$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2$1.TuiExpandContentDirective, selector: "[tuiExpandContent]" }, { type: i6$1.TuiDragDirective, selector: "[tuiDragStart], [tuiDragContinues], [tuiDragEnd]", outputs: ["tuiDragStart", "tuiDragContinues", "tuiDragEnd"] }], pipes: { "json": i5.JsonPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+__decorate([
+    tuiDebounce(200)
+], TuiDocDemoComponent.prototype, "onResize", null);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiDocDemoComponent, decorators: [{
             type: Component,
             args: [{
@@ -304,6 +343,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                     type: Inject,
                     args: [TUI_IS_MOBILE]
                 }] }, { type: i6$1.TuiDestroyService, decorators: [{
+                    type: Self
+                }, {
                     type: Inject,
                     args: [TuiDestroyService]
                 }] }, { type: i0.Renderer2, decorators: [{
@@ -561,6 +602,62 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 type: Output
             }] } });
 
+class TuiGetOpacityPipe {
+    transform(color) {
+        if (color.startsWith(`#`) || color.startsWith(`rgb(`)) {
+            return 100;
+        }
+        if (color === `transparent`) {
+            return 0;
+        }
+        const lastComma = color.lastIndexOf(`,`);
+        const parsed = color
+            .slice(lastComma)
+            .replace(`)`, ``)
+            .replace(` `, ``)
+            .replace(`,`, ``);
+        return Math.round(Number.parseFloat(parsed) * 100);
+    }
+}
+TuiGetOpacityPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiGetOpacityPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+TuiGetOpacityPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiGetOpacityPipe, name: "tuiGetOpacity" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiGetOpacityPipe, decorators: [{
+            type: Pipe,
+            args: [{ name: `tuiGetOpacity` }]
+        }] });
+
+class TuiGetColorPipe {
+    transform(color) {
+        if (color.length === 4) {
+            return color
+                .split(``)
+                .reduce((result, current) => [...result, current, current], [])
+                .join(``)
+                .replace(`#`, ``);
+        }
+        if (color.startsWith(`#`)) {
+            return color;
+        }
+        if (color === `transparent`) {
+            return `#000000`;
+        }
+        const parsed = color
+            .replace(`rgb(`, ``)
+            .replace(`rgba(`, ``)
+            .replace(`)`, ``)
+            .replace(` `, ``)
+            .split(`,`)
+            .map(v => Number.parseInt(v, 10));
+        return tuiRgbToHex(...parsed);
+    }
+}
+TuiGetColorPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiGetColorPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+TuiGetColorPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiGetColorPipe, name: "tuiGetColorPipe" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiGetColorPipe, decorators: [{
+            type: Pipe,
+            args: [{ name: `tuiGetColorPipe` }]
+        }] });
+
 class TuiInputOpacityDirective {
     constructor(renderer, tuiFocusableComponent) {
         this.renderer = renderer;
@@ -590,6 +687,54 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 type: Input
             }] } });
 
+class TuiStripOptionalPipe {
+    transform(name) {
+        return name.replace(`?`, ``);
+    }
+}
+TuiStripOptionalPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiStripOptionalPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+TuiStripOptionalPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiStripOptionalPipe, name: "tuiStripOptionalPipe" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiStripOptionalPipe, decorators: [{
+            type: Pipe,
+            args: [{ name: `tuiStripOptionalPipe` }]
+        }] });
+
+class TuiIsOptionalPipe {
+    transform(name) {
+        return name.includes(`?`);
+    }
+}
+TuiIsOptionalPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiIsOptionalPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+TuiIsOptionalPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiIsOptionalPipe, name: "tuiIsOptionalPipe" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiIsOptionalPipe, decorators: [{
+            type: Pipe,
+            args: [{ name: `tuiIsOptionalPipe` }]
+        }] });
+
+class TuiShowContentTooltip {
+    transform(type) {
+        return type.includes(`PolymorpheusContent`);
+    }
+}
+TuiShowContentTooltip.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiShowContentTooltip, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+TuiShowContentTooltip.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiShowContentTooltip, name: "tuiShowContentTooltip" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiShowContentTooltip, decorators: [{
+            type: Pipe,
+            args: [{ name: `tuiShowContentTooltip` }]
+        }] });
+
+class TuiShowCleanerPipe {
+    transform(type) {
+        return type.includes(`null`);
+    }
+}
+TuiShowCleanerPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiShowCleanerPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+TuiShowCleanerPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiShowCleanerPipe, name: "tuiShowCleanerPipe" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiShowCleanerPipe, decorators: [{
+            type: Pipe,
+            args: [{ name: `tuiShowCleanerPipe` }]
+        }] });
+
 function inspectArray(array, depth) {
     if (depth === 0) {
         return `[…]`;
@@ -683,12 +828,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                     args: [TUI_IS_CYPRESS]
                 }] }]; } });
 
+class TuiIsPrimitivePolymorpheusContentPipe {
+    transform(value) {
+        return tuiIsString(value) || tuiIsNumber(value);
+    }
+}
+TuiIsPrimitivePolymorpheusContentPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiIsPrimitivePolymorpheusContentPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+TuiIsPrimitivePolymorpheusContentPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiIsPrimitivePolymorpheusContentPipe, name: "tuiIsPrimitivePolymorpheusContentPipe" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiIsPrimitivePolymorpheusContentPipe, decorators: [{
+            type: Pipe,
+            args: [{ name: `tuiIsPrimitivePolymorpheusContentPipe` }]
+        }] });
+
 // @bad TODO subscribe propertiesConnectors changes
 // @bad TODO refactor to make more flexible
 class TuiDocDocumentationComponent {
-    constructor(changeDetectorRef, texts) {
+    constructor(changeDetectorRef, texts, destroy$, getColor, getOpacity) {
         this.changeDetectorRef = changeDetectorRef;
         this.texts = texts;
+        this.destroy$ = destroy$;
+        this.getColor = getColor;
+        this.getOpacity = getOpacity;
         this.heading = ``;
         this.showValues = true;
         this.isAPI = false;
@@ -697,52 +857,14 @@ class TuiDocDocumentationComponent {
     }
     ngAfterContentInit() {
         tuiItemsQueryListObservable(this.propertiesConnectors)
-            .pipe(switchMap(items => merge(...items.map(({ changed$ }) => changed$))), tuiWatch(this.changeDetectorRef))
+            .pipe(switchMap(items => merge(...items.map(({ changed$ }) => changed$))), tuiWatch(this.changeDetectorRef), takeUntil(this.destroy$))
             .subscribe();
     }
     get type() {
         return this.isAPI ? this.texts[0] : this.texts[1];
     }
-    getColor(color) {
-        if (color.length === 4) {
-            return color
-                .split(``)
-                .reduce((result, current) => [...result, current, current], [])
-                .join(``)
-                .replace(`#`, ``);
-        }
-        if (color.startsWith(`#`)) {
-            return color;
-        }
-        if (color === `transparent`) {
-            return `#000000`;
-        }
-        const parsed = color
-            .replace(`rgb(`, ``)
-            .replace(`rgba(`, ``)
-            .replace(`)`, ``)
-            .replace(` `, ``)
-            .split(`,`)
-            .map(v => Number.parseInt(v, 10));
-        return tuiRgbToHex(...parsed);
-    }
-    getOpacity(color) {
-        if (color.startsWith(`#`) || color.startsWith(`rgb(`)) {
-            return 100;
-        }
-        if (color === `transparent`) {
-            return 0;
-        }
-        const lastComma = color.lastIndexOf(`,`);
-        const parsed = color
-            .slice(lastComma)
-            .replace(`)`, ``)
-            .replace(` `, ``)
-            .replace(`,`, ``);
-        return Math.round(Number.parseFloat(parsed) * 100);
-    }
     onColorChange(connector, color) {
-        const opacity = this.getOpacity(connector.documentationPropertyValue || ``);
+        const opacity = this.getOpacity.transform(connector.documentationPropertyValue || ``);
         if (opacity === 100) {
             connector.onValueChange(color);
             return;
@@ -752,29 +874,14 @@ class TuiDocDocumentationComponent {
         connector.onValueChange(result);
     }
     onOpacityChange(connector, opacity) {
-        const hex = this.getColor(connector.documentationPropertyValue || ``);
+        const hex = this.getColor.transform(connector.documentationPropertyValue || ``);
         const rgb = tuiHexToRgb(hex);
         const result = `rgba(${rgb}, ${opacity / 100})`;
         connector.onValueChange(result);
     }
-    stripOptional(name) {
-        return name.replace(`?`, ``);
-    }
-    isOptional(name) {
-        return name.includes(`?`);
-    }
-    isPrimitivePolymorpheusContent(value) {
-        return tuiIsString(value) || tuiIsNumber(value);
-    }
-    showCleaner(type) {
-        return type.includes(`null`);
-    }
-    showContentTooltip(type) {
-        return type.includes(`PolymorpheusContent`);
-    }
 }
-TuiDocDocumentationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiDocDocumentationComponent, deps: [{ token: ChangeDetectorRef }, { token: TUI_DOC_DOCUMENTATION_TEXTS }], target: i0.ɵɵFactoryTarget.Component });
-TuiDocDocumentationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TuiDocDocumentationComponent, selector: "tui-doc-documentation", inputs: { heading: "heading", showValues: "showValues", isAPI: "isAPI" }, queries: [{ propertyName: "propertiesConnectors", predicate: TuiDocDocumentationPropertyConnectorDirective }], ngImport: i0, template: "<h1\n    *ngIf=\"heading\"\n    class=\"t-heading\"\n>\n    {{ heading }}\n</h1>\n<ng-content></ng-content>\n<table class=\"t-table\">\n    <tr class=\"t-row t-row_header\">\n        <th class=\"t-th t-cell t-cell_prop\">{{ texts[2] }}</th>\n        <th class=\"t-th\">{{ type }}</th>\n        <th\n            *ngIf=\"showValues && !isAPI\"\n            class=\"t-th t-cell t-th_value\"\n        >\n            {{ texts[3] }}\n        </th>\n    </tr>\n    <tr\n        *ngFor=\"let propertyConnector of propertiesConnectors\"\n        class=\"t-row\"\n        [class.t-deprecated]=\"propertyConnector.documentationPropertyDeprecated\"\n    >\n        <td class=\"t-cell\">\n            <div\n                automation-id=\"tui-documentation__property-name\"\n                class=\"t-property\"\n            >\n                {{ stripOptional(propertyConnector.attrName) }}\n                <tui-badge\n                    *ngIf=\"isOptional(propertyConnector.attrName)\"\n                    size=\"s\"\n                    value=\"Optional\"\n                ></tui-badge>\n            </div>\n            <span\n                *ngIf=\"propertyConnector.documentationPropertyDeprecated\"\n                class=\"t-deprecated-label\"\n            >\n                deprecated\n            </span>\n            <ng-container [ngTemplateOutlet]=\"propertyConnector.template\"></ng-container>\n        </td>\n        <td class=\"t-cell\">\n            <span class=\"type\">\n                {{ propertyConnector.documentationPropertyType }}\n                <tui-tooltip\n                    *ngIf=\"showContentTooltip(propertyConnector.documentationPropertyType)\"\n                    [describeId]=\"propertyConnector.attrName\"\n                    [content]=\"content\"\n                >\n                    <ng-template #content>\n                        {{ texts[4] }}\n                        <a\n                            tuiLink\n                            tuiMode=\"onDark\"\n                            target=\"_blank\"\n                            href=\"https://github.com/tinkoff/ng-polymorpheus\"\n                        >\n                            <code>ng-polymorpheus</code>\n                        </a>\n                    </ng-template>\n                </tui-tooltip>\n            </span>\n        </td>\n        <td\n            *ngIf=\"showValues\"\n            class=\"t-cell t-cell_value\"\n        >\n            <ng-container *ngIf=\"propertyConnector.shouldShowValues; else elseEmitter\">\n                <tui-select\n                    *ngIf=\"propertyConnector.hasItems; else noItems\"\n                    tuiTextfieldSize=\"m\"\n                    tuiDropdownLimitWidth=\"min\"\n                    [tuiTextfieldCleaner]=\"showCleaner(propertyConnector.documentationPropertyType)\"\n                    [tuiTextfieldLabelOutside]=\"true\"\n                    [nativeId]=\"propertyConnector.attrName\"\n                    [valueContent]=\"selectContent\"\n                    [ngModel]=\"propertyConnector.documentationPropertyValue\"\n                    (ngModelChange)=\"propertyConnector.onValueChange($event)\"\n                >\n                    <code class=\"t-exception\">null</code>\n                    <tui-data-list-wrapper\n                        *tuiDataList\n                        [items]=\"propertyConnector.documentationPropertyValues\"\n                        [itemContent]=\"selectContent\"\n                    ></tui-data-list-wrapper>\n                </tui-select>\n                <ng-template\n                    #selectContent\n                    let-data\n                >\n                    <code>{{ data | tuiInspectAny }}</code>\n                </ng-template>\n\n                <ng-template #noItems>\n                    <ng-container [ngSwitch]=\"propertyConnector.documentationPropertyType\">\n                        <tui-toggle\n                            *ngSwitchCase=\"'boolean'\"\n                            size=\"l\"\n                            [nativeId]=\"propertyConnector.attrName\"\n                            [showIcons]=\"true\"\n                            [ngModel]=\"propertyConnector.documentationPropertyValue\"\n                            (ngModelChange)=\"propertyConnector.onValueChange($event)\"\n                        ></tui-toggle>\n\n                        <tui-primitive-textfield\n                            *ngSwitchCase=\"'string'\"\n                            tuiTextfieldSize=\"m\"\n                            [nativeId]=\"propertyConnector.attrName\"\n                            [tuiTextfieldLabelOutside]=\"true\"\n                            [tuiTextfieldCleaner]=\"true\"\n                            [value]=\"propertyConnector.documentationPropertyValue || ''\"\n                            (valueChange)=\"propertyConnector.onValueChange($event)\"\n                        ></tui-primitive-textfield>\n\n                        <div\n                            *ngSwitchCase=\"'color'\"\n                            tuiGroup\n                        >\n                            <tui-primitive-textfield\n                                tuiTextfieldSize=\"m\"\n                                [attr.id]=\"propertyConnector.attrName\"\n                                [tuiTextfieldLabelOutside]=\"true\"\n                                [tuiInputOpacity]=\"getOpacity(propertyConnector.documentationPropertyValue)\"\n                                [value]=\"getColor(propertyConnector.documentationPropertyValue)\"\n                                (valueChange)=\"onColorChange(propertyConnector, $event)\"\n                            >\n                                <input\n                                    tuiTextfield\n                                    type=\"text\"\n                                />\n                            </tui-primitive-textfield>\n                            <tui-input-count\n                                tuiTextfieldSize=\"m\"\n                                [max]=\"100\"\n                                [ngModel]=\"getOpacity(propertyConnector.documentationPropertyValue)\"\n                                (ngModelChange)=\"onOpacityChange(propertyConnector, $event)\"\n                            >\n                                Opacity\n                            </tui-input-count>\n                        </div>\n\n                        <tui-input-count\n                            *ngSwitchCase=\"'number'\"\n                            tuiTextfieldSize=\"m\"\n                            [nativeId]=\"propertyConnector.attrName\"\n                            [tuiTextfieldLabelOutside]=\"true\"\n                            [ngModel]=\"propertyConnector.documentationPropertyValue\"\n                            (ngModelChange)=\"propertyConnector.onValueChange($event)\"\n                        ></tui-input-count>\n\n                        <ng-container *ngSwitchCase=\"'PolymorpheusContent'\">\n                            <tui-primitive-textfield\n                                *ngIf=\"isPrimitivePolymorpheusContent(propertyConnector.documentationPropertyValue)\"\n                                tuiTextfieldSize=\"m\"\n                                [nativeId]=\"propertyConnector.attrName\"\n                                [tuiTextfieldLabelOutside]=\"true\"\n                                [tuiTextfieldCleaner]=\"true\"\n                                [value]=\"propertyConnector.documentationPropertyValue.toString()\"\n                                (valueChange)=\"propertyConnector.onValueChange($event)\"\n                            >\n                                Default content\n                            </tui-primitive-textfield>\n                        </ng-container>\n                    </ng-container>\n                </ng-template>\n            </ng-container>\n\n            <ng-template #elseEmitter>\n                <tui-notification\n                    class=\"t-output\"\n                    [@emitEvent]=\"propertyConnector.emits$ | async\"\n                >\n                    Emit!\n                </tui-notification>\n            </ng-template>\n        </td>\n    </tr>\n</table>\n", styles: [":host{display:block;min-width:100%}.t-table{width:100%;table-layout:fixed}.t-row:not(:last-child){border-bottom:1px solid var(--tui-base-03)}:host-context(tui-root._mobile) .t-row{display:flex;flex-wrap:wrap}:host-context(tui-root._mobile) .t-row_header{display:none}.t-cell{padding:1rem 1rem .875rem}.t-cell:first-child{padding-left:0}.t-cell:last-child{padding-right:0}.t-cell_prop{width:40%}.t-cell_value{text-align:right}:host-context(tui-root._mobile) .t-cell{width:100%;height:auto;padding:.5rem 0;text-align:left}.t-th{padding:.5rem 1rem;color:var(--tui-text-02);font-weight:normal;text-align:left}.t-th_value{max-width:20rem;text-align:right}:host-context(tui-root._mobile) .t-th_value{width:9.375rem}.t-property{font:var(--tui-font-text-m);margin-bottom:.25rem;font-family:monospace;color:#8f75d1}:host-context(tui-root._mobile) .t-property{padding:.5rem 0}.t-type{font-family:monospace}.t-deprecated{background-color:var(--tui-error-bg);box-shadow:-1rem 0 var(--tui-error-bg),1rem 0 var(--tui-error-bg)}.t-deprecated-label{margin-right:.125rem;color:var(--tui-error-fill)}.t-exception{display:block;width:-webkit-max-content;width:-moz-max-content;width:max-content}.t-output{text-align:left;opacity:0}.t-heading{font:var(--tui-font-heading-4)}\n"], components: [{ type: i1.TuiBadgeComponent, selector: "tui-badge", inputs: ["value", "size", "status", "hoverable"] }, { type: i2$1.TuiTooltipComponent, selector: "tui-tooltip", inputs: ["content", "direction", "appearance", "showDelay", "hideDelay", "describeId"] }, { type: i2$1.TuiLinkComponent, selector: "a[tuiLink], button[tuiLink]", inputs: ["pseudo", "icon", "iconAlign", "iconRotated", "mode"], exportAs: ["tuiLink"] }, { type: i1.TuiSelectComponent, selector: "tui-select", inputs: ["stringify", "identityMatcher", "valueContent"] }, { type: i1.TuiDataListWrapperComponent, selector: "tui-data-list-wrapper:not([labels])", inputs: ["items"] }, { type: i1.TuiToggleComponent, selector: "tui-toggle", inputs: ["singleColor", "showIcons", "showLoader", "size"] }, { type: i2$1.TuiPrimitiveTextfieldComponent, selector: "tui-primitive-textfield", inputs: ["editable", "filler", "iconCleaner", "readOnly", "invalid", "disabled", "prefix", "postfix", "value"], outputs: ["valueChange"] }, { type: i2$1.TuiTextfieldComponent, selector: "input[tuiTextfield], textarea[tuiTextfield]" }, { type: i1.TuiInputCountComponent, selector: "tui-input-count", inputs: ["step", "min", "max", "hideButtons", "prefix", "postfix"] }, { type: i2$1.TuiNotificationComponent, selector: "tui-notification", inputs: ["hasIcon", "status"], outputs: ["close"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2$1.TuiModeDirective, selector: "[tuiMode]", inputs: ["tuiMode"] }, { type: i1.TuiSelectDirective, selector: "tui-select" }, { type: i2$1.TuiTextfieldSizeDirective, selector: "[tuiTextfieldSize]", inputs: ["tuiTextfieldSize"] }, { type: i2$1.TuiDropdownOptionsDirective, selector: "[tuiDropdownAlign], [tuiDropdownDirection], [tuiDropdownLimitWidth], [tuiDropdownMinHeight], [tuiDropdownMaxHeight]", inputs: ["tuiDropdownAlign", "tuiDropdownDirection", "tuiDropdownLimitWidth", "tuiDropdownMinHeight", "tuiDropdownMaxHeight"] }, { type: i2$1.TuiTextfieldCleanerDirective, selector: "[tuiTextfieldCleaner]", inputs: ["tuiTextfieldCleaner"] }, { type: i2$1.TuiTextfieldLabelOutsideDirective, selector: "[tuiTextfieldLabelOutside]", inputs: ["tuiTextfieldLabelOutside"] }, { type: i5$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i2$1.TuiDataListDirective, selector: "ng-template[tuiDataList]" }, { type: i5.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i5.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i2$1.TuiPrimitiveTextfieldDirective, selector: "tui-primitive-textfield" }, { type: i2$1.TuiGroupDirective, selector: "[tuiGroup]:not(ng-container)", inputs: ["orientation", "adaptive", "collapsed", "rounded", "size"] }, { type: TuiInputOpacityDirective, selector: "[tuiInputOpacity]", inputs: ["tuiInputOpacity"] }, { type: i1.TuiInputCountDirective, selector: "tui-input-count" }], pipes: { "tuiInspectAny": TuiInspectPipe, "async": i5.AsyncPipe }, animations: [
+TuiDocDocumentationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiDocDocumentationComponent, deps: [{ token: ChangeDetectorRef }, { token: TUI_DOC_DOCUMENTATION_TEXTS }, { token: TuiDestroyService, self: true }, { token: TuiGetColorPipe }, { token: TuiGetOpacityPipe }], target: i0.ɵɵFactoryTarget.Component });
+TuiDocDocumentationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TuiDocDocumentationComponent, selector: "tui-doc-documentation", inputs: { heading: "heading", showValues: "showValues", isAPI: "isAPI" }, providers: [TuiGetColorPipe, TuiGetOpacityPipe, TuiDestroyService], queries: [{ propertyName: "propertiesConnectors", predicate: TuiDocDocumentationPropertyConnectorDirective }], ngImport: i0, template: "<h1\n    *ngIf=\"heading\"\n    class=\"t-heading\"\n>\n    {{ heading }}\n</h1>\n<ng-content></ng-content>\n<table class=\"t-table\">\n    <tr class=\"t-row t-row_header\">\n        <th class=\"t-th t-cell t-cell_prop\">{{ texts[2] }}</th>\n        <th class=\"t-th\">{{ type }}</th>\n        <th\n            *ngIf=\"showValues && !isAPI\"\n            class=\"t-th t-cell t-th_value\"\n        >\n            {{ texts[3] }}\n        </th>\n    </tr>\n    <tr\n        *ngFor=\"let propertyConnector of propertiesConnectors\"\n        class=\"t-row\"\n        [class.t-deprecated]=\"propertyConnector.documentationPropertyDeprecated\"\n    >\n        <td class=\"t-cell\">\n            <div\n                automation-id=\"tui-documentation__property-name\"\n                class=\"t-property\"\n            >\n                {{ propertyConnector.attrName | tuiStripOptionalPipe }}\n                <tui-badge\n                    *ngIf=\"propertyConnector.attrName | tuiIsOptionalPipe\"\n                    size=\"s\"\n                    value=\"Optional\"\n                ></tui-badge>\n            </div>\n            <span\n                *ngIf=\"propertyConnector.documentationPropertyDeprecated\"\n                class=\"t-deprecated-label\"\n            >\n                deprecated\n            </span>\n            <ng-container [ngTemplateOutlet]=\"propertyConnector.template\"></ng-container>\n        </td>\n        <td class=\"t-cell\">\n            <span class=\"type\">\n                {{ propertyConnector.documentationPropertyType }}\n                <tui-tooltip\n                    *ngIf=\"propertyConnector.documentationPropertyType | tuiShowContentTooltip\"\n                    [describeId]=\"propertyConnector.attrName\"\n                    [content]=\"content\"\n                >\n                    <ng-template #content>\n                        {{ texts[4] }}\n                        <a\n                            tuiLink\n                            tuiMode=\"onDark\"\n                            target=\"_blank\"\n                            href=\"https://github.com/tinkoff/ng-polymorpheus\"\n                        >\n                            <code>ng-polymorpheus</code>\n                        </a>\n                    </ng-template>\n                </tui-tooltip>\n            </span>\n        </td>\n        <td\n            *ngIf=\"showValues\"\n            class=\"t-cell t-cell_value\"\n        >\n            <ng-container *ngIf=\"propertyConnector.shouldShowValues; else elseEmitter\">\n                <tui-select\n                    *ngIf=\"propertyConnector.hasItems; else noItems\"\n                    tuiTextfieldSize=\"m\"\n                    tuiDropdownLimitWidth=\"min\"\n                    [tuiTextfieldCleaner]=\"propertyConnector.documentationPropertyType | tuiShowCleanerPipe\"\n                    [tuiTextfieldLabelOutside]=\"true\"\n                    [nativeId]=\"propertyConnector.attrName\"\n                    [valueContent]=\"selectContent\"\n                    [ngModel]=\"propertyConnector.documentationPropertyValue\"\n                    (ngModelChange)=\"propertyConnector.onValueChange($event)\"\n                >\n                    <code class=\"t-exception\">null</code>\n                    <tui-data-list-wrapper\n                        *tuiDataList\n                        [items]=\"propertyConnector.documentationPropertyValues\"\n                        [itemContent]=\"selectContent\"\n                    ></tui-data-list-wrapper>\n                </tui-select>\n                <ng-template\n                    #selectContent\n                    let-data\n                >\n                    <code>{{ data | tuiInspectAny }}</code>\n                </ng-template>\n\n                <ng-template #noItems>\n                    <ng-container [ngSwitch]=\"propertyConnector.documentationPropertyType\">\n                        <tui-toggle\n                            *ngSwitchCase=\"'boolean'\"\n                            size=\"l\"\n                            [nativeId]=\"propertyConnector.attrName\"\n                            [showIcons]=\"true\"\n                            [ngModel]=\"propertyConnector.documentationPropertyValue\"\n                            (ngModelChange)=\"propertyConnector.onValueChange($event)\"\n                        ></tui-toggle>\n\n                        <tui-primitive-textfield\n                            *ngSwitchCase=\"'string'\"\n                            tuiTextfieldSize=\"m\"\n                            [nativeId]=\"propertyConnector.attrName\"\n                            [tuiTextfieldLabelOutside]=\"true\"\n                            [tuiTextfieldCleaner]=\"true\"\n                            [value]=\"propertyConnector.documentationPropertyValue || ''\"\n                            (valueChange)=\"propertyConnector.onValueChange($event)\"\n                        ></tui-primitive-textfield>\n\n                        <div\n                            *ngSwitchCase=\"'color'\"\n                            tuiGroup\n                        >\n                            <tui-primitive-textfield\n                                tuiTextfieldSize=\"m\"\n                                [attr.id]=\"propertyConnector.attrName\"\n                                [tuiTextfieldLabelOutside]=\"true\"\n                                [tuiInputOpacity]=\"propertyConnector.documentationPropertyValue | tuiGetOpacity\"\n                                [value]=\"propertyConnector.documentationPropertyValue | tuiGetColorPipe\"\n                                (valueChange)=\"onColorChange(propertyConnector, $event)\"\n                            >\n                                <input\n                                    tuiTextfield\n                                    type=\"text\"\n                                />\n                            </tui-primitive-textfield>\n                            <tui-input-count\n                                tuiTextfieldSize=\"m\"\n                                [max]=\"100\"\n                                [ngModel]=\"propertyConnector.documentationPropertyValue | tuiGetOpacity\"\n                                (ngModelChange)=\"onOpacityChange(propertyConnector, $event)\"\n                            >\n                                Opacity\n                            </tui-input-count>\n                        </div>\n\n                        <tui-input-count\n                            *ngSwitchCase=\"'number'\"\n                            tuiTextfieldSize=\"m\"\n                            [nativeId]=\"propertyConnector.attrName\"\n                            [tuiTextfieldLabelOutside]=\"true\"\n                            [ngModel]=\"propertyConnector.documentationPropertyValue\"\n                            (ngModelChange)=\"propertyConnector.onValueChange($event)\"\n                        ></tui-input-count>\n\n                        <ng-container *ngSwitchCase=\"'PolymorpheusContent'\">\n                            <tui-primitive-textfield\n                                *ngIf=\"\n                                    propertyConnector.documentationPropertyValue | tuiIsPrimitivePolymorpheusContentPipe\n                                \"\n                                tuiTextfieldSize=\"m\"\n                                [nativeId]=\"propertyConnector.attrName\"\n                                [tuiTextfieldLabelOutside]=\"true\"\n                                [tuiTextfieldCleaner]=\"true\"\n                                [value]=\"propertyConnector.documentationPropertyValue.toString()\"\n                                (valueChange)=\"propertyConnector.onValueChange($event)\"\n                            >\n                                Default content\n                            </tui-primitive-textfield>\n                        </ng-container>\n                    </ng-container>\n                </ng-template>\n            </ng-container>\n\n            <ng-template #elseEmitter>\n                <tui-notification\n                    class=\"t-output\"\n                    [@emitEvent]=\"propertyConnector.emits$ | async\"\n                >\n                    Emit!\n                </tui-notification>\n            </ng-template>\n        </td>\n    </tr>\n</table>\n", styles: [":host{display:block;min-width:100%}.t-table{width:100%;table-layout:fixed}.t-row:not(:last-child){border-bottom:1px solid var(--tui-base-03)}:host-context(tui-root._mobile) .t-row{display:flex;flex-wrap:wrap}:host-context(tui-root._mobile) .t-row_header{display:none}.t-cell{padding:1rem 1rem .875rem}.t-cell:first-child{padding-left:0}.t-cell:last-child{padding-right:0}.t-cell_prop{width:40%}.t-cell_value{text-align:right}:host-context(tui-root._mobile) .t-cell{width:100%;height:auto;padding:.5rem 0;text-align:left}.t-th{padding:.5rem 1rem;color:var(--tui-text-02);font-weight:normal;text-align:left}.t-th_value{max-width:20rem;text-align:right}:host-context(tui-root._mobile) .t-th_value{width:9.375rem}.t-property{font:var(--tui-font-text-m);margin-bottom:.25rem;font-family:monospace;color:#8f75d1}:host-context(tui-root._mobile) .t-property{padding:.5rem 0}.t-type{font-family:monospace}.t-deprecated{background-color:var(--tui-error-bg);box-shadow:-1rem 0 var(--tui-error-bg),1rem 0 var(--tui-error-bg)}.t-deprecated-label{margin-right:.125rem;color:var(--tui-error-fill)}.t-exception{display:block;width:-webkit-max-content;width:-moz-max-content;width:max-content}.t-output{text-align:left;opacity:0}.t-heading{font:var(--tui-font-heading-4)}\n"], components: [{ type: i1.TuiBadgeComponent, selector: "tui-badge", inputs: ["value", "size", "status", "hoverable"] }, { type: i2$1.TuiTooltipComponent, selector: "tui-tooltip", inputs: ["content", "direction", "appearance", "showDelay", "hideDelay", "describeId"] }, { type: i2$1.TuiLinkComponent, selector: "a[tuiLink], button[tuiLink]", inputs: ["pseudo", "icon", "iconAlign", "iconRotated", "mode"], exportAs: ["tuiLink"] }, { type: i1.TuiSelectComponent, selector: "tui-select", inputs: ["stringify", "identityMatcher", "valueContent"] }, { type: i1.TuiDataListWrapperComponent, selector: "tui-data-list-wrapper:not([labels])", inputs: ["items"] }, { type: i1.TuiToggleComponent, selector: "tui-toggle", inputs: ["singleColor", "showIcons", "showLoader", "size"] }, { type: i2$1.TuiPrimitiveTextfieldComponent, selector: "tui-primitive-textfield", inputs: ["editable", "filler", "iconCleaner", "readOnly", "invalid", "disabled", "prefix", "postfix", "value"], outputs: ["valueChange"] }, { type: i2$1.TuiTextfieldComponent, selector: "input[tuiTextfield], textarea[tuiTextfield]" }, { type: i1.TuiInputCountComponent, selector: "tui-input-count", inputs: ["step", "min", "max", "hideButtons", "prefix", "postfix"] }, { type: i2$1.TuiNotificationComponent, selector: "tui-notification", inputs: ["hasIcon", "status"], outputs: ["close"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2$1.TuiModeDirective, selector: "[tuiMode]", inputs: ["tuiMode"] }, { type: i1.TuiSelectDirective, selector: "tui-select" }, { type: i2$1.TuiTextfieldSizeDirective, selector: "[tuiTextfieldSize]", inputs: ["tuiTextfieldSize"] }, { type: i2$1.TuiDropdownOptionsDirective, selector: "[tuiDropdownAlign], [tuiDropdownDirection], [tuiDropdownLimitWidth], [tuiDropdownMinHeight], [tuiDropdownMaxHeight]", inputs: ["tuiDropdownAlign", "tuiDropdownDirection", "tuiDropdownLimitWidth", "tuiDropdownMinHeight", "tuiDropdownMaxHeight"] }, { type: i2$1.TuiTextfieldCleanerDirective, selector: "[tuiTextfieldCleaner]", inputs: ["tuiTextfieldCleaner"] }, { type: i2$1.TuiTextfieldLabelOutsideDirective, selector: "[tuiTextfieldLabelOutside]", inputs: ["tuiTextfieldLabelOutside"] }, { type: i5$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i2$1.TuiDataListDirective, selector: "ng-template[tuiDataList]" }, { type: i5.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i5.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i2$1.TuiPrimitiveTextfieldDirective, selector: "tui-primitive-textfield" }, { type: i2$1.TuiGroupDirective, selector: "[tuiGroup]:not(ng-container)", inputs: ["orientation", "adaptive", "collapsed", "rounded", "size"] }, { type: TuiInputOpacityDirective, selector: "[tuiInputOpacity]", inputs: ["tuiInputOpacity"] }, { type: i1.TuiInputCountDirective, selector: "tui-input-count" }], pipes: { "tuiStripOptionalPipe": TuiStripOptionalPipe, "tuiIsOptionalPipe": TuiIsOptionalPipe, "tuiShowContentTooltip": TuiShowContentTooltip, "tuiShowCleanerPipe": TuiShowCleanerPipe, "tuiInspectAny": TuiInspectPipe, "tuiGetOpacity": TuiGetOpacityPipe, "tuiGetColorPipe": TuiGetColorPipe, "tuiIsPrimitivePolymorpheusContentPipe": TuiIsPrimitivePolymorpheusContentPipe, "async": i5.AsyncPipe }, animations: [
         trigger(`emitEvent`, [
             transition(`:increment`, [style({ opacity: 1 }), animate(`500ms ease-in`)]),
         ]),
@@ -791,6 +898,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                             transition(`:increment`, [style({ opacity: 1 }), animate(`500ms ease-in`)]),
                         ]),
                     ],
+                    providers: [TuiGetColorPipe, TuiGetOpacityPipe, TuiDestroyService],
                 }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef, decorators: [{
                     type: Inject,
@@ -798,6 +906,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 }] }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [TUI_DOC_DOCUMENTATION_TEXTS]
+                }] }, { type: i6$1.TuiDestroyService, decorators: [{
+                    type: Self
+                }, {
+                    type: Inject,
+                    args: [TuiDestroyService]
+                }] }, { type: TuiGetColorPipe, decorators: [{
+                    type: Inject,
+                    args: [TuiGetColorPipe]
+                }] }, { type: TuiGetOpacityPipe, decorators: [{
+                    type: Inject,
+                    args: [TuiGetOpacityPipe]
                 }] }]; }, propDecorators: { heading: [{
                 type: Input
             }], showValues: [{
@@ -826,7 +945,14 @@ class TuiDocDocumentationModule {
 }
 TuiDocDocumentationModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiDocDocumentationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
 TuiDocDocumentationModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiDocDocumentationModule, declarations: [TuiInspectPipe,
+        TuiGetColorPipe,
+        TuiGetOpacityPipe,
+        TuiIsOptionalPipe,
+        TuiShowCleanerPipe,
+        TuiStripOptionalPipe,
+        TuiShowContentTooltip,
         TuiDocDocumentationComponent,
+        TuiIsPrimitivePolymorpheusContentPipe,
         TuiDocDocumentationPropertyConnectorDirective], imports: [CommonModule,
         FormsModule,
         RouterModule,
@@ -891,7 +1017,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                     ],
                     declarations: [
                         TuiInspectPipe,
+                        TuiGetColorPipe,
+                        TuiGetOpacityPipe,
+                        TuiIsOptionalPipe,
+                        TuiShowCleanerPipe,
+                        TuiStripOptionalPipe,
+                        TuiShowContentTooltip,
                         TuiDocDocumentationComponent,
+                        TuiIsPrimitivePolymorpheusContentPipe,
                         TuiDocDocumentationPropertyConnectorDirective,
                     ],
                     exports: [
@@ -1011,7 +1144,7 @@ class TuiDocExampleComponent {
     }
 }
 TuiDocExampleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiDocExampleComponent, deps: [{ token: `id`, attribute: true }, { token: Clipboard }, { token: TuiAlertService }, { token: LOCATION }, { token: TUI_COPY_TEXTS }, { token: TUI_DOC_EXAMPLE_TEXTS }, { token: TUI_DOC_CODE_EDITOR, optional: true }, { token: TUI_DOC_EXAMPLE_CONTENT_PROCESSOR }, { token: TUI_IS_CYPRESS }, { token: TUI_DOC_CODE_ACTIONS }, { token: Router }, { token: ActivatedRoute }, { token: Location$1 }], target: i0.ɵɵFactoryTarget.Component });
-TuiDocExampleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TuiDocExampleComponent, selector: "tui-doc-example", inputs: { heading: "heading", description: "description", content: "content", componentName: "componentName" }, ngImport: i0, template: "<h3\n    *ngIf=\"heading\"\n    class=\"t-title\"\n>\n    <span\n        *polymorpheusOutlet=\"heading | tuiDocExampleCapitalize as text\"\n        [textContent]=\"text\"\n    ></span>\n    <button\n        *ngIf=\"id\"\n        tuiIconButton\n        type=\"button\"\n        size=\"xs\"\n        icon=\"tuiIconLinkLarge\"\n        appearance=\"icon\"\n        class=\"t-link-icon\"\n        [title]=\"copy$ | async\"\n        (click)=\"copyExampleLink()\"\n    ></button>\n</h3>\n<h4\n    *ngIf=\"description\"\n    class=\"t-description\"\n>\n    <ng-container *polymorpheusOutlet=\"description | tuiDocExampleCapitalize as text\">\n        {{ text }}\n    </ng-container>\n</h4>\n\n<div\n    *ngIf=\"processor$ | async as files\"\n    class=\"t-example\"\n>\n    <ng-container *ngIf=\"files | tuiDocExampleGetTabs: defaultTab as tabs\">\n        <div class=\"t-tabs-wrapper\">\n            <tui-tabs-with-more\n                class=\"t-tabs\"\n                [(activeItemIndex)]=\"activeItemIndex\"\n            >\n                <ng-container *ngFor=\"let tab of tabs\">\n                    <button\n                        *tuiItem\n                        tuiTab\n                    >\n                        {{ tab }}\n                    </button>\n                </ng-container>\n            </tui-tabs-with-more>\n\n            <button\n                *ngIf=\"files | tuiMapper: visible\"\n                tuiButton\n                appearance=\"flat\"\n                size=\"s\"\n                [showLoader]=\"!!(loading$ | async)\"\n                (click)=\"edit(files)\"\n            >\n                Edit on {{ codeEditor!.name }}\n            </button>\n        </div>\n\n        <div\n            *ngFor=\"let tab of tabs; let index = index\"\n            class=\"t-content\"\n            [class.t-content_animated]=\"!isCypress\"\n            [class.t-content_visible]=\"activeItemIndex === index\"\n        >\n            <ng-container\n                *ngIf=\"index === defaultTabIndex; else anotherTab\"\n                [ngTemplateOutlet]=\"preview\"\n            ></ng-container>\n            <ng-template #anotherTab>\n                <ng-container\n                    [ngTemplateOutlet]=\"codeSection\"\n                    [ngTemplateOutletContext]=\"{$implicit: files[tabs[activeItemIndex]] || ''}\"\n                ></ng-container>\n            </ng-template>\n        </div>\n    </ng-container>\n</div>\n\n<ng-template #preview>\n    <div\n        automation-id=\"tui-doc-example\"\n        class=\"t-demo\"\n    >\n        <ng-content></ng-content>\n    </div>\n</ng-template>\n\n<ng-template\n    #codeSection\n    let-code\n>\n    <section class=\"t-code-actions\">\n        <ng-container *ngFor=\"let action of codeActions\">\n            <ng-container *polymorpheusOutlet=\"action as text; context: {$implicit: code}\">\n                {{ text }}\n            </ng-container>\n        </ng-container>\n        <tui-doc-copy [cdkCopyToClipboard]=\"code\"></tui-doc-copy>\n    </section>\n    <tui-doc-code [code]=\"code\"></tui-doc-code>\n</ng-template>\n", styles: [":host{position:relative;display:block;padding-top:3.5rem;clear:right}:host :host-context(tui-root._mobile){padding-top:2rem}.t-title{font:var(--tui-font-heading-5);margin:0 0 .5rem}:host-context(tui-root._mobile) .t-title{font:var(--tui-font-heading-6)}.t-description{font:var(--tui-font-text-m);font-weight:normal;margin:0}.t-example{position:relative;margin-top:1.5rem;border:1px solid var(--tui-base-03);border-radius:var(--tui-radius-m);box-shadow:0 .125rem .1875rem rgba(0,0,0,.1)}:host-context(tui-root._mobile) .t-example{margin-top:.75rem}.t-tabs-wrapper{display:flex;padding:0 2rem;box-shadow:inset 0 -1px var(--tui-base-03);justify-content:space-between;align-items:center}:host-context(tui-root._mobile) .t-tabs-wrapper{padding:0 1rem}.t-tabs{flex-grow:1}.t-demo{padding:2rem;overflow-x:auto}@media all and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: .001dpcm){.t-demo::-webkit-scrollbar,.t-demo::-webkit-scrollbar-thumb{width:1rem;height:1rem;border-radius:6.25rem;background-clip:padding-box;border:2.667rem solid transparent}.t-demo::-webkit-scrollbar{background-color:transparent}.t-demo::-webkit-scrollbar-thumb{background-color:var(--tui-clear-hover)}.t-demo::-webkit-scrollbar-thumb:hover{background-color:var(--tui-clear-active)}.t-demo::-webkit-scrollbar-thumb:active{background-color:var(--tui-text-03)}}:host-context(tui-root._mobile) .t-demo{padding:1rem}.t-code-actions{position:absolute;top:4.375rem;right:1rem;display:flex;justify-content:flex-end;align-items:center}.t-code-actions>*{margin-left:.5rem}.t-link-icon{margin-left:.3rem;vertical-align:baseline}.t-content{will-change:opacity;height:0;visibility:hidden;opacity:0}.t-content_animated{transition:opacity .3s ease-in-out}.t-content_visible{height:auto;visibility:visible;opacity:1}\n"], components: [{ type: i2$1.TuiButtonComponent, selector: "button[tuiButton], button[tuiIconButton], a[tuiButton], a[tuiIconButton]", inputs: ["appearance", "disabled", "icon", "iconRight", "shape", "showLoader", "size"] }, { type: i1.TuiTabsWithMoreComponent, selector: "tui-tabs-with-more, nav[tuiTabsWithMore]", inputs: ["moreContent", "dropdownContent", "underline", "activeItemIndex", "itemsLimit"], outputs: ["activeItemIndexChange"] }, { type: i1.TuiTabComponent, selector: "a[tuiTab]:not([routerLink]), a[tuiTab][routerLink][routerLinkActive], button[tuiTab]" }, { type: TuiDocCopyComponent, selector: "tui-doc-copy" }, { type: TuiDocCodeComponent, selector: "tui-doc-code", inputs: ["filename", "code"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6$2.PolymorpheusOutletDirective, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6$1.TuiItemDirective, selector: "[tuiItem]" }, { type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i8.CdkCopyToClipboard, selector: "[cdkCopyToClipboard]", inputs: ["cdkCopyToClipboard", "cdkCopyToClipboardAttempts"], outputs: ["cdkCopyToClipboardCopied"] }], pipes: { "tuiDocExampleCapitalize": TuiDocExampleCapitalizePipe, "async": i5.AsyncPipe, "tuiDocExampleGetTabs": TuiDocExampleGetTabsPipe, "tuiMapper": i6$1.TuiMapperPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+TuiDocExampleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TuiDocExampleComponent, selector: "tui-doc-example", inputs: { heading: "heading", description: "description", content: "content", componentName: "componentName" }, ngImport: i0, template: "<h3\n    *ngIf=\"heading\"\n    class=\"t-title\"\n>\n    <span\n        *polymorpheusOutlet=\"heading | tuiDocExampleCapitalize as text\"\n        [textContent]=\"text\"\n    ></span>\n    <button\n        *ngIf=\"id\"\n        tuiIconButton\n        type=\"button\"\n        size=\"xs\"\n        icon=\"tuiIconLinkLarge\"\n        appearance=\"icon\"\n        class=\"t-link-icon\"\n        [title]=\"copy$ | async\"\n        (click)=\"copyExampleLink()\"\n    ></button>\n</h3>\n<h4\n    *ngIf=\"description\"\n    class=\"t-description\"\n>\n    <ng-container *polymorpheusOutlet=\"description | tuiDocExampleCapitalize as text\">\n        {{ text }}\n    </ng-container>\n</h4>\n\n<div\n    *ngIf=\"processor$ | async as files\"\n    class=\"t-example\"\n>\n    <ng-container *ngIf=\"files | tuiDocExampleGetTabs : defaultTab as tabs\">\n        <div class=\"t-tabs-wrapper\">\n            <tui-tabs-with-more\n                class=\"t-tabs\"\n                [(activeItemIndex)]=\"activeItemIndex\"\n            >\n                <ng-container *ngFor=\"let tab of tabs\">\n                    <button\n                        *tuiItem\n                        tuiTab\n                    >\n                        {{ tab }}\n                    </button>\n                </ng-container>\n            </tui-tabs-with-more>\n\n            <button\n                *ngIf=\"files | tuiMapper : visible\"\n                tuiButton\n                appearance=\"flat\"\n                size=\"s\"\n                [showLoader]=\"!!(loading$ | async)\"\n                (click)=\"edit(files)\"\n            >\n                Edit on {{ codeEditor!.name }}\n            </button>\n        </div>\n\n        <div\n            *ngFor=\"let tab of tabs; let index = index\"\n            class=\"t-content\"\n            [class.t-content_animated]=\"!isCypress\"\n            [class.t-content_visible]=\"activeItemIndex === index\"\n        >\n            <ng-container\n                *ngIf=\"index === defaultTabIndex; else anotherTab\"\n                [ngTemplateOutlet]=\"preview\"\n            ></ng-container>\n            <ng-template #anotherTab>\n                <ng-container\n                    [ngTemplateOutlet]=\"codeSection\"\n                    [ngTemplateOutletContext]=\"{$implicit: files[tabs[activeItemIndex]] || ''}\"\n                ></ng-container>\n            </ng-template>\n        </div>\n    </ng-container>\n</div>\n\n<ng-template #preview>\n    <div\n        automation-id=\"tui-doc-example\"\n        class=\"t-demo\"\n    >\n        <ng-content></ng-content>\n    </div>\n</ng-template>\n\n<ng-template\n    #codeSection\n    let-code\n>\n    <section class=\"t-code-actions\">\n        <ng-container *ngFor=\"let action of codeActions\">\n            <ng-container *polymorpheusOutlet=\"action as text; context: {$implicit: code}\">\n                {{ text }}\n            </ng-container>\n        </ng-container>\n        <tui-doc-copy [cdkCopyToClipboard]=\"code\"></tui-doc-copy>\n    </section>\n    <tui-doc-code [code]=\"code\"></tui-doc-code>\n</ng-template>\n", styles: [":host{position:relative;display:block;padding-top:3.5rem;clear:right}:host :host-context(tui-root._mobile){padding-top:2rem}.t-title{font:var(--tui-font-heading-5);margin:0 0 .5rem}:host-context(tui-root._mobile) .t-title{font:var(--tui-font-heading-6)}.t-description{font:var(--tui-font-text-m);font-weight:normal;margin:0}.t-example{position:relative;margin-top:1.5rem;border:1px solid var(--tui-base-03);border-radius:var(--tui-radius-m);box-shadow:0 .125rem .1875rem rgba(0,0,0,.1)}:host-context(tui-root._mobile) .t-example{margin-top:.75rem}.t-tabs-wrapper{display:flex;padding:0 2rem;box-shadow:inset 0 -1px var(--tui-base-03);justify-content:space-between;align-items:center}:host-context(tui-root._mobile) .t-tabs-wrapper{padding:0 1rem}.t-tabs{flex-grow:1}.t-demo{padding:2rem;overflow-x:auto}@media all and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: .001dpcm){.t-demo::-webkit-scrollbar,.t-demo::-webkit-scrollbar-thumb{width:1rem;height:1rem;border-radius:6.25rem;background-clip:padding-box;border:2.667rem solid transparent}.t-demo::-webkit-scrollbar{background-color:transparent}.t-demo::-webkit-scrollbar-thumb{background-color:var(--tui-clear-hover)}.t-demo::-webkit-scrollbar-thumb:hover{background-color:var(--tui-clear-active)}.t-demo::-webkit-scrollbar-thumb:active{background-color:var(--tui-text-03)}}:host-context(tui-root._mobile) .t-demo{padding:1rem}.t-code-actions{position:absolute;top:4.375rem;right:1rem;display:flex;justify-content:flex-end;align-items:center}.t-code-actions>*{margin-left:.5rem}.t-link-icon{margin-left:.3rem;vertical-align:baseline}.t-content{will-change:opacity;height:0;visibility:hidden;opacity:0}.t-content_animated{transition:opacity .3s ease-in-out}.t-content_visible{height:auto;visibility:visible;opacity:1}\n"], components: [{ type: i2$1.TuiButtonComponent, selector: "button[tuiButton], button[tuiIconButton], a[tuiButton], a[tuiIconButton]", inputs: ["appearance", "disabled", "icon", "iconRight", "shape", "showLoader", "size"] }, { type: i1.TuiTabsWithMoreComponent, selector: "tui-tabs-with-more, nav[tuiTabsWithMore]", inputs: ["moreContent", "dropdownContent", "underline", "activeItemIndex", "itemsLimit"], outputs: ["activeItemIndexChange"] }, { type: i1.TuiTabComponent, selector: "a[tuiTab]:not([routerLink]), a[tuiTab][routerLink][routerLinkActive], button[tuiTab]" }, { type: TuiDocCopyComponent, selector: "tui-doc-copy" }, { type: TuiDocCodeComponent, selector: "tui-doc-code", inputs: ["filename", "code"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6$2.PolymorpheusOutletDirective, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6$1.TuiItemDirective, selector: "[tuiItem]" }, { type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i8.CdkCopyToClipboard, selector: "[cdkCopyToClipboard]", inputs: ["cdkCopyToClipboard", "cdkCopyToClipboardAttempts"], outputs: ["cdkCopyToClipboardCopied"] }], pipes: { "tuiDocExampleCapitalize": TuiDocExampleCapitalizePipe, "async": i5.AsyncPipe, "tuiDocExampleGetTabs": TuiDocExampleGetTabsPipe, "tuiMapper": i6$1.TuiMapperPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiDocExampleComponent, decorators: [{
             type: Component,
             args: [{
@@ -1290,7 +1423,7 @@ class TuiScrollIntoViewLinkDirective {
         this.scroll$.next(shallWe);
     }
 }
-TuiScrollIntoViewLinkDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiScrollIntoViewLinkDirective, deps: [{ token: TuiDestroyService }, { token: ElementRef }, { token: TUI_DOC_PAGE_LOADED }], target: i0.ɵɵFactoryTarget.Directive });
+TuiScrollIntoViewLinkDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiScrollIntoViewLinkDirective, deps: [{ token: TuiDestroyService, self: true }, { token: ElementRef }, { token: TUI_DOC_PAGE_LOADED }], target: i0.ɵɵFactoryTarget.Directive });
 TuiScrollIntoViewLinkDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: TuiScrollIntoViewLinkDirective, selector: "[tuiScrollIntoViewLink]", inputs: { tuiScrollIntoViewLink: "tuiScrollIntoViewLink" }, providers: [TuiDestroyService], ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiScrollIntoViewLinkDirective, decorators: [{
             type: Directive,
@@ -1299,6 +1432,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                     providers: [TuiDestroyService],
                 }]
         }], ctorParameters: function () { return [{ type: i6$1.TuiDestroyService, decorators: [{
+                    type: Self
+                }, {
                     type: Inject,
                     args: [TuiDestroyService]
                 }] }, { type: i0.ElementRef, decorators: [{
@@ -1423,7 +1558,7 @@ class TuiDocNavigationComponent {
         });
     }
 }
-TuiDocNavigationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiDocNavigationComponent, deps: [{ token: ChangeDetectorRef }, { token: Title }, { token: NAVIGATION_TITLE }, { token: DOCUMENT }, { token: TuiModeDirective }, { token: TuiSidebarDirective, optional: true }, { token: NAVIGATION_LABELS }, { token: NAVIGATION_ITEMS }, { token: TUI_DOC_SEARCH_TEXT }, { token: Router }, { token: ActivatedRoute }, { token: TuiDestroyService }, { token: TUI_DOC_PAGE_LOADED }, { token: TUI_DOC_SCROLL_BEHAVIOR }], target: i0.ɵɵFactoryTarget.Component });
+TuiDocNavigationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiDocNavigationComponent, deps: [{ token: ChangeDetectorRef }, { token: Title }, { token: NAVIGATION_TITLE }, { token: DOCUMENT }, { token: TuiModeDirective }, { token: TuiSidebarDirective, optional: true }, { token: NAVIGATION_LABELS }, { token: NAVIGATION_ITEMS }, { token: TUI_DOC_SEARCH_TEXT }, { token: Router }, { token: ActivatedRoute }, { token: TuiDestroyService, self: true }, { token: TUI_DOC_PAGE_LOADED }, { token: TUI_DOC_SCROLL_BEHAVIOR }], target: i0.ɵɵFactoryTarget.Component });
 TuiDocNavigationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TuiDocNavigationComponent, selector: "tui-doc-navigation", host: { properties: { "class._open": "this.menuOpen" } }, providers: NAVIGATION_PROVIDERS, ngImport: i0, template: "<tui-input\n    #input\n    tuiTextfieldSize=\"m\"\n    tuiTextfieldIconLeft=\"tuiIconSearch\"\n    class=\"t-input\"\n    [formControl]=\"search\"\n    [tuiAutoFocus]=\"!!sidebar\"\n    [tuiTextfieldCleaner]=\"true\"\n    [tuiTextfieldLabelOutside]=\"true\"\n>\n    {{ searchText }}\n    <ng-container *ngIf=\"canOpen\">\n        <tui-data-list *tuiDataList>\n            <tui-opt-group\n                *ngFor=\"let group of filtered$ | async; 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(input)\"\n                >\n                    {{ item.title }}\n                </a>\n            </tui-opt-group>\n        </tui-data-list>\n    </ng-container>\n</tui-input>\n\n<nav class=\"t-navigation\">\n    <tui-scrollbar\n        class=\"t-scrollbar\"\n        [tuiMode]=\"mode$ | async\"\n    >\n        <tui-accordion\n            [closeOthers]=\"false\"\n            [rounded]=\"false\"\n        >\n            <tui-accordion-item\n                *ngFor=\"let label of labels; index as index\"\n                size=\"s\"\n                [borders]=\"null\"\n                [(open)]=\"!!openPagesArr[index]\"\n            >\n                <span class=\"t-label\">\n                    <strong>{{ label }}</strong>\n                </span>\n                <ng-template tuiAccordionItemContent>\n                    <div class=\"t-section\">\n                        <ng-container\n                            *ngFor=\"let item of items[index]; index as subIndex\"\n                            [ngTemplateOutlet]=\"pages\"\n                            [ngTemplateOutletContext]=\"{item: item, index: index * 100 + subIndex}\"\n                        ></ng-container>\n                    </div>\n                </ng-template>\n            </tui-accordion-item>\n        </tui-accordion>\n        <div class=\"t-items-container\">\n            <ng-container\n                *ngFor=\"let item of itemsWithoutSections; let index = index\"\n                [ngTemplateOutlet]=\"pages\"\n                [ngTemplateOutletContext]=\"{item: item, index: items.length - 1 + index}\"\n            ></ng-container>\n        </div>\n\n        <ng-template\n            #pages\n            let-item=\"item\"\n            let-index=\"index\"\n        >\n            <a\n                *ngIf=\"!item.subPages; else subPages\"\n                tuiLink\n                routerLinkActive=\"t-sublink_active\"\n                class=\"t-sublink\"\n                [routerLink]=\"item.route\"\n                [tuiScrollIntoViewLink]=\"isActive(item.route)\"\n                (click)=\"closeMenu()\"\n            >\n                {{ item.title }}\n            </a>\n            <ng-template #subPages>\n                <div\n                    routerLinkActive\n                    class=\"t-subsection\"\n                    [routerLinkActiveOptions]=\"{exact: false}\"\n                >\n                    <button\n                        *ngIf=\"item.subPages\"\n                        tuiLink\n                        type=\"button\"\n                        class=\"t-sublink t-sublink_subsection\"\n                        (click)=\"onGroupClick(index)\"\n                    >\n                        <tui-svg\n                            src=\"tuiIconChevronRight\"\n                            class=\"t-chevron\"\n                            [class.t-chevron_active]=\"!!openPagesGroupsArr[index]\"\n                        ></tui-svg>\n                        {{ item.title }}\n                    </button>\n                    <tui-expand\n                        class=\"t-expand\"\n                        [expanded]=\"!!openPagesGroupsArr[index]\"\n                    >\n                        <div class=\"t-section t-section_bordered\">\n                            <a\n                                *ngFor=\"let subPage of item.subPages\"\n                                tuiLink\n                                routerLinkActive=\"t-sublink_active\"\n                                class=\"t-sublink t-sublink_small\"\n                                [routerLink]=\"subPage.route\"\n                                [tuiScrollIntoViewLink]=\"isActive(subPage.route)\"\n                                (click)=\"closeMenu()\"\n                            >\n                                {{ subPage.title }}\n                            </a>\n                        </div>\n                    </tui-expand>\n                </div>\n            </ng-template>\n        </ng-template>\n    </tui-scrollbar>\n</nav>\n\n<ng-content></ng-content>\n", styles: [":host{z-index:1;display:flex;flex-direction:column;text-align:center;background:var(--tui-base-01)}.t-input{margin:1.25rem}.t-navigation{display:flex;max-height:100%;min-height:0;flex:1 1 0;text-align:left}.t-scrollbar{scroll-behavior:smooth;width:100%}@media screen and (prefers-reduced-motion: reduce){.t-scrollbar{scroll-behavior:auto}}.t-items-container{display:flex;flex-direction:column;padding:0 1rem}.t-label{margin-left:.5rem}.t-expand{margin-left:.25rem}.t-section{display:flex;flex-direction:column;align-items:flex-start;margin:-1rem 0 -.5rem}.t-section_bordered{margin:.5rem 0;border-left:1px solid var(--tui-base-03)}.t-subsection{margin-left:.5rem}.t-sublink{-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:1rem 0 0;border:0;background:none;font-size:inherit;line-height:inherit;font:var(--tui-font-text-m);margin-left:.5rem}.t-sublink_small{margin-left:1rem;line-height:1.5rem;padding-top:.5rem}.t-sublink_subsection{margin-left:0;line-height:1.6rem}.t-sublink_active{color:var(--tui-text-01)}.t-chevron{transition-property:transform;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;width:1rem;height:1rem;margin:-.25rem .25rem 0 -.1875rem}.t-chevron_active{transform:rotate(90deg)}\n"], components: [{ type: i1.TuiInputComponent, selector: "tui-input" }, { type: i2$1.TuiDataListComponent, selector: "tui-data-list", inputs: ["role", "emptyContent", "size"] }, { type: i2$1.TuiOptionComponent, selector: "button[tuiOption], a[tuiOption]", inputs: ["size", "role", "disabled", "value"] }, { type: i2$1.TuiScrollbarComponent, selector: "tui-scrollbar", inputs: ["hidden"] }, { type: i1.TuiAccordionComponent, selector: "tui-accordion", inputs: ["closeOthers", "rounded"] }, { type: i1.TuiAccordionItemComponent, selector: "tui-accordion-item", inputs: ["noPadding", "showArrow", "borders", "size", "disabled", "disableHover", "open", "async"], outputs: ["openChange"] }, { type: i2$1.TuiLinkComponent, selector: "a[tuiLink], button[tuiLink]", inputs: ["pseudo", "icon", "iconAlign", "iconRotated", "mode"], exportAs: ["tuiLink"] }, { type: i2$1.TuiSvgComponent, selector: "tui-svg", inputs: ["src"] }, { type: i2$1.TuiExpandComponent, selector: "tui-expand", inputs: ["async", "expanded"] }], directives: [{ type: i1.TuiInputDirective, selector: "tui-input" }, { type: i2$1.TuiTextfieldSizeDirective, selector: "[tuiTextfieldSize]", inputs: ["tuiTextfieldSize"] }, { type: i2$1.TuiTextfieldIconLeftDirective, selector: "[tuiTextfieldIconLeft]", inputs: ["tuiTextfieldIconLeft"] }, { type: i5$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5$1.FormControlDirective, selector: "[formControl]", inputs: ["disabled", "formControl", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i6$1.TuiAutoFocusDirective, selector: "[tuiAutoFocus]", inputs: ["tuiAutoFocus"] }, { type: i2$1.TuiTextfieldCleanerDirective, selector: "[tuiTextfieldCleaner]", inputs: ["tuiTextfieldCleaner"] }, { type: i2$1.TuiTextfieldLabelOutsideDirective, selector: "[tuiTextfieldLabelOutside]", inputs: ["tuiTextfieldLabelOutside"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.TuiDataListDirective, selector: "ng-template[tuiDataList]" }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$1.TuiOptGroupDirective, selector: "tui-opt-group", inputs: ["label"] }, { type: i6.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["routerLink", "target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo"] }, { type: i2$1.TuiModeDirective, selector: "[tuiMode]", inputs: ["tuiMode"] }, { type: i1.TuiAccordionItemContentDirective, selector: "ng-template[tuiAccordionItemContent]" }, { type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i6.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "routerLinkActive"], exportAs: ["routerLinkActive"] }, { type: TuiScrollIntoViewLinkDirective, selector: "[tuiScrollIntoViewLink]", inputs: ["tuiScrollIntoViewLink"] }], pipes: { "async": i5.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 __decorate([
     tuiPure
@@ -1476,6 +1611,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                     type: Inject,
                     args: [ActivatedRoute]
                 }] }, { type: i9.Observable, decorators: [{
+                    type: Self
+                }, {
                     type: Inject,
                     args: [TuiDestroyService]
                 }] }, { type: i9.Observable, decorators: [{