@taiga-ui/addon-doc 3.10.0 → 3.12.0

package/bundles/taiga-ui-addon-doc.umd.js

@@ -571,10 +571,11 @@
     var MIN_COMPONENT_WIDTH = 104;
     var TuiDocDemoComponent = /** @class */ (function () {
         function TuiDocDemoComponent(isMobile, destroy$, renderer, platformId, locationRef, urlSerializer, texts) {
-            var _this = this;
             this.isMobile = isMobile;
             this.destroy$ = destroy$;
             this.renderer = renderer;
+            this.locationRef = locationRef;
+            this.urlSerializer = urlSerializer;
             this.texts = texts;
             this.initialX = 0;
             this.wrapperWidth = 0;
@@ -593,15 +594,6 @@
             if (parsedMode !== null && parsedMode.length > 0) {
                 this.modeControl.setValue(parsedMode[1]);
             }
-            this.modeControl.valueChanges
-                .pipe(operators.startWith(this.modeControl.value), operators.takeUntil(this.destroy$))
-                .subscribe(function (mode) {
-                var 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();
-            });
         }
         TuiDocDemoComponent.prototype.onResize = function () {
             this.setResizerTextContent();
@@ -610,17 +602,28 @@
             this.createForm();
         };
         TuiDocDemoComponent.prototype.ngAfterViewInit = function () {
-            this.setResizerTextContent();
+            var _this = this;
+            this.modeControl.valueChanges
+                .pipe(operators.startWith(this.modeControl.value), operators.takeUntil(this.destroy$))
+                .subscribe(function (mode) {
+                _this.updateUrl(mode);
+                var wrapperWidth = parseInt(_this.getUrlTree().queryParams.sandboxWidth, 10) +
+                    _this.getPaddingOfWrapper() +
+                    _this.getResizeButtonWidth();
+                if (!Number.isNaN(wrapperWidth)) {
+                    _this.wrapperWidth = wrapperWidth;
+                    _this.setWidthWrapper(i6.tuiPx(wrapperWidth));
+                }
+                _this.setResizerTextContent();
+                _this.mode = mode;
+                _this.change$.next();
+            });
         };
         TuiDocDemoComponent.prototype.setResizerTextContent = function () {
             if (!this.content || !this.resizerText) {
                 return;
             }
-            var paddingLeft = this.isBrowser
-                ? getComputedStyle(this.content.nativeElement).paddingLeft
-                : "0";
-            var offsetWidth = this.content.nativeElement.offsetWidth;
-            this.resizerText.nativeElement.textContent = String(offsetWidth - parseInt(paddingLeft || "0", 10) * 2);
+            this.resizerText.nativeElement.textContent = (this.content.nativeElement.offsetWidth - this.getPaddingOfWrapper()).toString();
         };
         TuiDocDemoComponent.prototype.onDragStart = function (event) {
             event.preventDefault();
@@ -634,6 +637,7 @@
         };
         TuiDocDemoComponent.prototype.onDragEnd = function () {
             this.wrapperWidth = this.wrapper ? this.wrapper.nativeElement.offsetWidth : 0;
+            this.updateSandboxWidth();
         };
         TuiDocDemoComponent.prototype.toggleDetails = function () {
             this.expanded = !this.expanded;
@@ -643,21 +647,53 @@
             this.createForm();
         };
         TuiDocDemoComponent.prototype.createForm = function () {
-            var _a = this, control = _a.control, updateOn = _a.updateOn;
+            var _d = this, control = _d.control, updateOn = _d.updateOn;
             if (!control) {
                 return;
             }
             this.testForm = new i5$1.FormGroup({ testValue: control }, { updateOn: updateOn });
         };
         TuiDocDemoComponent.prototype.resizeContent = function (delta) {
+            this.setWidthWrapper(i6.tuiPx(Math.max(this.wrapperWidth - delta, MIN_COMPONENT_WIDTH)));
+        };
+        TuiDocDemoComponent.prototype.setWidthWrapper = function (width) {
             if (!this.wrapper) {
                 return;
             }
-            this.renderer.setStyle(this.wrapper.nativeElement, "width", i6.tuiPx(Math.max(this.wrapperWidth - delta, MIN_COMPONENT_WIDTH)));
+            this.renderer.setStyle(this.wrapper.nativeElement, "width", width);
+        };
+        TuiDocDemoComponent.prototype.updateUrl = function (mode) {
+            var urlTree = this.getUrlTree();
+            var modeParam = (mode !== null && mode !== void 0 ? mode : urlTree.queryParams.tuiMode) ? { tuiMode: mode } : {};
+            var sandboxWidth = parseInt(urlTree.queryParams.sandboxWidth, 10);
+            var resizeParam = !Number.isNaN(sandboxWidth) && MIN_COMPONENT_WIDTH > sandboxWidth
+                ? { sandboxWidth: sandboxWidth }
+                : {};
+            urlTree.queryParams = Object.assign(Object.assign(Object.assign({}, urlTree.queryParams), modeParam), resizeParam);
+            this.locationRef.go(String(urlTree));
+        };
+        TuiDocDemoComponent.prototype.getUrlTree = function () {
+            return this.urlSerializer.parse(this.locationRef.path());
+        };
+        TuiDocDemoComponent.prototype.getPaddingOfWrapper = function () {
+            var paddingLeft = this.isBrowser && this.content
+                ? getComputedStyle(this.content.nativeElement).paddingLeft
+                : "0";
+            return parseInt(paddingLeft || "0", 10) * 2;
+        };
+        TuiDocDemoComponent.prototype.getResizeButtonWidth = function () {
+            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;
+        };
+        TuiDocDemoComponent.prototype.updateSandboxWidth = function () {
+            var _a, _b;
+            var 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));
         };
         return TuiDocDemoComponent;
     }());
