@taiga-ui/addon-doc 3.22.0 → 3.23.0-dev.main-db0dc40

package/esm2015/services/theme.options.js

@@ -0,0 +1,8 @@
+import { InjectionToken } from '@angular/core';
+export const TUI_THEME_STORAGE_DEFAULT_KEY = `tuiTheme`;
+export const TUI_THEME_STORAGE_KEY = new InjectionToken(`[TUI_THEME_STORAGE_KEY]`, { factory: () => TUI_THEME_STORAGE_DEFAULT_KEY });
+export const TUI_THEME_DEFAULT_NAME = `Taiga UI`;
+export const TUI_THEME_NAME = new InjectionToken(`[TUI_THEME_NAME]`, {
+    factory: () => TUI_THEME_DEFAULT_NAME,
+});
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGhlbWUub3B0aW9ucy5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3Byb2plY3RzL2FkZG9uLWRvYy9zcmMvc2VydmljZXMvdGhlbWUub3B0aW9ucy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUMsY0FBYyxFQUFDLE1BQU0sZUFBZSxDQUFDO0FBRTdDLE1BQU0sQ0FBQyxNQUFNLDZCQUE2QixHQUFHLFVBQW1CLENBQUM7QUFFakUsTUFBTSxDQUFDLE1BQU0scUJBQXFCLEdBQUcsSUFBSSxjQUFjLENBQ25ELHlCQUF5QixFQUN6QixFQUFDLE9BQU8sRUFBRSxHQUFHLEVBQUUsQ0FBQyw2QkFBNkIsRUFBQyxDQUNqRCxDQUFDO0FBRUYsTUFBTSxDQUFDLE1BQU0sc0JBQXNCLEdBQUcsVUFBbUIsQ0FBQztBQUUxRCxNQUFNLENBQUMsTUFBTSxjQUFjLEdBQUcsSUFBSSxjQUFjLENBQVMsa0JBQWtCLEVBQUU7SUFDekUsT0FBTyxFQUFFLEdBQUcsRUFBRSxDQUFDLHNCQUFzQjtDQUN4QyxDQUFDLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge0luamVjdGlvblRva2VufSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuZXhwb3J0IGNvbnN0IFRVSV9USEVNRV9TVE9SQUdFX0RFRkFVTFRfS0VZID0gYHR1aVRoZW1lYCBhcyBjb25zdDtcblxuZXhwb3J0IGNvbnN0IFRVSV9USEVNRV9TVE9SQUdFX0tFWSA9IG5ldyBJbmplY3Rpb25Ub2tlbjxzdHJpbmc+KFxuICAgIGBbVFVJX1RIRU1FX1NUT1JBR0VfS0VZXWAsXG4gICAge2ZhY3Rvcnk6ICgpID0+IFRVSV9USEVNRV9TVE9SQUdFX0RFRkFVTFRfS0VZfSxcbik7XG5cbmV4cG9ydCBjb25zdCBUVUlfVEhFTUVfREVGQVVMVF9OQU1FID0gYFRhaWdhIFVJYCBhcyBjb25zdDtcblxuZXhwb3J0IGNvbnN0IFRVSV9USEVNRV9OQU1FID0gbmV3IEluamVjdGlvblRva2VuPHN0cmluZz4oYFtUVUlfVEhFTUVfTkFNRV1gLCB7XG4gICAgZmFjdG9yeTogKCkgPT4gVFVJX1RIRU1FX0RFRkFVTFRfTkFNRSxcbn0pO1xuIl19

package/esm2015/services/theme.service.js

@@ -0,0 +1,38 @@
+import { Inject, Injectable } from '@angular/core';
+import { LOCAL_STORAGE } from '@ng-web-apis/common';
+import { BehaviorSubject } from 'rxjs';
+import { TUI_THEME_NAME, TUI_THEME_STORAGE_KEY } from './theme.options';
+import * as i0 from "@angular/core";
+export class TuiThemeService extends BehaviorSubject {
+    constructor(name, key, storage) {
+        super(storage.getItem(key) || name);
+        this.name = name;
+        this.key = key;
+        this.storage = storage;
+    }
+    next(theme) {
+        this.storage.setItem(this.key, theme);
+        super.next(theme);
+    }
+    get isDefaultTheme() {
+        return this.value === this.name;
+    }
+}
+TuiThemeService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TuiThemeService, deps: [{ token: TUI_THEME_NAME }, { token: TUI_THEME_STORAGE_KEY }, { token: LOCAL_STORAGE }], target: i0.ɵɵFactoryTarget.Injectable });
+TuiThemeService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TuiThemeService, providedIn: `root` });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TuiThemeService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: `root`,
+                }]
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [TUI_THEME_NAME]
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [TUI_THEME_STORAGE_KEY]
+                }] }, { type: Storage, decorators: [{
+                    type: Inject,
+                    args: [LOCAL_STORAGE]
+                }] }]; } });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGhlbWUuc2VydmljZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3Byb2plY3RzL2FkZG9uLWRvYy9zcmMvc2VydmljZXMvdGhlbWUuc2VydmljZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUMsTUFBTSxFQUFFLFVBQVUsRUFBQyxNQUFNLGVBQWUsQ0FBQztBQUNqRCxPQUFPLEVBQUMsYUFBYSxFQUFDLE1BQU0scUJBQXFCLENBQUM7QUFDbEQsT0FBTyxFQUFDLGVBQWUsRUFBQyxNQUFNLE1BQU0sQ0FBQztBQUVyQyxPQUFPLEVBQUMsY0FBYyxFQUFFLHFCQUFxQixFQUFDLE1BQU0saUJBQWlCLENBQUM7O0FBS3RFLE1BQU0sT0FBTyxlQUFnQixTQUFRLGVBQXVCO0lBQ3hELFlBQ3FDLElBQVksRUFDTCxHQUFXLEVBQ1gsT0FBZ0I7UUFFeEQsS0FBSyxDQUFDLE9BQU8sQ0FBQyxPQUFPLENBQUMsR0FBRyxDQUFDLElBQUksSUFBSSxDQUFDLENBQUM7UUFKSCxTQUFJLEdBQUosSUFBSSxDQUFRO1FBQ0wsUUFBRyxHQUFILEdBQUcsQ0FBUTtRQUNYLFlBQU8sR0FBUCxPQUFPLENBQVM7SUFHNUQsQ0FBQztJQUVRLElBQUksQ0FBQyxLQUFhO1FBQ3ZCLElBQUksQ0FBQyxPQUFPLENBQUMsT0FBTyxDQUFDLElBQUksQ0FBQyxHQUFHLEVBQUUsS0FBSyxDQUFDLENBQUM7UUFDdEMsS0FBSyxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsQ0FBQztJQUN0QixDQUFDO0lBRUQsSUFBSSxjQUFjO1FBQ2QsT0FBTyxJQUFJLENBQUMsS0FBSyxLQUFLLElBQUksQ0FBQyxJQUFJLENBQUM7SUFDcEMsQ0FBQzs7NkdBaEJRLGVBQWUsa0JBRVosY0FBYyxhQUNkLHFCQUFxQixhQUNyQixhQUFhO2lIQUpoQixlQUFlLGNBRlosTUFBTTs0RkFFVCxlQUFlO2tCQUgzQixVQUFVO21CQUFDO29CQUNSLFVBQVUsRUFBRSxNQUFNO2lCQUNyQjs7MEJBR1EsTUFBTTsyQkFBQyxjQUFjOzswQkFDckIsTUFBTTsyQkFBQyxxQkFBcUI7OEJBQ29CLE9BQU87MEJBQXZELE1BQU07MkJBQUMsYUFBYSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7SW5qZWN0LCBJbmplY3RhYmxlfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7TE9DQUxfU1RPUkFHRX0gZnJvbSAnQG5nLXdlYi1hcGlzL2NvbW1vbic7XG5pbXBvcnQge0JlaGF2aW9yU3ViamVjdH0gZnJvbSAncnhqcyc7XG5cbmltcG9ydCB7VFVJX1RIRU1FX05BTUUsIFRVSV9USEVNRV9TVE9SQUdFX0tFWX0gZnJvbSAnLi90aGVtZS5vcHRpb25zJztcblxuQEluamVjdGFibGUoe1xuICAgIHByb3ZpZGVkSW46IGByb290YCxcbn0pXG5leHBvcnQgY2xhc3MgVHVpVGhlbWVTZXJ2aWNlIGV4dGVuZHMgQmVoYXZpb3JTdWJqZWN0PHN0cmluZz4ge1xuICAgIGNvbnN0cnVjdG9yKFxuICAgICAgICBASW5qZWN0KFRVSV9USEVNRV9OQU1FKSByZWFkb25seSBuYW1lOiBzdHJpbmcsXG4gICAgICAgIEBJbmplY3QoVFVJX1RIRU1FX1NUT1JBR0VfS0VZKSByZWFkb25seSBrZXk6IHN0cmluZyxcbiAgICAgICAgQEluamVjdChMT0NBTF9TVE9SQUdFKSBwcml2YXRlIHJlYWRvbmx5IHN0b3JhZ2U6IFN0b3JhZ2UsXG4gICAgKSB7XG4gICAgICAgIHN1cGVyKHN0b3JhZ2UuZ2V0SXRlbShrZXkpIHx8IG5hbWUpO1xuICAgIH1cblxuICAgIG92ZXJyaWRlIG5leHQodGhlbWU6IHN0cmluZyk6IHZvaWQge1xuICAgICAgICB0aGlzLnN0b3JhZ2Uuc2V0SXRlbSh0aGlzLmtleSwgdGhlbWUpO1xuICAgICAgICBzdXBlci5uZXh0KHRoZW1lKTtcbiAgICB9XG5cbiAgICBnZXQgaXNEZWZhdWx0VGhlbWUoKTogYm9vbGVhbiB7XG4gICAgICAgIHJldHVybiB0aGlzLnZhbHVlID09PSB0aGlzLm5hbWU7XG4gICAgfVxufVxuIl19

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, Component, ChangeDetectionStrategy, Inject, Input, HostBinding, NgModule, ElementRef, forwardRef, TemplateRef, ViewChild, ContentChild, HostListener, EventEmitter, Directive, Output, Pipe, Renderer2, ChangeDetectorRef, Self, ContentChildren, Optional, inject, ViewEncapsulation } from '@angular/core';
+import { InjectionToken, Component, ChangeDetectionStrategy, Inject, Input, HostBinding, NgModule, ElementRef, forwardRef, TemplateRef, ViewChild, ContentChild, HostListener, EventEmitter, Directive, Output, Pipe, Renderer2, ChangeDetectorRef, Self, ContentChildren, Optional, Injectable, inject, ViewEncapsulation } from '@angular/core';
 import * as i9 from 'rxjs';
 import { identity, BehaviorSubject, Subject, timer, merge, defer, of, ReplaySubject } from 'rxjs';
 import { switchMap, map, startWith, takeUntil, filter, mergeMap, debounceTime, take, distinctUntilChanged } from 'rxjs/operators';
