@taiga-ui/legacy 4.94.0 → 4.96.0

package/esm2022/components/color-selector/color-selector.component.mjs

@@ -168,7 +168,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" }, 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                        class=\"t-checkmark\"\n                        [icon]=\"icons.check\"\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    orientation=\"horizontal\"\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-inline-start: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.TuiButton, selector: "a[tuiButton],button[tuiButton],a[tuiIconButton],button[tuiIconButton]", inputs: ["size"] }, { kind: "component", type: i3.TuiColorPickerComponent, selector: "tui-color-picker", inputs: ["color"], outputs: ["colorChange"] }, { kind: "component", type: i4.TuiLinearMultiPickerComponent, selector: "tui-linear-multi-picker", inputs: ["value"], outputs: ["valueChange", "indexChange"] }, { kind: "component", type: i5.TuiColorEditComponent, selector: "tui-color-edit", inputs: ["color"], outputs: ["colorChange"] }, { kind: "directive", type: i6.TuiDropdownDirective, selector: "[tuiDropdown]:not(ng-container):not(ng-template)", inputs: ["tuiDropdown"], exportAs: ["tuiDropdown"] }, { kind: "directive", type: i6.TuiDropdownOpen, selector: "[tuiDropdown][tuiDropdownOpen],[tuiDropdown][tuiDropdownOpenChange]", inputs: ["tuiDropdownEnabled", "tuiDropdownOpen"], outputs: ["tuiDropdownOpenChange"] }, { kind: "component", type: i7.TuiDataListComponent, selector: "tui-data-list", inputs: ["emptyContent", "size"] }, { kind: "component", type: i7.TuiOption, selector: "button[tuiOption]:not([new]), a[tuiOption]:not([new]), label[tuiOption]:not([new])", inputs: ["disabled", "value"] }, { kind: "directive", type: i8.TuiGroup, selector: "[tuiGroup]:not(ng-container)", inputs: ["orientation", "collapsed", "rounded", "size"] }, { kind: "component", type: i9.TuiPaletteComponent, selector: "tui-palette", inputs: ["colors"], outputs: ["selectedColor"] }, { kind: "directive", type: i10.TuiHintDirective, selector: "[tuiHint]:not(ng-container):not(ng-template)", inputs: ["tuiHintContext", "tuiHintAppearance", "tuiHint"], outputs: ["tuiHintVisible"] }, { kind: "directive", type: i10.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                        class=\"t-checkmark\"\n                        [icon]=\"icons.check\"\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    orientation=\"horizontal\"\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-inline-start: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.TuiButton, selector: "a[tuiButton],button[tuiButton],label[tuiButton],a[tuiIconButton],button[tuiIconButton],label[tuiIconButton]", inputs: ["size"] }, { kind: "component", type: i3.TuiColorPickerComponent, selector: "tui-color-picker", inputs: ["color"], outputs: ["colorChange"] }, { kind: "component", type: i4.TuiLinearMultiPickerComponent, selector: "tui-linear-multi-picker", inputs: ["value"], outputs: ["valueChange", "indexChange"] }, { kind: "component", type: i5.TuiColorEditComponent, selector: "tui-color-edit", inputs: ["color"], outputs: ["colorChange"] }, { kind: "directive", type: i6.TuiDropdownDirective, selector: "[tuiDropdown]:not(ng-container):not(ng-template)", inputs: ["tuiDropdown"], exportAs: ["tuiDropdown"] }, { kind: "directive", type: i6.TuiDropdownOpen, selector: "[tuiDropdown][tuiDropdownOpen],[tuiDropdown][tuiDropdownOpenChange]", inputs: ["tuiDropdownEnabled", "tuiDropdownOpen"], outputs: ["tuiDropdownOpenChange"] }, { kind: "component", type: i7.TuiDataListComponent, selector: "tui-data-list", inputs: ["emptyContent", "size"] }, { kind: "component", type: i7.TuiOption, selector: "button[tuiOption]:not([new]), a[tuiOption]:not([new]), label[tuiOption]:not([new])", inputs: ["disabled", "value"] }, { kind: "directive", type: i8.TuiGroup, selector: "[tuiGroup]:not(ng-container)", inputs: ["orientation", "collapsed", "rounded", "size"] }, { kind: "component", type: i9.TuiPaletteComponent, selector: "tui-palette", inputs: ["colors"], outputs: ["selectedColor"] }, { kind: "directive", type: i10.TuiHintDirective, selector: "[tuiHint]:not(ng-container):not(ng-template)", inputs: ["tuiHintContext", "tuiHintAppearance", "tuiHint"], outputs: ["tuiHintVisible"] }, { kind: "directive", type: i10.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

package/esm2022/components/input-date-range/input-date-range.component.mjs