-    TuiDocDemoComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiDocDemoComponent, deps: [{ token: i6.TUI_IS_MOBILE }, { token: i6.TuiDestroyService }, { token: i0.Renderer2 }, { token: i0.PLATFORM_ID }, { token: i5.Location }, { token: i6$1.UrlSerializer }, { token: TUI_DOC_DEMO_TEXTS }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    TuiDocDemoComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiDocDemoComponent, deps: [{ token: i6.TUI_IS_MOBILE }, { token: i6.TuiDestroyService, self: true }, { token: i0.Renderer2 }, { token: i0.PLATFORM_ID }, { token: i5.Location }, { token: i6$1.UrlSerializer }, { token: TUI_DOC_DEMO_TEXTS }], target: i0__namespace.ɵɵFactoryTarget.Component });
     TuiDocDemoComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TuiDocDemoComponent, selector: "tui-doc-demo", inputs: { control: "control" }, host: { listeners: { "window:resize": "onResize()" } }, providers: [
             i6.TuiDestroyService,
             {
@@ -665,6 +701,9 @@
                 useExisting: i0.forwardRef(function () { return TuiDocDemoComponent; }),
             },
         ], queries: [{ propertyName: "template", first: true, predicate: i0.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__namespace, 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__namespace$1.TuiLinkComponent, selector: "a[tuiLink], button[tuiLink]", inputs: ["pseudo", "icon", "iconAlign", "iconRotated", "mode"], exportAs: ["tuiLink"] }, { type: i1__namespace.TuiSelectComponent, selector: "tui-select", inputs: ["stringify", "identityMatcher", "valueContent"] }, { type: i1__namespace.TuiDataListWrapperComponent, selector: "tui-data-list-wrapper:not([labels])", inputs: ["items"] }, { type: i2__namespace$1.TuiTooltipComponent, selector: "tui-tooltip", inputs: ["content", "direction", "appearance", "showDelay", "hideDelay", "describeId"] }, { type: i1__namespace.TuiRadioBlockComponent, selector: "tui-radio-block", inputs: ["item", "identityMatcher", "contentAlign", "size", "hideRadio", "pseudoDisabled"] }, { type: i1__namespace.TuiCheckboxLabeledComponent, selector: "tui-checkbox-labeled", inputs: ["size"] }, { type: i2__namespace$1.TuiButtonComponent, selector: "button[tuiButton], button[tuiIconButton], a[tuiButton], a[tuiIconButton]", inputs: ["appearance", "disabled", "icon", "iconRight", "shape", "showLoader", "size"] }, { type: i2__namespace$1.TuiSvgComponent, selector: "tui-svg", inputs: ["src"] }, { type: i2__namespace$1.TuiExpandComponent, selector: "tui-expand", inputs: ["async", "expanded"] }], directives: [{ type: i2__namespace$1.TuiModeDirective, selector: "[tuiMode]", inputs: ["tuiMode"] }, { type: i6__namespace.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["routerLink", "target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo"] }, { type: i5__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace.TuiSelectDirective, selector: "tui-select" }, { type: i2__namespace$1.TuiTextfieldSizeDirective, selector: "[tuiTextfieldSize]", inputs: ["tuiTextfieldSize"] }, { type: i2__namespace$1.TuiTextfieldCleanerDirective, selector: "[tuiTextfieldCleaner]", inputs: ["tuiTextfieldCleaner"] }, { type: i2__namespace$1.TuiHintOptionsDirective, selector: "[tuiHintContent]", inputs: ["tuiHintContent", "tuiHintDirection", "tuiHintAppearance", "tuiHintShowDelay", "tuiHintHideDelay"] }, { type: i5__namespace$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5__namespace$1.FormControlDirective, selector: "[formControl]", inputs: ["disabled", "formControl", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i2__namespace$1.TuiDataListDirective, selector: "ng-template[tuiDataList]" }, { type: i2__namespace$1.TuiGroupDirective, selector: "[tuiGroup]:not(ng-container)", inputs: ["orientation", "adaptive", "collapsed", "rounded", "size"] }, { type: i5__namespace$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i5__namespace$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i5__namespace$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i5__namespace$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i5__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2__namespace$1.TuiExpandContentDirective, selector: "[tuiExpandContent]" }, { type: i6__namespace$1.TuiDragDirective, selector: "[tuiDragStart], [tuiDragContinues], [tuiDragEnd]", outputs: ["tuiDragStart", "tuiDragContinues", "tuiDragEnd"] }], pipes: { "json": i5__namespace.JsonPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    __decorate([
+        i6.tuiDebounce(200)
+    ], TuiDocDemoComponent.prototype, "onResize", null);
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiDocDemoComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -685,6 +724,8 @@
                             type: i0.Inject,
                             args: [i6.TUI_IS_MOBILE]
                         }] }, { type: i6__namespace$1.TuiDestroyService, decorators: [{
+                            type: i0.Self
+                        }, {
                             type: i0.Inject,
                             args: [i6.TuiDestroyService]
                         }] }, { type: i0__namespace.Renderer2, decorators: [{
@@ -962,6 +1003,68 @@
                     type: i0.Output
                 }] } });
 
