@taiga-ui/addon-doc 3.24.0 → 3.25.0

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

@@ -587,9 +587,14 @@
         factory: function () { return String; },
     });
 
+    function tuiCoerceValueIsTrue(value) {
+        return (value === null || value === void 0 ? void 0 : value.toString()) === "true";
+    }
+
     var MIN_WIDTH = 160;
     var TuiDocDemoComponent = /** @class */ (function () {
         function TuiDocDemoComponent(isMobile, el, locationRef, urlSerializer, texts, urlStateHandler) {
+            var _a, _b;
             this.isMobile = isMobile;
             this.el = el;
             this.locationRef = locationRef;
@@ -599,11 +604,11 @@
             this.control = null;
             this.template = null;
             this.updateOnVariants = ['change', 'blur', 'submit'];
-            this.updateOn = this.updateOnVariants[0];
-            this.expanded = false;
-            this.opaque = true;
-            this.mode = this.getUrlTree().queryParams.tuiMode || null;
-            this.sandboxWidth = parseInt(this.getUrlTree().queryParams.sandboxWidth, 10);
+            this.updateOn = this.params.updateOn || this.updateOnVariants[0];
+            this.opaque = tuiCoerceValueIsTrue((_a = this.params.sandboxOpaque) !== null && _a !== void 0 ? _a : true);
+            this.expanded = tuiCoerceValueIsTrue((_b = this.params.sandboxExpanded) !== null && _b !== void 0 ? _b : false);
+            this.mode = this.params.tuiMode || null;
+            this.sandboxWidth = i6.tuiToInteger(this.params.sandboxWidth);
             this.change$ = new i9.Subject();
             this.items = ['onLight', 'onDark'];
         }
@@ -612,22 +617,28 @@
             this.onMouseUp();
         };
         TuiDocDemoComponent.prototype.onMouseUp = function () {
-            this.updateUrl(this.mode, this.sandboxWidth);
+            this.updateUrl({ sandboxWidth: this.sandboxWidth });
         };
         TuiDocDemoComponent.prototype.ngOnInit = function () {
             this.createForm();
             this.updateWidth(this.sandboxWidth + this.delta);
         };
         TuiDocDemoComponent.prototype.onModeChange = function (mode) {
-            this.updateUrl(mode, this.sandboxWidth);
             this.mode = mode;
+            this.updateUrl({ sandboxWidth: this.sandboxWidth });
             this.change$.next();
         };
         TuiDocDemoComponent.prototype.toggleDetails = function () {
             this.expanded = !this.expanded;
+            this.updateUrl({ sandboxExpanded: this.expanded });
+        };
+        TuiDocDemoComponent.prototype.changeOpaque = function (opaque) {
+            this.opaque = opaque;
+            this.updateUrl({ sandboxOpaque: this.opaque });
         };
         TuiDocDemoComponent.prototype.updateOnChange = function (updateOn) {
             this.updateOn = updateOn;
+            this.updateUrl({ updateOn: updateOn });
             this.createForm();
         };
         TuiDocDemoComponent.prototype.updateWidth = function (width) {
@@ -653,18 +664,16 @@
             enumerable: false,
             configurable: true
         });
-        TuiDocDemoComponent.prototype.updateUrl = function (tuiMode, sandboxWidth) {
+        TuiDocDemoComponent.prototype.updateUrl = function (params) {
             var tree = this.getUrlTree();
             var queryParams = tree.queryParams;
-            var modeParam = tuiMode ? { tuiMode: tuiMode } : {};
-            var resizeParam = !Number.isNaN(sandboxWidth) ? { sandboxWidth: sandboxWidth } : {};
             delete queryParams.sandboxWidth;
             delete queryParams.tuiMode;
-            tree.queryParams = Object.assign(Object.assign(Object.assign({}, queryParams), modeParam), resizeParam);
+            tree.queryParams = Object.assign(Object.assign({}, queryParams), i6.tuiCleanObject(Object.assign({ tuiMode: this.mode }, params)));
             this.locationRef.go(this.urlStateHandler(tree));
         };
         TuiDocDemoComponent.prototype.createForm = function () {
-            var _a = this, control = _a.control, updateOn = _a.updateOn;
+            var _c = this, control = _c.control, updateOn = _c.updateOn;
             if (control) {
                 this.testForm = new i5.FormGroup({ testValue: control }, { updateOn: updateOn });
             }
@@ -672,6 +681,13 @@
         TuiDocDemoComponent.prototype.getUrlTree = function () {
             return this.urlSerializer.parse(this.locationRef.path());
         };
+        Object.defineProperty(TuiDocDemoComponent.prototype, "params", {
+            get: function () {
+                return this.getUrlTree().queryParams;
+            },
+            enumerable: false,
+            configurable: true
+        });
         return TuiDocDemoComponent;
     }());
     TuiDocDemoComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiDocDemoComponent, deps: [{ token: i6.TUI_IS_MOBILE }, { token: i0.ElementRef }, { token: i4.Location }, { token: i6$1.UrlSerializer }, { token: TUI_DOC_DEMO_TEXTS }, { token: TUI_DOC_URL_STATE_HANDLER }], target: i0__namespace.ɵɵFactoryTarget.Component });