@@ -214,7 +214,7 @@ class TuiInputDateRangeComponent extends AbstractTuiNullableControl {
             tuiDateStreamWithTransformer(TUI_DATE_RANGE_VALUE_TRANSFORMER),
             tuiAsDataListHost(TuiInputDateRangeComponent),
             TUI_MOBILE_CALENDAR_PROVIDER,
-        ], viewQueries: [{ propertyName: "textfield", first: true, predicate: TuiPrimitiveTextfieldComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div\n    tuiDropdownOpenMonitor\n    class=\"t-hosted\"\n    [tuiDropdown]=\"dropdown\"\n    [tuiDropdownEnabled]=\"interactive\"\n    [tuiDropdownOpen]=\"open && interactive\"\n    (tuiActiveZoneChange)=\"onActiveZone($event)\"\n    (tuiDropdownOpenChange)=\"onOpenChange($event)\"\n>\n    <tui-primitive-textfield\n        *tuiLet=\"dateFiller$ | async as dateFiller\"\n        automation-id=\"tui-input-date-range__textfield\"\n        tuiValueAccessor\n        class=\"t-textfield\"\n        [disabled]=\"computedDisabled\"\n        [invalid]=\"computedInvalid\"\n        [maskito]=\"computedMask\"\n        [nativeId]=\"nativeId\"\n        [pseudoActive]=\"pseudoActive\"\n        [pseudoFocus]=\"innerPseudoFocused\"\n        [pseudoHover]=\"pseudoHover\"\n        [readOnly]=\"readOnly\"\n        [tuiTextfieldFiller]=\"getComputedRangeFiller(dateFiller || '')\"\n        [tuiTextfieldIcon]=\"calendarIcon && iconContent\"\n        [value]=\"computedValue\"\n        (valueChange)=\"onValueChange($event)\"\n    >\n        <ng-content />\n        <ng-content\n            ngProjectAs=\"input\"\n            select=\"input\"\n        />\n\n        <div\n            *ngIf=\"showValueTemplate\"\n            ngProjectAs=\"tuiContent\"\n            class=\"t-value\"\n        >\n            <ng-container *polymorpheusOutlet=\"computedContent as text; context: {$implicit: value}\">\n                {{ text }}\n            </ng-container>\n        </div>\n    </tui-primitive-textfield>\n\n    <ng-template #iconContent>\n        <tui-icon\n            *polymorpheusOutlet=\"calendarIcon as src; context: {$implicit: size}\"\n            automation-id=\"tui-input-date-range__icon\"\n            tuiAppearance=\"icon\"\n            [class.t-icon_small]=\"size === 's'\"\n            [class.t-icon]=\"!computedDisabled\"\n            [icon]=\"src.toString()\"\n            (click)=\"onIconClick()\"\n        />\n    </ng-template>\n\n    <ng-template #dropdown>\n        <tui-calendar-range\n            [defaultViewedMonth]=\"defaultViewedMonth\"\n            [disabledItemHandler]=\"disabledItemHandler\"\n            [items]=\"items\"\n            [markerHandler]=\"markerHandler\"\n            [max]=\"max\"\n            [maxLength]=\"maxLength\"\n            [min]=\"min\"\n            [minLength]=\"minLength\"\n            [value]=\"value\"\n            [(item)]=\"selectedActivePeriod\"\n            (valueChange)=\"onRangeChange($event)\"\n        />\n    </ng-template>\n</div>\n", styles: [":host{display:block;border-radius:var(--tui-radius-m);text-align:start}:host._disabled,:host :host-context(*:disabled){pointer-events:none}.t-hosted{display:block;border-radius:inherit}.t-textfield{border-radius:inherit;text-align:inherit}.t-icon{pointer-events:auto}.t-icon_small{border-width:.25rem}.t-value{display:flex;inline-size:100%;align-items:center}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.MaskitoDirective, selector: "[maskito]", inputs: ["maskito", "maskitoElement"] }, { kind: "directive", type: i3.TuiLet, selector: "[tuiLet]", inputs: ["tuiLet"] }, { kind: "directive", type: i4.PolymorpheusOutlet, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }, { kind: "component", type: i5.TuiPrimitiveTextfieldComponent, selector: "tui-primitive-textfield", inputs: ["editable", "iconCleaner", "readOnly", "invalid", "disabled", "value"], outputs: ["valueChange"] }, { kind: "directive", type: i5.TuiPrimitiveTextfieldDirective, selector: "tui-primitive-textfield" }, { kind: "directive", type: i6.TuiTextfieldIconDirective, selector: "[tuiTextfieldIcon]", inputs: ["tuiTextfieldIcon"] }, { kind: "directive", type: i6.TuiTextfieldFillerDirective, selector: "[tuiTextfieldFiller]", inputs: ["tuiTextfieldFiller"] }, { kind: "component", type: i7.TuiCalendarRange, selector: "tui-calendar-range", inputs: ["disabledItemHandler", "markerHandler", "items", "listSize", "min", "max", "minLength", "maxLength", "item", "value", "defaultViewedMonth"], outputs: ["valueChange", "itemChange"] }, { kind: "directive", type: i6.TuiValueAccessorDirective, selector: "[tuiValueAccessor]" }, { kind: "directive", type: i6.TuiLegacyDropdownOpenMonitorDirective, selector: "[tuiDropdownOpenMonitor]" }, { kind: "component", type: i8.TuiIcon, selector: "tui-icon", inputs: ["icon", "background"] }, { kind: "directive", type: i9.TuiAppearance, selector: "[tuiAppearance]", inputs: ["tuiAppearance", "tuiAppearanceState", "tuiAppearanceFocus", "tuiAppearanceMode"] }, { kind: "directive", type: i10.TuiDropdownDirective, selector: "[tuiDropdown]:not(ng-container):not(ng-template)", inputs: ["tuiDropdown"], exportAs: ["tuiDropdown"] }, { kind: "directive", type: i10.TuiDropdownOpen, selector: "[tuiDropdown][tuiDropdownOpen],[tuiDropdown][tuiDropdownOpenChange]", inputs: ["tuiDropdownEnabled", "tuiDropdownOpen"], outputs: ["tuiDropdownOpenChange"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], viewQueries: [{ propertyName: "textfield", first: true, predicate: TuiPrimitiveTextfieldComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div\n    tuiDropdownOpenMonitor\n    class=\"t-hosted\"\n    [tuiDropdown]=\"dropdown\"\n    [tuiDropdownEnabled]=\"interactive\"\n    [tuiDropdownOpen]=\"open && interactive\"\n    (tuiActiveZoneChange)=\"onActiveZone($event)\"\n    (tuiDropdownOpenChange)=\"onOpenChange($event)\"\n>\n    <tui-primitive-textfield\n        *tuiLet=\"dateFiller$ | async as dateFiller\"\n        automation-id=\"tui-input-date-range__textfield\"\n        tuiValueAccessor\n        class=\"t-textfield\"\n        [disabled]=\"computedDisabled\"\n        [invalid]=\"computedInvalid\"\n        [maskito]=\"computedMask\"\n        [nativeId]=\"nativeId\"\n        [pseudoActive]=\"pseudoActive\"\n        [pseudoFocus]=\"innerPseudoFocused\"\n        [pseudoHover]=\"pseudoHover\"\n        [readOnly]=\"readOnly\"\n        [tuiTextfieldFiller]=\"getComputedRangeFiller(dateFiller || '')\"\n        [tuiTextfieldIcon]=\"calendarIcon && iconContent\"\n        [value]=\"computedValue\"\n        (valueChange)=\"onValueChange($event)\"\n    >\n        <ng-content />\n        <ng-content\n            ngProjectAs=\"input\"\n            select=\"input\"\n        />\n\n        <div\n            *ngIf=\"showValueTemplate\"\n            ngProjectAs=\"tuiContent\"\n            class=\"t-value\"\n        >\n            <ng-container *polymorpheusOutlet=\"computedContent as text; context: {$implicit: value}\">\n                {{ text }}\n            </ng-container>\n        </div>\n    </tui-primitive-textfield>\n\n    <ng-template #iconContent>\n        <tui-icon\n            *polymorpheusOutlet=\"calendarIcon as src; context: {$implicit: size}\"\n            automation-id=\"tui-input-date-range__icon\"\n            tuiAppearance=\"icon\"\n            [class.t-icon_small]=\"size === 's'\"\n            [class.t-icon]=\"!computedDisabled\"\n            [icon]=\"src.toString()\"\n            (click)=\"onIconClick()\"\n        />\n    </ng-template>\n\n    <ng-template #dropdown>\n        <tui-calendar-range\n            [defaultViewedMonth]=\"defaultViewedMonth\"\n            [disabledItemHandler]=\"disabledItemHandler\"\n            [items]=\"items\"\n            [markerHandler]=\"markerHandler\"\n            [max]=\"max\"\n            [maxLength]=\"maxLength\"\n            [min]=\"min\"\n            [minLength]=\"minLength\"\n            [value]=\"value\"\n            [(item)]=\"selectedActivePeriod\"\n            (valueChange)=\"onRangeChange($event)\"\n        />\n    </ng-template>\n</div>\n", styles: [":host{display:block;border-radius:var(--tui-radius-m);text-align:start}:host._disabled,:host :host-context(*:disabled){pointer-events:none}.t-hosted{display:block;border-radius:inherit}.t-textfield{border-radius:inherit;text-align:inherit}.t-icon{pointer-events:auto}.t-icon_small{border-width:.25rem}.t-value{display:flex;inline-size:100%;align-items:center}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.MaskitoDirective, selector: "[maskito]", inputs: ["maskito", "maskitoElement"] }, { kind: "directive", type: i3.TuiLet, selector: "[tuiLet]", inputs: ["tuiLet"] }, { kind: "directive", type: i4.PolymorpheusOutlet, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }, { kind: "component", type: i5.TuiPrimitiveTextfieldComponent, selector: "tui-primitive-textfield", inputs: ["editable", "iconCleaner", "readOnly", "invalid", "disabled", "value"], outputs: ["valueChange"] }, { kind: "directive", type: i5.TuiPrimitiveTextfieldDirective, selector: "tui-primitive-textfield" }, { kind: "directive", type: i6.TuiTextfieldIconDirective, selector: "[tuiTextfieldIcon]", inputs: ["tuiTextfieldIcon"] }, { kind: "directive", type: i6.TuiTextfieldFillerDirective, selector: "[tuiTextfieldFiller]", inputs: ["tuiTextfieldFiller"] }, { kind: "component", type: i7.TuiCalendarRange, selector: "tui-calendar-range", inputs: ["disabledItemHandler", "markerHandler", "items", "listSize", "min", "max", "minLength", "maxLength", "item", "value", "defaultViewedMonth"], outputs: ["valueChange", "itemChange", "monthChange"] }, { kind: "directive", type: i6.TuiValueAccessorDirective, selector: "[tuiValueAccessor]" }, { kind: "directive", type: i6.TuiLegacyDropdownOpenMonitorDirective, selector: "[tuiDropdownOpenMonitor]" }, { kind: "component", type: i8.TuiIcon, selector: "tui-icon", inputs: ["icon", "background"] }, { kind: "directive", type: i9.TuiAppearance, selector: "[tuiAppearance]", inputs: ["tuiAppearance", "tuiAppearanceState", "tuiAppearanceFocus", "tuiAppearanceMode"] }, { kind: "directive", type: i10.TuiDropdownDirective, selector: "[tuiDropdown]:not(ng-container):not(ng-template)", inputs: ["tuiDropdown"], exportAs: ["tuiDropdown"] }, { kind: "directive", type: i10.TuiDropdownOpen, selector: "[tuiDropdown][tuiDropdownOpen],[tuiDropdown][tuiDropdownOpenChange]", inputs: ["tuiDropdownEnabled", "tuiDropdownOpen"], outputs: ["tuiDropdownOpenChange"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 __decorate([
     tuiPure

package/esm2022/components/input-number/input-number.component.mjs

@@ -245,7 +245,7 @@ class TuiInputNumberComponent extends AbstractTuiNullableControl {
             tuiAsFocusableItemAccessor(TuiInputNumberComponent),
             tuiAsControl(TuiInputNumberComponent),
             TEXTFIELD_CONTROLLER_PROVIDER,
-        ], queries: [{ propertyName: "polymorpheusValueContent", predicate: PolymorpheusOutlet, descendants: true }], viewQueries: [{ propertyName: "textfield", first: true, predicate: TuiPrimitiveTextfieldComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<tui-primitive-textfield\n    #textfield\n    tuiTextfieldPostfix=\"\"\n    tuiTextfieldPrefix=\"\"\n    tuiValueAccessor\n    class=\"t-textfield\"\n    [disabled]=\"computedDisabled\"\n    [focusable]=\"focusable\"\n    [invalid]=\"computedInvalid\"\n    [maskito]=\"mask\"\n    [pseudoActive]=\"pseudoActive\"\n    [pseudoFocus]=\"computedFocused\"\n    [pseudoHover]=\"pseudoHover\"\n    [readOnly]=\"readOnly\"\n    [value]=\"computedValue\"\n    (focusedChange)=\"onFocused($event)\"\n    (valueChange)=\"onValueChange($event)\"\n>\n    <ng-content />\n    <ng-content\n        ngProjectAs=\"input\"\n        select=\"input\"\n    />\n    <div\n        *ngIf=\"polymorpheusValueContent.length\"\n        ngProjectAs=\"tuiContent\"\n        class=\"t-value-content\"\n    >\n        <ng-container *polymorpheusOutlet=\"valueContent as text\">\n            {{ text }}\n        </ng-container>\n    </div>\n</tui-primitive-textfield>\n\n<section\n    *ngIf=\"step\"\n    class=\"t-buttons\"\n>\n    <button\n        size=\"s\"\n        tabindex=\"-1\"\n        tuiIconButton\n        type=\"button\"\n        class=\"t-button\"\n        [appearance]=\"textfield.appearance\"\n        [disabled]=\"!canIncrement\"\n        [iconStart]=\"icons.up\"\n        (click.prevent)=\"onArrow(step)\"\n        (mousedown.prevent)=\"nativeFocusableElement?.focus()\"\n    >\n        +\n    </button>\n    <button\n        size=\"s\"\n        tabindex=\"-1\"\n        tuiIconButton\n        type=\"button\"\n        class=\"t-button\"\n        [appearance]=\"textfield.appearance\"\n        [disabled]=\"!canDecrement\"\n        [iconStart]=\"icons.down\"\n        (click.prevent)=\"onArrow(-step)\"\n        (mousedown.prevent)=\"nativeFocusableElement?.focus()\"\n    >\n        -\n    </button>\n</section>\n\n<ng-container *ngIf=\"polymorpheusValueContent.changes | async\" />\n\n<ng-template #valueContent>\n    <ng-content select=\"tuiContent\" />\n</ng-template>\n", styles: [":host{display:flex;border-radius:var(--tui-radius-m);text-align:start}:host :host-context(*:disabled){pointer-events:none}.t-textfield{flex:1;min-inline-size:0;max-inline-size:100%;border-radius:inherit;text-align:inherit}.t-textfield:not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0}.t-value-content{inline-size:100%}.t-buttons{display:flex;flex-direction:column;align-items:stretch;margin-inline-start:.125rem;border-radius:inherit}[data-size=s]+.t-buttons{flex-direction:row-reverse}[data-size=s]+.t-buttons .t-button:first-child{margin:0 0 0 .125rem;border-top-right-radius:inherit;border-bottom-right-radius:inherit}[data-size=s]+.t-buttons .t-button:last-child{border-radius:0}[data-size=m]+.t-buttons .t-button{inline-size:calc(var(--tui-height-m) * .75)}[data-size=l]+.t-buttons .t-button{inline-size:calc(var(--tui-height-l) * .75)}.t-buttons .t-button{display:flex;flex:1;block-size:auto;align-items:center;justify-content:center;border-radius:0}.t-buttons .t-button:first-child{margin-block-end:.125rem;border-top-right-radius:inherit}.t-buttons .t-button:last-child{border-bottom-right-radius:inherit}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.MaskitoDirective, selector: "[maskito]", inputs: ["maskito", "maskitoElement"] }, { kind: "component", type: i3.TuiPrimitiveTextfieldComponent, selector: "tui-primitive-textfield", inputs: ["editable", "iconCleaner", "readOnly", "invalid", "disabled", "value"], outputs: ["valueChange"] }, { kind: "directive", type: i3.TuiPrimitiveTextfieldDirective, selector: "tui-primitive-textfield" }, { kind: "directive", type: i4.TuiTextfieldPrefixDirective, selector: "[tuiTextfieldPrefix]", inputs: ["tuiTextfieldPrefix"] }, { kind: "directive", type: i4.TuiTextfieldPostfixDirective, selector: "[tuiTextfieldPostfix]", inputs: ["tuiTextfieldPostfix"] }, { kind: "directive", type: i5.PolymorpheusOutlet, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }, { kind: "directive", type: i4.TuiValueAccessorDirective, selector: "[tuiValueAccessor]" }, { kind: "directive", type: i6.TuiButton, selector: "a[tuiButton],button[tuiButton],a[tuiIconButton],button[tuiIconButton]", inputs: ["size"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], queries: [{ propertyName: "polymorpheusValueContent", predicate: PolymorpheusOutlet, descendants: true }], viewQueries: [{ propertyName: "textfield", first: true, predicate: TuiPrimitiveTextfieldComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<tui-primitive-textfield\n    #textfield\n    tuiTextfieldPostfix=\"\"\n    tuiTextfieldPrefix=\"\"\n    tuiValueAccessor\n    class=\"t-textfield\"\n    [disabled]=\"computedDisabled\"\n    [focusable]=\"focusable\"\n    [invalid]=\"computedInvalid\"\n    [maskito]=\"mask\"\n    [pseudoActive]=\"pseudoActive\"\n    [pseudoFocus]=\"computedFocused\"\n    [pseudoHover]=\"pseudoHover\"\n    [readOnly]=\"readOnly\"\n    [value]=\"computedValue\"\n    (focusedChange)=\"onFocused($event)\"\n    (valueChange)=\"onValueChange($event)\"\n>\n    <ng-content />\n    <ng-content\n        ngProjectAs=\"input\"\n        select=\"input\"\n    />\n    <div\n        *ngIf=\"polymorpheusValueContent.length\"\n        ngProjectAs=\"tuiContent\"\n        class=\"t-value-content\"\n    >\n        <ng-container *polymorpheusOutlet=\"valueContent as text\">\n            {{ text }}\n        </ng-container>\n    </div>\n</tui-primitive-textfield>\n\n<section\n    *ngIf=\"step\"\n    class=\"t-buttons\"\n>\n    <button\n        size=\"s\"\n        tabindex=\"-1\"\n        tuiIconButton\n        type=\"button\"\n        class=\"t-button\"\n        [appearance]=\"textfield.appearance\"\n        [disabled]=\"!canIncrement\"\n        [iconStart]=\"icons.up\"\n        (click.prevent)=\"onArrow(step)\"\n        (mousedown.prevent)=\"nativeFocusableElement?.focus()\"\n    >\n        +\n    </button>\n    <button\n        size=\"s\"\n        tabindex=\"-1\"\n        tuiIconButton\n        type=\"button\"\n        class=\"t-button\"\n        [appearance]=\"textfield.appearance\"\n        [disabled]=\"!canDecrement\"\n        [iconStart]=\"icons.down\"\n        (click.prevent)=\"onArrow(-step)\"\n        (mousedown.prevent)=\"nativeFocusableElement?.focus()\"\n    >\n        -\n    </button>\n</section>\n\n<ng-container *ngIf=\"polymorpheusValueContent.changes | async\" />\n\n<ng-template #valueContent>\n    <ng-content select=\"tuiContent\" />\n</ng-template>\n", styles: [":host{display:flex;border-radius:var(--tui-radius-m);text-align:start}:host :host-context(*:disabled){pointer-events:none}.t-textfield{flex:1;min-inline-size:0;max-inline-size:100%;border-radius:inherit;text-align:inherit}.t-textfield:not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0}.t-value-content{inline-size:100%}.t-buttons{display:flex;flex-direction:column;align-items:stretch;margin-inline-start:.125rem;border-radius:inherit}[data-size=s]+.t-buttons{flex-direction:row-reverse}[data-size=s]+.t-buttons .t-button:first-child{margin:0 0 0 .125rem;border-top-right-radius:inherit;border-bottom-right-radius:inherit}[data-size=s]+.t-buttons .t-button:last-child{border-radius:0}[data-size=m]+.t-buttons .t-button{inline-size:calc(var(--tui-height-m) * .75)}[data-size=l]+.t-buttons .t-button{inline-size:calc(var(--tui-height-l) * .75)}.t-buttons .t-button{display:flex;flex:1;block-size:auto;align-items:center;justify-content:center;border-radius:0}.t-buttons .t-button:first-child{margin-block-end:.125rem;border-top-right-radius:inherit}.t-buttons .t-button:last-child{border-bottom-right-radius:inherit}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.MaskitoDirective, selector: "[maskito]", inputs: ["maskito", "maskitoElement"] }, { kind: "component", type: i3.TuiPrimitiveTextfieldComponent, selector: "tui-primitive-textfield", inputs: ["editable", "iconCleaner", "readOnly", "invalid", "disabled", "value"], outputs: ["valueChange"] }, { kind: "directive", type: i3.TuiPrimitiveTextfieldDirective, selector: "tui-primitive-textfield" }, { kind: "directive", type: i4.TuiTextfieldPrefixDirective, selector: "[tuiTextfieldPrefix]", inputs: ["tuiTextfieldPrefix"] }, { kind: "directive", type: i4.TuiTextfieldPostfixDirective, selector: "[tuiTextfieldPostfix]", inputs: ["tuiTextfieldPostfix"] }, { kind: "directive", type: i5.PolymorpheusOutlet, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }, { kind: "directive", type: i4.TuiValueAccessorDirective, selector: "[tuiValueAccessor]" }, { kind: "directive", type: i6.TuiButton, selector: "a[tuiButton],button[tuiButton],label[tuiButton],a[tuiIconButton],button[tuiIconButton],label[tuiIconButton]", inputs: ["size"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 __decorate([
     tuiPure

package/esm2022/components/sheet/components/sheet-heading/sheet-heading.component.mjs

@@ -21,7 +21,7 @@ class TuiSheetHeadingComponent {
         this.el.dispatchEvent(new CustomEvent(TUI_SHEET_CLOSE, { bubbles: true }));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiSheetHeadingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiSheetHeadingComponent, selector: "[tuiSheetHeading]", ngImport: i0, template: "<button\n    appearance=\"icon\"\n    size=\"xs\"\n    tuiIconButton\n    type=\"button\"\n    class=\"t-close\"\n    [iconStart]=\"icons.close\"\n    (click)=\"onClick()\"\n>\n    {{ closeWord$ | async }}\n</button>\n<span [id]=\"autoId\">\n    <ng-content />\n</span>\n", styles: [":host{position:sticky;top:0;z-index:1;min-block-size:2rem;box-sizing:border-box;margin:-1.25rem -1rem 0;padding:1.5rem 1rem 1rem;background:var(--tui-background-elevation-1);border-radius:.75rem .75rem 0 0;font:var(--tui-font-heading-6);box-shadow:inset 0 1px #ffffff40}:host:after{content:\"\";position:absolute;top:100%;left:0;right:0;block-size:1px;background:var(--tui-border-normal);opacity:0}:host :host-context(._stuck):after{opacity:1}.t-close{display:none;float:right;margin-inline-end:-.25rem}@supports (float: inline-end){.t-close{float:inline-end}}:host-context(.t-wrapper_closeable) .t-close{display:block}\n"], dependencies: [{ kind: "directive", type: i1.TuiButton, selector: "a[tuiButton],button[tuiButton],a[tuiIconButton],button[tuiIconButton]", inputs: ["size"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiSheetHeadingComponent, selector: "[tuiSheetHeading]", ngImport: i0, template: "<button\n    appearance=\"icon\"\n    size=\"xs\"\n    tuiIconButton\n    type=\"button\"\n    class=\"t-close\"\n    [iconStart]=\"icons.close\"\n    (click)=\"onClick()\"\n>\n    {{ closeWord$ | async }}\n</button>\n<span [id]=\"autoId\">\n    <ng-content />\n</span>\n", styles: [":host{position:sticky;top:0;z-index:1;min-block-size:2rem;box-sizing:border-box;margin:-1.25rem -1rem 0;padding:1.5rem 1rem 1rem;background:var(--tui-background-elevation-1);border-radius:.75rem .75rem 0 0;font:var(--tui-font-heading-6);box-shadow:inset 0 1px #ffffff40}:host:after{content:\"\";position:absolute;top:100%;left:0;right:0;block-size:1px;background:var(--tui-border-normal);opacity:0}:host :host-context(._stuck):after{opacity:1}.t-close{display:none;float:right;margin-inline-end:-.25rem}@supports (float: inline-end){.t-close{float:inline-end}}:host-context(.t-wrapper_closeable) .t-close{display:block}\n"], dependencies: [{ kind: "directive", type: i1.TuiButton, selector: "a[tuiButton],button[tuiButton],label[tuiButton],a[tuiIconButton],button[tuiIconButton],label[tuiIconButton]", inputs: ["size"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 export { TuiSheetHeadingComponent };
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiSheetHeadingComponent, decorators: [{

package/esm2022/components/table-bar/table-bar.component.mjs

@@ -24,7 +24,7 @@ class TuiTableBarComponent {
         this.context.$implicit.complete();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiTableBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiTableBarComponent, isStandalone: true, selector: "tui-table-bar", host: { properties: { "@tuiSlideInTop": "animation", "attr.data-appearance": "context.mode" } }, ngImport: i0, template: "<div\n    automation-id=\"tui-table-bar__bar\"\n    class=\"t-container\"\n    [attr.tuiTheme]=\"getTheme(context.mode || 'onDark')\"\n    [class.t-container_adaptive]=\"context.adaptive\"\n>\n    <div class=\"t-inner\">\n        <div class=\"t-content\">\n            <ng-container *polymorpheusOutlet=\"context.content as text; context: context\">\n                {{ text }}\n            </ng-container>\n        </div>\n\n        <button\n            *ngIf=\"context.hasCloseButton\"\n            appearance=\"icon\"\n            automation-id=\"tui-table-bar__close-button\"\n            size=\"xs\"\n            tuiIconButton\n            type=\"button\"\n            class=\"t-close-button\"\n            [iconStart]=\"icons.close\"\n            (click)=\"close()\"\n        >\n            {{ closeWord$ | async }}\n        </button>\n    </div>\n</div>\n", styles: [":host{display:block;inline-size:100%;box-shadow:var(--tui-shadow-small);flex:0 0 100%}:host[data-appearance=onLight]{background:var(--tui-background-base);color:var(--tui-text-primary)}:host[data-appearance=onDark]{background:var(--tui-background-accent-opposite-pressed);color:var(--tui-background-base)}.t-wrapper{display:flex;inline-size:100%}.t-container{position:relative;margin:0 auto}@media screen and (min-width: 80em){.t-container.t-container_adaptive{inline-size:69rem}}@media screen and (max-width: 79.9625em){.t-container.t-container_adaptive{inline-size:51.5rem}}@media screen and (max-width: 47.9625em){.t-container.t-container_adaptive{inline-size:100%;padding:0 1rem;box-sizing:border-box}}@media screen and (min-width: 80em){.t-container{inline-size:69rem}}@media screen and (max-width: 79.9625em){.t-container{inline-size:51.5rem;padding:0 3rem}}.t-inner{display:flex;align-items:center;block-size:4.5rem;inline-size:100%;overflow:hidden}:host-context(tui-root._mobile) .t-inner{block-size:5.75rem}.t-close-button{margin-inline-start:1.5rem}.t-content{inline-size:100%;flex:1 1 0}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: PolymorpheusOutlet, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }, { kind: "directive", type: TuiButton, selector: "a[tuiButton],button[tuiButton],a[tuiIconButton],button[tuiIconButton]", inputs: ["size"] }], animations: [tuiSlideInTop, tuiParentAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiTableBarComponent, isStandalone: true, selector: "tui-table-bar", host: { properties: { "@tuiSlideInTop": "animation", "attr.data-appearance": "context.mode" } }, ngImport: i0, template: "<div\n    automation-id=\"tui-table-bar__bar\"\n    class=\"t-container\"\n    [attr.tuiTheme]=\"getTheme(context.mode || 'onDark')\"\n    [class.t-container_adaptive]=\"context.adaptive\"\n>\n    <div class=\"t-inner\">\n        <div class=\"t-content\">\n            <ng-container *polymorpheusOutlet=\"context.content as text; context: context\">\n                {{ text }}\n            </ng-container>\n        </div>\n\n        <button\n            *ngIf=\"context.hasCloseButton\"\n            appearance=\"icon\"\n            automation-id=\"tui-table-bar__close-button\"\n            size=\"xs\"\n            tuiIconButton\n            type=\"button\"\n            class=\"t-close-button\"\n            [iconStart]=\"icons.close\"\n            (click)=\"close()\"\n        >\n            {{ closeWord$ | async }}\n        </button>\n    </div>\n</div>\n", styles: [":host{display:block;inline-size:100%;box-shadow:var(--tui-shadow-small);flex:0 0 100%}:host[data-appearance=onLight]{background:var(--tui-background-base);color:var(--tui-text-primary)}:host[data-appearance=onDark]{background:var(--tui-background-accent-opposite-pressed);color:var(--tui-background-base)}.t-wrapper{display:flex;inline-size:100%}.t-container{position:relative;margin:0 auto}@media screen and (min-width: 80em){.t-container.t-container_adaptive{inline-size:69rem}}@media screen and (max-width: 79.9625em){.t-container.t-container_adaptive{inline-size:51.5rem}}@media screen and (max-width: 47.9625em){.t-container.t-container_adaptive{inline-size:100%;padding:0 1rem;box-sizing:border-box}}@media screen and (min-width: 80em){.t-container{inline-size:69rem}}@media screen and (max-width: 79.9625em){.t-container{inline-size:51.5rem;padding:0 3rem}}.t-inner{display:flex;align-items:center;block-size:4.5rem;inline-size:100%;overflow:hidden}:host-context(tui-root._mobile) .t-inner{block-size:5.75rem}.t-close-button{margin-inline-start:1.5rem}.t-content{inline-size:100%;flex:1 1 0}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: PolymorpheusOutlet, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }, { kind: "directive", type: TuiButton, selector: "a[tuiButton],button[tuiButton],label[tuiButton],a[tuiIconButton],button[tuiIconButton],label[tuiIconButton]", inputs: ["size"] }], animations: [tuiSlideInTop, tuiParentAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 export { TuiTableBarComponent };
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiTableBarComponent, decorators: [{
@@ -34,4 +34,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         '[attr.data-appearance]': 'context.mode',
                     }, template: "<div\n    automation-id=\"tui-table-bar__bar\"\n    class=\"t-container\"\n    [attr.tuiTheme]=\"getTheme(context.mode || 'onDark')\"\n    [class.t-container_adaptive]=\"context.adaptive\"\n>\n    <div class=\"t-inner\">\n        <div class=\"t-content\">\n            <ng-container *polymorpheusOutlet=\"context.content as text; context: context\">\n                {{ text }}\n            </ng-container>\n        </div>\n\n        <button\n            *ngIf=\"context.hasCloseButton\"\n            appearance=\"icon\"\n            automation-id=\"tui-table-bar__close-button\"\n            size=\"xs\"\n            tuiIconButton\n            type=\"button\"\n            class=\"t-close-button\"\n            [iconStart]=\"icons.close\"\n            (click)=\"close()\"\n        >\n            {{ closeWord$ | async }}\n        </button>\n    </div>\n</div>\n", styles: [":host{display:block;inline-size:100%;box-shadow:var(--tui-shadow-small);flex:0 0 100%}:host[data-appearance=onLight]{background:var(--tui-background-base);color:var(--tui-text-primary)}:host[data-appearance=onDark]{background:var(--tui-background-accent-opposite-pressed);color:var(--tui-background-base)}.t-wrapper{display:flex;inline-size:100%}.t-container{position:relative;margin:0 auto}@media screen and (min-width: 80em){.t-container.t-container_adaptive{inline-size:69rem}}@media screen and (max-width: 79.9625em){.t-container.t-container_adaptive{inline-size:51.5rem}}@media screen and (max-width: 47.9625em){.t-container.t-container_adaptive{inline-size:100%;padding:0 1rem;box-sizing:border-box}}@media screen and (min-width: 80em){.t-container{inline-size:69rem}}@media screen and (max-width: 79.9625em){.t-container{inline-size:51.5rem;padding:0 3rem}}.t-inner{display:flex;align-items:center;block-size:4.5rem;inline-size:100%;overflow:hidden}:host-context(tui-root._mobile) .t-inner{block-size:5.75rem}.t-close-button{margin-inline-start:1.5rem}.t-content{inline-size:100%;flex:1 1 0}\n"] }]
         }] });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGFibGUtYmFyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2xlZ2FjeS9jb21wb25lbnRzL3RhYmxlLWJhci90YWJsZS1iYXIuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbGVnYWN5L2NvbXBvbmVudHMvdGFibGUtYmFyL3RhYmxlLWJhci50ZW1wbGF0ZS5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBQyxTQUFTLEVBQUUsSUFBSSxFQUFDLE1BQU0saUJBQWlCLENBQUM7QUFDaEQsT0FBTyxFQUFDLHVCQUF1QixFQUFFLFNBQVMsRUFBRSxNQUFNLEVBQUMsTUFBTSxlQUFlLENBQUM7QUFFekUsT0FBTyxFQUFDLGtCQUFrQixFQUFFLGFBQWEsRUFBQyxNQUFNLDJCQUEyQixDQUFDO0FBQzVFLE9BQU8sRUFBQyxTQUFTLEVBQUMsTUFBTSxrQ0FBa0MsQ0FBQztBQUMzRCxPQUFPLEVBQ0gsb0JBQW9CLEVBQ3BCLGNBQWMsRUFDZCxnQkFBZ0IsR0FDbkIsTUFBTSx1QkFBdUIsQ0FBQztBQUMvQixPQUFPLEVBQUMscUJBQXFCLEVBQUMsTUFBTSxvQ0FBb0MsQ0FBQztBQUN6RSxPQUFPLEVBQUMsYUFBYSxFQUFFLGtCQUFrQixFQUFDLE1BQU0sd0JBQXdCLENBQUM7O0FBSXpFOzs7R0FHRztBQUNILE1BYWEsb0JBQW9CO0lBYmpDO1FBY3VCLFVBQUssR0FBRyxNQUFNLENBQUMsZ0JBQWdCLENBQUMsQ0FBQztRQUNqQyxlQUFVLEdBQUcsTUFBTSxDQUFDLGNBQWMsQ0FBQyxDQUFDO1FBQ3BDLFlBQU8sR0FBRyxhQUFhLEVBQXdDLENBQUM7UUFFaEUsY0FBUyxHQUFHLHFCQUFxQixDQUFDLE1BQU0sQ0FBQyxvQkFBb0IsQ0FBQyxDQUFDLENBQUM7S0FTdEY7SUFQYSxRQUFRLENBQUMsVUFBa0I7UUFDakMsT0FBTyxVQUFVLEtBQUssUUFBUSxDQUFDLENBQUMsQ0FBQyxNQUFNLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FBQztJQUNuRCxDQUFDO0lBRVMsS0FBSztRQUNYLElBQUksQ0FBQyxPQUFPLENBQUMsU0FBUyxDQUFDLFFBQVEsRUFBRSxDQUFDO0lBQ3RDLENBQUM7K0dBYlEsb0JBQW9CO21HQUFwQixvQkFBb0IsMEtDaENqQyxnMkJBNEJBLGlvQ0ROYyxTQUFTLDhDQUFFLElBQUksNkZBQUUsa0JBQWtCLDhIQUFFLFNBQVMsc0hBSTVDLENBQUMsYUFBYSxFQUFFLGtCQUFrQixDQUFDOztTQU10QyxvQkFBb0I7NEZBQXBCLG9CQUFvQjtrQkFiaEMsU0FBUztpQ0FDTSxJQUFJLFlBQ04sZUFBZSxXQUNoQixDQUFDLFNBQVMsRUFBRSxJQUFJLEVBQUUsa0JBQWtCLEVBQUUsU0FBUyxDQUFDLG1CQUd4Qyx1QkFBdUIsQ0FBQyxNQUFNLGNBQ25DLENBQUMsYUFBYSxFQUFFLGtCQUFrQixDQUFDLFFBQ3pDO3dCQUNGLGtCQUFrQixFQUFFLFdBQVc7d0JBQy9CLHdCQUF3QixFQUFFLGNBQWM7cUJBQzNDIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtBc3luY1BpcGUsIE5nSWZ9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XG5pbXBvcnQge0NoYW5nZURldGVjdGlvblN0cmF0ZWd5LCBDb21wb25lbnQsIGluamVjdH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQge3R5cGUgVHVpUG9wb3Zlcn0gZnJvbSAnQHRhaWdhLXVpL2Nkay9zZXJ2aWNlcyc7XG5pbXBvcnQge3R1aVBhcmVudEFuaW1hdGlvbiwgdHVpU2xpZGVJblRvcH0gZnJvbSAnQHRhaWdhLXVpL2NvcmUvYW5pbWF0aW9ucyc7XG5pbXBvcnQge1R1aUJ1dHRvbn0gZnJvbSAnQHRhaWdhLXVpL2NvcmUvY29tcG9uZW50cy9idXR0b24nO1xuaW1wb3J0IHtcbiAgICBUVUlfQU5JTUFUSU9OU19TUEVFRCxcbiAgICBUVUlfQ0xPU0VfV09SRCxcbiAgICBUVUlfQ09NTU9OX0lDT05TLFxufSBmcm9tICdAdGFpZ2EtdWkvY29yZS90b2tlbnMnO1xuaW1wb3J0IHt0dWlUb0FuaW1hdGlvbk9wdGlvbnN9IGZyb20gJ0B0YWlnYS11aS9jb3JlL3V0aWxzL21pc2NlbGxhbmVvdXMnO1xuaW1wb3J0IHtpbmplY3RDb250ZXh0LCBQb2x5bW9ycGhldXNPdXRsZXR9IGZyb20gJ0B0YWlnYS11aS9wb2x5bW9ycGhldXMnO1xuXG5pbXBvcnQge3R5cGUgVHVpVGFibGVCYXJPcHRpb25zfSBmcm9tICcuL3RhYmxlLWJhci5vcHRpb25zJztcblxuLyoqXG4gKiBAZGVwcmVjYXRlZCBkcm9wIGluIHY1LjAgdXNlIHtAbGluayBUdWlBY3Rpb25CYXJ9XG4gKiBodHRwczovL3RhaWdhLXVpLmRldi9jb21wb25lbnRzL2FjdGlvbnMtYmFyXG4gKi9cbkBDb21wb25lbnQoe1xuICAgIHN0YW5kYWxvbmU6IHRydWUsXG4gICAgc2VsZWN0b3I6ICd0dWktdGFibGUtYmFyJyxcbiAgICBpbXBvcnRzOiBbQXN5bmNQaXBlLCBOZ0lmLCBQb2x5bW9ycGhldXNPdXRsZXQsIFR1aUJ1dHRvbl0sXG4gICAgdGVtcGxhdGVVcmw6ICcuL3RhYmxlLWJhci50ZW1wbGF0ZS5odG1sJyxcbiAgICBzdHlsZVVybHM6IFsnLi90YWJsZS1iYXIuc3R5bGUubGVzcyddLFxuICAgIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxuICAgIGFuaW1hdGlvbnM6IFt0dWlTbGlkZUluVG9wLCB0dWlQYXJlbnRBbmltYXRpb25dLFxuICAgIGhvc3Q6IHtcbiAgICAgICAgJ1tAdHVpU2xpZGVJblRvcF0nOiAnYW5pbWF0aW9uJyxcbiAgICAgICAgJ1thdHRyLmRhdGEtYXBwZWFyYW5jZV0nOiAnY29udGV4dC5tb2RlJyxcbiAgICB9LFxufSlcbmV4cG9ydCBjbGFzcyBUdWlUYWJsZUJhckNvbXBvbmVudCB7XG4gICAgcHJvdGVjdGVkIHJlYWRvbmx5IGljb25zID0gaW5qZWN0KFRVSV9DT01NT05fSUNPTlMpO1xuICAgIHByb3RlY3RlZCByZWFkb25seSBjbG9zZVdvcmQkID0gaW5qZWN0KFRVSV9DTE9TRV9XT1JEKTtcbiAgICBwcm90ZWN0ZWQgcmVhZG9ubHkgY29udGV4dCA9IGluamVjdENvbnRleHQ8VHVpUG9wb3ZlcjxUdWlUYWJsZUJhck9wdGlvbnMsIHZvaWQ+PigpO1xuXG4gICAgcHJvdGVjdGVkIHJlYWRvbmx5IGFuaW1hdGlvbiA9IHR1aVRvQW5pbWF0aW9uT3B0aW9ucyhpbmplY3QoVFVJX0FOSU1BVElPTlNfU1BFRUQpKTtcblxuICAgIHByb3RlY3RlZCBnZXRUaGVtZShhcHBlYXJhbmNlOiBzdHJpbmcpOiBzdHJpbmcgfCBudWxsIHtcbiAgICAgICAgcmV0dXJuIGFwcGVhcmFuY2UgPT09ICdvbkRhcmsnID8gJ2RhcmsnIDogbnVsbDtcbiAgICB9XG5cbiAgICBwcm90ZWN0ZWQgY2xvc2UoKTogdm9pZCB7XG4gICAgICAgIHRoaXMuY29udGV4dC4kaW1wbGljaXQuY29tcGxldGUoKTtcbiAgICB9XG59XG4iLCI8ZGl2XG4gICAgYXV0b21hdGlvbi1pZD1cInR1aS10YWJsZS1iYXJfX2JhclwiXG4gICAgY2xhc3M9XCJ0LWNvbnRhaW5lclwiXG4gICAgW2F0dHIudHVpVGhlbWVdPVwiZ2V0VGhlbWUoY29udGV4dC5tb2RlIHx8ICdvbkRhcmsnKVwiXG4gICAgW2NsYXNzLnQtY29udGFpbmVyX2FkYXB0aXZlXT1cImNvbnRleHQuYWRhcHRpdmVcIlxuPlxuICAgIDxkaXYgY2xhc3M9XCJ0LWlubmVyXCI+XG4gICAgICAgIDxkaXYgY2xhc3M9XCJ0LWNvbnRlbnRcIj5cbiAgICAgICAgICAgIDxuZy1jb250YWluZXIgKnBvbHltb3JwaGV1c091dGxldD1cImNvbnRleHQuY29udGVudCBhcyB0ZXh0OyBjb250ZXh0OiBjb250ZXh0XCI+XG4gICAgICAgICAgICAgICAge3sgdGV4dCB9fVxuICAgICAgICAgICAgPC9uZy1jb250YWluZXI+XG4gICAgICAgIDwvZGl2PlxuXG4gICAgICAgIDxidXR0b25cbiAgICAgICAgICAgICpuZ0lmPVwiY29udGV4dC5oYXNDbG9zZUJ1dHRvblwiXG4gICAgICAgICAgICBhcHBlYXJhbmNlPVwiaWNvblwiXG4gICAgICAgICAgICBhdXRvbWF0aW9uLWlkPVwidHVpLXRhYmxlLWJhcl9fY2xvc2UtYnV0dG9uXCJcbiAgICAgICAgICAgIHNpemU9XCJ4c1wiXG4gICAgICAgICAgICB0dWlJY29uQnV0dG9uXG4gICAgICAgICAgICB0eXBlPVwiYnV0dG9uXCJcbiAgICAgICAgICAgIGNsYXNzPVwidC1jbG9zZS1idXR0b25cIlxuICAgICAgICAgICAgW2ljb25TdGFydF09XCJpY29ucy5jbG9zZVwiXG4gICAgICAgICAgICAoY2xpY2spPVwiY2xvc2UoKVwiXG4gICAgICAgID5cbiAgICAgICAgICAgIHt7IGNsb3NlV29yZCQgfCBhc3luYyB9fVxuICAgICAgICA8L2J1dHRvbj5cbiAgICA8L2Rpdj5cbjwvZGl2PlxuIl19
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGFibGUtYmFyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2xlZ2FjeS9jb21wb25lbnRzL3RhYmxlLWJhci90YWJsZS1iYXIuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbGVnYWN5L2NvbXBvbmVudHMvdGFibGUtYmFyL3RhYmxlLWJhci50ZW1wbGF0ZS5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBQyxTQUFTLEVBQUUsSUFBSSxFQUFDLE1BQU0saUJBQWlCLENBQUM7QUFDaEQsT0FBTyxFQUFDLHVCQUF1QixFQUFFLFNBQVMsRUFBRSxNQUFNLEVBQUMsTUFBTSxlQUFlLENBQUM7QUFFekUsT0FBTyxFQUFDLGtCQUFrQixFQUFFLGFBQWEsRUFBQyxNQUFNLDJCQUEyQixDQUFDO0FBQzVFLE9BQU8sRUFBQyxTQUFTLEVBQUMsTUFBTSxrQ0FBa0MsQ0FBQztBQUMzRCxPQUFPLEVBQ0gsb0JBQW9CLEVBQ3BCLGNBQWMsRUFDZCxnQkFBZ0IsR0FDbkIsTUFBTSx1QkFBdUIsQ0FBQztBQUMvQixPQUFPLEVBQUMscUJBQXFCLEVBQUMsTUFBTSxvQ0FBb0MsQ0FBQztBQUN6RSxPQUFPLEVBQUMsYUFBYSxFQUFFLGtCQUFrQixFQUFDLE1BQU0sd0JBQXdCLENBQUM7O0FBSXpFOzs7R0FHRztBQUNILE1BYWEsb0JBQW9CO0lBYmpDO1FBY3VCLFVBQUssR0FBRyxNQUFNLENBQUMsZ0JBQWdCLENBQUMsQ0FBQztRQUNqQyxlQUFVLEdBQUcsTUFBTSxDQUFDLGNBQWMsQ0FBQyxDQUFDO1FBQ3BDLFlBQU8sR0FBRyxhQUFhLEVBQXdDLENBQUM7UUFFaEUsY0FBUyxHQUFHLHFCQUFxQixDQUFDLE1BQU0sQ0FBQyxvQkFBb0IsQ0FBQyxDQUFDLENBQUM7S0FTdEY7SUFQYSxRQUFRLENBQUMsVUFBa0I7UUFDakMsT0FBTyxVQUFVLEtBQUssUUFBUSxDQUFDLENBQUMsQ0FBQyxNQUFNLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FBQztJQUNuRCxDQUFDO0lBRVMsS0FBSztRQUNYLElBQUksQ0FBQyxPQUFPLENBQUMsU0FBUyxDQUFDLFFBQVEsRUFBRSxDQUFDO0lBQ3RDLENBQUM7K0dBYlEsb0JBQW9CO21HQUFwQixvQkFBb0IsMEtDaENqQyxnMkJBNEJBLGlvQ0ROYyxTQUFTLDhDQUFFLElBQUksNkZBQUUsa0JBQWtCLDhIQUFFLFNBQVMsNEpBSTVDLENBQUMsYUFBYSxFQUFFLGtCQUFrQixDQUFDOztTQU10QyxvQkFBb0I7NEZBQXBCLG9CQUFvQjtrQkFiaEMsU0FBUztpQ0FDTSxJQUFJLFlBQ04sZUFBZSxXQUNoQixDQUFDLFNBQVMsRUFBRSxJQUFJLEVBQUUsa0JBQWtCLEVBQUUsU0FBUyxDQUFDLG1CQUd4Qyx1QkFBdUIsQ0FBQyxNQUFNLGNBQ25DLENBQUMsYUFBYSxFQUFFLGtCQUFrQixDQUFDLFFBQ3pDO3dCQUNGLGtCQUFrQixFQUFFLFdBQVc7d0JBQy9CLHdCQUF3QixFQUFFLGNBQWM7cUJBQzNDIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtBc3luY1BpcGUsIE5nSWZ9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XG5pbXBvcnQge0NoYW5nZURldGVjdGlvblN0cmF0ZWd5LCBDb21wb25lbnQsIGluamVjdH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQge3R5cGUgVHVpUG9wb3Zlcn0gZnJvbSAnQHRhaWdhLXVpL2Nkay9zZXJ2aWNlcyc7XG5pbXBvcnQge3R1aVBhcmVudEFuaW1hdGlvbiwgdHVpU2xpZGVJblRvcH0gZnJvbSAnQHRhaWdhLXVpL2NvcmUvYW5pbWF0aW9ucyc7XG5pbXBvcnQge1R1aUJ1dHRvbn0gZnJvbSAnQHRhaWdhLXVpL2NvcmUvY29tcG9uZW50cy9idXR0b24nO1xuaW1wb3J0IHtcbiAgICBUVUlfQU5JTUFUSU9OU19TUEVFRCxcbiAgICBUVUlfQ0xPU0VfV09SRCxcbiAgICBUVUlfQ09NTU9OX0lDT05TLFxufSBmcm9tICdAdGFpZ2EtdWkvY29yZS90b2tlbnMnO1xuaW1wb3J0IHt0dWlUb0FuaW1hdGlvbk9wdGlvbnN9IGZyb20gJ0B0YWlnYS11aS9jb3JlL3V0aWxzL21pc2NlbGxhbmVvdXMnO1xuaW1wb3J0IHtpbmplY3RDb250ZXh0LCBQb2x5bW9ycGhldXNPdXRsZXR9IGZyb20gJ0B0YWlnYS11aS9wb2x5bW9ycGhldXMnO1xuXG5pbXBvcnQge3R5cGUgVHVpVGFibGVCYXJPcHRpb25zfSBmcm9tICcuL3RhYmxlLWJhci5vcHRpb25zJztcblxuLyoqXG4gKiBAZGVwcmVjYXRlZCBkcm9wIGluIHY1LjAgdXNlIHtAbGluayBUdWlBY3Rpb25CYXJ9XG4gKiBodHRwczovL3RhaWdhLXVpLmRldi9jb21wb25lbnRzL2FjdGlvbnMtYmFyXG4gKi9cbkBDb21wb25lbnQoe1xuICAgIHN0YW5kYWxvbmU6IHRydWUsXG4gICAgc2VsZWN0b3I6ICd0dWktdGFibGUtYmFyJyxcbiAgICBpbXBvcnRzOiBbQXN5bmNQaXBlLCBOZ0lmLCBQb2x5bW9ycGhldXNPdXRsZXQsIFR1aUJ1dHRvbl0sXG4gICAgdGVtcGxhdGVVcmw6ICcuL3RhYmxlLWJhci50ZW1wbGF0ZS5odG1sJyxcbiAgICBzdHlsZVVybHM6IFsnLi90YWJsZS1iYXIuc3R5bGUubGVzcyddLFxuICAgIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxuICAgIGFuaW1hdGlvbnM6IFt0dWlTbGlkZUluVG9wLCB0dWlQYXJlbnRBbmltYXRpb25dLFxuICAgIGhvc3Q6IHtcbiAgICAgICAgJ1tAdHVpU2xpZGVJblRvcF0nOiAnYW5pbWF0aW9uJyxcbiAgICAgICAgJ1thdHRyLmRhdGEtYXBwZWFyYW5jZV0nOiAnY29udGV4dC5tb2RlJyxcbiAgICB9LFxufSlcbmV4cG9ydCBjbGFzcyBUdWlUYWJsZUJhckNvbXBvbmVudCB7XG4gICAgcHJvdGVjdGVkIHJlYWRvbmx5IGljb25zID0gaW5qZWN0KFRVSV9DT01NT05fSUNPTlMpO1xuICAgIHByb3RlY3RlZCByZWFkb25seSBjbG9zZVdvcmQkID0gaW5qZWN0KFRVSV9DTE9TRV9XT1JEKTtcbiAgICBwcm90ZWN0ZWQgcmVhZG9ubHkgY29udGV4dCA9IGluamVjdENvbnRleHQ8VHVpUG9wb3ZlcjxUdWlUYWJsZUJhck9wdGlvbnMsIHZvaWQ+PigpO1xuXG4gICAgcHJvdGVjdGVkIHJlYWRvbmx5IGFuaW1hdGlvbiA9IHR1aVRvQW5pbWF0aW9uT3B0aW9ucyhpbmplY3QoVFVJX0FOSU1BVElPTlNfU1BFRUQpKTtcblxuICAgIHByb3RlY3RlZCBnZXRUaGVtZShhcHBlYXJhbmNlOiBzdHJpbmcpOiBzdHJpbmcgfCBudWxsIHtcbiAgICAgICAgcmV0dXJuIGFwcGVhcmFuY2UgPT09ICdvbkRhcmsnID8gJ2RhcmsnIDogbnVsbDtcbiAgICB9XG5cbiAgICBwcm90ZWN0ZWQgY2xvc2UoKTogdm9pZCB7XG4gICAgICAgIHRoaXMuY29udGV4dC4kaW1wbGljaXQuY29tcGxldGUoKTtcbiAgICB9XG59XG4iLCI8ZGl2XG4gICAgYXV0b21hdGlvbi1pZD1cInR1aS10YWJsZS1iYXJfX2JhclwiXG4gICAgY2xhc3M9XCJ0LWNvbnRhaW5lclwiXG4gICAgW2F0dHIudHVpVGhlbWVdPVwiZ2V0VGhlbWUoY29udGV4dC5tb2RlIHx8ICdvbkRhcmsnKVwiXG4gICAgW2NsYXNzLnQtY29udGFpbmVyX2FkYXB0aXZlXT1cImNvbnRleHQuYWRhcHRpdmVcIlxuPlxuICAgIDxkaXYgY2xhc3M9XCJ0LWlubmVyXCI+XG4gICAgICAgIDxkaXYgY2xhc3M9XCJ0LWNvbnRlbnRcIj5cbiAgICAgICAgICAgIDxuZy1jb250YWluZXIgKnBvbHltb3JwaGV1c091dGxldD1cImNvbnRleHQuY29udGVudCBhcyB0ZXh0OyBjb250ZXh0OiBjb250ZXh0XCI+XG4gICAgICAgICAgICAgICAge3sgdGV4dCB9fVxuICAgICAgICAgICAgPC9uZy1jb250YWluZXI+XG4gICAgICAgIDwvZGl2PlxuXG4gICAgICAgIDxidXR0b25cbiAgICAgICAgICAgICpuZ0lmPVwiY29udGV4dC5oYXNDbG9zZUJ1dHRvblwiXG4gICAgICAgICAgICBhcHBlYXJhbmNlPVwiaWNvblwiXG4gICAgICAgICAgICBhdXRvbWF0aW9uLWlkPVwidHVpLXRhYmxlLWJhcl9fY2xvc2UtYnV0dG9uXCJcbiAgICAgICAgICAgIHNpemU9XCJ4c1wiXG4gICAgICAgICAgICB0dWlJY29uQnV0dG9uXG4gICAgICAgICAgICB0eXBlPVwiYnV0dG9uXCJcbiAgICAgICAgICAgIGNsYXNzPVwidC1jbG9zZS1idXR0b25cIlxuICAgICAgICAgICAgW2ljb25TdGFydF09XCJpY29ucy5jbG9zZVwiXG4gICAgICAgICAgICAoY2xpY2spPVwiY2xvc2UoKVwiXG4gICAgICAgID5cbiAgICAgICAgICAgIHt7IGNsb3NlV29yZCQgfCBhc3luYyB9fVxuICAgICAgICA8L2J1dHRvbj5cbiAgICA8L2Rpdj5cbjwvZGl2PlxuIl19

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

@@ -618,7 +618,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" }, 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                        class=\"t-checkmark\"\n                        [icon]=\"icons.check\"\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    orientation=\"horizontal\"\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-inline-start: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]:not([new]), a[tuiOption]:not([new]), label[tuiOption]:not([new])", 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"], outputs: ["tuiHintVisible"] }, { 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                        class=\"t-checkmark\"\n                        [icon]=\"icons.check\"\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    orientation=\"horizontal\"\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-inline-start: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],label[tuiButton],a[tuiIconButton],button[tuiIconButton],label[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]:not([new]), a[tuiOption]:not([new]), label[tuiOption]:not([new])", 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"], outputs: ["tuiHintVisible"] }, { 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