+    var TuiGetOpacityPipe = /** @class */ (function () {
+        function TuiGetOpacityPipe() {
+        }
+        TuiGetOpacityPipe.prototype.transform = function (color) {
+            if (color.startsWith("#") || color.startsWith("rgb(")) {
+                return 100;
+            }
+            if (color === "transparent") {
+                return 0;
+            }
+            var lastComma = color.lastIndexOf(",");
+            var parsed = color
+                .slice(lastComma)
+                .replace(")", "")
+                .replace(" ", "")
+                .replace(",", "");
+            return Math.round(Number.parseFloat(parsed) * 100);
+        };
+        return TuiGetOpacityPipe;
+    }());
+    TuiGetOpacityPipe.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiGetOpacityPipe, deps: [], target: i0__namespace.ɵɵFactoryTarget.Pipe });
+    TuiGetOpacityPipe.ɵpipe = i0__namespace.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiGetOpacityPipe, name: "tuiGetOpacity" });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiGetOpacityPipe, decorators: [{
+                type: i0.Pipe,
+                args: [{ name: "tuiGetOpacity" }]
+            }] });
+
+    var TuiGetColorPipe = /** @class */ (function () {
+        function TuiGetColorPipe() {
+        }
+        TuiGetColorPipe.prototype.transform = function (color) {
+            if (color.length === 4) {
+                return color
+                    .split("")
+                    .reduce(function (result, current) { return __spreadArray(__spreadArray([], __read(result)), [current, current]); }, [])
+                    .join("")
+                    .replace("#", "");
+            }
+            if (color.startsWith("#")) {
+                return color;
+            }
+            if (color === "transparent") {
+                return "#000000";
+            }
+            var parsed = color
+                .replace("rgb(", "")
+                .replace("rgba(", "")
+                .replace(")", "")
+                .replace(" ", "")
+                .split(",")
+                .map(function (v) { return Number.parseInt(v, 10); });
+            return i6.tuiRgbToHex.apply(void 0, __spreadArray([], __read(parsed)));
+        };
+        return TuiGetColorPipe;
+    }());
+    TuiGetColorPipe.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiGetColorPipe, deps: [], target: i0__namespace.ɵɵFactoryTarget.Pipe });
+    TuiGetColorPipe.ɵpipe = i0__namespace.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiGetColorPipe, name: "tuiGetColorPipe" });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiGetColorPipe, decorators: [{
+                type: i0.Pipe,
+                args: [{ name: "tuiGetColorPipe" }]
+            }] });
+
     var TuiInputOpacityDirective = /** @class */ (function () {
         function TuiInputOpacityDirective(renderer, tuiFocusableComponent) {
             this.renderer = renderer;
@@ -998,6 +1101,66 @@
                     type: i0.Input
                 }] } });
 