@@ -303,7 +303,7 @@ TuiDocDemoComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
             provide: TuiModeDirective,
             useExisting: forwardRef(() => TuiDocDemoComponent),
         },
-    ], queries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true }], viewQueries: [{ propertyName: "resizeable", first: true, predicate: TuiResizeableDirective, descendants: true, static: true }, { propertyName: "content", first: true, predicate: ["content"], descendants: true, static: true }, { propertyName: "resizer", first: true, predicate: ["resizer"], descendants: true, static: 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            [ngModel]=\"mode\"\n            (ngModelChange)=\"onModeChange($event)\"\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                [ngModel]=\"mode\"\n                (ngModelChange)=\"onModeChange($event)\"\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                [ngModel]=\"mode\"\n                (ngModelChange)=\"onModeChange($event)\"\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                [ngModel]=\"mode\"\n                (ngModelChange)=\"onModeChange($event)\"\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    tuiResizeable\n    class=\"t-wrapper\"\n    [class.t-wrapper_dark]=\"mode === 'onDark'\"\n    [class.t-wrapper_gray]=\"mode === 'onLight'\"\n    [class.t-wrapper_transparent]=\"!opaque\"\n>\n    <div\n        id=\"demo-content\"\n        class=\"t-content\"\n    >\n        <div #content>\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                    automation-id=\"tui-demo-button__toggle-details\"\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                                automation-id=\"tui-demo-select__expand-update-on\"\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                                automation-id=\"tui-demo-button__reset-state\"\n                                class=\"tui-group__auto-width-item\"\n                            >\n                                Reset\n                            </button>\n                            <button\n                                tuiButton\n                                type=\"submit\"\n                                size=\"s\"\n                                automation-id=\"tui-demo-button__submit-state\"\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    </div>\n    <div\n        #resizer\n        class=\"t-resizer\"\n        [tuiResizer]=\"[1, 0]\"\n        (tuiSizeChange)=\"updateWidth($event[0])\"\n    ></div>\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%;min-width:10rem;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{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;display:flex;align-items:center;justify-content:center;flex-shrink:0;border-left:1px solid var(--tui-base-03);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:calc(50% + 1rem);width:1px;background:var(--tui-base-04);box-shadow:-.25rem 0 var(--tui-base-04);transform:translate(0)}.t-resizer:after{bottom:.75rem;top:calc(50% + 1rem)}: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: i4.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5.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: i2$1.TuiGroupDirective, selector: "[tuiGroup]:not(ng-container)", inputs: ["orientation", "adaptive", "collapsed", "rounded", "size"] }, { type: i6$1.TuiResizeableDirective, selector: "[tuiResizeable]" }, { type: i5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2$1.TuiExpandContentDirective, selector: "[tuiExpandContent]" }, { type: i6$1.TuiResizerDirective, selector: "[tuiResizer]", inputs: ["tuiResizer"], outputs: ["tuiSizeChange"] }], pipes: { "json": i4.JsonPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    ], queries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true }], viewQueries: [{ propertyName: "resizeable", first: true, predicate: TuiResizeableDirective, descendants: true, static: true }, { propertyName: "content", first: true, predicate: ["content"], descendants: true, static: true }, { propertyName: "resizer", first: true, predicate: ["resizer"], descendants: true, static: 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            [ngModel]=\"mode\"\n            (ngModelChange)=\"onModeChange($event)\"\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                [ngModel]=\"mode\"\n                (ngModelChange)=\"onModeChange($event)\"\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                [ngModel]=\"mode\"\n                (ngModelChange)=\"onModeChange($event)\"\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                [ngModel]=\"mode\"\n                (ngModelChange)=\"onModeChange($event)\"\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    tuiResizeable\n    class=\"t-wrapper\"\n    [class.t-wrapper_dark]=\"mode === 'onDark'\"\n    [class.t-wrapper_gray]=\"mode === 'onLight'\"\n    [class.t-wrapper_transparent]=\"!opaque\"\n>\n    <div\n        id=\"demo-content\"\n        class=\"t-content\"\n    >\n        <div #content>\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                    automation-id=\"tui-demo-button__toggle-details\"\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                                automation-id=\"tui-demo-select__expand-update-on\"\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                                automation-id=\"tui-demo-button__reset-state\"\n                                class=\"tui-group__auto-width-item\"\n                            >\n                                Reset\n                            </button>\n                            <button\n                                tuiButton\n                                type=\"submit\"\n                                size=\"s\"\n                                automation-id=\"tui-demo-button__submit-state\"\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    </div>\n    <div\n        #resizer\n        class=\"t-resizer\"\n        [tuiResizer]=\"[1, 0]\"\n        (tuiSizeChange)=\"updateWidth($event[0])\"\n    ></div>\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 #00000008,0 .75rem .75rem #0000000a,0 .25rem .375rem #0000000d;display:flex;border:1px solid var(--tui-base-03);border-radius:var(--tui-radius-m);max-width:100%;min-height:6rem;width:100%;min-width:10rem;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{box-shadow:0 1.5rem 1rem #00000008,0 .75rem .75rem #0000000a,0 .25rem .375rem #0000000d;position:relative;width:3.5rem;min-height:inherit;display:flex;align-items:center;justify-content:center;flex-shrink:0;border-left:1px solid var(--tui-base-03);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:calc(50% + 1rem);width:1px;background:var(--tui-base-04);box-shadow:-.25rem 0 var(--tui-base-04);transform:translate(0)}.t-resizer:after{bottom:.75rem;top:calc(50% + 1rem)}: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: i4.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5.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: i2$1.TuiGroupDirective, selector: "[tuiGroup]:not(ng-container)", inputs: ["orientation", "adaptive", "collapsed", "rounded", "size"] }, { type: i6$1.TuiResizeableDirective, selector: "[tuiResizeable]" }, { type: i5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2$1.TuiExpandContentDirective, selector: "[tuiExpandContent]" }, { type: i6$1.TuiResizerDirective, selector: "[tuiResizer]", inputs: ["tuiResizer"], outputs: ["tuiSizeChange"] }], pipes: { "json": i4.JsonPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 __decorate([
     tuiPure
 ], TuiDocDemoComponent.prototype, "updateUrl", null);