@@ -681,7 +697,7 @@
                 provide: i2$1.TuiModeDirective,
                 useExisting: i0.forwardRef(function () { return TuiDocDemoComponent; }),
             },
-        ], queries: [{ propertyName: "template", first: true, predicate: i0.TemplateRef, descendants: true }], viewQueries: [{ propertyName: "resizeable", first: true, predicate: i6.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__namespace, template: "<div\n    class=\"t-bg-toggle\"\n    [tuiMode]=\"null\"\n>\n    <ng-template #tooltip>\n        {{ texts[0] }}\n        <a\n            tuiLink\n            tuiMode=\"onDark\"\n            routerLink=\"/directives/mode\"\n        >\n            <code>tuiMode</code>\n        </a>\n    </ng-template>\n    <ng-container *ngIf=\"isMobile; else desktop\">\n        <tui-select\n            tuiTextfieldSize=\"s\"\n            class=\"t-mode\"\n            [tuiTextfieldCleaner]=\"true\"\n            [tuiHintContent]=\"tooltip\"\n            [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__namespace$1.TuiLinkComponent, selector: "a[tuiLink], button[tuiLink]", inputs: ["pseudo", "icon", "iconAlign", "iconRotated", "mode"], exportAs: ["tuiLink"] }, { type: i1__namespace.TuiSelectComponent, selector: "tui-select", inputs: ["stringify", "identityMatcher", "valueContent"] }, { type: i1__namespace.TuiDataListWrapperComponent, selector: "tui-data-list-wrapper:not([labels])", inputs: ["items"] }, { type: i2__namespace$1.TuiTooltipComponent, selector: "tui-tooltip", inputs: ["content", "direction", "appearance", "showDelay", "hideDelay", "describeId"] }, { type: i1__namespace.TuiRadioBlockComponent, selector: "tui-radio-block", inputs: ["item", "identityMatcher", "contentAlign", "size", "hideRadio", "pseudoDisabled"] }, { type: i1__namespace.TuiCheckboxLabeledComponent, selector: "tui-checkbox-labeled", inputs: ["size"] }, { type: i2__namespace$1.TuiButtonComponent, selector: "button[tuiButton], button[tuiIconButton], a[tuiButton], a[tuiIconButton]", inputs: ["appearance", "disabled", "icon", "iconRight", "shape", "showLoader", "size"] }, { type: i2__namespace$1.TuiSvgComponent, selector: "tui-svg", inputs: ["src"] }, { type: i2__namespace$1.TuiExpandComponent, selector: "tui-expand", inputs: ["async", "expanded"] }], directives: [{ type: i2__namespace$1.TuiModeDirective, selector: "[tuiMode]", inputs: ["tuiMode"] }, { type: i6__namespace.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["routerLink", "target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo"] }, { type: i4__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace.TuiSelectDirective, selector: "tui-select" }, { type: i2__namespace$1.TuiTextfieldSizeDirective, selector: "[tuiTextfieldSize]", inputs: ["tuiTextfieldSize"] }, { type: i2__namespace$1.TuiTextfieldCleanerDirective, selector: "[tuiTextfieldCleaner]", inputs: ["tuiTextfieldCleaner"] }, { type: i2__namespace$1.TuiHintOptionsDirective, selector: "[tuiHintContent]", inputs: ["tuiHintContent", "tuiHintDirection", "tuiHintAppearance", "tuiHintShowDelay", "tuiHintHideDelay"] }, { type: i5__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i2__namespace$1.TuiDataListDirective, selector: "ng-template[tuiDataList]" }, { type: i2__namespace$1.TuiGroupDirective, selector: "[tuiGroup]:not(ng-container)", inputs: ["orientation", "adaptive", "collapsed", "rounded", "size"] }, { type: i6__namespace$1.TuiResizeableDirective, selector: "[tuiResizeable]" }, { type: i5__namespace.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i5__namespace.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i5__namespace.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i4__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2__namespace$1.TuiExpandContentDirective, selector: "[tuiExpandContent]" }, { type: i6__namespace$1.TuiResizerDirective, selector: "[tuiResizer]", inputs: ["tuiResizer"], outputs: ["tuiSizeChange"] }], pipes: { "json": i4__namespace.JsonPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+        ], queries: [{ propertyName: "template", first: true, predicate: i0.TemplateRef, descendants: true }], viewQueries: [{ propertyName: "resizeable", first: true, predicate: i6.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__namespace, template: "<div\n    class=\"t-bg-toggle\"\n    [tuiMode]=\"null\"\n>\n    <ng-template #tooltip>\n        {{ texts[0] }}\n        <a\n            tuiLink\n            tuiMode=\"onDark\"\n            routerLink=\"/directives/mode\"\n        >\n            <code>tuiMode</code>\n        </a>\n    </ng-template>\n    <ng-container *ngIf=\"isMobile; else desktop\">\n        <tui-select\n            tuiTextfieldSize=\"s\"\n            class=\"t-mode\"\n            [tuiTextfieldCleaner]=\"true\"\n            [tuiHintContent]=\"tooltip\"\n            [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        (ngModelChange)=\"changeOpaque($event)\"\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__namespace$1.TuiLinkComponent, selector: "a[tuiLink], button[tuiLink]", inputs: ["pseudo", "icon", "iconAlign", "iconRotated", "mode"], exportAs: ["tuiLink"] }, { type: i1__namespace.TuiSelectComponent, selector: "tui-select", inputs: ["stringify", "identityMatcher", "valueContent"] }, { type: i1__namespace.TuiDataListWrapperComponent, selector: "tui-data-list-wrapper:not([labels])", inputs: ["items"] }, { type: i2__namespace$1.TuiTooltipComponent, selector: "tui-tooltip", inputs: ["content", "direction", "appearance", "showDelay", "hideDelay", "describeId"] }, { type: i1__namespace.TuiRadioBlockComponent, selector: "tui-radio-block", inputs: ["item", "identityMatcher", "contentAlign", "size", "hideRadio", "pseudoDisabled"] }, { type: i1__namespace.TuiCheckboxLabeledComponent, selector: "tui-checkbox-labeled", inputs: ["size"] }, { type: i2__namespace$1.TuiButtonComponent, selector: "button[tuiButton], button[tuiIconButton], a[tuiButton], a[tuiIconButton]", inputs: ["appearance", "disabled", "icon", "iconRight", "shape", "showLoader", "size"] }, { type: i2__namespace$1.TuiSvgComponent, selector: "tui-svg", inputs: ["src"] }, { type: i2__namespace$1.TuiExpandComponent, selector: "tui-expand", inputs: ["async", "expanded"] }], directives: [{ type: i2__namespace$1.TuiModeDirective, selector: "[tuiMode]", inputs: ["tuiMode"] }, { type: i6__namespace.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["routerLink", "target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo"] }, { type: i4__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace.TuiSelectDirective, selector: "tui-select" }, { type: i2__namespace$1.TuiTextfieldSizeDirective, selector: "[tuiTextfieldSize]", inputs: ["tuiTextfieldSize"] }, { type: i2__namespace$1.TuiTextfieldCleanerDirective, selector: "[tuiTextfieldCleaner]", inputs: ["tuiTextfieldCleaner"] }, { type: i2__namespace$1.TuiHintOptionsDirective, selector: "[tuiHintContent]", inputs: ["tuiHintContent", "tuiHintDirection", "tuiHintAppearance", "tuiHintShowDelay", "tuiHintHideDelay"] }, { type: i5__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i2__namespace$1.TuiDataListDirective, selector: "ng-template[tuiDataList]" }, { type: i2__namespace$1.TuiGroupDirective, selector: "[tuiGroup]:not(ng-container)", inputs: ["orientation", "adaptive", "collapsed", "rounded", "size"] }, { type: i6__namespace$1.TuiResizeableDirective, selector: "[tuiResizeable]" }, { type: i5__namespace.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i5__namespace.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i5__namespace.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i4__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2__namespace$1.TuiExpandContentDirective, selector: "[tuiExpandContent]" }, { type: i6__namespace$1.TuiResizerDirective, selector: "[tuiResizer]", inputs: ["tuiResizer"], outputs: ["tuiSizeChange"] }], pipes: { "json": i4__namespace.JsonPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
     __decorate([
         i6.tuiPure
     ], TuiDocDemoComponent.prototype, "updateUrl", null);
@@ -3116,6 +3132,7 @@
     exports.TuiThemeNightService = TuiThemeNightService;
     exports.TuiThemeService = TuiThemeService;
     exports.tuiCoerceValue = tuiCoerceValue;
+    exports.tuiCoerceValueIsTrue = tuiCoerceValueIsTrue;
     exports.tuiDocExampleOptionsProvider = tuiDocExampleOptionsProvider;
     exports.tuiDocExcludeProperties = tuiDocExcludeProperties;
     exports.tuiGenerateRoutes = tuiGenerateRoutes;