+    var TuiStripOptionalPipe = /** @class */ (function () {
+        function TuiStripOptionalPipe() {
+        }
+        TuiStripOptionalPipe.prototype.transform = function (name) {
+            return name.replace("?", "");
+        };
+        return TuiStripOptionalPipe;
+    }());
+    TuiStripOptionalPipe.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiStripOptionalPipe, deps: [], target: i0__namespace.ɵɵFactoryTarget.Pipe });
+    TuiStripOptionalPipe.ɵpipe = i0__namespace.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiStripOptionalPipe, name: "tuiStripOptionalPipe" });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiStripOptionalPipe, decorators: [{
+                type: i0.Pipe,
+                args: [{ name: "tuiStripOptionalPipe" }]
+            }] });
+
+    var TuiIsOptionalPipe = /** @class */ (function () {
+        function TuiIsOptionalPipe() {
+        }
+        TuiIsOptionalPipe.prototype.transform = function (name) {
+            return name.includes("?");
+        };
+        return TuiIsOptionalPipe;
+    }());
+    TuiIsOptionalPipe.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiIsOptionalPipe, deps: [], target: i0__namespace.ɵɵFactoryTarget.Pipe });
+    TuiIsOptionalPipe.ɵpipe = i0__namespace.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiIsOptionalPipe, name: "tuiIsOptionalPipe" });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiIsOptionalPipe, decorators: [{
+                type: i0.Pipe,
+                args: [{ name: "tuiIsOptionalPipe" }]
+            }] });
+
+    var TuiShowContentTooltip = /** @class */ (function () {
+        function TuiShowContentTooltip() {
+        }
+        TuiShowContentTooltip.prototype.transform = function (type) {
+            return type.includes("PolymorpheusContent");
+        };
+        return TuiShowContentTooltip;
+    }());
+    TuiShowContentTooltip.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiShowContentTooltip, deps: [], target: i0__namespace.ɵɵFactoryTarget.Pipe });
+    TuiShowContentTooltip.ɵpipe = i0__namespace.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiShowContentTooltip, name: "tuiShowContentTooltip" });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiShowContentTooltip, decorators: [{
+                type: i0.Pipe,
+                args: [{ name: "tuiShowContentTooltip" }]
+            }] });
+
+    var TuiShowCleanerPipe = /** @class */ (function () {
+        function TuiShowCleanerPipe() {
+        }
+        TuiShowCleanerPipe.prototype.transform = function (type) {
+            return type.includes("null");
+        };
+        return TuiShowCleanerPipe;
+    }());
+    TuiShowCleanerPipe.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiShowCleanerPipe, deps: [], target: i0__namespace.ɵɵFactoryTarget.Pipe });
+    TuiShowCleanerPipe.ɵpipe = i0__namespace.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiShowCleanerPipe, name: "tuiShowCleanerPipe" });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiShowCleanerPipe, decorators: [{
+                type: i0.Pipe,
+                args: [{ name: "tuiShowCleanerPipe" }]
+            }] });
+
     function inspectArray(array, depth) {
         if (depth === 0) {
             return "[\u2026]";
@@ -1095,12 +1258,30 @@
                         }] }];
         } });
 
+    var TuiIsPrimitivePolymorpheusContentPipe = /** @class */ (function () {
+        function TuiIsPrimitivePolymorpheusContentPipe() {
+        }
+        TuiIsPrimitivePolymorpheusContentPipe.prototype.transform = function (value) {
+            return i6.tuiIsString(value) || i6.tuiIsNumber(value);
+        };
+        return TuiIsPrimitivePolymorpheusContentPipe;
+    }());
+    TuiIsPrimitivePolymorpheusContentPipe.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiIsPrimitivePolymorpheusContentPipe, deps: [], target: i0__namespace.ɵɵFactoryTarget.Pipe });
+    TuiIsPrimitivePolymorpheusContentPipe.ɵpipe = i0__namespace.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiIsPrimitivePolymorpheusContentPipe, name: "tuiIsPrimitivePolymorpheusContentPipe" });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiIsPrimitivePolymorpheusContentPipe, decorators: [{
+                type: i0.Pipe,
+                args: [{ name: "tuiIsPrimitivePolymorpheusContentPipe" }]
+            }] });
+
     // @bad TODO subscribe propertiesConnectors changes
     // @bad TODO refactor to make more flexible
     var TuiDocDocumentationComponent = /** @class */ (function () {
-        function TuiDocDocumentationComponent(changeDetectorRef, texts) {
+        function TuiDocDocumentationComponent(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;
@@ -1112,7 +1293,7 @@
                 .pipe(operators.switchMap(function (items) { return i9.merge.apply(void 0, __spreadArray([], __read(items.map(function (_a) {
                 var changed$ = _a.changed$;
                 return changed$;
-            })))); }), i6.tuiWatch(this.changeDetectorRef))
+            })))); }), i6.tuiWatch(this.changeDetectorRef), operators.takeUntil(this.destroy$))
                 .subscribe();
         };
         Object.defineProperty(TuiDocDocumentationComponent.prototype, "type", {
@@ -1122,46 +1303,8 @@
             enumerable: false,
             configurable: true
         });