@@ -879,7 +879,7 @@ class TuiDocDocumentationComponent {
     }
 }
 TuiDocDocumentationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TuiDocDocumentationComponent, deps: [{ token: ChangeDetectorRef }, { token: TUI_DOC_DOCUMENTATION_TEXTS }, { token: TUI_DOC_EXCLUDED_PROPERTIES }, { token: TuiDestroyService, self: true }, { token: TuiGetColorPipe }, { token: TuiGetOpacityPipe }], target: i0.ɵɵFactoryTarget.Component });
-TuiDocDocumentationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TuiDocDocumentationComponent, selector: "tui-doc-documentation", inputs: { heading: "heading", showValues: "showValues", isAPI: "isAPI" }, providers: [TuiGetColorPipe, TuiGetOpacityPipe, TuiDestroyService], queries: [{ propertyName: "propertiesConnectors", predicate: TuiDocDocumentationPropertyConnectorDirective }], ngImport: i0, template: "<h1\n    *ngIf=\"heading\"\n    class=\"t-heading\"\n>\n    {{ heading }}\n</h1>\n<ng-content></ng-content>\n<table class=\"t-table\">\n    <tr class=\"t-row t-row_header\">\n        <th class=\"t-th t-cell t-cell_prop\">{{ texts[2] }}</th>\n        <th class=\"t-th\">{{ type }}</th>\n        <th\n            *ngIf=\"showValues && !isAPI\"\n            class=\"t-th t-cell t-th_value\"\n        >\n            {{ texts[3] }}\n        </th>\n    </tr>\n    <tr\n        *ngFor=\"let propertyConnector of $any(propertiesConnectors) | tuiFilter : matcher : excludedProperties\"\n        class=\"t-row\"\n        [class.t-deprecated]=\"propertyConnector.documentationPropertyDeprecated\"\n    >\n        <td class=\"t-cell\">\n            <div\n                automation-id=\"tui-documentation__property-name\"\n                class=\"t-property\"\n            >\n                {{ propertyConnector.attrName | tuiStripOptionalPipe }}\n                <tui-badge\n                    *ngIf=\"propertyConnector.attrName | tuiIsOptionalPipe\"\n                    size=\"s\"\n                    value=\"Optional\"\n                ></tui-badge>\n            </div>\n            <span\n                *ngIf=\"propertyConnector.documentationPropertyDeprecated\"\n                class=\"t-deprecated-label\"\n            >\n                deprecated\n            </span>\n            <ng-container [ngTemplateOutlet]=\"propertyConnector.template\"></ng-container>\n        </td>\n        <td class=\"t-cell\">\n            <span class=\"type\">\n                {{ propertyConnector.documentationPropertyType }}\n                <tui-tooltip\n                    *ngIf=\"propertyConnector.documentationPropertyType | tuiShowContentTooltip\"\n                    [describeId]=\"propertyConnector.attrName\"\n                    [content]=\"content\"\n                >\n                    <ng-template #content>\n                        {{ texts[4] }}\n                        <a\n                            tuiLink\n                            tuiMode=\"onDark\"\n                            target=\"_blank\"\n                            rel=\"noreferrer\"\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: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2$1.TuiModeDirective, selector: "[tuiMode]", inputs: ["tuiMode"] }, { type: i1.TuiSelectDirective, selector: "tui-select" }, { type: i2$1.TuiTextfieldSizeDirective, selector: "[tuiTextfieldSize]", inputs: ["tuiTextfieldSize"] }, { type: i2$1.TuiDropdownOptionsDirective, selector: "[tuiDropdownAlign], [tuiDropdownDirection], [tuiDropdownLimitWidth], [tuiDropdownMinHeight], [tuiDropdownMaxHeight], [tuiDropdownOffset]", inputs: ["tuiDropdownAlign", "tuiDropdownDirection", "tuiDropdownLimitWidth", "tuiDropdownMinHeight", "tuiDropdownMaxHeight", "tuiDropdownOffset"] }, { type: i2$1.TuiTextfieldCleanerDirective, selector: "[tuiTextfieldCleaner]", inputs: ["tuiTextfieldCleaner"] }, { type: i2$1.TuiTextfieldLabelOutsideDirective, selector: "[tuiTextfieldLabelOutside]", inputs: ["tuiTextfieldLabelOutside"] }, { type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5.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: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i2$1.TuiPrimitiveTextfieldDirective, selector: "tui-primitive-textfield" }, { type: i2$1.TuiGroupDirective, selector: "[tuiGroup]:not(ng-container)", inputs: ["orientation", "adaptive", "collapsed", "rounded", "size"] }, { type: TuiInputOpacityDirective, selector: "[tuiInputOpacity]", inputs: ["tuiInputOpacity"] }, { type: i1.TuiInputCountDirective, selector: "tui-input-count" }], pipes: { "tuiFilter": i6$1.TuiFilterPipe, "tuiStripOptionalPipe": TuiStripOptionalPipe, "tuiIsOptionalPipe": TuiIsOptionalPipe, "tuiShowContentTooltip": TuiShowContentTooltip, "tuiShowCleanerPipe": TuiShowCleanerPipe, "tuiInspectAny": TuiInspectPipe, "tuiGetOpacity": TuiGetOpacityPipe, "tuiGetColorPipe": TuiGetColorPipe, "tuiIsPrimitivePolymorpheusContentPipe": TuiIsPrimitivePolymorpheusContentPipe, "async": i4.AsyncPipe }, animations: [
+TuiDocDocumentationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TuiDocDocumentationComponent, selector: "tui-doc-documentation", inputs: { heading: "heading", showValues: "showValues", isAPI: "isAPI" }, providers: [TuiGetColorPipe, TuiGetOpacityPipe, TuiDestroyService], queries: [{ propertyName: "propertiesConnectors", predicate: TuiDocDocumentationPropertyConnectorDirective }], ngImport: i0, template: "<h1\n    *ngIf=\"heading\"\n    class=\"t-heading\"\n>\n    {{ heading }}\n</h1>\n<ng-content></ng-content>\n<table class=\"t-table\">\n    <tr class=\"t-row t-row_header\">\n        <th class=\"t-th t-cell t-cell_prop\">{{ texts[2] }}</th>\n        <th class=\"t-th\">{{ type }}</th>\n        <th\n            *ngIf=\"showValues && !isAPI\"\n            class=\"t-th t-cell t-th_value\"\n        >\n            {{ texts[3] }}\n        </th>\n    </tr>\n    <tr\n        *ngFor=\"let propertyConnector of $any(propertiesConnectors) | tuiFilter : matcher : excludedProperties\"\n        class=\"t-row\"\n        [class.t-deprecated]=\"propertyConnector.documentationPropertyDeprecated\"\n    >\n        <td class=\"t-cell\">\n            <div\n                automation-id=\"tui-documentation__property-name\"\n                class=\"t-property\"\n            >\n                {{ propertyConnector.attrName | tuiStripOptionalPipe }}\n                <tui-badge\n                    *ngIf=\"propertyConnector.attrName | tuiIsOptionalPipe\"\n                    size=\"s\"\n                    value=\"Optional\"\n                ></tui-badge>\n            </div>\n            <span\n                *ngIf=\"propertyConnector.documentationPropertyDeprecated\"\n                class=\"t-deprecated-label\"\n            >\n                deprecated\n            </span>\n            <ng-container [ngTemplateOutlet]=\"propertyConnector.template\"></ng-container>\n        </td>\n        <td class=\"t-cell\">\n            <span class=\"type\">\n                {{ propertyConnector.documentationPropertyType }}\n                <tui-tooltip\n                    *ngIf=\"propertyConnector.documentationPropertyType | tuiShowContentTooltip\"\n                    [describeId]=\"propertyConnector.attrName\"\n                    [content]=\"content\"\n                >\n                    <ng-template #content>\n                        {{ texts[4] }}\n                        <a\n                            tuiLink\n                            tuiMode=\"onDark\"\n                            target=\"_blank\"\n                            rel=\"noreferrer\"\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: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: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2$1.TuiModeDirective, selector: "[tuiMode]", inputs: ["tuiMode"] }, { type: i1.TuiSelectDirective, selector: "tui-select" }, { type: i2$1.TuiTextfieldSizeDirective, selector: "[tuiTextfieldSize]", inputs: ["tuiTextfieldSize"] }, { type: i2$1.TuiDropdownOptionsDirective, selector: "[tuiDropdownAlign], [tuiDropdownDirection], [tuiDropdownLimitWidth], [tuiDropdownMinHeight], [tuiDropdownMaxHeight], [tuiDropdownOffset]", inputs: ["tuiDropdownAlign", "tuiDropdownDirection", "tuiDropdownLimitWidth", "tuiDropdownMinHeight", "tuiDropdownMaxHeight", "tuiDropdownOffset"] }, { type: i2$1.TuiTextfieldCleanerDirective, selector: "[tuiTextfieldCleaner]", inputs: ["tuiTextfieldCleaner"] }, { type: i2$1.TuiTextfieldLabelOutsideDirective, selector: "[tuiTextfieldLabelOutside]", inputs: ["tuiTextfieldLabelOutside"] }, { type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5.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: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i2$1.TuiPrimitiveTextfieldDirective, selector: "tui-primitive-textfield" }, { type: i2$1.TuiGroupDirective, selector: "[tuiGroup]:not(ng-container)", inputs: ["orientation", "adaptive", "collapsed", "rounded", "size"] }, { type: TuiInputOpacityDirective, selector: "[tuiInputOpacity]", inputs: ["tuiInputOpacity"] }, { type: i1.TuiInputCountDirective, selector: "tui-input-count" }], pipes: { "tuiFilter": i6$1.TuiFilterPipe, "tuiStripOptionalPipe": TuiStripOptionalPipe, "tuiIsOptionalPipe": TuiIsOptionalPipe, "tuiShowContentTooltip": TuiShowContentTooltip, "tuiShowCleanerPipe": TuiShowCleanerPipe, "tuiInspectAny": TuiInspectPipe, "tuiGetOpacity": TuiGetOpacityPipe, "tuiGetColorPipe": TuiGetColorPipe, "tuiIsPrimitivePolymorpheusContentPipe": TuiIsPrimitivePolymorpheusContentPipe, "async": i4.AsyncPipe }, animations: [
         trigger('emitEvent', [
             transition(':increment', [style({ opacity: 1 }), animate('500ms ease-in')]),
         ]),
