@taiga-ui/legacy 4.65.0 → 5.0.0-rc.0

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

@@ -1,524 +0,0 @@
-import * as i0 from '@angular/core';
-import { InjectionToken, inject, EventEmitter, signal, TemplateRef, ElementRef, Component, ChangeDetectionStrategy, ViewChild, ViewChildren, ContentChild, Input, Output, NgModule } from '@angular/core';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { EMPTY_QUERY, TUI_TRUE_HANDLER, TUI_FALSE_HANDLER } from '@taiga-ui/cdk/constants';
-import { tuiInjectElement, tuiRetargetedBoundaryCrossing, tuiGetActualTarget, tuiIsElement, tuiGetClipboardDataText } from '@taiga-ui/cdk/utils/dom';
-import { tuiIsNativeFocusedIn } from '@taiga-ui/cdk/utils/focus';
-import { tuiProvideOptions, tuiIsString, tuiArrayRemove } from '@taiga-ui/cdk/utils/miscellaneous';
-import { tuiAsDataListHost, TuiDataListDirective } from '@taiga-ui/core/components/data-list';
-import * as i5 from '@taiga-ui/core/components/scrollbar';
-import { TuiScrollbar } from '@taiga-ui/core/components/scrollbar';
-import { TUI_TEXTFIELD_OPTIONS } from '@taiga-ui/core/components/textfield';
-import * as i1 from '@taiga-ui/core/directives/dropdown';
-import { TuiDropdownOpen, TuiDropdownFixed, TuiDropdown } from '@taiga-ui/core/directives/dropdown';
-import { TuiHintOptionsDirective } from '@taiga-ui/core/directives/hint';
-import { TUI_COMMON_ICONS } from '@taiga-ui/core/tokens';
-import { AbstractTuiMultipleControl, tuiAsControl } from '@taiga-ui/legacy/classes';
-import * as i8 from '@taiga-ui/legacy/directives';
-import { TUI_TEXTFIELD_WATCHED_CONTROLLER, TEXTFIELD_CONTROLLER_PROVIDER, TuiWrapperModule, TuiLegacyDropdownOpenMonitorDirective } from '@taiga-ui/legacy/directives';
-import { tuiAsFocusableItemAccessor } from '@taiga-ui/legacy/tokens';
-import * as i4 from '@taiga-ui/polymorpheus';
-import { PolymorpheusOutlet, PolymorpheusTemplate } from '@taiga-ui/polymorpheus';
-import { timer } from 'rxjs';
-import * as i2 from '@angular/common';
-import { CommonModule } from '@angular/common';
-import * as i3 from '@angular/forms';
-import { FormsModule } from '@angular/forms';
-import * as i6 from '@taiga-ui/legacy/components/tooltip';
-import { TuiTooltipModule } from '@taiga-ui/legacy/components/tooltip';
-import * as i7 from '@taiga-ui/legacy/components/tag';
-import { TuiTagModule } from '@taiga-ui/legacy/components/tag';
-import * as i9 from '@taiga-ui/core/directives/appearance';
-import { TuiAppearance } from '@taiga-ui/core/directives/appearance';
-import * as i10 from '@taiga-ui/core/components/icon';
-import { TuiIcon } from '@taiga-ui/core/components/icon';
-import { TuiHovered } from '@taiga-ui/cdk/directives/hovered';
-import { TuiScrollService } from '@taiga-ui/cdk/services';
-
-/**
- * TODO(v5): delete it
- * @deprecated use {@link https://taiga-ui.dev/components/input-chip TuiInputChip} instead
- */
-const TUI_INPUT_TAG_DEFAULT_OPTIONS = {
-    autoColor: false,
-    separator: ',',
-    tagStatus: 'default',
-    uniqueTags: true,
-};
-/**
- * @deprecated: drop in v5.0
- * Default parameters for InputTag component
- */
-const TUI_INPUT_TAG_OPTIONS = new InjectionToken(ngDevMode ? 'TUI_INPUT_TAG_OPTIONS' : '', {
-    factory: () => TUI_INPUT_TAG_DEFAULT_OPTIONS,
-});
-/**
- * TODO(v5): delete it
- * @deprecated use {@link https://taiga-ui.dev/components/input-chip TuiInputChip} instead
- */
-function tuiInputTagOptionsProvider(options) {
-    return tuiProvideOptions(TUI_INPUT_TAG_OPTIONS, options, TUI_INPUT_TAG_DEFAULT_OPTIONS);
-}
-
-const TAG_SIZE_REM = {
-    s: 1.25,
-    m: 1.5,
-    l: 2,
-};
-const LINE_HEIGHT_REM = {
-    s: 1,
-    m: 1.25,
-    l: 1.25,
-};
-const TAG_VERTICAL_SPACE_REM = 0.125;
-/**
- * TODO(v5): delete it
- * @deprecated use {@link https://taiga-ui.dev/components/input-chip TuiInputChip} instead
- */
-class TuiInputTagComponent extends AbstractTuiMultipleControl {
-    constructor() {
-        super(...arguments);
-        this.tags = EMPTY_QUERY;
-        this.el = tuiInjectElement();
-        this.options = inject(TUI_INPUT_TAG_OPTIONS);
-        this.textfieldOptions = inject(TUI_TEXTFIELD_OPTIONS);
-        this.hintOptions = inject(TuiHintOptionsDirective, { optional: true });
-        this.controller = inject(TUI_TEXTFIELD_WATCHED_CONTROLLER);
-        this.icons = inject(TUI_COMMON_ICONS);
-        this.status = this.options.tagStatus;
-        this.open = false;
-        this.separator = this.options.separator;
-        this.search = '';
-        this.editable = true;
-        this.tagValidator = TUI_TRUE_HANDLER;
-        this.rows = Infinity;
-        this.inputHidden = false;
-        this.uniqueTags = this.options.uniqueTags;
-        this.autoColor = this.options.autoColor;
-        this.maxLength = null;
-        this.placeholder = '';
-        this.removable = true;
-        this.disabledItemHandler = TUI_FALSE_HANDLER;
-        this.searchChange = new EventEmitter();
-        this.pseudoOpen = signal(false);
-    }
-    set pseudoFocusedSetter(value) {
-        if (!value && !this.focused) {
-            this.scrollTo(0);
-        }
-        this.pseudoFocus = value;
-    }
-    /**
-     * @deprecated hack
-     */
-    set setPseudoOpen(value) {
-        this.pseudoOpen.set(value);
-    }
-    get labelOutside() {
-        const { size, labelOutside } = this.controller;
-        return this.appearance === 'table' || size === 's' || labelOutside;
-    }
-    get size() {
-        return this.controller.size;
-    }
-    get nativeFocusableElement() {
-        return !this.focusableElement || this.computedDisabled
-            ? null
-            : this.focusableElement.nativeElement;
-    }
-    get hasValue() {
-        return !!this.value.length || this.hasNativeValue;
-    }
-    get hasExampleText() {
-        return (!!this.nativeFocusableElement?.placeholder &&
-            this.computedFocused &&
-            !this.hasValue &&
-            !this.readOnly);
-    }
-    get hasPlaceholder() {
-        return (!this.labelOutside ||
-            (!this.hasValue && (!this.hasExampleText || this.inputHidden)));
-    }
-    get focused() {
-        return tuiIsNativeFocusedIn(this.el) || !!this.dropdown?.tuiDropdownOpen;
-    }
-    get tagsEmpty() {
-        return (((!this.focused || this.inputHidden) &&
-            !this.value.length &&
-            !this.search?.trim()?.length &&
-            !this.placeholder) ||
-            !!this.valueContent);
-    }
-    onTagEdited(value, index) {
-        this.focusInput(value === '');
-        this.value = this.filterValue(this.value
-            .map((tag, tagIndex) => tagIndex !== index
-            ? tag
-            : value
-                .split(this.separator)
-                .map((tag) => tag.trim())
-                .filter(Boolean))
-            .reduce((result, item) => result.concat(item), []));
-    }
-    handleOption(item) {
-        this.focusInput();
-        this.updateSearch('');
-        this.value = this.filterValue(this.value.concat(item));
-        this.open = false;
-        this.scrollTo();
-    }
-    setDisabledState() {
-        super.setDisabledState();
-        this.open = false;
-    }
-    get iconStart() {
-        return this.controller.iconStart;
-    }
-    get appearance() {
-        return this.textfieldOptions.appearance() === 'table'
-            ? 'table'
-            : this.controller.appearance;
-    }
-    get expandable() {
-        return this.rows > 1;
-    }
-    get icon() {
-        return this.controller.icon;
-    }
-    get iconCleaner() {
-        return this.controller.options.iconCleaner;
-    }
-    get hasCleaner() {
-        return this.controller.cleaner && this.hasValue && this.interactive;
-    }
-    get hasNativeValue() {
-        return !!this.search;
-    }
-    get placeholderRaised() {
-        return (!this.labelOutside &&
-            ((this.computedFocused && !this.readOnly) || this.hasValue));
-    }
-    get hasRightIcons() {
-        return (this.hasCleaner ||
-            !!this.icon ||
-            (!!this.hintOptions?.content && !this.computedDisabled));
-    }
-    get showHint() {
-        return (!!this.hintOptions?.content &&
-            (this.controller.options.hintOnDisabled || !this.computedDisabled));
-    }
-    get canOpen() {
-        return this.interactive && !!this.datalist;
-    }
-    get computeMaxHeight() {
-        return this.expandable ? this.rows * this.lineHeight : null;
-    }
-    onFocusInOut() {
-        this.cdr.detectChanges();
-    }
-    detectRetargetFromLabel(event) {
-        if (tuiRetargetedBoundaryCrossing(event)) {
-            event.stopImmediatePropagation();
-        }
-    }
-    getLeftContent(tag) {
-        return !this.tagValidator(tag) && this.errorIconTemplate
-            ? this.errorIconTemplate
-            : '';
-    }
-    onCleanerClick() {
-        this.updateSearch('');
-        this.clear();
-        this.focusInput();
-    }
-    onActiveZone(active) {
-        this.open = false;
-        this.addTag();
-        this.updateFocused(active);
-        if (!active && !this.computedFocused) {
-            this.scrollTo(0);
-        }
-    }
-    onMouseDown(event) {
-        const actualTarget = tuiGetActualTarget(event);
-        if (!this.focusableElement ||
-            actualTarget === this.focusableElement.nativeElement ||
-            !tuiIsElement(event.target) ||
-            this.cleanerSvg?.nativeElement.contains(event.target) ||
-            (this.tagsContainer &&
-                actualTarget !== this.tagsContainer.nativeElement &&
-                this.tagsContainer.nativeElement.contains(actualTarget))) {
-            return;
-        }
-        event.preventDefault();
-        this.focusInput();
-    }
-    onFieldKeyDownBackspace(event) {
-        if (!this.labelOutside && !this.hasNativeValue && this.value.length) {
-            this.deleteLastEnabledItem();
-        }
-        else {
-            this.onFieldKeyDownArrowLeft(event);
-        }
-    }
-    onFieldKeyDownArrowLeft(event) {
-        if (!this.labelOutside || this.hasNativeValue || !this.value.length) {
-            return;
-        }
-        event.preventDefault();
-        this.tags.last.nativeElement.focus();
-    }
-    onFieldKeyDownEnter() {
-        this.addTag();
-        this.scrollTo();
-    }
-    onTagKeyDownArrowLeft(currentIndex) {
-        if (currentIndex > 0) {
-            this.onScrollKeyDown(currentIndex, -1);
-        }
-    }
-    onTagKeyDownArrowRight(currentIndex) {
-        if (currentIndex === this.value.length - 1) {
-            this.focusInput();
-        }
-        else {
-            this.onScrollKeyDown(currentIndex, 1);
-        }
-    }
-    onInput(value) {
-        const array = value.split(this.separator);
-        const tags = array
-            .map((item) => this.clippedValue(item.trim()))
-            .filter((item) => item.length > 0);
-        const validated = tags.filter((tag) => !this.disabledItemHandler(tag));
-        const invalid = tags.filter((tag) => this.disabledItemHandler(tag));
-        if (array.length > 1) {
-            const search = invalid.length
-                ? invalid.join(tuiIsString(this.separator) ? this.separator : ',')
-                : '';
-            this.updateSearch(this.clippedValue(search));
-            this.value = this.filterValue([...this.value, ...validated]);
-        }
-        else {
-            this.updateSearch(this.clippedValue(value));
-        }
-        this.open = this.hasNativeValue;
-    }
-    onPaste(event) {
-        const pasted = tuiGetClipboardDataText(event);
-        this.onInput(pasted || '');
-    }
-    onDrop({ dataTransfer }) {
-        if (dataTransfer) {
-            this.onInput(dataTransfer.getData('text') || '');
-        }
-    }
-    trackByFn(_, tag) {
-        // Actually tag has TuiStringifiableItem type not string
-        return tag;
-    }
-    get lineHeight() {
-        return this.labelOutside
-            ? TAG_SIZE_REM[this.controller.size] + 2 * TAG_VERTICAL_SPACE_REM
-            : LINE_HEIGHT_REM[this.controller.size];
-    }
-    scrollTo(scrollLeft = this.scrollBar?.nativeElement.scrollWidth) {
-        // Allow change detection to run and add new tag to DOM
-        timer(0)
-            .pipe(takeUntilDestroyed(this.destroyRef))
-            .subscribe(() => {
-            if (this.scrollBar) {
-                this.scrollBar.nativeElement.scrollLeft = scrollLeft || 0;
-            }
-        });
-    }
-    filterValue(value) {
-        const seen = new Set();
-        return value
-            .reverse()
-            .filter((item) => !this.uniqueTags || (item && !seen.has(item) && seen.add(item)))
-            .reverse();
-    }
-    onScrollKeyDown(currentIndex, flag) {
-        const tag = this.tags.find((_item, index) => index === currentIndex + flag);
-        if (!tag || !this.scrollBar) {
-            return;
-        }
-        tag.nativeElement.focus();
-        if (flag * this.scrollBar.nativeElement.clientWidth -
-            flag * tag.nativeElement.offsetLeft -
-            tag.nativeElement.clientWidth <
-            0) {
-            this.scrollBar.nativeElement.scrollLeft +=
-                flag * tag.nativeElement.clientWidth;
-        }
-    }
-    updateSearch(value) {
-        if (this.focusableElement) {
-            this.focusableElement.nativeElement.value = value;
-        }
-        this.search = value;
-        this.searchChange.emit(value);
-    }
-    addTag() {
-        const inputValue = this.search?.trim() ?? '';
-        if (!inputValue || this.disabledItemHandler(inputValue)) {
-            return;
-        }
-        this.updateSearch('');
-        this.value = this.filterValue(this.value.concat(inputValue));
-    }
-    deleteLastEnabledItem() {
-        for (let index = this.value.length - 1; index >= 0; index--) {
-            if (!this.disabledItemHandler(this.value[index] ?? '')) {
-                this.value = tuiArrayRemove(this.value, index);
-                break;
-            }
-        }
-    }
-    focusInput(preventScroll = false) {
-        this.nativeFocusableElement?.focus({ preventScroll });
-    }
-    clippedValue(value) {
-        return value.slice(0, this.maxLength || value.length);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiInputTagComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiInputTagComponent, selector: "tui-input-tag", inputs: { separator: "separator", search: "search", editable: "editable", tagValidator: "tagValidator", rows: "rows", inputHidden: "inputHidden", uniqueTags: "uniqueTags", autoColor: "autoColor", maxLength: "maxLength", placeholder: "placeholder", removable: "removable", disabledItemHandler: "disabledItemHandler", pseudoFocusedSetter: ["pseudoFocused", "pseudoFocusedSetter"], setPseudoOpen: ["pseudoOpen", "setPseudoOpen"] }, outputs: { searchChange: "searchChange" }, host: { listeners: { "focusin.capture.zoneless": "onFocusInOut()", "focusout.capture.zoneless": "onFocusInOut()" }, properties: { "attr.data-size": "size", "class._icon-start": "iconStart", "class._expandable": "expandable", "class._label-outside": "labelOutside" } }, providers: [
-            tuiAsFocusableItemAccessor(TuiInputTagComponent),
-            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 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiInputTagComponent, decorators: [{
-            type: Component,
-            args: [{ standalone: false, selector: 'tui-input-tag', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
-                        tuiAsFocusableItemAccessor(TuiInputTagComponent),
-                        tuiAsControl(TuiInputTagComponent),
-                        tuiAsDataListHost(TuiInputTagComponent),
-                        TEXTFIELD_CONTROLLER_PROVIDER,
-                    ], hostDirectives: [TuiDropdownFixed], host: {
-                        '[attr.data-size]': 'size',
-                        '[class._icon-start]': 'iconStart',
-                        '[class._expandable]': 'expandable',
-                        '[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"] }]
-        }], propDecorators: { dropdown: [{
-                type: ViewChild,
-                args: [TuiDropdownOpen]
-            }], focusableElement: [{
-                type: ViewChild,
-                args: ['focusableElement']
-            }], tagsContainer: [{
-                type: ViewChild,
-                args: ['tagsContainer']
-            }], tags: [{
-                type: ViewChildren,
-                args: ['tag', { read: ElementRef }]
-            }], cleanerSvg: [{
-                type: ViewChild,
-                args: ['cleaner', { read: ElementRef }]
-            }], scrollBar: [{
-                type: ViewChild,
-                args: [TuiScrollbar, { read: ElementRef }]
-            }], datalist: [{
-                type: ContentChild,
-                args: [TuiDataListDirective, { read: TemplateRef }]
-            }], valueContent: [{
-                type: ContentChild,
-                args: [PolymorpheusOutlet]
-            }], errorIconTemplate: [{
-                type: ViewChild,
-                args: ['errorIcon']
-            }], separator: [{
-                type: Input
-            }], search: [{
-                type: Input
-            }], editable: [{
-                type: Input
-            }], tagValidator: [{
-                type: Input
-            }], rows: [{
-                type: Input
-            }], inputHidden: [{
-                type: Input
-            }], uniqueTags: [{
-                type: Input
-            }], autoColor: [{
-                type: Input
-            }], maxLength: [{
-                type: Input
-            }], placeholder: [{
-                type: Input
-            }], removable: [{
-                type: Input
-            }], disabledItemHandler: [{
-                type: Input
-            }], searchChange: [{
-                type: Output
-            }], pseudoFocusedSetter: [{
-                type: Input,
-                args: ['pseudoFocused']
-            }], setPseudoOpen: [{
-                type: Input,
-                args: ['pseudoOpen']
-            }] } });
-
-/**
- * TODO(v5): delete it
- * @deprecated use {@link https://taiga-ui.dev/components/input-chip TuiInputChip} instead
- */
-class TuiInputTagModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiInputTagModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: TuiInputTagModule, declarations: [TuiInputTagComponent], imports: [CommonModule,
-            FormsModule,
-            PolymorpheusOutlet,
-            PolymorpheusTemplate,
-            TuiHovered,
-            TuiScrollbar,
-            TuiTooltipModule,
-            TuiTagModule,
-            TuiWrapperModule,
-            TuiLegacyDropdownOpenMonitorDirective,
-            TuiAppearance,
-            TuiIcon, i1.TuiDropdownOptionsDirective, i1.TuiDropdownDriverDirective, i1.TuiDropdownDirective, i1.TuiDropdownComponent, i1.TuiDropdownOpen, i1.TuiDropdownOpenLegacy, i1.TuiDropdownPortal, i1.TuiDropdownManual, i1.TuiDropdownHover, i1.TuiDropdownContext, i1.TuiDropdownPosition, i1.TuiDropdownPositionSided, i1.TuiDropdownSelection], exports: [TuiInputTagComponent, i1.TuiDropdownOptionsDirective, i1.TuiDropdownDriverDirective, i1.TuiDropdownDirective, i1.TuiDropdownComponent, i1.TuiDropdownOpen, i1.TuiDropdownOpenLegacy, i1.TuiDropdownPortal, i1.TuiDropdownManual, i1.TuiDropdownHover, i1.TuiDropdownContext, i1.TuiDropdownPosition, i1.TuiDropdownPositionSided, i1.TuiDropdownSelection] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiInputTagModule, providers: [TuiScrollService], imports: [CommonModule,
-            FormsModule,
-            TuiScrollbar,
-            TuiTooltipModule,
-            TuiTagModule,
-            TuiWrapperModule,
-            TuiIcon, i1.TuiDropdownComponent] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiInputTagModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        CommonModule,
-                        FormsModule,
-                        PolymorpheusOutlet,
-                        PolymorpheusTemplate,
-                        TuiHovered,
-                        TuiScrollbar,
-                        TuiTooltipModule,
-                        TuiTagModule,
-                        TuiWrapperModule,
-                        TuiLegacyDropdownOpenMonitorDirective,
-                        TuiAppearance,
-                        TuiIcon,
-                        ...TuiDropdown,
-                    ],
-                    declarations: [TuiInputTagComponent],
-                    providers: [TuiScrollService],
-                    exports: [TuiInputTagComponent, ...TuiDropdown],
-                }]
-        }] });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
-export { TUI_INPUT_TAG_DEFAULT_OPTIONS, TUI_INPUT_TAG_OPTIONS, TuiInputTagComponent, TuiInputTagModule, tuiInputTagOptionsProvider };
-//# sourceMappingURL=taiga-ui-legacy-components-input-tag.mjs.map