-        TuiDocDocumentationComponent.prototype.getColor = function (color) {
-            if (color.length === 4) {
-                return color
-                    .split("")
-                    .reduce(function (result, current) { return __spreadArray(__spreadArray([], __read(result)), [current, current]); }, [])
-                    .join("")
-                    .replace("#", "");
-            }
-            if (color.startsWith("#")) {
-                return color;
-            }
-            if (color === "transparent") {
-                return "#000000";
-            }
-            var parsed = color
-                .replace("rgb(", "")
-                .replace("rgba(", "")
-                .replace(")", "")
-                .replace(" ", "")
-                .split(",")
-                .map(function (v) { return Number.parseInt(v, 10); });
-            return i6.tuiRgbToHex.apply(void 0, __spreadArray([], __read(parsed)));
-        };
-        TuiDocDocumentationComponent.prototype.getOpacity = function (color) {
-            if (color.startsWith("#") || color.startsWith("rgb(")) {
-                return 100;
-            }
-            if (color === "transparent") {
-                return 0;
-            }
-            var lastComma = color.lastIndexOf(",");
-            var parsed = color
-                .slice(lastComma)
-                .replace(")", "")
-                .replace(" ", "")
-                .replace(",", "");
-            return Math.round(Number.parseFloat(parsed) * 100);
-        };
         TuiDocDocumentationComponent.prototype.onColorChange = function (connector, color) {
-            var opacity = this.getOpacity(connector.documentationPropertyValue || "");
+            var opacity = this.getOpacity.transform(connector.documentationPropertyValue || "");
             if (opacity === 100) {
                 connector.onValueChange(color);
                 return;
@@ -1171,30 +1314,15 @@
             connector.onValueChange(result);
         };
         TuiDocDocumentationComponent.prototype.onOpacityChange = function (connector, opacity) {
-            var hex = this.getColor(connector.documentationPropertyValue || "");
+            var hex = this.getColor.transform(connector.documentationPropertyValue || "");
             var rgb = i6.tuiHexToRgb(hex);
             var result = "rgba(" + rgb + ", " + opacity / 100 + ")";
             connector.onValueChange(result);
         };
-        TuiDocDocumentationComponent.prototype.stripOptional = function (name) {
-            return name.replace("?", "");
-        };
-        TuiDocDocumentationComponent.prototype.isOptional = function (name) {
-            return name.includes("?");
-        };
-        TuiDocDocumentationComponent.prototype.isPrimitivePolymorpheusContent = function (value) {
-            return i6.tuiIsString(value) || i6.tuiIsNumber(value);
-        };
-        TuiDocDocumentationComponent.prototype.showCleaner = function (type) {
-            return type.includes("null");
-        };
-        TuiDocDocumentationComponent.prototype.showContentTooltip = function (type) {
-            return type.includes("PolymorpheusContent");
-        };
         return TuiDocDocumentationComponent;
     }());
