@taiga-ui/legacy 4.101.0 → 4.103.0

package/components/input-color/input-color.component.d.ts

@@ -1,5 +1,6 @@
 import { type SafeStyle } from '@angular/platform-browser';
 import { type MaskitoOptions } from '@maskito/core';
+import { type TuiSizeL, type TuiSizeS } from '@taiga-ui/core/types';
 import { AbstractTuiControl } from '@taiga-ui/legacy/classes';
 import { type TuiFocusableElementAccessor, type TuiNativeFocusableElement } from '@taiga-ui/legacy/tokens';
 import * as i0 from "@angular/core";
@@ -11,8 +12,10 @@ type MaskMode = 'gradient' | 'hex' | 'rgb';
 export declare class TuiInputColorComponent extends AbstractTuiControl<string> implements TuiFocusableElementAccessor {
     private readonly textfield?;
     private readonly domSanitizer;
+    private readonly textfieldSize;
     colors: ReadonlyMap<string, string>;
     open: boolean;
+    get size(): TuiSizeL | TuiSizeS;
     get focused(): boolean;
     get nativeFocusableElement(): TuiNativeFocusableElement | null;
     get background(): SafeStyle;

package/esm2022/components/combo-box/combo-box.component.mjs

@@ -140,7 +140,7 @@ class TuiComboBoxComponent extends AbstractTuiNullableControl {
             tuiAsDataListHost(TuiComboBoxComponent),
             tuiAsControl(TuiComboBoxComponent),
             tuiAsOptionContent(TUI_SELECT_OPTION),
-        ], queries: [{ propertyName: "accessor", first: true, predicate: TUI_DATA_LIST_ACCESSOR, descendants: true }, { 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]=\"interactive && !!datalist\"\n    [(tuiDropdownOpen)]=\"open\"\n    (tuiActiveZoneChange)=\"onActiveZone($event)\"\n>\n    <tui-primitive-textfield\n        automation-id=\"tui-combo-box__textfield\"\n        class=\"t-textfield\"\n        [disabled]=\"computedDisabled\"\n        [focusable]=\"computedFocusable\"\n        [invalid]=\"computedInvalid\"\n        [nativeId]=\"nativeId\"\n        [pseudoFocus]=\"computedFocused\"\n        [pseudoHover]=\"pseudoHover\"\n        [readOnly]=\"readOnly\"\n        [tuiTextfieldIcon]=\"arrow ? icon : ''\"\n        [value]=\"nativeValue\"\n        (click)=\"toggle()\"\n        (keydown.enter)=\"onFieldKeyDownEnter($event)\"\n        (valueChange)=\"onValueChange($event)\"\n    >\n        <ng-content />\n        <ng-content\n            ngProjectAs=\"input\"\n            select=\"input\"\n        />\n        <div\n            *ngIf=\"showValueTemplate\"\n            automation-id=\"tui-combo-box__template\"\n            ngProjectAs=\"tuiContent\"\n            class=\"t-value\"\n        >\n            <ng-container\n                *polymorpheusOutlet=\"computedContent as text; context: {$implicit: value!, active: computedFocused}\"\n            >\n                {{ text }}\n            </ng-container>\n        </div>\n    </tui-primitive-textfield>\n\n    <ng-template #icon>\n        <div\n            appearance=\"icon\"\n            tuiWrapper\n            class=\"t-icon\"\n        >\n            <ng-container *polymorpheusOutlet=\"arrow\" />\n        </div>\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}.t-value{display:flex;inline-size:100%;align-items:center}.t-icon{pointer-events:auto}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.PolymorpheusOutlet, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }, { 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.TuiWrapperDirective, selector: "[tuiWrapper]", inputs: ["disabled", "readOnly", "hover", "active", "focus", "invalid", "appearance"] }, { kind: "directive", type: i5.TuiTextfieldIconDirective, selector: "[tuiTextfieldIcon]", inputs: ["tuiTextfieldIcon"] }, { kind: "directive", type: i5.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: "accessor", first: true, predicate: TUI_DATA_LIST_ACCESSOR, descendants: true }, { 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]=\"interactive && !!datalist\"\n    [(tuiDropdownOpen)]=\"open\"\n    (tuiActiveZoneChange)=\"onActiveZone($event)\"\n>\n    <tui-primitive-textfield\n        automation-id=\"tui-combo-box__textfield\"\n        class=\"t-textfield\"\n        [disabled]=\"computedDisabled\"\n        [focusable]=\"computedFocusable\"\n        [invalid]=\"computedInvalid\"\n        [nativeId]=\"nativeId\"\n        [pseudoFocus]=\"computedFocused\"\n        [pseudoHover]=\"pseudoHover\"\n        [readOnly]=\"readOnly\"\n        [tuiTextfieldIcon]=\"arrow ? icon : ''\"\n        [value]=\"nativeValue\"\n        (click)=\"toggle()\"\n        (keydown.enter)=\"onFieldKeyDownEnter($event)\"\n        (valueChange)=\"onValueChange($event)\"\n    >\n        <ng-content />\n        <ng-content\n            ngProjectAs=\"input\"\n            select=\"input\"\n        />\n        <div\n            *ngIf=\"showValueTemplate\"\n            automation-id=\"tui-combo-box__template\"\n            ngProjectAs=\"tuiContent\"\n            class=\"t-value\"\n        >\n            <ng-container\n                *polymorpheusOutlet=\"computedContent as text; context: {$implicit: value!, active: computedFocused}\"\n            >\n                {{ text }}\n            </ng-container>\n        </div>\n    </tui-primitive-textfield>\n\n    <ng-template #icon>\n        <div\n            appearance=\"icon\"\n            tuiWrapper\n            class=\"t-icon\"\n        >\n            <ng-container *polymorpheusOutlet=\"arrow\" />\n        </div>\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}.t-value{display:flex;inline-size:100%;align-items:center}.t-icon{pointer-events:auto}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.PolymorpheusOutlet, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }, { 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.TuiWrapperDirective, selector: "[tuiWrapper]", inputs: ["disabled", "readOnly", "hover", "active", "focus", "invalid", "appearance"] }, { kind: "directive", type: i5.TuiTextfieldIconDirective, selector: "[tuiTextfieldIcon]", inputs: ["tuiTextfieldIcon"] }, { kind: "directive", type: i5.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 }); }
 }
 export { TuiComboBoxComponent };
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiComboBoxComponent, decorators: [{
@@ -152,7 +152,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         tuiAsOptionContent(TUI_SELECT_OPTION),
                     ], hostDirectives: [TuiDropdownFixed], host: {
                         '[attr.data-size]': 'size',
-                    }, template: "<div\n    tuiDropdownOpenMonitor\n    class=\"t-hosted\"\n    [tuiDropdown]=\"datalist || ''\"\n    [tuiDropdownEnabled]=\"interactive && !!datalist\"\n    [(tuiDropdownOpen)]=\"open\"\n    (tuiActiveZoneChange)=\"onActiveZone($event)\"\n>\n    <tui-primitive-textfield\n        automation-id=\"tui-combo-box__textfield\"\n        class=\"t-textfield\"\n        [disabled]=\"computedDisabled\"\n        [focusable]=\"computedFocusable\"\n        [invalid]=\"computedInvalid\"\n        [nativeId]=\"nativeId\"\n        [pseudoFocus]=\"computedFocused\"\n        [pseudoHover]=\"pseudoHover\"\n        [readOnly]=\"readOnly\"\n        [tuiTextfieldIcon]=\"arrow ? icon : ''\"\n        [value]=\"nativeValue\"\n        (click)=\"toggle()\"\n        (keydown.enter)=\"onFieldKeyDownEnter($event)\"\n        (valueChange)=\"onValueChange($event)\"\n    >\n        <ng-content />\n        <ng-content\n            ngProjectAs=\"input\"\n            select=\"input\"\n        />\n        <div\n            *ngIf=\"showValueTemplate\"\n            automation-id=\"tui-combo-box__template\"\n            ngProjectAs=\"tuiContent\"\n            class=\"t-value\"\n        >\n            <ng-container\n                *polymorpheusOutlet=\"computedContent as text; context: {$implicit: value!, active: computedFocused}\"\n            >\n                {{ text }}\n            </ng-container>\n        </div>\n    </tui-primitive-textfield>\n\n    <ng-template #icon>\n        <div\n            appearance=\"icon\"\n            tuiWrapper\n            class=\"t-icon\"\n        >\n            <ng-container *polymorpheusOutlet=\"arrow\" />\n        </div>\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}.t-value{display:flex;inline-size:100%;align-items:center}.t-icon{pointer-events:auto}\n"] }]
+                    }, template: "<div\n    tuiDropdownOpenMonitor\n    class=\"t-hosted\"\n    [tuiDropdown]=\"datalist || ''\"\n    [tuiDropdownEnabled]=\"interactive && !!datalist\"\n    [(tuiDropdownOpen)]=\"open\"\n    (tuiActiveZoneChange)=\"onActiveZone($event)\"\n>\n    <tui-primitive-textfield\n        automation-id=\"tui-combo-box__textfield\"\n        class=\"t-textfield\"\n        [disabled]=\"computedDisabled\"\n        [focusable]=\"computedFocusable\"\n        [invalid]=\"computedInvalid\"\n        [nativeId]=\"nativeId\"\n        [pseudoFocus]=\"computedFocused\"\n        [pseudoHover]=\"pseudoHover\"\n        [readOnly]=\"readOnly\"\n        [tuiTextfieldIcon]=\"arrow ? icon : ''\"\n        [value]=\"nativeValue\"\n        (click)=\"toggle()\"\n        (keydown.enter)=\"onFieldKeyDownEnter($event)\"\n        (valueChange)=\"onValueChange($event)\"\n    >\n        <ng-content />\n        <ng-content\n            ngProjectAs=\"input\"\n            select=\"input\"\n        />\n        <div\n            *ngIf=\"showValueTemplate\"\n            automation-id=\"tui-combo-box__template\"\n            ngProjectAs=\"tuiContent\"\n            class=\"t-value\"\n        >\n            <ng-container\n                *polymorpheusOutlet=\"computedContent as text; context: {$implicit: value!, active: computedFocused}\"\n            >\n                {{ text }}\n            </ng-container>\n        </div>\n    </tui-primitive-textfield>\n\n    <ng-template #icon>\n        <div\n            appearance=\"icon\"\n            tuiWrapper\n            class=\"t-icon\"\n        >\n            <ng-container *polymorpheusOutlet=\"arrow\" />\n        </div>\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}.t-value{display:flex;inline-size:100%;align-items:center}.t-icon{pointer-events:auto}\n"] }]
         }], propDecorators: { accessor: [{
                 type: ContentChild,
                 args: [TUI_DATA_LIST_ACCESSOR]

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

@@ -71,7 +71,7 @@ class TuiInputComponent extends AbstractTuiControl {
             tuiAsFocusableItemAccessor(TuiInputComponent),
             tuiAsDataListHost(TuiInputComponent),
             tuiAsControl(TuiInputComponent),
-        ], 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        automation-id=\"tui-input__textfield\"\n        class=\"t-textfield\"\n        [disabled]=\"computedDisabled\"\n        [focusable]=\"computedFocusable\"\n        [invalid]=\"computedInvalid\"\n        [nativeId]=\"nativeId\"\n        [pseudoFocus]=\"computedFocused\"\n        [pseudoHover]=\"pseudoHover\"\n        [readOnly]=\"readOnly\"\n        [value]=\"value\"\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: "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: 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: "directive", type: i3.TuiLegacyDropdownOpenMonitorDirective, selector: "[tuiDropdownOpenMonitor]" }], 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        automation-id=\"tui-input__textfield\"\n        class=\"t-textfield\"\n        [disabled]=\"computedDisabled\"\n        [focusable]=\"computedFocusable\"\n        [invalid]=\"computedInvalid\"\n        [nativeId]=\"nativeId\"\n        [pseudoFocus]=\"computedFocused\"\n        [pseudoHover]=\"pseudoHover\"\n        [readOnly]=\"readOnly\"\n        [value]=\"value\"\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: "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: 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: "directive", type: i3.TuiLegacyDropdownOpenMonitorDirective, selector: "[tuiDropdownOpenMonitor]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 export { TuiInputComponent };
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiInputComponent, decorators: [{
@@ -83,7 +83,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         tuiAsControl(TuiInputComponent),
                     ], 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        automation-id=\"tui-input__textfield\"\n        class=\"t-textfield\"\n        [disabled]=\"computedDisabled\"\n        [focusable]=\"computedFocusable\"\n        [invalid]=\"computedInvalid\"\n        [nativeId]=\"nativeId\"\n        [pseudoFocus]=\"computedFocused\"\n        [pseudoHover]=\"pseudoHover\"\n        [readOnly]=\"readOnly\"\n        [value]=\"value\"\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        automation-id=\"tui-input__textfield\"\n        class=\"t-textfield\"\n        [disabled]=\"computedDisabled\"\n        [focusable]=\"computedFocusable\"\n        [invalid]=\"computedInvalid\"\n        [nativeId]=\"nativeId\"\n        [pseudoFocus]=\"computedFocused\"\n        [pseudoHover]=\"pseudoHover\"\n        [readOnly]=\"readOnly\"\n        [value]=\"value\"\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-color/input-color.component.mjs

@@ -6,6 +6,7 @@ import { tuiPure } from '@taiga-ui/cdk/utils/miscellaneous';
 import { tuiDropdownOptionsProvider } from '@taiga-ui/core/directives/dropdown';
 import { AbstractTuiControl } from '@taiga-ui/legacy/classes';
 import { TuiPrimitiveTextfieldComponent } from '@taiga-ui/legacy/components/primitive-textfield';
+import { TUI_TEXTFIELD_SIZE } from '@taiga-ui/legacy/directives';
 import * as i0 from "@angular/core";
 import * as i1 from "@taiga-ui/legacy/components/primitive-textfield";
 import * as i2 from "@taiga-ui/legacy/directives/textfield-controller";
@@ -20,9 +21,13 @@ class TuiInputColorComponent extends AbstractTuiControl {
     constructor() {
         super(...arguments);
         this.domSanitizer = inject(DomSanitizer);
+        this.textfieldSize = inject(TUI_TEXTFIELD_SIZE);
         this.colors = new Map();
         this.open = false;
     }
+    get size() {
+        return this.textfieldSize.size;
+    }
     get focused() {
         return !!this.textfield?.focused;
     }
@@ -62,7 +67,7 @@ class TuiInputColorComponent extends AbstractTuiControl {
             : value;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiInputColorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiInputColorComponent, selector: "tui-input-color", inputs: { colors: "colors" }, host: { listeners: { "click": "onClick()" } }, viewQueries: [{ propertyName: "textfield", first: true, predicate: TuiPrimitiveTextfieldComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div\n    class=\"t-wrapper\"\n    [tuiDropdown]=\"picker\"\n    [(tuiDropdownOpen)]=\"open\"\n>\n    <tui-primitive-textfield\n        class=\"t-textfield\"\n        [disabled]=\"disabled\"\n        [focusable]=\"focusable\"\n        [invalid]=\"computedInvalid\"\n        [maskito]=\"maskitoOptions(mode)\"\n        [nativeId]=\"nativeId\"\n        [pseudoActive]=\"pseudoActive\"\n        [pseudoFocus]=\"computedFocused\"\n        [pseudoHover]=\"pseudoHover\"\n        [readOnly]=\"readOnly\"\n        [tuiTextfieldIconLeft]=\"color\"\n        [(value)]=\"value\"\n        (focusedChange)=\"onFocused($event)\"\n    >\n        <ng-content />\n    </tui-primitive-textfield>\n</div>\n\n<ng-template #color>\n    <div\n        class=\"t-color\"\n        [style.background]=\"background\"\n    ></div>\n</ng-template>\n\n<ng-template #picker>\n    <tui-color-selector\n        [colors]=\"colors\"\n        [(color)]=\"value\"\n    />\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-wrapper{display:flex;border-radius:inherit;inline-size:100%}.t-textfield{border-radius:inherit;text-align:inherit;inline-size:inherit}.t-textfield ::ng-deep .t-input{text-transform:lowercase!important}.t-color{inline-size:1.5rem;block-size:1.5rem;box-shadow:inset 0 0 0 1px var(--tui-base-03-dark);border-radius:.125rem;pointer-events:auto!important}\n"], dependencies: [{ kind: "component", type: i1.TuiPrimitiveTextfieldComponent, selector: "tui-primitive-textfield", inputs: ["editable", "iconCleaner", "readOnly", "invalid", "disabled", "value"], outputs: ["valueChange"] }, { kind: "directive", type: i1.TuiPrimitiveTextfieldDirective, selector: "tui-primitive-textfield" }, { kind: "directive", type: i2.TuiTextfieldIconLeftDirective, selector: "[tuiTextfieldIconLeft]", inputs: ["tuiTextfieldIconLeft"] }, { kind: "component", type: i3.TuiColorSelectorComponent, selector: "tui-color-selector", inputs: ["colors", "color"], outputs: ["colorChange"] }, { kind: "directive", type: i4.MaskitoDirective, selector: "[maskito]", inputs: ["maskito", "maskitoElement"] }, { kind: "directive", type: i5.TuiDropdownDirective, selector: "[tuiDropdown]:not(ng-container):not(ng-template)", inputs: ["tuiDropdown"], exportAs: ["tuiDropdown"] }, { kind: "directive", type: i5.TuiDropdownOpen, selector: "[tuiDropdown][tuiDropdownOpen],[tuiDropdown][tuiDropdownOpenChange]", inputs: ["tuiDropdownEnabled", "tuiDropdownOpen"], outputs: ["tuiDropdownOpenChange"] }], viewProviders: [tuiDropdownOptionsProvider({ maxHeight: 600 })], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiInputColorComponent, selector: "tui-input-color", inputs: { colors: "colors" }, host: { listeners: { "click": "onClick()" }, properties: { "attr.data-size": "size" } }, viewQueries: [{ propertyName: "textfield", first: true, predicate: TuiPrimitiveTextfieldComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div\n    class=\"t-wrapper\"\n    [tuiDropdown]=\"picker\"\n    [(tuiDropdownOpen)]=\"open\"\n>\n    <tui-primitive-textfield\n        class=\"t-textfield\"\n        [disabled]=\"disabled\"\n        [focusable]=\"focusable\"\n        [invalid]=\"computedInvalid\"\n        [maskito]=\"maskitoOptions(mode)\"\n        [nativeId]=\"nativeId\"\n        [pseudoActive]=\"pseudoActive\"\n        [pseudoFocus]=\"computedFocused\"\n        [pseudoHover]=\"pseudoHover\"\n        [readOnly]=\"readOnly\"\n        [tuiTextfieldIconLeft]=\"color\"\n        [(value)]=\"value\"\n        (focusedChange)=\"onFocused($event)\"\n    >\n        <ng-content />\n    </tui-primitive-textfield>\n</div>\n\n<ng-template #color>\n    <div\n        class=\"t-color\"\n        [style.background]=\"background\"\n    ></div>\n</ng-template>\n\n<ng-template #picker>\n    <tui-color-selector\n        [colors]=\"colors\"\n        [(color)]=\"value\"\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 :host-context(*:disabled){pointer-events:none}.t-wrapper{display:flex;border-radius:inherit;inline-size:100%}.t-textfield{border-radius:inherit;text-align:inherit;inline-size:inherit}.t-textfield ::ng-deep .t-input{text-transform:lowercase!important}.t-color{inline-size:1.5rem;block-size:1.5rem;box-shadow:inset 0 0 0 1px var(--tui-base-03-dark);border-radius:.125rem;pointer-events:auto!important}\n"], dependencies: [{ kind: "component", type: i1.TuiPrimitiveTextfieldComponent, selector: "tui-primitive-textfield", inputs: ["editable", "iconCleaner", "readOnly", "invalid", "disabled", "value"], outputs: ["valueChange"] }, { kind: "directive", type: i1.TuiPrimitiveTextfieldDirective, selector: "tui-primitive-textfield" }, { kind: "directive", type: i2.TuiTextfieldIconLeftDirective, selector: "[tuiTextfieldIconLeft]", inputs: ["tuiTextfieldIconLeft"] }, { kind: "component", type: i3.TuiColorSelectorComponent, selector: "tui-color-selector", inputs: ["colors", "color"], outputs: ["colorChange"] }, { kind: "directive", type: i4.MaskitoDirective, selector: "[maskito]", inputs: ["maskito", "maskitoElement"] }, { kind: "directive", type: i5.TuiDropdownDirective, selector: "[tuiDropdown]:not(ng-container):not(ng-template)", inputs: ["tuiDropdown"], exportAs: ["tuiDropdown"] }, { kind: "directive", type: i5.TuiDropdownOpen, selector: "[tuiDropdown][tuiDropdownOpen],[tuiDropdown][tuiDropdownOpenChange]", inputs: ["tuiDropdownEnabled", "tuiDropdownOpen"], outputs: ["tuiDropdownOpenChange"] }], viewProviders: [tuiDropdownOptionsProvider({ maxHeight: 600 })], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 __decorate([
     tuiPure
@@ -74,12 +79,13 @@ export { TuiInputColorComponent };
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiInputColorComponent, decorators: [{
             type: Component,
             args: [{ standalone: false, selector: 'tui-input-color', changeDetection: ChangeDetectionStrategy.OnPush, viewProviders: [tuiDropdownOptionsProvider({ maxHeight: 600 })], host: {
+                        '[attr.data-size]': 'size',
                         '(click)': 'onClick()',
-                    }, template: "<div\n    class=\"t-wrapper\"\n    [tuiDropdown]=\"picker\"\n    [(tuiDropdownOpen)]=\"open\"\n>\n    <tui-primitive-textfield\n        class=\"t-textfield\"\n        [disabled]=\"disabled\"\n        [focusable]=\"focusable\"\n        [invalid]=\"computedInvalid\"\n        [maskito]=\"maskitoOptions(mode)\"\n        [nativeId]=\"nativeId\"\n        [pseudoActive]=\"pseudoActive\"\n        [pseudoFocus]=\"computedFocused\"\n        [pseudoHover]=\"pseudoHover\"\n        [readOnly]=\"readOnly\"\n        [tuiTextfieldIconLeft]=\"color\"\n        [(value)]=\"value\"\n        (focusedChange)=\"onFocused($event)\"\n    >\n        <ng-content />\n    </tui-primitive-textfield>\n</div>\n\n<ng-template #color>\n    <div\n        class=\"t-color\"\n        [style.background]=\"background\"\n    ></div>\n</ng-template>\n\n<ng-template #picker>\n    <tui-color-selector\n        [colors]=\"colors\"\n        [(color)]=\"value\"\n    />\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-wrapper{display:flex;border-radius:inherit;inline-size:100%}.t-textfield{border-radius:inherit;text-align:inherit;inline-size:inherit}.t-textfield ::ng-deep .t-input{text-transform:lowercase!important}.t-color{inline-size:1.5rem;block-size:1.5rem;box-shadow:inset 0 0 0 1px var(--tui-base-03-dark);border-radius:.125rem;pointer-events:auto!important}\n"] }]
+                    }, template: "<div\n    class=\"t-wrapper\"\n    [tuiDropdown]=\"picker\"\n    [(tuiDropdownOpen)]=\"open\"\n>\n    <tui-primitive-textfield\n        class=\"t-textfield\"\n        [disabled]=\"disabled\"\n        [focusable]=\"focusable\"\n        [invalid]=\"computedInvalid\"\n        [maskito]=\"maskitoOptions(mode)\"\n        [nativeId]=\"nativeId\"\n        [pseudoActive]=\"pseudoActive\"\n        [pseudoFocus]=\"computedFocused\"\n        [pseudoHover]=\"pseudoHover\"\n        [readOnly]=\"readOnly\"\n        [tuiTextfieldIconLeft]=\"color\"\n        [(value)]=\"value\"\n        (focusedChange)=\"onFocused($event)\"\n    >\n        <ng-content />\n    </tui-primitive-textfield>\n</div>\n\n<ng-template #color>\n    <div\n        class=\"t-color\"\n        [style.background]=\"background\"\n    ></div>\n</ng-template>\n\n<ng-template #picker>\n    <tui-color-selector\n        [colors]=\"colors\"\n        [(color)]=\"value\"\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 :host-context(*:disabled){pointer-events:none}.t-wrapper{display:flex;border-radius:inherit;inline-size:100%}.t-textfield{border-radius:inherit;text-align:inherit;inline-size:inherit}.t-textfield ::ng-deep .t-input{text-transform:lowercase!important}.t-color{inline-size:1.5rem;block-size:1.5rem;box-shadow:inset 0 0 0 1px var(--tui-base-03-dark);border-radius:.125rem;pointer-events:auto!important}\n"] }]
         }], propDecorators: { textfield: [{
                 type: ViewChild,
                 args: [TuiPrimitiveTextfieldComponent]
             }], colors: [{
                 type: Input
             }], maskitoOptions: [], sanitize: [] } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5wdXQtY29sb3IuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbGVnYWN5L2NvbXBvbmVudHMvaW5wdXQtY29sb3IvaW5wdXQtY29sb3IuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbGVnYWN5L2NvbXBvbmVudHMvaW5wdXQtY29sb3IvaW5wdXQtY29sb3IudGVtcGxhdGUuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxFQUNILHVCQUF1QixFQUN2QixTQUFTLEVBQ1QsTUFBTSxFQUNOLEtBQUssRUFDTCxTQUFTLEdBQ1osTUFBTSxlQUFlLENBQUM7QUFDdkIsT0FBTyxFQUFDLFlBQVksRUFBaUIsTUFBTSwyQkFBMkIsQ0FBQztBQUV2RSxPQUFPLEVBQ0gsa0JBQWtCLEVBQ2xCLGdCQUFnQixFQUNoQixhQUFhLEdBQ2hCLE1BQU0sMkJBQTJCLENBQUM7QUFDbkMsT0FBTyxFQUFDLE9BQU8sRUFBQyxNQUFNLG1DQUFtQyxDQUFDO0FBQzFELE9BQU8sRUFBQywwQkFBMEIsRUFBQyxNQUFNLG9DQUFvQyxDQUFDO0FBQzlFLE9BQU8sRUFBQyxrQkFBa0IsRUFBQyxNQUFNLDBCQUEwQixDQUFDO0FBQzVELE9BQU8sRUFBQyw4QkFBOEIsRUFBQyxNQUFNLGlEQUFpRCxDQUFDOzs7Ozs7O0FBUS9GOzs7R0FHRztBQUNILE1BV2Esc0JBQ1QsU0FBUSxrQkFBMEI7SUFadEM7O1FBa0JxQixpQkFBWSxHQUFHLE1BQU0sQ0FBQyxZQUFZLENBQUMsQ0FBQztRQUc5QyxXQUFNLEdBQWdDLElBQUksR0FBRyxFQUFrQixDQUFDO1FBRWhFLFNBQUksR0FBRyxLQUFLLENBQUM7S0FzRHZCO0lBcERHLElBQVcsT0FBTztRQUNkLE9BQU8sQ0FBQyxDQUFDLElBQUksQ0FBQyxTQUFTLEVBQUUsT0FBTyxDQUFDO0lBQ3JDLENBQUM7SUFFRCxJQUFXLHNCQUFzQjtRQUM3QixPQUFPLElBQUksQ0FBQyxnQkFBZ0IsSUFBSSxDQUFDLElBQUksQ0FBQyxTQUFTO1lBQzNDLENBQUMsQ0FBQyxJQUFJO1lBQ04sQ0FBQyxDQUFDLElBQUksQ0FBQyxTQUFTLENBQUMsc0JBQXNCLENBQUM7SUFDaEQsQ0FBQztJQUVELElBQVcsVUFBVTtRQUNqQixPQUFPLElBQUksQ0FBQyxRQUFRLENBQUMsSUFBSSxDQUFDLEtBQUssRUFBRSxJQUFJLENBQUMsWUFBWSxDQUFDLENBQUM7SUFDeEQsQ0FBQztJQUVELElBQVcsSUFBSTtRQUNYLElBQUksSUFBSSxDQUFDLEtBQUssQ0FBQyxVQUFVLENBQUMsR0FBRyxDQUFDLEVBQUU7WUFDNUIsT0FBTyxLQUFLLENBQUM7U0FDaEI7UUFFRCxPQUFPLElBQUksQ0FBQyxLQUFLLENBQUMsVUFBVSxDQUFDLEtBQUssQ0FBQyxDQUFDLENBQUMsQ0FBQyxLQUFLLENBQUMsQ0FBQyxDQUFDLFVBQVUsQ0FBQztJQUM3RCxDQUFDO0lBR00sY0FBYyxDQUFDLElBQWM7UUFDaEMsT0FBTyxJQUFJLEtBQUssS0FBSyxDQUFDLENBQUMsQ0FBQyxFQUFDLElBQUksRUFBRSxDQUFDLEdBQUcsRUFBRSxHQUFHLElBQUksS0FBSyxDQUFDLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FBQyxXQUFXLENBQUMsQ0FBQyxFQUFDLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FBQztJQUNwRixDQUFDO0lBRU0sT0FBTztRQUNWLElBQUksQ0FBQyxJQUFJLEdBQUcsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDO0lBQzNCLENBQUM7SUFFRCxvQ0FBb0M7SUFDN0IsYUFBYSxDQUFDLFNBQWlCO1FBQ2xDLElBQUksQ0FBQyxLQUFLLEdBQUcsU0FBUyxDQUFDO0lBQzNCLENBQUM7SUFFTSxTQUFTLENBQUMsT0FBZ0I7UUFDN0IsSUFBSSxDQUFDLGFBQWEsQ0FBQyxPQUFPLENBQUMsQ0FBQztJQUNoQyxDQUFDO0lBRVMsZ0JBQWdCO1FBQ3RCLE9BQU8sU0FBUyxDQUFDO0lBQ3JCLENBQUM7SUFHTyxRQUFRLENBQUMsS0FBYSxFQUFFLFlBQTBCO1FBQ3RELE9BQU8sS0FBSyxDQUFDLFVBQVUsQ0FBQyxrQkFBa0IsQ0FBQztZQUN2QyxDQUFDLENBQUMsWUFBWSxDQUFDLHdCQUF3QixDQUNqQyxhQUFhLENBQUMsZ0JBQWdCLENBQUMsa0JBQWtCLENBQUMsS0FBSyxDQUFDLENBQUMsQ0FBQyxDQUM3RDtZQUNILENBQUMsQ0FBQyxLQUFLLENBQUM7SUFDaEIsQ0FBQzsrR0FqRVEsc0JBQXNCO21HQUF0QixzQkFBc0IsK0tBSXBCLDhCQUE4Qix1RUM1QzdDLDI3QkFxQ0EsMGtEREZtQixDQUFDLDBCQUEwQixDQUFDLEVBQUMsU0FBUyxFQUFFLEdBQUcsRUFBQyxDQUFDLENBQUM7O0FBMEN0RDtJQUROLE9BQU87NERBR1A7QUFvQk87SUFEUCxPQUFPO3NEQU9QO1NBakVRLHNCQUFzQjs0RkFBdEIsc0JBQXNCO2tCQVhsQyxTQUFTO2lDQUNNLEtBQUssWUFDUCxpQkFBaUIsbUJBR1YsdUJBQXVCLENBQUMsTUFBTSxpQkFDaEMsQ0FBQywwQkFBMEIsQ0FBQyxFQUFDLFNBQVMsRUFBRSxHQUFHLEVBQUMsQ0FBQyxDQUFDLFFBQ3ZEO3dCQUNGLFNBQVMsRUFBRSxXQUFXO3FCQUN6Qjs4QkFPZ0IsU0FBUztzQkFEekIsU0FBUzt1QkFBQyw4QkFBOEI7Z0JBTWxDLE1BQU07c0JBRFosS0FBSztnQkE0QkMsY0FBYyxNQXNCYixRQUFRIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgICBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSxcbiAgICBDb21wb25lbnQsXG4gICAgaW5qZWN0LFxuICAgIElucHV0LFxuICAgIFZpZXdDaGlsZCxcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQge0RvbVNhbml0aXplciwgdHlwZSBTYWZlU3R5bGV9IGZyb20gJ0Bhbmd1bGFyL3BsYXRmb3JtLWJyb3dzZXInO1xuaW1wb3J0IHt0eXBlIE1hc2tpdG9PcHRpb25zfSBmcm9tICdAbWFza2l0by9jb3JlJztcbmltcG9ydCB7XG4gICAgdHVpR2V0R3JhZGllbnREYXRhLFxuICAgIHR1aVBhcnNlR3JhZGllbnQsXG4gICAgdHVpVG9HcmFkaWVudCxcbn0gZnJvbSAnQHRhaWdhLXVpL2Nkay91dGlscy9jb2xvcic7XG5pbXBvcnQge3R1aVB1cmV9IGZyb20gJ0B0YWlnYS11aS9jZGsvdXRpbHMvbWlzY2VsbGFuZW91cyc7XG5pbXBvcnQge3R1aURyb3Bkb3duT3B0aW9uc1Byb3ZpZGVyfSBmcm9tICdAdGFpZ2EtdWkvY29yZS9kaXJlY3RpdmVzL2Ryb3Bkb3duJztcbmltcG9ydCB7QWJzdHJhY3RUdWlDb250cm9sfSBmcm9tICdAdGFpZ2EtdWkvbGVnYWN5L2NsYXNzZXMnO1xuaW1wb3J0IHtUdWlQcmltaXRpdmVUZXh0ZmllbGRDb21wb25lbnR9IGZyb20gJ0B0YWlnYS11aS9sZWdhY3kvY29tcG9uZW50cy9wcmltaXRpdmUtdGV4dGZpZWxkJztcbmltcG9ydCB7XG4gICAgdHlwZSBUdWlGb2N1c2FibGVFbGVtZW50QWNjZXNzb3IsXG4gICAgdHlwZSBUdWlOYXRpdmVGb2N1c2FibGVFbGVtZW50LFxufSBmcm9tICdAdGFpZ2EtdWkvbGVnYWN5L3Rva2Vucyc7XG5cbnR5cGUgTWFza01vZGUgPSAnZ3JhZGllbnQnIHwgJ2hleCcgfCAncmdiJztcblxuLyoqXG4gKiBUT0RPKHY1KTogZGVsZXRlIGl0XG4gKiBAZGVwcmVjYXRlZCB1c2UgbmV3IHZlcnNpb24gb2Yge0BsaW5rIGh0dHBzOi8vdGFpZ2EtdWkuZGV2L2NvbXBvbmVudHMvaW5wdXQtY29sb3IgVHVpSW5wdXRDb2xvcn0gKGZyb20gQHRhaWdhLXVpL2tpdCkgaW5zdGVhZFxuICovXG5AQ29tcG9uZW50KHtcbiAgICBzdGFuZGFsb25lOiBmYWxzZSxcbiAgICBzZWxlY3RvcjogJ3R1aS1pbnB1dC1jb2xvcicsXG4gICAgdGVtcGxhdGVVcmw6ICcuL2lucHV0LWNvbG9yLnRlbXBsYXRlLmh0bWwnLFxuICAgIHN0eWxlVXJsczogWycuL2lucHV0LWNvbG9yLnN0eWxlLmxlc3MnXSxcbiAgICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbiAgICB2aWV3UHJvdmlkZXJzOiBbdHVpRHJvcGRvd25PcHRpb25zUHJvdmlkZXIoe21heEhlaWdodDogNjAwfSldLFxuICAgIGhvc3Q6IHtcbiAgICAgICAgJyhjbGljayknOiAnb25DbGljaygpJyxcbiAgICB9LFxufSlcbmV4cG9ydCBjbGFzcyBUdWlJbnB1dENvbG9yQ29tcG9uZW50XG4gICAgZXh0ZW5kcyBBYnN0cmFjdFR1aUNvbnRyb2w8c3RyaW5nPlxuICAgIGltcGxlbWVudHMgVHVpRm9jdXNhYmxlRWxlbWVudEFjY2Vzc29yXG57XG4gICAgQFZpZXdDaGlsZChUdWlQcmltaXRpdmVUZXh0ZmllbGRDb21wb25lbnQpXG4gICAgcHJpdmF0ZSByZWFkb25seSB0ZXh0ZmllbGQ/OiBUdWlQcmltaXRpdmVUZXh0ZmllbGRDb21wb25lbnQ7XG5cbiAgICBwcml2YXRlIHJlYWRvbmx5IGRvbVNhbml0aXplciA9IGluamVjdChEb21TYW5pdGl6ZXIpO1xuXG4gICAgQElucHV0KClcbiAgICBwdWJsaWMgY29sb3JzOiBSZWFkb25seU1hcDxzdHJpbmcsIHN0cmluZz4gPSBuZXcgTWFwPHN0cmluZywgc3RyaW5nPigpO1xuXG4gICAgcHVibGljIG9wZW4gPSBmYWxzZTtcblxuICAgIHB1YmxpYyBnZXQgZm9jdXNlZCgpOiBib29sZWFuIHtcbiAgICAgICAgcmV0dXJuICEhdGhpcy50ZXh0ZmllbGQ/LmZvY3VzZWQ7XG4gICAgfVxuXG4gICAgcHVibGljIGdldCBuYXRpdmVGb2N1c2FibGVFbGVtZW50KCk6IFR1aU5hdGl2ZUZvY3VzYWJsZUVsZW1lbnQgfCBudWxsIHtcbiAgICAgICAgcmV0dXJuIHRoaXMuY29tcHV0ZWREaXNhYmxlZCB8fCAhdGhpcy50ZXh0ZmllbGRcbiAgICAgICAgICAgID8gbnVsbFxuICAgICAgICAgICAgOiB0aGlzLnRleHRmaWVsZC5uYXRpdmVGb2N1c2FibGVFbGVtZW50O1xuICAgIH1cblxuICAgIHB1YmxpYyBnZXQgYmFja2dyb3VuZCgpOiBTYWZlU3R5bGUge1xuICAgICAgICByZXR1cm4gdGhpcy5zYW5pdGl6ZSh0aGlzLnZhbHVlLCB0aGlzLmRvbVNhbml0aXplcik7XG4gICAgfVxuXG4gICAgcHVibGljIGdldCBtb2RlKCk6IE1hc2tNb2RlIHtcbiAgICAgICAgaWYgKHRoaXMudmFsdWUuc3RhcnRzV2l0aCgnIycpKSB7XG4gICAgICAgICAgICByZXR1cm4gJ2hleCc7XG4gICAgICAgIH1cblxuICAgICAgICByZXR1cm4gdGhpcy52YWx1ZS5zdGFydHNXaXRoKCdyZ2InKSA/ICdyZ2InIDogJ2dyYWRpZW50JztcbiAgICB9XG5cbiAgICBAdHVpUHVyZVxuICAgIHB1YmxpYyBtYXNraXRvT3B0aW9ucyhtb2RlOiBNYXNrTW9kZSk6IE1hc2tpdG9PcHRpb25zIHwgbnVsbCB7XG4gICAgICAgIHJldHVybiBtb2RlID09PSAnaGV4JyA/IHttYXNrOiBbJyMnLCAuLi5uZXcgQXJyYXkoNikuZmlsbCgvWzAtOWEtZl0vaSldfSA6IG51bGw7XG4gICAgfVxuXG4gICAgcHVibGljIG9uQ2xpY2soKTogdm9pZCB7XG4gICAgICAgIHRoaXMub3BlbiA9ICF0aGlzLm9wZW47XG4gICAgfVxuXG4gICAgLyoqIGRlcHJlY2F0ZWQgdXNlICd2YWx1ZScgc2V0dGVyICovXG4gICAgcHVibGljIG9uVmFsdWVDaGFuZ2UodGV4dFZhbHVlOiBzdHJpbmcpOiB2b2lkIHtcbiAgICAgICAgdGhpcy52YWx1ZSA9IHRleHRWYWx1ZTtcbiAgICB9XG5cbiAgICBwdWJsaWMgb25Gb2N1c2VkKGZvY3VzZWQ6IGJvb2xlYW4pOiB2b2lkIHtcbiAgICAgICAgdGhpcy51cGRhdGVGb2N1c2VkKGZvY3VzZWQpO1xuICAgIH1cblxuICAgIHByb3RlY3RlZCBnZXRGYWxsYmFja1ZhbHVlKCk6IHN0cmluZyB7XG4gICAgICAgIHJldHVybiAnIzAwMDAwMCc7XG4gICAgfVxuXG4gICAgQHR1aVB1cmVcbiAgICBwcml2YXRlIHNhbml0aXplKHZhbHVlOiBzdHJpbmcsIGRvbVNhbml0aXplcjogRG9tU2FuaXRpemVyKTogU2FmZVN0eWxlIHwgc3RyaW5nIHtcbiAgICAgICAgcmV0dXJuIHZhbHVlLnN0YXJ0c1dpdGgoJ2xpbmVhci1ncmFkaWVudCgnKVxuICAgICAgICAgICAgPyBkb21TYW5pdGl6ZXIuYnlwYXNzU2VjdXJpdHlUcnVzdFN0eWxlKFxuICAgICAgICAgICAgICAgICAgdHVpVG9HcmFkaWVudCh0dWlQYXJzZUdyYWRpZW50KHR1aUdldEdyYWRpZW50RGF0YSh2YWx1ZSkpKSxcbiAgICAgICAgICAgICAgKVxuICAgICAgICAgICAgOiB2YWx1ZTtcbiAgICB9XG59XG4iLCI8ZGl2XG4gICAgY2xhc3M9XCJ0LXdyYXBwZXJcIlxuICAgIFt0dWlEcm9wZG93bl09XCJwaWNrZXJcIlxuICAgIFsodHVpRHJvcGRvd25PcGVuKV09XCJvcGVuXCJcbj5cbiAgICA8dHVpLXByaW1pdGl2ZS10ZXh0ZmllbGRcbiAgICAgICAgY2xhc3M9XCJ0LXRleHRmaWVsZFwiXG4gICAgICAgIFtkaXNhYmxlZF09XCJkaXNhYmxlZFwiXG4gICAgICAgIFtmb2N1c2FibGVdPVwiZm9jdXNhYmxlXCJcbiAgICAgICAgW2ludmFsaWRdPVwiY29tcHV0ZWRJbnZhbGlkXCJcbiAgICAgICAgW21hc2tpdG9dPVwibWFza2l0b09wdGlvbnMobW9kZSlcIlxuICAgICAgICBbbmF0aXZlSWRdPVwibmF0aXZlSWRcIlxuICAgICAgICBbcHNldWRvQWN0aXZlXT1cInBzZXVkb0FjdGl2ZVwiXG4gICAgICAgIFtwc2V1ZG9Gb2N1c109XCJjb21wdXRlZEZvY3VzZWRcIlxuICAgICAgICBbcHNldWRvSG92ZXJdPVwicHNldWRvSG92ZXJcIlxuICAgICAgICBbcmVhZE9ubHldPVwicmVhZE9ubHlcIlxuICAgICAgICBbdHVpVGV4dGZpZWxkSWNvbkxlZnRdPVwiY29sb3JcIlxuICAgICAgICBbKHZhbHVlKV09XCJ2YWx1ZVwiXG4gICAgICAgIChmb2N1c2VkQ2hhbmdlKT1cIm9uRm9jdXNlZCgkZXZlbnQpXCJcbiAgICA+XG4gICAgICAgIDxuZy1jb250ZW50IC8+XG4gICAgPC90dWktcHJpbWl0aXZlLXRleHRmaWVsZD5cbjwvZGl2PlxuXG48bmctdGVtcGxhdGUgI2NvbG9yPlxuICAgIDxkaXZcbiAgICAgICAgY2xhc3M9XCJ0LWNvbG9yXCJcbiAgICAgICAgW3N0eWxlLmJhY2tncm91bmRdPVwiYmFja2dyb3VuZFwiXG4gICAgPjwvZGl2PlxuPC9uZy10ZW1wbGF0ZT5cblxuPG5nLXRlbXBsYXRlICNwaWNrZXI+XG4gICAgPHR1aS1jb2xvci1zZWxlY3RvclxuICAgICAgICBbY29sb3JzXT1cImNvbG9yc1wiXG4gICAgICAgIFsoY29sb3IpXT1cInZhbHVlXCJcbiAgICAvPlxuPC9uZy10ZW1wbGF0ZT5cbiJdfQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5wdXQtY29sb3IuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbGVnYWN5L2NvbXBvbmVudHMvaW5wdXQtY29sb3IvaW5wdXQtY29sb3IuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbGVnYWN5L2NvbXBvbmVudHMvaW5wdXQtY29sb3IvaW5wdXQtY29sb3IudGVtcGxhdGUuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxFQUNILHVCQUF1QixFQUN2QixTQUFTLEVBQ1QsTUFBTSxFQUNOLEtBQUssRUFDTCxTQUFTLEdBQ1osTUFBTSxlQUFlLENBQUM7QUFDdkIsT0FBTyxFQUFDLFlBQVksRUFBaUIsTUFBTSwyQkFBMkIsQ0FBQztBQUV2RSxPQUFPLEVBQ0gsa0JBQWtCLEVBQ2xCLGdCQUFnQixFQUNoQixhQUFhLEdBQ2hCLE1BQU0sMkJBQTJCLENBQUM7QUFDbkMsT0FBTyxFQUFDLE9BQU8sRUFBQyxNQUFNLG1DQUFtQyxDQUFDO0FBQzFELE9BQU8sRUFBQywwQkFBMEIsRUFBQyxNQUFNLG9DQUFvQyxDQUFDO0FBRTlFLE9BQU8sRUFBQyxrQkFBa0IsRUFBQyxNQUFNLDBCQUEwQixDQUFDO0FBQzVELE9BQU8sRUFBQyw4QkFBOEIsRUFBQyxNQUFNLGlEQUFpRCxDQUFDO0FBQy9GLE9BQU8sRUFBQyxrQkFBa0IsRUFBQyxNQUFNLDZCQUE2QixDQUFDOzs7Ozs7O0FBUS9EOzs7R0FHRztBQUNILE1BWWEsc0JBQ1QsU0FBUSxrQkFBMEI7SUFidEM7O1FBbUJxQixpQkFBWSxHQUFHLE1BQU0sQ0FBQyxZQUFZLENBQUMsQ0FBQztRQUNwQyxrQkFBYSxHQUFHLE1BQU0sQ0FBQyxrQkFBa0IsQ0FBQyxDQUFDO1FBR3JELFdBQU0sR0FBZ0MsSUFBSSxHQUFHLEVBQWtCLENBQUM7UUFFaEUsU0FBSSxHQUFHLEtBQUssQ0FBQztLQTBEdkI7SUF4REcsSUFBVyxJQUFJO1FBQ1gsT0FBTyxJQUFJLENBQUMsYUFBYSxDQUFDLElBQUksQ0FBQztJQUNuQyxDQUFDO0lBRUQsSUFBVyxPQUFPO1FBQ2QsT0FBTyxDQUFDLENBQUMsSUFBSSxDQUFDLFNBQVMsRUFBRSxPQUFPLENBQUM7SUFDckMsQ0FBQztJQUVELElBQVcsc0JBQXNCO1FBQzdCLE9BQU8sSUFBSSxDQUFDLGdCQUFnQixJQUFJLENBQUMsSUFBSSxDQUFDLFNBQVM7WUFDM0MsQ0FBQyxDQUFDLElBQUk7WUFDTixDQUFDLENBQUMsSUFBSSxDQUFDLFNBQVMsQ0FBQyxzQkFBc0IsQ0FBQztJQUNoRCxDQUFDO0lBRUQsSUFBVyxVQUFVO1FBQ2pCLE9BQU8sSUFBSSxDQUFDLFFBQVEsQ0FBQyxJQUFJLENBQUMsS0FBSyxFQUFFLElBQUksQ0FBQyxZQUFZLENBQUMsQ0FBQztJQUN4RCxDQUFDO0lBRUQsSUFBVyxJQUFJO1FBQ1gsSUFBSSxJQUFJLENBQUMsS0FBSyxDQUFDLFVBQVUsQ0FBQyxHQUFHLENBQUMsRUFBRTtZQUM1QixPQUFPLEtBQUssQ0FBQztTQUNoQjtRQUVELE9BQU8sSUFBSSxDQUFDLEtBQUssQ0FBQyxVQUFVLENBQUMsS0FBSyxDQUFDLENBQUMsQ0FBQyxDQUFDLEtBQUssQ0FBQyxDQUFDLENBQUMsVUFBVSxDQUFDO0lBQzdELENBQUM7SUFHTSxjQUFjLENBQUMsSUFBYztRQUNoQyxPQUFPLElBQUksS0FBSyxLQUFLLENBQUMsQ0FBQyxDQUFDLEVBQUMsSUFBSSxFQUFFLENBQUMsR0FBRyxFQUFFLEdBQUcsSUFBSSxLQUFLLENBQUMsQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFDLFdBQVcsQ0FBQyxDQUFDLEVBQUMsQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFDO0lBQ3BGLENBQUM7SUFFTSxPQUFPO1FBQ1YsSUFBSSxDQUFDLElBQUksR0FBRyxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUM7SUFDM0IsQ0FBQztJQUVELG9DQUFvQztJQUM3QixhQUFhLENBQUMsU0FBaUI7UUFDbEMsSUFBSSxDQUFDLEtBQUssR0FBRyxTQUFTLENBQUM7SUFDM0IsQ0FBQztJQUVNLFNBQVMsQ0FBQyxPQUFnQjtRQUM3QixJQUFJLENBQUMsYUFBYSxDQUFDLE9BQU8sQ0FBQyxDQUFDO0lBQ2hDLENBQUM7SUFFUyxnQkFBZ0I7UUFDdEIsT0FBTyxTQUFTLENBQUM7SUFDckIsQ0FBQztJQUdPLFFBQVEsQ0FBQyxLQUFhLEVBQUUsWUFBMEI7UUFDdEQsT0FBTyxLQUFLLENBQUMsVUFBVSxDQUFDLGtCQUFrQixDQUFDO1lBQ3ZDLENBQUMsQ0FBQyxZQUFZLENBQUMsd0JBQXdCLENBQ2pDLGFBQWEsQ0FBQyxnQkFBZ0IsQ0FBQyxrQkFBa0IsQ0FBQyxLQUFLLENBQUMsQ0FBQyxDQUFDLENBQzdEO1lBQ0gsQ0FBQyxDQUFDLEtBQUssQ0FBQztJQUNoQixDQUFDOytHQXRFUSxzQkFBc0I7bUdBQXRCLHNCQUFzQix5TkFJcEIsOEJBQThCLHVFQy9DN0MsMjdCQXFDQSwrbkREQW1CLENBQUMsMEJBQTBCLENBQUMsRUFBQyxTQUFTLEVBQUUsR0FBRyxFQUFDLENBQUMsQ0FBQzs7QUFnRHREO0lBRE4sT0FBTzs0REFHUDtBQW9CTztJQURQLE9BQU87c0RBT1A7U0F0RVEsc0JBQXNCOzRGQUF0QixzQkFBc0I7a0JBWmxDLFNBQVM7aUNBQ00sS0FBSyxZQUNQLGlCQUFpQixtQkFHVix1QkFBdUIsQ0FBQyxNQUFNLGlCQUNoQyxDQUFDLDBCQUEwQixDQUFDLEVBQUMsU0FBUyxFQUFFLEdBQUcsRUFBQyxDQUFDLENBQUMsUUFDdkQ7d0JBQ0Ysa0JBQWtCLEVBQUUsTUFBTTt3QkFDMUIsU0FBUyxFQUFFLFdBQVc7cUJBQ3pCOzhCQU9nQixTQUFTO3NCQUR6QixTQUFTO3VCQUFDLDhCQUE4QjtnQkFPbEMsTUFBTTtzQkFEWixLQUFLO2dCQWdDQyxjQUFjLE1Bc0JiLFFBQVEiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICAgIENoYW5nZURldGVjdGlvblN0cmF0ZWd5LFxuICAgIENvbXBvbmVudCxcbiAgICBpbmplY3QsXG4gICAgSW5wdXQsXG4gICAgVmlld0NoaWxkLFxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7RG9tU2FuaXRpemVyLCB0eXBlIFNhZmVTdHlsZX0gZnJvbSAnQGFuZ3VsYXIvcGxhdGZvcm0tYnJvd3Nlcic7XG5pbXBvcnQge3R5cGUgTWFza2l0b09wdGlvbnN9IGZyb20gJ0BtYXNraXRvL2NvcmUnO1xuaW1wb3J0IHtcbiAgICB0dWlHZXRHcmFkaWVudERhdGEsXG4gICAgdHVpUGFyc2VHcmFkaWVudCxcbiAgICB0dWlUb0dyYWRpZW50LFxufSBmcm9tICdAdGFpZ2EtdWkvY2RrL3V0aWxzL2NvbG9yJztcbmltcG9ydCB7dHVpUHVyZX0gZnJvbSAnQHRhaWdhLXVpL2Nkay91dGlscy9taXNjZWxsYW5lb3VzJztcbmltcG9ydCB7dHVpRHJvcGRvd25PcHRpb25zUHJvdmlkZXJ9IGZyb20gJ0B0YWlnYS11aS9jb3JlL2RpcmVjdGl2ZXMvZHJvcGRvd24nO1xuaW1wb3J0IHt0eXBlIFR1aVNpemVMLCB0eXBlIFR1aVNpemVTfSBmcm9tICdAdGFpZ2EtdWkvY29yZS90eXBlcyc7XG5pbXBvcnQge0Fic3RyYWN0VHVpQ29udHJvbH0gZnJvbSAnQHRhaWdhLXVpL2xlZ2FjeS9jbGFzc2VzJztcbmltcG9ydCB7VHVpUHJpbWl0aXZlVGV4dGZpZWxkQ29tcG9uZW50fSBmcm9tICdAdGFpZ2EtdWkvbGVnYWN5L2NvbXBvbmVudHMvcHJpbWl0aXZlLXRleHRmaWVsZCc7XG5pbXBvcnQge1RVSV9URVhURklFTERfU0laRX0gZnJvbSAnQHRhaWdhLXVpL2xlZ2FjeS9kaXJlY3RpdmVzJztcbmltcG9ydCB7XG4gICAgdHlwZSBUdWlGb2N1c2FibGVFbGVtZW50QWNjZXNzb3IsXG4gICAgdHlwZSBUdWlOYXRpdmVGb2N1c2FibGVFbGVtZW50LFxufSBmcm9tICdAdGFpZ2EtdWkvbGVnYWN5L3Rva2Vucyc7XG5cbnR5cGUgTWFza01vZGUgPSAnZ3JhZGllbnQnIHwgJ2hleCcgfCAncmdiJztcblxuLyoqXG4gKiBUT0RPKHY1KTogZGVsZXRlIGl0XG4gKiBAZGVwcmVjYXRlZCB1c2UgbmV3IHZlcnNpb24gb2Yge0BsaW5rIGh0dHBzOi8vdGFpZ2EtdWkuZGV2L2NvbXBvbmVudHMvaW5wdXQtY29sb3IgVHVpSW5wdXRDb2xvcn0gKGZyb20gQHRhaWdhLXVpL2tpdCkgaW5zdGVhZFxuICovXG5AQ29tcG9uZW50KHtcbiAgICBzdGFuZGFsb25lOiBmYWxzZSxcbiAgICBzZWxlY3RvcjogJ3R1aS1pbnB1dC1jb2xvcicsXG4gICAgdGVtcGxhdGVVcmw6ICcuL2lucHV0LWNvbG9yLnRlbXBsYXRlLmh0bWwnLFxuICAgIHN0eWxlVXJsczogWycuL2lucHV0LWNvbG9yLnN0eWxlLmxlc3MnXSxcbiAgICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbiAgICB2aWV3UHJvdmlkZXJzOiBbdHVpRHJvcGRvd25PcHRpb25zUHJvdmlkZXIoe21heEhlaWdodDogNjAwfSldLFxuICAgIGhvc3Q6IHtcbiAgICAgICAgJ1thdHRyLmRhdGEtc2l6ZV0nOiAnc2l6ZScsXG4gICAgICAgICcoY2xpY2spJzogJ29uQ2xpY2soKScsXG4gICAgfSxcbn0pXG5leHBvcnQgY2xhc3MgVHVpSW5wdXRDb2xvckNvbXBvbmVudFxuICAgIGV4dGVuZHMgQWJzdHJhY3RUdWlDb250cm9sPHN0cmluZz5cbiAgICBpbXBsZW1lbnRzIFR1aUZvY3VzYWJsZUVsZW1lbnRBY2Nlc3Nvclxue1xuICAgIEBWaWV3Q2hpbGQoVHVpUHJpbWl0aXZlVGV4dGZpZWxkQ29tcG9uZW50KVxuICAgIHByaXZhdGUgcmVhZG9ubHkgdGV4dGZpZWxkPzogVHVpUHJpbWl0aXZlVGV4dGZpZWxkQ29tcG9uZW50O1xuXG4gICAgcHJpdmF0ZSByZWFkb25seSBkb21TYW5pdGl6ZXIgPSBpbmplY3QoRG9tU2FuaXRpemVyKTtcbiAgICBwcml2YXRlIHJlYWRvbmx5IHRleHRmaWVsZFNpemUgPSBpbmplY3QoVFVJX1RFWFRGSUVMRF9TSVpFKTtcblxuICAgIEBJbnB1dCgpXG4gICAgcHVibGljIGNvbG9yczogUmVhZG9ubHlNYXA8c3RyaW5nLCBzdHJpbmc+ID0gbmV3IE1hcDxzdHJpbmcsIHN0cmluZz4oKTtcblxuICAgIHB1YmxpYyBvcGVuID0gZmFsc2U7XG5cbiAgICBwdWJsaWMgZ2V0IHNpemUoKTogVHVpU2l6ZUwgfCBUdWlTaXplUyB7XG4gICAgICAgIHJldHVybiB0aGlzLnRleHRmaWVsZFNpemUuc2l6ZTtcbiAgICB9XG5cbiAgICBwdWJsaWMgZ2V0IGZvY3VzZWQoKTogYm9vbGVhbiB7XG4gICAgICAgIHJldHVybiAhIXRoaXMudGV4dGZpZWxkPy5mb2N1c2VkO1xuICAgIH1cblxuICAgIHB1YmxpYyBnZXQgbmF0aXZlRm9jdXNhYmxlRWxlbWVudCgpOiBUdWlOYXRpdmVGb2N1c2FibGVFbGVtZW50IHwgbnVsbCB7XG4gICAgICAgIHJldHVybiB0aGlzLmNvbXB1dGVkRGlzYWJsZWQgfHwgIXRoaXMudGV4dGZpZWxkXG4gICAgICAgICAgICA/IG51bGxcbiAgICAgICAgICAgIDogdGhpcy50ZXh0ZmllbGQubmF0aXZlRm9jdXNhYmxlRWxlbWVudDtcbiAgICB9XG5cbiAgICBwdWJsaWMgZ2V0IGJhY2tncm91bmQoKTogU2FmZVN0eWxlIHtcbiAgICAgICAgcmV0dXJuIHRoaXMuc2FuaXRpemUodGhpcy52YWx1ZSwgdGhpcy5kb21TYW5pdGl6ZXIpO1xuICAgIH1cblxuICAgIHB1YmxpYyBnZXQgbW9kZSgpOiBNYXNrTW9kZSB7XG4gICAgICAgIGlmICh0aGlzLnZhbHVlLnN0YXJ0c1dpdGgoJyMnKSkge1xuICAgICAgICAgICAgcmV0dXJuICdoZXgnO1xuICAgICAgICB9XG5cbiAgICAgICAgcmV0dXJuIHRoaXMudmFsdWUuc3RhcnRzV2l0aCgncmdiJykgPyAncmdiJyA6ICdncmFkaWVudCc7XG4gICAgfVxuXG4gICAgQHR1aVB1cmVcbiAgICBwdWJsaWMgbWFza2l0b09wdGlvbnMobW9kZTogTWFza01vZGUpOiBNYXNraXRvT3B0aW9ucyB8IG51bGwge1xuICAgICAgICByZXR1cm4gbW9kZSA9PT0gJ2hleCcgPyB7bWFzazogWycjJywgLi4ubmV3IEFycmF5KDYpLmZpbGwoL1swLTlhLWZdL2kpXX0gOiBudWxsO1xuICAgIH1cblxuICAgIHB1YmxpYyBvbkNsaWNrKCk6IHZvaWQge1xuICAgICAgICB0aGlzLm9wZW4gPSAhdGhpcy5vcGVuO1xuICAgIH1cblxuICAgIC8qKiBkZXByZWNhdGVkIHVzZSAndmFsdWUnIHNldHRlciAqL1xuICAgIHB1YmxpYyBvblZhbHVlQ2hhbmdlKHRleHRWYWx1ZTogc3RyaW5nKTogdm9pZCB7XG4gICAgICAgIHRoaXMudmFsdWUgPSB0ZXh0VmFsdWU7XG4gICAgfVxuXG4gICAgcHVibGljIG9uRm9jdXNlZChmb2N1c2VkOiBib29sZWFuKTogdm9pZCB7XG4gICAgICAgIHRoaXMudXBkYXRlRm9jdXNlZChmb2N1c2VkKTtcbiAgICB9XG5cbiAgICBwcm90ZWN0ZWQgZ2V0RmFsbGJhY2tWYWx1ZSgpOiBzdHJpbmcge1xuICAgICAgICByZXR1cm4gJyMwMDAwMDAnO1xuICAgIH1cblxuICAgIEB0dWlQdXJlXG4gICAgcHJpdmF0ZSBzYW5pdGl6ZSh2YWx1ZTogc3RyaW5nLCBkb21TYW5pdGl6ZXI6IERvbVNhbml0aXplcik6IFNhZmVTdHlsZSB8IHN0cmluZyB7XG4gICAgICAgIHJldHVybiB2YWx1ZS5zdGFydHNXaXRoKCdsaW5lYXItZ3JhZGllbnQoJylcbiAgICAgICAgICAgID8gZG9tU2FuaXRpemVyLmJ5cGFzc1NlY3VyaXR5VHJ1c3RTdHlsZShcbiAgICAgICAgICAgICAgICAgIHR1aVRvR3JhZGllbnQodHVpUGFyc2VHcmFkaWVudCh0dWlHZXRHcmFkaWVudERhdGEodmFsdWUpKSksXG4gICAgICAgICAgICAgIClcbiAgICAgICAgICAgIDogdmFsdWU7XG4gICAgfVxufVxuIiwiPGRpdlxuICAgIGNsYXNzPVwidC13cmFwcGVyXCJcbiAgICBbdHVpRHJvcGRvd25dPVwicGlja2VyXCJcbiAgICBbKHR1aURyb3Bkb3duT3BlbildPVwib3BlblwiXG4+XG4gICAgPHR1aS1wcmltaXRpdmUtdGV4dGZpZWxkXG4gICAgICAgIGNsYXNzPVwidC10ZXh0ZmllbGRcIlxuICAgICAgICBbZGlzYWJsZWRdPVwiZGlzYWJsZWRcIlxuICAgICAgICBbZm9jdXNhYmxlXT1cImZvY3VzYWJsZVwiXG4gICAgICAgIFtpbnZhbGlkXT1cImNvbXB1dGVkSW52YWxpZFwiXG4gICAgICAgIFttYXNraXRvXT1cIm1hc2tpdG9PcHRpb25zKG1vZGUpXCJcbiAgICAgICAgW25hdGl2ZUlkXT1cIm5hdGl2ZUlkXCJcbiAgICAgICAgW3BzZXVkb0FjdGl2ZV09XCJwc2V1ZG9BY3RpdmVcIlxuICAgICAgICBbcHNldWRvRm9jdXNdPVwiY29tcHV0ZWRGb2N1c2VkXCJcbiAgICAgICAgW3BzZXVkb0hvdmVyXT1cInBzZXVkb0hvdmVyXCJcbiAgICAgICAgW3JlYWRPbmx5XT1cInJlYWRPbmx5XCJcbiAgICAgICAgW3R1aVRleHRmaWVsZEljb25MZWZ0XT1cImNvbG9yXCJcbiAgICAgICAgWyh2YWx1ZSldPVwidmFsdWVcIlxuICAgICAgICAoZm9jdXNlZENoYW5nZSk9XCJvbkZvY3VzZWQoJGV2ZW50KVwiXG4gICAgPlxuICAgICAgICA8bmctY29udGVudCAvPlxuICAgIDwvdHVpLXByaW1pdGl2ZS10ZXh0ZmllbGQ+XG48L2Rpdj5cblxuPG5nLXRlbXBsYXRlICNjb2xvcj5cbiAgICA8ZGl2XG4gICAgICAgIGNsYXNzPVwidC1jb2xvclwiXG4gICAgICAgIFtzdHlsZS5iYWNrZ3JvdW5kXT1cImJhY2tncm91bmRcIlxuICAgID48L2Rpdj5cbjwvbmctdGVtcGxhdGU+XG5cbjxuZy10ZW1wbGF0ZSAjcGlja2VyPlxuICAgIDx0dWktY29sb3Itc2VsZWN0b3JcbiAgICAgICAgW2NvbG9yc109XCJjb2xvcnNcIlxuICAgICAgICBbKGNvbG9yKV09XCJ2YWx1ZVwiXG4gICAgLz5cbjwvbmctdGVtcGxhdGU+XG4iXX0=

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

@@ -77,7 +77,7 @@ class TuiInputCopyComponent extends AbstractTuiControl {
             TUI_VALUE_ACCESSOR_PROVIDER,
             tuiAsFocusableItemAccessor(TuiInputCopyComponent),
             tuiAsControl(TuiInputCopyComponent),
-        ], 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]=\"!disabled ? 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 #iconContent>\n    <tui-icon\n        *polymorpheusOutlet=\"icon as src; context: {$implicit: size}\"\n        automation-id=\"tui-copy__icon\"\n        tuiAppearance=\"icon\"\n        class=\"t-icon\"\n        [class.t-icon_small]=\"size === 's'\"\n        [icon]=\"src.toString()\"\n        [tuiAppearanceState]=\"!value ? 'disabled' : null\"\n        [tuiHint]=\"hint\"\n        [tuiHintAppearance]=\"messageAppearance\"\n        [tuiHintDirection]=\"messageDirection\"\n        (click)=\"copy()\"\n    />\n</ng-template>\n\n<ng-template #hint>\n    <ng-container *polymorpheusOutlet=\"hintText$ | async as text\">\n        {{ text }}\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{position:relative;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.PolymorpheusOutlet, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }, { 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: i4.TuiAppearance, selector: "[tuiAppearance]", inputs: ["tuiAppearance", "tuiAppearanceState", "tuiAppearanceFocus", "tuiAppearanceMode"] }, { kind: "component", type: i5.TuiIcon, selector: "tui-icon", inputs: ["icon", "background"] }, { kind: "directive", type: i6.TuiHintDirective, selector: "[tuiHint]:not(ng-container):not(ng-template)", inputs: ["tuiHintContext", "tuiHintAppearance", "tuiHint"], outputs: ["tuiHintVisible"] }, { kind: "pipe", type: i7.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]=\"!disabled ? 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 #iconContent>\n    <tui-icon\n        *polymorpheusOutlet=\"icon as src; context: {$implicit: size}\"\n        automation-id=\"tui-copy__icon\"\n        tuiAppearance=\"icon\"\n        class=\"t-icon\"\n        [class.t-icon_small]=\"size === 's'\"\n        [icon]=\"src.toString()\"\n        [tuiAppearanceState]=\"!value ? 'disabled' : null\"\n        [tuiHint]=\"hint\"\n        [tuiHintAppearance]=\"messageAppearance\"\n        [tuiHintDirection]=\"messageDirection\"\n        (click)=\"copy()\"\n    />\n</ng-template>\n\n<ng-template #hint>\n    <ng-container *polymorpheusOutlet=\"hintText$ | async as text\">\n        {{ text }}\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{position:relative;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.PolymorpheusOutlet, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }, { 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: i4.TuiAppearance, selector: "[tuiAppearance]", inputs: ["tuiAppearance", "tuiAppearanceState", "tuiAppearanceFocus", "tuiAppearanceMode"] }, { kind: "component", type: i5.TuiIcon, selector: "tui-icon", inputs: ["icon", "background"] }, { kind: "directive", type: i6.TuiHintDirective, selector: "[tuiHint]:not(ng-container):not(ng-template)", inputs: ["tuiHintContext", "tuiHintAppearance", "tuiHint"], outputs: ["tuiHintVisible"] }, { kind: "pipe", type: i7.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 __decorate([
     tuiPure
@@ -91,7 +91,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         tuiAsControl(TuiInputCopyComponent),
                     ], 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]=\"!disabled ? 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 #iconContent>\n    <tui-icon\n        *polymorpheusOutlet=\"icon as src; context: {$implicit: size}\"\n        automation-id=\"tui-copy__icon\"\n        tuiAppearance=\"icon\"\n        class=\"t-icon\"\n        [class.t-icon_small]=\"size === 's'\"\n        [icon]=\"src.toString()\"\n        [tuiAppearanceState]=\"!value ? 'disabled' : null\"\n        [tuiHint]=\"hint\"\n        [tuiHintAppearance]=\"messageAppearance\"\n        [tuiHintDirection]=\"messageDirection\"\n        (click)=\"copy()\"\n    />\n</ng-template>\n\n<ng-template #hint>\n    <ng-container *polymorpheusOutlet=\"hintText$ | async as text\">\n        {{ text }}\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{position:relative;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]=\"!disabled ? 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 #iconContent>\n    <tui-icon\n        *polymorpheusOutlet=\"icon as src; context: {$implicit: size}\"\n        automation-id=\"tui-copy__icon\"\n        tuiAppearance=\"icon\"\n        class=\"t-icon\"\n        [class.t-icon_small]=\"size === 's'\"\n        [icon]=\"src.toString()\"\n        [tuiAppearanceState]=\"!value ? 'disabled' : null\"\n        [tuiHint]=\"hint\"\n        [tuiHintAppearance]=\"messageAppearance\"\n        [tuiHintDirection]=\"messageDirection\"\n        (click)=\"copy()\"\n    />\n</ng-template>\n\n<ng-template #hint>\n    <ng-container *polymorpheusOutlet=\"hintText$ | async as text\">\n        {{ text }}\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{position:relative;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-date/input-date.component.mjs