@@ -1168,7 +1168,7 @@ class TuiDocExampleComponent {
     }
 }
 TuiDocExampleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TuiDocExampleComponent, deps: [{ 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 }, { token: TUI_DOC_EXAMPLE_OPTIONS }], target: i0.ɵɵFactoryTarget.Component });
-TuiDocExampleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TuiDocExampleComponent, selector: "tui-doc-example", inputs: { id: "id", 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            <tui-loader\n                *ngIf=\"files | tuiMapper : visible\"\n                size=\"xs\"\n                [overlay]=\"true\"\n                [showLoader]=\"!!(loading$ | async)\"\n                (click)=\"edit(files)\"\n            >\n                <ng-container *ngIf=\"codeEditor?.content as content; else defaultEditContent\">\n                    <ng-container *polymorpheusOutlet=\"content as editContent\">\n                        {{ editContent }}\n                    </ng-container>\n                </ng-container>\n\n                <ng-template #defaultEditContent>\n                    <button\n                        tuiButton\n                        appearance=\"flat\"\n                        size=\"s\"\n                        type=\"button\"\n                    >\n                        Edit on {{ codeEditor!.name }}\n                    </button>\n                </ng-template>\n            </tui-loader>\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: i2$1.TuiLoaderComponent, selector: "tui-loader", inputs: ["size", "inheritColor", "overlay", "textContent", "showLoader"] }, { type: TuiDocCopyComponent, selector: "tui-doc-copy" }, { type: TuiDocCodeComponent, selector: "tui-doc-code", inputs: ["filename", "code"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6$2.PolymorpheusOutletDirective, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6$1.TuiItemDirective, selector: "[tuiItem]" }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i8.CdkCopyToClipboard, selector: "[cdkCopyToClipboard]", inputs: ["cdkCopyToClipboard", "cdkCopyToClipboardAttempts"], outputs: ["cdkCopyToClipboardCopied"] }], pipes: { "tuiDocExampleCapitalize": TuiDocExampleCapitalizePipe, "async": i4.AsyncPipe, "tuiDocExampleGetTabs": TuiDocExampleGetTabsPipe, "tuiMapper": i6$1.TuiMapperPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+TuiDocExampleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TuiDocExampleComponent, selector: "tui-doc-example", inputs: { id: "id", 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            <tui-loader\n                *ngIf=\"files | tuiMapper : visible\"\n                size=\"xs\"\n                [overlay]=\"true\"\n                [showLoader]=\"!!(loading$ | async)\"\n                (click)=\"edit(files)\"\n            >\n                <ng-container *ngIf=\"codeEditor?.content as content; else defaultEditContent\">\n                    <ng-container *polymorpheusOutlet=\"content as editContent\">\n                        {{ editContent }}\n                    </ng-container>\n                </ng-container>\n\n                <ng-template #defaultEditContent>\n                    <button\n                        tuiButton\n                        appearance=\"flat\"\n                        size=\"s\"\n                        type=\"button\"\n                    >\n                        Edit on {{ codeEditor!.name }}\n                    </button>\n                </ng-template>\n            </tui-loader>\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 #0000001a}: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: i2$1.TuiLoaderComponent, selector: "tui-loader", inputs: ["size", "inheritColor", "overlay", "textContent", "showLoader"] }, { type: TuiDocCopyComponent, selector: "tui-doc-copy" }, { type: TuiDocCodeComponent, selector: "tui-doc-code", inputs: ["filename", "code"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6$2.PolymorpheusOutletDirective, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6$1.TuiItemDirective, selector: "[tuiItem]" }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i8.CdkCopyToClipboard, selector: "[cdkCopyToClipboard]", inputs: ["cdkCopyToClipboard", "cdkCopyToClipboardAttempts"], outputs: ["cdkCopyToClipboardCopied"] }], pipes: { "tuiDocExampleCapitalize": TuiDocExampleCapitalizePipe, "async": i4.AsyncPipe, "tuiDocExampleGetTabs": TuiDocExampleGetTabsPipe, "tuiMapper": i6$1.TuiMapperPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TuiDocExampleComponent, decorators: [{
             type: Component,
             args: [{
@@ -1369,6 +1369,84 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                 }]
         }] });
 