-    TuiDocDocumentationComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiDocDocumentationComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: TUI_DOC_DOCUMENTATION_TEXTS }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    TuiDocDocumentationComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, 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__namespace.TuiBadgeComponent, selector: "tui-badge", inputs: ["value", "size", "status", "hoverable"] }, { type: i2__namespace$1.TuiTooltipComponent, selector: "tui-tooltip", inputs: ["content", "direction", "appearance", "showDelay", "hideDelay", "describeId"] }, { type: i2__namespace$1.TuiLinkComponent, selector: "a[tuiLink], button[tuiLink]", inputs: ["pseudo", "icon", "iconAlign", "iconRotated", "mode"], exportAs: ["tuiLink"] }, { type: i1__namespace.TuiSelectComponent, selector: "tui-select", inputs: ["stringify", "identityMatcher", "valueContent"] }, { type: i1__namespace.TuiDataListWrapperComponent, selector: "tui-data-list-wrapper:not([labels])", inputs: ["items"] }, { type: i1__namespace.TuiToggleComponent, selector: "tui-toggle", inputs: ["singleColor", "showIcons", "showLoader", "size"] }, { type: i2__namespace$1.TuiPrimitiveTextfieldComponent, selector: "tui-primitive-textfield", inputs: ["editable", "filler", "iconCleaner", "readOnly", "invalid", "disabled", "prefix", "postfix", "value"], outputs: ["valueChange"] }, { type: i2__namespace$1.TuiTextfieldComponent, selector: "input[tuiTextfield], textarea[tuiTextfield]" }, { type: i1__namespace.TuiInputCountComponent, selector: "tui-input-count", inputs: ["step", "min", "max", "hideButtons", "prefix", "postfix"] }, { type: i2__namespace$1.TuiNotificationComponent, selector: "tui-notification", inputs: ["hasIcon", "status"], outputs: ["close"] }], directives: [{ type: i5__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2__namespace$1.TuiModeDirective, selector: "[tuiMode]", inputs: ["tuiMode"] }, { type: i1__namespace.TuiSelectDirective, selector: "tui-select" }, { type: i2__namespace$1.TuiTextfieldSizeDirective, selector: "[tuiTextfieldSize]", inputs: ["tuiTextfieldSize"] }, { type: i2__namespace$1.TuiDropdownOptionsDirective, selector: "[tuiDropdownAlign], [tuiDropdownDirection], [tuiDropdownLimitWidth], [tuiDropdownMinHeight], [tuiDropdownMaxHeight]", inputs: ["tuiDropdownAlign", "tuiDropdownDirection", "tuiDropdownLimitWidth", "tuiDropdownMinHeight", "tuiDropdownMaxHeight"] }, { type: i2__namespace$1.TuiTextfieldCleanerDirective, selector: "[tuiTextfieldCleaner]", inputs: ["tuiTextfieldCleaner"] }, { type: i2__namespace$1.TuiTextfieldLabelOutsideDirective, selector: "[tuiTextfieldLabelOutside]", inputs: ["tuiTextfieldLabelOutside"] }, { type: i5__namespace$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5__namespace$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i2__namespace$1.TuiDataListDirective, selector: "ng-template[tuiDataList]" }, { type: i5__namespace.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i5__namespace.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i2__namespace$1.TuiPrimitiveTextfieldDirective, selector: "tui-primitive-textfield" }, { type: i2__namespace$1.TuiGroupDirective, selector: "[tuiGroup]:not(ng-container)", inputs: ["orientation", "adaptive", "collapsed", "rounded", "size"] }, { type: TuiInputOpacityDirective, selector: "[tuiInputOpacity]", inputs: ["tuiInputOpacity"] }, { type: i1__namespace.TuiInputCountDirective, selector: "tui-input-count" }], pipes: { "tuiInspectAny": TuiInspectPipe, "async": i5__namespace.AsyncPipe }, animations: [
+    TuiDocDocumentationComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiDocDocumentationComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: TUI_DOC_DOCUMENTATION_TEXTS }, { token: i6.TuiDestroyService, self: true }, { token: TuiGetColorPipe }, { token: TuiGetOpacityPipe }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    TuiDocDocumentationComponent.ɵcmp = i0__namespace.ɵɵ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, i6.TuiDestroyService], queries: [{ propertyName: "propertiesConnectors", predicate: TuiDocDocumentationPropertyConnectorDirective }], ngImport: i0__namespace, 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__namespace.TuiBadgeComponent, selector: "tui-badge", inputs: ["value", "size", "status", "hoverable"] }, { type: i2__namespace$1.TuiTooltipComponent, selector: "tui-tooltip", inputs: ["content", "direction", "appearance", "showDelay", "hideDelay", "describeId"] }, { type: i2__namespace$1.TuiLinkComponent, selector: "a[tuiLink], button[tuiLink]", inputs: ["pseudo", "icon", "iconAlign", "iconRotated", "mode"], exportAs: ["tuiLink"] }, { type: i1__namespace.TuiSelectComponent, selector: "tui-select", inputs: ["stringify", "identityMatcher", "valueContent"] }, { type: i1__namespace.TuiDataListWrapperComponent, selector: "tui-data-list-wrapper:not([labels])", inputs: ["items"] }, { type: i1__namespace.TuiToggleComponent, selector: "tui-toggle", inputs: ["singleColor", "showIcons", "showLoader", "size"] }, { type: i2__namespace$1.TuiPrimitiveTextfieldComponent, selector: "tui-primitive-textfield", inputs: ["editable", "filler", "iconCleaner", "readOnly", "invalid", "disabled", "prefix", "postfix", "value"], outputs: ["valueChange"] }, { type: i2__namespace$1.TuiTextfieldComponent, selector: "input[tuiTextfield], textarea[tuiTextfield]" }, { type: i1__namespace.TuiInputCountComponent, selector: "tui-input-count", inputs: ["step", "min", "max", "hideButtons", "prefix", "postfix"] }, { type: i2__namespace$1.TuiNotificationComponent, selector: "tui-notification", inputs: ["hasIcon", "status"], outputs: ["close"] }], directives: [{ type: i5__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2__namespace$1.TuiModeDirective, selector: "[tuiMode]", inputs: ["tuiMode"] }, { type: i1__namespace.TuiSelectDirective, selector: "tui-select" }, { type: i2__namespace$1.TuiTextfieldSizeDirective, selector: "[tuiTextfieldSize]", inputs: ["tuiTextfieldSize"] }, { type: i2__namespace$1.TuiDropdownOptionsDirective, selector: "[tuiDropdownAlign], [tuiDropdownDirection], [tuiDropdownLimitWidth], [tuiDropdownMinHeight], [tuiDropdownMaxHeight]", inputs: ["tuiDropdownAlign", "tuiDropdownDirection", "tuiDropdownLimitWidth", "tuiDropdownMinHeight", "tuiDropdownMaxHeight"] }, { type: i2__namespace$1.TuiTextfieldCleanerDirective, selector: "[tuiTextfieldCleaner]", inputs: ["tuiTextfieldCleaner"] }, { type: i2__namespace$1.TuiTextfieldLabelOutsideDirective, selector: "[tuiTextfieldLabelOutside]", inputs: ["tuiTextfieldLabelOutside"] }, { type: i5__namespace$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5__namespace$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i2__namespace$1.TuiDataListDirective, selector: "ng-template[tuiDataList]" }, { type: i5__namespace.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i5__namespace.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i2__namespace$1.TuiPrimitiveTextfieldDirective, selector: "tui-primitive-textfield" }, { type: i2__namespace$1.TuiGroupDirective, selector: "[tuiGroup]:not(ng-container)", inputs: ["orientation", "adaptive", "collapsed", "rounded", "size"] }, { type: TuiInputOpacityDirective, selector: "[tuiInputOpacity]", inputs: ["tuiInputOpacity"] }, { type: i1__namespace.TuiInputCountDirective, selector: "tui-input-count" }], pipes: { "tuiStripOptionalPipe": TuiStripOptionalPipe, "tuiIsOptionalPipe": TuiIsOptionalPipe, "tuiShowContentTooltip": TuiShowContentTooltip, "tuiShowCleanerPipe": TuiShowCleanerPipe, "tuiInspectAny": TuiInspectPipe, "tuiGetOpacity": TuiGetOpacityPipe, "tuiGetColorPipe": TuiGetColorPipe, "tuiIsPrimitivePolymorpheusContentPipe": TuiIsPrimitivePolymorpheusContentPipe, "async": i5__namespace.AsyncPipe }, animations: [
             animations.trigger("emitEvent", [
                 animations.transition(":increment", [animations.style({ opacity: 1 }), animations.animate("500ms ease-in")]),
             ]),
@@ -1211,6 +1339,7 @@
                                 animations.transition(":increment", [animations.style({ opacity: 1 }), animations.animate("500ms ease-in")]),
                             ]),
                         ],