@@ -183,7 +183,7 @@ class TuiInputDateComponent extends AbstractTuiNullableControl {
             tuiAsLegacyControl(TuiInputDateComponent),
             tuiDateStreamWithTransformer(TUI_DATE_VALUE_TRANSFORMER),
             TUI_MOBILE_CALENDAR_PROVIDER,
-        ], viewQueries: [{ propertyName: "textfield", first: true, predicate: TuiPrimitiveTextfieldComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div\n    tuiDropdownOpenMonitor\n    class=\"t-hosted\"\n    [tuiDropdown]=\"dropdown\"\n    [tuiDropdownEnabled]=\"interactive && !nativePicker\"\n    [tuiDropdownOpen]=\"open\"\n    (tuiDropdownOpenChange)=\"onOpenChange($event)\"\n>\n    <tui-primitive-textfield\n        *tuiLet=\"filler$ | async as filler\"\n        automation-id=\"tui-input-date-range__textfield\"\n        tuiValueAccessor\n        class=\"t-textfield\"\n        [disabled]=\"computedDisabled\"\n        [focusable]=\"computedFocusable\"\n        [invalid]=\"computedInvalid\"\n        [maskito]=\"computedMask\"\n        [nativeId]=\"nativeId\"\n        [pseudoFocus]=\"pseudoFocus\"\n        [pseudoHover]=\"pseudoHover\"\n        [readOnly]=\"readOnly\"\n        [tuiTextfieldFiller]=\"getComputedFiller(filler || '')\"\n        [tuiTextfieldIcon]=\"calendarIcon && iconContent\"\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    </tui-primitive-textfield>\n\n    <ng-template #iconContent>\n        <tui-icon\n            *polymorpheusOutlet=\"calendarIcon as src; context: {$implicit: size}\"\n            automation-id=\"tui-input-date-range__icon\"\n            tuiAppearance=\"icon\"\n            [class.t-icon_small]=\"size === 's'\"\n            [class.t-icon]=\"!computedDisabled\"\n            [icon]=\"src.toString()\"\n            (click)=\"onIconClick()\"\n        />\n        <input\n            *ngIf=\"nativePicker\"\n            tuiDate\n            class=\"t-native-input\"\n        />\n    </ng-template>\n\n    <ng-template\n        #dropdown=\"polymorpheus\"\n        [polymorpheus]=\"type\"\n    >\n        <tui-calendar\n            automation-id=\"tui-input-date__calendar\"\n            [disabledItemHandler]=\"disabledItemHandler\"\n            [markerHandler]=\"markerHandler\"\n            [max]=\"computedMax\"\n            [min]=\"computedMin\"\n            [month]=\"computedActiveYearMonth\"\n            [value]=\"value\"\n            (dayClick)=\"onDayClick($event)\"\n            (monthChange)=\"onMonthChange($event)\"\n            (mousedown.prevent.zoneless)=\"(0)\"\n        />\n        <div\n            *ngIf=\"items.length === 1\"\n            class=\"t-button\"\n            (mousedown.prevent.zoneless)=\"(0)\"\n        >\n            <button\n                tuiLink\n                type=\"button\"\n                (click)=\"items[0] && onDayClick(items[0].day)\"\n            >\n                {{ items[0] }}\n            </button>\n        </div>\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}.t-icon{pointer-events:auto}.t-icon_small{border-width:.25rem}.t-button{display:flex;block-size:2.75rem;justify-content:center;box-shadow:inset 0 1px var(--tui-border-normal)}.t-button button{flex:1;text-align:center}.t-native-input{position:absolute;top:0;left:0;inline-size:100%;block-size:100%;opacity:0;pointer-events:auto;font-size:2rem}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.MaskitoDirective, selector: "[maskito]", inputs: ["maskito", "maskitoElement"] }, { kind: "directive", type: i3.PolymorpheusOutlet, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }, { kind: "directive", type: i3.PolymorpheusTemplate, selector: "ng-template[polymorpheus]", inputs: ["polymorpheus"], exportAs: ["polymorpheus"] }, { kind: "component", type: i4.TuiCalendar, selector: "tui-calendar", inputs: ["month", "disabledItemHandler", "min", "max", "minViewedMonth", "maxViewedMonth", "hoveredItem", "showAdjacent", "markerHandler", "value", "initialView"], outputs: ["dayClick", "monthChange", "hoveredItemChange"] }, { kind: "directive", type: i5.TuiLink, selector: "a[tuiLink], button[tuiLink]", inputs: ["pseudo"] }, { kind: "component", type: i6.TuiPrimitiveTextfieldComponent, selector: "tui-primitive-textfield", inputs: ["editable", "iconCleaner", "readOnly", "invalid", "disabled", "value"], outputs: ["valueChange"] }, { kind: "directive", type: i6.TuiPrimitiveTextfieldDirective, selector: "tui-primitive-textfield" }, { kind: "directive", type: i7.TuiValueAccessorDirective, selector: "[tuiValueAccessor]" }, { kind: "directive", type: i8.TuiLet, selector: "[tuiLet]", inputs: ["tuiLet"] }, { kind: "directive", type: i7.TuiTextfieldIconDirective, selector: "[tuiTextfieldIcon]", inputs: ["tuiTextfieldIcon"] }, { kind: "directive", type: i7.TuiTextfieldFillerDirective, selector: "[tuiTextfieldFiller]", inputs: ["tuiTextfieldFiller"] }, { kind: "directive", type: i7.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: i11.TuiDropdownDirective, selector: "[tuiDropdown]:not(ng-container):not(ng-template)", inputs: ["tuiDropdown"], exportAs: ["tuiDropdown"] }, { kind: "directive", type: i11.TuiDropdownOpen, selector: "[tuiDropdown][tuiDropdownOpen],[tuiDropdown][tuiDropdownOpenChange]", inputs: ["tuiDropdownEnabled", "tuiDropdownOpen"], outputs: ["tuiDropdownOpenChange"] }, { kind: "directive", type: i12.TuiNativeDateDirective, selector: "input[tuiDate]" }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], viewQueries: [{ propertyName: "textfield", first: true, predicate: TuiPrimitiveTextfieldComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div\n    tuiDropdownOpenMonitor\n    class=\"t-hosted\"\n    [tuiDropdown]=\"dropdown\"\n    [tuiDropdownEnabled]=\"interactive && !nativePicker\"\n    [tuiDropdownOpen]=\"open\"\n    (tuiDropdownOpenChange)=\"onOpenChange($event)\"\n>\n    <tui-primitive-textfield\n        *tuiLet=\"filler$ | async as filler\"\n        automation-id=\"tui-input-date-range__textfield\"\n        tuiValueAccessor\n        class=\"t-textfield\"\n        [disabled]=\"computedDisabled\"\n        [focusable]=\"computedFocusable\"\n        [invalid]=\"computedInvalid\"\n        [maskito]=\"computedMask\"\n        [nativeId]=\"nativeId\"\n        [pseudoFocus]=\"pseudoFocus\"\n        [pseudoHover]=\"pseudoHover\"\n        [readOnly]=\"readOnly\"\n        [tuiTextfieldFiller]=\"getComputedFiller(filler || '')\"\n        [tuiTextfieldIcon]=\"calendarIcon && iconContent\"\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    </tui-primitive-textfield>\n\n    <ng-template #iconContent>\n        <tui-icon\n            *polymorpheusOutlet=\"calendarIcon as src; context: {$implicit: size}\"\n            automation-id=\"tui-input-date-range__icon\"\n            tuiAppearance=\"icon\"\n            [class.t-icon_small]=\"size === 's'\"\n            [class.t-icon]=\"!computedDisabled\"\n            [icon]=\"src.toString()\"\n            (click)=\"onIconClick()\"\n        />\n        <input\n            *ngIf=\"nativePicker\"\n            tuiDate\n            class=\"t-native-input\"\n        />\n    </ng-template>\n\n    <ng-template\n        #dropdown=\"polymorpheus\"\n        [polymorpheus]=\"type\"\n    >\n        <tui-calendar\n            automation-id=\"tui-input-date__calendar\"\n            [disabledItemHandler]=\"disabledItemHandler\"\n            [markerHandler]=\"markerHandler\"\n            [max]=\"computedMax\"\n            [min]=\"computedMin\"\n            [month]=\"computedActiveYearMonth\"\n            [value]=\"value\"\n            (dayClick)=\"onDayClick($event)\"\n            (monthChange)=\"onMonthChange($event)\"\n            (mousedown.prevent.zoneless)=\"(0)\"\n        />\n        <div\n            *ngIf=\"items.length === 1\"\n            class=\"t-button\"\n            (mousedown.prevent.zoneless)=\"(0)\"\n        >\n            <button\n                tuiLink\n                type=\"button\"\n                (click)=\"items[0] && onDayClick(items[0].day)\"\n            >\n                {{ items[0] }}\n            </button>\n        </div>\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}.t-icon{pointer-events:auto}.t-icon_small{border-width:.25rem}.t-button{display:flex;block-size:2.75rem;justify-content:center;box-shadow:inset 0 1px var(--tui-border-normal)}.t-button button{flex:1;text-align:center}.t-native-input{position:absolute;top:0;left:0;inline-size:100%;block-size:100%;opacity:0;pointer-events:auto;font-size:2rem}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.MaskitoDirective, selector: "[maskito]", inputs: ["maskito", "maskitoElement"] }, { kind: "directive", type: i3.PolymorpheusOutlet, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }, { kind: "directive", type: i3.PolymorpheusTemplate, selector: "ng-template[polymorpheus]", inputs: ["polymorpheus"], exportAs: ["polymorpheus"] }, { kind: "component", type: i4.TuiCalendar, selector: "tui-calendar", inputs: ["month", "disabledItemHandler", "min", "max", "minViewedMonth", "maxViewedMonth", "hoveredItem", "showAdjacent", "markerHandler", "value", "initialView"], outputs: ["dayClick", "monthChange", "hoveredItemChange"] }, { kind: "directive", type: i5.TuiLink, selector: "a[tuiLink], button[tuiLink]", inputs: ["pseudo"] }, { kind: "component", type: i6.TuiPrimitiveTextfieldComponent, selector: "tui-primitive-textfield", inputs: ["editable", "iconCleaner", "readOnly", "invalid", "disabled", "value"], outputs: ["valueChange"] }, { kind: "directive", type: i6.TuiPrimitiveTextfieldDirective, selector: "tui-primitive-textfield" }, { kind: "directive", type: i7.TuiValueAccessorDirective, selector: "[tuiValueAccessor]" }, { kind: "directive", type: i8.TuiLet, selector: "[tuiLet]", inputs: ["tuiLet"] }, { kind: "directive", type: i7.TuiTextfieldIconDirective, selector: "[tuiTextfieldIcon]", inputs: ["tuiTextfieldIcon"] }, { kind: "directive", type: i7.TuiTextfieldFillerDirective, selector: "[tuiTextfieldFiller]", inputs: ["tuiTextfieldFiller"] }, { kind: "directive", type: i7.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: i11.TuiDropdownDirective, selector: "[tuiDropdown]:not(ng-container):not(ng-template)", inputs: ["tuiDropdown"], exportAs: ["tuiDropdown"] }, { kind: "directive", type: i11.TuiDropdownOpen, selector: "[tuiDropdown][tuiDropdownOpen],[tuiDropdown][tuiDropdownOpenChange]", inputs: ["tuiDropdownEnabled", "tuiDropdownOpen"], outputs: ["tuiDropdownOpenChange"] }, { kind: "directive", type: i12.TuiNativeDateDirective, selector: "input[tuiDate]" }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 __decorate([
     tuiPure
@@ -200,7 +200,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     ], host: {
                         '[attr.data-size]': 'size',
                         '(click)': 'onClick()',
-                    }, template: "<div\n    tuiDropdownOpenMonitor\n    class=\"t-hosted\"\n    [tuiDropdown]=\"dropdown\"\n    [tuiDropdownEnabled]=\"interactive && !nativePicker\"\n    [tuiDropdownOpen]=\"open\"\n    (tuiDropdownOpenChange)=\"onOpenChange($event)\"\n>\n    <tui-primitive-textfield\n        *tuiLet=\"filler$ | async as filler\"\n        automation-id=\"tui-input-date-range__textfield\"\n        tuiValueAccessor\n        class=\"t-textfield\"\n        [disabled]=\"computedDisabled\"\n        [focusable]=\"computedFocusable\"\n        [invalid]=\"computedInvalid\"\n        [maskito]=\"computedMask\"\n        [nativeId]=\"nativeId\"\n        [pseudoFocus]=\"pseudoFocus\"\n        [pseudoHover]=\"pseudoHover\"\n        [readOnly]=\"readOnly\"\n        [tuiTextfieldFiller]=\"getComputedFiller(filler || '')\"\n        [tuiTextfieldIcon]=\"calendarIcon && iconContent\"\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    </tui-primitive-textfield>\n\n    <ng-template #iconContent>\n        <tui-icon\n            *polymorpheusOutlet=\"calendarIcon as src; context: {$implicit: size}\"\n            automation-id=\"tui-input-date-range__icon\"\n            tuiAppearance=\"icon\"\n            [class.t-icon_small]=\"size === 's'\"\n            [class.t-icon]=\"!computedDisabled\"\n            [icon]=\"src.toString()\"\n            (click)=\"onIconClick()\"\n        />\n        <input\n            *ngIf=\"nativePicker\"\n            tuiDate\n            class=\"t-native-input\"\n        />\n    </ng-template>\n\n    <ng-template\n        #dropdown=\"polymorpheus\"\n        [polymorpheus]=\"type\"\n    >\n        <tui-calendar\n            automation-id=\"tui-input-date__calendar\"\n            [disabledItemHandler]=\"disabledItemHandler\"\n            [markerHandler]=\"markerHandler\"\n            [max]=\"computedMax\"\n            [min]=\"computedMin\"\n            [month]=\"computedActiveYearMonth\"\n            [value]=\"value\"\n            (dayClick)=\"onDayClick($event)\"\n            (monthChange)=\"onMonthChange($event)\"\n            (mousedown.prevent.zoneless)=\"(0)\"\n        />\n        <div\n            *ngIf=\"items.length === 1\"\n            class=\"t-button\"\n            (mousedown.prevent.zoneless)=\"(0)\"\n        >\n            <button\n                tuiLink\n                type=\"button\"\n                (click)=\"items[0] && onDayClick(items[0].day)\"\n            >\n                {{ items[0] }}\n            </button>\n        </div>\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}.t-icon{pointer-events:auto}.t-icon_small{border-width:.25rem}.t-button{display:flex;block-size:2.75rem;justify-content:center;box-shadow:inset 0 1px var(--tui-border-normal)}.t-button button{flex:1;text-align:center}.t-native-input{position:absolute;top:0;left:0;inline-size:100%;block-size:100%;opacity:0;pointer-events:auto;font-size:2rem}\n"] }]
+                    }, template: "<div\n    tuiDropdownOpenMonitor\n    class=\"t-hosted\"\n    [tuiDropdown]=\"dropdown\"\n    [tuiDropdownEnabled]=\"interactive && !nativePicker\"\n    [tuiDropdownOpen]=\"open\"\n    (tuiDropdownOpenChange)=\"onOpenChange($event)\"\n>\n    <tui-primitive-textfield\n        *tuiLet=\"filler$ | async as filler\"\n        automation-id=\"tui-input-date-range__textfield\"\n        tuiValueAccessor\n        class=\"t-textfield\"\n        [disabled]=\"computedDisabled\"\n        [focusable]=\"computedFocusable\"\n        [invalid]=\"computedInvalid\"\n        [maskito]=\"computedMask\"\n        [nativeId]=\"nativeId\"\n        [pseudoFocus]=\"pseudoFocus\"\n        [pseudoHover]=\"pseudoHover\"\n        [readOnly]=\"readOnly\"\n        [tuiTextfieldFiller]=\"getComputedFiller(filler || '')\"\n        [tuiTextfieldIcon]=\"calendarIcon && iconContent\"\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    </tui-primitive-textfield>\n\n    <ng-template #iconContent>\n        <tui-icon\n            *polymorpheusOutlet=\"calendarIcon as src; context: {$implicit: size}\"\n            automation-id=\"tui-input-date-range__icon\"\n            tuiAppearance=\"icon\"\n            [class.t-icon_small]=\"size === 's'\"\n            [class.t-icon]=\"!computedDisabled\"\n            [icon]=\"src.toString()\"\n            (click)=\"onIconClick()\"\n        />\n        <input\n            *ngIf=\"nativePicker\"\n            tuiDate\n            class=\"t-native-input\"\n        />\n    </ng-template>\n\n    <ng-template\n        #dropdown=\"polymorpheus\"\n        [polymorpheus]=\"type\"\n    >\n        <tui-calendar\n            automation-id=\"tui-input-date__calendar\"\n            [disabledItemHandler]=\"disabledItemHandler\"\n            [markerHandler]=\"markerHandler\"\n            [max]=\"computedMax\"\n            [min]=\"computedMin\"\n            [month]=\"computedActiveYearMonth\"\n            [value]=\"value\"\n            (dayClick)=\"onDayClick($event)\"\n            (monthChange)=\"onMonthChange($event)\"\n            (mousedown.prevent.zoneless)=\"(0)\"\n        />\n        <div\n            *ngIf=\"items.length === 1\"\n            class=\"t-button\"\n            (mousedown.prevent.zoneless)=\"(0)\"\n        >\n            <button\n                tuiLink\n                type=\"button\"\n                (click)=\"items[0] && onDayClick(items[0].day)\"\n            >\n                {{ items[0] }}\n            </button>\n        </div>\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}.t-icon{pointer-events:auto}.t-icon_small{border-width:.25rem}.t-button{display:flex;block-size:2.75rem;justify-content:center;box-shadow:inset 0 1px var(--tui-border-normal)}.t-button button{flex:1;text-align:center}.t-native-input{position:absolute;top:0;left:0;inline-size:100%;block-size:100%;opacity:0;pointer-events:auto;font-size:2rem}\n"] }]
         }], propDecorators: { textfield: [{
                 type: ViewChild,
                 args: [TuiPrimitiveTextfieldComponent]

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

@@ -159,7 +159,7 @@ class TuiInputDateMultiComponent extends AbstractTuiMultipleControl {
             tuiAsLegacyControl(TuiInputDateMultiComponent),
             tuiDateStreamWithTransformer(TUI_DATE_VALUE_TRANSFORMER),
             TUI_MOBILE_CALENDAR_PROVIDER,
-        ], viewQueries: [{ propertyName: "textfield", first: true, predicate: TuiPrimitiveTextfieldComponent, descendants: true }, { propertyName: "inputTag", first: true, predicate: TuiInputTagComponent, 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    (tuiDropdownOpenChange)=\"onOpenChange($event)\"\n>\n    <tui-input-tag\n        #inputTag\n        class=\"t-input\"\n        [disabled]=\"disabled\"\n        [disabledItemHandler]=\"disabledItemHandler | tuiMapper: disabledItemHandlerWrapper\"\n        [editable]=\"editable\"\n        [inputHidden]=\"inputHidden\"\n        [maskito]=\"maskitoOptions\"\n        [nativeId]=\"nativeId\"\n        [ngModel]=\"value | tuiMapper: valueMapper\"\n        [ngModelOptions]=\"{standalone: true}\"\n        [placeholder]=\"placeholder\"\n        [pseudoFocus]=\"pseudoFocus\"\n        [pseudoHover]=\"pseudoHover\"\n        [pseudoInvalid]=\"computedInvalid\"\n        [readOnly]=\"readOnly\"\n        [removable]=\"!nativeDropdownMode\"\n        [rows]=\"rows\"\n        [tagValidator]=\"tagValidator | tuiMapper: disabledItemHandlerWrapper\"\n        [tuiTextfieldFiller]=\"(filler$ | async) || ''\"\n        [tuiTextfieldIcon]=\"calendarIcon && iconContent\"\n        (keydown.enter)=\"onEnter(inputTag.search || '')\"\n        (ngModelChange)=\"onValueChange($event)\"\n    >\n        <ng-content />\n        <ng-content\n            ngProjectAs=\"input\"\n            select=\"input\"\n        />\n    </tui-input-tag>\n\n    <ng-template #iconContent>\n        <tui-icon\n            *polymorpheusOutlet=\"calendarIcon as src; context: {$implicit: size}\"\n            tuiAppearance=\"icon\"\n            [class.t-icon_small]=\"size === 's'\"\n            [class.t-icon]=\"!computedDisabled\"\n            [icon]=\"src.toString()\"\n            (click)=\"onIconClick()\"\n        />\n    </ng-template>\n\n    <ng-template #dropdown>\n        <tui-calendar\n            [disabledItemHandler]=\"disabledItemHandler\"\n            [markerHandler]=\"markerHandler\"\n            [max]=\"computedMax\"\n            [min]=\"computedMin\"\n            [month]=\"computedActiveYearMonth\"\n            [value]=\"value\"\n            (dayClick)=\"onDayClick($event)\"\n            (monthChange)=\"onMonthChange($event)\"\n            (mousedown.zoneless.prevent)=\"(0)\"\n        />\n        <div\n            class=\"t-button\"\n            (mousedown.zoneless.prevent)=\"(0)\"\n        >\n            <button\n                tuiLink\n                type=\"button\"\n                (click)=\"done()\"\n            >\n                {{ doneWord$ | async }}\n            </button>\n        </div>\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}.t-icon{pointer-events:auto}.t-icon_small{border-width:.25rem}.t-button{display:flex;block-size:2.75rem;justify-content:center;box-shadow:inset 0 1px var(--tui-border-normal)}.t-button button{flex:1;text-align:center}.t-native-input{position:absolute;top:0;left:0;inline-size:100%;block-size:100%;opacity:0;pointer-events:auto;font-size:2rem}\n"], dependencies: [{ kind: "directive", type: i1.MaskitoDirective, selector: "[maskito]", inputs: ["maskito", "maskitoElement"] }, { kind: "directive", type: i2.PolymorpheusOutlet, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }, { kind: "component", type: i3.TuiCalendar, selector: "tui-calendar", inputs: ["month", "disabledItemHandler", "min", "max", "minViewedMonth", "maxViewedMonth", "hoveredItem", "showAdjacent", "markerHandler", "value", "initialView"], outputs: ["dayClick", "monthChange", "hoveredItemChange"] }, { kind: "directive", type: i4.TuiLink, selector: "a[tuiLink], button[tuiLink]", inputs: ["pseudo"] }, { kind: "component", type: i5.TuiInputTagComponent, selector: "tui-input-tag", inputs: ["separator", "search", "editable", "tagValidator", "rows", "inputHidden", "uniqueTags", "autoColor", "maxLength", "placeholder", "removable", "disabledItemHandler", "pseudoFocused", "pseudoOpen"], outputs: ["searchChange"] }, { kind: "directive", type: i6.TuiDropdownDirective, selector: "[tuiDropdown]:not(ng-container):not(ng-template)", inputs: ["tuiDropdown"], exportAs: ["tuiDropdown"] }, { kind: "directive", type: i6.TuiDropdownOpen, selector: "[tuiDropdown][tuiDropdownOpen],[tuiDropdown][tuiDropdownOpenChange]", inputs: ["tuiDropdownEnabled", "tuiDropdownOpen"], outputs: ["tuiDropdownOpenChange"] }, { kind: "directive", type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i8.TuiTextfieldIconDirective, selector: "[tuiTextfieldIcon]", inputs: ["tuiTextfieldIcon"] }, { kind: "directive", type: i8.TuiTextfieldFillerDirective, selector: "[tuiTextfieldFiller]", inputs: ["tuiTextfieldFiller"] }, { kind: "directive", type: i8.TuiLegacyDropdownOpenMonitorDirective, selector: "[tuiDropdownOpenMonitor]" }, { kind: "component", type: i9.TuiIcon, selector: "tui-icon", inputs: ["icon", "background"] }, { kind: "directive", type: i10.TuiAppearance, selector: "[tuiAppearance]", inputs: ["tuiAppearance", "tuiAppearanceState", "tuiAppearanceFocus", "tuiAppearanceMode"] }, { kind: "pipe", type: i11.AsyncPipe, name: "async" }, { kind: "pipe", type: i12.TuiMapperPipe, name: "tuiMapper" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], viewQueries: [{ propertyName: "textfield", first: true, predicate: TuiPrimitiveTextfieldComponent, descendants: true }, { propertyName: "inputTag", first: true, predicate: TuiInputTagComponent, 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    (tuiDropdownOpenChange)=\"onOpenChange($event)\"\n>\n    <tui-input-tag\n        #inputTag\n        class=\"t-input\"\n        [disabled]=\"disabled\"\n        [disabledItemHandler]=\"disabledItemHandler | tuiMapper: disabledItemHandlerWrapper\"\n        [editable]=\"editable\"\n        [inputHidden]=\"inputHidden\"\n        [maskito]=\"maskitoOptions\"\n        [nativeId]=\"nativeId\"\n        [ngModel]=\"value | tuiMapper: valueMapper\"\n        [ngModelOptions]=\"{standalone: true}\"\n        [placeholder]=\"placeholder\"\n        [pseudoFocus]=\"pseudoFocus\"\n        [pseudoHover]=\"pseudoHover\"\n        [pseudoInvalid]=\"computedInvalid\"\n        [readOnly]=\"readOnly\"\n        [removable]=\"!nativeDropdownMode\"\n        [rows]=\"rows\"\n        [tagValidator]=\"tagValidator | tuiMapper: disabledItemHandlerWrapper\"\n        [tuiTextfieldFiller]=\"(filler$ | async) || ''\"\n        [tuiTextfieldIcon]=\"calendarIcon && iconContent\"\n        (keydown.enter)=\"onEnter(inputTag.search || '')\"\n        (ngModelChange)=\"onValueChange($event)\"\n    >\n        <ng-content />\n        <ng-content\n            ngProjectAs=\"input\"\n            select=\"input\"\n        />\n    </tui-input-tag>\n\n    <ng-template #iconContent>\n        <tui-icon\n            *polymorpheusOutlet=\"calendarIcon as src; context: {$implicit: size}\"\n            tuiAppearance=\"icon\"\n            [class.t-icon_small]=\"size === 's'\"\n            [class.t-icon]=\"!computedDisabled\"\n            [icon]=\"src.toString()\"\n            (click)=\"onIconClick()\"\n        />\n    </ng-template>\n\n    <ng-template #dropdown>\n        <tui-calendar\n            [disabledItemHandler]=\"disabledItemHandler\"\n            [markerHandler]=\"markerHandler\"\n            [max]=\"computedMax\"\n            [min]=\"computedMin\"\n            [month]=\"computedActiveYearMonth\"\n            [value]=\"value\"\n            (dayClick)=\"onDayClick($event)\"\n            (monthChange)=\"onMonthChange($event)\"\n            (mousedown.zoneless.prevent)=\"(0)\"\n        />\n        <div\n            class=\"t-button\"\n            (mousedown.zoneless.prevent)=\"(0)\"\n        >\n            <button\n                tuiLink\n                type=\"button\"\n                (click)=\"done()\"\n            >\n                {{ doneWord$ | async }}\n            </button>\n        </div>\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}.t-icon{pointer-events:auto}.t-icon_small{border-width:.25rem}.t-button{display:flex;block-size:2.75rem;justify-content:center;box-shadow:inset 0 1px var(--tui-border-normal)}.t-button button{flex:1;text-align:center}.t-native-input{position:absolute;top:0;left:0;inline-size:100%;block-size:100%;opacity:0;pointer-events:auto;font-size:2rem}\n"], dependencies: [{ kind: "directive", type: i1.MaskitoDirective, selector: "[maskito]", inputs: ["maskito", "maskitoElement"] }, { kind: "directive", type: i2.PolymorpheusOutlet, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }, { kind: "component", type: i3.TuiCalendar, selector: "tui-calendar", inputs: ["month", "disabledItemHandler", "min", "max", "minViewedMonth", "maxViewedMonth", "hoveredItem", "showAdjacent", "markerHandler", "value", "initialView"], outputs: ["dayClick", "monthChange", "hoveredItemChange"] }, { kind: "directive", type: i4.TuiLink, selector: "a[tuiLink], button[tuiLink]", inputs: ["pseudo"] }, { kind: "component", type: i5.TuiInputTagComponent, selector: "tui-input-tag", inputs: ["separator", "search", "editable", "tagValidator", "rows", "inputHidden", "uniqueTags", "autoColor", "maxLength", "placeholder", "removable", "disabledItemHandler", "pseudoFocused", "pseudoOpen"], outputs: ["searchChange"] }, { kind: "directive", type: i6.TuiDropdownDirective, selector: "[tuiDropdown]:not(ng-container):not(ng-template)", inputs: ["tuiDropdown"], exportAs: ["tuiDropdown"] }, { kind: "directive", type: i6.TuiDropdownOpen, selector: "[tuiDropdown][tuiDropdownOpen],[tuiDropdown][tuiDropdownOpenChange]", inputs: ["tuiDropdownEnabled", "tuiDropdownOpen"], outputs: ["tuiDropdownOpenChange"] }, { kind: "directive", type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i8.TuiTextfieldIconDirective, selector: "[tuiTextfieldIcon]", inputs: ["tuiTextfieldIcon"] }, { kind: "directive", type: i8.TuiTextfieldFillerDirective, selector: "[tuiTextfieldFiller]", inputs: ["tuiTextfieldFiller"] }, { kind: "directive", type: i8.TuiLegacyDropdownOpenMonitorDirective, selector: "[tuiDropdownOpenMonitor]" }, { kind: "component", type: i9.TuiIcon, selector: "tui-icon", inputs: ["icon", "background"] }, { kind: "directive", type: i10.TuiAppearance, selector: "[tuiAppearance]", inputs: ["tuiAppearance", "tuiAppearanceState", "tuiAppearanceFocus", "tuiAppearanceMode"] }, { kind: "pipe", type: i11.AsyncPipe, name: "async" }, { kind: "pipe", type: i12.TuiMapperPipe, name: "tuiMapper" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 export { TuiInputDateMultiComponent };
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiInputDateMultiComponent, decorators: [{
@@ -174,7 +174,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         '[class._editable]': 'editable',
                         '[attr.data-size]': 'size',
                         '(click)': 'onClick()',
-                    }, template: "<div\n    tuiDropdownOpenMonitor\n    class=\"t-hosted\"\n    [tuiDropdown]=\"dropdown\"\n    [tuiDropdownEnabled]=\"interactive\"\n    [tuiDropdownOpen]=\"open && interactive\"\n    (tuiDropdownOpenChange)=\"onOpenChange($event)\"\n>\n    <tui-input-tag\n        #inputTag\n        class=\"t-input\"\n        [disabled]=\"disabled\"\n        [disabledItemHandler]=\"disabledItemHandler | tuiMapper: disabledItemHandlerWrapper\"\n        [editable]=\"editable\"\n        [inputHidden]=\"inputHidden\"\n        [maskito]=\"maskitoOptions\"\n        [nativeId]=\"nativeId\"\n        [ngModel]=\"value | tuiMapper: valueMapper\"\n        [ngModelOptions]=\"{standalone: true}\"\n        [placeholder]=\"placeholder\"\n        [pseudoFocus]=\"pseudoFocus\"\n        [pseudoHover]=\"pseudoHover\"\n        [pseudoInvalid]=\"computedInvalid\"\n        [readOnly]=\"readOnly\"\n        [removable]=\"!nativeDropdownMode\"\n        [rows]=\"rows\"\n        [tagValidator]=\"tagValidator | tuiMapper: disabledItemHandlerWrapper\"\n        [tuiTextfieldFiller]=\"(filler$ | async) || ''\"\n        [tuiTextfieldIcon]=\"calendarIcon && iconContent\"\n        (keydown.enter)=\"onEnter(inputTag.search || '')\"\n        (ngModelChange)=\"onValueChange($event)\"\n    >\n        <ng-content />\n        <ng-content\n            ngProjectAs=\"input\"\n            select=\"input\"\n        />\n    </tui-input-tag>\n\n    <ng-template #iconContent>\n        <tui-icon\n            *polymorpheusOutlet=\"calendarIcon as src; context: {$implicit: size}\"\n            tuiAppearance=\"icon\"\n            [class.t-icon_small]=\"size === 's'\"\n            [class.t-icon]=\"!computedDisabled\"\n            [icon]=\"src.toString()\"\n            (click)=\"onIconClick()\"\n        />\n    </ng-template>\n\n    <ng-template #dropdown>\n        <tui-calendar\n            [disabledItemHandler]=\"disabledItemHandler\"\n            [markerHandler]=\"markerHandler\"\n            [max]=\"computedMax\"\n            [min]=\"computedMin\"\n            [month]=\"computedActiveYearMonth\"\n            [value]=\"value\"\n            (dayClick)=\"onDayClick($event)\"\n            (monthChange)=\"onMonthChange($event)\"\n            (mousedown.zoneless.prevent)=\"(0)\"\n        />\n        <div\n            class=\"t-button\"\n            (mousedown.zoneless.prevent)=\"(0)\"\n        >\n            <button\n                tuiLink\n                type=\"button\"\n                (click)=\"done()\"\n            >\n                {{ doneWord$ | async }}\n            </button>\n        </div>\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}.t-icon{pointer-events:auto}.t-icon_small{border-width:.25rem}.t-button{display:flex;block-size:2.75rem;justify-content:center;box-shadow:inset 0 1px var(--tui-border-normal)}.t-button button{flex:1;text-align:center}.t-native-input{position:absolute;top:0;left:0;inline-size:100%;block-size:100%;opacity:0;pointer-events:auto;font-size:2rem}\n"] }]
+                    }, template: "<div\n    tuiDropdownOpenMonitor\n    class=\"t-hosted\"\n    [tuiDropdown]=\"dropdown\"\n    [tuiDropdownEnabled]=\"interactive\"\n    [tuiDropdownOpen]=\"open && interactive\"\n    (tuiDropdownOpenChange)=\"onOpenChange($event)\"\n>\n    <tui-input-tag\n        #inputTag\n        class=\"t-input\"\n        [disabled]=\"disabled\"\n        [disabledItemHandler]=\"disabledItemHandler | tuiMapper: disabledItemHandlerWrapper\"\n        [editable]=\"editable\"\n        [inputHidden]=\"inputHidden\"\n        [maskito]=\"maskitoOptions\"\n        [nativeId]=\"nativeId\"\n        [ngModel]=\"value | tuiMapper: valueMapper\"\n        [ngModelOptions]=\"{standalone: true}\"\n        [placeholder]=\"placeholder\"\n        [pseudoFocus]=\"pseudoFocus\"\n        [pseudoHover]=\"pseudoHover\"\n        [pseudoInvalid]=\"computedInvalid\"\n        [readOnly]=\"readOnly\"\n        [removable]=\"!nativeDropdownMode\"\n        [rows]=\"rows\"\n        [tagValidator]=\"tagValidator | tuiMapper: disabledItemHandlerWrapper\"\n        [tuiTextfieldFiller]=\"(filler$ | async) || ''\"\n        [tuiTextfieldIcon]=\"calendarIcon && iconContent\"\n        (keydown.enter)=\"onEnter(inputTag.search || '')\"\n        (ngModelChange)=\"onValueChange($event)\"\n    >\n        <ng-content />\n        <ng-content\n            ngProjectAs=\"input\"\n            select=\"input\"\n        />\n    </tui-input-tag>\n\n    <ng-template #iconContent>\n        <tui-icon\n            *polymorpheusOutlet=\"calendarIcon as src; context: {$implicit: size}\"\n            tuiAppearance=\"icon\"\n            [class.t-icon_small]=\"size === 's'\"\n            [class.t-icon]=\"!computedDisabled\"\n            [icon]=\"src.toString()\"\n            (click)=\"onIconClick()\"\n        />\n    </ng-template>\n\n    <ng-template #dropdown>\n        <tui-calendar\n            [disabledItemHandler]=\"disabledItemHandler\"\n            [markerHandler]=\"markerHandler\"\n            [max]=\"computedMax\"\n            [min]=\"computedMin\"\n            [month]=\"computedActiveYearMonth\"\n            [value]=\"value\"\n            (dayClick)=\"onDayClick($event)\"\n            (monthChange)=\"onMonthChange($event)\"\n            (mousedown.zoneless.prevent)=\"(0)\"\n        />\n        <div\n            class=\"t-button\"\n            (mousedown.zoneless.prevent)=\"(0)\"\n        >\n            <button\n                tuiLink\n                type=\"button\"\n                (click)=\"done()\"\n            >\n                {{ doneWord$ | async }}\n            </button>\n        </div>\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}.t-icon{pointer-events:auto}.t-icon_small{border-width:.25rem}.t-button{display:flex;block-size:2.75rem;justify-content:center;box-shadow:inset 0 1px var(--tui-border-normal)}.t-button button{flex:1;text-align:center}.t-native-input{position:absolute;top:0;left:0;inline-size:100%;block-size:100%;opacity:0;pointer-events:auto;font-size:2rem}\n"] }]
         }], propDecorators: { textfield: [{
                 type: ViewChild,
                 args: [TuiPrimitiveTextfieldComponent]

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

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

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

@@ -279,7 +279,7 @@ class TuiInputDateTimeComponent extends AbstractTuiControl {
             tuiAsFocusableItemAccessor(TuiInputDateTimeComponent),
             tuiAsControl(TuiInputDateTimeComponent),
             tuiDateStreamWithTransformer(TUI_DATE_TIME_VALUE_TRANSFORMER),
-        ], 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 && !showNativePicker\"\n    [tuiDropdownOpen]=\"open && interactive\"\n    (tuiDropdownOpenChange)=\"onOpenChange($event)\"\n>\n    <tui-primitive-textfield\n        automation-id=\"tui-input-date-time__textfield\"\n        tuiValueAccessor\n        class=\"t-textfield\"\n        [disabled]=\"computedDisabled\"\n        [invalid]=\"computedInvalid\"\n        [maskito]=\"maskOptions\"\n        [nativeId]=\"nativeId\"\n        [pseudoFocus]=\"pseudoFocus\"\n        [pseudoHover]=\"pseudoHover\"\n        [readOnly]=\"readOnly\"\n        [tuiTextfieldFiller]=\"(filler$ | async) || ''\"\n        [tuiTextfieldIcon]=\"calendarIcon && iconContent\"\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    </tui-primitive-textfield>\n\n    <ng-template #iconContent>\n        <tui-icon\n            *polymorpheusOutlet=\"calendarIcon as src; context: {$implicit: size}\"\n            tuiAppearance=\"icon\"\n            [class.t-icon_small]=\"size === 's'\"\n            [class.t-icon]=\"!computedDisabled\"\n            [icon]=\"src.toString()\"\n        />\n        <input\n            *ngIf=\"showNativePicker\"\n            tuiDateTime\n            class=\"t-native-input\"\n        />\n    </ng-template>\n\n    <ng-template\n        #dropdown=\"polymorpheus\"\n        [polymorpheus]=\"type\"\n    >\n        <tui-calendar\n            automation-id=\"tui-input-date-time__calendar\"\n            [disabledItemHandler]=\"disabledItemHandler\"\n            [max]=\"calendarMaxDay\"\n            [min]=\"calendarMinDay\"\n            [month]=\"computedActiveYearMonth\"\n            [value]=\"calendarValue\"\n            (dayClick)=\"onDayClick($event)\"\n            (monthChange)=\"onMonthChange($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}.t-icon{pointer-events:auto}.t-icon_small{border-width:.25rem}.t-button{display:flex;block-size:2.75rem;justify-content:center;box-shadow:inset 0 1px var(--tui-border-normal)}.t-native-input{position:absolute;top:0;left:0;inline-size:100%;block-size:100%;opacity:0;pointer-events:auto;font-size:2rem}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.MaskitoDirective, selector: "[maskito]", inputs: ["maskito", "maskitoElement"] }, { kind: "directive", type: i3.PolymorpheusOutlet, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }, { kind: "directive", type: i3.PolymorpheusTemplate, selector: "ng-template[polymorpheus]", inputs: ["polymorpheus"], exportAs: ["polymorpheus"] }, { kind: "component", type: i4.TuiCalendar, selector: "tui-calendar", inputs: ["month", "disabledItemHandler", "min", "max", "minViewedMonth", "maxViewedMonth", "hoveredItem", "showAdjacent", "markerHandler", "value", "initialView"], outputs: ["dayClick", "monthChange", "hoveredItemChange"] }, { kind: "component", type: i5.TuiPrimitiveTextfieldComponent, selector: "tui-primitive-textfield", inputs: ["editable", "iconCleaner", "readOnly", "invalid", "disabled", "value"], outputs: ["valueChange"] }, { kind: "directive", type: i5.TuiPrimitiveTextfieldDirective, selector: "tui-primitive-textfield" }, { kind: "directive", type: i6.TuiValueAccessorDirective, selector: "[tuiValueAccessor]" }, { kind: "directive", type: i6.TuiTextfieldIconDirective, selector: "[tuiTextfieldIcon]", inputs: ["tuiTextfieldIcon"] }, { kind: "directive", type: i6.TuiTextfieldFillerDirective, selector: "[tuiTextfieldFiller]", inputs: ["tuiTextfieldFiller"] }, { kind: "directive", type: i6.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: i9.TuiDropdownDirective, selector: "[tuiDropdown]:not(ng-container):not(ng-template)", inputs: ["tuiDropdown"], exportAs: ["tuiDropdown"] }, { kind: "directive", type: i9.TuiDropdownOpen, selector: "[tuiDropdown][tuiDropdownOpen],[tuiDropdown][tuiDropdownOpenChange]", inputs: ["tuiDropdownEnabled", "tuiDropdownOpen"], outputs: ["tuiDropdownOpenChange"] }, { kind: "directive", type: i10.TuiNativeDateTimeDirective, selector: "input[tuiDateTime]" }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], viewQueries: [{ propertyName: "textfield", first: true, predicate: TuiPrimitiveTextfieldComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div\n    tuiDropdownOpenMonitor\n    class=\"t-hosted\"\n    [tuiDropdown]=\"dropdown\"\n    [tuiDropdownEnabled]=\"interactive && !showNativePicker\"\n    [tuiDropdownOpen]=\"open && interactive\"\n    (tuiDropdownOpenChange)=\"onOpenChange($event)\"\n>\n    <tui-primitive-textfield\n        automation-id=\"tui-input-date-time__textfield\"\n        tuiValueAccessor\n        class=\"t-textfield\"\n        [disabled]=\"computedDisabled\"\n        [invalid]=\"computedInvalid\"\n        [maskito]=\"maskOptions\"\n        [nativeId]=\"nativeId\"\n        [pseudoFocus]=\"pseudoFocus\"\n        [pseudoHover]=\"pseudoHover\"\n        [readOnly]=\"readOnly\"\n        [tuiTextfieldFiller]=\"(filler$ | async) || ''\"\n        [tuiTextfieldIcon]=\"calendarIcon && iconContent\"\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    </tui-primitive-textfield>\n\n    <ng-template #iconContent>\n        <tui-icon\n            *polymorpheusOutlet=\"calendarIcon as src; context: {$implicit: size}\"\n            tuiAppearance=\"icon\"\n            [class.t-icon_small]=\"size === 's'\"\n            [class.t-icon]=\"!computedDisabled\"\n            [icon]=\"src.toString()\"\n        />\n        <input\n            *ngIf=\"showNativePicker\"\n            tuiDateTime\n            class=\"t-native-input\"\n        />\n    </ng-template>\n\n    <ng-template\n        #dropdown=\"polymorpheus\"\n        [polymorpheus]=\"type\"\n    >\n        <tui-calendar\n            automation-id=\"tui-input-date-time__calendar\"\n            [disabledItemHandler]=\"disabledItemHandler\"\n            [max]=\"calendarMaxDay\"\n            [min]=\"calendarMinDay\"\n            [month]=\"computedActiveYearMonth\"\n            [value]=\"calendarValue\"\n            (dayClick)=\"onDayClick($event)\"\n            (monthChange)=\"onMonthChange($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}.t-icon{pointer-events:auto}.t-icon_small{border-width:.25rem}.t-button{display:flex;block-size:2.75rem;justify-content:center;box-shadow:inset 0 1px var(--tui-border-normal)}.t-native-input{position:absolute;top:0;left:0;inline-size:100%;block-size:100%;opacity:0;pointer-events:auto;font-size:2rem}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.MaskitoDirective, selector: "[maskito]", inputs: ["maskito", "maskitoElement"] }, { kind: "directive", type: i3.PolymorpheusOutlet, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }, { kind: "directive", type: i3.PolymorpheusTemplate, selector: "ng-template[polymorpheus]", inputs: ["polymorpheus"], exportAs: ["polymorpheus"] }, { kind: "component", type: i4.TuiCalendar, selector: "tui-calendar", inputs: ["month", "disabledItemHandler", "min", "max", "minViewedMonth", "maxViewedMonth", "hoveredItem", "showAdjacent", "markerHandler", "value", "initialView"], outputs: ["dayClick", "monthChange", "hoveredItemChange"] }, { kind: "component", type: i5.TuiPrimitiveTextfieldComponent, selector: "tui-primitive-textfield", inputs: ["editable", "iconCleaner", "readOnly", "invalid", "disabled", "value"], outputs: ["valueChange"] }, { kind: "directive", type: i5.TuiPrimitiveTextfieldDirective, selector: "tui-primitive-textfield" }, { kind: "directive", type: i6.TuiValueAccessorDirective, selector: "[tuiValueAccessor]" }, { kind: "directive", type: i6.TuiTextfieldIconDirective, selector: "[tuiTextfieldIcon]", inputs: ["tuiTextfieldIcon"] }, { kind: "directive", type: i6.TuiTextfieldFillerDirective, selector: "[tuiTextfieldFiller]", inputs: ["tuiTextfieldFiller"] }, { kind: "directive", type: i6.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: i9.TuiDropdownDirective, selector: "[tuiDropdown]:not(ng-container):not(ng-template)", inputs: ["tuiDropdown"], exportAs: ["tuiDropdown"] }, { kind: "directive", type: i9.TuiDropdownOpen, selector: "[tuiDropdown][tuiDropdownOpen],[tuiDropdown][tuiDropdownOpenChange]", inputs: ["tuiDropdownEnabled", "tuiDropdownOpen"], outputs: ["tuiDropdownOpenChange"] }, { kind: "directive", type: i10.TuiNativeDateTimeDirective, selector: "input[tuiDateTime]" }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 __decorate([
     tuiPure
@@ -297,7 +297,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     ], host: {
                         '[attr.data-size]': 'size',
                         '(click)': 'onClick()',
-                    }, template: "<div\n    tuiDropdownOpenMonitor\n    class=\"t-hosted\"\n    [tuiDropdown]=\"dropdown\"\n    [tuiDropdownEnabled]=\"interactive && !showNativePicker\"\n    [tuiDropdownOpen]=\"open && interactive\"\n    (tuiDropdownOpenChange)=\"onOpenChange($event)\"\n>\n    <tui-primitive-textfield\n        automation-id=\"tui-input-date-time__textfield\"\n        tuiValueAccessor\n        class=\"t-textfield\"\n        [disabled]=\"computedDisabled\"\n        [invalid]=\"computedInvalid\"\n        [maskito]=\"maskOptions\"\n        [nativeId]=\"nativeId\"\n        [pseudoFocus]=\"pseudoFocus\"\n        [pseudoHover]=\"pseudoHover\"\n        [readOnly]=\"readOnly\"\n        [tuiTextfieldFiller]=\"(filler$ | async) || ''\"\n        [tuiTextfieldIcon]=\"calendarIcon && iconContent\"\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    </tui-primitive-textfield>\n\n    <ng-template #iconContent>\n        <tui-icon\n            *polymorpheusOutlet=\"calendarIcon as src; context: {$implicit: size}\"\n            tuiAppearance=\"icon\"\n            [class.t-icon_small]=\"size === 's'\"\n            [class.t-icon]=\"!computedDisabled\"\n            [icon]=\"src.toString()\"\n        />\n        <input\n            *ngIf=\"showNativePicker\"\n            tuiDateTime\n            class=\"t-native-input\"\n        />\n    </ng-template>\n\n    <ng-template\n        #dropdown=\"polymorpheus\"\n        [polymorpheus]=\"type\"\n    >\n        <tui-calendar\n            automation-id=\"tui-input-date-time__calendar\"\n            [disabledItemHandler]=\"disabledItemHandler\"\n            [max]=\"calendarMaxDay\"\n            [min]=\"calendarMinDay\"\n            [month]=\"computedActiveYearMonth\"\n            [value]=\"calendarValue\"\n            (dayClick)=\"onDayClick($event)\"\n            (monthChange)=\"onMonthChange($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}.t-icon{pointer-events:auto}.t-icon_small{border-width:.25rem}.t-button{display:flex;block-size:2.75rem;justify-content:center;box-shadow:inset 0 1px var(--tui-border-normal)}.t-native-input{position:absolute;top:0;left:0;inline-size:100%;block-size:100%;opacity:0;pointer-events:auto;font-size:2rem}\n"] }]
+                    }, template: "<div\n    tuiDropdownOpenMonitor\n    class=\"t-hosted\"\n    [tuiDropdown]=\"dropdown\"\n    [tuiDropdownEnabled]=\"interactive && !showNativePicker\"\n    [tuiDropdownOpen]=\"open && interactive\"\n    (tuiDropdownOpenChange)=\"onOpenChange($event)\"\n>\n    <tui-primitive-textfield\n        automation-id=\"tui-input-date-time__textfield\"\n        tuiValueAccessor\n        class=\"t-textfield\"\n        [disabled]=\"computedDisabled\"\n        [invalid]=\"computedInvalid\"\n        [maskito]=\"maskOptions\"\n        [nativeId]=\"nativeId\"\n        [pseudoFocus]=\"pseudoFocus\"\n        [pseudoHover]=\"pseudoHover\"\n        [readOnly]=\"readOnly\"\n        [tuiTextfieldFiller]=\"(filler$ | async) || ''\"\n        [tuiTextfieldIcon]=\"calendarIcon && iconContent\"\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    </tui-primitive-textfield>\n\n    <ng-template #iconContent>\n        <tui-icon\n            *polymorpheusOutlet=\"calendarIcon as src; context: {$implicit: size}\"\n            tuiAppearance=\"icon\"\n            [class.t-icon_small]=\"size === 's'\"\n            [class.t-icon]=\"!computedDisabled\"\n            [icon]=\"src.toString()\"\n        />\n        <input\n            *ngIf=\"showNativePicker\"\n            tuiDateTime\n            class=\"t-native-input\"\n        />\n    </ng-template>\n\n    <ng-template\n        #dropdown=\"polymorpheus\"\n        [polymorpheus]=\"type\"\n    >\n        <tui-calendar\n            automation-id=\"tui-input-date-time__calendar\"\n            [disabledItemHandler]=\"disabledItemHandler\"\n            [max]=\"calendarMaxDay\"\n            [min]=\"calendarMinDay\"\n            [month]=\"computedActiveYearMonth\"\n            [value]=\"calendarValue\"\n            (dayClick)=\"onDayClick($event)\"\n            (monthChange)=\"onMonthChange($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}.t-icon{pointer-events:auto}.t-icon_small{border-width:.25rem}.t-button{display:flex;block-size:2.75rem;justify-content:center;box-shadow:inset 0 1px var(--tui-border-normal)}.t-native-input{position:absolute;top:0;left:0;inline-size:100%;block-size:100%;opacity:0;pointer-events:auto;font-size:2rem}\n"] }]
         }], propDecorators: { textfield: [{
                 type: ViewChild,
                 args: [TuiPrimitiveTextfieldComponent]

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

@@ -107,7 +107,7 @@ class TuiInputMonthComponent extends AbstractTuiNullableControl {
             tuiAsControl(TuiInputMonthComponent),
             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 && !nativePicker\"\n    [tuiDropdownOpen]=\"open && interactive\"\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]=\"(value | tuiMapper: formatter | async) || ''\"\n        (focusedChange)=\"onFocused($event)\"\n        (valueChange)=\"onValueChange($event)\"\n    >\n        <ng-content />\n        <ng-content\n            ngProjectAs=\"input\"\n            select=\"input\"\n        />\n        <input\n            *ngIf=\"nativePicker\"\n            type=\"month\"\n            class=\"t-mobile\"\n            [max]=\"nativePickerMax\"\n            [min]=\"nativePickerMin\"\n            [ngModel]=\"nativeValue\"\n            [ngModelOptions]=\"{standalone: true}\"\n            (click.stop.zoneless)=\"(0)\"\n            (mousedown.stop.zoneless)=\"(0)\"\n            (ngModelChange)=\"onNativeChange($event)\"\n        />\n    </tui-primitive-textfield>\n\n    <ng-template #dropdown>\n        <tui-calendar-month\n            [disabledItemHandler]=\"disabledItemHandler\"\n            [max]=\"computedMax\"\n            [min]=\"computedMin\"\n            [value]=\"value\"\n            [year]=\"computedDefaultActiveYear\"\n            (monthClick)=\"onMonthClick($event)\"\n            (mousedown.prevent.zoneless)=\"(0)\"\n            (yearChange)=\"activeYear = $event\"\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}.t-mobile{position:absolute;top:0;left:0;inline-size:100%;block-size:100%;opacity:0;border:0}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.TuiCalendarMonth, selector: "tui-calendar-month", inputs: ["year", "disabledItemHandler", "minLength", "maxLength", "min", "max", "value"], outputs: ["monthClick", "hoveredItemChange", "yearChange"] }, { 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.TuiTextfieldIconDirective, selector: "[tuiTextfieldIcon]", inputs: ["tuiTextfieldIcon"] }, { kind: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4.TuiLegacyDropdownOpenMonitorDirective, selector: "[tuiDropdownOpenMonitor]" }, { kind: "directive", type: i6.TuiDropdownDirective, selector: "[tuiDropdown]:not(ng-container):not(ng-template)", inputs: ["tuiDropdown"], exportAs: ["tuiDropdown"] }, { kind: "directive", type: i6.TuiDropdownOpen, selector: "[tuiDropdown][tuiDropdownOpen],[tuiDropdown][tuiDropdownOpenChange]", inputs: ["tuiDropdownEnabled", "tuiDropdownOpen"], outputs: ["tuiDropdownOpenChange"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i7.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 && !nativePicker\"\n    [tuiDropdownOpen]=\"open && interactive\"\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]=\"(value | tuiMapper: formatter | async) || ''\"\n        (focusedChange)=\"onFocused($event)\"\n        (valueChange)=\"onValueChange($event)\"\n    >\n        <ng-content />\n        <ng-content\n            ngProjectAs=\"input\"\n            select=\"input\"\n        />\n        <input\n            *ngIf=\"nativePicker\"\n            type=\"month\"\n            class=\"t-mobile\"\n            [max]=\"nativePickerMax\"\n            [min]=\"nativePickerMin\"\n            [ngModel]=\"nativeValue\"\n            [ngModelOptions]=\"{standalone: true}\"\n            (click.stop.zoneless)=\"(0)\"\n            (mousedown.stop.zoneless)=\"(0)\"\n            (ngModelChange)=\"onNativeChange($event)\"\n        />\n    </tui-primitive-textfield>\n\n    <ng-template #dropdown>\n        <tui-calendar-month\n            [disabledItemHandler]=\"disabledItemHandler\"\n            [max]=\"computedMax\"\n            [min]=\"computedMin\"\n            [value]=\"value\"\n            [year]=\"computedDefaultActiveYear\"\n            (monthClick)=\"onMonthClick($event)\"\n            (mousedown.prevent.zoneless)=\"(0)\"\n            (yearChange)=\"activeYear = $event\"\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}.t-mobile{position:absolute;top:0;left:0;inline-size:100%;block-size:100%;opacity:0;border:0}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.TuiCalendarMonth, selector: "tui-calendar-month", inputs: ["year", "disabledItemHandler", "minLength", "maxLength", "min", "max", "value"], outputs: ["monthClick", "hoveredItemChange", "yearChange"] }, { 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.TuiTextfieldIconDirective, selector: "[tuiTextfieldIcon]", inputs: ["tuiTextfieldIcon"] }, { kind: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4.TuiLegacyDropdownOpenMonitorDirective, selector: "[tuiDropdownOpenMonitor]" }, { kind: "directive", type: i6.TuiDropdownDirective, selector: "[tuiDropdown]:not(ng-container):not(ng-template)", inputs: ["tuiDropdown"], exportAs: ["tuiDropdown"] }, { kind: "directive", type: i6.TuiDropdownOpen, selector: "[tuiDropdown][tuiDropdownOpen],[tuiDropdown][tuiDropdownOpenChange]", inputs: ["tuiDropdownEnabled", "tuiDropdownOpen"], outputs: ["tuiDropdownOpenChange"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i7.TuiMapperPipe, name: "tuiMapper" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 export { TuiInputMonthComponent };
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiInputMonthComponent, decorators: [{
@@ -119,7 +119,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 && !nativePicker\"\n    [tuiDropdownOpen]=\"open && interactive\"\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]=\"(value | tuiMapper: formatter | async) || ''\"\n        (focusedChange)=\"onFocused($event)\"\n        (valueChange)=\"onValueChange($event)\"\n    >\n        <ng-content />\n        <ng-content\n            ngProjectAs=\"input\"\n            select=\"input\"\n        />\n        <input\n            *ngIf=\"nativePicker\"\n            type=\"month\"\n            class=\"t-mobile\"\n            [max]=\"nativePickerMax\"\n            [min]=\"nativePickerMin\"\n            [ngModel]=\"nativeValue\"\n            [ngModelOptions]=\"{standalone: true}\"\n            (click.stop.zoneless)=\"(0)\"\n            (mousedown.stop.zoneless)=\"(0)\"\n            (ngModelChange)=\"onNativeChange($event)\"\n        />\n    </tui-primitive-textfield>\n\n    <ng-template #dropdown>\n        <tui-calendar-month\n            [disabledItemHandler]=\"disabledItemHandler\"\n            [max]=\"computedMax\"\n            [min]=\"computedMin\"\n            [value]=\"value\"\n            [year]=\"computedDefaultActiveYear\"\n            (monthClick)=\"onMonthClick($event)\"\n            (mousedown.prevent.zoneless)=\"(0)\"\n            (yearChange)=\"activeYear = $event\"\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}.t-mobile{position:absolute;top:0;left:0;inline-size:100%;block-size:100%;opacity:0;border:0}\n"] }]
+                    }, template: "<div\n    tuiDropdownOpenMonitor\n    class=\"t-hosted\"\n    [tuiDropdown]=\"dropdown\"\n    [tuiDropdownEnabled]=\"interactive && !nativePicker\"\n    [tuiDropdownOpen]=\"open && interactive\"\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]=\"(value | tuiMapper: formatter | async) || ''\"\n        (focusedChange)=\"onFocused($event)\"\n        (valueChange)=\"onValueChange($event)\"\n    >\n        <ng-content />\n        <ng-content\n            ngProjectAs=\"input\"\n            select=\"input\"\n        />\n        <input\n            *ngIf=\"nativePicker\"\n            type=\"month\"\n            class=\"t-mobile\"\n            [max]=\"nativePickerMax\"\n            [min]=\"nativePickerMin\"\n            [ngModel]=\"nativeValue\"\n            [ngModelOptions]=\"{standalone: true}\"\n            (click.stop.zoneless)=\"(0)\"\n            (mousedown.stop.zoneless)=\"(0)\"\n            (ngModelChange)=\"onNativeChange($event)\"\n        />\n    </tui-primitive-textfield>\n\n    <ng-template #dropdown>\n        <tui-calendar-month\n            [disabledItemHandler]=\"disabledItemHandler\"\n            [max]=\"computedMax\"\n            [min]=\"computedMin\"\n            [value]=\"value\"\n            [year]=\"computedDefaultActiveYear\"\n            (monthClick)=\"onMonthClick($event)\"\n            (mousedown.prevent.zoneless)=\"(0)\"\n            (yearChange)=\"activeYear = $event\"\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}.t-mobile{position:absolute;top:0;left:0;inline-size:100%;block-size:100%;opacity:0;border:0}\n"] }]
         }], propDecorators: { textfield: [{
                 type: ViewChild,
                 args: [TuiPrimitiveTextfieldComponent]