+const TUI_THEME_STORAGE_DEFAULT_KEY = `tuiTheme`;
+const TUI_THEME_STORAGE_KEY = new InjectionToken(`[TUI_THEME_STORAGE_KEY]`, { factory: () => TUI_THEME_STORAGE_DEFAULT_KEY });
+const TUI_THEME_DEFAULT_NAME = `Taiga UI`;
+const TUI_THEME_NAME = new InjectionToken(`[TUI_THEME_NAME]`, {
+    factory: () => TUI_THEME_DEFAULT_NAME,
+});
+
+class TuiThemeService extends BehaviorSubject {
+    constructor(name, key, storage) {
+        super(storage.getItem(key) || name);
+        this.name = name;
+        this.key = key;
+        this.storage = storage;
+    }
+    next(theme) {
+        this.storage.setItem(this.key, theme);
+        super.next(theme);
+    }
+    get isDefaultTheme() {
+        return this.value === this.name;
+    }
+}
+TuiThemeService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TuiThemeService, deps: [{ token: TUI_THEME_NAME }, { token: TUI_THEME_STORAGE_KEY }, { token: LOCAL_STORAGE }], target: i0.ɵɵFactoryTarget.Injectable });
+TuiThemeService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TuiThemeService, providedIn: `root` });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TuiThemeService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: `root`,
+                }]
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [TUI_THEME_NAME]
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [TUI_THEME_STORAGE_KEY]
+                }] }, { type: Storage, decorators: [{
+                    type: Inject,
+                    args: [LOCAL_STORAGE]
+                }] }]; } });
+
+const TUI_THEME_NIGHT_STORAGE_DEFAULT_KEY = `tuiNight`;
+const TUI_THEME_NIGHT_STORAGE_KEY = new InjectionToken(`[TUI_THEME_NIGHT_STORAGE_KEY]`, { factory: () => TUI_THEME_NIGHT_STORAGE_DEFAULT_KEY });
+
+class TuiThemeNightService extends BehaviorSubject {
+    constructor(windowRef, storage, key) {
+        super(storage.getItem(key) === `true` ||
+            (storage.getItem(key) === null &&
+                windowRef.matchMedia(`(prefers-color-scheme: dark)`).matches));
+        this.windowRef = windowRef;
+        this.storage = storage;
+        this.key = key;
+    }
+    next(night) {
+        this.storage.setItem(this.key, String(night));
+        super.next(night);
+    }
+    toggle() {
+        this.next(!this.value);
+    }
+}
+TuiThemeNightService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TuiThemeNightService, deps: [{ token: WINDOW }, { token: LOCAL_STORAGE }, { token: TUI_THEME_NIGHT_STORAGE_KEY }], target: i0.ɵɵFactoryTarget.Injectable });
+TuiThemeNightService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TuiThemeNightService, providedIn: `root` });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TuiThemeNightService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: `root`,
+                }]
+        }], ctorParameters: function () { return [{ type: Window, decorators: [{
+                    type: Inject,
+                    args: [WINDOW]
+                }] }, { type: Storage, decorators: [{
+                    type: Inject,
+                    args: [LOCAL_STORAGE]
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [TUI_THEME_NIGHT_STORAGE_KEY]
+                }] }]; } });
+
 /**
  * Stream that emits if loading of page is over (for example, to begin scrollIntoView)
  */
@@ -1762,7 +1840,7 @@ class TuiDocHeaderComponent {
     }
 }
 TuiDocHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TuiDocHeaderComponent, deps: [{ token: TUI_DOC_LOGO }, { token: TUI_DOC_MENU_TEXT }, { token: Router }, { token: TuiSwipeService }], target: i0.ɵɵFactoryTarget.Component });
-TuiDocHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TuiDocHeaderComponent, selector: "header[tuiDocHeader]", ngImport: i0, template: "<button\n    tuiIconButton\n    icon=\"tuiIconMenuLarge\"\n    appearance=\"icon\"\n    type=\"button\"\n    class=\"t-menu\"\n    [title]=\"menu\"\n    (click)=\"onClick()\"\n    (tuiActiveZoneChange)=\"onActiveZone($event)\"\n>\n    <tui-doc-navigation\n        *tuiSidebar=\"!!(open$ | async)\"\n        class=\"t-navigation\"\n    ></tui-doc-navigation>\n</button>\n<div class=\"t-logo\">\n    <img\n        *polymorpheusOutlet=\"logo as src\"\n        alt=\"Logo\"\n        class=\"t-img\"\n        [src]=\"src\"\n    />\n</div>\n<ng-content></ng-content>\n", styles: [":host{box-shadow:0 .125rem 1rem rgba(0,0,0,.08);position:fixed;top:0;left:0;right:0;z-index:1;display:flex;height:3.9375rem;align-items:center;padding:0 1.25rem;background:var(--tui-base-01);border-bottom:1px solid var(--tui-base-03)}.t-logo{margin-right:auto;font:var(--tui-font-heading-5)}.t-img{display:block}.t-menu{margin-left:-1.25rem}@media screen and (min-width: 48em){.t-menu{display:none}}.t-navigation{min-height:100%}\n"], components: [{ type: i2$1.TuiButtonComponent, selector: "button[tuiButton], button[tuiIconButton], a[tuiButton], a[tuiIconButton]", inputs: ["appearance", "disabled", "icon", "iconRight", "shape", "showLoader", "size"] }, { type: TuiDocNavigationComponent, selector: "tui-doc-navigation" }], directives: [{ type: i6$1.TuiActiveZoneDirective, selector: "[tuiActiveZone]:not(ng-container), [tuiActiveZoneChange]:not(ng-container), [tuiActiveZoneParent]:not(ng-container)", inputs: ["tuiActiveZoneParent"], outputs: ["tuiActiveZoneChange"], exportAs: ["tuiActiveZone"] }, { type: i4$1.TuiSidebarDirective, selector: "[tuiSidebar]", inputs: ["tuiSidebarDirection", "tuiSidebarAutoWidth", "tuiSidebar"] }, { type: i6$2.PolymorpheusOutletDirective, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }], pipes: { "async": i4.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+TuiDocHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TuiDocHeaderComponent, selector: "header[tuiDocHeader]", ngImport: i0, template: "<button\n    tuiIconButton\n    icon=\"tuiIconMenuLarge\"\n    appearance=\"icon\"\n    type=\"button\"\n    class=\"t-menu\"\n    [title]=\"menu\"\n    (click)=\"onClick()\"\n    (tuiActiveZoneChange)=\"onActiveZone($event)\"\n>\n    <tui-doc-navigation\n        *tuiSidebar=\"!!(open$ | async)\"\n        class=\"t-navigation\"\n    ></tui-doc-navigation>\n</button>\n<div class=\"t-logo\">\n    <img\n        *polymorpheusOutlet=\"logo as src\"\n        alt=\"Logo\"\n        class=\"t-img\"\n        [src]=\"src\"\n    />\n</div>\n<ng-content></ng-content>\n", styles: [":host{box-shadow:0 .125rem 1rem #00000014;position:fixed;top:0;left:0;right:0;z-index:1;display:flex;height:3.9375rem;align-items:center;padding:0 1.25rem;background:var(--tui-base-01);border-bottom:1px solid var(--tui-base-03)}.t-logo{margin-right:auto;font:var(--tui-font-heading-5)}.t-img{display:block}.t-menu{margin-left:-1.25rem}@media screen and (min-width: 48em){.t-menu{display:none}}.t-navigation{min-height:100%}\n"], components: [{ type: i2$1.TuiButtonComponent, selector: "button[tuiButton], button[tuiIconButton], a[tuiButton], a[tuiIconButton]", inputs: ["appearance", "disabled", "icon", "iconRight", "shape", "showLoader", "size"] }, { type: TuiDocNavigationComponent, selector: "tui-doc-navigation" }], directives: [{ type: i6$1.TuiActiveZoneDirective, selector: "[tuiActiveZone]:not(ng-container), [tuiActiveZoneChange]:not(ng-container), [tuiActiveZoneParent]:not(ng-container)", inputs: ["tuiActiveZoneParent"], outputs: ["tuiActiveZoneChange"], exportAs: ["tuiActiveZone"] }, { type: i4$1.TuiSidebarDirective, selector: "[tuiSidebar]", inputs: ["tuiSidebarDirection", "tuiSidebarAutoWidth", "tuiSidebar"] }, { type: i6$2.PolymorpheusOutletDirective, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }], pipes: { "async": i4.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TuiDocHeaderComponent, decorators: [{
             type: Component,
             args: [{
@@ -1786,31 +1864,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                 }] }]; } });
 
 class TuiDocMainComponent {
-    constructor(storage, windowRef) {
-        this.storage = storage;
-        this.windowRef = windowRef;
-        this.night = this.storage.getItem('night') === 'true' ||
-            (this.storage.getItem('night') === null &&
-                this.windowRef.matchMedia('(prefers-color-scheme: dark)').matches);
-        this.change$ = new Subject();
+    constructor(themeService, nightService) {
+        this.themeService = themeService;
+        this.nightService = nightService;
+        this.change$ = this.nightService;
     }
     get mode() {
-        return this.night ? 'onDark' : null;
-    }
-    onMode(night) {
-        this.night = night;
-        this.change$.next();
-        this.storage.setItem('night', String(night));
+        return this.nightService.value ? 'onDark' : null;
     }
 }
-TuiDocMainComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TuiDocMainComponent, deps: [{ token: LOCAL_STORAGE }, { token: WINDOW }], target: i0.ɵɵFactoryTarget.Component });
+TuiDocMainComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TuiDocMainComponent, deps: [{ token: TuiThemeService }, { token: TuiThemeNightService }], target: i0.ɵɵFactoryTarget.Component });
 TuiDocMainComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TuiDocMainComponent, selector: "tui-doc-main", host: { properties: { "attr.data-mode": "this.mode" } }, providers: [
         {
             provide: TuiModeDirective,
             useExisting: forwardRef(() => TuiDocMainComponent),
         },
         TuiSwipeService,
-    ], ngImport: i0, template: "<tui-theme-night *ngIf=\"night\"></tui-theme-night>\n<tui-root>\n    <div class=\"tui-doc-page\">\n        <tui-doc-navigation class=\"tui-doc-navigation\">\n            <ng-content select=\"tuiDocNavigation\"></ng-content>\n        </tui-doc-navigation>\n        <div class=\"tui-doc-content\">\n            <router-outlet class=\"tui-doc-outlet\"></router-outlet>\n        </div>\n    </div>\n    <header tuiDocHeader>\n        <ng-content select=\"tuiDocHeader\"></ng-content>\n        <button\n            tuiIconButton\n            tuiMode=\"onLight\"\n            appearance=\"secondary\"\n            size=\"s\"\n            shape=\"rounded\"\n            type=\"button\"\n            class=\"tui-doc-night-mode-switch\"\n            [icon]=\"night ? 'tuiIconSunLarge' : 'tuiIconMoonLarge'\"\n            (click)=\"onMode(!night)\"\n        ></button>\n    </header>\n    <ng-container ngProjectAs=\"tuiOverContent\">\n        <ng-content select=\"tuiOverContent\"></ng-content>\n    </ng-container>\n    <ng-container ngProjectAs=\"tuiOverDialogs\">\n        <ng-content select=\"tuiOverDialogs\"></ng-content>\n    </ng-container>\n    <ng-container ngProjectAs=\"tuiOverAlerts\">\n        <ng-content select=\"tuiOverAlerts\"></ng-content>\n    </ng-container>\n    <ng-container ngProjectAs=\"tuiOverPortals\">\n        <ng-content select=\"tuiOverPortals\"></ng-content>\n    </ng-container>\n    <ng-container ngProjectAs=\"tuiOverHints\">\n        <ng-content select=\"tuiOverHints\"></ng-content>\n    </ng-container>\n</tui-root>\n", styles: ["html{scroll-padding-top:4rem;height:auto}tui-root>tui-scroll-controls>.t-bar_vertical{top:4rem!important}@keyframes tuiShaking{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-.3125rem)}20%,40%,60%,80%{transform:translate(.3125rem)}}body{background:var(--tui-base-01);height:auto}tui-doc-main{display:block}code:not(.hljs):not([class*=\"language-\"]):not(.exception){transition-property:background;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;background:var(--tui-base-02);color:var(--tui-text-02);vertical-align:middle;box-shadow:inset 0 -2px var(--tui-secondary);padding:.375rem .5rem;font-size:.875rem;border-radius:.5rem}button:focus code,a:focus code{background:var(--tui-base-01)}.tui-doc-page{position:relative;z-index:0;padding-top:4rem}tui-doc-navigation.tui-doc-navigation{position:fixed;top:4rem;bottom:0;width:16.25rem;border-right:1px solid var(--tui-base-03)}@media screen and (max-width: 47.9625em){tui-doc-navigation.tui-doc-navigation{display:none}}.tui-doc-content{margin-left:16.25rem}@media screen and (max-width: 47.9625em){.tui-doc-content{margin-left:0}}.tui-doc-outlet+*{display:block}.tui-doc-animated-example{animation:1s .3s tuiShaking}.tui-doc-night-mode-switch{margin-left:1rem}.tui-doc-night-mode-switch tui-svg{color:var(--tui-text-02)}.hljs-tag{background:none}.hljs{display:block;overflow-x:auto;padding:.5em;color:var(--tui-text-01);background-color:var(--tui-clear)}.hljs.hljs-line-numbers{background:transparent}.hljs-subst,.hljs-title{font-weight:normal;color:var(--tui-text-01)}.hljs-comment,.hljs-quote{color:var(--tui-text-03);font-style:italic}.hljs-meta{color:#e38162}.hljs-section,.hljs-name,.hljs-literal,.hljs-keyword,.hljs-selector-tag,.hljs-type,.hljs-selector-id,.hljs-selector-class{font-weight:bold;color:var(--tui-link)}.hljs-attribute,.hljs-number,.hljs-regexp,.hljs-link{font-weight:bold;color:var(--tui-support-06)}.hljs-number,.hljs-regexp,.hljs-link{font-weight:normal}.hljs-string{color:var(--tui-positive);font-weight:bold}.hljs-symbol,.hljs-bullet,.hljs-formula{color:var(--tui-text-01);background:var(--tui-base-02);font-style:italic}.hljs-doctag{text-decoration:underline}.hljs-variable,.hljs-template-variable{color:var(--tui-link-hover)}[data-mode=onDark] .hljs-variable,[data-mode=onDark] .hljs-template-variable{color:var(--tui-warning-fill)}.hljs-addition{background:var(--tui-success-bg)}.hljs-deletion{background:var(--tui-error-bg)}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:bold}.hljs .hljs-line-numbers{padding:0}.hljs-ln-numbers{vertical-align:top;opacity:.3;text-align:right;padding-right:1em!important}\n"], components: [{ type: i2$1.TuiThemeNightComponent, selector: "tui-theme-night" }, { type: i2$1.TuiRootComponent, selector: "tui-root" }, { type: TuiDocNavigationComponent, selector: "tui-doc-navigation" }, { type: TuiDocHeaderComponent, selector: "header[tuiDocHeader]" }, { type: i2$1.TuiButtonComponent, selector: "button[tuiButton], button[tuiIconButton], a[tuiButton], a[tuiIconButton]", inputs: ["appearance", "disabled", "icon", "iconRight", "shape", "showLoader", "size"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.RouterOutlet, selector: "router-outlet", outputs: ["activate", "deactivate"], exportAs: ["outlet"] }, { type: i2$1.TuiModeDirective, selector: "[tuiMode]", inputs: ["tuiMode"] }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None });
+    ], ngImport: i0, template: "<tui-theme-night *ngIf=\"nightService.value && themeService.isDefaultTheme\"></tui-theme-night>\n<tui-root>\n    <div class=\"tui-doc-page\">\n        <tui-doc-navigation class=\"tui-doc-navigation\">\n            <ng-content select=\"tuiDocNavigation\"></ng-content>\n        </tui-doc-navigation>\n        <div class=\"tui-doc-content\">\n            <router-outlet class=\"tui-doc-outlet\"></router-outlet>\n        </div>\n    </div>\n    <header tuiDocHeader>\n        <ng-content select=\"tuiDocHeader\"></ng-content>\n        <button\n            tuiIconButton\n            tuiMode=\"onLight\"\n            appearance=\"secondary\"\n            size=\"s\"\n            shape=\"rounded\"\n            type=\"button\"\n            class=\"tui-doc-night-mode-switch\"\n            [icon]=\"nightService.value ? 'tuiIconSunLarge' : 'tuiIconMoonLarge'\"\n            (click)=\"nightService.toggle()\"\n        ></button>\n    </header>\n    <ng-container ngProjectAs=\"tuiOverContent\">\n        <ng-content select=\"tuiOverContent\"></ng-content>\n    </ng-container>\n    <ng-container ngProjectAs=\"tuiOverDialogs\">\n        <ng-content select=\"tuiOverDialogs\"></ng-content>\n    </ng-container>\n    <ng-container ngProjectAs=\"tuiOverAlerts\">\n        <ng-content select=\"tuiOverAlerts\"></ng-content>\n    </ng-container>\n    <ng-container ngProjectAs=\"tuiOverPortals\">\n        <ng-content select=\"tuiOverPortals\"></ng-content>\n    </ng-container>\n    <ng-container ngProjectAs=\"tuiOverHints\">\n        <ng-content select=\"tuiOverHints\"></ng-content>\n    </ng-container>\n</tui-root>\n", styles: ["html{scroll-padding-top:4rem;height:auto}tui-root>tui-scroll-controls>.t-bar_vertical{top:4rem!important}@keyframes tuiShaking{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-.3125rem)}20%,40%,60%,80%{transform:translate(.3125rem)}}body{background:var(--tui-base-01);height:auto}tui-doc-main{display:block}code:not(pre code):not(.hljs):not([class*=\"language-\"]){transition-property:background;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;background:var(--tui-base-02);color:var(--tui-text-02);vertical-align:middle;box-shadow:inset 0 -2px var(--tui-secondary);padding:.375rem .5rem;font-size:.875rem;border-radius:.5rem}button:focus code,a:focus code{background:var(--tui-base-01)}.tui-doc-page{position:relative;z-index:0;padding-top:4rem}tui-doc-navigation.tui-doc-navigation{position:fixed;top:4rem;bottom:0;width:16.25rem;border-right:1px solid var(--tui-base-03)}@media screen and (max-width: 47.9625em){tui-doc-navigation.tui-doc-navigation{display:none}}.tui-doc-content{margin-left:16.25rem}@media screen and (max-width: 47.9625em){.tui-doc-content{margin-left:0}}.tui-doc-outlet+*{display:block}.tui-doc-animated-example{animation:1s .3s tuiShaking}.tui-doc-night-mode-switch{margin-left:1rem}.tui-doc-night-mode-switch tui-svg{color:var(--tui-text-02)}tui-doc-code .hljs-tag{background:none}tui-doc-code .hljs{display:block;overflow-x:auto;padding:.5em;color:var(--tui-text-01);background-color:var(--tui-clear)}tui-doc-code .hljs.hljs-line-numbers{background:transparent}tui-doc-code .hljs-subst,tui-doc-code .hljs-title{font-weight:normal;color:var(--tui-text-01)}tui-doc-code .hljs-comment,tui-doc-code .hljs-quote{color:var(--tui-text-03);font-style:italic}tui-doc-code .hljs-meta{color:#e38162}tui-doc-code .hljs-section,tui-doc-code .hljs-name,tui-doc-code .hljs-literal,tui-doc-code .hljs-keyword,tui-doc-code .hljs-selector-tag,tui-doc-code .hljs-type,tui-doc-code .hljs-selector-id,tui-doc-code .hljs-selector-class{font-weight:bold;color:var(--tui-link)}tui-doc-code .hljs-attribute,tui-doc-code .hljs-number,tui-doc-code .hljs-regexp,tui-doc-code .hljs-link{font-weight:bold;color:var(--tui-support-06)}tui-doc-code .hljs-number,tui-doc-code .hljs-regexp,tui-doc-code .hljs-link{font-weight:normal}tui-doc-code .hljs-string{color:var(--tui-positive);font-weight:bold}tui-doc-code .hljs-symbol,tui-doc-code .hljs-bullet,tui-doc-code .hljs-formula{color:var(--tui-text-01);background:var(--tui-base-02);font-style:italic}tui-doc-code .hljs-doctag{text-decoration:underline}tui-doc-code .hljs-variable,tui-doc-code .hljs-template-variable{color:var(--tui-link-hover)}tui-doc-code [data-mode=onDark] .hljs-variable,tui-doc-code [data-mode=onDark] .hljs-template-variable{color:var(--tui-warning-fill)}tui-doc-code .hljs-addition{background:var(--tui-success-bg)}tui-doc-code .hljs-deletion{background:var(--tui-error-bg)}tui-doc-code .hljs-emphasis{font-style:italic}tui-doc-code .hljs-strong{font-weight:bold}tui-doc-code .hljs .hljs-line-numbers{padding:0}tui-doc-code .hljs-ln-numbers{vertical-align:top;opacity:.3;text-align:right;padding-right:1em!important}\n"], components: [{ type: i2$1.TuiThemeNightComponent, selector: "tui-theme-night" }, { type: i2$1.TuiRootComponent, selector: "tui-root" }, { type: TuiDocNavigationComponent, selector: "tui-doc-navigation" }, { type: TuiDocHeaderComponent, selector: "header[tuiDocHeader]" }, { type: i2$1.TuiButtonComponent, selector: "button[tuiButton], button[tuiIconButton], a[tuiButton], a[tuiIconButton]", inputs: ["appearance", "disabled", "icon", "iconRight", "shape", "showLoader", "size"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.RouterOutlet, selector: "router-outlet", outputs: ["activate", "deactivate"], exportAs: ["outlet"] }, { type: i2$1.TuiModeDirective, selector: "[tuiMode]", inputs: ["tuiMode"] }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TuiDocMainComponent, decorators: [{
             type: Component,
             args: [{
@@ -1829,12 +1899,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                         TuiSwipeService,
                     ],
                 }]
-        }], ctorParameters: function () { return [{ type: Storage, decorators: [{
+        }], ctorParameters: function () { return [{ type: TuiThemeService, decorators: [{
                     type: Inject,
-                    args: [LOCAL_STORAGE]
-                }] }, { type: Window, decorators: [{
+                    args: [TuiThemeService]
+                }] }, { type: TuiThemeNightService, decorators: [{
                     type: Inject,
-                    args: [WINDOW]
+                    args: [TuiThemeNightService]
                 }] }]; }, propDecorators: { mode: [{
                 type: HostBinding,
                 args: ['attr.data-mode']
@@ -2347,5 +2417,5 @@ function tuiGenerateRoutes(type) {
  * Generated bundle index. Do not edit.
  */
 
-export { TUI_DOC_CODE_ACTIONS, TUI_DOC_CODE_EDITOR, TUI_DOC_DEFAULT_TABS, TUI_DOC_DEMO_TEXTS, TUI_DOC_DOCUMENTATION_TEXTS, TUI_DOC_EXAMPLE_CONTENT_PROCESSOR, TUI_DOC_EXAMPLE_DEFAULT_OPTIONS, TUI_DOC_EXAMPLE_MARKDOWN_CODE_PROCESSOR, TUI_DOC_EXAMPLE_OPTIONS, TUI_DOC_EXAMPLE_TEXTS, TUI_DOC_EXCLUDED_PROPERTIES, TUI_DOC_LOGO, TUI_DOC_MAP_PAGES, TUI_DOC_MENU_TEXT, TUI_DOC_PAGES, TUI_DOC_PAGE_LOADED, TUI_DOC_RUSSIAN, TUI_DOC_SCROLL_BEHAVIOR, TUI_DOC_SEARCH_TEXT, TUI_DOC_SEE_ALSO, TUI_DOC_SEE_ALSO_TEXT, TUI_DOC_SOURCE_CODE, TUI_DOC_SOURCE_CODE_TEXT, TUI_DOC_TITLE, TUI_DOC_URL_STATE_HANDLER, TUI_EXAMPLE_PRIMARY_FILE_NAME, TuiAddonDocModule, TuiDocCodeComponent, TuiDocCodeModule, TuiDocCopyComponent, TuiDocCopyModule, TuiDocDemoComponent, TuiDocDemoModule, TuiDocDocumentationComponent, TuiDocDocumentationModule, TuiDocDocumentationPropertyConnectorDirective, TuiDocExampleCapitalizePipe, TuiDocExampleComponent, TuiDocExampleGetTabsPipe, TuiDocExampleModule, TuiDocMainComponent, TuiDocMainModule, TuiDocNavigationComponent, TuiDocNavigationModule, TuiDocPageComponent, TuiDocPageModule, TuiDocPageTabConnectorDirective, TuiInspectPipe, TuiLanguageSwitcherComponent, TuiLanguageSwitcherModule, TuiScrollIntoViewLinkDirective, TuiScrollIntoViewLinkModule, tuiCoerceValue, tuiDocExampleOptionsProvider, tuiDocExcludeProperties, tuiGenerateRoutes, tuiRawLoad, tuiRawLoadRecord, tuiTryParseMarkdownCodeBlock };
+export { TUI_DOC_CODE_ACTIONS, TUI_DOC_CODE_EDITOR, TUI_DOC_DEFAULT_TABS, TUI_DOC_DEMO_TEXTS, TUI_DOC_DOCUMENTATION_TEXTS, TUI_DOC_EXAMPLE_CONTENT_PROCESSOR, TUI_DOC_EXAMPLE_DEFAULT_OPTIONS, TUI_DOC_EXAMPLE_MARKDOWN_CODE_PROCESSOR, TUI_DOC_EXAMPLE_OPTIONS, TUI_DOC_EXAMPLE_TEXTS, TUI_DOC_EXCLUDED_PROPERTIES, TUI_DOC_LOGO, TUI_DOC_MAP_PAGES, TUI_DOC_MENU_TEXT, TUI_DOC_PAGES, TUI_DOC_PAGE_LOADED, TUI_DOC_RUSSIAN, TUI_DOC_SCROLL_BEHAVIOR, TUI_DOC_SEARCH_TEXT, TUI_DOC_SEE_ALSO, TUI_DOC_SEE_ALSO_TEXT, TUI_DOC_SOURCE_CODE, TUI_DOC_SOURCE_CODE_TEXT, TUI_DOC_TITLE, TUI_DOC_URL_STATE_HANDLER, TUI_EXAMPLE_PRIMARY_FILE_NAME, TUI_THEME_DEFAULT_NAME, TUI_THEME_NAME, TUI_THEME_NIGHT_STORAGE_DEFAULT_KEY, TUI_THEME_NIGHT_STORAGE_KEY, TUI_THEME_STORAGE_DEFAULT_KEY, TUI_THEME_STORAGE_KEY, TuiAddonDocModule, TuiDocCodeComponent, TuiDocCodeModule, TuiDocCopyComponent, TuiDocCopyModule, TuiDocDemoComponent, TuiDocDemoModule, TuiDocDocumentationComponent, TuiDocDocumentationModule, TuiDocDocumentationPropertyConnectorDirective, TuiDocExampleCapitalizePipe, TuiDocExampleComponent, TuiDocExampleGetTabsPipe, TuiDocExampleModule, TuiDocMainComponent, TuiDocMainModule, TuiDocNavigationComponent, TuiDocNavigationModule, TuiDocPageComponent, TuiDocPageModule, TuiDocPageTabConnectorDirective, TuiInspectPipe, TuiLanguageSwitcherComponent, TuiLanguageSwitcherModule, TuiScrollIntoViewLinkDirective, TuiScrollIntoViewLinkModule, TuiThemeNightService, TuiThemeService, tuiCoerceValue, tuiDocExampleOptionsProvider, tuiDocExcludeProperties, tuiGenerateRoutes, tuiRawLoad, tuiRawLoadRecord, tuiTryParseMarkdownCodeBlock };
 //# sourceMappingURL=taiga-ui-addon-doc.js.map