+                        providers: [TuiGetColorPipe, TuiGetOpacityPipe, i6.TuiDestroyService],
                     }]
             }], ctorParameters: function () {
             return [{ type: i0__namespace.ChangeDetectorRef, decorators: [{
@@ -1219,6 +1348,17 @@
                         }] }, { type: undefined, decorators: [{
                             type: i0.Inject,
                             args: [TUI_DOC_DOCUMENTATION_TEXTS]
+                        }] }, { type: i6__namespace$1.TuiDestroyService, decorators: [{
+                            type: i0.Self
+                        }, {
+                            type: i0.Inject,
+                            args: [i6.TuiDestroyService]
+                        }] }, { type: TuiGetColorPipe, decorators: [{
+                            type: i0.Inject,
+                            args: [TuiGetColorPipe]
+                        }] }, { type: TuiGetOpacityPipe, decorators: [{
+                            type: i0.Inject,
+                            args: [TuiGetOpacityPipe]
                         }] }];
         }, propDecorators: { heading: [{
                     type: i0.Input
@@ -1254,7 +1394,14 @@
     }());
     TuiDocDocumentationModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiDocDocumentationModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
     TuiDocDocumentationModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiDocDocumentationModule, declarations: [TuiInspectPipe,
+            TuiGetColorPipe,
+            TuiGetOpacityPipe,
+            TuiIsOptionalPipe,
+            TuiShowCleanerPipe,
+            TuiStripOptionalPipe,
+            TuiShowContentTooltip,
             TuiDocDocumentationComponent,
+            TuiIsPrimitivePolymorpheusContentPipe,
             TuiDocDocumentationPropertyConnectorDirective], imports: [i5.CommonModule,
             i5$1.FormsModule,
             i6$1.RouterModule,
@@ -1319,7 +1466,14 @@
                         ],
                         declarations: [
                             TuiInspectPipe,
+                            TuiGetColorPipe,
+                            TuiGetOpacityPipe,
+                            TuiIsOptionalPipe,
+                            TuiShowCleanerPipe,
+                            TuiStripOptionalPipe,
+                            TuiShowContentTooltip,
                             TuiDocDocumentationComponent,
+                            TuiIsPrimitivePolymorpheusContentPipe,
                             TuiDocDocumentationPropertyConnectorDirective,
                         ],
                         exports: [
@@ -1793,7 +1947,7 @@
         });
         return TuiScrollIntoViewLinkDirective;
     }());
-    TuiScrollIntoViewLinkDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiScrollIntoViewLinkDirective, deps: [{ token: i6.TuiDestroyService }, { token: i0.ElementRef }, { token: TUI_DOC_PAGE_LOADED }], target: i0__namespace.ɵɵFactoryTarget.Directive });
+    TuiScrollIntoViewLinkDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiScrollIntoViewLinkDirective, deps: [{ token: i6.TuiDestroyService, self: true }, { token: i0.ElementRef }, { token: TUI_DOC_PAGE_LOADED }], target: i0__namespace.ɵɵFactoryTarget.Directive });
     TuiScrollIntoViewLinkDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: TuiScrollIntoViewLinkDirective, selector: "[tuiScrollIntoViewLink]", inputs: { tuiScrollIntoViewLink: "tuiScrollIntoViewLink" }, providers: [i6.TuiDestroyService], ngImport: i0__namespace });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiScrollIntoViewLinkDirective, decorators: [{
                 type: i0.Directive,
@@ -1803,6 +1957,8 @@
                     }]
             }], ctorParameters: function () {
             return [{ type: i6__namespace$1.TuiDestroyService, decorators: [{
+                            type: i0.Self
+                        }, {
                             type: i0.Inject,
                             args: [i6.TuiDestroyService]
                         }] }, { type: i0__namespace.ElementRef, decorators: [{
@@ -1939,7 +2095,7 @@
         };
         return TuiDocNavigationComponent;
     }());
-    TuiDocNavigationComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiDocNavigationComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i8$1.Title }, { token: NAVIGATION_TITLE }, { token: i5.DOCUMENT }, { token: i2$1.TuiModeDirective }, { token: i4.TuiSidebarDirective, optional: true }, { token: NAVIGATION_LABELS }, { token: NAVIGATION_ITEMS }, { token: TUI_DOC_SEARCH_TEXT }, { token: i6$1.Router }, { token: i6$1.ActivatedRoute }, { token: i6.TuiDestroyService }, { token: TUI_DOC_PAGE_LOADED }, { token: TUI_DOC_SCROLL_BEHAVIOR }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    TuiDocNavigationComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TuiDocNavigationComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i8$1.Title }, { token: NAVIGATION_TITLE }, { token: i5.DOCUMENT }, { token: i2$1.TuiModeDirective }, { token: i4.TuiSidebarDirective, optional: true }, { token: NAVIGATION_LABELS }, { token: NAVIGATION_ITEMS }, { token: TUI_DOC_SEARCH_TEXT }, { token: i6$1.Router }, { token: i6$1.ActivatedRoute }, { token: i6.TuiDestroyService, self: true }, { token: TUI_DOC_PAGE_LOADED }, { token: TUI_DOC_SCROLL_BEHAVIOR }], target: i0__namespace.ɵɵFactoryTarget.Component });
     TuiDocNavigationComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, 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__namespace.TuiInputComponent, selector: "tui-input" }, { type: i2__namespace$1.TuiDataListComponent, selector: "tui-data-list", inputs: ["role", "emptyContent", "size"] }, { type: i2__namespace$1.TuiOptionComponent, selector: "button[tuiOption], a[tuiOption]", inputs: ["size", "role", "disabled", "value"] }, { type: i2__namespace$1.TuiScrollbarComponent, selector: "tui-scrollbar", inputs: ["hidden"] }, { type: i1__namespace.TuiAccordionComponent, selector: "tui-accordion", inputs: ["closeOthers", "rounded"] }, { type: i1__namespace.TuiAccordionItemComponent, selector: "tui-accordion-item", inputs: ["noPadding", "showArrow", "borders", "size", "disabled", "disableHover", "open", "async"], outputs: ["openChange"] }, { type: i2__namespace$1.TuiLinkComponent, selector: "a[tuiLink], button[tuiLink]", inputs: ["pseudo", "icon", "iconAlign", "iconRotated", "mode"], exportAs: ["tuiLink"] }, { type: i2__namespace$1.TuiSvgComponent, selector: "tui-svg", inputs: ["src"] }, { type: i2__namespace$1.TuiExpandComponent, selector: "tui-expand", inputs: ["async", "expanded"] }], directives: [{ type: i1__namespace.TuiInputDirective, selector: "tui-input" }, { type: i2__namespace$1.TuiTextfieldSizeDirective, selector: "[tuiTextfieldSize]", inputs: ["tuiTextfieldSize"] }, { type: i2__namespace$1.TuiTextfieldIconLeftDirective, selector: "[tuiTextfieldIconLeft]", inputs: ["tuiTextfieldIconLeft"] }, { type: i5__namespace$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5__namespace$1.FormControlDirective, selector: "[formControl]", inputs: ["disabled", "formControl", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i6__namespace$1.TuiAutoFocusDirective, selector: "[tuiAutoFocus]", inputs: ["tuiAutoFocus"] }, { type: i2__namespace$1.TuiTextfieldCleanerDirective, selector: "[tuiTextfieldCleaner]", inputs: ["tuiTextfieldCleaner"] }, { type: i2__namespace$1.TuiTextfieldLabelOutsideDirective, selector: "[tuiTextfieldLabelOutside]", inputs: ["tuiTextfieldLabelOutside"] }, { type: i5__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace$1.TuiDataListDirective, selector: "ng-template[tuiDataList]" }, { type: i5__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2__namespace$1.TuiOptGroupDirective, selector: "tui-opt-group", inputs: ["label"] }, { type: i6__namespace.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["routerLink", "target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo"] }, { type: i2__namespace$1.TuiModeDirective, selector: "[tuiMode]", inputs: ["tuiMode"] }, { type: i1__namespace.TuiAccordionItemContentDirective, selector: "ng-template[tuiAccordionItemContent]" }, { type: i5__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i6__namespace.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "routerLinkActive"], exportAs: ["routerLinkActive"] }, { type: TuiScrollIntoViewLinkDirective, selector: "[tuiScrollIntoViewLink]", inputs: ["tuiScrollIntoViewLink"] }], pipes: { "async": i5__namespace.AsyncPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
     __decorate([
         i6.tuiPure
@@ -1993,6 +2149,8 @@
                             type: i0.Inject,
                             args: [i6$1.ActivatedRoute]
                         }] }, { type: i9__namespace.Observable, decorators: [{
+                            type: i0.Self
+                        }, {
                             type: i0.Inject,
                             args: [i6.TuiDestroyService]
                         }] }, { type: i9__namespace.Observable, decorators: [{