@taiga-ui/legacy 4.9.0 → 4.11.0

package/fesm2022/taiga-ui-legacy-components-color-selector.mjs

@@ -75,13 +75,11 @@ class TuiColorEditComponent {
         this.colorChange.emit(color);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiColorEditComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiColorEditComponent, selector: "tui-color-edit", inputs: { color: "color" }, outputs: { colorChange: "colorChange" }, host: { attributes: { "ngSkipHydration": "true" } }, ngImport: i0, template: "<tui-select\n    tuiDropdownAlign=\"left\"\n    tuiDropdownLimitWidth=\"min\"\n    tuiTextfieldSize=\"m\"\n    class=\"t-select\"\n    [ngModelOptions]=\"{standalone: true}\"\n    [style.flex]=\"'0 0 auto'\"\n    [tuiTextfieldLabelOutside]=\"true\"\n    [(ngModel)]=\"mode\"\n>\n    <tui-data-list\n        *tuiDataList\n        size=\"s\"\n    >\n        <button\n            *ngFor=\"let item of modes\"\n            tuiOption\n            type=\"button\"\n            [value]=\"item\"\n        >\n            {{ item }}\n        </button>\n    </tui-data-list>\n</tui-select>\n<tui-primitive-textfield\n    *ngIf=\"isHex; else rgb\"\n    tuiTextfieldSize=\"m\"\n    [maskito]=\"hexMask\"\n    [tuiTextfieldLabelOutside]=\"true\"\n    [value]=\"hex\"\n    (valueChange)=\"onHexChange($event)\"\n/>\n<ng-template #rgb>\n    <tui-input-number\n        tuiTextfieldSize=\"m\"\n        class=\"t-rgb\"\n        [max]=\"255\"\n        [min]=\"0\"\n        [ngModel]=\"color[0]\"\n        [ngModelOptions]=\"{standalone: true}\"\n        [tuiTextfieldLabelOutside]=\"true\"\n        (ngModelChange)=\"onRgbChange($event, color[1], color[2], color[3])\"\n    />\n    <tui-input-number\n        tuiTextfieldSize=\"m\"\n        class=\"t-rgb\"\n        [max]=\"255\"\n        [min]=\"0\"\n        [ngModel]=\"color[1]\"\n        [ngModelOptions]=\"{standalone: true}\"\n        [tuiTextfieldLabelOutside]=\"true\"\n        (ngModelChange)=\"onRgbChange(color[0], $event, color[2], color[3])\"\n    />\n    <tui-input-number\n        tuiTextfieldSize=\"m\"\n        class=\"t-rgb\"\n        [max]=\"255\"\n        [min]=\"0\"\n        [ngModel]=\"color[2]\"\n        [ngModelOptions]=\"{standalone: true}\"\n        [tuiTextfieldLabelOutside]=\"true\"\n        (ngModelChange)=\"onRgbChange(color[0], color[1], $event, color[3])\"\n    />\n</ng-template>\n<tui-input-number\n    tuiTextfieldPostfix=\"%\"\n    tuiTextfieldSize=\"m\"\n    class=\"t-opacity\"\n    [max]=\"100\"\n    [min]=\"0\"\n    [ngModel]=\"opacity\"\n    [ngModelOptions]=\"{standalone: true}\"\n    [style.flex]=\"'0 0 auto'\"\n    [tuiTextfieldLabelOutside]=\"true\"\n    (ngModelChange)=\"onRgbChange(color[0], color[1], color[2], $event / 100)\"\n/>\n", styles: [":host{display:flex}.t-select{inline-size:5.875rem}.t-opacity{inline-size:4.275rem}.t-rgb,.t-opacity{text-align:center}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.MaskitoDirective, selector: "[maskito]", inputs: ["maskito", "maskitoElement"] }, { kind: "component", type: i4.TuiPrimitiveTextfieldComponent, selector: "tui-primitive-textfield", inputs: ["editable", "iconCleaner", "readOnly", "invalid", "disabled", "value"], outputs: ["valueChange"] }, { kind: "directive", type: i4.TuiPrimitiveTextfieldDirective, selector: "tui-primitive-textfield" }, { kind: "directive", type: i5.TuiTextfieldLabelOutsideDirective, selector: "[tuiTextfieldLabelOutside]", inputs: ["tuiTextfieldLabelOutside"] }, { kind: "directive", type: i5.TuiTextfieldSizeDirective, selector: "[tuiTextfieldSize]", inputs: ["tuiTextfieldSize"] }, { kind: "directive", type: i5.TuiTextfieldPostfixDirective, selector: "[tuiTextfieldPostfix]", inputs: ["tuiTextfieldPostfix"] }, { kind: "component", type: i6.TuiInputNumberComponent, selector: "tui-input-number", inputs: ["min", "max", "step"] }, { kind: "directive", type: i6.TuiInputNumberDirective, selector: "tui-input-number" }, { kind: "component", type: i7.TuiSelectComponent, selector: "tui-select", inputs: ["stringify", "identityMatcher", "valueContent"] }, { kind: "directive", type: i7.TuiSelectDirective, selector: "tui-select" }, { kind: "directive", type: i1$1.TuiDropdownOptionsDirective, selector: "[tuiDropdownAlign], [tuiDropdownAppearance], [tuiDropdownDirection], [tuiDropdownLimitWidth], [tuiDropdownMinHeight], [tuiDropdownMaxHeight], [tuiDropdownOffset]", inputs: ["tuiDropdownAlign", "tuiDropdownAppearance", "tuiDropdownDirection", "tuiDropdownLimitWidth", "tuiDropdownMinHeight", "tuiDropdownMaxHeight", "tuiDropdownOffset"] }, { kind: "component", type: i2$1.TuiDataListComponent, selector: "tui-data-list", inputs: ["emptyContent", "size"] }, { kind: "directive", type: i2$1.TuiDataListDirective, selector: "ng-template[tuiDataList]" }, { kind: "component", type: i2$1.TuiOption, selector: "button[tuiOption], a[tuiOption], label[tuiOption]", inputs: ["disabled", "value"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiColorEditComponent, selector: "tui-color-edit", inputs: { color: "color" }, outputs: { colorChange: "colorChange" }, ngImport: i0, template: "<tui-select\n    tuiDropdownAlign=\"left\"\n    tuiDropdownLimitWidth=\"min\"\n    tuiTextfieldSize=\"m\"\n    class=\"t-select\"\n    [ngModelOptions]=\"{standalone: true}\"\n    [style.flex]=\"'0 0 auto'\"\n    [tuiTextfieldLabelOutside]=\"true\"\n    [(ngModel)]=\"mode\"\n>\n    <tui-data-list\n        *tuiDataList\n        size=\"s\"\n    >\n        <button\n            *ngFor=\"let item of modes\"\n            tuiOption\n            type=\"button\"\n            [value]=\"item\"\n        >\n            {{ item }}\n        </button>\n    </tui-data-list>\n</tui-select>\n<tui-primitive-textfield\n    *ngIf=\"isHex; else rgb\"\n    tuiTextfieldSize=\"m\"\n    [maskito]=\"hexMask\"\n    [tuiTextfieldLabelOutside]=\"true\"\n    [value]=\"hex\"\n    (valueChange)=\"onHexChange($event)\"\n/>\n<ng-template #rgb>\n    <tui-input-number\n        tuiTextfieldSize=\"m\"\n        class=\"t-rgb\"\n        [max]=\"255\"\n        [min]=\"0\"\n        [ngModel]=\"color[0]\"\n        [ngModelOptions]=\"{standalone: true}\"\n        [tuiTextfieldLabelOutside]=\"true\"\n        (ngModelChange)=\"onRgbChange($event, color[1], color[2], color[3])\"\n    />\n    <tui-input-number\n        tuiTextfieldSize=\"m\"\n        class=\"t-rgb\"\n        [max]=\"255\"\n        [min]=\"0\"\n        [ngModel]=\"color[1]\"\n        [ngModelOptions]=\"{standalone: true}\"\n        [tuiTextfieldLabelOutside]=\"true\"\n        (ngModelChange)=\"onRgbChange(color[0], $event, color[2], color[3])\"\n    />\n    <tui-input-number\n        tuiTextfieldSize=\"m\"\n        class=\"t-rgb\"\n        [max]=\"255\"\n        [min]=\"0\"\n        [ngModel]=\"color[2]\"\n        [ngModelOptions]=\"{standalone: true}\"\n        [tuiTextfieldLabelOutside]=\"true\"\n        (ngModelChange)=\"onRgbChange(color[0], color[1], $event, color[3])\"\n    />\n</ng-template>\n<tui-input-number\n    tuiTextfieldPostfix=\"%\"\n    tuiTextfieldSize=\"m\"\n    class=\"t-opacity\"\n    [max]=\"100\"\n    [min]=\"0\"\n    [ngModel]=\"opacity\"\n    [ngModelOptions]=\"{standalone: true}\"\n    [style.flex]=\"'0 0 auto'\"\n    [tuiTextfieldLabelOutside]=\"true\"\n    (ngModelChange)=\"onRgbChange(color[0], color[1], color[2], $event / 100)\"\n/>\n", styles: [":host{display:flex}.t-select{inline-size:5.875rem}.t-opacity{inline-size:4.275rem}.t-rgb,.t-opacity{text-align:center}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.MaskitoDirective, selector: "[maskito]", inputs: ["maskito", "maskitoElement"] }, { kind: "component", type: i4.TuiPrimitiveTextfieldComponent, selector: "tui-primitive-textfield", inputs: ["editable", "iconCleaner", "readOnly", "invalid", "disabled", "value"], outputs: ["valueChange"] }, { kind: "directive", type: i4.TuiPrimitiveTextfieldDirective, selector: "tui-primitive-textfield" }, { kind: "directive", type: i5.TuiTextfieldLabelOutsideDirective, selector: "[tuiTextfieldLabelOutside]", inputs: ["tuiTextfieldLabelOutside"] }, { kind: "directive", type: i5.TuiTextfieldSizeDirective, selector: "[tuiTextfieldSize]", inputs: ["tuiTextfieldSize"] }, { kind: "directive", type: i5.TuiTextfieldPostfixDirective, selector: "[tuiTextfieldPostfix]", inputs: ["tuiTextfieldPostfix"] }, { kind: "component", type: i6.TuiInputNumberComponent, selector: "tui-input-number", inputs: ["min", "max", "step"] }, { kind: "directive", type: i6.TuiInputNumberDirective, selector: "tui-input-number" }, { kind: "component", type: i7.TuiSelectComponent, selector: "tui-select", inputs: ["stringify", "identityMatcher", "valueContent"] }, { kind: "directive", type: i7.TuiSelectDirective, selector: "tui-select" }, { kind: "directive", type: i1$1.TuiDropdownOptionsDirective, selector: "[tuiDropdownAlign], [tuiDropdownAppearance], [tuiDropdownDirection], [tuiDropdownLimitWidth], [tuiDropdownMinHeight], [tuiDropdownMaxHeight], [tuiDropdownOffset]", inputs: ["tuiDropdownAlign", "tuiDropdownAppearance", "tuiDropdownDirection", "tuiDropdownLimitWidth", "tuiDropdownMinHeight", "tuiDropdownMaxHeight", "tuiDropdownOffset"] }, { kind: "component", type: i2$1.TuiDataListComponent, selector: "tui-data-list", inputs: ["emptyContent", "size"] }, { kind: "directive", type: i2$1.TuiDataListDirective, selector: "ng-template[tuiDataList]" }, { kind: "component", type: i2$1.TuiOption, selector: "button[tuiOption], a[tuiOption], label[tuiOption]", inputs: ["disabled", "value"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiColorEditComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, selector: 'tui-color-edit', changeDetection: ChangeDetectionStrategy.OnPush, host: {
-                        ngSkipHydration: 'true',
-                    }, template: "<tui-select\n    tuiDropdownAlign=\"left\"\n    tuiDropdownLimitWidth=\"min\"\n    tuiTextfieldSize=\"m\"\n    class=\"t-select\"\n    [ngModelOptions]=\"{standalone: true}\"\n    [style.flex]=\"'0 0 auto'\"\n    [tuiTextfieldLabelOutside]=\"true\"\n    [(ngModel)]=\"mode\"\n>\n    <tui-data-list\n        *tuiDataList\n        size=\"s\"\n    >\n        <button\n            *ngFor=\"let item of modes\"\n            tuiOption\n            type=\"button\"\n            [value]=\"item\"\n        >\n            {{ item }}\n        </button>\n    </tui-data-list>\n</tui-select>\n<tui-primitive-textfield\n    *ngIf=\"isHex; else rgb\"\n    tuiTextfieldSize=\"m\"\n    [maskito]=\"hexMask\"\n    [tuiTextfieldLabelOutside]=\"true\"\n    [value]=\"hex\"\n    (valueChange)=\"onHexChange($event)\"\n/>\n<ng-template #rgb>\n    <tui-input-number\n        tuiTextfieldSize=\"m\"\n        class=\"t-rgb\"\n        [max]=\"255\"\n        [min]=\"0\"\n        [ngModel]=\"color[0]\"\n        [ngModelOptions]=\"{standalone: true}\"\n        [tuiTextfieldLabelOutside]=\"true\"\n        (ngModelChange)=\"onRgbChange($event, color[1], color[2], color[3])\"\n    />\n    <tui-input-number\n        tuiTextfieldSize=\"m\"\n        class=\"t-rgb\"\n        [max]=\"255\"\n        [min]=\"0\"\n        [ngModel]=\"color[1]\"\n        [ngModelOptions]=\"{standalone: true}\"\n        [tuiTextfieldLabelOutside]=\"true\"\n        (ngModelChange)=\"onRgbChange(color[0], $event, color[2], color[3])\"\n    />\n    <tui-input-number\n        tuiTextfieldSize=\"m\"\n        class=\"t-rgb\"\n        [max]=\"255\"\n        [min]=\"0\"\n        [ngModel]=\"color[2]\"\n        [ngModelOptions]=\"{standalone: true}\"\n        [tuiTextfieldLabelOutside]=\"true\"\n        (ngModelChange)=\"onRgbChange(color[0], color[1], $event, color[3])\"\n    />\n</ng-template>\n<tui-input-number\n    tuiTextfieldPostfix=\"%\"\n    tuiTextfieldSize=\"m\"\n    class=\"t-opacity\"\n    [max]=\"100\"\n    [min]=\"0\"\n    [ngModel]=\"opacity\"\n    [ngModelOptions]=\"{standalone: true}\"\n    [style.flex]=\"'0 0 auto'\"\n    [tuiTextfieldLabelOutside]=\"true\"\n    (ngModelChange)=\"onRgbChange(color[0], color[1], color[2], $event / 100)\"\n/>\n", styles: [":host{display:flex}.t-select{inline-size:5.875rem}.t-opacity{inline-size:4.275rem}.t-rgb,.t-opacity{text-align:center}\n"] }]
+            args: [{ standalone: false, selector: 'tui-color-edit', changeDetection: ChangeDetectionStrategy.OnPush, template: "<tui-select\n    tuiDropdownAlign=\"left\"\n    tuiDropdownLimitWidth=\"min\"\n    tuiTextfieldSize=\"m\"\n    class=\"t-select\"\n    [ngModelOptions]=\"{standalone: true}\"\n    [style.flex]=\"'0 0 auto'\"\n    [tuiTextfieldLabelOutside]=\"true\"\n    [(ngModel)]=\"mode\"\n>\n    <tui-data-list\n        *tuiDataList\n        size=\"s\"\n    >\n        <button\n            *ngFor=\"let item of modes\"\n            tuiOption\n            type=\"button\"\n            [value]=\"item\"\n        >\n            {{ item }}\n        </button>\n    </tui-data-list>\n</tui-select>\n<tui-primitive-textfield\n    *ngIf=\"isHex; else rgb\"\n    tuiTextfieldSize=\"m\"\n    [maskito]=\"hexMask\"\n    [tuiTextfieldLabelOutside]=\"true\"\n    [value]=\"hex\"\n    (valueChange)=\"onHexChange($event)\"\n/>\n<ng-template #rgb>\n    <tui-input-number\n        tuiTextfieldSize=\"m\"\n        class=\"t-rgb\"\n        [max]=\"255\"\n        [min]=\"0\"\n        [ngModel]=\"color[0]\"\n        [ngModelOptions]=\"{standalone: true}\"\n        [tuiTextfieldLabelOutside]=\"true\"\n        (ngModelChange)=\"onRgbChange($event, color[1], color[2], color[3])\"\n    />\n    <tui-input-number\n        tuiTextfieldSize=\"m\"\n        class=\"t-rgb\"\n        [max]=\"255\"\n        [min]=\"0\"\n        [ngModel]=\"color[1]\"\n        [ngModelOptions]=\"{standalone: true}\"\n        [tuiTextfieldLabelOutside]=\"true\"\n        (ngModelChange)=\"onRgbChange(color[0], $event, color[2], color[3])\"\n    />\n    <tui-input-number\n        tuiTextfieldSize=\"m\"\n        class=\"t-rgb\"\n        [max]=\"255\"\n        [min]=\"0\"\n        [ngModel]=\"color[2]\"\n        [ngModelOptions]=\"{standalone: true}\"\n        [tuiTextfieldLabelOutside]=\"true\"\n        (ngModelChange)=\"onRgbChange(color[0], color[1], $event, color[3])\"\n    />\n</ng-template>\n<tui-input-number\n    tuiTextfieldPostfix=\"%\"\n    tuiTextfieldSize=\"m\"\n    class=\"t-opacity\"\n    [max]=\"100\"\n    [min]=\"0\"\n    [ngModel]=\"opacity\"\n    [ngModelOptions]=\"{standalone: true}\"\n    [style.flex]=\"'0 0 auto'\"\n    [tuiTextfieldLabelOutside]=\"true\"\n    (ngModelChange)=\"onRgbChange(color[0], color[1], color[2], $event / 100)\"\n/>\n", styles: [":host{display:flex}.t-select{inline-size:5.875rem}.t-opacity{inline-size:4.275rem}.t-rgb,.t-opacity{text-align:center}\n"] }]
         }], propDecorators: { color: [{
                 type: Input
             }], colorChange: [{
@@ -161,13 +159,11 @@ class TuiFlatPickerComponent {
         return this.value[1] * 100;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiFlatPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiFlatPickerComponent, selector: "tui-flat-picker", inputs: { value: "value" }, outputs: { valueChange: "valueChange" }, host: { attributes: { "ngSkipHydration": "true" } }, providers: [TuiPickerService], ngImport: i0, template: "<div\n    class=\"t-circle\"\n    [style.left.%]=\"left\"\n    [style.top.%]=\"top\"\n></div>\n", styles: [":host{position:relative;display:block}.t-circle{position:absolute;inline-size:1rem;block-size:1rem;border-radius:100%;margin:-.5rem 0 0 -.5rem;box-shadow:inset 0 0 0 1px var(--tui-base-01),0 0 0 1px var(--tui-base-03)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiFlatPickerComponent, selector: "tui-flat-picker", inputs: { value: "value" }, outputs: { valueChange: "valueChange" }, providers: [TuiPickerService], ngImport: i0, template: "<div\n    class=\"t-circle\"\n    [style.left.%]=\"left\"\n    [style.top.%]=\"top\"\n></div>\n", styles: [":host{position:relative;display:block}.t-circle{position:absolute;inline-size:1rem;block-size:1rem;border-radius:100%;margin:-.5rem 0 0 -.5rem;box-shadow:inset 0 0 0 1px var(--tui-base-01),0 0 0 1px var(--tui-base-03)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiFlatPickerComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, selector: 'tui-flat-picker', changeDetection: ChangeDetectionStrategy.OnPush, providers: [TuiPickerService], host: {
-                        ngSkipHydration: 'true',
-                    }, template: "<div\n    class=\"t-circle\"\n    [style.left.%]=\"left\"\n    [style.top.%]=\"top\"\n></div>\n", styles: [":host{position:relative;display:block}.t-circle{position:absolute;inline-size:1rem;block-size:1rem;border-radius:100%;margin:-.5rem 0 0 -.5rem;box-shadow:inset 0 0 0 1px var(--tui-base-01),0 0 0 1px var(--tui-base-03)}\n"] }]
+            args: [{ standalone: false, selector: 'tui-flat-picker', changeDetection: ChangeDetectionStrategy.OnPush, providers: [TuiPickerService], template: "<div\n    class=\"t-circle\"\n    [style.left.%]=\"left\"\n    [style.top.%]=\"top\"\n></div>\n", styles: [":host{position:relative;display:block}.t-circle{position:absolute;inline-size:1rem;block-size:1rem;border-radius:100%;margin:-.5rem 0 0 -.5rem;box-shadow:inset 0 0 0 1px var(--tui-base-01),0 0 0 1px var(--tui-base-03)}\n"] }]
         }], propDecorators: { value: [{
                 type: Input
             }], valueChange: [{
@@ -189,13 +185,11 @@ class TuiLinearPickerComponent {
         return this.value * 100;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiLinearPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiLinearPickerComponent, selector: "tui-linear-picker", inputs: { value: "value" }, outputs: { valueChange: "valueChange" }, host: { attributes: { "ngSkipHydration": "true" } }, providers: [TuiPickerService], ngImport: i0, template: "<div\n    class=\"t-circle\"\n    [style.left.%]=\"left\"\n></div>\n", styles: [":host{position:relative;display:block;block-size:1rem;box-sizing:border-box}.t-circle{position:absolute;inline-size:1rem;block-size:1rem;border-radius:100%;margin:0 -.5rem;box-shadow:inset 0 0 0 2px var(--tui-base-01),0 0 0 1px var(--tui-base-03)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiLinearPickerComponent, selector: "tui-linear-picker", inputs: { value: "value" }, outputs: { valueChange: "valueChange" }, providers: [TuiPickerService], ngImport: i0, template: "<div\n    class=\"t-circle\"\n    [style.left.%]=\"left\"\n></div>\n", styles: [":host{position:relative;display:block;block-size:1rem;box-sizing:border-box}.t-circle{position:absolute;inline-size:1rem;block-size:1rem;border-radius:100%;margin:0 -.5rem;box-shadow:inset 0 0 0 2px var(--tui-base-01),0 0 0 1px var(--tui-base-03)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiLinearPickerComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, selector: 'tui-linear-picker', changeDetection: ChangeDetectionStrategy.OnPush, providers: [TuiPickerService], host: {
-                        ngSkipHydration: 'true',
-                    }, template: "<div\n    class=\"t-circle\"\n    [style.left.%]=\"left\"\n></div>\n", styles: [":host{position:relative;display:block;block-size:1rem;box-sizing:border-box}.t-circle{position:absolute;inline-size:1rem;block-size:1rem;border-radius:100%;margin:0 -.5rem;box-shadow:inset 0 0 0 2px var(--tui-base-01),0 0 0 1px var(--tui-base-03)}\n"] }]
+            args: [{ standalone: false, selector: 'tui-linear-picker', changeDetection: ChangeDetectionStrategy.OnPush, providers: [TuiPickerService], template: "<div\n    class=\"t-circle\"\n    [style.left.%]=\"left\"\n></div>\n", styles: [":host{position:relative;display:block;block-size:1rem;box-sizing:border-box}.t-circle{position:absolute;inline-size:1rem;block-size:1rem;border-radius:100%;margin:0 -.5rem;box-shadow:inset 0 0 0 2px var(--tui-base-01),0 0 0 1px var(--tui-base-03)}\n"] }]
         }], propDecorators: { value: [{
                 type: Input
             }], valueChange: [{
@@ -248,16 +242,14 @@ class TuiColorPickerComponent {
         this.colorChange.emit([...this.currentColor, this.opacity]);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiColorPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiColorPickerComponent, selector: "tui-color-picker", inputs: { color: "color" }, outputs: { colorChange: "colorChange" }, host: { attributes: { "ngSkipHydration": "true" } }, ngImport: i0, template: "<tui-flat-picker\n    class=\"t-flat\"\n    [style.backgroundColor]=\"base\"\n    [value]=\"point\"\n    (valueChange)=\"onPointChange($event)\"\n/>\n<div class=\"t-wrapper t-wrapper_hue\">\n    <tui-linear-picker\n        class=\"t-hue\"\n        [value]=\"hue\"\n        (valueChange)=\"onHueChange($event)\"\n    />\n</div>\n<div\n    class=\"t-wrapper t-wrapper_opacity\"\n    [style.background]=\"gradient\"\n>\n    <tui-linear-picker\n        class=\"t-opacity\"\n        [value]=\"opacity\"\n        (valueChange)=\"onOpacityChange($event)\"\n    />\n</div>\n", styles: [":host{position:relative;display:block;isolation:isolate}.t-flat{block-size:14rem;background:linear-gradient(#0000,#000),linear-gradient(to right,#fff,#fff0);margin-bottom:.25rem;overflow:hidden}.t-wrapper{position:relative;margin:1rem 1.25rem;border-radius:.5rem}.t-wrapper:after{position:absolute;top:0;left:0;inline-size:100%;block-size:100%;content:\"\";box-shadow:inset 0 0 0 1px #00000014;pointer-events:none;border-radius:inherit}.t-wrapper_hue{background:red}.t-wrapper_opacity:before{position:absolute;top:0;left:0;inline-size:100%;block-size:100%;content:\"\";z-index:-1;background-image:linear-gradient(45deg,var(--tui-base-03) 25%,transparent 25%,transparent 75%,var(--tui-base-03) 75%,var(--tui-base-03)),linear-gradient(45deg,var(--tui-base-03) 25%,transparent 25%,transparent 75%,var(--tui-base-03) 75%,var(--tui-base-03));background-size:.375rem .375rem;background-position:0 0,.1875rem .1875rem;border-radius:inherit}.t-hue{background:linear-gradient(to right,red,#ff0,#0f0,#0ff,#00f,#f0f,red);border-radius:inherit;margin:0 .5rem}.t-opacity{border-radius:inherit;margin:0 .5rem}\n"], dependencies: [{ kind: "component", type: TuiFlatPickerComponent, selector: "tui-flat-picker", inputs: ["value"], outputs: ["valueChange"] }, { kind: "component", type: TuiLinearPickerComponent, selector: "tui-linear-picker", inputs: ["value"], outputs: ["valueChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiColorPickerComponent, selector: "tui-color-picker", inputs: { color: "color" }, outputs: { colorChange: "colorChange" }, ngImport: i0, template: "<tui-flat-picker\n    class=\"t-flat\"\n    [style.backgroundColor]=\"base\"\n    [value]=\"point\"\n    (valueChange)=\"onPointChange($event)\"\n/>\n<div class=\"t-wrapper t-wrapper_hue\">\n    <tui-linear-picker\n        class=\"t-hue\"\n        [value]=\"hue\"\n        (valueChange)=\"onHueChange($event)\"\n    />\n</div>\n<div\n    class=\"t-wrapper t-wrapper_opacity\"\n    [style.background]=\"gradient\"\n>\n    <tui-linear-picker\n        class=\"t-opacity\"\n        [value]=\"opacity\"\n        (valueChange)=\"onOpacityChange($event)\"\n    />\n</div>\n", styles: [":host{position:relative;display:block;isolation:isolate}.t-flat{block-size:14rem;background:linear-gradient(#0000,#000),linear-gradient(to right,#fff,#fff0);margin-bottom:.25rem;overflow:hidden}.t-wrapper{position:relative;margin:1rem 1.25rem;border-radius:.5rem}.t-wrapper:after{position:absolute;top:0;left:0;inline-size:100%;block-size:100%;content:\"\";box-shadow:inset 0 0 0 1px #00000014;pointer-events:none;border-radius:inherit}.t-wrapper_hue{background:red}.t-wrapper_opacity:before{position:absolute;top:0;left:0;inline-size:100%;block-size:100%;content:\"\";z-index:-1;background-image:linear-gradient(45deg,var(--tui-base-03) 25%,transparent 25%,transparent 75%,var(--tui-base-03) 75%,var(--tui-base-03)),linear-gradient(45deg,var(--tui-base-03) 25%,transparent 25%,transparent 75%,var(--tui-base-03) 75%,var(--tui-base-03));background-size:.375rem .375rem;background-position:0 0,.1875rem .1875rem;border-radius:inherit}.t-hue{background:linear-gradient(to right,red,#ff0,#0f0,#0ff,#00f,#f0f,red);border-radius:inherit;margin:0 .5rem}.t-opacity{border-radius:inherit;margin:0 .5rem}\n"], dependencies: [{ kind: "component", type: TuiFlatPickerComponent, selector: "tui-flat-picker", inputs: ["value"], outputs: ["valueChange"] }, { kind: "component", type: TuiLinearPickerComponent, selector: "tui-linear-picker", inputs: ["value"], outputs: ["valueChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 __decorate([
     tuiPure
 ], TuiColorPickerComponent.prototype, "getCurrentColor", null);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiColorPickerComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, selector: 'tui-color-picker', changeDetection: ChangeDetectionStrategy.OnPush, host: {
-                        ngSkipHydration: 'true',
-                    }, template: "<tui-flat-picker\n    class=\"t-flat\"\n    [style.backgroundColor]=\"base\"\n    [value]=\"point\"\n    (valueChange)=\"onPointChange($event)\"\n/>\n<div class=\"t-wrapper t-wrapper_hue\">\n    <tui-linear-picker\n        class=\"t-hue\"\n        [value]=\"hue\"\n        (valueChange)=\"onHueChange($event)\"\n    />\n</div>\n<div\n    class=\"t-wrapper t-wrapper_opacity\"\n    [style.background]=\"gradient\"\n>\n    <tui-linear-picker\n        class=\"t-opacity\"\n        [value]=\"opacity\"\n        (valueChange)=\"onOpacityChange($event)\"\n    />\n</div>\n", styles: [":host{position:relative;display:block;isolation:isolate}.t-flat{block-size:14rem;background:linear-gradient(#0000,#000),linear-gradient(to right,#fff,#fff0);margin-bottom:.25rem;overflow:hidden}.t-wrapper{position:relative;margin:1rem 1.25rem;border-radius:.5rem}.t-wrapper:after{position:absolute;top:0;left:0;inline-size:100%;block-size:100%;content:\"\";box-shadow:inset 0 0 0 1px #00000014;pointer-events:none;border-radius:inherit}.t-wrapper_hue{background:red}.t-wrapper_opacity:before{position:absolute;top:0;left:0;inline-size:100%;block-size:100%;content:\"\";z-index:-1;background-image:linear-gradient(45deg,var(--tui-base-03) 25%,transparent 25%,transparent 75%,var(--tui-base-03) 75%,var(--tui-base-03)),linear-gradient(45deg,var(--tui-base-03) 25%,transparent 25%,transparent 75%,var(--tui-base-03) 75%,var(--tui-base-03));background-size:.375rem .375rem;background-position:0 0,.1875rem .1875rem;border-radius:inherit}.t-hue{background:linear-gradient(to right,red,#ff0,#0f0,#0ff,#00f,#f0f,red);border-radius:inherit;margin:0 .5rem}.t-opacity{border-radius:inherit;margin:0 .5rem}\n"] }]
+            args: [{ standalone: false, selector: 'tui-color-picker', changeDetection: ChangeDetectionStrategy.OnPush, template: "<tui-flat-picker\n    class=\"t-flat\"\n    [style.backgroundColor]=\"base\"\n    [value]=\"point\"\n    (valueChange)=\"onPointChange($event)\"\n/>\n<div class=\"t-wrapper t-wrapper_hue\">\n    <tui-linear-picker\n        class=\"t-hue\"\n        [value]=\"hue\"\n        (valueChange)=\"onHueChange($event)\"\n    />\n</div>\n<div\n    class=\"t-wrapper t-wrapper_opacity\"\n    [style.background]=\"gradient\"\n>\n    <tui-linear-picker\n        class=\"t-opacity\"\n        [value]=\"opacity\"\n        (valueChange)=\"onOpacityChange($event)\"\n    />\n</div>\n", styles: [":host{position:relative;display:block;isolation:isolate}.t-flat{block-size:14rem;background:linear-gradient(#0000,#000),linear-gradient(to right,#fff,#fff0);margin-bottom:.25rem;overflow:hidden}.t-wrapper{position:relative;margin:1rem 1.25rem;border-radius:.5rem}.t-wrapper:after{position:absolute;top:0;left:0;inline-size:100%;block-size:100%;content:\"\";box-shadow:inset 0 0 0 1px #00000014;pointer-events:none;border-radius:inherit}.t-wrapper_hue{background:red}.t-wrapper_opacity:before{position:absolute;top:0;left:0;inline-size:100%;block-size:100%;content:\"\";z-index:-1;background-image:linear-gradient(45deg,var(--tui-base-03) 25%,transparent 25%,transparent 75%,var(--tui-base-03) 75%,var(--tui-base-03)),linear-gradient(45deg,var(--tui-base-03) 25%,transparent 25%,transparent 75%,var(--tui-base-03) 75%,var(--tui-base-03));background-size:.375rem .375rem;background-position:0 0,.1875rem .1875rem;border-radius:inherit}.t-hue{background:linear-gradient(to right,red,#ff0,#0f0,#0ff,#00f,#f0f,red);border-radius:inherit;margin:0 .5rem}.t-opacity{border-radius:inherit;margin:0 .5rem}\n"] }]
         }], propDecorators: { colorChange: [{
                 type: Output
             }], color: [{
@@ -421,12 +413,11 @@ class TuiLinearMultiPickerComponent {
         this.valueChange.emit(value);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiLinearMultiPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiLinearMultiPickerComponent, selector: "tui-linear-multi-picker", inputs: { value: "value" }, outputs: { valueChange: "valueChange", indexChange: "indexChange" }, host: { attributes: { "ngSkipHydration": "true" }, listeners: { "document:mouseup": "onMouseUp()" } }, providers: [TuiPickerService], ngImport: i0, template: "<div\n    *ngFor=\"let item of value; let index = index\"\n    class=\"t-circle\"\n    [style.left.%]=\"item * 100\"\n    (dblclick)=\"onClick(index)\"\n    (mousedown)=\"onMouseDown(index)\"\n></div>\n", styles: [":host{position:relative;display:block;block-size:1rem;box-sizing:border-box}.t-circle{position:absolute;inline-size:1rem;block-size:1rem;border-radius:100%;margin:0 -.5rem;box-shadow:inset 0 0 0 2px var(--tui-base-01),0 0 0 1px var(--tui-base-03)}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiLinearMultiPickerComponent, selector: "tui-linear-multi-picker", inputs: { value: "value" }, outputs: { valueChange: "valueChange", indexChange: "indexChange" }, host: { listeners: { "document:mouseup": "onMouseUp()" } }, providers: [TuiPickerService], ngImport: i0, template: "<div\n    *ngFor=\"let item of value; let index = index\"\n    class=\"t-circle\"\n    [style.left.%]=\"item * 100\"\n    (dblclick)=\"onClick(index)\"\n    (mousedown)=\"onMouseDown(index)\"\n></div>\n", styles: [":host{position:relative;display:block;block-size:1rem;box-sizing:border-box}.t-circle{position:absolute;inline-size:1rem;block-size:1rem;border-radius:100%;margin:0 -.5rem;box-shadow:inset 0 0 0 2px var(--tui-base-01),0 0 0 1px var(--tui-base-03)}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiLinearMultiPickerComponent, decorators: [{
             type: Component,
             args: [{ standalone: false, selector: 'tui-linear-multi-picker', changeDetection: ChangeDetectionStrategy.OnPush, providers: [TuiPickerService], host: {
-                        ngSkipHydration: 'true',
                         '(document:mouseup)': 'onMouseUp()',
                     }, template: "<div\n    *ngFor=\"let item of value; let index = index\"\n    class=\"t-circle\"\n    [style.left.%]=\"item * 100\"\n    (dblclick)=\"onClick(index)\"\n    (mousedown)=\"onMouseDown(index)\"\n></div>\n", styles: [":host{position:relative;display:block;block-size:1rem;box-sizing:border-box}.t-circle{position:absolute;inline-size:1rem;block-size:1rem;border-radius:100%;margin:0 -.5rem;box-shadow:inset 0 0 0 2px var(--tui-base-01),0 0 0 1px var(--tui-base-03)}\n"] }]
         }], propDecorators: { value: [{
@@ -444,13 +435,11 @@ class TuiPaletteComponent {
         this.originalOrder = (_a, _b) => 0;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiPaletteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiPaletteComponent, selector: "tui-palette", inputs: { colors: "colors" }, outputs: { selectedColor: "selectedColor" }, host: { attributes: { "ngSkipHydration": "true" } }, ngImport: i0, template: "<button\n    *ngFor=\"let color of colors | keyvalue: originalOrder\"\n    type=\"button\"\n    class=\"t-button\"\n    [id]=\"color.key\"\n    [style.background]=\"color.value\"\n    [tuiHint]=\"color.key\"\n    [tuiHintDescribe]=\"color.key\"\n    (click)=\"selectedColor.emit(color.value)\"\n></button>\n", styles: [":host{display:flex;flex-wrap:wrap;padding:.875rem}.t-button{-webkit-appearance:none;appearance:none;padding:0;background:none;font-size:inherit;line-height:inherit;inline-size:1.5625rem;block-size:1.5625rem;box-sizing:border-box;margin:.375rem;border-radius:var(--tui-radius-m);border:1px solid rgba(0,0,0,.08)}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.TuiHintDirective, selector: "[tuiHint]:not(ng-container):not(ng-template)", inputs: ["tuiHintContext", "tuiHintAppearance", "tuiHint"] }, { kind: "directive", type: i1$2.TuiHintDescribe, selector: "[tuiHintDescribe]", inputs: ["tuiHintDescribe"] }, { kind: "pipe", type: i1.KeyValuePipe, name: "keyvalue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiPaletteComponent, selector: "tui-palette", inputs: { colors: "colors" }, outputs: { selectedColor: "selectedColor" }, ngImport: i0, template: "<button\n    *ngFor=\"let color of colors | keyvalue: originalOrder\"\n    type=\"button\"\n    class=\"t-button\"\n    [id]=\"color.key\"\n    [style.background]=\"color.value\"\n    [tuiHint]=\"color.key\"\n    [tuiHintDescribe]=\"color.key\"\n    (click)=\"selectedColor.emit(color.value)\"\n></button>\n", styles: [":host{display:flex;flex-wrap:wrap;padding:.875rem}.t-button{-webkit-appearance:none;appearance:none;padding:0;background:none;font-size:inherit;line-height:inherit;inline-size:1.5625rem;block-size:1.5625rem;box-sizing:border-box;margin:.375rem;border-radius:var(--tui-radius-m);border:1px solid rgba(0,0,0,.08)}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.TuiHintDirective, selector: "[tuiHint]:not(ng-container):not(ng-template)", inputs: ["tuiHintContext", "tuiHintAppearance", "tuiHint"] }, { kind: "directive", type: i1$2.TuiHintDescribe, selector: "[tuiHintDescribe]", inputs: ["tuiHintDescribe"] }, { kind: "pipe", type: i1.KeyValuePipe, name: "keyvalue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiPaletteComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, selector: 'tui-palette', changeDetection: ChangeDetectionStrategy.OnPush, host: {
-                        ngSkipHydration: 'true',
-                    }, template: "<button\n    *ngFor=\"let color of colors | keyvalue: originalOrder\"\n    type=\"button\"\n    class=\"t-button\"\n    [id]=\"color.key\"\n    [style.background]=\"color.value\"\n    [tuiHint]=\"color.key\"\n    [tuiHintDescribe]=\"color.key\"\n    (click)=\"selectedColor.emit(color.value)\"\n></button>\n", styles: [":host{display:flex;flex-wrap:wrap;padding:.875rem}.t-button{-webkit-appearance:none;appearance:none;padding:0;background:none;font-size:inherit;line-height:inherit;inline-size:1.5625rem;block-size:1.5625rem;box-sizing:border-box;margin:.375rem;border-radius:var(--tui-radius-m);border:1px solid rgba(0,0,0,.08)}\n"] }]
+            args: [{ standalone: false, selector: 'tui-palette', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n    *ngFor=\"let color of colors | keyvalue: originalOrder\"\n    type=\"button\"\n    class=\"t-button\"\n    [id]=\"color.key\"\n    [style.background]=\"color.value\"\n    [tuiHint]=\"color.key\"\n    [tuiHintDescribe]=\"color.key\"\n    (click)=\"selectedColor.emit(color.value)\"\n></button>\n", styles: [":host{display:flex;flex-wrap:wrap;padding:.875rem}.t-button{-webkit-appearance:none;appearance:none;padding:0;background:none;font-size:inherit;line-height:inherit;inline-size:1.5625rem;block-size:1.5625rem;box-sizing:border-box;margin:.375rem;border-radius:var(--tui-radius-m);border:1px solid rgba(0,0,0,.08)}\n"] }]
         }], propDecorators: { colors: [{
                 type: Input
             }], selectedColor: [{
@@ -606,7 +595,7 @@ class TuiColorSelectorComponent {
         this.color = tuiParseColor(color);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiColorSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiColorSelectorComponent, selector: "tui-color-selector", inputs: { colors: "colors", colorSetter: ["color", "colorSetter"] }, outputs: { colorChange: "colorChange" }, host: { attributes: { "ngSkipHydration": "true" } }, ngImport: i0, template: "<ng-container *ngIf=\"selectorMode\">\n    <div\n        class=\"t-select\"\n        [tuiDropdown]=\"menu\"\n        [(tuiDropdownOpen)]=\"open\"\n    >\n        <button\n            appearance=\"\"\n            size=\"s\"\n            tuiButton\n            tuiChevron\n            type=\"button\"\n        >\n            {{ currentMode }}\n        </button>\n\n        <ng-template #menu>\n            <tui-data-list\n                role=\"menu\"\n                size=\"s\"\n                class=\"t-menu\"\n            >\n                <button\n                    *ngFor=\"let mode of modes\"\n                    role=\"menuitemradio\"\n                    tuiOption\n                    type=\"button\"\n                    [attr.aria-checked]=\"isModeActive(mode)\"\n                    (click)=\"onModeSelect(mode)\"\n                    (keydown.enter.prevent)=\"onModeSelect(mode)\"\n                    (keydown.space.prevent)=\"onModeSelect(mode)\"\n                >\n                    {{ mode }}\n                    <tui-icon\n                        *ngIf=\"isModeActive(mode)\"\n                        icon=\"@tui.check\"\n                        class=\"t-checkmark\"\n                    />\n                </button>\n            </tui-data-list>\n        </ng-template>\n    </div>\n    <hr class=\"t-hr\" />\n</ng-container>\n\n<ng-container *ngIf=\"isGradient\">\n    <div\n        class=\"t-wrapper\"\n        [style.background]=\"gradient\"\n    >\n        <tui-linear-multi-picker\n            class=\"t-gradient\"\n            [value]=\"stopsKeys\"\n            (indexChange)=\"onIndexChange($event)\"\n            (valueChange)=\"onStopsChange($event)\"\n        />\n    </div>\n    <div class=\"t-buttons\">\n        <!-- TODO: Change to `tuiHintDescribe` when figure tuiDriver order issue -->\n        <button\n            *ngFor=\"let button of buttons\"\n            appearance=\"\"\n            size=\"xs\"\n            tuiHintDescribe\n            tuiIconButton\n            type=\"button\"\n            class=\"t-direction\"\n            [class.t-direction_active]=\"isDirectionActive(button)\"\n            [iconStart]=\"getIcon(button)\"\n            [tuiHint]=\"button\"\n            (click)=\"onDirectionChange(button)\"\n        ></button>\n    </div>\n</ng-container>\n<tui-color-picker\n    [color]=\"currentColor\"\n    (colorChange)=\"onColorChange($event)\"\n/>\n<tui-color-edit\n    *ngIf=\"!isGradient\"\n    tuiGroup\n    class=\"t-edit\"\n    [color]=\"color\"\n    (colorChange)=\"onColorChange($event)\"\n/>\n<tui-palette\n    *ngIf=\"palette.size\"\n    class=\"t-palette\"\n    [colors]=\"palette\"\n    (selectedColor)=\"onPalettePick($event)\"\n/>\n", styles: [":host{position:relative;display:block;isolation:isolate;inline-size:22.6rem}.t-wrapper{position:relative;margin:1.25rem;border-radius:.5rem}.t-wrapper:after{position:absolute;top:0;left:0;inline-size:100%;block-size:100%;content:\"\";box-shadow:inset 0 0 0 1px #00000014;pointer-events:none;border-radius:inherit}.t-wrapper:before{position:absolute;top:0;left:0;inline-size:100%;block-size:100%;content:\"\";z-index:-1;background-image:linear-gradient(45deg,var(--tui-base-03) 25%,transparent 25%,transparent 75%,var(--tui-base-03) 75%,var(--tui-base-03)),linear-gradient(45deg,var(--tui-base-03) 25%,transparent 25%,transparent 75%,var(--tui-base-03) 75%,var(--tui-base-03));background-size:.375rem .375rem;background-position:0 0,.1875rem .1875rem;border-radius:inherit}.t-hr{block-size:1px;margin:0 0 0 -1px;border:none;background:var(--tui-base-03)}.t-gradient{margin:0 .5rem;border-radius:inherit}.t-select{margin:.75rem .5rem 0}.t-arrow{transition-property:transform;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out}.t-arrow_rotated{transform:rotate(180deg)}.t-menu{inline-size:11.25rem}.t-checkmark{margin-left:auto;inline-size:1rem;block-size:1rem}.t-buttons{display:flex;padding:0 .75rem 1.25rem;justify-content:space-between}.t-direction{color:var(--tui-text-02);margin:0 .375rem}.t-direction:hover,.t-direction_active{color:var(--tui-text-01);background:var(--tui-secondary-hover)}.t-edit{margin:1.25rem}.t-palette{box-sizing:border-box;box-shadow:inset 0 1px var(--tui-base-03)}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.TuiButton, selector: "a[tuiButton],button[tuiButton],a[tuiIconButton],button[tuiIconButton]", inputs: ["size"] }, { kind: "component", type: TuiColorPickerComponent, selector: "tui-color-picker", inputs: ["color"], outputs: ["colorChange"] }, { kind: "component", type: TuiLinearMultiPickerComponent, selector: "tui-linear-multi-picker", inputs: ["value"], outputs: ["valueChange", "indexChange"] }, { kind: "component", type: TuiColorEditComponent, selector: "tui-color-edit", inputs: ["color"], outputs: ["colorChange"] }, { kind: "directive", type: i1$1.TuiDropdownDirective, selector: "[tuiDropdown]:not(ng-container):not(ng-template)", inputs: ["tuiDropdown"], exportAs: ["tuiDropdown"] }, { kind: "directive", type: i1$1.TuiDropdownOpen, selector: "[tuiDropdown][tuiDropdownOpen],[tuiDropdown][tuiDropdownOpenChange]", inputs: ["tuiDropdownEnabled", "tuiDropdownOpen"], outputs: ["tuiDropdownOpenChange"] }, { kind: "component", type: i2$1.TuiDataListComponent, selector: "tui-data-list", inputs: ["emptyContent", "size"] }, { kind: "component", type: i2$1.TuiOption, selector: "button[tuiOption], a[tuiOption], label[tuiOption]", inputs: ["disabled", "value"] }, { kind: "directive", type: i8.TuiGroup, selector: "[tuiGroup]:not(ng-container)", inputs: ["orientation", "collapsed", "rounded", "size"] }, { kind: "component", type: TuiPaletteComponent, selector: "tui-palette", inputs: ["colors"], outputs: ["selectedColor"] }, { kind: "directive", type: i1$2.TuiHintDirective, selector: "[tuiHint]:not(ng-container):not(ng-template)", inputs: ["tuiHintContext", "tuiHintAppearance", "tuiHint"] }, { kind: "directive", type: i1$2.TuiHintDescribe, selector: "[tuiHintDescribe]", inputs: ["tuiHintDescribe"] }, { kind: "directive", type: i11.TuiChevron, selector: "[tuiChevron]", inputs: ["tuiChevron"] }, { kind: "component", type: i12.TuiIcon, selector: "tui-icon", inputs: ["icon", "background"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiColorSelectorComponent, selector: "tui-color-selector", inputs: { colors: "colors", colorSetter: ["color", "colorSetter"] }, outputs: { colorChange: "colorChange" }, ngImport: i0, template: "<ng-container *ngIf=\"selectorMode\">\n    <div\n        class=\"t-select\"\n        [tuiDropdown]=\"menu\"\n        [(tuiDropdownOpen)]=\"open\"\n    >\n        <button\n            appearance=\"\"\n            size=\"s\"\n            tuiButton\n            tuiChevron\n            type=\"button\"\n        >\n            {{ currentMode }}\n        </button>\n\n        <ng-template #menu>\n            <tui-data-list\n                role=\"menu\"\n                size=\"s\"\n                class=\"t-menu\"\n            >\n                <button\n                    *ngFor=\"let mode of modes\"\n                    role=\"menuitemradio\"\n                    tuiOption\n                    type=\"button\"\n                    [attr.aria-checked]=\"isModeActive(mode)\"\n                    (click)=\"onModeSelect(mode)\"\n                    (keydown.enter.prevent)=\"onModeSelect(mode)\"\n                    (keydown.space.prevent)=\"onModeSelect(mode)\"\n                >\n                    {{ mode }}\n                    <tui-icon\n                        *ngIf=\"isModeActive(mode)\"\n                        icon=\"@tui.check\"\n                        class=\"t-checkmark\"\n                    />\n                </button>\n            </tui-data-list>\n        </ng-template>\n    </div>\n    <hr class=\"t-hr\" />\n</ng-container>\n\n<ng-container *ngIf=\"isGradient\">\n    <div\n        class=\"t-wrapper\"\n        [style.background]=\"gradient\"\n    >\n        <tui-linear-multi-picker\n            class=\"t-gradient\"\n            [value]=\"stopsKeys\"\n            (indexChange)=\"onIndexChange($event)\"\n            (valueChange)=\"onStopsChange($event)\"\n        />\n    </div>\n    <div class=\"t-buttons\">\n        <!-- TODO: Change to `tuiHintDescribe` when figure tuiDriver order issue -->\n        <button\n            *ngFor=\"let button of buttons\"\n            appearance=\"\"\n            size=\"xs\"\n            tuiHintDescribe\n            tuiIconButton\n            type=\"button\"\n            class=\"t-direction\"\n            [class.t-direction_active]=\"isDirectionActive(button)\"\n            [iconStart]=\"getIcon(button)\"\n            [tuiHint]=\"button\"\n            (click)=\"onDirectionChange(button)\"\n        ></button>\n    </div>\n</ng-container>\n<tui-color-picker\n    [color]=\"currentColor\"\n    (colorChange)=\"onColorChange($event)\"\n/>\n<tui-color-edit\n    *ngIf=\"!isGradient\"\n    tuiGroup\n    class=\"t-edit\"\n    [color]=\"color\"\n    (colorChange)=\"onColorChange($event)\"\n/>\n<tui-palette\n    *ngIf=\"palette.size\"\n    class=\"t-palette\"\n    [colors]=\"palette\"\n    (selectedColor)=\"onPalettePick($event)\"\n/>\n", styles: [":host{position:relative;display:block;isolation:isolate;inline-size:22.6rem}:host :host-context(*:disabled){pointer-events:none}.t-wrapper{position:relative;margin:1.25rem;border-radius:.5rem}.t-wrapper:after{position:absolute;top:0;left:0;inline-size:100%;block-size:100%;content:\"\";box-shadow:inset 0 0 0 1px #00000014;pointer-events:none;border-radius:inherit}.t-wrapper:before{position:absolute;top:0;left:0;inline-size:100%;block-size:100%;content:\"\";z-index:-1;background-image:linear-gradient(45deg,var(--tui-base-03) 25%,transparent 25%,transparent 75%,var(--tui-base-03) 75%,var(--tui-base-03)),linear-gradient(45deg,var(--tui-base-03) 25%,transparent 25%,transparent 75%,var(--tui-base-03) 75%,var(--tui-base-03));background-size:.375rem .375rem;background-position:0 0,.1875rem .1875rem;border-radius:inherit}.t-hr{block-size:1px;margin:0 0 0 -1px;border:none;background:var(--tui-base-03)}.t-gradient{margin:0 .5rem;border-radius:inherit}.t-select{margin:.75rem .5rem 0}.t-arrow{transition-property:transform;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out}.t-arrow_rotated{transform:rotate(180deg)}.t-menu{inline-size:11.25rem}.t-checkmark{margin-left:auto;inline-size:1rem;block-size:1rem}.t-buttons{display:flex;padding:0 .75rem 1.25rem;justify-content:space-between}.t-direction{color:var(--tui-text-02);margin:0 .375rem}.t-direction:hover,.t-direction_active{color:var(--tui-text-01);background:var(--tui-secondary-hover)}.t-edit{margin:1.25rem}.t-palette{box-sizing:border-box;box-shadow:inset 0 1px var(--tui-base-03)}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.TuiButton, selector: "a[tuiButton],button[tuiButton],a[tuiIconButton],button[tuiIconButton]", inputs: ["size"] }, { kind: "component", type: TuiColorPickerComponent, selector: "tui-color-picker", inputs: ["color"], outputs: ["colorChange"] }, { kind: "component", type: TuiLinearMultiPickerComponent, selector: "tui-linear-multi-picker", inputs: ["value"], outputs: ["valueChange", "indexChange"] }, { kind: "component", type: TuiColorEditComponent, selector: "tui-color-edit", inputs: ["color"], outputs: ["colorChange"] }, { kind: "directive", type: i1$1.TuiDropdownDirective, selector: "[tuiDropdown]:not(ng-container):not(ng-template)", inputs: ["tuiDropdown"], exportAs: ["tuiDropdown"] }, { kind: "directive", type: i1$1.TuiDropdownOpen, selector: "[tuiDropdown][tuiDropdownOpen],[tuiDropdown][tuiDropdownOpenChange]", inputs: ["tuiDropdownEnabled", "tuiDropdownOpen"], outputs: ["tuiDropdownOpenChange"] }, { kind: "component", type: i2$1.TuiDataListComponent, selector: "tui-data-list", inputs: ["emptyContent", "size"] }, { kind: "component", type: i2$1.TuiOption, selector: "button[tuiOption], a[tuiOption], label[tuiOption]", inputs: ["disabled", "value"] }, { kind: "directive", type: i8.TuiGroup, selector: "[tuiGroup]:not(ng-container)", inputs: ["orientation", "collapsed", "rounded", "size"] }, { kind: "component", type: TuiPaletteComponent, selector: "tui-palette", inputs: ["colors"], outputs: ["selectedColor"] }, { kind: "directive", type: i1$2.TuiHintDirective, selector: "[tuiHint]:not(ng-container):not(ng-template)", inputs: ["tuiHintContext", "tuiHintAppearance", "tuiHint"] }, { kind: "directive", type: i1$2.TuiHintDescribe, selector: "[tuiHintDescribe]", inputs: ["tuiHintDescribe"] }, { kind: "directive", type: i11.TuiChevron, selector: "[tuiChevron]", inputs: ["tuiChevron"] }, { kind: "component", type: i12.TuiIcon, selector: "tui-icon", inputs: ["icon", "background"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 __decorate([
     tuiPure
@@ -616,9 +605,7 @@ __decorate([
 ], TuiColorSelectorComponent.prototype, "filterPalette", null);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiColorSelectorComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, selector: 'tui-color-selector', changeDetection: ChangeDetectionStrategy.OnPush, host: {
-                        ngSkipHydration: 'true',
-                    }, template: "<ng-container *ngIf=\"selectorMode\">\n    <div\n        class=\"t-select\"\n        [tuiDropdown]=\"menu\"\n        [(tuiDropdownOpen)]=\"open\"\n    >\n        <button\n            appearance=\"\"\n            size=\"s\"\n            tuiButton\n            tuiChevron\n            type=\"button\"\n        >\n            {{ currentMode }}\n        </button>\n\n        <ng-template #menu>\n            <tui-data-list\n                role=\"menu\"\n                size=\"s\"\n                class=\"t-menu\"\n            >\n                <button\n                    *ngFor=\"let mode of modes\"\n                    role=\"menuitemradio\"\n                    tuiOption\n                    type=\"button\"\n                    [attr.aria-checked]=\"isModeActive(mode)\"\n                    (click)=\"onModeSelect(mode)\"\n                    (keydown.enter.prevent)=\"onModeSelect(mode)\"\n                    (keydown.space.prevent)=\"onModeSelect(mode)\"\n                >\n                    {{ mode }}\n                    <tui-icon\n                        *ngIf=\"isModeActive(mode)\"\n                        icon=\"@tui.check\"\n                        class=\"t-checkmark\"\n                    />\n                </button>\n            </tui-data-list>\n        </ng-template>\n    </div>\n    <hr class=\"t-hr\" />\n</ng-container>\n\n<ng-container *ngIf=\"isGradient\">\n    <div\n        class=\"t-wrapper\"\n        [style.background]=\"gradient\"\n    >\n        <tui-linear-multi-picker\n            class=\"t-gradient\"\n            [value]=\"stopsKeys\"\n            (indexChange)=\"onIndexChange($event)\"\n            (valueChange)=\"onStopsChange($event)\"\n        />\n    </div>\n    <div class=\"t-buttons\">\n        <!-- TODO: Change to `tuiHintDescribe` when figure tuiDriver order issue -->\n        <button\n            *ngFor=\"let button of buttons\"\n            appearance=\"\"\n            size=\"xs\"\n            tuiHintDescribe\n            tuiIconButton\n            type=\"button\"\n            class=\"t-direction\"\n            [class.t-direction_active]=\"isDirectionActive(button)\"\n            [iconStart]=\"getIcon(button)\"\n            [tuiHint]=\"button\"\n            (click)=\"onDirectionChange(button)\"\n        ></button>\n    </div>\n</ng-container>\n<tui-color-picker\n    [color]=\"currentColor\"\n    (colorChange)=\"onColorChange($event)\"\n/>\n<tui-color-edit\n    *ngIf=\"!isGradient\"\n    tuiGroup\n    class=\"t-edit\"\n    [color]=\"color\"\n    (colorChange)=\"onColorChange($event)\"\n/>\n<tui-palette\n    *ngIf=\"palette.size\"\n    class=\"t-palette\"\n    [colors]=\"palette\"\n    (selectedColor)=\"onPalettePick($event)\"\n/>\n", styles: [":host{position:relative;display:block;isolation:isolate;inline-size:22.6rem}.t-wrapper{position:relative;margin:1.25rem;border-radius:.5rem}.t-wrapper:after{position:absolute;top:0;left:0;inline-size:100%;block-size:100%;content:\"\";box-shadow:inset 0 0 0 1px #00000014;pointer-events:none;border-radius:inherit}.t-wrapper:before{position:absolute;top:0;left:0;inline-size:100%;block-size:100%;content:\"\";z-index:-1;background-image:linear-gradient(45deg,var(--tui-base-03) 25%,transparent 25%,transparent 75%,var(--tui-base-03) 75%,var(--tui-base-03)),linear-gradient(45deg,var(--tui-base-03) 25%,transparent 25%,transparent 75%,var(--tui-base-03) 75%,var(--tui-base-03));background-size:.375rem .375rem;background-position:0 0,.1875rem .1875rem;border-radius:inherit}.t-hr{block-size:1px;margin:0 0 0 -1px;border:none;background:var(--tui-base-03)}.t-gradient{margin:0 .5rem;border-radius:inherit}.t-select{margin:.75rem .5rem 0}.t-arrow{transition-property:transform;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out}.t-arrow_rotated{transform:rotate(180deg)}.t-menu{inline-size:11.25rem}.t-checkmark{margin-left:auto;inline-size:1rem;block-size:1rem}.t-buttons{display:flex;padding:0 .75rem 1.25rem;justify-content:space-between}.t-direction{color:var(--tui-text-02);margin:0 .375rem}.t-direction:hover,.t-direction_active{color:var(--tui-text-01);background:var(--tui-secondary-hover)}.t-edit{margin:1.25rem}.t-palette{box-sizing:border-box;box-shadow:inset 0 1px var(--tui-base-03)}\n"] }]
+            args: [{ standalone: false, selector: 'tui-color-selector', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"selectorMode\">\n    <div\n        class=\"t-select\"\n        [tuiDropdown]=\"menu\"\n        [(tuiDropdownOpen)]=\"open\"\n    >\n        <button\n            appearance=\"\"\n            size=\"s\"\n            tuiButton\n            tuiChevron\n            type=\"button\"\n        >\n            {{ currentMode }}\n        </button>\n\n        <ng-template #menu>\n            <tui-data-list\n                role=\"menu\"\n                size=\"s\"\n                class=\"t-menu\"\n            >\n                <button\n                    *ngFor=\"let mode of modes\"\n                    role=\"menuitemradio\"\n                    tuiOption\n                    type=\"button\"\n                    [attr.aria-checked]=\"isModeActive(mode)\"\n                    (click)=\"onModeSelect(mode)\"\n                    (keydown.enter.prevent)=\"onModeSelect(mode)\"\n                    (keydown.space.prevent)=\"onModeSelect(mode)\"\n                >\n                    {{ mode }}\n                    <tui-icon\n                        *ngIf=\"isModeActive(mode)\"\n                        icon=\"@tui.check\"\n                        class=\"t-checkmark\"\n                    />\n                </button>\n            </tui-data-list>\n        </ng-template>\n    </div>\n    <hr class=\"t-hr\" />\n</ng-container>\n\n<ng-container *ngIf=\"isGradient\">\n    <div\n        class=\"t-wrapper\"\n        [style.background]=\"gradient\"\n    >\n        <tui-linear-multi-picker\n            class=\"t-gradient\"\n            [value]=\"stopsKeys\"\n            (indexChange)=\"onIndexChange($event)\"\n            (valueChange)=\"onStopsChange($event)\"\n        />\n    </div>\n    <div class=\"t-buttons\">\n        <!-- TODO: Change to `tuiHintDescribe` when figure tuiDriver order issue -->\n        <button\n            *ngFor=\"let button of buttons\"\n            appearance=\"\"\n            size=\"xs\"\n            tuiHintDescribe\n            tuiIconButton\n            type=\"button\"\n            class=\"t-direction\"\n            [class.t-direction_active]=\"isDirectionActive(button)\"\n            [iconStart]=\"getIcon(button)\"\n            [tuiHint]=\"button\"\n            (click)=\"onDirectionChange(button)\"\n        ></button>\n    </div>\n</ng-container>\n<tui-color-picker\n    [color]=\"currentColor\"\n    (colorChange)=\"onColorChange($event)\"\n/>\n<tui-color-edit\n    *ngIf=\"!isGradient\"\n    tuiGroup\n    class=\"t-edit\"\n    [color]=\"color\"\n    (colorChange)=\"onColorChange($event)\"\n/>\n<tui-palette\n    *ngIf=\"palette.size\"\n    class=\"t-palette\"\n    [colors]=\"palette\"\n    (selectedColor)=\"onPalettePick($event)\"\n/>\n", styles: [":host{position:relative;display:block;isolation:isolate;inline-size:22.6rem}:host :host-context(*:disabled){pointer-events:none}.t-wrapper{position:relative;margin:1.25rem;border-radius:.5rem}.t-wrapper:after{position:absolute;top:0;left:0;inline-size:100%;block-size:100%;content:\"\";box-shadow:inset 0 0 0 1px #00000014;pointer-events:none;border-radius:inherit}.t-wrapper:before{position:absolute;top:0;left:0;inline-size:100%;block-size:100%;content:\"\";z-index:-1;background-image:linear-gradient(45deg,var(--tui-base-03) 25%,transparent 25%,transparent 75%,var(--tui-base-03) 75%,var(--tui-base-03)),linear-gradient(45deg,var(--tui-base-03) 25%,transparent 25%,transparent 75%,var(--tui-base-03) 75%,var(--tui-base-03));background-size:.375rem .375rem;background-position:0 0,.1875rem .1875rem;border-radius:inherit}.t-hr{block-size:1px;margin:0 0 0 -1px;border:none;background:var(--tui-base-03)}.t-gradient{margin:0 .5rem;border-radius:inherit}.t-select{margin:.75rem .5rem 0}.t-arrow{transition-property:transform;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out}.t-arrow_rotated{transform:rotate(180deg)}.t-menu{inline-size:11.25rem}.t-checkmark{margin-left:auto;inline-size:1rem;block-size:1rem}.t-buttons{display:flex;padding:0 .75rem 1.25rem;justify-content:space-between}.t-direction{color:var(--tui-text-02);margin:0 .375rem}.t-direction:hover,.t-direction_active{color:var(--tui-text-01);background:var(--tui-secondary-hover)}.t-edit{margin:1.25rem}.t-palette{box-sizing:border-box;box-shadow:inset 0 1px var(--tui-base-03)}\n"] }]
         }], propDecorators: { colors: [{
                 type: Input
             }], colorChange: [{