@taiga-ui/legacy 4.102.0 → 4.103.0

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

@@ -91,7 +91,7 @@ class TuiInputMonthRangeComponent extends AbstractTuiNullableControl {
             tuiAsControl(TuiInputMonthRangeComponent),
             TUI_MONTH_FORMATTER_PROVIDER,
             TuiMonthPipe,
-        ], 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        class=\"t-textfield\"\n        [disabled]=\"computedDisabled\"\n        [editable]=\"false\"\n        [invalid]=\"computedInvalid\"\n        [nativeId]=\"nativeId\"\n        [pseudoFocus]=\"pseudoFocus\"\n        [pseudoHover]=\"pseudoHover\"\n        [readOnly]=\"readOnly\"\n        [tuiTextfieldIcon]=\"calendarIcon\"\n        [value]=\"\n            value\n                ? computeValue(value.from | tuiMapper: formatter | async, value.to | tuiMapper: formatter | async)\n                : ''\n        \"\n        (valueChange)=\"onValueChange($event)\"\n    >\n        <ng-content />\n        <ng-content\n            ngProjectAs=\"input\"\n            select=\"input\"\n        />\n    </tui-primitive-textfield>\n\n    <ng-template #dropdown>\n        <tui-calendar-month\n            [disabledItemHandler]=\"disabledItemHandler\"\n            [max]=\"max\"\n            [maxLength]=\"maxLength\"\n            [min]=\"min\"\n            [minLength]=\"minLength\"\n            [value]=\"value\"\n            [year]=\"computedDefaultActiveYear\"\n            (monthClick)=\"onMonthClick($event)\"\n            (mousedown.prevent.zoneless)=\"(0)\"\n        />\n    </ng-template>\n</div>\n", styles: [":host{display:block;border-radius:var(--tui-radius-m);text-align:start}:host :host-context(*:disabled){pointer-events:none}.t-hosted{display:block;border-radius:inherit}.t-textfield{border-radius:inherit;text-align:inherit}\n"], dependencies: [{ kind: "component", type: i1.TuiCalendarMonth, selector: "tui-calendar-month", inputs: ["year", "disabledItemHandler", "minLength", "maxLength", "min", "max", "value"], outputs: ["monthClick", "hoveredItemChange", "yearChange"] }, { kind: "component", type: i2.TuiPrimitiveTextfieldComponent, selector: "tui-primitive-textfield", inputs: ["editable", "iconCleaner", "readOnly", "invalid", "disabled", "value"], outputs: ["valueChange"] }, { kind: "directive", type: i2.TuiPrimitiveTextfieldDirective, selector: "tui-primitive-textfield" }, { kind: "directive", type: i3.TuiTextfieldIconDirective, selector: "[tuiTextfieldIcon]", inputs: ["tuiTextfieldIcon"] }, { kind: "directive", type: i3.TuiLegacyDropdownOpenMonitorDirective, selector: "[tuiDropdownOpenMonitor]" }, { kind: "directive", type: i4.TuiDropdownDirective, selector: "[tuiDropdown]:not(ng-container):not(ng-template)", inputs: ["tuiDropdown"], exportAs: ["tuiDropdown"] }, { kind: "directive", type: i4.TuiDropdownOpen, selector: "[tuiDropdown][tuiDropdownOpen],[tuiDropdown][tuiDropdownOpenChange]", inputs: ["tuiDropdownEnabled", "tuiDropdownOpen"], outputs: ["tuiDropdownOpenChange"] }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.TuiMapperPipe, name: "tuiMapper" }], 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        class=\"t-textfield\"\n        [disabled]=\"computedDisabled\"\n        [editable]=\"false\"\n        [invalid]=\"computedInvalid\"\n        [nativeId]=\"nativeId\"\n        [pseudoFocus]=\"pseudoFocus\"\n        [pseudoHover]=\"pseudoHover\"\n        [readOnly]=\"readOnly\"\n        [tuiTextfieldIcon]=\"calendarIcon\"\n        [value]=\"\n            value\n                ? computeValue(value.from | tuiMapper: formatter | async, value.to | tuiMapper: formatter | async)\n                : ''\n        \"\n        (valueChange)=\"onValueChange($event)\"\n    >\n        <ng-content />\n        <ng-content\n            ngProjectAs=\"input\"\n            select=\"input\"\n        />\n    </tui-primitive-textfield>\n\n    <ng-template #dropdown>\n        <tui-calendar-month\n            [disabledItemHandler]=\"disabledItemHandler\"\n            [max]=\"max\"\n            [maxLength]=\"maxLength\"\n            [min]=\"min\"\n            [minLength]=\"minLength\"\n            [value]=\"value\"\n            [year]=\"computedDefaultActiveYear\"\n            (monthClick)=\"onMonthClick($event)\"\n            (mousedown.prevent.zoneless)=\"(0)\"\n        />\n    </ng-template>\n</div>\n", styles: [":host{display:block;border-radius:var(--tui-radius-m);text-align:start}:host[data-size=l]{border-radius:var(--tui-radius-l)}:host :host-context(*:disabled){pointer-events:none}.t-hosted{display:block;border-radius:inherit}.t-textfield{border-radius:inherit;text-align:inherit}\n"], dependencies: [{ kind: "component", type: i1.TuiCalendarMonth, selector: "tui-calendar-month", inputs: ["year", "disabledItemHandler", "minLength", "maxLength", "min", "max", "value"], outputs: ["monthClick", "hoveredItemChange", "yearChange"] }, { kind: "component", type: i2.TuiPrimitiveTextfieldComponent, selector: "tui-primitive-textfield", inputs: ["editable", "iconCleaner", "readOnly", "invalid", "disabled", "value"], outputs: ["valueChange"] }, { kind: "directive", type: i2.TuiPrimitiveTextfieldDirective, selector: "tui-primitive-textfield" }, { kind: "directive", type: i3.TuiTextfieldIconDirective, selector: "[tuiTextfieldIcon]", inputs: ["tuiTextfieldIcon"] }, { kind: "directive", type: i3.TuiLegacyDropdownOpenMonitorDirective, selector: "[tuiDropdownOpenMonitor]" }, { kind: "directive", type: i4.TuiDropdownDirective, selector: "[tuiDropdown]:not(ng-container):not(ng-template)", inputs: ["tuiDropdown"], exportAs: ["tuiDropdown"] }, { kind: "directive", type: i4.TuiDropdownOpen, selector: "[tuiDropdown][tuiDropdownOpen],[tuiDropdown][tuiDropdownOpenChange]", inputs: ["tuiDropdownEnabled", "tuiDropdownOpen"], outputs: ["tuiDropdownOpenChange"] }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.TuiMapperPipe, name: "tuiMapper" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 export { TuiInputMonthRangeComponent };
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiInputMonthRangeComponent, decorators: [{
@@ -103,7 +103,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         TuiMonthPipe,
                     ], host: {
                         '[attr.data-size]': 'size',
-                    }, 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        class=\"t-textfield\"\n        [disabled]=\"computedDisabled\"\n        [editable]=\"false\"\n        [invalid]=\"computedInvalid\"\n        [nativeId]=\"nativeId\"\n        [pseudoFocus]=\"pseudoFocus\"\n        [pseudoHover]=\"pseudoHover\"\n        [readOnly]=\"readOnly\"\n        [tuiTextfieldIcon]=\"calendarIcon\"\n        [value]=\"\n            value\n                ? computeValue(value.from | tuiMapper: formatter | async, value.to | tuiMapper: formatter | async)\n                : ''\n        \"\n        (valueChange)=\"onValueChange($event)\"\n    >\n        <ng-content />\n        <ng-content\n            ngProjectAs=\"input\"\n            select=\"input\"\n        />\n    </tui-primitive-textfield>\n\n    <ng-template #dropdown>\n        <tui-calendar-month\n            [disabledItemHandler]=\"disabledItemHandler\"\n            [max]=\"max\"\n            [maxLength]=\"maxLength\"\n            [min]=\"min\"\n            [minLength]=\"minLength\"\n            [value]=\"value\"\n            [year]=\"computedDefaultActiveYear\"\n            (monthClick)=\"onMonthClick($event)\"\n            (mousedown.prevent.zoneless)=\"(0)\"\n        />\n    </ng-template>\n</div>\n", styles: [":host{display:block;border-radius:var(--tui-radius-m);text-align:start}:host :host-context(*:disabled){pointer-events:none}.t-hosted{display:block;border-radius:inherit}.t-textfield{border-radius:inherit;text-align:inherit}\n"] }]
+                    }, 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        class=\"t-textfield\"\n        [disabled]=\"computedDisabled\"\n        [editable]=\"false\"\n        [invalid]=\"computedInvalid\"\n        [nativeId]=\"nativeId\"\n        [pseudoFocus]=\"pseudoFocus\"\n        [pseudoHover]=\"pseudoHover\"\n        [readOnly]=\"readOnly\"\n        [tuiTextfieldIcon]=\"calendarIcon\"\n        [value]=\"\n            value\n                ? computeValue(value.from | tuiMapper: formatter | async, value.to | tuiMapper: formatter | async)\n                : ''\n        \"\n        (valueChange)=\"onValueChange($event)\"\n    >\n        <ng-content />\n        <ng-content\n            ngProjectAs=\"input\"\n            select=\"input\"\n        />\n    </tui-primitive-textfield>\n\n    <ng-template #dropdown>\n        <tui-calendar-month\n            [disabledItemHandler]=\"disabledItemHandler\"\n            [max]=\"max\"\n            [maxLength]=\"maxLength\"\n            [min]=\"min\"\n            [minLength]=\"minLength\"\n            [value]=\"value\"\n            [year]=\"computedDefaultActiveYear\"\n            (monthClick)=\"onMonthClick($event)\"\n            (mousedown.prevent.zoneless)=\"(0)\"\n        />\n    </ng-template>\n</div>\n", styles: [":host{display:block;border-radius:var(--tui-radius-m);text-align:start}:host[data-size=l]{border-radius:var(--tui-radius-l)}:host :host-context(*:disabled){pointer-events:none}.t-hosted{display:block;border-radius:inherit}.t-textfield{border-radius:inherit;text-align:inherit}\n"] }]
         }], propDecorators: { textfield: [{
                 type: ViewChild,
                 args: [TuiPrimitiveTextfieldComponent]

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],label[tuiButton],a[tuiIconButton],button[tuiIconButton],label[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[data-size=l]{border-radius:var(--tui-radius-l)}: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
@@ -267,7 +267,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         '[attr.data-size]': 'size',
                         '(keydown.arrowDown)': 'onArrow(-step)',
                         '(keydown.arrowUp)': 'onArrow(step)',
-                    }, 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"] }]
+                    }, 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[data-size=l]{border-radius:var(--tui-radius-l)}: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"] }]
         }], propDecorators: { textfield: [{
                 type: ViewChild,
                 args: [TuiPrimitiveTextfieldComponent]

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

@@ -62,7 +62,7 @@ class TuiInputPasswordComponent extends AbstractTuiControl {
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiInputPasswordComponent, selector: "tui-input-password", host: { properties: { "attr.data-size": "size" } }, providers: [
             tuiAsFocusableItemAccessor(TuiInputPasswordComponent),
             tuiAsControl(TuiInputPasswordComponent),
-        ], viewQueries: [{ propertyName: "textfield", first: true, predicate: TuiPrimitiveTextfieldComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<tui-primitive-textfield\n    class=\"t-textfield\"\n    [disabled]=\"computedDisabled\"\n    [focusable]=\"focusable\"\n    [invalid]=\"computedInvalid\"\n    [nativeId]=\"nativeId\"\n    [pseudoActive]=\"pseudoActive\"\n    [pseudoFocus]=\"pseudoFocus\"\n    [pseudoHover]=\"pseudoHover\"\n    [readOnly]=\"readOnly\"\n    [tuiTextfieldIcon]=\"!computedDisabled ? iconContent : ''\"\n    [(value)]=\"value\"\n    (focusedChange)=\"onFocused($event)\"\n>\n    <ng-content />\n    <ng-content\n        ngProjectAs=\"input\"\n        select=\"input\"\n    />\n</tui-primitive-textfield>\n\n<ng-template\n    #iconContent=\"polymorpheus\"\n    [polymorpheus]=\"type\"\n>\n    <ng-container *ngIf=\"passwordTexts$ | async as texts\">\n        <tui-icon\n            *polymorpheusOutlet=\"icon as src; context: {$implicit: size}\"\n            automation-id=\"tui-password__icon\"\n            tuiAppearance=\"icon\"\n            class=\"t-icon\"\n            [class.t-icon_small]=\"size === 's'\"\n            [icon]=\"src.toString()\"\n            [tuiHint]=\"texts[0] && texts[1] && hintContent\"\n            [tuiHintAppearance]=\"(computedAppearance$ | async) || ''\"\n            [tuiHintDirection]=\"hintOptions?.direction || 'bottom-left'\"\n            (click)=\"togglePasswordVisibility()\"\n            (mousedown.zoneless.prevent)=\"(0)\"\n            (mouseup.zoneless.prevent)=\"(0)\"\n        />\n\n        <ng-template\n            #hintContent=\"polymorpheus\"\n            polymorpheus\n        >\n            {{ isPasswordHidden ? texts[0] : texts[1] }}\n        </ng-template>\n    </ng-container>\n</ng-template>\n", styles: [":host{display:block;border-radius:var(--tui-radius-m);text-align:start}:host :host-context(*:disabled){pointer-events:none}.t-icon{cursor:pointer;pointer-events:auto}.t-icon_small{border-width:.25rem}.t-textfield{border-radius:inherit;text-align:inherit}\n"], dependencies: [{ kind: "directive", type: i1.TuiHintDirective, selector: "[tuiHint]:not(ng-container):not(ng-template)", inputs: ["tuiHintContext", "tuiHintAppearance", "tuiHint"], outputs: ["tuiHintVisible"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.PolymorpheusOutlet, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }, { kind: "directive", type: i3.PolymorpheusTemplate, selector: "ng-template[polymorpheus]", inputs: ["polymorpheus"], exportAs: ["polymorpheus"] }, { 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.TuiTextfieldIconDirective, selector: "[tuiTextfieldIcon]", inputs: ["tuiTextfieldIcon"] }, { kind: "directive", type: i6.TuiAppearance, selector: "[tuiAppearance]", inputs: ["tuiAppearance", "tuiAppearanceState", "tuiAppearanceFocus", "tuiAppearanceMode"] }, { kind: "component", type: i7.TuiIcon, selector: "tui-icon", inputs: ["icon", "background"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], viewQueries: [{ propertyName: "textfield", first: true, predicate: TuiPrimitiveTextfieldComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<tui-primitive-textfield\n    class=\"t-textfield\"\n    [disabled]=\"computedDisabled\"\n    [focusable]=\"focusable\"\n    [invalid]=\"computedInvalid\"\n    [nativeId]=\"nativeId\"\n    [pseudoActive]=\"pseudoActive\"\n    [pseudoFocus]=\"pseudoFocus\"\n    [pseudoHover]=\"pseudoHover\"\n    [readOnly]=\"readOnly\"\n    [tuiTextfieldIcon]=\"!computedDisabled ? iconContent : ''\"\n    [(value)]=\"value\"\n    (focusedChange)=\"onFocused($event)\"\n>\n    <ng-content />\n    <ng-content\n        ngProjectAs=\"input\"\n        select=\"input\"\n    />\n</tui-primitive-textfield>\n\n<ng-template\n    #iconContent=\"polymorpheus\"\n    [polymorpheus]=\"type\"\n>\n    <ng-container *ngIf=\"passwordTexts$ | async as texts\">\n        <tui-icon\n            *polymorpheusOutlet=\"icon as src; context: {$implicit: size}\"\n            automation-id=\"tui-password__icon\"\n            tuiAppearance=\"icon\"\n            class=\"t-icon\"\n            [class.t-icon_small]=\"size === 's'\"\n            [icon]=\"src.toString()\"\n            [tuiHint]=\"texts[0] && texts[1] && hintContent\"\n            [tuiHintAppearance]=\"(computedAppearance$ | async) || ''\"\n            [tuiHintDirection]=\"hintOptions?.direction || 'bottom-left'\"\n            (click)=\"togglePasswordVisibility()\"\n            (mousedown.zoneless.prevent)=\"(0)\"\n            (mouseup.zoneless.prevent)=\"(0)\"\n        />\n\n        <ng-template\n            #hintContent=\"polymorpheus\"\n            polymorpheus\n        >\n            {{ isPasswordHidden ? texts[0] : texts[1] }}\n        </ng-template>\n    </ng-container>\n</ng-template>\n", styles: [":host{display:block;border-radius:var(--tui-radius-m);text-align:start}:host[data-size=l]{border-radius:var(--tui-radius-l)}:host :host-context(*:disabled){pointer-events:none}.t-icon{cursor:pointer;pointer-events:auto}.t-icon_small{border-width:.25rem}.t-textfield{border-radius:inherit;text-align:inherit}\n"], dependencies: [{ kind: "directive", type: i1.TuiHintDirective, selector: "[tuiHint]:not(ng-container):not(ng-template)", inputs: ["tuiHintContext", "tuiHintAppearance", "tuiHint"], outputs: ["tuiHintVisible"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.PolymorpheusOutlet, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }, { kind: "directive", type: i3.PolymorpheusTemplate, selector: "ng-template[polymorpheus]", inputs: ["polymorpheus"], exportAs: ["polymorpheus"] }, { 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.TuiTextfieldIconDirective, selector: "[tuiTextfieldIcon]", inputs: ["tuiTextfieldIcon"] }, { kind: "directive", type: i6.TuiAppearance, selector: "[tuiAppearance]", inputs: ["tuiAppearance", "tuiAppearanceState", "tuiAppearanceFocus", "tuiAppearanceMode"] }, { kind: "component", type: i7.TuiIcon, selector: "tui-icon", inputs: ["icon", "background"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 export { TuiInputPasswordComponent };
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiInputPasswordComponent, decorators: [{
@@ -72,7 +72,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         tuiAsControl(TuiInputPasswordComponent),
                     ], host: {
                         '[attr.data-size]': 'size',
-                    }, template: "<tui-primitive-textfield\n    class=\"t-textfield\"\n    [disabled]=\"computedDisabled\"\n    [focusable]=\"focusable\"\n    [invalid]=\"computedInvalid\"\n    [nativeId]=\"nativeId\"\n    [pseudoActive]=\"pseudoActive\"\n    [pseudoFocus]=\"pseudoFocus\"\n    [pseudoHover]=\"pseudoHover\"\n    [readOnly]=\"readOnly\"\n    [tuiTextfieldIcon]=\"!computedDisabled ? iconContent : ''\"\n    [(value)]=\"value\"\n    (focusedChange)=\"onFocused($event)\"\n>\n    <ng-content />\n    <ng-content\n        ngProjectAs=\"input\"\n        select=\"input\"\n    />\n</tui-primitive-textfield>\n\n<ng-template\n    #iconContent=\"polymorpheus\"\n    [polymorpheus]=\"type\"\n>\n    <ng-container *ngIf=\"passwordTexts$ | async as texts\">\n        <tui-icon\n            *polymorpheusOutlet=\"icon as src; context: {$implicit: size}\"\n            automation-id=\"tui-password__icon\"\n            tuiAppearance=\"icon\"\n            class=\"t-icon\"\n            [class.t-icon_small]=\"size === 's'\"\n            [icon]=\"src.toString()\"\n            [tuiHint]=\"texts[0] && texts[1] && hintContent\"\n            [tuiHintAppearance]=\"(computedAppearance$ | async) || ''\"\n            [tuiHintDirection]=\"hintOptions?.direction || 'bottom-left'\"\n            (click)=\"togglePasswordVisibility()\"\n            (mousedown.zoneless.prevent)=\"(0)\"\n            (mouseup.zoneless.prevent)=\"(0)\"\n        />\n\n        <ng-template\n            #hintContent=\"polymorpheus\"\n            polymorpheus\n        >\n            {{ isPasswordHidden ? texts[0] : texts[1] }}\n        </ng-template>\n    </ng-container>\n</ng-template>\n", styles: [":host{display:block;border-radius:var(--tui-radius-m);text-align:start}:host :host-context(*:disabled){pointer-events:none}.t-icon{cursor:pointer;pointer-events:auto}.t-icon_small{border-width:.25rem}.t-textfield{border-radius:inherit;text-align:inherit}\n"] }]
+                    }, template: "<tui-primitive-textfield\n    class=\"t-textfield\"\n    [disabled]=\"computedDisabled\"\n    [focusable]=\"focusable\"\n    [invalid]=\"computedInvalid\"\n    [nativeId]=\"nativeId\"\n    [pseudoActive]=\"pseudoActive\"\n    [pseudoFocus]=\"pseudoFocus\"\n    [pseudoHover]=\"pseudoHover\"\n    [readOnly]=\"readOnly\"\n    [tuiTextfieldIcon]=\"!computedDisabled ? iconContent : ''\"\n    [(value)]=\"value\"\n    (focusedChange)=\"onFocused($event)\"\n>\n    <ng-content />\n    <ng-content\n        ngProjectAs=\"input\"\n        select=\"input\"\n    />\n</tui-primitive-textfield>\n\n<ng-template\n    #iconContent=\"polymorpheus\"\n    [polymorpheus]=\"type\"\n>\n    <ng-container *ngIf=\"passwordTexts$ | async as texts\">\n        <tui-icon\n            *polymorpheusOutlet=\"icon as src; context: {$implicit: size}\"\n            automation-id=\"tui-password__icon\"\n            tuiAppearance=\"icon\"\n            class=\"t-icon\"\n            [class.t-icon_small]=\"size === 's'\"\n            [icon]=\"src.toString()\"\n            [tuiHint]=\"texts[0] && texts[1] && hintContent\"\n            [tuiHintAppearance]=\"(computedAppearance$ | async) || ''\"\n            [tuiHintDirection]=\"hintOptions?.direction || 'bottom-left'\"\n            (click)=\"togglePasswordVisibility()\"\n            (mousedown.zoneless.prevent)=\"(0)\"\n            (mouseup.zoneless.prevent)=\"(0)\"\n        />\n\n        <ng-template\n            #hintContent=\"polymorpheus\"\n            polymorpheus\n        >\n            {{ isPasswordHidden ? texts[0] : texts[1] }}\n        </ng-template>\n    </ng-container>\n</ng-template>\n", styles: [":host{display:block;border-radius:var(--tui-radius-m);text-align:start}:host[data-size=l]{border-radius:var(--tui-radius-l)}:host :host-context(*:disabled){pointer-events:none}.t-icon{cursor:pointer;pointer-events:auto}.t-icon_small{border-width:.25rem}.t-textfield{border-radius:inherit;text-align:inherit}\n"] }]
         }], propDecorators: { textfield: [{
                 type: ViewChild,
                 args: [TuiPrimitiveTextfieldComponent]

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

@@ -180,7 +180,7 @@ class TuiInputPhoneComponent extends AbstractTuiControl {
             tuiAsFocusableItemAccessor(TuiInputPhoneComponent),
             tuiAsControl(TuiInputPhoneComponent),
             tuiAsDataListHost(TuiInputPhoneComponent),
-        ], queries: [{ propertyName: "datalist", first: true, predicate: TuiDataListDirective, descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "dropdown", first: true, predicate: TuiDropdownOpen, descendants: true }, { propertyName: "textfield", first: true, predicate: TuiPrimitiveTextfieldComponent, descendants: true }], usesInheritance: true, hostDirectives: [{ directive: i1.TuiDropdownFixed }], ngImport: i0, template: "<div\n    tuiDropdownOpenMonitor\n    class=\"t-hosted\"\n    [tuiDropdown]=\"datalist || ''\"\n    [tuiDropdownEnabled]=\"canOpen\"\n    [(tuiDropdownOpen)]=\"open\"\n    (tuiActiveZoneChange)=\"onActiveZone($event)\"\n>\n    <tui-primitive-textfield\n        tuiValueAccessor\n        class=\"t-textfield\"\n        [disabled]=\"computedDisabled\"\n        [focusable]=\"focusable\"\n        [invalid]=\"computedInvalid\"\n        [maskito]=\"maskOptions\"\n        [nativeId]=\"nativeId\"\n        [pseudoFocus]=\"computedFocused\"\n        [pseudoHover]=\"pseudoHover\"\n        [readOnly]=\"readOnly\"\n        [tuiTextfieldCleaner]=\"canClean\"\n        [(value)]=\"nativeValue\"\n        (valueChange)=\"onValueChange($event)\"\n    >\n        <ng-content />\n        <ng-content\n            ngProjectAs=\"input\"\n            select=\"input\"\n        />\n    </tui-primitive-textfield>\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}\n"], dependencies: [{ 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.TuiTextfieldCleanerDirective, selector: "[tuiTextfieldCleaner]", inputs: ["tuiTextfieldCleaner"] }, { kind: "directive", type: i4.TuiValueAccessorDirective, selector: "[tuiValueAccessor]" }, { kind: "directive", type: i4.TuiLegacyDropdownOpenMonitorDirective, selector: "[tuiDropdownOpenMonitor]" }, { kind: "directive", type: i1.TuiDropdownDirective, selector: "[tuiDropdown]:not(ng-container):not(ng-template)", inputs: ["tuiDropdown"], exportAs: ["tuiDropdown"] }, { kind: "directive", type: i1.TuiDropdownOpen, selector: "[tuiDropdown][tuiDropdownOpen],[tuiDropdown][tuiDropdownOpenChange]", inputs: ["tuiDropdownEnabled", "tuiDropdownOpen"], outputs: ["tuiDropdownOpenChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], queries: [{ propertyName: "datalist", first: true, predicate: TuiDataListDirective, descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "dropdown", first: true, predicate: TuiDropdownOpen, descendants: true }, { propertyName: "textfield", first: true, predicate: TuiPrimitiveTextfieldComponent, descendants: true }], usesInheritance: true, hostDirectives: [{ directive: i1.TuiDropdownFixed }], ngImport: i0, template: "<div\n    tuiDropdownOpenMonitor\n    class=\"t-hosted\"\n    [tuiDropdown]=\"datalist || ''\"\n    [tuiDropdownEnabled]=\"canOpen\"\n    [(tuiDropdownOpen)]=\"open\"\n    (tuiActiveZoneChange)=\"onActiveZone($event)\"\n>\n    <tui-primitive-textfield\n        tuiValueAccessor\n        class=\"t-textfield\"\n        [disabled]=\"computedDisabled\"\n        [focusable]=\"focusable\"\n        [invalid]=\"computedInvalid\"\n        [maskito]=\"maskOptions\"\n        [nativeId]=\"nativeId\"\n        [pseudoFocus]=\"computedFocused\"\n        [pseudoHover]=\"pseudoHover\"\n        [readOnly]=\"readOnly\"\n        [tuiTextfieldCleaner]=\"canClean\"\n        [(value)]=\"nativeValue\"\n        (valueChange)=\"onValueChange($event)\"\n    >\n        <ng-content />\n        <ng-content\n            ngProjectAs=\"input\"\n            select=\"input\"\n        />\n    </tui-primitive-textfield>\n</div>\n", styles: [":host{display:block;border-radius:var(--tui-radius-m);text-align:start}:host[data-size=l]{border-radius:var(--tui-radius-l)}:host._disabled,:host :host-context(*:disabled){pointer-events:none}.t-hosted{display:block;border-radius:inherit}.t-textfield{border-radius:inherit;text-align:inherit}\n"], dependencies: [{ 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.TuiTextfieldCleanerDirective, selector: "[tuiTextfieldCleaner]", inputs: ["tuiTextfieldCleaner"] }, { kind: "directive", type: i4.TuiValueAccessorDirective, selector: "[tuiValueAccessor]" }, { kind: "directive", type: i4.TuiLegacyDropdownOpenMonitorDirective, selector: "[tuiDropdownOpenMonitor]" }, { kind: "directive", type: i1.TuiDropdownDirective, selector: "[tuiDropdown]:not(ng-container):not(ng-template)", inputs: ["tuiDropdown"], exportAs: ["tuiDropdown"] }, { kind: "directive", type: i1.TuiDropdownOpen, selector: "[tuiDropdown][tuiDropdownOpen],[tuiDropdown][tuiDropdownOpenChange]", inputs: ["tuiDropdownEnabled", "tuiDropdownOpen"], outputs: ["tuiDropdownOpenChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 __decorate([
     tuiPure
@@ -194,7 +194,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         tuiAsDataListHost(TuiInputPhoneComponent),
                     ], hostDirectives: [TuiDropdownFixed], host: {
                         '[attr.data-size]': 'size',
-                    }, template: "<div\n    tuiDropdownOpenMonitor\n    class=\"t-hosted\"\n    [tuiDropdown]=\"datalist || ''\"\n    [tuiDropdownEnabled]=\"canOpen\"\n    [(tuiDropdownOpen)]=\"open\"\n    (tuiActiveZoneChange)=\"onActiveZone($event)\"\n>\n    <tui-primitive-textfield\n        tuiValueAccessor\n        class=\"t-textfield\"\n        [disabled]=\"computedDisabled\"\n        [focusable]=\"focusable\"\n        [invalid]=\"computedInvalid\"\n        [maskito]=\"maskOptions\"\n        [nativeId]=\"nativeId\"\n        [pseudoFocus]=\"computedFocused\"\n        [pseudoHover]=\"pseudoHover\"\n        [readOnly]=\"readOnly\"\n        [tuiTextfieldCleaner]=\"canClean\"\n        [(value)]=\"nativeValue\"\n        (valueChange)=\"onValueChange($event)\"\n    >\n        <ng-content />\n        <ng-content\n            ngProjectAs=\"input\"\n            select=\"input\"\n        />\n    </tui-primitive-textfield>\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}\n"] }]
+                    }, template: "<div\n    tuiDropdownOpenMonitor\n    class=\"t-hosted\"\n    [tuiDropdown]=\"datalist || ''\"\n    [tuiDropdownEnabled]=\"canOpen\"\n    [(tuiDropdownOpen)]=\"open\"\n    (tuiActiveZoneChange)=\"onActiveZone($event)\"\n>\n    <tui-primitive-textfield\n        tuiValueAccessor\n        class=\"t-textfield\"\n        [disabled]=\"computedDisabled\"\n        [focusable]=\"focusable\"\n        [invalid]=\"computedInvalid\"\n        [maskito]=\"maskOptions\"\n        [nativeId]=\"nativeId\"\n        [pseudoFocus]=\"computedFocused\"\n        [pseudoHover]=\"pseudoHover\"\n        [readOnly]=\"readOnly\"\n        [tuiTextfieldCleaner]=\"canClean\"\n        [(value)]=\"nativeValue\"\n        (valueChange)=\"onValueChange($event)\"\n    >\n        <ng-content />\n        <ng-content\n            ngProjectAs=\"input\"\n            select=\"input\"\n        />\n    </tui-primitive-textfield>\n</div>\n", styles: [":host{display:block;border-radius:var(--tui-radius-m);text-align:start}:host[data-size=l]{border-radius:var(--tui-radius-l)}:host._disabled,:host :host-context(*:disabled){pointer-events:none}.t-hosted{display:block;border-radius:inherit}.t-textfield{border-radius:inherit;text-align:inherit}\n"] }]
         }], propDecorators: { dropdown: [{
                 type: ViewChild,
                 args: [TuiDropdownOpen]

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

@@ -162,7 +162,7 @@ class TuiInputRangeComponent extends AbstractTuiControl {
             tuiAsControl(TuiInputRangeComponent),
             tuiSliderOptionsProvider({ trackColor: 'transparent' }),
             TEXTFIELD_CONTROLLER_PROVIDER,
-        ], viewQueries: [{ propertyName: "range", first: true, predicate: TuiRange, descendants: true, read: ElementRef }, { propertyName: "inputNumberRefs", predicate: TuiInputNumberComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div\n    tuiWrapper\n    class=\"t-wrapper\"\n    [appearance]=\"appearance\"\n    [disabled]=\"disabled\"\n    [focus]=\"computedFocused\"\n    [hover]=\"pseudoHover\"\n    [invalid]=\"computedInvalid\"\n    [readOnly]=\"readOnly\"\n    (tuiActiveZoneChange)=\"onActiveZone($event)\"\n>\n    <tui-input-number\n        automation-id=\"tui-input-range__left-input\"\n        tuiTextfieldAppearance=\"none\"\n        class=\"t-left\"\n        [disabled]=\"computedDisabled\"\n        [max]=\"value[1]\"\n        [min]=\"min\"\n        [ngModelOptions]=\"{standalone: true}\"\n        [readOnly]=\"readOnly\"\n        [tuiNumberFormat]=\"{precision}\"\n        [tuiTextfieldPostfix]=\"pluralize ? (value[0] | i18nPlural: pluralize) : ''\"\n        [(ngModel)]=\"leftTextfieldValue\"\n        (focusedChange)=\"onTextInputFocused($event)\"\n        (keydown.arrowDown)=\"changeByStep($event, [-1, 0])\"\n        (keydown.arrowUp)=\"changeByStep($event, [1, 0])\"\n        (ngModelChange)=\"onInputLeft($event)\"\n    >\n        <ng-content />\n        <div\n            *ngIf=\"showLeftValueContent\"\n            ngProjectAs=\"tuiContent\"\n        >\n            <ng-container *polymorpheusOutlet=\"leftValueContent as text; context: {$implicit: value[0]}\">\n                {{ text }}\n            </ng-container>\n        </div>\n    </tui-input-number>\n\n    <tui-input-number\n        automation-id=\"tui-input-range__right-input\"\n        tuiTextfieldAppearance=\"none\"\n        class=\"t-right\"\n        [disabled]=\"computedDisabled\"\n        [max]=\"max\"\n        [min]=\"value[0]\"\n        [ngModelOptions]=\"{standalone: true}\"\n        [readOnly]=\"readOnly\"\n        [tuiNumberFormat]=\"{precision}\"\n        [tuiTextfieldPostfix]=\"pluralize ? (value[1] | i18nPlural: pluralize) : ''\"\n        [(ngModel)]=\"rightTextfieldValue\"\n        (focusedChange)=\"onTextInputFocused($event)\"\n        (keydown.arrowDown)=\"changeByStep($event, [0, -1])\"\n        (keydown.arrowUp)=\"changeByStep($event, [0, 1])\"\n        (ngModelChange)=\"onInputRight($event)\"\n    >\n        <div\n            *ngIf=\"showRightValueContent\"\n            ngProjectAs=\"tuiContent\"\n        >\n            <ng-container *polymorpheusOutlet=\"rightValueContent as text; context: {$implicit: value[1]}\">\n                {{ text }}\n            </ng-container>\n        </div>\n    </tui-input-number>\n\n    <tui-range\n        class=\"t-range\"\n        [disabled]=\"readOnly || disabled\"\n        [focusable]=\"false\"\n        [keySteps]=\"computeKeySteps(keySteps, min, max)\"\n        [max]=\"max\"\n        [min]=\"min\"\n        [ngModel]=\"value\"\n        [ngModelOptions]=\"{standalone: true}\"\n        [segments]=\"segments\"\n        [step]=\"step\"\n        (activeThumbChange)=\"onActiveThumbChange($event)\"\n        (mousedown.prevent)=\"focusToTextInput()\"\n        (ngModelChange)=\"onExternalValueUpdate($event)\"\n    />\n</div>\n", styles: [".t-wrapper{position:relative}.t-left{inline-size:100%}.t-right{position:absolute;right:0;top:0;display:flex;inline-size:50%;block-size:100%;text-align:end}:host{display:block;border-radius:var(--tui-radius-m)}:host :host-context(*:disabled){pointer-events:none}.t-range{position:absolute;top:100%;left:0;right:0;z-index:1;margin:-.125rem 0 0}\n"], dependencies: [{ 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.PolymorpheusOutlet, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }, { kind: "directive", type: i4.TuiActiveZone, selector: "[tuiActiveZone]:not(ng-container), [tuiActiveZoneChange]:not(ng-container), [tuiActiveZoneParent]:not(ng-container)", inputs: ["tuiActiveZoneParent"], outputs: ["tuiActiveZoneChange"], exportAs: ["tuiActiveZone"] }, { kind: "component", type: i5.TuiInputNumberComponent, selector: "tui-input-number", inputs: ["min", "max", "step"] }, { kind: "directive", type: i5.TuiInputNumberDirective, selector: "tui-input-number" }, { kind: "component", type: i6.TuiRange, selector: "tui-range", inputs: ["min", "max", "step", "size", "segments", "keySteps", "focusable", "margin", "limit"] }, { kind: "directive", type: i7.TuiWrapperDirective, selector: "[tuiWrapper]", inputs: ["disabled", "readOnly", "hover", "active", "focus", "invalid", "appearance"] }, { kind: "directive", type: i7.TuiTextfieldAppearanceDirective, selector: "[tuiTextfieldAppearance]", inputs: ["tuiTextfieldAppearance"] }, { kind: "directive", type: i7.TuiTextfieldPostfixDirective, selector: "[tuiTextfieldPostfix]", inputs: ["tuiTextfieldPostfix"] }, { kind: "directive", type: i8.TuiNumberFormat, selector: "[tuiNumberFormat]", inputs: ["tuiNumberFormat"] }, { kind: "pipe", type: i1.I18nPluralPipe, name: "i18nPlural" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], viewQueries: [{ propertyName: "range", first: true, predicate: TuiRange, descendants: true, read: ElementRef }, { propertyName: "inputNumberRefs", predicate: TuiInputNumberComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div\n    tuiWrapper\n    class=\"t-wrapper\"\n    [appearance]=\"appearance\"\n    [disabled]=\"disabled\"\n    [focus]=\"computedFocused\"\n    [hover]=\"pseudoHover\"\n    [invalid]=\"computedInvalid\"\n    [readOnly]=\"readOnly\"\n    (tuiActiveZoneChange)=\"onActiveZone($event)\"\n>\n    <tui-input-number\n        automation-id=\"tui-input-range__left-input\"\n        tuiTextfieldAppearance=\"none\"\n        class=\"t-left\"\n        [disabled]=\"computedDisabled\"\n        [max]=\"value[1]\"\n        [min]=\"min\"\n        [ngModelOptions]=\"{standalone: true}\"\n        [readOnly]=\"readOnly\"\n        [tuiNumberFormat]=\"{precision}\"\n        [tuiTextfieldPostfix]=\"pluralize ? (value[0] | i18nPlural: pluralize) : ''\"\n        [(ngModel)]=\"leftTextfieldValue\"\n        (focusedChange)=\"onTextInputFocused($event)\"\n        (keydown.arrowDown)=\"changeByStep($event, [-1, 0])\"\n        (keydown.arrowUp)=\"changeByStep($event, [1, 0])\"\n        (ngModelChange)=\"onInputLeft($event)\"\n    >\n        <ng-content />\n        <div\n            *ngIf=\"showLeftValueContent\"\n            ngProjectAs=\"tuiContent\"\n        >\n            <ng-container *polymorpheusOutlet=\"leftValueContent as text; context: {$implicit: value[0]}\">\n                {{ text }}\n            </ng-container>\n        </div>\n    </tui-input-number>\n\n    <tui-input-number\n        automation-id=\"tui-input-range__right-input\"\n        tuiTextfieldAppearance=\"none\"\n        class=\"t-right\"\n        [disabled]=\"computedDisabled\"\n        [max]=\"max\"\n        [min]=\"value[0]\"\n        [ngModelOptions]=\"{standalone: true}\"\n        [readOnly]=\"readOnly\"\n        [tuiNumberFormat]=\"{precision}\"\n        [tuiTextfieldPostfix]=\"pluralize ? (value[1] | i18nPlural: pluralize) : ''\"\n        [(ngModel)]=\"rightTextfieldValue\"\n        (focusedChange)=\"onTextInputFocused($event)\"\n        (keydown.arrowDown)=\"changeByStep($event, [0, -1])\"\n        (keydown.arrowUp)=\"changeByStep($event, [0, 1])\"\n        (ngModelChange)=\"onInputRight($event)\"\n    >\n        <div\n            *ngIf=\"showRightValueContent\"\n            ngProjectAs=\"tuiContent\"\n        >\n            <ng-container *polymorpheusOutlet=\"rightValueContent as text; context: {$implicit: value[1]}\">\n                {{ text }}\n            </ng-container>\n        </div>\n    </tui-input-number>\n\n    <tui-range\n        class=\"t-range\"\n        [disabled]=\"readOnly || disabled\"\n        [focusable]=\"false\"\n        [keySteps]=\"computeKeySteps(keySteps, min, max)\"\n        [max]=\"max\"\n        [min]=\"min\"\n        [ngModel]=\"value\"\n        [ngModelOptions]=\"{standalone: true}\"\n        [segments]=\"segments\"\n        [step]=\"step\"\n        (activeThumbChange)=\"onActiveThumbChange($event)\"\n        (mousedown.prevent)=\"focusToTextInput()\"\n        (ngModelChange)=\"onExternalValueUpdate($event)\"\n    />\n</div>\n", styles: [".t-wrapper{position:relative}.t-left{inline-size:100%}.t-right{position:absolute;right:0;top:0;display:flex;inline-size:50%;block-size:100%;text-align:end}:host{display:block;border-radius:var(--tui-radius-m)}:host[data-size=l]{border-radius:var(--tui-radius-l)}:host :host-context(*:disabled){pointer-events:none}.t-range{position:absolute;top:100%;left:0;right:0;z-index:1;margin:-.125rem 0 0}\n"], dependencies: [{ 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.PolymorpheusOutlet, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }, { kind: "directive", type: i4.TuiActiveZone, selector: "[tuiActiveZone]:not(ng-container), [tuiActiveZoneChange]:not(ng-container), [tuiActiveZoneParent]:not(ng-container)", inputs: ["tuiActiveZoneParent"], outputs: ["tuiActiveZoneChange"], exportAs: ["tuiActiveZone"] }, { kind: "component", type: i5.TuiInputNumberComponent, selector: "tui-input-number", inputs: ["min", "max", "step"] }, { kind: "directive", type: i5.TuiInputNumberDirective, selector: "tui-input-number" }, { kind: "component", type: i6.TuiRange, selector: "tui-range", inputs: ["min", "max", "step", "size", "segments", "keySteps", "focusable", "margin", "limit"] }, { kind: "directive", type: i7.TuiWrapperDirective, selector: "[tuiWrapper]", inputs: ["disabled", "readOnly", "hover", "active", "focus", "invalid", "appearance"] }, { kind: "directive", type: i7.TuiTextfieldAppearanceDirective, selector: "[tuiTextfieldAppearance]", inputs: ["tuiTextfieldAppearance"] }, { kind: "directive", type: i7.TuiTextfieldPostfixDirective, selector: "[tuiTextfieldPostfix]", inputs: ["tuiTextfieldPostfix"] }, { kind: "directive", type: i8.TuiNumberFormat, selector: "[tuiNumberFormat]", inputs: ["tuiNumberFormat"] }, { kind: "pipe", type: i1.I18nPluralPipe, name: "i18nPlural" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 __decorate([
     tuiPure
@@ -178,7 +178,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     ], host: {
                         '[attr.data-size]': 'controller.size',
                         '[class._label-outside]': 'controller.labelOutside',
-                    }, template: "<div\n    tuiWrapper\n    class=\"t-wrapper\"\n    [appearance]=\"appearance\"\n    [disabled]=\"disabled\"\n    [focus]=\"computedFocused\"\n    [hover]=\"pseudoHover\"\n    [invalid]=\"computedInvalid\"\n    [readOnly]=\"readOnly\"\n    (tuiActiveZoneChange)=\"onActiveZone($event)\"\n>\n    <tui-input-number\n        automation-id=\"tui-input-range__left-input\"\n        tuiTextfieldAppearance=\"none\"\n        class=\"t-left\"\n        [disabled]=\"computedDisabled\"\n        [max]=\"value[1]\"\n        [min]=\"min\"\n        [ngModelOptions]=\"{standalone: true}\"\n        [readOnly]=\"readOnly\"\n        [tuiNumberFormat]=\"{precision}\"\n        [tuiTextfieldPostfix]=\"pluralize ? (value[0] | i18nPlural: pluralize) : ''\"\n        [(ngModel)]=\"leftTextfieldValue\"\n        (focusedChange)=\"onTextInputFocused($event)\"\n        (keydown.arrowDown)=\"changeByStep($event, [-1, 0])\"\n        (keydown.arrowUp)=\"changeByStep($event, [1, 0])\"\n        (ngModelChange)=\"onInputLeft($event)\"\n    >\n        <ng-content />\n        <div\n            *ngIf=\"showLeftValueContent\"\n            ngProjectAs=\"tuiContent\"\n        >\n            <ng-container *polymorpheusOutlet=\"leftValueContent as text; context: {$implicit: value[0]}\">\n                {{ text }}\n            </ng-container>\n        </div>\n    </tui-input-number>\n\n    <tui-input-number\n        automation-id=\"tui-input-range__right-input\"\n        tuiTextfieldAppearance=\"none\"\n        class=\"t-right\"\n        [disabled]=\"computedDisabled\"\n        [max]=\"max\"\n        [min]=\"value[0]\"\n        [ngModelOptions]=\"{standalone: true}\"\n        [readOnly]=\"readOnly\"\n        [tuiNumberFormat]=\"{precision}\"\n        [tuiTextfieldPostfix]=\"pluralize ? (value[1] | i18nPlural: pluralize) : ''\"\n        [(ngModel)]=\"rightTextfieldValue\"\n        (focusedChange)=\"onTextInputFocused($event)\"\n        (keydown.arrowDown)=\"changeByStep($event, [0, -1])\"\n        (keydown.arrowUp)=\"changeByStep($event, [0, 1])\"\n        (ngModelChange)=\"onInputRight($event)\"\n    >\n        <div\n            *ngIf=\"showRightValueContent\"\n            ngProjectAs=\"tuiContent\"\n        >\n            <ng-container *polymorpheusOutlet=\"rightValueContent as text; context: {$implicit: value[1]}\">\n                {{ text }}\n            </ng-container>\n        </div>\n    </tui-input-number>\n\n    <tui-range\n        class=\"t-range\"\n        [disabled]=\"readOnly || disabled\"\n        [focusable]=\"false\"\n        [keySteps]=\"computeKeySteps(keySteps, min, max)\"\n        [max]=\"max\"\n        [min]=\"min\"\n        [ngModel]=\"value\"\n        [ngModelOptions]=\"{standalone: true}\"\n        [segments]=\"segments\"\n        [step]=\"step\"\n        (activeThumbChange)=\"onActiveThumbChange($event)\"\n        (mousedown.prevent)=\"focusToTextInput()\"\n        (ngModelChange)=\"onExternalValueUpdate($event)\"\n    />\n</div>\n", styles: [".t-wrapper{position:relative}.t-left{inline-size:100%}.t-right{position:absolute;right:0;top:0;display:flex;inline-size:50%;block-size:100%;text-align:end}:host{display:block;border-radius:var(--tui-radius-m)}:host :host-context(*:disabled){pointer-events:none}.t-range{position:absolute;top:100%;left:0;right:0;z-index:1;margin:-.125rem 0 0}\n"] }]
+                    }, template: "<div\n    tuiWrapper\n    class=\"t-wrapper\"\n    [appearance]=\"appearance\"\n    [disabled]=\"disabled\"\n    [focus]=\"computedFocused\"\n    [hover]=\"pseudoHover\"\n    [invalid]=\"computedInvalid\"\n    [readOnly]=\"readOnly\"\n    (tuiActiveZoneChange)=\"onActiveZone($event)\"\n>\n    <tui-input-number\n        automation-id=\"tui-input-range__left-input\"\n        tuiTextfieldAppearance=\"none\"\n        class=\"t-left\"\n        [disabled]=\"computedDisabled\"\n        [max]=\"value[1]\"\n        [min]=\"min\"\n        [ngModelOptions]=\"{standalone: true}\"\n        [readOnly]=\"readOnly\"\n        [tuiNumberFormat]=\"{precision}\"\n        [tuiTextfieldPostfix]=\"pluralize ? (value[0] | i18nPlural: pluralize) : ''\"\n        [(ngModel)]=\"leftTextfieldValue\"\n        (focusedChange)=\"onTextInputFocused($event)\"\n        (keydown.arrowDown)=\"changeByStep($event, [-1, 0])\"\n        (keydown.arrowUp)=\"changeByStep($event, [1, 0])\"\n        (ngModelChange)=\"onInputLeft($event)\"\n    >\n        <ng-content />\n        <div\n            *ngIf=\"showLeftValueContent\"\n            ngProjectAs=\"tuiContent\"\n        >\n            <ng-container *polymorpheusOutlet=\"leftValueContent as text; context: {$implicit: value[0]}\">\n                {{ text }}\n            </ng-container>\n        </div>\n    </tui-input-number>\n\n    <tui-input-number\n        automation-id=\"tui-input-range__right-input\"\n        tuiTextfieldAppearance=\"none\"\n        class=\"t-right\"\n        [disabled]=\"computedDisabled\"\n        [max]=\"max\"\n        [min]=\"value[0]\"\n        [ngModelOptions]=\"{standalone: true}\"\n        [readOnly]=\"readOnly\"\n        [tuiNumberFormat]=\"{precision}\"\n        [tuiTextfieldPostfix]=\"pluralize ? (value[1] | i18nPlural: pluralize) : ''\"\n        [(ngModel)]=\"rightTextfieldValue\"\n        (focusedChange)=\"onTextInputFocused($event)\"\n        (keydown.arrowDown)=\"changeByStep($event, [0, -1])\"\n        (keydown.arrowUp)=\"changeByStep($event, [0, 1])\"\n        (ngModelChange)=\"onInputRight($event)\"\n    >\n        <div\n            *ngIf=\"showRightValueContent\"\n            ngProjectAs=\"tuiContent\"\n        >\n            <ng-container *polymorpheusOutlet=\"rightValueContent as text; context: {$implicit: value[1]}\">\n                {{ text }}\n            </ng-container>\n        </div>\n    </tui-input-number>\n\n    <tui-range\n        class=\"t-range\"\n        [disabled]=\"readOnly || disabled\"\n        [focusable]=\"false\"\n        [keySteps]=\"computeKeySteps(keySteps, min, max)\"\n        [max]=\"max\"\n        [min]=\"min\"\n        [ngModel]=\"value\"\n        [ngModelOptions]=\"{standalone: true}\"\n        [segments]=\"segments\"\n        [step]=\"step\"\n        (activeThumbChange)=\"onActiveThumbChange($event)\"\n        (mousedown.prevent)=\"focusToTextInput()\"\n        (ngModelChange)=\"onExternalValueUpdate($event)\"\n    />\n</div>\n", styles: [".t-wrapper{position:relative}.t-left{inline-size:100%}.t-right{position:absolute;right:0;top:0;display:flex;inline-size:50%;block-size:100%;text-align:end}:host{display:block;border-radius:var(--tui-radius-m)}:host[data-size=l]{border-radius:var(--tui-radius-l)}:host :host-context(*:disabled){pointer-events:none}.t-range{position:absolute;top:100%;left:0;right:0;z-index:1;margin:-.125rem 0 0}\n"] }]
         }], propDecorators: { inputNumberRefs: [{
                 type: ViewChildren,
                 args: [TuiInputNumberComponent]

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

@@ -355,7 +355,7 @@ class TuiInputTagComponent extends AbstractTuiMultipleControl {
             tuiAsControl(TuiInputTagComponent),
             tuiAsDataListHost(TuiInputTagComponent),
             TEXTFIELD_CONTROLLER_PROVIDER,
-        ], queries: [{ propertyName: "datalist", first: true, predicate: TuiDataListDirective, descendants: true, read: TemplateRef }, { propertyName: "valueContent", first: true, predicate: PolymorpheusOutlet, descendants: true }], viewQueries: [{ propertyName: "dropdown", first: true, predicate: TuiDropdownOpen, descendants: true }, { propertyName: "focusableElement", first: true, predicate: ["focusableElement"], descendants: true }, { propertyName: "tagsContainer", first: true, predicate: ["tagsContainer"], descendants: true }, { propertyName: "cleanerSvg", first: true, predicate: ["cleaner"], descendants: true, read: ElementRef }, { propertyName: "scrollBar", first: true, predicate: TuiScrollbar, descendants: true, read: ElementRef }, { propertyName: "errorIconTemplate", first: true, predicate: ["errorIcon"], descendants: true }, { propertyName: "tags", predicate: ["tag"], descendants: true, read: ElementRef }], usesInheritance: true, hostDirectives: [{ directive: i1.TuiDropdownFixed }], ngImport: i0, template: "<ng-container *ngIf=\"hintOptions?.change$ | async\" />\n<div\n    tuiDropdownOpenMonitor\n    class=\"t-hosted\"\n    [tuiDropdown]=\"datalist || ''\"\n    [tuiDropdownEnabled]=\"canOpen\"\n    [(tuiDropdownOpen)]=\"open\"\n    (tuiActiveZoneChange)=\"onActiveZone($event)\"\n>\n    <div\n        tuiWrapper\n        [appearance]=\"appearance\"\n        [disabled]=\"computedDisabled\"\n        [focus]=\"computedFocused\"\n        [hover]=\"pseudoHover\"\n        [invalid]=\"computedInvalid\"\n        [readOnly]=\"readOnly\"\n        (click.prevent.zoneless)=\"detectRetargetFromLabel($event)\"\n        (mousedown)=\"onMouseDown($event)\"\n    >\n        <div class=\"t-content\">\n            <div\n                *ngIf=\"iconStart\"\n                class=\"t-icon t-icon_left t-textfield-icon t-icon-wrapper\"\n            >\n                <tui-icon\n                    *polymorpheusOutlet=\"iconStart as src; context: {$implicit: size}\"\n                    tuiAppearance=\"icon\"\n                    [icon]=\"src.toString()\"\n                />\n            </div>\n            <div class=\"t-wrapper\">\n                <div class=\"t-absolute-wrapper\">\n                    <div\n                        *ngIf=\"hasPlaceholder\"\n                        automation-id=\"tui-input-tag__placeholder\"\n                        class=\"t-placeholder\"\n                        [class.t-placeholder_raised]=\"placeholderRaised\"\n                    >\n                        <ng-content />\n                    </div>\n                </div>\n                <tui-scrollbar\n                    class=\"t-scrollbar\"\n                    [hidden]=\"!expandable\"\n                    [style.maxHeight.rem]=\"computeMaxHeight\"\n                >\n                    <div\n                        class=\"t-tags\"\n                        [class.t-tags_empty]=\"tagsEmpty\"\n                    >\n                        <ng-container *ngIf=\"labelOutside; else text\">\n                            <tui-tag\n                                *ngFor=\"let item of value; index as index; trackBy: trackByFn\"\n                                #tag\n                                automation-id=\"tui-input-tag__tag\"\n                                tabIndex=\"-1\"\n                                class=\"t-tag\"\n                                [autoColor]=\"autoColor\"\n                                [disabled]=\"computedDisabled || disabledItemHandler(item)\"\n                                [editable]=\"editable && !readOnly\"\n                                [hoverable]=\"!readOnly\"\n                                [leftContent]=\"getLeftContent(item)\"\n                                [maxLength]=\"maxLength\"\n                                [removable]=\"!readOnly && removable\"\n                                [separator]=\"separator\"\n                                [size]=\"controller.size\"\n                                [status]=\"status\"\n                                [value]=\"item.toString()\"\n                                (edited)=\"onTagEdited($event, index)\"\n                                (keydown.arrowLeft.prevent)=\"onTagKeyDownArrowLeft(index)\"\n                                (keydown.arrowRight.prevent)=\"onTagKeyDownArrowRight(index)\"\n                            />\n                        </ng-container>\n                        <ng-template #text>\n                            <span\n                                *ngFor=\"let item of value\"\n                                class=\"t-text\"\n                                [class.t-text_comma]=\"computedFocused && !inputHidden\"\n                                [class.t-text_disabled]=\"disabledItemHandler(item)\"\n                                [class.t-text_error]=\"!tagValidator(item)\"\n                                [textContent]=\"item\"\n                            ></span>\n                        </ng-template>\n                        <div\n                            class=\"t-input-wrapper\"\n                            [class.t-input-wrapper_collapsed]=\"computedDisabled || readOnly || inputHidden\"\n                        >\n                            <div class=\"t-ghost\">{{ search }}</div>\n                            <input\n                                #focusableElement\n                                automation-id=\"tui-input-tag__native\"\n                                type=\"text\"\n                                class=\"t-native\"\n                                [attr.maxLength]=\"maxLength\"\n                                [class.t-native_hidden]=\"inputHidden\"\n                                [disabled]=\"computedDisabled\"\n                                [id]=\"id\"\n                                [ngModel]=\"search\"\n                                [ngModelOptions]=\"{standalone: true}\"\n                                [placeholder]=\"placeholder\"\n                                [readOnly]=\"readOnly || inputHidden\"\n                                [tabIndex]=\"computedFocusable ? 0 : -1\"\n                                (drop.prevent)=\"onDrop($any($event))\"\n                                (keydown.arrowLeft)=\"onFieldKeyDownArrowLeft($event)\"\n                                (keydown.backspace)=\"onFieldKeyDownBackspace($event)\"\n                                (keydown.enter.prevent)=\"onFieldKeyDownEnter()\"\n                                (ngModelChange)=\"onInput($event)\"\n                                (paste.prevent)=\"onPaste($event)\"\n                            />\n                        </div>\n                    </div>\n                    <div class=\"t-value-content\">\n                        <ng-content select=\"tuiContent\" />\n                    </div>\n                </tui-scrollbar>\n            </div>\n            <ng-content select=\"select\" />\n            <div\n                *ngIf=\"hasRightIcons\"\n                class=\"t-icons t-icon-wrapper\"\n            >\n                <ng-container *ngIf=\"hasCleaner\">\n                    <tui-icon\n                        *polymorpheusOutlet=\"iconCleaner as src; context: {$implicit: size}\"\n                        #cleaner\n                        automation-id=\"tui-input-tag__cleaner\"\n                        tuiAppearance=\"icon\"\n                        class=\"t-cleaner\"\n                        [icon]=\"src.toString()\"\n                        (click.stop)=\"onCleanerClick()\"\n                    />\n                </ng-container>\n                <tui-tooltip\n                    *ngIf=\"showHint\"\n                    automation-id=\"tui-input-tag__tooltip\"\n                    class=\"t-tooltip\"\n                    [content]=\"hintOptions?.content\"\n                    [describeId]=\"id\"\n                />\n                <div\n                    *ngIf=\"icon\"\n                    class=\"t-icon t-textfield-icon\"\n                >\n                    <tui-icon\n                        *polymorpheusOutlet=\"icon as src; context: {$implicit: size}\"\n                        tuiAppearance=\"icon\"\n                        [icon]=\"src.toString()\"\n                    />\n                </div>\n            </div>\n        </div>\n        <ng-template #errorIcon>\n            <tui-icon\n                class=\"t-error-icon\"\n                [icon]=\"icons.error\"\n            />\n        </ng-template>\n    </div>\n</div>\n", styles: [":host{position:relative;display:block;text-align:start;border-radius:var(--tui-radius-m);block-size:var(--tui-height);min-block-size:var(--tui-height);max-block-size:var(--tui-height)}:host[data-size=s]{--tui-height: var(--tui-height-s);font:var(--tui-font-text-s)}:host[data-size=m]{--tui-height: var(--tui-height-m);font:var(--tui-font-text-s)}:host[data-size=l]{--tui-height: var(--tui-height-l);font:var(--tui-font-text-m);line-height:1.25rem}:host :host-context(*:disabled){pointer-events:none}.t-input{padding:0;margin:0;border-width:0;border-radius:inherit;background:none;font-size:inherit;line-height:inherit;font-weight:inherit;color:inherit;caret-color:currentColor;outline:none;-webkit-appearance:none;appearance:none;word-break:keep-all;-webkit-text-fill-color:currentColor;position:absolute;top:0;left:0;inline-size:100%;block-size:100%;border-style:solid;border-color:transparent;border-inline-start-width:var(--t-border-start, 0);border-inline-end-width:var(--t-border-end, 0);text-indent:var(--t-text-indent);color:var(--tui-text-primary);text-align:inherit;box-sizing:border-box;white-space:nowrap;overflow:hidden;text-transform:inherit;resize:none}.t-input:-webkit-autofill,.t-input:-webkit-autofill:hover,.t-input:-webkit-autofill:focus{-webkit-text-fill-color:var(--tui-text-primary)!important;border-color:var(--tui-service-autofill-background);box-shadow:0 0 0 100rem var(--tui-service-autofill-background) inset!important}.t-input[inputMode=none]{caret-color:transparent}.t-input::-webkit-inner-spin-button,.t-input::-webkit-outer-spin-button{-webkit-appearance:none;appearance:none}.t-input:-webkit-autofill,.t-input:-webkit-autofill:first-line{font-size:inherit;line-height:inherit}.t-input::-webkit-caps-lock-indicator,.t-input::-webkit-contacts-auto-fill-button,.t-input::-webkit-credit-card-auto-fill-button,.t-input::-webkit-credentials-auto-fill-button,.t-input::-webkit-strong-password-auto-fill-button{content:none!important;position:absolute;left:-62.4375rem;top:-62.4375rem;z-index:-999;display:none!important;background:transparent!important;pointer-events:none!important}.t-input::placeholder{color:var(--tui-text-tertiary);opacity:0}:host._focused:not(._readonly) .t-input::placeholder,:host-context(tui-primitive-textfield._focused:not(._readonly)) .t-input::placeholder,:host-context(tui-textarea._focused:not(._readonly)) .t-input::placeholder,:host-context(tui-text-area._focused:not(._readonly)) .t-input::placeholder{opacity:1}:host[data-size=s] .t-input,.t-input :host-context(tui-primitive-textfield[data-size=\"s\"]):not(tui-primitive-textfield),.t-input :host-context(tui-textarea[data-size=\"s\"]):not(tui-textarea),.t-input :host-context(tui-text-area[data-size=\"s\"]):not(tui-text-area){padding:0 var(--tui-padding-s)}:host[data-size=m] .t-input,.t-input :host-context(tui-primitive-textfield[data-size=\"m\"]):not(tui-primitive-textfield),.t-input :host-context(tui-textarea[data-size=\"m\"]):not(tui-textarea),.t-input :host-context(tui-text-area[data-size=\"m\"]):not(tui-text-area){padding:0 var(--tui-padding-m)}:host[data-size=l] .t-input,.t-input :host-context(tui-primitive-textfield[data-size=\"l\"]):not(tui-primitive-textfield),.t-input :host-context(tui-textarea[data-size=\"l\"]):not(tui-textarea),.t-input :host-context(tui-text-area[data-size=\"l\"]):not(tui-text-area){padding:0 var(--tui-padding-l)}:host._disabled .t-input,.t-input :host-context(tui-primitive-textfield._disabled),.t-input :host-context(tui-textarea._disabled),.t-input :host-context(tui-text-area._disabled){pointer-events:none}:host[data-size=l]:not(._label-outside) .t-input,.t-input :host-context(tui-primitive-textfield[data-size=\"l\"]:not(._label-outside)):not(tui-primitive-textfield){padding-block-start:1.25rem}:host[data-size=m]:not(._label-outside) .t-input,.t-input :host-context(tui-primitive-textfield[data-size=\"m\"]:not(._label-outside)):not(tui-primitive-textfield){padding-block-start:1rem}:host[data-size=l]:not(._label-outside) .t-input{padding-block-start:1.25rem}:host[data-size=l]:not(._label-outside) .t-input:-webkit-autofill+.t-content .t-placeholder{font-size:.8156rem;transform:translateY(-.625rem)}:host[data-size=m]:not(._label-outside) .t-input:-webkit-autofill+.t-content .t-placeholder{font-size:.69rem;transform:translateY(-.5rem)}:host._hidden input.t-input,.t-input :host-context(tui-primitive-textfield._hidden){opacity:0;text-indent:-10em}.t-content{display:flex;block-size:100%;inline-size:100%;box-sizing:border-box;align-items:center;overflow:hidden}:host[data-size=s] .t-content{padding:0 var(--tui-padding-s)}:host[data-size=m] .t-content{padding:0 var(--tui-padding-m)}:host[data-size=l] .t-content{padding:0 var(--tui-padding-l)}.t-wrapper{flex:1;min-inline-size:0;padding-inline-end:.25rem}.t-placeholder{transition-property:transform,font-size,color,letter-spacing;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;inline-size:100%;-webkit-user-select:none;user-select:none;font:var(--tui-font-text-s);color:var(--tui-text-secondary);pointer-events:none;will-change:transform;transform:translateY(0)}@supports (-webkit-hyphens: none){.t-placeholder{will-change:unset;transition-property:transform,color,letter-spacing}}.t-placeholder_raised{transform:translateY(-.625rem)}:host[data-size=m] .t-placeholder_raised{font:var(--tui-font-text-xs);line-height:1.25rem;transform:translateY(-.5rem);letter-spacing:.025rem}:host._invalid:not(._focused) .t-placeholder_raised,:host._invalid:not(._focused):hover .t-placeholder_raised{color:var(--tui-text-negative)}:host._focused .t-placeholder,:host[data-size=m]._focused._label-outside .t-placeholder,:host[data-size=l]._focused._label-outside .t-placeholder{color:var(--tui-text-tertiary)}:host[data-size=l] .t-placeholder{font:var(--tui-font-text-m);line-height:1.25rem}:host[data-size=l] .t-placeholder_raised{font-size:.8156rem}:host[data-size=m]._focused:not(._label-outside) .t-placeholder,:host[data-size=l]._focused:not(._label-outside) .t-placeholder{color:var(--tui-text-primary)}.t-cleaner{position:relative;display:flex;inline-size:1.5rem;block-size:1.5rem;align-items:center;justify-content:center;box-sizing:border-box;cursor:pointer;pointer-events:none;pointer-events:auto;border-width:.25rem}:host._readonly .t-cleaner,:host._disabled .t-cleaner{pointer-events:none}.t-icon{position:relative;display:flex;inline-size:1.5rem;block-size:1.5rem;align-items:center;justify-content:center;box-sizing:border-box;cursor:pointer;pointer-events:none}:host[data-size=s] .t-icon_left{margin:0 .125rem 0 -.375rem}:host[data-size=m] .t-icon_left{margin-inline-start:-.125rem;margin-inline-end:.375rem}:host[data-size=l] .t-icon_left{margin-inline-end:.75rem}.t-icons{display:flex;align-items:center}:host[data-size=m] .t-icons{margin-inline-end:-.125rem}:host[data-size=s] .t-icons{margin-inline-end:-.375rem}:host:not([data-size=s]) .t-icons>:not(:first-child){margin-inline-start:.25rem}:host{cursor:text}:host._expandable{block-size:auto;max-block-size:none}:host._disabled,:host :host-context(*:disabled){pointer-events:none}:host._readonly{cursor:default}:host[data-size=m]{line-height:1rem}.t-hosted{display:block;border-radius:inherit}.t-scrollbar{scroll-behavior:var(--tui-scroll-behavior);margin-inline-start:-.25rem;min-inline-size:100%}:host:not(._label-outside) .t-scrollbar,:host._label-outside._icon-start .t-scrollbar{margin:0}:host[data-size=s]._icon-start .t-scrollbar{margin-inline-start:.25rem}:host[data-size=m]:not(._label-outside) .t-scrollbar{border-block-start:1rem solid transparent}:host[data-size=l]:not(._label-outside) .t-scrollbar{border-block-start:1.25rem solid transparent}.t-tags{display:flex;padding-inline-start:.25rem}.t-tags_expandable{overflow:hidden}.t-tags_empty{block-size:0}:host._expandable .t-tags{flex-wrap:wrap;white-space:normal;overflow:hidden}:host._readonly .t-tags{pointer-events:none}:host[data-size=m]:not(._label-outside) .t-tags,:host[data-size=l]:not(._label-outside) .t-tags{padding:0}.t-tags tui-tag:last-of-type{max-inline-size:80%}.t-content{align-items:flex-start}:host[data-size=s] .t-content{min-block-size:var(--tui-height-s)}:host[data-size=m] .t-content{min-block-size:var(--tui-height-m)}:host[data-size=l] .t-content{min-block-size:var(--tui-height-l)}:host[data-size=s] .t-icon-wrapper{block-size:var(--tui-height-s)}:host[data-size=m] .t-icon-wrapper{block-size:var(--tui-height-m)}:host[data-size=l] .t-icon-wrapper{block-size:var(--tui-height-l)}.t-absolute-wrapper{position:absolute;top:0;left:0;inline-size:100%;block-size:100%;display:flex;flex-direction:column;justify-content:center}:host[data-size=m] .t-absolute-wrapper{block-size:var(--tui-height-m)}:host[data-size=l] .t-absolute-wrapper{block-size:var(--tui-height-l)}.t-wrapper{position:relative;display:flex;align-items:center;padding:0;box-sizing:border-box}:host[data-size=s] .t-wrapper{min-block-size:var(--tui-height-s);padding:calc((var(--tui-height-s) - 1.5rem) / 2) 0}:host[data-size=m] .t-wrapper{min-block-size:var(--tui-height-m);padding:calc((var(--tui-height-m) - var(--tui-height-xs) - .25rem) / 2) 0}:host[data-size=l] .t-wrapper{padding:calc((var(--tui-height-l) - var(--tui-height-s) - .25rem) / 2) 0}:host[data-size=m]:not(._label-outside) .t-wrapper{padding:calc((var(--tui-height-m) - 2rem) / 2) 0}:host[data-size=l]:not(._label-outside) .t-wrapper{padding:calc((var(--tui-height-l) - 2.5rem) / 2) 0}.t-tag{margin:.125rem .5rem .125rem -.25rem;margin-inline-start:-.25rem;margin-inline-end:.5rem;max-inline-size:100%;flex-shrink:0}:host[data-size=m] .t-tag{margin-inline-start:-.125rem;margin-inline-end:.375rem}.t-text:after{content:\",\\a0\"}.t-text_disabled{color:var(--tui-text-tertiary)}.t-text_error{color:var(--tui-text-negative)}.t-text:not(.t-text_comma):last-of-type:after{content:\"\"}:host:not(._expandable) .t-text{white-space:nowrap}.t-input-wrapper,.t-value-content{position:relative;display:flex;flex:1;max-inline-size:100%}:host[data-size=s] .t-input-wrapper,:host[data-size=s] .t-value-content{min-block-size:1.5rem}:host[data-size=m] .t-input-wrapper,:host[data-size=m] .t-value-content{min-block-size:calc(var(--tui-height-xs) + 2 * .125rem)}:host[data-size=l] .t-input-wrapper,:host[data-size=l] .t-value-content{min-block-size:calc(var(--tui-height-s) + 2 * .125rem)}:host:not(._label-outside) .t-input-wrapper,:host:not(._label-outside) .t-value-content{min-block-size:1rem}.t-input-wrapper_collapsed{flex:0;margin-inline-start:-.5rem}.t-value-content:empty{display:none}.t-ghost{visibility:hidden;white-space:pre;text-overflow:clip;min-inline-size:.125rem}:host:not(._expandable) .t-ghost{min-inline-size:2rem}.t-native{margin:0;border-width:0;border-radius:inherit;background:none;font-size:inherit;line-height:inherit;font-weight:inherit;color:inherit;caret-color:currentColor;outline:none;-webkit-appearance:none;appearance:none;word-break:keep-all;-webkit-text-fill-color:currentColor;position:absolute;top:0;left:0;inline-size:100%;block-size:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-sizing:border-box;padding:0;cursor:inherit}.t-native:-webkit-autofill,.t-native:-webkit-autofill:hover,.t-native:-webkit-autofill:focus{-webkit-text-fill-color:var(--tui-text-primary)!important;border-color:var(--tui-service-autofill-background);box-shadow:0 0 0 100rem var(--tui-service-autofill-background) inset!important}.t-native[inputMode=none]{caret-color:transparent}.t-native_hidden{opacity:0;text-indent:-10em}.t-native::placeholder{color:var(--tui-text-tertiary);opacity:0}:host-context([tuiTheme=\"dark\"]) .t-native::placeholder{color:var(--tui-text-tertiary)}:host._focused .t-native:not(:read-only)::placeholder{opacity:1}.t-error-icon{display:block;color:var(--tui-status-negative);font-size:1rem}:host._readonly .t-textfield-icon ::ng-deep [tuiAppearance][data-appearance=icon]{pointer-events:none}@media (hover: hover) and (pointer: fine){:host:not(._readonly):not(._disabled):hover .t-textfield-icon ::ng-deep [tuiAppearance][data-appearance=icon]:after{color:var(--tui-text-secondary)}}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4.PolymorpheusOutlet, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }, { kind: "component", type: i5.TuiScrollbar, selector: "tui-scrollbar", inputs: ["hidden"] }, { kind: "component", type: i6.TuiTooltipComponent, selector: "tui-tooltip", inputs: ["content", "direction", "appearance", "showDelay", "hideDelay", "describeId", "context"] }, { kind: "component", type: i7.TuiTagComponent, selector: "tui-tag, a[tuiTag], button[tuiTag]", inputs: ["value", "editable", "separator", "maxLength", "size", "showLoader", "status", "hoverable", "removable", "disabled", "autoColor", "leftContent"], outputs: ["edited"] }, { kind: "directive", type: i8.TuiWrapperDirective, selector: "[tuiWrapper]", inputs: ["disabled", "readOnly", "hover", "active", "focus", "invalid", "appearance"] }, { kind: "directive", type: i8.TuiLegacyDropdownOpenMonitorDirective, selector: "[tuiDropdownOpenMonitor]" }, { kind: "directive", type: i9.TuiAppearance, selector: "[tuiAppearance]", inputs: ["tuiAppearance", "tuiAppearanceState", "tuiAppearanceFocus", "tuiAppearanceMode"] }, { kind: "component", type: i10.TuiIcon, selector: "tui-icon", inputs: ["icon", "background"] }, { kind: "directive", type: i1.TuiDropdownDirective, selector: "[tuiDropdown]:not(ng-container):not(ng-template)", inputs: ["tuiDropdown"], exportAs: ["tuiDropdown"] }, { kind: "directive", type: i1.TuiDropdownOpen, selector: "[tuiDropdown][tuiDropdownOpen],[tuiDropdown][tuiDropdownOpenChange]", inputs: ["tuiDropdownEnabled", "tuiDropdownOpen"], outputs: ["tuiDropdownOpenChange"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], queries: [{ propertyName: "datalist", first: true, predicate: TuiDataListDirective, descendants: true, read: TemplateRef }, { propertyName: "valueContent", first: true, predicate: PolymorpheusOutlet, descendants: true }], viewQueries: [{ propertyName: "dropdown", first: true, predicate: TuiDropdownOpen, descendants: true }, { propertyName: "focusableElement", first: true, predicate: ["focusableElement"], descendants: true }, { propertyName: "tagsContainer", first: true, predicate: ["tagsContainer"], descendants: true }, { propertyName: "cleanerSvg", first: true, predicate: ["cleaner"], descendants: true, read: ElementRef }, { propertyName: "scrollBar", first: true, predicate: TuiScrollbar, descendants: true, read: ElementRef }, { propertyName: "errorIconTemplate", first: true, predicate: ["errorIcon"], descendants: true }, { propertyName: "tags", predicate: ["tag"], descendants: true, read: ElementRef }], usesInheritance: true, hostDirectives: [{ directive: i1.TuiDropdownFixed }], ngImport: i0, template: "<ng-container *ngIf=\"hintOptions?.change$ | async\" />\n<div\n    tuiDropdownOpenMonitor\n    class=\"t-hosted\"\n    [tuiDropdown]=\"datalist || ''\"\n    [tuiDropdownEnabled]=\"canOpen\"\n    [(tuiDropdownOpen)]=\"open\"\n    (tuiActiveZoneChange)=\"onActiveZone($event)\"\n>\n    <div\n        tuiWrapper\n        [appearance]=\"appearance\"\n        [disabled]=\"computedDisabled\"\n        [focus]=\"computedFocused\"\n        [hover]=\"pseudoHover\"\n        [invalid]=\"computedInvalid\"\n        [readOnly]=\"readOnly\"\n        (click.prevent.zoneless)=\"detectRetargetFromLabel($event)\"\n        (mousedown)=\"onMouseDown($event)\"\n    >\n        <div class=\"t-content\">\n            <div\n                *ngIf=\"iconStart\"\n                class=\"t-icon t-icon_left t-textfield-icon t-icon-wrapper\"\n            >\n                <tui-icon\n                    *polymorpheusOutlet=\"iconStart as src; context: {$implicit: size}\"\n                    tuiAppearance=\"icon\"\n                    [icon]=\"src.toString()\"\n                />\n            </div>\n            <div class=\"t-wrapper\">\n                <div class=\"t-absolute-wrapper\">\n                    <div\n                        *ngIf=\"hasPlaceholder\"\n                        automation-id=\"tui-input-tag__placeholder\"\n                        class=\"t-placeholder\"\n                        [class.t-placeholder_raised]=\"placeholderRaised\"\n                    >\n                        <ng-content />\n                    </div>\n                </div>\n                <tui-scrollbar\n                    class=\"t-scrollbar\"\n                    [hidden]=\"!expandable\"\n                    [style.maxHeight.rem]=\"computeMaxHeight\"\n                >\n                    <div\n                        class=\"t-tags\"\n                        [class.t-tags_empty]=\"tagsEmpty\"\n                    >\n                        <ng-container *ngIf=\"labelOutside; else text\">\n                            <tui-tag\n                                *ngFor=\"let item of value; index as index; trackBy: trackByFn\"\n                                #tag\n                                automation-id=\"tui-input-tag__tag\"\n                                tabIndex=\"-1\"\n                                class=\"t-tag\"\n                                [autoColor]=\"autoColor\"\n                                [disabled]=\"computedDisabled || disabledItemHandler(item)\"\n                                [editable]=\"editable && !readOnly\"\n                                [hoverable]=\"!readOnly\"\n                                [leftContent]=\"getLeftContent(item)\"\n                                [maxLength]=\"maxLength\"\n                                [removable]=\"!readOnly && removable\"\n                                [separator]=\"separator\"\n                                [size]=\"controller.size\"\n                                [status]=\"status\"\n                                [value]=\"item.toString()\"\n                                (edited)=\"onTagEdited($event, index)\"\n                                (keydown.arrowLeft.prevent)=\"onTagKeyDownArrowLeft(index)\"\n                                (keydown.arrowRight.prevent)=\"onTagKeyDownArrowRight(index)\"\n                            />\n                        </ng-container>\n                        <ng-template #text>\n                            <span\n                                *ngFor=\"let item of value\"\n                                class=\"t-text\"\n                                [class.t-text_comma]=\"computedFocused && !inputHidden\"\n                                [class.t-text_disabled]=\"disabledItemHandler(item)\"\n                                [class.t-text_error]=\"!tagValidator(item)\"\n                                [textContent]=\"item\"\n                            ></span>\n                        </ng-template>\n                        <div\n                            class=\"t-input-wrapper\"\n                            [class.t-input-wrapper_collapsed]=\"computedDisabled || readOnly || inputHidden\"\n                        >\n                            <div class=\"t-ghost\">{{ search }}</div>\n                            <input\n                                #focusableElement\n                                automation-id=\"tui-input-tag__native\"\n                                type=\"text\"\n                                class=\"t-native\"\n                                [attr.maxLength]=\"maxLength\"\n                                [class.t-native_hidden]=\"inputHidden\"\n                                [disabled]=\"computedDisabled\"\n                                [id]=\"id\"\n                                [ngModel]=\"search\"\n                                [ngModelOptions]=\"{standalone: true}\"\n                                [placeholder]=\"placeholder\"\n                                [readOnly]=\"readOnly || inputHidden\"\n                                [tabIndex]=\"computedFocusable ? 0 : -1\"\n                                (drop.prevent)=\"onDrop($any($event))\"\n                                (keydown.arrowLeft)=\"onFieldKeyDownArrowLeft($event)\"\n                                (keydown.backspace)=\"onFieldKeyDownBackspace($event)\"\n                                (keydown.enter.prevent)=\"onFieldKeyDownEnter()\"\n                                (ngModelChange)=\"onInput($event)\"\n                                (paste.prevent)=\"onPaste($event)\"\n                            />\n                        </div>\n                    </div>\n                    <div class=\"t-value-content\">\n                        <ng-content select=\"tuiContent\" />\n                    </div>\n                </tui-scrollbar>\n            </div>\n            <ng-content select=\"select\" />\n            <div\n                *ngIf=\"hasRightIcons\"\n                class=\"t-icons t-icon-wrapper\"\n            >\n                <ng-container *ngIf=\"hasCleaner\">\n                    <tui-icon\n                        *polymorpheusOutlet=\"iconCleaner as src; context: {$implicit: size}\"\n                        #cleaner\n                        automation-id=\"tui-input-tag__cleaner\"\n                        tuiAppearance=\"icon\"\n                        class=\"t-cleaner\"\n                        [icon]=\"src.toString()\"\n                        (click.stop)=\"onCleanerClick()\"\n                    />\n                </ng-container>\n                <tui-tooltip\n                    *ngIf=\"showHint\"\n                    automation-id=\"tui-input-tag__tooltip\"\n                    class=\"t-tooltip\"\n                    [content]=\"hintOptions?.content\"\n                    [describeId]=\"id\"\n                />\n                <div\n                    *ngIf=\"icon\"\n                    class=\"t-icon t-textfield-icon\"\n                >\n                    <tui-icon\n                        *polymorpheusOutlet=\"icon as src; context: {$implicit: size}\"\n                        tuiAppearance=\"icon\"\n                        [icon]=\"src.toString()\"\n                    />\n                </div>\n            </div>\n        </div>\n        <ng-template #errorIcon>\n            <tui-icon\n                class=\"t-error-icon\"\n                [icon]=\"icons.error\"\n            />\n        </ng-template>\n    </div>\n</div>\n", styles: [":host{position:relative;display:block;text-align:start;border-radius:var(--tui-radius-m);block-size:var(--tui-height);min-block-size:var(--tui-height);max-block-size:var(--tui-height)}:host[data-size=s]{--tui-height: var(--tui-height-s);font:var(--tui-font-text-ui-s);line-height:1rem}:host[data-size=m]{--tui-height: var(--tui-height-m);font:var(--tui-font-text-ui-s);line-height:1rem}:host[data-size=l]{--tui-height: var(--tui-height-l);border-radius:var(--tui-radius-l);font:var(--tui-font-text-ui-m);line-height:1.25rem}:host :host-context(*:disabled){pointer-events:none}.t-input{padding:0;margin:0;border-width:0;border-radius:inherit;background:none;font-size:inherit;line-height:inherit;font-weight:inherit;color:inherit;caret-color:currentColor;outline:none;-webkit-appearance:none;appearance:none;word-break:keep-all;-webkit-text-fill-color:currentColor;position:absolute;top:0;left:0;inline-size:100%;block-size:100%;border-style:solid;border-color:transparent;border-inline-start-width:var(--t-border-start, 0);border-inline-end-width:var(--t-border-end, 0);text-indent:var(--t-text-indent);color:var(--tui-text-primary);text-align:inherit;box-sizing:border-box;white-space:nowrap;overflow:hidden;text-transform:inherit;resize:none}.t-input:-webkit-autofill,.t-input:-webkit-autofill:hover,.t-input:-webkit-autofill:focus{-webkit-text-fill-color:var(--tui-text-primary)!important;border-color:var(--tui-service-autofill-background);box-shadow:0 0 0 100rem var(--tui-service-autofill-background) inset!important}.t-input[inputMode=none]{caret-color:transparent}.t-input::-webkit-inner-spin-button,.t-input::-webkit-outer-spin-button{-webkit-appearance:none;appearance:none}.t-input:-webkit-autofill,.t-input:-webkit-autofill:first-line{font-size:inherit;line-height:inherit}.t-input::-webkit-caps-lock-indicator,.t-input::-webkit-contacts-auto-fill-button,.t-input::-webkit-credit-card-auto-fill-button,.t-input::-webkit-credentials-auto-fill-button,.t-input::-webkit-strong-password-auto-fill-button{content:none!important;position:absolute;left:-62.4375rem;top:-62.4375rem;z-index:-999;display:none!important;background:transparent!important;pointer-events:none!important}.t-input::placeholder{color:var(--tui-text-secondary);opacity:0}:host._focused:not(._readonly) .t-input::placeholder,:host-context(tui-primitive-textfield._focused:not(._readonly)) .t-input::placeholder,:host-context(tui-textarea._focused:not(._readonly)) .t-input::placeholder,:host-context(tui-text-area._focused:not(._readonly)) .t-input::placeholder{opacity:1}:host[data-size=s] .t-input,.t-input :host-context(tui-primitive-textfield[data-size=\"s\"]):not(tui-primitive-textfield),.t-input :host-context(tui-textarea[data-size=\"s\"]):not(tui-textarea),.t-input :host-context(tui-text-area[data-size=\"s\"]):not(tui-text-area){padding:0 var(--tui-padding-s)}:host[data-size=m] .t-input,.t-input :host-context(tui-primitive-textfield[data-size=\"m\"]):not(tui-primitive-textfield),.t-input :host-context(tui-textarea[data-size=\"m\"]):not(tui-textarea),.t-input :host-context(tui-text-area[data-size=\"m\"]):not(tui-text-area){padding:0 var(--tui-padding-m)}:host[data-size=l] .t-input,.t-input :host-context(tui-primitive-textfield[data-size=\"l\"]):not(tui-primitive-textfield),.t-input :host-context(tui-textarea[data-size=\"l\"]):not(tui-textarea),.t-input :host-context(tui-text-area[data-size=\"l\"]):not(tui-text-area){padding:0 var(--tui-padding-l)}:host._disabled .t-input,.t-input :host-context(tui-primitive-textfield._disabled),.t-input :host-context(tui-textarea._disabled),.t-input :host-context(tui-text-area._disabled){pointer-events:none}:host[data-size=l]:not(._label-outside) .t-input,.t-input :host-context(tui-primitive-textfield[data-size=\"l\"]:not(._label-outside)):not(tui-primitive-textfield){padding-block-start:1.25rem}:host[data-size=m]:not(._label-outside) .t-input,.t-input :host-context(tui-primitive-textfield[data-size=\"m\"]:not(._label-outside)):not(tui-primitive-textfield){padding-block-start:1rem}:host[data-size=l]:not(._label-outside) .t-input{padding-block-start:1.25rem}:host[data-size=l]:not(._label-outside) .t-input:-webkit-autofill+.t-content .t-placeholder{font:var(--tui-font-text-s);line-height:1.25rem;transform:translateY(-.75rem)}:host[data-size=m]:not(._label-outside) .t-input:-webkit-autofill+.t-content .t-placeholder{font:var(--tui-font-text-xs);line-height:1.25rem;transform:translateY(-.5625rem)}:host._hidden input.t-input,.t-input :host-context(tui-primitive-textfield._hidden){opacity:0;text-indent:-10em}.t-content{display:flex;block-size:100%;inline-size:100%;box-sizing:border-box;align-items:center;overflow:hidden}:host[data-size=s] .t-content{padding:0 var(--tui-padding-s)}:host[data-size=m] .t-content{padding:0 var(--tui-padding-m)}:host[data-size=l] .t-content{padding:0 var(--tui-padding-l)}.t-wrapper{flex:1;min-inline-size:0;padding-inline-end:.25rem}.t-placeholder{transition-property:transform,font-size,color,letter-spacing;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;inline-size:100%;-webkit-user-select:none;user-select:none;font:var(--tui-font-text-s);color:var(--tui-text-secondary);pointer-events:none;will-change:transform;transform:translateY(0)}@supports (-webkit-hyphens: none){.t-placeholder{will-change:unset;transition-property:transform,color,letter-spacing}}.t-placeholder_raised{transform:translateY(-.75rem)}:host[data-size=m] .t-placeholder_raised{font:var(--tui-font-text-xs);line-height:1.25rem;transform:translateY(-.5625rem);letter-spacing:.025rem}:host._invalid:not(._focused) .t-placeholder_raised,:host._invalid:not(._focused):hover .t-placeholder_raised{color:var(--tui-text-negative)}:host._focused .t-placeholder,:host[data-size=m]._focused._label-outside .t-placeholder,:host[data-size=l]._focused._label-outside .t-placeholder{color:var(--tui-text-tertiary)}:host[data-size=l] .t-placeholder{font:var(--tui-font-text-ui-m);line-height:1.25rem}:host[data-size=l] .t-placeholder_raised{font:var(--tui-font-text-s);line-height:1.25rem}:host[data-size=m]._focused:not(._label-outside) .t-placeholder,:host[data-size=l]._focused:not(._label-outside) .t-placeholder{color:var(--tui-text-primary)}.t-cleaner{position:relative;display:flex;inline-size:1.5rem;block-size:1.5rem;align-items:center;justify-content:center;box-sizing:border-box;cursor:pointer;pointer-events:none;pointer-events:auto;border-width:.25rem}:host._readonly .t-cleaner,:host._disabled .t-cleaner{pointer-events:none}.t-icon{position:relative;display:flex;inline-size:1.5rem;block-size:1.5rem;align-items:center;justify-content:center;box-sizing:border-box;cursor:pointer;pointer-events:none}:host[data-size=s] .t-icon_left{margin:0 .125rem 0 -.375rem}:host[data-size=m] .t-icon_left{margin-inline-start:-.125rem;margin-inline-end:.375rem}:host[data-size=l] .t-icon_left{margin-inline-end:.75rem}.t-icons{display:flex;align-items:center}:host[data-size=m] .t-icons{margin-inline-end:-.125rem}:host[data-size=s] .t-icons{margin-inline-end:-.375rem}:host:not([data-size=s]) .t-icons>:not(:first-child){margin-inline-start:.25rem}:host{cursor:text}:host._expandable{block-size:auto;max-block-size:none}:host._disabled,:host :host-context(*:disabled){pointer-events:none}:host._readonly{cursor:default}:host[data-size=m]{line-height:1rem}.t-hosted{display:block;border-radius:inherit}.t-scrollbar{scroll-behavior:var(--tui-scroll-behavior);margin-inline-start:-.25rem;min-inline-size:100%}:host:not(._label-outside) .t-scrollbar,:host._label-outside._icon-start .t-scrollbar{margin:0}:host[data-size=s]._icon-start .t-scrollbar{margin-inline-start:.25rem}:host[data-size=m]:not(._label-outside) .t-scrollbar{border-block-start:1rem solid transparent}:host[data-size=l]:not(._label-outside) .t-scrollbar{border-block-start:1.25rem solid transparent}.t-tags{display:flex;padding-inline-start:.25rem}.t-tags_expandable{overflow:hidden}.t-tags_empty{block-size:0}:host._expandable .t-tags{flex-wrap:wrap;white-space:normal;overflow:hidden}:host._readonly .t-tags{pointer-events:none}:host[data-size=m]:not(._label-outside) .t-tags,:host[data-size=l]:not(._label-outside) .t-tags{padding:0}.t-tags tui-tag:last-of-type{max-inline-size:80%}.t-content{align-items:flex-start}:host[data-size=s] .t-content{min-block-size:var(--tui-height-s)}:host[data-size=m] .t-content{min-block-size:var(--tui-height-m)}:host[data-size=l] .t-content{min-block-size:var(--tui-height-l)}:host[data-size=s] .t-icon-wrapper{block-size:var(--tui-height-s)}:host[data-size=m] .t-icon-wrapper{block-size:var(--tui-height-m)}:host[data-size=l] .t-icon-wrapper{block-size:var(--tui-height-l)}.t-absolute-wrapper{position:absolute;top:0;left:0;inline-size:100%;block-size:100%;display:flex;flex-direction:column;justify-content:center}:host[data-size=m] .t-absolute-wrapper{block-size:var(--tui-height-m)}:host[data-size=l] .t-absolute-wrapper{block-size:var(--tui-height-l)}.t-wrapper{position:relative;display:flex;align-items:center;padding:0;box-sizing:border-box}:host[data-size=s] .t-wrapper{min-block-size:var(--tui-height-s);padding:calc((var(--tui-height-s) - 1.5rem) / 2) 0}:host[data-size=m] .t-wrapper{min-block-size:var(--tui-height-m);padding:calc((var(--tui-height-m) - var(--tui-height-xs) - .25rem) / 2) 0}:host[data-size=l] .t-wrapper{padding:calc((var(--tui-height-l) - var(--tui-height-s) - .25rem) / 2) 0}:host[data-size=m]:not(._label-outside) .t-wrapper{padding:calc((var(--tui-height-m) - 2rem) / 2) 0}:host[data-size=l]:not(._label-outside) .t-wrapper{padding:calc((var(--tui-height-l) - 2.5rem) / 2) 0}.t-tag{margin:.125rem .5rem .125rem -.25rem;margin-inline-start:-.25rem;margin-inline-end:.5rem;max-inline-size:100%;flex-shrink:0}:host[data-size=m] .t-tag{margin-inline-start:-.125rem;margin-inline-end:.375rem}.t-text:after{content:\",\\a0\"}.t-text_disabled{color:var(--tui-text-tertiary)}.t-text_error{color:var(--tui-text-negative)}.t-text:not(.t-text_comma):last-of-type:after{content:\"\"}:host:not(._expandable) .t-text{white-space:nowrap}.t-input-wrapper,.t-value-content{position:relative;display:flex;flex:1;max-inline-size:100%}:host[data-size=s] .t-input-wrapper,:host[data-size=s] .t-value-content{min-block-size:1.5rem}:host[data-size=m] .t-input-wrapper,:host[data-size=m] .t-value-content{min-block-size:calc(var(--tui-height-xs) + 2 * .125rem)}:host[data-size=l] .t-input-wrapper,:host[data-size=l] .t-value-content{min-block-size:calc(var(--tui-height-s) + 2 * .125rem)}:host:not(._label-outside) .t-input-wrapper,:host:not(._label-outside) .t-value-content{min-block-size:1rem}.t-input-wrapper_collapsed{flex:0;margin-inline-start:-.5rem}.t-value-content:empty{display:none}.t-ghost{visibility:hidden;white-space:pre;text-overflow:clip;min-inline-size:.125rem}:host:not(._expandable) .t-ghost{min-inline-size:2rem}.t-native{margin:0;border-width:0;border-radius:inherit;background:none;font-size:inherit;line-height:inherit;font-weight:inherit;color:inherit;caret-color:currentColor;outline:none;-webkit-appearance:none;appearance:none;word-break:keep-all;-webkit-text-fill-color:currentColor;position:absolute;top:0;left:0;inline-size:100%;block-size:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-sizing:border-box;padding:0;cursor:inherit}.t-native:-webkit-autofill,.t-native:-webkit-autofill:hover,.t-native:-webkit-autofill:focus{-webkit-text-fill-color:var(--tui-text-primary)!important;border-color:var(--tui-service-autofill-background);box-shadow:0 0 0 100rem var(--tui-service-autofill-background) inset!important}.t-native[inputMode=none]{caret-color:transparent}.t-native_hidden{opacity:0;text-indent:-10em}.t-native::placeholder{color:var(--tui-text-tertiary);opacity:0}:host-context([tuiTheme=\"dark\"]) .t-native::placeholder{color:var(--tui-text-tertiary)}:host._focused .t-native:not(:read-only)::placeholder{opacity:1}.t-error-icon{display:block;color:var(--tui-status-negative);font-size:1rem}:host._readonly .t-textfield-icon ::ng-deep [tuiAppearance][data-appearance=icon]{pointer-events:none}@media (hover: hover) and (pointer: fine){:host:not(._readonly):not(._disabled):hover .t-textfield-icon ::ng-deep [tuiAppearance][data-appearance=icon]:after{color:var(--tui-text-secondary)}}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4.PolymorpheusOutlet, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }, { kind: "component", type: i5.TuiScrollbar, selector: "tui-scrollbar", inputs: ["hidden"] }, { kind: "component", type: i6.TuiTooltipComponent, selector: "tui-tooltip", inputs: ["content", "direction", "appearance", "showDelay", "hideDelay", "describeId", "context"] }, { kind: "component", type: i7.TuiTagComponent, selector: "tui-tag, a[tuiTag], button[tuiTag]", inputs: ["value", "editable", "separator", "maxLength", "size", "showLoader", "status", "hoverable", "removable", "disabled", "autoColor", "leftContent"], outputs: ["edited"] }, { kind: "directive", type: i8.TuiWrapperDirective, selector: "[tuiWrapper]", inputs: ["disabled", "readOnly", "hover", "active", "focus", "invalid", "appearance"] }, { kind: "directive", type: i8.TuiLegacyDropdownOpenMonitorDirective, selector: "[tuiDropdownOpenMonitor]" }, { kind: "directive", type: i9.TuiAppearance, selector: "[tuiAppearance]", inputs: ["tuiAppearance", "tuiAppearanceState", "tuiAppearanceFocus", "tuiAppearanceMode"] }, { kind: "component", type: i10.TuiIcon, selector: "tui-icon", inputs: ["icon", "background"] }, { kind: "directive", type: i1.TuiDropdownDirective, selector: "[tuiDropdown]:not(ng-container):not(ng-template)", inputs: ["tuiDropdown"], exportAs: ["tuiDropdown"] }, { kind: "directive", type: i1.TuiDropdownOpen, selector: "[tuiDropdown][tuiDropdownOpen],[tuiDropdown][tuiDropdownOpenChange]", inputs: ["tuiDropdownEnabled", "tuiDropdownOpen"], outputs: ["tuiDropdownOpenChange"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 export { TuiInputTagComponent };
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiInputTagComponent, decorators: [{
@@ -372,7 +372,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         '[class._label-outside]': 'labelOutside',
                         '(focusin.capture.zoneless)': 'onFocusInOut()',
                         '(focusout.capture.zoneless)': 'onFocusInOut()',
-                    }, template: "<ng-container *ngIf=\"hintOptions?.change$ | async\" />\n<div\n    tuiDropdownOpenMonitor\n    class=\"t-hosted\"\n    [tuiDropdown]=\"datalist || ''\"\n    [tuiDropdownEnabled]=\"canOpen\"\n    [(tuiDropdownOpen)]=\"open\"\n    (tuiActiveZoneChange)=\"onActiveZone($event)\"\n>\n    <div\n        tuiWrapper\n        [appearance]=\"appearance\"\n        [disabled]=\"computedDisabled\"\n        [focus]=\"computedFocused\"\n        [hover]=\"pseudoHover\"\n        [invalid]=\"computedInvalid\"\n        [readOnly]=\"readOnly\"\n        (click.prevent.zoneless)=\"detectRetargetFromLabel($event)\"\n        (mousedown)=\"onMouseDown($event)\"\n    >\n        <div class=\"t-content\">\n            <div\n                *ngIf=\"iconStart\"\n                class=\"t-icon t-icon_left t-textfield-icon t-icon-wrapper\"\n            >\n                <tui-icon\n                    *polymorpheusOutlet=\"iconStart as src; context: {$implicit: size}\"\n                    tuiAppearance=\"icon\"\n                    [icon]=\"src.toString()\"\n                />\n            </div>\n            <div class=\"t-wrapper\">\n                <div class=\"t-absolute-wrapper\">\n                    <div\n                        *ngIf=\"hasPlaceholder\"\n                        automation-id=\"tui-input-tag__placeholder\"\n                        class=\"t-placeholder\"\n                        [class.t-placeholder_raised]=\"placeholderRaised\"\n                    >\n                        <ng-content />\n                    </div>\n                </div>\n                <tui-scrollbar\n                    class=\"t-scrollbar\"\n                    [hidden]=\"!expandable\"\n                    [style.maxHeight.rem]=\"computeMaxHeight\"\n                >\n                    <div\n                        class=\"t-tags\"\n                        [class.t-tags_empty]=\"tagsEmpty\"\n                    >\n                        <ng-container *ngIf=\"labelOutside; else text\">\n                            <tui-tag\n                                *ngFor=\"let item of value; index as index; trackBy: trackByFn\"\n                                #tag\n                                automation-id=\"tui-input-tag__tag\"\n                                tabIndex=\"-1\"\n                                class=\"t-tag\"\n                                [autoColor]=\"autoColor\"\n                                [disabled]=\"computedDisabled || disabledItemHandler(item)\"\n                                [editable]=\"editable && !readOnly\"\n                                [hoverable]=\"!readOnly\"\n                                [leftContent]=\"getLeftContent(item)\"\n                                [maxLength]=\"maxLength\"\n                                [removable]=\"!readOnly && removable\"\n                                [separator]=\"separator\"\n                                [size]=\"controller.size\"\n                                [status]=\"status\"\n                                [value]=\"item.toString()\"\n                                (edited)=\"onTagEdited($event, index)\"\n                                (keydown.arrowLeft.prevent)=\"onTagKeyDownArrowLeft(index)\"\n                                (keydown.arrowRight.prevent)=\"onTagKeyDownArrowRight(index)\"\n                            />\n                        </ng-container>\n                        <ng-template #text>\n                            <span\n                                *ngFor=\"let item of value\"\n                                class=\"t-text\"\n                                [class.t-text_comma]=\"computedFocused && !inputHidden\"\n                                [class.t-text_disabled]=\"disabledItemHandler(item)\"\n                                [class.t-text_error]=\"!tagValidator(item)\"\n                                [textContent]=\"item\"\n                            ></span>\n                        </ng-template>\n                        <div\n                            class=\"t-input-wrapper\"\n                            [class.t-input-wrapper_collapsed]=\"computedDisabled || readOnly || inputHidden\"\n                        >\n                            <div class=\"t-ghost\">{{ search }}</div>\n                            <input\n                                #focusableElement\n                                automation-id=\"tui-input-tag__native\"\n                                type=\"text\"\n                                class=\"t-native\"\n                                [attr.maxLength]=\"maxLength\"\n                                [class.t-native_hidden]=\"inputHidden\"\n                                [disabled]=\"computedDisabled\"\n                                [id]=\"id\"\n                                [ngModel]=\"search\"\n                                [ngModelOptions]=\"{standalone: true}\"\n                                [placeholder]=\"placeholder\"\n                                [readOnly]=\"readOnly || inputHidden\"\n                                [tabIndex]=\"computedFocusable ? 0 : -1\"\n                                (drop.prevent)=\"onDrop($any($event))\"\n                                (keydown.arrowLeft)=\"onFieldKeyDownArrowLeft($event)\"\n                                (keydown.backspace)=\"onFieldKeyDownBackspace($event)\"\n                                (keydown.enter.prevent)=\"onFieldKeyDownEnter()\"\n                                (ngModelChange)=\"onInput($event)\"\n                                (paste.prevent)=\"onPaste($event)\"\n                            />\n                        </div>\n                    </div>\n                    <div class=\"t-value-content\">\n                        <ng-content select=\"tuiContent\" />\n                    </div>\n                </tui-scrollbar>\n            </div>\n            <ng-content select=\"select\" />\n            <div\n                *ngIf=\"hasRightIcons\"\n                class=\"t-icons t-icon-wrapper\"\n            >\n                <ng-container *ngIf=\"hasCleaner\">\n                    <tui-icon\n                        *polymorpheusOutlet=\"iconCleaner as src; context: {$implicit: size}\"\n                        #cleaner\n                        automation-id=\"tui-input-tag__cleaner\"\n                        tuiAppearance=\"icon\"\n                        class=\"t-cleaner\"\n                        [icon]=\"src.toString()\"\n                        (click.stop)=\"onCleanerClick()\"\n                    />\n                </ng-container>\n                <tui-tooltip\n                    *ngIf=\"showHint\"\n                    automation-id=\"tui-input-tag__tooltip\"\n                    class=\"t-tooltip\"\n                    [content]=\"hintOptions?.content\"\n                    [describeId]=\"id\"\n                />\n                <div\n                    *ngIf=\"icon\"\n                    class=\"t-icon t-textfield-icon\"\n                >\n                    <tui-icon\n                        *polymorpheusOutlet=\"icon as src; context: {$implicit: size}\"\n                        tuiAppearance=\"icon\"\n                        [icon]=\"src.toString()\"\n                    />\n                </div>\n            </div>\n        </div>\n        <ng-template #errorIcon>\n            <tui-icon\n                class=\"t-error-icon\"\n                [icon]=\"icons.error\"\n            />\n        </ng-template>\n    </div>\n</div>\n", styles: [":host{position:relative;display:block;text-align:start;border-radius:var(--tui-radius-m);block-size:var(--tui-height);min-block-size:var(--tui-height);max-block-size:var(--tui-height)}:host[data-size=s]{--tui-height: var(--tui-height-s);font:var(--tui-font-text-s)}:host[data-size=m]{--tui-height: var(--tui-height-m);font:var(--tui-font-text-s)}:host[data-size=l]{--tui-height: var(--tui-height-l);font:var(--tui-font-text-m);line-height:1.25rem}:host :host-context(*:disabled){pointer-events:none}.t-input{padding:0;margin:0;border-width:0;border-radius:inherit;background:none;font-size:inherit;line-height:inherit;font-weight:inherit;color:inherit;caret-color:currentColor;outline:none;-webkit-appearance:none;appearance:none;word-break:keep-all;-webkit-text-fill-color:currentColor;position:absolute;top:0;left:0;inline-size:100%;block-size:100%;border-style:solid;border-color:transparent;border-inline-start-width:var(--t-border-start, 0);border-inline-end-width:var(--t-border-end, 0);text-indent:var(--t-text-indent);color:var(--tui-text-primary);text-align:inherit;box-sizing:border-box;white-space:nowrap;overflow:hidden;text-transform:inherit;resize:none}.t-input:-webkit-autofill,.t-input:-webkit-autofill:hover,.t-input:-webkit-autofill:focus{-webkit-text-fill-color:var(--tui-text-primary)!important;border-color:var(--tui-service-autofill-background);box-shadow:0 0 0 100rem var(--tui-service-autofill-background) inset!important}.t-input[inputMode=none]{caret-color:transparent}.t-input::-webkit-inner-spin-button,.t-input::-webkit-outer-spin-button{-webkit-appearance:none;appearance:none}.t-input:-webkit-autofill,.t-input:-webkit-autofill:first-line{font-size:inherit;line-height:inherit}.t-input::-webkit-caps-lock-indicator,.t-input::-webkit-contacts-auto-fill-button,.t-input::-webkit-credit-card-auto-fill-button,.t-input::-webkit-credentials-auto-fill-button,.t-input::-webkit-strong-password-auto-fill-button{content:none!important;position:absolute;left:-62.4375rem;top:-62.4375rem;z-index:-999;display:none!important;background:transparent!important;pointer-events:none!important}.t-input::placeholder{color:var(--tui-text-tertiary);opacity:0}:host._focused:not(._readonly) .t-input::placeholder,:host-context(tui-primitive-textfield._focused:not(._readonly)) .t-input::placeholder,:host-context(tui-textarea._focused:not(._readonly)) .t-input::placeholder,:host-context(tui-text-area._focused:not(._readonly)) .t-input::placeholder{opacity:1}:host[data-size=s] .t-input,.t-input :host-context(tui-primitive-textfield[data-size=\"s\"]):not(tui-primitive-textfield),.t-input :host-context(tui-textarea[data-size=\"s\"]):not(tui-textarea),.t-input :host-context(tui-text-area[data-size=\"s\"]):not(tui-text-area){padding:0 var(--tui-padding-s)}:host[data-size=m] .t-input,.t-input :host-context(tui-primitive-textfield[data-size=\"m\"]):not(tui-primitive-textfield),.t-input :host-context(tui-textarea[data-size=\"m\"]):not(tui-textarea),.t-input :host-context(tui-text-area[data-size=\"m\"]):not(tui-text-area){padding:0 var(--tui-padding-m)}:host[data-size=l] .t-input,.t-input :host-context(tui-primitive-textfield[data-size=\"l\"]):not(tui-primitive-textfield),.t-input :host-context(tui-textarea[data-size=\"l\"]):not(tui-textarea),.t-input :host-context(tui-text-area[data-size=\"l\"]):not(tui-text-area){padding:0 var(--tui-padding-l)}:host._disabled .t-input,.t-input :host-context(tui-primitive-textfield._disabled),.t-input :host-context(tui-textarea._disabled),.t-input :host-context(tui-text-area._disabled){pointer-events:none}:host[data-size=l]:not(._label-outside) .t-input,.t-input :host-context(tui-primitive-textfield[data-size=\"l\"]:not(._label-outside)):not(tui-primitive-textfield){padding-block-start:1.25rem}:host[data-size=m]:not(._label-outside) .t-input,.t-input :host-context(tui-primitive-textfield[data-size=\"m\"]:not(._label-outside)):not(tui-primitive-textfield){padding-block-start:1rem}:host[data-size=l]:not(._label-outside) .t-input{padding-block-start:1.25rem}:host[data-size=l]:not(._label-outside) .t-input:-webkit-autofill+.t-content .t-placeholder{font-size:.8156rem;transform:translateY(-.625rem)}:host[data-size=m]:not(._label-outside) .t-input:-webkit-autofill+.t-content .t-placeholder{font-size:.69rem;transform:translateY(-.5rem)}:host._hidden input.t-input,.t-input :host-context(tui-primitive-textfield._hidden){opacity:0;text-indent:-10em}.t-content{display:flex;block-size:100%;inline-size:100%;box-sizing:border-box;align-items:center;overflow:hidden}:host[data-size=s] .t-content{padding:0 var(--tui-padding-s)}:host[data-size=m] .t-content{padding:0 var(--tui-padding-m)}:host[data-size=l] .t-content{padding:0 var(--tui-padding-l)}.t-wrapper{flex:1;min-inline-size:0;padding-inline-end:.25rem}.t-placeholder{transition-property:transform,font-size,color,letter-spacing;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;inline-size:100%;-webkit-user-select:none;user-select:none;font:var(--tui-font-text-s);color:var(--tui-text-secondary);pointer-events:none;will-change:transform;transform:translateY(0)}@supports (-webkit-hyphens: none){.t-placeholder{will-change:unset;transition-property:transform,color,letter-spacing}}.t-placeholder_raised{transform:translateY(-.625rem)}:host[data-size=m] .t-placeholder_raised{font:var(--tui-font-text-xs);line-height:1.25rem;transform:translateY(-.5rem);letter-spacing:.025rem}:host._invalid:not(._focused) .t-placeholder_raised,:host._invalid:not(._focused):hover .t-placeholder_raised{color:var(--tui-text-negative)}:host._focused .t-placeholder,:host[data-size=m]._focused._label-outside .t-placeholder,:host[data-size=l]._focused._label-outside .t-placeholder{color:var(--tui-text-tertiary)}:host[data-size=l] .t-placeholder{font:var(--tui-font-text-m);line-height:1.25rem}:host[data-size=l] .t-placeholder_raised{font-size:.8156rem}:host[data-size=m]._focused:not(._label-outside) .t-placeholder,:host[data-size=l]._focused:not(._label-outside) .t-placeholder{color:var(--tui-text-primary)}.t-cleaner{position:relative;display:flex;inline-size:1.5rem;block-size:1.5rem;align-items:center;justify-content:center;box-sizing:border-box;cursor:pointer;pointer-events:none;pointer-events:auto;border-width:.25rem}:host._readonly .t-cleaner,:host._disabled .t-cleaner{pointer-events:none}.t-icon{position:relative;display:flex;inline-size:1.5rem;block-size:1.5rem;align-items:center;justify-content:center;box-sizing:border-box;cursor:pointer;pointer-events:none}:host[data-size=s] .t-icon_left{margin:0 .125rem 0 -.375rem}:host[data-size=m] .t-icon_left{margin-inline-start:-.125rem;margin-inline-end:.375rem}:host[data-size=l] .t-icon_left{margin-inline-end:.75rem}.t-icons{display:flex;align-items:center}:host[data-size=m] .t-icons{margin-inline-end:-.125rem}:host[data-size=s] .t-icons{margin-inline-end:-.375rem}:host:not([data-size=s]) .t-icons>:not(:first-child){margin-inline-start:.25rem}:host{cursor:text}:host._expandable{block-size:auto;max-block-size:none}:host._disabled,:host :host-context(*:disabled){pointer-events:none}:host._readonly{cursor:default}:host[data-size=m]{line-height:1rem}.t-hosted{display:block;border-radius:inherit}.t-scrollbar{scroll-behavior:var(--tui-scroll-behavior);margin-inline-start:-.25rem;min-inline-size:100%}:host:not(._label-outside) .t-scrollbar,:host._label-outside._icon-start .t-scrollbar{margin:0}:host[data-size=s]._icon-start .t-scrollbar{margin-inline-start:.25rem}:host[data-size=m]:not(._label-outside) .t-scrollbar{border-block-start:1rem solid transparent}:host[data-size=l]:not(._label-outside) .t-scrollbar{border-block-start:1.25rem solid transparent}.t-tags{display:flex;padding-inline-start:.25rem}.t-tags_expandable{overflow:hidden}.t-tags_empty{block-size:0}:host._expandable .t-tags{flex-wrap:wrap;white-space:normal;overflow:hidden}:host._readonly .t-tags{pointer-events:none}:host[data-size=m]:not(._label-outside) .t-tags,:host[data-size=l]:not(._label-outside) .t-tags{padding:0}.t-tags tui-tag:last-of-type{max-inline-size:80%}.t-content{align-items:flex-start}:host[data-size=s] .t-content{min-block-size:var(--tui-height-s)}:host[data-size=m] .t-content{min-block-size:var(--tui-height-m)}:host[data-size=l] .t-content{min-block-size:var(--tui-height-l)}:host[data-size=s] .t-icon-wrapper{block-size:var(--tui-height-s)}:host[data-size=m] .t-icon-wrapper{block-size:var(--tui-height-m)}:host[data-size=l] .t-icon-wrapper{block-size:var(--tui-height-l)}.t-absolute-wrapper{position:absolute;top:0;left:0;inline-size:100%;block-size:100%;display:flex;flex-direction:column;justify-content:center}:host[data-size=m] .t-absolute-wrapper{block-size:var(--tui-height-m)}:host[data-size=l] .t-absolute-wrapper{block-size:var(--tui-height-l)}.t-wrapper{position:relative;display:flex;align-items:center;padding:0;box-sizing:border-box}:host[data-size=s] .t-wrapper{min-block-size:var(--tui-height-s);padding:calc((var(--tui-height-s) - 1.5rem) / 2) 0}:host[data-size=m] .t-wrapper{min-block-size:var(--tui-height-m);padding:calc((var(--tui-height-m) - var(--tui-height-xs) - .25rem) / 2) 0}:host[data-size=l] .t-wrapper{padding:calc((var(--tui-height-l) - var(--tui-height-s) - .25rem) / 2) 0}:host[data-size=m]:not(._label-outside) .t-wrapper{padding:calc((var(--tui-height-m) - 2rem) / 2) 0}:host[data-size=l]:not(._label-outside) .t-wrapper{padding:calc((var(--tui-height-l) - 2.5rem) / 2) 0}.t-tag{margin:.125rem .5rem .125rem -.25rem;margin-inline-start:-.25rem;margin-inline-end:.5rem;max-inline-size:100%;flex-shrink:0}:host[data-size=m] .t-tag{margin-inline-start:-.125rem;margin-inline-end:.375rem}.t-text:after{content:\",\\a0\"}.t-text_disabled{color:var(--tui-text-tertiary)}.t-text_error{color:var(--tui-text-negative)}.t-text:not(.t-text_comma):last-of-type:after{content:\"\"}:host:not(._expandable) .t-text{white-space:nowrap}.t-input-wrapper,.t-value-content{position:relative;display:flex;flex:1;max-inline-size:100%}:host[data-size=s] .t-input-wrapper,:host[data-size=s] .t-value-content{min-block-size:1.5rem}:host[data-size=m] .t-input-wrapper,:host[data-size=m] .t-value-content{min-block-size:calc(var(--tui-height-xs) + 2 * .125rem)}:host[data-size=l] .t-input-wrapper,:host[data-size=l] .t-value-content{min-block-size:calc(var(--tui-height-s) + 2 * .125rem)}:host:not(._label-outside) .t-input-wrapper,:host:not(._label-outside) .t-value-content{min-block-size:1rem}.t-input-wrapper_collapsed{flex:0;margin-inline-start:-.5rem}.t-value-content:empty{display:none}.t-ghost{visibility:hidden;white-space:pre;text-overflow:clip;min-inline-size:.125rem}:host:not(._expandable) .t-ghost{min-inline-size:2rem}.t-native{margin:0;border-width:0;border-radius:inherit;background:none;font-size:inherit;line-height:inherit;font-weight:inherit;color:inherit;caret-color:currentColor;outline:none;-webkit-appearance:none;appearance:none;word-break:keep-all;-webkit-text-fill-color:currentColor;position:absolute;top:0;left:0;inline-size:100%;block-size:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-sizing:border-box;padding:0;cursor:inherit}.t-native:-webkit-autofill,.t-native:-webkit-autofill:hover,.t-native:-webkit-autofill:focus{-webkit-text-fill-color:var(--tui-text-primary)!important;border-color:var(--tui-service-autofill-background);box-shadow:0 0 0 100rem var(--tui-service-autofill-background) inset!important}.t-native[inputMode=none]{caret-color:transparent}.t-native_hidden{opacity:0;text-indent:-10em}.t-native::placeholder{color:var(--tui-text-tertiary);opacity:0}:host-context([tuiTheme=\"dark\"]) .t-native::placeholder{color:var(--tui-text-tertiary)}:host._focused .t-native:not(:read-only)::placeholder{opacity:1}.t-error-icon{display:block;color:var(--tui-status-negative);font-size:1rem}:host._readonly .t-textfield-icon ::ng-deep [tuiAppearance][data-appearance=icon]{pointer-events:none}@media (hover: hover) and (pointer: fine){:host:not(._readonly):not(._disabled):hover .t-textfield-icon ::ng-deep [tuiAppearance][data-appearance=icon]:after{color:var(--tui-text-secondary)}}\n"] }]
+                    }, template: "<ng-container *ngIf=\"hintOptions?.change$ | async\" />\n<div\n    tuiDropdownOpenMonitor\n    class=\"t-hosted\"\n    [tuiDropdown]=\"datalist || ''\"\n    [tuiDropdownEnabled]=\"canOpen\"\n    [(tuiDropdownOpen)]=\"open\"\n    (tuiActiveZoneChange)=\"onActiveZone($event)\"\n>\n    <div\n        tuiWrapper\n        [appearance]=\"appearance\"\n        [disabled]=\"computedDisabled\"\n        [focus]=\"computedFocused\"\n        [hover]=\"pseudoHover\"\n        [invalid]=\"computedInvalid\"\n        [readOnly]=\"readOnly\"\n        (click.prevent.zoneless)=\"detectRetargetFromLabel($event)\"\n        (mousedown)=\"onMouseDown($event)\"\n    >\n        <div class=\"t-content\">\n            <div\n                *ngIf=\"iconStart\"\n                class=\"t-icon t-icon_left t-textfield-icon t-icon-wrapper\"\n            >\n                <tui-icon\n                    *polymorpheusOutlet=\"iconStart as src; context: {$implicit: size}\"\n                    tuiAppearance=\"icon\"\n                    [icon]=\"src.toString()\"\n                />\n            </div>\n            <div class=\"t-wrapper\">\n                <div class=\"t-absolute-wrapper\">\n                    <div\n                        *ngIf=\"hasPlaceholder\"\n                        automation-id=\"tui-input-tag__placeholder\"\n                        class=\"t-placeholder\"\n                        [class.t-placeholder_raised]=\"placeholderRaised\"\n                    >\n                        <ng-content />\n                    </div>\n                </div>\n                <tui-scrollbar\n                    class=\"t-scrollbar\"\n                    [hidden]=\"!expandable\"\n                    [style.maxHeight.rem]=\"computeMaxHeight\"\n                >\n                    <div\n                        class=\"t-tags\"\n                        [class.t-tags_empty]=\"tagsEmpty\"\n                    >\n                        <ng-container *ngIf=\"labelOutside; else text\">\n                            <tui-tag\n                                *ngFor=\"let item of value; index as index; trackBy: trackByFn\"\n                                #tag\n                                automation-id=\"tui-input-tag__tag\"\n                                tabIndex=\"-1\"\n                                class=\"t-tag\"\n                                [autoColor]=\"autoColor\"\n                                [disabled]=\"computedDisabled || disabledItemHandler(item)\"\n                                [editable]=\"editable && !readOnly\"\n                                [hoverable]=\"!readOnly\"\n                                [leftContent]=\"getLeftContent(item)\"\n                                [maxLength]=\"maxLength\"\n                                [removable]=\"!readOnly && removable\"\n                                [separator]=\"separator\"\n                                [size]=\"controller.size\"\n                                [status]=\"status\"\n                                [value]=\"item.toString()\"\n                                (edited)=\"onTagEdited($event, index)\"\n                                (keydown.arrowLeft.prevent)=\"onTagKeyDownArrowLeft(index)\"\n                                (keydown.arrowRight.prevent)=\"onTagKeyDownArrowRight(index)\"\n                            />\n                        </ng-container>\n                        <ng-template #text>\n                            <span\n                                *ngFor=\"let item of value\"\n                                class=\"t-text\"\n                                [class.t-text_comma]=\"computedFocused && !inputHidden\"\n                                [class.t-text_disabled]=\"disabledItemHandler(item)\"\n                                [class.t-text_error]=\"!tagValidator(item)\"\n                                [textContent]=\"item\"\n                            ></span>\n                        </ng-template>\n                        <div\n                            class=\"t-input-wrapper\"\n                            [class.t-input-wrapper_collapsed]=\"computedDisabled || readOnly || inputHidden\"\n                        >\n                            <div class=\"t-ghost\">{{ search }}</div>\n                            <input\n                                #focusableElement\n                                automation-id=\"tui-input-tag__native\"\n                                type=\"text\"\n                                class=\"t-native\"\n                                [attr.maxLength]=\"maxLength\"\n                                [class.t-native_hidden]=\"inputHidden\"\n                                [disabled]=\"computedDisabled\"\n                                [id]=\"id\"\n                                [ngModel]=\"search\"\n                                [ngModelOptions]=\"{standalone: true}\"\n                                [placeholder]=\"placeholder\"\n                                [readOnly]=\"readOnly || inputHidden\"\n                                [tabIndex]=\"computedFocusable ? 0 : -1\"\n                                (drop.prevent)=\"onDrop($any($event))\"\n                                (keydown.arrowLeft)=\"onFieldKeyDownArrowLeft($event)\"\n                                (keydown.backspace)=\"onFieldKeyDownBackspace($event)\"\n                                (keydown.enter.prevent)=\"onFieldKeyDownEnter()\"\n                                (ngModelChange)=\"onInput($event)\"\n                                (paste.prevent)=\"onPaste($event)\"\n                            />\n                        </div>\n                    </div>\n                    <div class=\"t-value-content\">\n                        <ng-content select=\"tuiContent\" />\n                    </div>\n                </tui-scrollbar>\n            </div>\n            <ng-content select=\"select\" />\n            <div\n                *ngIf=\"hasRightIcons\"\n                class=\"t-icons t-icon-wrapper\"\n            >\n                <ng-container *ngIf=\"hasCleaner\">\n                    <tui-icon\n                        *polymorpheusOutlet=\"iconCleaner as src; context: {$implicit: size}\"\n                        #cleaner\n                        automation-id=\"tui-input-tag__cleaner\"\n                        tuiAppearance=\"icon\"\n                        class=\"t-cleaner\"\n                        [icon]=\"src.toString()\"\n                        (click.stop)=\"onCleanerClick()\"\n                    />\n                </ng-container>\n                <tui-tooltip\n                    *ngIf=\"showHint\"\n                    automation-id=\"tui-input-tag__tooltip\"\n                    class=\"t-tooltip\"\n                    [content]=\"hintOptions?.content\"\n                    [describeId]=\"id\"\n                />\n                <div\n                    *ngIf=\"icon\"\n                    class=\"t-icon t-textfield-icon\"\n                >\n                    <tui-icon\n                        *polymorpheusOutlet=\"icon as src; context: {$implicit: size}\"\n                        tuiAppearance=\"icon\"\n                        [icon]=\"src.toString()\"\n                    />\n                </div>\n            </div>\n        </div>\n        <ng-template #errorIcon>\n            <tui-icon\n                class=\"t-error-icon\"\n                [icon]=\"icons.error\"\n            />\n        </ng-template>\n    </div>\n</div>\n", styles: [":host{position:relative;display:block;text-align:start;border-radius:var(--tui-radius-m);block-size:var(--tui-height);min-block-size:var(--tui-height);max-block-size:var(--tui-height)}:host[data-size=s]{--tui-height: var(--tui-height-s);font:var(--tui-font-text-ui-s);line-height:1rem}:host[data-size=m]{--tui-height: var(--tui-height-m);font:var(--tui-font-text-ui-s);line-height:1rem}:host[data-size=l]{--tui-height: var(--tui-height-l);border-radius:var(--tui-radius-l);font:var(--tui-font-text-ui-m);line-height:1.25rem}:host :host-context(*:disabled){pointer-events:none}.t-input{padding:0;margin:0;border-width:0;border-radius:inherit;background:none;font-size:inherit;line-height:inherit;font-weight:inherit;color:inherit;caret-color:currentColor;outline:none;-webkit-appearance:none;appearance:none;word-break:keep-all;-webkit-text-fill-color:currentColor;position:absolute;top:0;left:0;inline-size:100%;block-size:100%;border-style:solid;border-color:transparent;border-inline-start-width:var(--t-border-start, 0);border-inline-end-width:var(--t-border-end, 0);text-indent:var(--t-text-indent);color:var(--tui-text-primary);text-align:inherit;box-sizing:border-box;white-space:nowrap;overflow:hidden;text-transform:inherit;resize:none}.t-input:-webkit-autofill,.t-input:-webkit-autofill:hover,.t-input:-webkit-autofill:focus{-webkit-text-fill-color:var(--tui-text-primary)!important;border-color:var(--tui-service-autofill-background);box-shadow:0 0 0 100rem var(--tui-service-autofill-background) inset!important}.t-input[inputMode=none]{caret-color:transparent}.t-input::-webkit-inner-spin-button,.t-input::-webkit-outer-spin-button{-webkit-appearance:none;appearance:none}.t-input:-webkit-autofill,.t-input:-webkit-autofill:first-line{font-size:inherit;line-height:inherit}.t-input::-webkit-caps-lock-indicator,.t-input::-webkit-contacts-auto-fill-button,.t-input::-webkit-credit-card-auto-fill-button,.t-input::-webkit-credentials-auto-fill-button,.t-input::-webkit-strong-password-auto-fill-button{content:none!important;position:absolute;left:-62.4375rem;top:-62.4375rem;z-index:-999;display:none!important;background:transparent!important;pointer-events:none!important}.t-input::placeholder{color:var(--tui-text-secondary);opacity:0}:host._focused:not(._readonly) .t-input::placeholder,:host-context(tui-primitive-textfield._focused:not(._readonly)) .t-input::placeholder,:host-context(tui-textarea._focused:not(._readonly)) .t-input::placeholder,:host-context(tui-text-area._focused:not(._readonly)) .t-input::placeholder{opacity:1}:host[data-size=s] .t-input,.t-input :host-context(tui-primitive-textfield[data-size=\"s\"]):not(tui-primitive-textfield),.t-input :host-context(tui-textarea[data-size=\"s\"]):not(tui-textarea),.t-input :host-context(tui-text-area[data-size=\"s\"]):not(tui-text-area){padding:0 var(--tui-padding-s)}:host[data-size=m] .t-input,.t-input :host-context(tui-primitive-textfield[data-size=\"m\"]):not(tui-primitive-textfield),.t-input :host-context(tui-textarea[data-size=\"m\"]):not(tui-textarea),.t-input :host-context(tui-text-area[data-size=\"m\"]):not(tui-text-area){padding:0 var(--tui-padding-m)}:host[data-size=l] .t-input,.t-input :host-context(tui-primitive-textfield[data-size=\"l\"]):not(tui-primitive-textfield),.t-input :host-context(tui-textarea[data-size=\"l\"]):not(tui-textarea),.t-input :host-context(tui-text-area[data-size=\"l\"]):not(tui-text-area){padding:0 var(--tui-padding-l)}:host._disabled .t-input,.t-input :host-context(tui-primitive-textfield._disabled),.t-input :host-context(tui-textarea._disabled),.t-input :host-context(tui-text-area._disabled){pointer-events:none}:host[data-size=l]:not(._label-outside) .t-input,.t-input :host-context(tui-primitive-textfield[data-size=\"l\"]:not(._label-outside)):not(tui-primitive-textfield){padding-block-start:1.25rem}:host[data-size=m]:not(._label-outside) .t-input,.t-input :host-context(tui-primitive-textfield[data-size=\"m\"]:not(._label-outside)):not(tui-primitive-textfield){padding-block-start:1rem}:host[data-size=l]:not(._label-outside) .t-input{padding-block-start:1.25rem}:host[data-size=l]:not(._label-outside) .t-input:-webkit-autofill+.t-content .t-placeholder{font:var(--tui-font-text-s);line-height:1.25rem;transform:translateY(-.75rem)}:host[data-size=m]:not(._label-outside) .t-input:-webkit-autofill+.t-content .t-placeholder{font:var(--tui-font-text-xs);line-height:1.25rem;transform:translateY(-.5625rem)}:host._hidden input.t-input,.t-input :host-context(tui-primitive-textfield._hidden){opacity:0;text-indent:-10em}.t-content{display:flex;block-size:100%;inline-size:100%;box-sizing:border-box;align-items:center;overflow:hidden}:host[data-size=s] .t-content{padding:0 var(--tui-padding-s)}:host[data-size=m] .t-content{padding:0 var(--tui-padding-m)}:host[data-size=l] .t-content{padding:0 var(--tui-padding-l)}.t-wrapper{flex:1;min-inline-size:0;padding-inline-end:.25rem}.t-placeholder{transition-property:transform,font-size,color,letter-spacing;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;inline-size:100%;-webkit-user-select:none;user-select:none;font:var(--tui-font-text-s);color:var(--tui-text-secondary);pointer-events:none;will-change:transform;transform:translateY(0)}@supports (-webkit-hyphens: none){.t-placeholder{will-change:unset;transition-property:transform,color,letter-spacing}}.t-placeholder_raised{transform:translateY(-.75rem)}:host[data-size=m] .t-placeholder_raised{font:var(--tui-font-text-xs);line-height:1.25rem;transform:translateY(-.5625rem);letter-spacing:.025rem}:host._invalid:not(._focused) .t-placeholder_raised,:host._invalid:not(._focused):hover .t-placeholder_raised{color:var(--tui-text-negative)}:host._focused .t-placeholder,:host[data-size=m]._focused._label-outside .t-placeholder,:host[data-size=l]._focused._label-outside .t-placeholder{color:var(--tui-text-tertiary)}:host[data-size=l] .t-placeholder{font:var(--tui-font-text-ui-m);line-height:1.25rem}:host[data-size=l] .t-placeholder_raised{font:var(--tui-font-text-s);line-height:1.25rem}:host[data-size=m]._focused:not(._label-outside) .t-placeholder,:host[data-size=l]._focused:not(._label-outside) .t-placeholder{color:var(--tui-text-primary)}.t-cleaner{position:relative;display:flex;inline-size:1.5rem;block-size:1.5rem;align-items:center;justify-content:center;box-sizing:border-box;cursor:pointer;pointer-events:none;pointer-events:auto;border-width:.25rem}:host._readonly .t-cleaner,:host._disabled .t-cleaner{pointer-events:none}.t-icon{position:relative;display:flex;inline-size:1.5rem;block-size:1.5rem;align-items:center;justify-content:center;box-sizing:border-box;cursor:pointer;pointer-events:none}:host[data-size=s] .t-icon_left{margin:0 .125rem 0 -.375rem}:host[data-size=m] .t-icon_left{margin-inline-start:-.125rem;margin-inline-end:.375rem}:host[data-size=l] .t-icon_left{margin-inline-end:.75rem}.t-icons{display:flex;align-items:center}:host[data-size=m] .t-icons{margin-inline-end:-.125rem}:host[data-size=s] .t-icons{margin-inline-end:-.375rem}:host:not([data-size=s]) .t-icons>:not(:first-child){margin-inline-start:.25rem}:host{cursor:text}:host._expandable{block-size:auto;max-block-size:none}:host._disabled,:host :host-context(*:disabled){pointer-events:none}:host._readonly{cursor:default}:host[data-size=m]{line-height:1rem}.t-hosted{display:block;border-radius:inherit}.t-scrollbar{scroll-behavior:var(--tui-scroll-behavior);margin-inline-start:-.25rem;min-inline-size:100%}:host:not(._label-outside) .t-scrollbar,:host._label-outside._icon-start .t-scrollbar{margin:0}:host[data-size=s]._icon-start .t-scrollbar{margin-inline-start:.25rem}:host[data-size=m]:not(._label-outside) .t-scrollbar{border-block-start:1rem solid transparent}:host[data-size=l]:not(._label-outside) .t-scrollbar{border-block-start:1.25rem solid transparent}.t-tags{display:flex;padding-inline-start:.25rem}.t-tags_expandable{overflow:hidden}.t-tags_empty{block-size:0}:host._expandable .t-tags{flex-wrap:wrap;white-space:normal;overflow:hidden}:host._readonly .t-tags{pointer-events:none}:host[data-size=m]:not(._label-outside) .t-tags,:host[data-size=l]:not(._label-outside) .t-tags{padding:0}.t-tags tui-tag:last-of-type{max-inline-size:80%}.t-content{align-items:flex-start}:host[data-size=s] .t-content{min-block-size:var(--tui-height-s)}:host[data-size=m] .t-content{min-block-size:var(--tui-height-m)}:host[data-size=l] .t-content{min-block-size:var(--tui-height-l)}:host[data-size=s] .t-icon-wrapper{block-size:var(--tui-height-s)}:host[data-size=m] .t-icon-wrapper{block-size:var(--tui-height-m)}:host[data-size=l] .t-icon-wrapper{block-size:var(--tui-height-l)}.t-absolute-wrapper{position:absolute;top:0;left:0;inline-size:100%;block-size:100%;display:flex;flex-direction:column;justify-content:center}:host[data-size=m] .t-absolute-wrapper{block-size:var(--tui-height-m)}:host[data-size=l] .t-absolute-wrapper{block-size:var(--tui-height-l)}.t-wrapper{position:relative;display:flex;align-items:center;padding:0;box-sizing:border-box}:host[data-size=s] .t-wrapper{min-block-size:var(--tui-height-s);padding:calc((var(--tui-height-s) - 1.5rem) / 2) 0}:host[data-size=m] .t-wrapper{min-block-size:var(--tui-height-m);padding:calc((var(--tui-height-m) - var(--tui-height-xs) - .25rem) / 2) 0}:host[data-size=l] .t-wrapper{padding:calc((var(--tui-height-l) - var(--tui-height-s) - .25rem) / 2) 0}:host[data-size=m]:not(._label-outside) .t-wrapper{padding:calc((var(--tui-height-m) - 2rem) / 2) 0}:host[data-size=l]:not(._label-outside) .t-wrapper{padding:calc((var(--tui-height-l) - 2.5rem) / 2) 0}.t-tag{margin:.125rem .5rem .125rem -.25rem;margin-inline-start:-.25rem;margin-inline-end:.5rem;max-inline-size:100%;flex-shrink:0}:host[data-size=m] .t-tag{margin-inline-start:-.125rem;margin-inline-end:.375rem}.t-text:after{content:\",\\a0\"}.t-text_disabled{color:var(--tui-text-tertiary)}.t-text_error{color:var(--tui-text-negative)}.t-text:not(.t-text_comma):last-of-type:after{content:\"\"}:host:not(._expandable) .t-text{white-space:nowrap}.t-input-wrapper,.t-value-content{position:relative;display:flex;flex:1;max-inline-size:100%}:host[data-size=s] .t-input-wrapper,:host[data-size=s] .t-value-content{min-block-size:1.5rem}:host[data-size=m] .t-input-wrapper,:host[data-size=m] .t-value-content{min-block-size:calc(var(--tui-height-xs) + 2 * .125rem)}:host[data-size=l] .t-input-wrapper,:host[data-size=l] .t-value-content{min-block-size:calc(var(--tui-height-s) + 2 * .125rem)}:host:not(._label-outside) .t-input-wrapper,:host:not(._label-outside) .t-value-content{min-block-size:1rem}.t-input-wrapper_collapsed{flex:0;margin-inline-start:-.5rem}.t-value-content:empty{display:none}.t-ghost{visibility:hidden;white-space:pre;text-overflow:clip;min-inline-size:.125rem}:host:not(._expandable) .t-ghost{min-inline-size:2rem}.t-native{margin:0;border-width:0;border-radius:inherit;background:none;font-size:inherit;line-height:inherit;font-weight:inherit;color:inherit;caret-color:currentColor;outline:none;-webkit-appearance:none;appearance:none;word-break:keep-all;-webkit-text-fill-color:currentColor;position:absolute;top:0;left:0;inline-size:100%;block-size:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-sizing:border-box;padding:0;cursor:inherit}.t-native:-webkit-autofill,.t-native:-webkit-autofill:hover,.t-native:-webkit-autofill:focus{-webkit-text-fill-color:var(--tui-text-primary)!important;border-color:var(--tui-service-autofill-background);box-shadow:0 0 0 100rem var(--tui-service-autofill-background) inset!important}.t-native[inputMode=none]{caret-color:transparent}.t-native_hidden{opacity:0;text-indent:-10em}.t-native::placeholder{color:var(--tui-text-tertiary);opacity:0}:host-context([tuiTheme=\"dark\"]) .t-native::placeholder{color:var(--tui-text-tertiary)}:host._focused .t-native:not(:read-only)::placeholder{opacity:1}.t-error-icon{display:block;color:var(--tui-status-negative);font-size:1rem}:host._readonly .t-textfield-icon ::ng-deep [tuiAppearance][data-appearance=icon]{pointer-events:none}@media (hover: hover) and (pointer: fine){:host:not(._readonly):not(._disabled):hover .t-textfield-icon ::ng-deep [tuiAppearance][data-appearance=icon]:after{color:var(--tui-text-secondary)}}\n"] }]
         }], propDecorators: { dropdown: [{
                 type: ViewChild,
                 args: [TuiDropdownOpen]

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

@@ -196,7 +196,7 @@ class TuiInputTimeComponent extends AbstractTuiNullableControl {
             tuiAsControl(TuiInputTimeComponent),
             tuiAsDataListHost(TuiInputTimeComponent),
             tuiAsOptionContent(TUI_SELECT_OPTION),
-        ], viewQueries: [{ propertyName: "textfield", first: true, predicate: TuiPrimitiveTextfieldComponent, descendants: true }], usesInheritance: true, hostDirectives: [{ directive: i1.TuiDropdownFixed }], ngImport: i0, template: "<div\n    tuiDropdownOpenMonitor\n    class=\"t-wrapper\"\n    [tuiDropdown]=\"dropdownContent\"\n    [tuiDropdownEnabled]=\"canOpen && !nativeDatalist\"\n    [tuiDropdownOpen]=\"canOpen && open\"\n    (tuiActiveZoneChange)=\"onFocused($event)\"\n    (tuiDropdownOpenChange)=\"onOpen($event)\"\n>\n    <tui-primitive-textfield\n        tuiValueAccessor\n        class=\"t-textfield\"\n        [disabled]=\"disabled\"\n        [focusable]=\"focusable\"\n        [invalid]=\"computedInvalid\"\n        [maskito]=\"maskOptions\"\n        [nativeId]=\"nativeId\"\n        [pseudoActive]=\"pseudoActive\"\n        [pseudoFocus]=\"innerPseudoFocused\"\n        [pseudoHover]=\"pseudoHover\"\n        [readOnly]=\"readOnly\"\n        [tuiTextfieldFiller]=\"(getFiller$(mode) | async) || ''\"\n        [tuiTextfieldIcon]=\"icon && iconContent\"\n        [value]=\"computedValue\"\n        (valueChange)=\"onValueChange($event)\"\n    >\n        <ng-content />\n        <input\n            tuiTextfieldLegacy\n            [attr.inputmode]=\"inputMode\"\n        />\n    </tui-primitive-textfield>\n</div>\n<ng-template #dropdownContent>\n    <tui-data-list\n        automation-id=\"tui-input-time__dropdown\"\n        [size]=\"itemSize\"\n    >\n        <button\n            *ngFor=\"let item of filtered\"\n            automation-id=\"tui-input-time__item\"\n            tuiOption\n            type=\"button\"\n            [disabled]=\"disabledItemHandler(item)\"\n            [value]=\"item\"\n        >\n            {{ item }}\n        </button>\n    </tui-data-list>\n</ng-template>\n\n<ng-template #iconContent>\n    <tui-icon\n        *polymorpheusOutlet=\"icon as src; context: {$implicit: size}\"\n        tuiAppearance=\"icon\"\n        [class.t-icon_small]=\"size === 's'\"\n        [icon]=\"src.toString()\"\n    />\n    <input\n        *ngIf=\"showNativePicker\"\n        tuiTime\n    />\n</ng-template>\n", styles: [":host{display:block;border-radius:var(--tui-radius-m);text-align:start}:host._disabled,:host :host-context(*:disabled){pointer-events:none}.t-wrapper{display:block;border-radius:inherit}.t-textfield{border-radius:inherit;text-align:inherit}.t-icon_small{border-width:.25rem}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: "component", type: i4.TuiTextfieldComponent, selector: "input[tuiTextfieldLegacy], textarea[tuiTextfieldLegacy]" }, { kind: "directive", type: i5.TuiValueAccessorDirective, selector: "[tuiValueAccessor]" }, { kind: "directive", type: i5.TuiTextfieldIconDirective, selector: "[tuiTextfieldIcon]", inputs: ["tuiTextfieldIcon"] }, { kind: "directive", type: i5.TuiTextfieldFillerDirective, selector: "[tuiTextfieldFiller]", inputs: ["tuiTextfieldFiller"] }, { kind: "directive", type: i6.PolymorpheusOutlet, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }, { kind: "directive", type: i5.TuiLegacyDropdownOpenMonitorDirective, selector: "[tuiDropdownOpenMonitor]" }, { kind: "component", type: i7.TuiIcon, selector: "tui-icon", inputs: ["icon", "background"] }, { kind: "directive", type: i8.TuiAppearance, selector: "[tuiAppearance]", inputs: ["tuiAppearance", "tuiAppearanceState", "tuiAppearanceFocus", "tuiAppearanceMode"] }, { kind: "directive", type: i1.TuiDropdownDirective, selector: "[tuiDropdown]:not(ng-container):not(ng-template)", inputs: ["tuiDropdown"], exportAs: ["tuiDropdown"] }, { kind: "directive", type: i1.TuiDropdownOpen, selector: "[tuiDropdown][tuiDropdownOpen],[tuiDropdown][tuiDropdownOpenChange]", inputs: ["tuiDropdownEnabled", "tuiDropdownOpen"], outputs: ["tuiDropdownOpenChange"] }, { kind: "component", type: i9.TuiDataListComponent, selector: "tui-data-list", inputs: ["emptyContent", "size"] }, { kind: "component", type: i9.TuiOption, selector: "button[tuiOption]:not([new]), a[tuiOption]:not([new]), label[tuiOption]:not([new])", inputs: ["disabled", "value"] }, { kind: "component", type: i10.TuiNativeTimeComponent, selector: "input[tuiTime]" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], viewQueries: [{ propertyName: "textfield", first: true, predicate: TuiPrimitiveTextfieldComponent, descendants: true }], usesInheritance: true, hostDirectives: [{ directive: i1.TuiDropdownFixed }], ngImport: i0, template: "<div\n    tuiDropdownOpenMonitor\n    class=\"t-wrapper\"\n    [tuiDropdown]=\"dropdownContent\"\n    [tuiDropdownEnabled]=\"canOpen && !nativeDatalist\"\n    [tuiDropdownOpen]=\"canOpen && open\"\n    (tuiActiveZoneChange)=\"onFocused($event)\"\n    (tuiDropdownOpenChange)=\"onOpen($event)\"\n>\n    <tui-primitive-textfield\n        tuiValueAccessor\n        class=\"t-textfield\"\n        [disabled]=\"disabled\"\n        [focusable]=\"focusable\"\n        [invalid]=\"computedInvalid\"\n        [maskito]=\"maskOptions\"\n        [nativeId]=\"nativeId\"\n        [pseudoActive]=\"pseudoActive\"\n        [pseudoFocus]=\"innerPseudoFocused\"\n        [pseudoHover]=\"pseudoHover\"\n        [readOnly]=\"readOnly\"\n        [tuiTextfieldFiller]=\"(getFiller$(mode) | async) || ''\"\n        [tuiTextfieldIcon]=\"icon && iconContent\"\n        [value]=\"computedValue\"\n        (valueChange)=\"onValueChange($event)\"\n    >\n        <ng-content />\n        <input\n            tuiTextfieldLegacy\n            [attr.inputmode]=\"inputMode\"\n        />\n    </tui-primitive-textfield>\n</div>\n<ng-template #dropdownContent>\n    <tui-data-list\n        automation-id=\"tui-input-time__dropdown\"\n        [size]=\"itemSize\"\n    >\n        <button\n            *ngFor=\"let item of filtered\"\n            automation-id=\"tui-input-time__item\"\n            tuiOption\n            type=\"button\"\n            [disabled]=\"disabledItemHandler(item)\"\n            [value]=\"item\"\n        >\n            {{ item }}\n        </button>\n    </tui-data-list>\n</ng-template>\n\n<ng-template #iconContent>\n    <tui-icon\n        *polymorpheusOutlet=\"icon as src; context: {$implicit: size}\"\n        tuiAppearance=\"icon\"\n        [class.t-icon_small]=\"size === 's'\"\n        [icon]=\"src.toString()\"\n    />\n    <input\n        *ngIf=\"showNativePicker\"\n        tuiTime\n    />\n</ng-template>\n", styles: [":host{display:block;border-radius:var(--tui-radius-m);text-align:start}:host[data-size=l]{border-radius:var(--tui-radius-l)}:host._disabled,:host :host-context(*:disabled){pointer-events:none}.t-wrapper{display:block;border-radius:inherit}.t-textfield{border-radius:inherit;text-align:inherit}.t-icon_small{border-width:.25rem}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: "component", type: i4.TuiTextfieldComponent, selector: "input[tuiTextfieldLegacy], textarea[tuiTextfieldLegacy]" }, { kind: "directive", type: i5.TuiValueAccessorDirective, selector: "[tuiValueAccessor]" }, { kind: "directive", type: i5.TuiTextfieldIconDirective, selector: "[tuiTextfieldIcon]", inputs: ["tuiTextfieldIcon"] }, { kind: "directive", type: i5.TuiTextfieldFillerDirective, selector: "[tuiTextfieldFiller]", inputs: ["tuiTextfieldFiller"] }, { kind: "directive", type: i6.PolymorpheusOutlet, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }, { kind: "directive", type: i5.TuiLegacyDropdownOpenMonitorDirective, selector: "[tuiDropdownOpenMonitor]" }, { kind: "component", type: i7.TuiIcon, selector: "tui-icon", inputs: ["icon", "background"] }, { kind: "directive", type: i8.TuiAppearance, selector: "[tuiAppearance]", inputs: ["tuiAppearance", "tuiAppearanceState", "tuiAppearanceFocus", "tuiAppearanceMode"] }, { kind: "directive", type: i1.TuiDropdownDirective, selector: "[tuiDropdown]:not(ng-container):not(ng-template)", inputs: ["tuiDropdown"], exportAs: ["tuiDropdown"] }, { kind: "directive", type: i1.TuiDropdownOpen, selector: "[tuiDropdown][tuiDropdownOpen],[tuiDropdown][tuiDropdownOpenChange]", inputs: ["tuiDropdownEnabled", "tuiDropdownOpen"], outputs: ["tuiDropdownOpenChange"] }, { kind: "component", type: i9.TuiDataListComponent, selector: "tui-data-list", inputs: ["emptyContent", "size"] }, { kind: "component", type: i9.TuiOption, selector: "button[tuiOption]:not([new]), a[tuiOption]:not([new]), label[tuiOption]:not([new])", inputs: ["disabled", "value"] }, { kind: "component", type: i10.TuiNativeTimeComponent, selector: "input[tuiTime]" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 __decorate([
     tuiPure
@@ -218,7 +218,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     ], hostDirectives: [TuiDropdownFixed], host: {
                         '(click)': 'open = !open',
                         '[attr.data-size]': 'size',
-                    }, template: "<div\n    tuiDropdownOpenMonitor\n    class=\"t-wrapper\"\n    [tuiDropdown]=\"dropdownContent\"\n    [tuiDropdownEnabled]=\"canOpen && !nativeDatalist\"\n    [tuiDropdownOpen]=\"canOpen && open\"\n    (tuiActiveZoneChange)=\"onFocused($event)\"\n    (tuiDropdownOpenChange)=\"onOpen($event)\"\n>\n    <tui-primitive-textfield\n        tuiValueAccessor\n        class=\"t-textfield\"\n        [disabled]=\"disabled\"\n        [focusable]=\"focusable\"\n        [invalid]=\"computedInvalid\"\n        [maskito]=\"maskOptions\"\n        [nativeId]=\"nativeId\"\n        [pseudoActive]=\"pseudoActive\"\n        [pseudoFocus]=\"innerPseudoFocused\"\n        [pseudoHover]=\"pseudoHover\"\n        [readOnly]=\"readOnly\"\n        [tuiTextfieldFiller]=\"(getFiller$(mode) | async) || ''\"\n        [tuiTextfieldIcon]=\"icon && iconContent\"\n        [value]=\"computedValue\"\n        (valueChange)=\"onValueChange($event)\"\n    >\n        <ng-content />\n        <input\n            tuiTextfieldLegacy\n            [attr.inputmode]=\"inputMode\"\n        />\n    </tui-primitive-textfield>\n</div>\n<ng-template #dropdownContent>\n    <tui-data-list\n        automation-id=\"tui-input-time__dropdown\"\n        [size]=\"itemSize\"\n    >\n        <button\n            *ngFor=\"let item of filtered\"\n            automation-id=\"tui-input-time__item\"\n            tuiOption\n            type=\"button\"\n            [disabled]=\"disabledItemHandler(item)\"\n            [value]=\"item\"\n        >\n            {{ item }}\n        </button>\n    </tui-data-list>\n</ng-template>\n\n<ng-template #iconContent>\n    <tui-icon\n        *polymorpheusOutlet=\"icon as src; context: {$implicit: size}\"\n        tuiAppearance=\"icon\"\n        [class.t-icon_small]=\"size === 's'\"\n        [icon]=\"src.toString()\"\n    />\n    <input\n        *ngIf=\"showNativePicker\"\n        tuiTime\n    />\n</ng-template>\n", styles: [":host{display:block;border-radius:var(--tui-radius-m);text-align:start}:host._disabled,:host :host-context(*:disabled){pointer-events:none}.t-wrapper{display:block;border-radius:inherit}.t-textfield{border-radius:inherit;text-align:inherit}.t-icon_small{border-width:.25rem}\n"] }]
+                    }, template: "<div\n    tuiDropdownOpenMonitor\n    class=\"t-wrapper\"\n    [tuiDropdown]=\"dropdownContent\"\n    [tuiDropdownEnabled]=\"canOpen && !nativeDatalist\"\n    [tuiDropdownOpen]=\"canOpen && open\"\n    (tuiActiveZoneChange)=\"onFocused($event)\"\n    (tuiDropdownOpenChange)=\"onOpen($event)\"\n>\n    <tui-primitive-textfield\n        tuiValueAccessor\n        class=\"t-textfield\"\n        [disabled]=\"disabled\"\n        [focusable]=\"focusable\"\n        [invalid]=\"computedInvalid\"\n        [maskito]=\"maskOptions\"\n        [nativeId]=\"nativeId\"\n        [pseudoActive]=\"pseudoActive\"\n        [pseudoFocus]=\"innerPseudoFocused\"\n        [pseudoHover]=\"pseudoHover\"\n        [readOnly]=\"readOnly\"\n        [tuiTextfieldFiller]=\"(getFiller$(mode) | async) || ''\"\n        [tuiTextfieldIcon]=\"icon && iconContent\"\n        [value]=\"computedValue\"\n        (valueChange)=\"onValueChange($event)\"\n    >\n        <ng-content />\n        <input\n            tuiTextfieldLegacy\n            [attr.inputmode]=\"inputMode\"\n        />\n    </tui-primitive-textfield>\n</div>\n<ng-template #dropdownContent>\n    <tui-data-list\n        automation-id=\"tui-input-time__dropdown\"\n        [size]=\"itemSize\"\n    >\n        <button\n            *ngFor=\"let item of filtered\"\n            automation-id=\"tui-input-time__item\"\n            tuiOption\n            type=\"button\"\n            [disabled]=\"disabledItemHandler(item)\"\n            [value]=\"item\"\n        >\n            {{ item }}\n        </button>\n    </tui-data-list>\n</ng-template>\n\n<ng-template #iconContent>\n    <tui-icon\n        *polymorpheusOutlet=\"icon as src; context: {$implicit: size}\"\n        tuiAppearance=\"icon\"\n        [class.t-icon_small]=\"size === 's'\"\n        [icon]=\"src.toString()\"\n    />\n    <input\n        *ngIf=\"showNativePicker\"\n        tuiTime\n    />\n</ng-template>\n", styles: [":host{display:block;border-radius:var(--tui-radius-m);text-align:start}:host[data-size=l]{border-radius:var(--tui-radius-l)}:host._disabled,:host :host-context(*:disabled){pointer-events:none}.t-wrapper{display:block;border-radius:inherit}.t-textfield{border-radius:inherit;text-align:inherit}.t-icon_small{border-width:.25rem}\n"] }]
         }], propDecorators: { textfield: [{
                 type: ViewChild,
                 args: [TuiPrimitiveTextfieldComponent]