npm - @taiga-ui/legacy - Versions diffs - 4.43.0-canary.0505af2 → 4.43.0-canary.7059f3e - Mend

@taiga-ui/legacy 4.43.0-canary.0505af2 → 4.43.0-canary.7059f3e

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (42) hide show

package/fesm2022/taiga-ui-legacy-components-input-phone-international.mjs CHANGED Viewed

@@ -162,7 +162,7 @@ class TuiInputPhoneInternationalComponent extends AbstractTuiControl {
             tuiAsFocusableItemAccessor(TuiInputPhoneInternationalComponent),
             tuiAsControl(TuiInputPhoneInternationalComponent),
             TuiToCountryCodePipe,
-        ], viewQueries: [{ propertyName: "inputPhoneComponent", first: true, predicate: TuiInputPhoneComponent, descendants: true }, { propertyName: "primitiveTextfield", first: true, predicate: TuiPrimitiveTextfieldComponent, descendants: true }], usesInheritance: true, hostDirectives: [{ directive: i1.TuiDropdownFixed }], ngImport: i0, template: "<div\n    *ngIf=\"countriesNames$ | async as countriesNames\"\n    tuiDropdownOpenMonitor\n    [tuiDropdown]=\"dropdown\"\n    [tuiDropdownEnabled]=\"!readOnly\"\n    [(tuiDropdownOpen)]=\"open\"\n    (tuiActiveZoneChange)=\"onActiveZone($event)\"\n>\n    <div tuiGroup>\n        <tui-primitive-textfield\n            tuiHintContent=\"\"\n            tuiTextfieldPostfix=\"\"\n            tuiTextfieldPrefix=\"\"\n            class=\"t-country-select\"\n            [disabled]=\"disabled\"\n            [editable]=\"false\"\n            [focusable]=\"focusable\"\n            [pseudoFocus]=\"open || null\"\n            [readOnly]=\"readOnly\"\n            [style.flex]=\"'0 0 auto'\"\n            [tuiTextfieldCustomContent]=\"countryValueContent\"\n            [tuiTextfieldIcon]=\"icon\"\n            [tuiTextfieldLabelOutside]=\"true\"\n        />\n        <tui-input-phone\n            class=\"t-input-phone\"\n            [countryCode]=\"inputPhoneCountryCode\"\n            [disabled]=\"disabled\"\n            [focusable]=\"focusable\"\n            [ngModelOptions]=\"{standalone: true}\"\n            [phoneMaskAfterCountryCode]=\"phoneMaskAfterCountryCode\"\n            [pseudoFocus]=\"pseudoFocus\"\n            [pseudoHover]=\"pseudoHover\"\n            [pseudoInvalid]=\"computedInvalid\"\n            [readOnly]=\"readOnly\"\n            [style.flex]=\"'0 0 auto'\"\n            [(ngModel)]=\"value\"\n        >\n            <ng-content />\n            <input\n                autocomplete=\"new-password\"\n                tuiTextfieldLegacy\n            />\n        </tui-input-phone>\n    </div>\n\n    <ng-template #dropdown>\n        <tui-data-list>\n            <button\n                *ngFor=\"let item of countries\"\n                tuiOption\n                type=\"button\"\n                (click)=\"onItemClick(item)\"\n            >\n                <img\n                    alt=\"\"\n                    class=\"t-flag\"\n                    [src]=\"item | tuiFlag\"\n                />\n                <span class=\"t-country-item-name\">\n                    {{ countriesNames[item] }}\n                </span>\n                <span class=\"t-country-item-code\">\n                    {{ item | tuiIsoToCountryCode }}\n                </span>\n            </button>\n        </tui-data-list>\n    </ng-template>\n\n    <ng-template #countryValueContent>\n        <img\n            class=\"t-flag t-flag_select\"\n            [alt]=\"countriesNames[countryIsoCode]\"\n            [src]=\"countryIsoCode | tuiFlag\"\n        />\n    </ng-template>\n\n    <ng-template #icon>\n        <div tuiAppearance=\"icon\">\n            <ng-container *polymorpheusOutlet=\"arrow\" />\n        </div>\n    </ng-template>\n</div>\n", styles: [":host{display:block}:host._disabled,:host :host-context(*:disabled){pointer-events:none}.t-country-select{inline-size:5.625rem}.t-country-select:not(._readonly) ::ng-deep input:not(:disabled){cursor:pointer}.t-country-select._readonly ::ng-deep input{cursor:default}.t-country-select[data-size=m]{inline-size:5.5rem}.t-country-select[data-size=s]{inline-size:2rem}.t-country-select[data-size=s] .t-flag{margin-inline-start:-1rem}.t-input-phone{flex:1}.t-flag{inline-size:1.75rem;block-size:1.75rem;border-radius:50%}.t-flag_select{margin-inline-start:-.5rem}.t-country-item-name{margin-inline-start:.75rem;margin-inline-end:auto}.t-country-item-code{color:var(--tui-text-secondary);margin-inline-end:.25rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: PolymorpheusOutlet, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }, { kind: "directive", type: TuiAppearance, selector: "[tuiAppearance]", inputs: ["tuiAppearance", "tuiAppearanceState", "tuiAppearanceFocus", "tuiAppearanceMode"] }, { kind: "component", type: i4.TuiDataListComponent, selector: "tui-data-list", inputs: ["emptyContent", "size"] }, { kind: "component", type: i4.TuiOption, selector: "button[tuiOption]:not([new]), a[tuiOption]:not([new]), label[tuiOption]:not([new])", inputs: ["disabled", "value"] }, { kind: "directive", type: i1.TuiDropdownDirective, selector: "[tuiDropdown]:not(ng-container):not(ng-template)", inputs: ["tuiDropdown"], exportAs: ["tuiDropdown"] }, { kind: "directive", type: i1.TuiDropdownOpen, selector: "[tuiDropdown][tuiDropdownOpen],[tuiDropdown][tuiDropdownOpenChange]", inputs: ["tuiDropdownEnabled", "tuiDropdownOpen"], outputs: ["tuiDropdownOpenChange"] }, { kind: "pipe", type: TuiFlagPipe, name: "tuiFlag" }, { kind: "directive", type: TuiGroup, selector: "[tuiGroup]:not(ng-container)", inputs: ["orientation", "collapsed", "rounded", "size"] }, { kind: "directive", type: i5.TuiHintOptionsDirective, selector: "[tuiHintContent]", inputs: ["tuiHintContent", "tuiHintDirection", "tuiHintAppearance", "tuiHintShowDelay", "tuiHintHideDelay"] }, { kind: "ngmodule", type: TuiInputPhoneModule }, { kind: "component", type: i6.TuiInputPhoneComponent, selector: "tui-input-phone", inputs: ["phoneMaskAfterCountryCode", "allowText", "search", "countryCode"], outputs: ["searchChange"] }, { kind: "directive", type: i6.TuiInputPhoneDirective, selector: "tui-input-phone" }, { kind: "component", type: i7.TuiTextfieldComponent, selector: "input[tuiTextfieldLegacy], textarea[tuiTextfieldLegacy]" }, { kind: "pipe", type: TuiIsoToCountryCodePipe, name: "tuiIsoToCountryCode" }, { kind: "directive", type: TuiLegacyDropdownOpenMonitorDirective, selector: "[tuiDropdownOpenMonitor]" }, { kind: "ngmodule", type: TuiPrimitiveTextfieldModule }, { kind: "component", type: i7.TuiPrimitiveTextfieldComponent, selector: "tui-primitive-textfield", inputs: ["editable", "iconCleaner", "readOnly", "invalid", "disabled", "value"], outputs: ["valueChange"] }, { kind: "directive", type: i7.TuiPrimitiveTextfieldDirective, selector: "tui-primitive-textfield" }, { kind: "ngmodule", type: TuiTextfieldControllerModule }, { kind: "directive", type: i8.TuiTextfieldCustomContentDirective, selector: "[tuiTextfieldCustomContent]", inputs: ["tuiTextfieldCustomContent"] }, { kind: "directive", type: i8.TuiTextfieldLabelOutsideDirective, selector: "[tuiTextfieldLabelOutside]", inputs: ["tuiTextfieldLabelOutside"] }, { kind: "directive", type: i8.TuiTextfieldIconDirective, selector: "[tuiTextfieldIcon]", inputs: ["tuiTextfieldIcon"] }, { kind: "directive", type: i8.TuiTextfieldPrefixDirective, selector: "[tuiTextfieldPrefix]", inputs: ["tuiTextfieldPrefix"] }, { kind: "directive", type: i8.TuiTextfieldPostfixDirective, selector: "[tuiTextfieldPostfix]", inputs: ["tuiTextfieldPostfix"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], viewQueries: [{ propertyName: "inputPhoneComponent", first: true, predicate: TuiInputPhoneComponent, descendants: true }, { propertyName: "primitiveTextfield", first: true, predicate: TuiPrimitiveTextfieldComponent, descendants: true }], usesInheritance: true, hostDirectives: [{ directive: i1.TuiDropdownFixed }], ngImport: i0, template: "<div\n    *ngIf=\"countriesNames$ | async as countriesNames\"\n    tuiDropdownOpenMonitor\n    [tuiDropdown]=\"dropdown\"\n    [tuiDropdownEnabled]=\"!readOnly\"\n    [(tuiDropdownOpen)]=\"open\"\n    (tuiActiveZoneChange)=\"onActiveZone($event)\"\n>\n    <div tuiGroup>\n        <tui-primitive-textfield\n            tuiHintContent=\"\"\n            tuiTextfieldPostfix=\"\"\n            tuiTextfieldPrefix=\"\"\n            class=\"t-country-select\"\n            [disabled]=\"disabled\"\n            [editable]=\"false\"\n            [focusable]=\"focusable\"\n            [pseudoFocus]=\"open || null\"\n            [readOnly]=\"readOnly\"\n            [style.flex]=\"'0 0 auto'\"\n            [tuiTextfieldCustomContent]=\"countryValueContent\"\n            [tuiTextfieldIcon]=\"icon\"\n            [tuiTextfieldLabelOutside]=\"true\"\n        />\n        <tui-input-phone\n            class=\"t-input-phone\"\n            [countryCode]=\"inputPhoneCountryCode\"\n            [disabled]=\"disabled\"\n            [focusable]=\"focusable\"\n            [ngModelOptions]=\"{standalone: true}\"\n            [phoneMaskAfterCountryCode]=\"phoneMaskAfterCountryCode\"\n            [pseudoFocus]=\"pseudoFocus\"\n            [pseudoHover]=\"pseudoHover\"\n            [pseudoInvalid]=\"computedInvalid\"\n            [readOnly]=\"readOnly\"\n            [style.flex]=\"'0 0 auto'\"\n            [(ngModel)]=\"value\"\n        >\n            <ng-content />\n            <input\n                autocomplete=\"new-password\"\n                tuiTextfieldLegacy\n            />\n        </tui-input-phone>\n    </div>\n\n    <ng-template #dropdown>\n        <tui-data-list>\n            <button\n                *ngFor=\"let item of countries\"\n                tuiOption\n                type=\"button\"\n                (click)=\"onItemClick(item)\"\n            >\n                <img\n                    alt=\"\"\n                    class=\"t-flag\"\n                    [src]=\"item | tuiFlag\"\n                />\n                <span class=\"t-country-item-name\">\n                    {{ countriesNames[item] }}\n                </span>\n                <span class=\"t-country-item-code\">\n                    {{ item | tuiIsoToCountryCode }}\n                </span>\n            </button>\n        </tui-data-list>\n    </ng-template>\n\n    <ng-template #countryValueContent>\n        <img\n            class=\"t-flag t-flag_select\"\n            [alt]=\"countriesNames[countryIsoCode]\"\n            [src]=\"countryIsoCode | tuiFlag\"\n        />\n    </ng-template>\n\n    <ng-template #icon>\n        <div tuiAppearance=\"icon\">\n            <ng-container *polymorpheusOutlet=\"arrow\" />\n        </div>\n    </ng-template>\n</div>\n", styles: [":host{display:block}:host._disabled,:host :host-context(*:disabled){pointer-events:none}.t-country-select{inline-size:5.625rem}.t-country-select:not(._readonly) ::ng-deep input:not(:disabled){cursor:pointer}.t-country-select._readonly ::ng-deep input{cursor:default}.t-country-select[data-size=m]{inline-size:5.5rem}.t-country-select[data-size=s]{inline-size:2rem}.t-country-select[data-size=s] .t-flag{margin-left:-1rem}.t-input-phone{flex:1}.t-flag{inline-size:1.75rem;block-size:1.75rem;border-radius:50%}.t-flag_select{margin-left:-.5rem}.t-country-item-name{margin-left:.75rem;margin-right:auto}.t-country-item-code{color:var(--tui-text-secondary);margin-right:.25rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: PolymorpheusOutlet, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }, { kind: "directive", type: TuiAppearance, selector: "[tuiAppearance]", inputs: ["tuiAppearance", "tuiAppearanceState", "tuiAppearanceFocus", "tuiAppearanceMode"] }, { kind: "component", type: i4.TuiDataListComponent, selector: "tui-data-list", inputs: ["emptyContent", "size"] }, { kind: "component", type: i4.TuiOption, selector: "button[tuiOption]:not([new]), a[tuiOption]:not([new]), label[tuiOption]:not([new])", inputs: ["disabled", "value"] }, { kind: "directive", type: i1.TuiDropdownDirective, selector: "[tuiDropdown]:not(ng-container):not(ng-template)", inputs: ["tuiDropdown"], exportAs: ["tuiDropdown"] }, { kind: "directive", type: i1.TuiDropdownOpen, selector: "[tuiDropdown][tuiDropdownOpen],[tuiDropdown][tuiDropdownOpenChange]", inputs: ["tuiDropdownEnabled", "tuiDropdownOpen"], outputs: ["tuiDropdownOpenChange"] }, { kind: "pipe", type: TuiFlagPipe, name: "tuiFlag" }, { kind: "directive", type: TuiGroup, selector: "[tuiGroup]:not(ng-container)", inputs: ["orientation", "collapsed", "rounded", "size"] }, { kind: "directive", type: i5.TuiHintOptionsDirective, selector: "[tuiHintContent]", inputs: ["tuiHintContent", "tuiHintDirection", "tuiHintAppearance", "tuiHintShowDelay", "tuiHintHideDelay"] }, { kind: "ngmodule", type: TuiInputPhoneModule }, { kind: "component", type: i6.TuiInputPhoneComponent, selector: "tui-input-phone", inputs: ["phoneMaskAfterCountryCode", "allowText", "search", "countryCode"], outputs: ["searchChange"] }, { kind: "directive", type: i6.TuiInputPhoneDirective, selector: "tui-input-phone" }, { kind: "component", type: i7.TuiTextfieldComponent, selector: "input[tuiTextfieldLegacy], textarea[tuiTextfieldLegacy]" }, { kind: "pipe", type: TuiIsoToCountryCodePipe, name: "tuiIsoToCountryCode" }, { kind: "directive", type: TuiLegacyDropdownOpenMonitorDirective, selector: "[tuiDropdownOpenMonitor]" }, { kind: "ngmodule", type: TuiPrimitiveTextfieldModule }, { kind: "component", type: i7.TuiPrimitiveTextfieldComponent, selector: "tui-primitive-textfield", inputs: ["editable", "iconCleaner", "readOnly", "invalid", "disabled", "value"], outputs: ["valueChange"] }, { kind: "directive", type: i7.TuiPrimitiveTextfieldDirective, selector: "tui-primitive-textfield" }, { kind: "ngmodule", type: TuiTextfieldControllerModule }, { kind: "directive", type: i8.TuiTextfieldCustomContentDirective, selector: "[tuiTextfieldCustomContent]", inputs: ["tuiTextfieldCustomContent"] }, { kind: "directive", type: i8.TuiTextfieldLabelOutsideDirective, selector: "[tuiTextfieldLabelOutside]", inputs: ["tuiTextfieldLabelOutside"] }, { kind: "directive", type: i8.TuiTextfieldIconDirective, selector: "[tuiTextfieldIcon]", inputs: ["tuiTextfieldIcon"] }, { kind: "directive", type: i8.TuiTextfieldPrefixDirective, selector: "[tuiTextfieldPrefix]", inputs: ["tuiTextfieldPrefix"] }, { kind: "directive", type: i8.TuiTextfieldPostfixDirective, selector: "[tuiTextfieldPostfix]", inputs: ["tuiTextfieldPostfix"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 __decorate([
     tuiPure
@@ -195,7 +195,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         '[attr.data-size]': 'size',
                         '(paste.capture.prevent.stop)': 'onPaste($event)',
                         '(drop.capture.prevent.stop)': 'onPaste($event)',
-                    }, template: "<div\n    *ngIf=\"countriesNames$ | async as countriesNames\"\n    tuiDropdownOpenMonitor\n    [tuiDropdown]=\"dropdown\"\n    [tuiDropdownEnabled]=\"!readOnly\"\n    [(tuiDropdownOpen)]=\"open\"\n    (tuiActiveZoneChange)=\"onActiveZone($event)\"\n>\n    <div tuiGroup>\n        <tui-primitive-textfield\n            tuiHintContent=\"\"\n            tuiTextfieldPostfix=\"\"\n            tuiTextfieldPrefix=\"\"\n            class=\"t-country-select\"\n            [disabled]=\"disabled\"\n            [editable]=\"false\"\n            [focusable]=\"focusable\"\n            [pseudoFocus]=\"open || null\"\n            [readOnly]=\"readOnly\"\n            [style.flex]=\"'0 0 auto'\"\n            [tuiTextfieldCustomContent]=\"countryValueContent\"\n            [tuiTextfieldIcon]=\"icon\"\n            [tuiTextfieldLabelOutside]=\"true\"\n        />\n        <tui-input-phone\n            class=\"t-input-phone\"\n            [countryCode]=\"inputPhoneCountryCode\"\n            [disabled]=\"disabled\"\n            [focusable]=\"focusable\"\n            [ngModelOptions]=\"{standalone: true}\"\n            [phoneMaskAfterCountryCode]=\"phoneMaskAfterCountryCode\"\n            [pseudoFocus]=\"pseudoFocus\"\n            [pseudoHover]=\"pseudoHover\"\n            [pseudoInvalid]=\"computedInvalid\"\n            [readOnly]=\"readOnly\"\n            [style.flex]=\"'0 0 auto'\"\n            [(ngModel)]=\"value\"\n        >\n            <ng-content />\n            <input\n                autocomplete=\"new-password\"\n                tuiTextfieldLegacy\n            />\n        </tui-input-phone>\n    </div>\n\n    <ng-template #dropdown>\n        <tui-data-list>\n            <button\n                *ngFor=\"let item of countries\"\n                tuiOption\n                type=\"button\"\n                (click)=\"onItemClick(item)\"\n            >\n                <img\n                    alt=\"\"\n                    class=\"t-flag\"\n                    [src]=\"item | tuiFlag\"\n                />\n                <span class=\"t-country-item-name\">\n                    {{ countriesNames[item] }}\n                </span>\n                <span class=\"t-country-item-code\">\n                    {{ item | tuiIsoToCountryCode }}\n                </span>\n            </button>\n        </tui-data-list>\n    </ng-template>\n\n    <ng-template #countryValueContent>\n        <img\n            class=\"t-flag t-flag_select\"\n            [alt]=\"countriesNames[countryIsoCode]\"\n            [src]=\"countryIsoCode | tuiFlag\"\n        />\n    </ng-template>\n\n    <ng-template #icon>\n        <div tuiAppearance=\"icon\">\n            <ng-container *polymorpheusOutlet=\"arrow\" />\n        </div>\n    </ng-template>\n</div>\n", styles: [":host{display:block}:host._disabled,:host :host-context(*:disabled){pointer-events:none}.t-country-select{inline-size:5.625rem}.t-country-select:not(._readonly) ::ng-deep input:not(:disabled){cursor:pointer}.t-country-select._readonly ::ng-deep input{cursor:default}.t-country-select[data-size=m]{inline-size:5.5rem}.t-country-select[data-size=s]{inline-size:2rem}.t-country-select[data-size=s] .t-flag{margin-inline-start:-1rem}.t-input-phone{flex:1}.t-flag{inline-size:1.75rem;block-size:1.75rem;border-radius:50%}.t-flag_select{margin-inline-start:-.5rem}.t-country-item-name{margin-inline-start:.75rem;margin-inline-end:auto}.t-country-item-code{color:var(--tui-text-secondary);margin-inline-end:.25rem}\n"] }]
+                    }, template: "<div\n    *ngIf=\"countriesNames$ | async as countriesNames\"\n    tuiDropdownOpenMonitor\n    [tuiDropdown]=\"dropdown\"\n    [tuiDropdownEnabled]=\"!readOnly\"\n    [(tuiDropdownOpen)]=\"open\"\n    (tuiActiveZoneChange)=\"onActiveZone($event)\"\n>\n    <div tuiGroup>\n        <tui-primitive-textfield\n            tuiHintContent=\"\"\n            tuiTextfieldPostfix=\"\"\n            tuiTextfieldPrefix=\"\"\n            class=\"t-country-select\"\n            [disabled]=\"disabled\"\n            [editable]=\"false\"\n            [focusable]=\"focusable\"\n            [pseudoFocus]=\"open || null\"\n            [readOnly]=\"readOnly\"\n            [style.flex]=\"'0 0 auto'\"\n            [tuiTextfieldCustomContent]=\"countryValueContent\"\n            [tuiTextfieldIcon]=\"icon\"\n            [tuiTextfieldLabelOutside]=\"true\"\n        />\n        <tui-input-phone\n            class=\"t-input-phone\"\n            [countryCode]=\"inputPhoneCountryCode\"\n            [disabled]=\"disabled\"\n            [focusable]=\"focusable\"\n            [ngModelOptions]=\"{standalone: true}\"\n            [phoneMaskAfterCountryCode]=\"phoneMaskAfterCountryCode\"\n            [pseudoFocus]=\"pseudoFocus\"\n            [pseudoHover]=\"pseudoHover\"\n            [pseudoInvalid]=\"computedInvalid\"\n            [readOnly]=\"readOnly\"\n            [style.flex]=\"'0 0 auto'\"\n            [(ngModel)]=\"value\"\n        >\n            <ng-content />\n            <input\n                autocomplete=\"new-password\"\n                tuiTextfieldLegacy\n            />\n        </tui-input-phone>\n    </div>\n\n    <ng-template #dropdown>\n        <tui-data-list>\n            <button\n                *ngFor=\"let item of countries\"\n                tuiOption\n                type=\"button\"\n                (click)=\"onItemClick(item)\"\n            >\n                <img\n                    alt=\"\"\n                    class=\"t-flag\"\n                    [src]=\"item | tuiFlag\"\n                />\n                <span class=\"t-country-item-name\">\n                    {{ countriesNames[item] }}\n                </span>\n                <span class=\"t-country-item-code\">\n                    {{ item | tuiIsoToCountryCode }}\n                </span>\n            </button>\n        </tui-data-list>\n    </ng-template>\n\n    <ng-template #countryValueContent>\n        <img\n            class=\"t-flag t-flag_select\"\n            [alt]=\"countriesNames[countryIsoCode]\"\n            [src]=\"countryIsoCode | tuiFlag\"\n        />\n    </ng-template>\n\n    <ng-template #icon>\n        <div tuiAppearance=\"icon\">\n            <ng-container *polymorpheusOutlet=\"arrow\" />\n        </div>\n    </ng-template>\n</div>\n", styles: [":host{display:block}:host._disabled,:host :host-context(*:disabled){pointer-events:none}.t-country-select{inline-size:5.625rem}.t-country-select:not(._readonly) ::ng-deep input:not(:disabled){cursor:pointer}.t-country-select._readonly ::ng-deep input{cursor:default}.t-country-select[data-size=m]{inline-size:5.5rem}.t-country-select[data-size=s]{inline-size:2rem}.t-country-select[data-size=s] .t-flag{margin-left:-1rem}.t-input-phone{flex:1}.t-flag{inline-size:1.75rem;block-size:1.75rem;border-radius:50%}.t-flag_select{margin-left:-.5rem}.t-country-item-name{margin-left:.75rem;margin-right:auto}.t-country-item-code{color:var(--tui-text-secondary);margin-right:.25rem}\n"] }]
         }], propDecorators: { inputPhoneComponent: [{
                 type: ViewChild,
                 args: [TuiInputPhoneComponent]

package/fesm2022/taiga-ui-legacy-components-input-phone-international.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"taiga-ui-legacy-components-input-phone-international.mjs","sources":["../../../projects/legacy/components/input-phone-international/input-phone-international.options.ts","../../../projects/legacy/components/input-phone-international/utils/extract-value-from-event.ts","../../../projects/legacy/components/input-phone-international/input-phone-international.component.ts","../../../projects/legacy/components/input-phone-international/input-phone-international.template.html","../../../projects/legacy/components/input-phone-international/taiga-ui-legacy-components-input-phone-international.ts"],"sourcesContent":["import type {Provider} from '@angular/core';\nimport {InjectionToken} from '@angular/core';\nimport {tuiProvideOptions} from '@taiga-ui/cdk/utils/miscellaneous';\nimport type {TuiCountryIsoCode} from '@taiga-ui/i18n/types';\n\n/*\n @deprecated: drop in v5.0 use {@link TuiInputPhoneInternational}\n * https://taiga-ui.dev/components/input-phone-international\n /\nexport interface TuiInputPhoneInternationalOptions {\n readonly countries: readonly TuiCountryIsoCode[];\n readonly countryIsoCode: TuiCountryIsoCode;\n}\n\n/\n @deprecated: drop in v5.0 use {@link TuiInputPhoneInternational}\n * https://taiga-ui.dev/components/input-phone-international\n /\nexport const TUI_INPUT_PHONE_INTERNATIONAL_DEFAULT_OPTIONS: TuiInputPhoneInternationalOptions =\n {\n countries: [],\n countryIsoCode: 'RU',\n };\n\n/\n @deprecated: drop in v5.0 use {@link TuiInputPhoneInternational}\n * https://taiga-ui.dev/components/input-phone-international\n /\nexport const TUI_INPUT_PHONE_INTERNATIONAL_OPTIONS = new InjectionToken(\n ngDevMode ? 'TUI_INPUT_PHONE_INTERNATIONAL_OPTIONS' : '',\n {\n factory: () => TUI_INPUT_PHONE_INTERNATIONAL_DEFAULT_OPTIONS,\n },\n);\n\n/\n @deprecated: drop in v5.0 use {@link TuiInputPhoneInternational}\n * https://taiga-ui.dev/components/input-phone-international\n /\nexport function tuiInputPhoneInternationalOptionsProvider(\n options: Partial<TuiInputPhoneInternationalOptions>,\n): Provider {\n return tuiProvideOptions(\n TUI_INPUT_PHONE_INTERNATIONAL_OPTIONS,\n options,\n TUI_INPUT_PHONE_INTERNATIONAL_DEFAULT_OPTIONS,\n );\n}\n","import {tuiGetClipboardDataText} from '@taiga-ui/cdk/utils/dom';\n\n/\n @deprecated: drop in v5.0\n /\nexport function tuiExtractValueFromEvent(event: ClipboardEvent \| DragEvent): string {\n return 'dataTransfer' in event\n ? event.dataTransfer?.getData('text/plain') \|\| ''\n : tuiGetClipboardDataText(event);\n}\n","import {CommonModule} from '@angular/common';\nimport {\n ChangeDetectionStrategy,\n Component,\n EventEmitter,\n inject,\n Input,\n Output,\n ViewChild,\n} from '@angular/core';\nimport {FormsModule} from '@angular/forms';\nimport {CHAR_PLUS, TUI_NON_DIGITS_REGEXP} from '@taiga-ui/cdk/constants';\nimport type {TuiContext} from '@taiga-ui/cdk/types';\nimport {tuiPure} from '@taiga-ui/cdk/utils/miscellaneous';\nimport {TuiButton} from '@taiga-ui/core/components/button';\nimport {TuiDataList} from '@taiga-ui/core/components/data-list';\nimport {TuiAppearance} from '@taiga-ui/core/directives/appearance';\nimport {TuiDropdown, TuiDropdownFixed} from '@taiga-ui/core/directives/dropdown';\nimport {TuiGroup} from '@taiga-ui/core/directives/group';\nimport {TuiHint} from '@taiga-ui/core/directives/hint';\nimport {TuiFlagPipe} from '@taiga-ui/core/pipes/flag';\nimport type {TuiSizeL, TuiSizeM, TuiSizeS} from '@taiga-ui/core/types';\nimport type {TuiCountryIsoCode} from '@taiga-ui/i18n/types';\nimport {TUI_COUNTRIES} from '@taiga-ui/kit/tokens';\nimport {AbstractTuiControl, tuiAsControl} from '@taiga-ui/legacy/classes';\nimport {TUI_ARROW, TuiArrowComponent} from '@taiga-ui/legacy/components/arrow';\nimport {\n TuiInputPhoneComponent,\n TuiInputPhoneModule,\n} from '@taiga-ui/legacy/components/input-phone';\nimport {\n TuiPrimitiveTextfieldComponent,\n TuiPrimitiveTextfieldModule,\n} from '@taiga-ui/legacy/components/primitive-textfield';\nimport {\n TUI_TEXTFIELD_SIZE,\n TuiLegacyDropdownOpenMonitorDirective,\n TuiTextfieldControllerModule,\n} from '@taiga-ui/legacy/directives';\nimport {TuiIsoToCountryCodePipe, TuiToCountryCodePipe} from '@taiga-ui/legacy/pipes';\nimport type {TuiFocusableElementAccessor} from '@taiga-ui/legacy/tokens';\nimport {TUI_COUNTRIES_MASKS, tuiAsFocusableItemAccessor} from '@taiga-ui/legacy/tokens';\nimport {tuiGetMaxAllowedPhoneLength, tuiIsoToCountryCode} from '@taiga-ui/legacy/utils';\nimport type {PolymorpheusContent} from '@taiga-ui/polymorpheus';\nimport {PolymorpheusOutlet, PolymorpheusTemplate} from '@taiga-ui/polymorpheus';\n\nimport {TUI_INPUT_PHONE_INTERNATIONAL_OPTIONS} from './input-phone-international.options';\nimport {tuiExtractValueFromEvent} from './utils/extract-value-from-event';\n\nconst MASK_SYMBOLS = /[ \\-_()]/g;\n\n/\n @deprecated: drop in v5.0 use {@link TuiInputPhoneInternational}\n * https://taiga-ui.dev/components/input-phone-international\n /\n@Component({\n standalone: true,\n selector: 'tui-input-phone-international',\n imports: [\n CommonModule,\n FormsModule,\n PolymorpheusOutlet,\n PolymorpheusTemplate,\n TuiAppearance,\n TuiArrowComponent,\n TuiButton,\n TuiDataList,\n TuiDropdown,\n TuiFlagPipe,\n TuiGroup,\n TuiHint,\n TuiInputPhoneModule,\n TuiIsoToCountryCodePipe,\n TuiLegacyDropdownOpenMonitorDirective,\n TuiPrimitiveTextfieldModule,\n TuiTextfieldControllerModule,\n ],\n templateUrl: './input-phone-international.template.html',\n styleUrls: ['./input-phone-international.style.less'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n providers: [\n tuiAsFocusableItemAccessor(TuiInputPhoneInternationalComponent),\n tuiAsControl(TuiInputPhoneInternationalComponent),\n TuiToCountryCodePipe,\n ],\n hostDirectives: [TuiDropdownFixed],\n host: {\n '[attr.data-size]': 'size',\n '(paste.capture.prevent.stop)': 'onPaste($event)',\n '(drop.capture.prevent.stop)': 'onPaste($event)',\n },\n})\nexport class TuiInputPhoneInternationalComponent\n extends AbstractTuiControl<string>\n implements TuiFocusableElementAccessor\n{\n @ViewChild(TuiInputPhoneComponent)\n private readonly inputPhoneComponent?: TuiInputPhoneComponent;\n\n @ViewChild(TuiPrimitiveTextfieldComponent)\n private readonly primitiveTextfield?: TuiPrimitiveTextfieldComponent;\n\n private readonly options = inject(TUI_INPUT_PHONE_INTERNATIONAL_OPTIONS);\n private readonly extractCountryCodePipe = inject(TuiToCountryCodePipe);\n private readonly textfieldSize = inject(TUI_TEXTFIELD_SIZE);\n\n protected open = false;\n protected readonly countriesNames$ = inject(TUI_COUNTRIES);\n protected readonly countriesMasks = inject(TUI_COUNTRIES_MASKS);\n protected readonly arrow: PolymorpheusContent<\n TuiContext<TuiSizeL \| TuiSizeM \| TuiSizeS>\n > = TUI_ARROW;\n\n @Input()\n public countries = this.options.countries;\n\n @Output()\n public readonly countryIsoCodeChange = new EventEmitter<TuiCountryIsoCode>();\n\n public countryIsoCode = this.options.countryIsoCode;\n\n @Input('countryIsoCode')\n public set isoCode(code: TuiCountryIsoCode) {\n if (this.countryIsoCode === code) {\n return;\n }\n\n this.inputPhoneComponent?.writeValue(this.value);\n this.countryIsoCode = code;\n }\n\n public get nativeFocusableElement(): HTMLElement \| null {\n return this.inputPhoneComponent && !this.computedDisabled\n ? this.inputPhoneComponent.nativeFocusableElement\n : null;\n }\n\n public get focused(): boolean {\n return (\n (!!this.primitiveTextfield && this.primitiveTextfield.focused) \|\|\n (!!this.inputPhoneComponent && this.inputPhoneComponent.focused)\n );\n }\n\n public get inputPhoneCountryCode(): string {\n return tuiIsoToCountryCode(this.countriesMasks, this.countryIsoCode);\n }\n\n public get phoneMaskAfterCountryCode(): string {\n const countryCode = this.inputPhoneCountryCode;\n\n return this.calculateMaskAfterCountryCode(\n this.countriesMasks[this.countryIsoCode],\n countryCode,\n );\n }\n\n public onPaste(event: ClipboardEvent \| DragEvent): void {\n let value = tuiExtractValueFromEvent(event).replace(TUI_NON_DIGITS_REGEXP, '');\n const countryIsoCode = this.extractCountryCodePipe.transform(\n value,\n this.countries,\n );\n\n if (!countryIsoCode) {\n this.value = `${this.inputPhoneCountryCode}${value}`\n .replaceAll(MASK_SYMBOLS, '')\n .slice(\n 0,\n tuiGetMaxAllowedPhoneLength(this.countriesMasks, this.countryIsoCode),\n );\n\n return;\n }\n\n if (countryIsoCode === 'RU') {\n value = value.replace(/^8/, '7');\n }\n\n this.updateCountryIsoCode(countryIsoCode);\n this.value = `${CHAR_PLUS}${value}`;\n }\n\n public onItemClick(isoCode: TuiCountryIsoCode): void {\n this.open = false;\n this.updateCountryIsoCode(isoCode);\n // recalculates mask inside inputPhone to prevent isoCode conflict\n this.cdr.detectChanges();\n\n const maxLength = tuiGetMaxAllowedPhoneLength(this.countriesMasks, isoCode);\n\n if (this.value.length > maxLength) {\n this.value = this.value.slice(0, maxLength);\n }\n\n if (this.nativeFocusableElement) {\n this.nativeFocusableElement.focus();\n }\n }\n\n public override setDisabledState(): void {\n super.setDisabledState();\n this.close();\n }\n\n protected get size(): TuiSizeL \| TuiSizeS {\n return this.textfieldSize.size;\n }\n\n protected onActiveZone(active: boolean): void {\n this.updateFocused(active);\n }\n\n protected getFallbackValue(): string {\n return '';\n }\n\n @tuiPure\n private calculateMaskAfterCountryCode(mask: string, countryCode: string): string {\n return mask.replace(countryCode, '').trim();\n }\n\n private close(): void {\n this.open = false;\n }\n\n private updateCountryIsoCode(code: TuiCountryIsoCode): void {\n this.countryIsoCode = code;\n this.countryIsoCodeChange.emit(code);\n }\n}\n","<div\n ngIf=\"countriesNames$ \| async as countriesNames\"\n tuiDropdownOpenMonitor\n [tuiDropdown]=\"dropdown\"\n [tuiDropdownEnabled]=\"!readOnly\"\n [(tuiDropdownOpen)]=\"open\"\n (tuiActiveZoneChange)=\"onActiveZone($event)\"\n>\n <div tuiGroup>\n <tui-primitive-textfield\n tuiHintContent=\"\"\n tuiTextfieldPostfix=\"\"\n tuiTextfieldPrefix=\"\"\n class=\"t-country-select\"\n [disabled]=\"disabled\"\n [editable]=\"false\"\n [focusable]=\"focusable\"\n [pseudoFocus]=\"open \|\| null\"\n [readOnly]=\"readOnly\"\n [style.flex]=\"'0 0 auto'\"\n [tuiTextfieldCustomContent]=\"countryValueContent\"\n [tuiTextfieldIcon]=\"icon\"\n [tuiTextfieldLabelOutside]=\"true\"\n />\n <tui-input-phone\n class=\"t-input-phone\"\n [countryCode]=\"inputPhoneCountryCode\"\n [disabled]=\"disabled\"\n [focusable]=\"focusable\"\n [ngModelOptions]=\"{standalone: true}\"\n [phoneMaskAfterCountryCode]=\"phoneMaskAfterCountryCode\"\n [pseudoFocus]=\"pseudoFocus\"\n [pseudoHover]=\"pseudoHover\"\n [pseudoInvalid]=\"computedInvalid\"\n [readOnly]=\"readOnly\"\n [style.flex]=\"'0 0 auto'\"\n [(ngModel)]=\"value\"\n >\n <ng-content />\n <input\n autocomplete=\"new-password\"\n tuiTextfieldLegacy\n />\n </tui-input-phone>\n </div>\n\n <ng-template #dropdown>\n <tui-data-list>\n <button\n ngFor=\"let item of countries\"\n tuiOption\n type=\"button\"\n (click)=\"onItemClick(item)\"\n >\n <img\n alt=\"\"\n class=\"t-flag\"\n [src]=\"item \| tuiFlag\"\n />\n <span class=\"t-country-item-name\">\n {{ countriesNames[item] }}\n </span>\n <span class=\"t-country-item-code\">\n {{ item \| tuiIsoToCountryCode }}\n </span>\n </button>\n </tui-data-list>\n </ng-template>\n\n <ng-template #countryValueContent>\n <img\n class=\"t-flag t-flag_select\"\n [alt]=\"countriesNames[countryIsoCode]\"\n [src]=\"countryIsoCode \| tuiFlag\"\n />\n </ng-template>\n\n <ng-template #icon>\n <div tuiAppearance=\"icon\">\n <ng-container polymorpheusOutlet=\"arrow\" />\n </div>\n </ng-template>\n</div>\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"taiga-ui-legacy-components-input-phone-international.mjs","sources":["../../../projects/legacy/components/input-phone-international/input-phone-international.options.ts","../../../projects/legacy/components/input-phone-international/utils/extract-value-from-event.ts","../../../projects/legacy/components/input-phone-international/input-phone-international.component.ts","../../../projects/legacy/components/input-phone-international/input-phone-international.template.html","../../../projects/legacy/components/input-phone-international/taiga-ui-legacy-components-input-phone-international.ts"],"sourcesContent":["import type {Provider} from '@angular/core';\nimport {InjectionToken} from '@angular/core';\nimport {tuiProvideOptions} from '@taiga-ui/cdk/utils/miscellaneous';\nimport type {TuiCountryIsoCode} from '@taiga-ui/i18n/types';\n\n/*\n @deprecated: drop in v5.0 use {@link TuiInputPhoneInternational}\n * https://taiga-ui.dev/components/input-phone-international\n /\nexport interface TuiInputPhoneInternationalOptions {\n readonly countries: readonly TuiCountryIsoCode[];\n readonly countryIsoCode: TuiCountryIsoCode;\n}\n\n/\n @deprecated: drop in v5.0 use {@link TuiInputPhoneInternational}\n * https://taiga-ui.dev/components/input-phone-international\n /\nexport const TUI_INPUT_PHONE_INTERNATIONAL_DEFAULT_OPTIONS: TuiInputPhoneInternationalOptions =\n {\n countries: [],\n countryIsoCode: 'RU',\n };\n\n/\n @deprecated: drop in v5.0 use {@link TuiInputPhoneInternational}\n * https://taiga-ui.dev/components/input-phone-international\n /\nexport const TUI_INPUT_PHONE_INTERNATIONAL_OPTIONS = new InjectionToken(\n ngDevMode ? 'TUI_INPUT_PHONE_INTERNATIONAL_OPTIONS' : '',\n {\n factory: () => TUI_INPUT_PHONE_INTERNATIONAL_DEFAULT_OPTIONS,\n },\n);\n\n/\n @deprecated: drop in v5.0 use {@link TuiInputPhoneInternational}\n * https://taiga-ui.dev/components/input-phone-international\n /\nexport function tuiInputPhoneInternationalOptionsProvider(\n options: Partial<TuiInputPhoneInternationalOptions>,\n): Provider {\n return tuiProvideOptions(\n TUI_INPUT_PHONE_INTERNATIONAL_OPTIONS,\n options,\n TUI_INPUT_PHONE_INTERNATIONAL_DEFAULT_OPTIONS,\n );\n}\n","import {tuiGetClipboardDataText} from '@taiga-ui/cdk/utils/dom';\n\n/\n @deprecated: drop in v5.0\n /\nexport function tuiExtractValueFromEvent(event: ClipboardEvent \| DragEvent): string {\n return 'dataTransfer' in event\n ? event.dataTransfer?.getData('text/plain') \|\| ''\n : tuiGetClipboardDataText(event);\n}\n","import {CommonModule} from '@angular/common';\nimport {\n ChangeDetectionStrategy,\n Component,\n EventEmitter,\n inject,\n Input,\n Output,\n ViewChild,\n} from '@angular/core';\nimport {FormsModule} from '@angular/forms';\nimport {CHAR_PLUS, TUI_NON_DIGITS_REGEXP} from '@taiga-ui/cdk/constants';\nimport type {TuiContext} from '@taiga-ui/cdk/types';\nimport {tuiPure} from '@taiga-ui/cdk/utils/miscellaneous';\nimport {TuiButton} from '@taiga-ui/core/components/button';\nimport {TuiDataList} from '@taiga-ui/core/components/data-list';\nimport {TuiAppearance} from '@taiga-ui/core/directives/appearance';\nimport {TuiDropdown, TuiDropdownFixed} from '@taiga-ui/core/directives/dropdown';\nimport {TuiGroup} from '@taiga-ui/core/directives/group';\nimport {TuiHint} from '@taiga-ui/core/directives/hint';\nimport {TuiFlagPipe} from '@taiga-ui/core/pipes/flag';\nimport type {TuiSizeL, TuiSizeM, TuiSizeS} from '@taiga-ui/core/types';\nimport type {TuiCountryIsoCode} from '@taiga-ui/i18n/types';\nimport {TUI_COUNTRIES} from '@taiga-ui/kit/tokens';\nimport {AbstractTuiControl, tuiAsControl} from '@taiga-ui/legacy/classes';\nimport {TUI_ARROW, TuiArrowComponent} from '@taiga-ui/legacy/components/arrow';\nimport {\n TuiInputPhoneComponent,\n TuiInputPhoneModule,\n} from '@taiga-ui/legacy/components/input-phone';\nimport {\n TuiPrimitiveTextfieldComponent,\n TuiPrimitiveTextfieldModule,\n} from '@taiga-ui/legacy/components/primitive-textfield';\nimport {\n TUI_TEXTFIELD_SIZE,\n TuiLegacyDropdownOpenMonitorDirective,\n TuiTextfieldControllerModule,\n} from '@taiga-ui/legacy/directives';\nimport {TuiIsoToCountryCodePipe, TuiToCountryCodePipe} from '@taiga-ui/legacy/pipes';\nimport type {TuiFocusableElementAccessor} from '@taiga-ui/legacy/tokens';\nimport {TUI_COUNTRIES_MASKS, tuiAsFocusableItemAccessor} from '@taiga-ui/legacy/tokens';\nimport {tuiGetMaxAllowedPhoneLength, tuiIsoToCountryCode} from '@taiga-ui/legacy/utils';\nimport type {PolymorpheusContent} from '@taiga-ui/polymorpheus';\nimport {PolymorpheusOutlet, PolymorpheusTemplate} from '@taiga-ui/polymorpheus';\n\nimport {TUI_INPUT_PHONE_INTERNATIONAL_OPTIONS} from './input-phone-international.options';\nimport {tuiExtractValueFromEvent} from './utils/extract-value-from-event';\n\nconst MASK_SYMBOLS = /[ \\-_()]/g;\n\n/\n @deprecated: drop in v5.0 use {@link TuiInputPhoneInternational}\n * https://taiga-ui.dev/components/input-phone-international\n /\n@Component({\n standalone: true,\n selector: 'tui-input-phone-international',\n imports: [\n CommonModule,\n FormsModule,\n PolymorpheusOutlet,\n PolymorpheusTemplate,\n TuiAppearance,\n TuiArrowComponent,\n TuiButton,\n TuiDataList,\n TuiDropdown,\n TuiFlagPipe,\n TuiGroup,\n TuiHint,\n TuiInputPhoneModule,\n TuiIsoToCountryCodePipe,\n TuiLegacyDropdownOpenMonitorDirective,\n TuiPrimitiveTextfieldModule,\n TuiTextfieldControllerModule,\n ],\n templateUrl: './input-phone-international.template.html',\n styleUrls: ['./input-phone-international.style.less'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n providers: [\n tuiAsFocusableItemAccessor(TuiInputPhoneInternationalComponent),\n tuiAsControl(TuiInputPhoneInternationalComponent),\n TuiToCountryCodePipe,\n ],\n hostDirectives: [TuiDropdownFixed],\n host: {\n '[attr.data-size]': 'size',\n '(paste.capture.prevent.stop)': 'onPaste($event)',\n '(drop.capture.prevent.stop)': 'onPaste($event)',\n },\n})\nexport class TuiInputPhoneInternationalComponent\n extends AbstractTuiControl<string>\n implements TuiFocusableElementAccessor\n{\n @ViewChild(TuiInputPhoneComponent)\n private readonly inputPhoneComponent?: TuiInputPhoneComponent;\n\n @ViewChild(TuiPrimitiveTextfieldComponent)\n private readonly primitiveTextfield?: TuiPrimitiveTextfieldComponent;\n\n private readonly options = inject(TUI_INPUT_PHONE_INTERNATIONAL_OPTIONS);\n private readonly extractCountryCodePipe = inject(TuiToCountryCodePipe);\n private readonly textfieldSize = inject(TUI_TEXTFIELD_SIZE);\n\n protected open = false;\n protected readonly countriesNames$ = inject(TUI_COUNTRIES);\n protected readonly countriesMasks = inject(TUI_COUNTRIES_MASKS);\n protected readonly arrow: PolymorpheusContent<\n TuiContext<TuiSizeL \| TuiSizeM \| TuiSizeS>\n > = TUI_ARROW;\n\n @Input()\n public countries = this.options.countries;\n\n @Output()\n public readonly countryIsoCodeChange = new EventEmitter<TuiCountryIsoCode>();\n\n public countryIsoCode = this.options.countryIsoCode;\n\n @Input('countryIsoCode')\n public set isoCode(code: TuiCountryIsoCode) {\n if (this.countryIsoCode === code) {\n return;\n }\n\n this.inputPhoneComponent?.writeValue(this.value);\n this.countryIsoCode = code;\n }\n\n public get nativeFocusableElement(): HTMLElement \| null {\n return this.inputPhoneComponent && !this.computedDisabled\n ? this.inputPhoneComponent.nativeFocusableElement\n : null;\n }\n\n public get focused(): boolean {\n return (\n (!!this.primitiveTextfield && this.primitiveTextfield.focused) \|\|\n (!!this.inputPhoneComponent && this.inputPhoneComponent.focused)\n );\n }\n\n public get inputPhoneCountryCode(): string {\n return tuiIsoToCountryCode(this.countriesMasks, this.countryIsoCode);\n }\n\n public get phoneMaskAfterCountryCode(): string {\n const countryCode = this.inputPhoneCountryCode;\n\n return this.calculateMaskAfterCountryCode(\n this.countriesMasks[this.countryIsoCode],\n countryCode,\n );\n }\n\n public onPaste(event: ClipboardEvent \| DragEvent): void {\n let value = tuiExtractValueFromEvent(event).replace(TUI_NON_DIGITS_REGEXP, '');\n const countryIsoCode = this.extractCountryCodePipe.transform(\n value,\n this.countries,\n );\n\n if (!countryIsoCode) {\n this.value = `${this.inputPhoneCountryCode}${value}`\n .replaceAll(MASK_SYMBOLS, '')\n .slice(\n 0,\n tuiGetMaxAllowedPhoneLength(this.countriesMasks, this.countryIsoCode),\n );\n\n return;\n }\n\n if (countryIsoCode === 'RU') {\n value = value.replace(/^8/, '7');\n }\n\n this.updateCountryIsoCode(countryIsoCode);\n this.value = `${CHAR_PLUS}${value}`;\n }\n\n public onItemClick(isoCode: TuiCountryIsoCode): void {\n this.open = false;\n this.updateCountryIsoCode(isoCode);\n // recalculates mask inside inputPhone to prevent isoCode conflict\n this.cdr.detectChanges();\n\n const maxLength = tuiGetMaxAllowedPhoneLength(this.countriesMasks, isoCode);\n\n if (this.value.length > maxLength) {\n this.value = this.value.slice(0, maxLength);\n }\n\n if (this.nativeFocusableElement) {\n this.nativeFocusableElement.focus();\n }\n }\n\n public override setDisabledState(): void {\n super.setDisabledState();\n this.close();\n }\n\n protected get size(): TuiSizeL \| TuiSizeS {\n return this.textfieldSize.size;\n }\n\n protected onActiveZone(active: boolean): void {\n this.updateFocused(active);\n }\n\n protected getFallbackValue(): string {\n return '';\n }\n\n @tuiPure\n private calculateMaskAfterCountryCode(mask: string, countryCode: string): string {\n return mask.replace(countryCode, '').trim();\n }\n\n private close(): void {\n this.open = false;\n }\n\n private updateCountryIsoCode(code: TuiCountryIsoCode): void {\n this.countryIsoCode = code;\n this.countryIsoCodeChange.emit(code);\n }\n}\n","<div\n ngIf=\"countriesNames$ \| async as countriesNames\"\n tuiDropdownOpenMonitor\n [tuiDropdown]=\"dropdown\"\n [tuiDropdownEnabled]=\"!readOnly\"\n [(tuiDropdownOpen)]=\"open\"\n (tuiActiveZoneChange)=\"onActiveZone($event)\"\n>\n <div tuiGroup>\n <tui-primitive-textfield\n tuiHintContent=\"\"\n tuiTextfieldPostfix=\"\"\n tuiTextfieldPrefix=\"\"\n class=\"t-country-select\"\n [disabled]=\"disabled\"\n [editable]=\"false\"\n [focusable]=\"focusable\"\n [pseudoFocus]=\"open \|\| null\"\n [readOnly]=\"readOnly\"\n [style.flex]=\"'0 0 auto'\"\n [tuiTextfieldCustomContent]=\"countryValueContent\"\n [tuiTextfieldIcon]=\"icon\"\n [tuiTextfieldLabelOutside]=\"true\"\n />\n <tui-input-phone\n class=\"t-input-phone\"\n [countryCode]=\"inputPhoneCountryCode\"\n [disabled]=\"disabled\"\n [focusable]=\"focusable\"\n [ngModelOptions]=\"{standalone: true}\"\n [phoneMaskAfterCountryCode]=\"phoneMaskAfterCountryCode\"\n [pseudoFocus]=\"pseudoFocus\"\n [pseudoHover]=\"pseudoHover\"\n [pseudoInvalid]=\"computedInvalid\"\n [readOnly]=\"readOnly\"\n [style.flex]=\"'0 0 auto'\"\n [(ngModel)]=\"value\"\n >\n <ng-content />\n <input\n autocomplete=\"new-password\"\n tuiTextfieldLegacy\n />\n </tui-input-phone>\n </div>\n\n <ng-template #dropdown>\n <tui-data-list>\n <button\n ngFor=\"let item of countries\"\n tuiOption\n type=\"button\"\n (click)=\"onItemClick(item)\"\n >\n <img\n alt=\"\"\n class=\"t-flag\"\n [src]=\"item \| tuiFlag\"\n />\n <span class=\"t-country-item-name\">\n {{ countriesNames[item] }}\n </span>\n <span class=\"t-country-item-code\">\n {{ item \| tuiIsoToCountryCode }}\n </span>\n </button>\n </tui-data-list>\n </ng-template>\n\n <ng-template #countryValueContent>\n <img\n class=\"t-flag t-flag_select\"\n [alt]=\"countriesNames[countryIsoCode]\"\n [src]=\"countryIsoCode \| tuiFlag\"\n />\n </ng-template>\n\n <ng-template #icon>\n <div tuiAppearance=\"icon\">\n <ng-container polymorpheusOutlet=\"arrow\" />\n </div>\n </ng-template>\n</div>\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/taiga-ui-legacy-components-input-tag.mjs CHANGED Viewed

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