@taiga-ui/kit 2.61.0 → 3.0.0-rc.2

package/fesm2015/taiga-ui-kit-components-input-tag.js

@@ -1,35 +1,47 @@
-import { __decorate, __param } from 'tslib';
-import { InjectionToken, EventEmitter, Optional, Self, Inject, ChangeDetectorRef, ElementRef, ViewChild, ViewChildren, Input, HostBinding, Output, ContentChild, TemplateRef, Component, ChangeDetectionStrategy, forwardRef, NgModule } from '@angular/core';
+import { __decorate } from 'tslib';
+import * as i0 from '@angular/core';
+import { InjectionToken, EventEmitter, ChangeDetectorRef, ElementRef, TemplateRef, Component, ChangeDetectionStrategy, Optional, Self, Inject, ViewChild, ViewChildren, Input, HostBinding, Output, ContentChild, NgModule } from '@angular/core';
+import * as i6 from '@angular/forms';
 import { NgControl, FormsModule } from '@angular/forms';
-import { AbstractTuiMultipleControl, EMPTY_QUERY, ALWAYS_TRUE_HANDLER, ALWAYS_FALSE_HANDLER, isNativeFocusedIn, getActualTarget, setNativeFocused, typedFromEvent, preventDefault, TuiScrollService, tuiDefaultProp, TUI_FOCUSABLE_ITEM_ACCESSOR, TuiFocusableModule, TuiHoveredModule, TuiActiveZoneModule } from '@taiga-ui/cdk';
-import { TUI_TEXTFIELD_APPEARANCE, TuiModeDirective, TUI_MODE, TuiHintControllerDirective, TUI_HINT_WATCHED_CONTROLLER, TuiTextfieldController, TUI_TEXTFIELD_WATCHED_CONTROLLER, TuiHostedDropdownComponent, TuiScrollbarComponent, TuiDataListDirective, TUI_DATA_LIST_HOST, TEXTFIELD_CONTROLLER_PROVIDER, HINT_CONTROLLER_PROVIDER, MODE_PROVIDER, TuiSvgModule, TuiScrollbarModule, TuiTooltipModule, TuiHostedDropdownModule, TuiWrapperModule } from '@taiga-ui/core';
-import { ALLOWED_SPACE_REGEXP, TuiTagModule } from '@taiga-ui/kit/components/tag';
+import * as i3 from '@taiga-ui/cdk';
+import { AbstractTuiMultipleControl, EMPTY_QUERY, ALWAYS_TRUE_HANDLER, ALWAYS_FALSE_HANDLER, tuiIsNativeFocusedIn, tuiGetActualTarget, tuiIsElement, tuiTypedFromEvent, tuiPreventDefault, tuiArrayRemove, TuiScrollService, tuiAsFocusableItemAccessor, tuiAsControl, tuiDefaultProp, TuiFocusableModule, TuiHoveredModule, TuiActiveZoneModule } from '@taiga-ui/cdk';
+import * as i1 from '@taiga-ui/core';
+import { TUI_TEXTFIELD_APPEARANCE, TuiModeDirective, TUI_MODE, TUI_HINT_WATCHED_CONTROLLER, TUI_TEXTFIELD_WATCHED_CONTROLLER, TuiHostedDropdownComponent, tuiAsDataListHost, TEXTFIELD_CONTROLLER_PROVIDER, HINT_CONTROLLER_PROVIDER, MODE_PROVIDER, TuiDataListDirective, TuiScrollbarComponent, TuiSvgModule, TuiScrollbarModule, TuiTooltipModule, TuiHostedDropdownModule, TuiWrapperModule } from '@taiga-ui/core';
 import { FIXED_DROPDOWN_CONTROLLER_PROVIDER } from '@taiga-ui/kit/providers';
-import { TUI_TAG_STATUS } from '@taiga-ui/kit/tokens';
-import { Subject, merge, Observable } from 'rxjs';
+import * as i7 from 'rxjs';
+import { Subject, merge } from 'rxjs';
 import { map, filter, mapTo, switchMap, takeUntil } from 'rxjs/operators';
+import * as i2 from '@taiga-ui/kit/components/tag';
+import { TuiTagModule } from '@taiga-ui/kit/components/tag';
+import * as i4 from '@angular/common';
 import { CommonModule } from '@angular/common';
+import * as i5 from '@tinkoff/ng-polymorpheus';
 import { PolymorpheusModule } from '@tinkoff/ng-polymorpheus';
 
 const TUI_INPUT_TAG_DEFAULT_OPTIONS = {
     separator: `,`,
     uniqueTags: true,
+    tagStatus: `primary`,
 };
 const TUI_INPUT_TAG_OPTIONS = new InjectionToken(`Default parameters for input-tag`, {
     factory: () => TUI_INPUT_TAG_DEFAULT_OPTIONS,
 });
+function tuiInputTagOptionsProvider(options) {
+    return {
+        provide: TUI_INPUT_TAG_OPTIONS,
+        useValue: Object.assign(Object.assign({}, TUI_INPUT_TAG_DEFAULT_OPTIONS), options),
+    };
+}
 
-var TuiInputTagComponent_1;
 const EVENT_Y_TO_X_COEFFICIENT = 3;
-let TuiInputTagComponent = TuiInputTagComponent_1 = class TuiInputTagComponent extends AbstractTuiMultipleControl {
-    constructor(control, changeDetectorRef, tuiScrollService, elementRef, appearance, modeDirective, mode$, tagStatus, hintController, controller, options, parentHostedDropdown) {
+class TuiInputTagComponent extends AbstractTuiMultipleControl {
+    constructor(control, changeDetectorRef, tuiScrollService, elementRef, appearance, modeDirective, mode$, hintController, controller, options, parentHostedDropdown) {
         super(control, changeDetectorRef);
         this.tuiScrollService = tuiScrollService;
         this.elementRef = elementRef;
         this.appearance = appearance;
         this.modeDirective = modeDirective;
         this.mode$ = mode$;
-        this.tagStatus = tagStatus;
         this.hintController = hintController;
         this.controller = controller;
         this.options = options;
@@ -37,11 +49,7 @@ let TuiInputTagComponent = TuiInputTagComponent_1 = class TuiInputTagComponent e
         this.tags = EMPTY_QUERY;
         this.scrollToStart$ = new Subject();
         this.scrollToEnd$ = new Subject();
-        // TODO: 3.0 Remove
-        this.allowSpaces = true;
         this.separator = this.options.separator;
-        this.icon = ``;
-        this.iconAlign = `right`;
         this.search = ``;
         this.editable = true;
         this.tagValidator = ALWAYS_TRUE_HANDLER;
@@ -57,7 +65,7 @@ let TuiInputTagComponent = TuiInputTagComponent_1 = class TuiInputTagComponent e
         if (!value && !this.focused) {
             this.scrollToStart$.next();
         }
-        this.pseudoFocused = value;
+        this.pseudoFocus = value;
     }
     set scrollerSetter(scroller) {
         this.initScrollerSubscription(scroller);
@@ -69,7 +77,7 @@ let TuiInputTagComponent = TuiInputTagComponent_1 = class TuiInputTagComponent e
     }
     get focused() {
         var _a;
-        return (isNativeFocusedIn(this.elementRef.nativeElement) ||
+        return (tuiIsNativeFocusedIn(this.elementRef.nativeElement) ||
             !!((_a = this.hostedDropdown) === null || _a === void 0 ? void 0 : _a.focused));
     }
     get size() {
@@ -79,6 +87,12 @@ let TuiInputTagComponent = TuiInputTagComponent_1 = class TuiInputTagComponent e
         const { size, labelOutside } = this.controller;
         return size === `s` || labelOutside;
     }
+    get icon() {
+        return this.controller.icon;
+    }
+    get iconLeft() {
+        return this.controller.iconLeft;
+    }
     get hasCleaner() {
         return this.controller.cleaner && this.hasValue && this.interactive;
     }
@@ -105,18 +119,12 @@ let TuiInputTagComponent = TuiInputTagComponent_1 = class TuiInputTagComponent e
     get hasTooltip() {
         return !!this.hintController.content && !this.disabled;
     }
-    get iconAlignLeft() {
-        return !!this.icon && this.iconAlign === `left`;
-    }
-    get iconAlignRight() {
-        return !!this.icon && this.iconAlign === `right`;
-    }
     get hasRightIcons() {
-        return this.hasCleaner || this.hasTooltip || this.iconAlignRight;
+        return this.hasCleaner || this.hasTooltip || !!this.icon;
     }
     get status() {
         var _a;
-        return ((_a = this.modeDirective) === null || _a === void 0 ? void 0 : _a.mode) ? `default` : this.tagStatus;
+        return ((_a = this.modeDirective) === null || _a === void 0 ? void 0 : _a.mode) ? `default` : this.options.tagStatus;
     }
     get canOpen() {
         return this.interactive && !!this.datalist;
@@ -143,11 +151,11 @@ let TuiInputTagComponent = TuiInputTagComponent_1 = class TuiInputTagComponent e
     }
     onMouseDown(event) {
         var _a;
-        const actualTarget = getActualTarget(event);
+        const actualTarget = tuiGetActualTarget(event);
         if (!this.focusableElement ||
             actualTarget === this.focusableElement.nativeElement ||
-            // TODO: iframe warning
-            !(event.target instanceof Element) || ((_a = this.cleanerSvg) === null || _a === void 0 ? void 0 : _a.nativeElement.contains(event.target)) ||
+            !tuiIsElement(event.target) ||
+            ((_a = this.cleanerSvg) === null || _a === void 0 ? void 0 : _a.nativeElement.contains(event.target)) ||
             (this.tagsContainer &&
                 actualTarget !== this.tagsContainer.nativeElement &&
                 this.tagsContainer.nativeElement.contains(actualTarget))) {
@@ -169,7 +177,7 @@ let TuiInputTagComponent = TuiInputTagComponent_1 = class TuiInputTagComponent e
             return;
         }
         event.preventDefault();
-        setNativeFocused(this.tags.last.nativeElement);
+        this.tags.last.nativeElement.focus();
     }
     onFieldKeyDownEnter() {
         this.addTag();
@@ -207,9 +215,7 @@ let TuiInputTagComponent = TuiInputTagComponent_1 = class TuiInputTagComponent e
         this.scrollToEnd$.next();
     }
     onInput(value) {
-        const array = this.allowSpaces
-            ? value.split(this.separator)
-            : value.split(ALLOWED_SPACE_REGEXP);
+        const array = value.split(this.separator);
         const tags = array
             .map(item => item.trim())
             .filter((item, index, { length }) => item.length > 0 && index !== length - 1);
@@ -223,9 +229,6 @@ let TuiInputTagComponent = TuiInputTagComponent_1 = class TuiInputTagComponent e
         }
         this.open = this.hasNativeValue;
     }
-    onHoveredChange(hovered) {
-        this.updateHovered(hovered);
-    }
     setDisabledState() {
         super.setDisabledState();
         this.open = false;
@@ -246,7 +249,7 @@ let TuiInputTagComponent = TuiInputTagComponent_1 = class TuiInputTagComponent e
         if (!tag || !this.scrollBar) {
             return;
         }
-        setNativeFocused(tag.nativeElement);
+        tag.nativeElement.focus();
         if (flag * this.scrollBar.nativeElement.clientWidth -
             flag * tag.nativeElement.offsetLeft -
             tag.nativeElement.clientWidth <
@@ -260,7 +263,7 @@ let TuiInputTagComponent = TuiInputTagComponent_1 = class TuiInputTagComponent e
             return;
         }
         const { nativeElement } = scroller.browserScrollRef;
-        const wheel$ = typedFromEvent(nativeElement, `wheel`, { passive: false }).pipe(filter(event => event.deltaX === 0 && this.shouldScroll(nativeElement)), preventDefault(), map(({ deltaY }) => Math.max(nativeElement.scrollLeft + deltaY * EVENT_Y_TO_X_COEFFICIENT, 0)));
+        const wheel$ = tuiTypedFromEvent(nativeElement, `wheel`, { passive: false }).pipe(filter(event => event.deltaX === 0 && this.shouldScroll(nativeElement)), tuiPreventDefault(), map(({ deltaY }) => Math.max(nativeElement.scrollLeft + deltaY * EVENT_Y_TO_X_COEFFICIENT, 0)));
         const start$ = this.scrollToStart$.pipe(mapTo(0));
         const end$ = this.scrollToEnd$.pipe(map(() => nativeElement.scrollWidth));
         merge(wheel$, start$, end$)
@@ -288,162 +291,183 @@ let TuiInputTagComponent = TuiInputTagComponent_1 = class TuiInputTagComponent e
     deleteLastEnabledItem() {
         for (let index = this.value.length - 1; index >= 0; index--) {
             if (!this.disabledItemHandler(this.value[index])) {
-                this.updateValue([
-                    ...this.value.slice(0, index),
-                    ...this.value.slice(index + 1, this.value.length),
-                ]);
+                this.updateValue(tuiArrayRemove(this.value, index));
                 break;
             }
         }
     }
     focusInput(preventScroll = false) {
         if (this.nativeFocusableElement) {
-            setNativeFocused(this.nativeFocusableElement, true, preventScroll);
+            this.nativeFocusableElement.focus({ preventScroll });
         }
     }
-};
-TuiInputTagComponent.ctorParameters = () => [
-    { type: NgControl, decorators: [{ type: Optional }, { type: Self }, { type: Inject, args: [NgControl,] }] },
-    { type: ChangeDetectorRef, decorators: [{ type: Inject, args: [ChangeDetectorRef,] }] },
-    { type: TuiScrollService, decorators: [{ type: Inject, args: [TuiScrollService,] }] },
-    { type: ElementRef, decorators: [{ type: Inject, args: [ElementRef,] }] },
-    { type: String, decorators: [{ type: Inject, args: [TUI_TEXTFIELD_APPEARANCE,] }] },
-    { type: TuiModeDirective, decorators: [{ type: Optional }, { type: Inject, args: [TuiModeDirective,] }] },
-    { type: Observable, decorators: [{ type: Inject, args: [TUI_MODE,] }] },
-    { type: undefined, decorators: [{ type: Inject, args: [TUI_TAG_STATUS,] }] },
-    { type: TuiHintControllerDirective, decorators: [{ type: Inject, args: [TUI_HINT_WATCHED_CONTROLLER,] }] },
-    { type: TuiTextfieldController, decorators: [{ type: Inject, args: [TUI_TEXTFIELD_WATCHED_CONTROLLER,] }] },
-    { type: undefined, decorators: [{ type: Inject, args: [TUI_INPUT_TAG_OPTIONS,] }] },
-    { type: TuiHostedDropdownComponent, decorators: [{ type: Optional }, { type: Inject, args: [TuiHostedDropdownComponent,] }] }
-];
-__decorate([
-    ViewChild(TuiHostedDropdownComponent)
-], TuiInputTagComponent.prototype, "hostedDropdown", void 0);
-__decorate([
-    ViewChild(`focusableElement`)
-], TuiInputTagComponent.prototype, "focusableElement", void 0);
-__decorate([
-    ViewChild(`tagsContainer`)
-], TuiInputTagComponent.prototype, "tagsContainer", void 0);
-__decorate([
-    ViewChildren(`tag`, { read: ElementRef })
-], TuiInputTagComponent.prototype, "tags", void 0);
-__decorate([
-    ViewChild(`cleaner`, { read: ElementRef })
-], TuiInputTagComponent.prototype, "cleanerSvg", void 0);
-__decorate([
-    ViewChild(TuiScrollbarComponent, { read: ElementRef })
-], TuiInputTagComponent.prototype, "scrollBar", void 0);
-__decorate([
-    Input(),
-    tuiDefaultProp()
-], TuiInputTagComponent.prototype, "allowSpaces", void 0);
+}
+TuiInputTagComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiInputTagComponent, deps: [{ token: NgControl, optional: true, self: true }, { token: ChangeDetectorRef }, { token: TuiScrollService }, { token: ElementRef }, { token: TUI_TEXTFIELD_APPEARANCE }, { token: TuiModeDirective, optional: true }, { token: TUI_MODE }, { token: TUI_HINT_WATCHED_CONTROLLER }, { token: TUI_TEXTFIELD_WATCHED_CONTROLLER }, { token: TUI_INPUT_TAG_OPTIONS }, { token: TuiHostedDropdownComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+TuiInputTagComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TuiInputTagComponent, selector: "tui-input-tag", inputs: { separator: "separator", search: "search", editable: "editable", tagValidator: "tagValidator", expandable: "expandable", inputHidden: "inputHidden", uniqueTags: "uniqueTags", disabledItemHandler: "disabledItemHandler", pseudoFocusedSetter: ["pseudoFocused", "pseudoFocusedSetter"] }, outputs: { searchChange: "searchChange" }, host: { properties: { "class._expandable": "this.expandable", "attr.data-size": "this.size", "class._label-outside": "this.labelOutside" } }, providers: [
+        tuiAsFocusableItemAccessor(TuiInputTagComponent),
+        tuiAsControl(TuiInputTagComponent),
+        tuiAsDataListHost(TuiInputTagComponent),
+        TEXTFIELD_CONTROLLER_PROVIDER,
+        HINT_CONTROLLER_PROVIDER,
+        MODE_PROVIDER,
+    ], queries: [{ propertyName: "datalist", first: true, predicate: TuiDataListDirective, descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "hostedDropdown", first: true, predicate: TuiHostedDropdownComponent, 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: TuiScrollbarComponent, descendants: true, read: ElementRef }, { propertyName: "errorIconTemplate", first: true, predicate: ["errorIcon"], descendants: true }, { propertyName: "scrollerSetter", first: true, predicate: TuiScrollbarComponent, descendants: true }, { propertyName: "tags", predicate: ["tag"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "<tui-hosted-dropdown\n    class=\"t-hosted\"\n    [canOpen]=\"canOpen\"\n    [content]=\"datalist || ''\"\n    [(open)]=\"open\"\n    (tuiActiveZoneChange)=\"onActiveZone($event)\"\n>\n    <div\n        tuiWrapper\n        [appearance]=\"appearance\"\n        [readOnly]=\"readOnly\"\n        [focus]=\"computedFocused\"\n        [hover]=\"pseudoHover\"\n        [disabled]=\"computedDisabled\"\n        [invalid]=\"computedInvalid\"\n        (mousedown)=\"onMouseDown($event)\"\n    >\n        <div class=\"t-content\">\n            <div\n                *ngIf=\"iconLeft\"\n                class=\"t-icons t-icons_left\"\n            >\n                <tui-svg\n                    *polymorpheusOutlet=\"iconLeft as src; context: {$implicit: size}\"\n                    class=\"t-icon\"\n                    [src]=\"src\"\n                ></tui-svg>\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></ng-content>\n                    </div>\n                </div>\n                <tui-scrollbar\n                    *ngIf=\"!expandable; else items\"\n                    class=\"t-scrollbar\"\n                    [hidden]=\"true\"\n                >\n                    <ng-container [ngTemplateOutlet]=\"items\"></ng-container>\n                </tui-scrollbar>\n                <ng-template #items>\n                    <div\n                        #tagsContainer\n                        class=\"t-tags\"\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                                class=\"t-tag\"\n                                [status]=\"(status$ | async)!\"\n                                [leftContent]=\"getLeftContent(item)\"\n                                [tuiFocusable]=\"false\"\n                                [disabled]=\"computedDisabled || disabledItemHandler(item)\"\n                                [editable]=\"editable && !readOnly\"\n                                [hoverable]=\"!readOnly\"\n                                [removable]=\"!readOnly\"\n                                [separator]=\"separator\"\n                                [maxLength]=\"controller.maxLength\"\n                                [size]=\"controller.size\"\n                                [value]=\"item.toString()\"\n                                (edited)=\"onTagEdited($event, index)\"\n                                (keydown.arrowLeft.prevent)=\"onTagKeyDownArrowLeft(index)\"\n                                (keydown.arrowRight.prevent)=\"onTagKeyDownArrowRight(index)\"\n                            ></tui-tag>\n                        </ng-container>\n                        <ng-template #text>\n                            <span\n                                *ngFor=\"let item of value\"\n                                class=\"t-text\"\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                                type=\"text\"\n                                automation-id=\"tui-input-tag__native\"\n                                class=\"t-native\"\n                                [placeholder]=\"controller.exampleText\"\n                                [class.t-native_hidden]=\"inputHidden\"\n                                [attr.maxLength]=\"controller.maxLength\"\n                                [id]=\"id\"\n                                [disabled]=\"computedDisabled\"\n                                [readOnly]=\"readOnly || inputHidden\"\n                                [tuiFocusable]=\"computedFocusable\"\n                                [ngModel]=\"search\"\n                                (ngModelChange)=\"onInput($event)\"\n                                (keydown.arrowLeft)=\"onFieldKeyDownArrowLeft($event)\"\n                                (keydown.backspace)=\"onFieldKeyDownBackspace($event)\"\n                                (keydown.enter.prevent)=\"onFieldKeyDownEnter()\"\n                            />\n                        </div>\n                    </div>\n                </ng-template>\n            </div>\n            <div\n                *ngIf=\"hasRightIcons\"\n                class=\"t-icons t-icons_right\"\n            >\n                <tui-svg\n                    *ngIf=\"hasCleaner\"\n                    #cleaner\n                    automation-id=\"tui-input-tag__cleaner\"\n                    src=\"tuiIconCloseLarge\"\n                    class=\"t-cleaner\"\n                    (click.stop)=\"onCleanerClick()\"\n                ></tui-svg>\n                <tui-tooltip\n                    *ngIf=\"hasTooltip\"\n                    automation-id=\"tui-input-tag__tooltip\"\n                    describeId=\"placeholer_until_accesibility_is_added\"\n                    class=\"t-tooltip\"\n                    [direction]=\"hintController.direction\"\n                    [appearance]=\"hintController.appearance\"\n                    [content]=\"hintController.content || ''\"\n                    [showDelay]=\"hintController.showDelay\"\n                    [hideDelay]=\"hintController.hideDelay\"\n                ></tui-tooltip>\n                <div *ngIf=\"icon\">\n                    <tui-svg\n                        *polymorpheusOutlet=\"icon as src; context: {$implicit: size}\"\n                        class=\"t-icon\"\n                        [src]=\"src\"\n                    ></tui-svg>\n                </div>\n            </div>\n        </div>\n        <ng-template #errorIcon>\n            <tui-svg\n                src=\"tuiIconAttention\"\n                class=\"t-error-icon\"\n            ></tui-svg>\n        </ng-template>\n    </div>\n</tui-hosted-dropdown>\n", styles: [":host{font:var(--tui-font-text-s);color:var(--tui-text-01);position:relative;display:block;border-radius:var(--tui-radius-m);text-align:left}:host[data-size=s]{height:var(--tui-height-s);min-height:var(--tui-height-s);max-height:var(--tui-height-s)}:host[data-size=m]{height:var(--tui-height-m);min-height:var(--tui-height-m);max-height:var(--tui-height-m)}:host[data-size=l]{height:var(--tui-height-l);min-height:var(--tui-height-l);max-height:var(--tui-height-l);font:var(--tui-font-text-m);line-height:1.25rem}.t-input{font:var(--tui-font-text-s);color:var(--tui-text-01);padding:0;margin:0;border: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;-moz-appearance:none;appearance:none;word-break:keep-all;-webkit-text-fill-color:currentColor;position:absolute;top:0;left:0;width:100%;height:100%;padding:0 var(--tui-padding-m);border:solid transparent;border-width:0 0 0 0;border-width:0 var(--border-end, 0) 0 var(--border-start, 0);border-inline-start-width:0;border-inline-start-width:var(--border-start, 0);border-inline-end-width:0;border-inline-end-width:var(--border-end, 0);text-indent:var(--text-indent);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{caret-color:var(--tui-base-09);border-radius:inherit;color:inherit!important;background-color:transparent!important;-webkit-text-fill-color:var(--tui-text-01)!important;border-color:var(--tui-autofill);-webkit-box-shadow:0 0 0 100rem var(--tui-autofill) inset!important}:host[data-mode=onDark] .t-input:-webkit-autofill,.t-input :host-context(tui-primitive-textfield[data-mode=\"onDark\"]):-webkit-autofill,.t-input :host-context(tui-text-area[data-mode=\"onDark\"]):-webkit-autofill,:host[data-mode=onDark] .t-input:-webkit-autofill:hover,.t-input :host-context(tui-primitive-textfield[data-mode=\"onDark\"]):-webkit-autofill:hover,.t-input :host-context(tui-text-area[data-mode=\"onDark\"]):-webkit-autofill:hover,:host[data-mode=onDark] .t-input:-webkit-autofill:focus,.t-input :host-context(tui-primitive-textfield[data-mode=\"onDark\"]):-webkit-autofill:focus,.t-input :host-context(tui-text-area[data-mode=\"onDark\"]):-webkit-autofill:focus{caret-color:var(--tui-base-09);border-radius:inherit;color:inherit!important;background-color:transparent!important;-webkit-text-fill-color:var(--tui-text-01-night)!important;border-color:var(--tui-autofill-night);-webkit-box-shadow:0 0 0 100rem var(--tui-autofill-night) inset!important}: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-text-area[data-size=\"s\"]):not(tui-text-area){padding:0 var(--tui-padding-s)}: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-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-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=l]:not(._label-outside) .t-input:-webkit-autofill+.t-content .t-placeholder,.t-input :host-context(tui-primitive-textfield[data-size=\"l\"]:not(._label-outside)):not(tui-primitive-textfield):-webkit-autofill+.t-content .t-placeholder{font-size:.8156rem;transform:translateY(-.625rem)}: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:1.125rem}:host[data-size=m]:not(._label-outside) .t-input:-webkit-autofill+.t-content .t-placeholder,.t-input :host-context(tui-primitive-textfield[data-size=\"m\"]:not(._label-outside)):not(tui-primitive-textfield):-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;-webkit-user-select:none}.t-content{display:flex;height:100%;width:100%;padding:0 var(--tui-padding-m);box-sizing:border-box;align-items:center;overflow:hidden}:host[data-size=s] .t-content{padding:0 var(--tui-padding-s)}:host[data-size=l] .t-content{padding:0 var(--tui-padding-l)}.t-content:after{content:\"\";margin-right:-.25rem}:host[data-size=m] .t-content:after{display:none}.t-wrapper{flex:1;min-width:0;padding-right:.25rem;-webkit-padding-end:.25rem;padding-inline-end:.25rem;-webkit-padding-start:0;padding-inline-start:0}.t-placeholder{transition-property:transform,font-size,color,letter-spacing;transition-duration:.3s;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;font:var(--tui-font-text-s);color:var(--tui-text-01);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;width:100%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:var(--tui-text-02);pointer-events:none;will-change:transform;transform:translateY(0)}.t-placeholder_raised{transform:translateY(-.625rem)}:host[data-size=m] .t-placeholder_raised{font:var(--tui-font-text-xs);transform:translateY(-.5rem);letter-spacing:.025rem}:host._invalid:not(._focused) .t-placeholder_raised,:host._invalid:not(._focused):hover .t-placeholder_raised{color:var(--tui-error-fill)}:host[data-mode=onDark]._invalid:not(._focused) .t-placeholder_raised,:host[data-mode=onDark]._invalid:not(._focused):hover .t-placeholder_raised{color:var(--tui-error-fill-night)}: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-03)}:host[data-size=l] .t-placeholder{font-size:.9375rem}: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-01)}:host[data-mode=onDark] .t-placeholder{color:var(--tui-text-02-night)}:host[data-size=m][data-mode=onDark]._focused:not(._label-outside) .t-placeholder,:host[data-size=l][data-mode=onDark]._focused:not(._label-outside) .t-placeholder{color:var(--tui-text-01-night)}:host[data-mode=onDark]._focused .t-placeholder,:host[data-size=m][data-mode=onDark]._focused._label-outside .t-placeholder,:host[data-size=l][data-mode=onDark]._focused._label-outside .t-placeholder{color:var(--tui-text-02-night)}@supports (-webkit-hyphens: none){.t-placeholder{will-change:unset;transition-property:transform,color,letter-spacing}}.t-cleaner{transition-property:all;transition-duration:.3s;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;display:flex;width:1.5rem;height:1.5rem;align-items:center;justify-content:center;color:var(--tui-text-03);position:relative;box-sizing:border-box;cursor:pointer;transition-property:color,transform}.t-cleaner:hover{color:var(--tui-text-02)}:host._readonly .t-cleaner,:host._disabled .t-cleaner{pointer-events:none}:host[data-mode=onDark] .t-cleaner{color:var(--tui-text-03-night)}:host[data-mode=onDark] .t-cleaner:hover{color:var(--tui-text-01-night)}.t-icon{display:flex;width:1.5rem;height:1.5rem;align-items:center;justify-content:center;color:var(--tui-text-03)}:host[data-mode=onDark] .t-icon{color:var(--tui-text-03-night)}.t-icon_left{margin:0 .5rem 0 -.25rem;-webkit-margin-start:-.25rem;margin-inline-start:-.25rem;-webkit-margin-end:.5rem;margin-inline-end:.5rem}:host[data-size=s] .t-icon_left{margin-right:.25rem;-webkit-margin-end:.25rem;margin-inline-end:.25rem}:host{cursor:text}:host._expandable{height:auto;max-height:none}:host._disabled{pointer-events:none}:host._readonly{cursor:default}.t-hosted{display:block;border-radius:inherit}.t-scrollbar{margin:0 -.25rem;padding:0 .25rem}.t-tags{display:flex;align-items:center;box-sizing:border-box}:host._expandable .t-tags{flex-wrap:wrap;white-space:normal}:host._readonly .t-tags{pointer-events:none}:host[data-size=s] .t-tags{min-height:var(--tui-height-s);padding:.25rem .25rem .25rem 0}:host[data-size=m] .t-tags{min-height:var(--tui-height-m);padding:.5rem .25rem .5rem 0}:host[data-size=l] .t-tags{min-height:var(--tui-height-l);padding:.625rem .25rem .625rem 0}:host[data-size=m]:not(._label-outside) .t-tags{padding:1.1875rem 1rem 0 0}:host[data-size=l]:not(._label-outside) .t-tags{padding:1.6875rem 1rem .5625rem 0}.t-tags :host[data-size]{-webkit-padding-start:0;padding-inline-start:0;-webkit-padding-end:.25rem;padding-inline-end:.25rem}:host[data-size]:not(._label-outside) .t-tags{-webkit-padding-end:1rem;padding-inline-end:1rem}.t-content{align-items:flex-start}.t-icons{display:flex;align-items:center;padding:0 0 0 .75rem;-webkit-padding-start:.75rem;padding-inline-start:.75rem;-webkit-padding-end:0;padding-inline-end:0}.t-icons_left{padding:0;margin:0 .5rem 0 -.25rem;-webkit-margin-start:-.25rem;margin-inline-start:-.25rem;-webkit-margin-end:.5rem;margin-inline-end:.5rem}:host._expandable .t-icons_right{margin:0 0 0 -.625rem;-webkit-margin-start:-.625rem;margin-inline-start:-.625rem;-webkit-margin-end:0;margin-inline-end:0}:host[data-size=s] .t-icons{height:var(--tui-height-s)}:host[data-size=m] .t-icons{height:var(--tui-height-m)}:host[data-size=l] .t-icons{height:var(--tui-height-l)}.t-absolute-wrapper{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;flex-direction:column;justify-content:center}:host[data-size=m] .t-absolute-wrapper{height:var(--tui-height-m)}:host[data-size=l] .t-absolute-wrapper{height:var(--tui-height-l)}.t-wrapper{position:relative;padding:0}.t-tag{margin:.125rem .5rem .125rem -.25rem;-webkit-margin-start:-.25rem;margin-inline-start:-.25rem;-webkit-margin-end:.5rem;margin-inline-end:.5rem;max-width:100%;flex-shrink:0}.t-text:after{content:\",\\a0\"}.t-text_disabled{color:var(--tui-text-03)}.t-text_error{color:var(--tui-negative)}:host:not(._expandable) .t-text{white-space:nowrap}:host:not(._focused) .t-text:last-of-type:after{content:\"\"}.t-input-wrapper{position:relative;flex:1;max-width:100%}.t-input-wrapper_collapsed{flex:0;margin:0 0 0 -.5rem;-webkit-margin-start:-.5rem;margin-inline-start:-.5rem;-webkit-margin-end:0;margin-inline-end:0}:host[data-size=s] .t-input-wrapper{min-height:1.5rem}:host[data-size=m] .t-input-wrapper{min-height:calc(var(--tui-height-xs) + 2 * .125rem)}:host[data-size=l] .t-input-wrapper{min-height:calc(var(--tui-height-s) + 2 * .125rem)}:host:not(._label-outside) .t-input-wrapper{min-height:1.25rem}.t-ghost{visibility:hidden;white-space:pre;text-overflow:clip;min-width:.125rem}:host:not(._expandable) .t-ghost{min-width:2rem}.t-native{margin:0;border: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;-moz-appearance:none;appearance:none;word-break:keep-all;-webkit-text-fill-color:currentColor;position:absolute;top:0;left:0;width:100%;height: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{caret-color:var(--tui-base-09);border-radius:inherit;color:inherit!important;background-color:transparent!important;-webkit-text-fill-color:var(--tui-text-01)!important;border-color:var(--tui-autofill);-webkit-box-shadow:0 0 0 100rem var(--tui-autofill) inset!important}.t-native_hidden{opacity:0;text-indent:-10em}.t-native::-ms-input-placeholder{color:var(--tui-text-03);opacity:0}.t-native::placeholder{color:var(--tui-text-03);opacity:0}:host[data-mode=onDark] .t-native::-ms-input-placeholder{color:var(--tui-text-03-night)}:host[data-mode=onDark] .t-native::placeholder{color:var(--tui-text-03-night)}:host._focused .t-native:not(:read-only)::-ms-input-placeholder{opacity:1}:host._focused .t-native:not(:-moz-read-only)::placeholder{opacity:1}:host._focused .t-native:not(:read-only)::placeholder{opacity:1}.t-error-icon{display:block;color:var(--tui-error-fill);width:1rem;height:1rem}\n"], components: [{ type: i1.TuiHostedDropdownComponent, selector: "tui-hosted-dropdown", inputs: ["content", "canOpen", "open"], outputs: ["openChange", "focusedChange"] }, { type: i1.TuiSvgComponent, selector: "tui-svg", inputs: ["src"] }, { type: i1.TuiScrollbarComponent, selector: "tui-scrollbar", inputs: ["hidden"] }, { type: i2.TuiTagComponent, selector: "tui-tag, a[tuiTag]", inputs: ["value", "editable", "separator", "maxLength", "size", "showLoader", "status", "hoverable", "removable", "disabled", "autoColor", "leftContent"], outputs: ["edited"] }, { type: i1.TuiTooltipComponent, selector: "tui-tooltip", inputs: ["content", "direction", "appearance", "showDelay", "hideDelay", "describeId"] }], directives: [{ type: i3.TuiActiveZoneDirective, selector: "[tuiActiveZone]:not(ng-container), [tuiActiveZoneChange]:not(ng-container), [tuiActiveZoneParent]:not(ng-container)", inputs: ["tuiActiveZoneParent"], outputs: ["tuiActiveZoneChange"], exportAs: ["tuiActiveZone"] }, { type: i1.TuiWrapperDirective, selector: "[tuiWrapper]", inputs: ["disabled", "readOnly", "hover", "active", "focus", "invalid", "appearance"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.PolymorpheusOutletDirective, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.TuiFocusableDirective, selector: "[tuiFocusable]", inputs: ["tuiFocusable"] }, { type: i6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "async": i4.AsyncPipe }, viewProviders: [FIXED_DROPDOWN_CONTROLLER_PROVIDER], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 __decorate([
-    Input(),
     tuiDefaultProp()
 ], TuiInputTagComponent.prototype, "separator", void 0);
 __decorate([
-    Input(),
-    tuiDefaultProp()
-], TuiInputTagComponent.prototype, "icon", void 0);
-__decorate([
-    Input(),
-    tuiDefaultProp()
-], TuiInputTagComponent.prototype, "iconAlign", void 0);
-__decorate([
-    Input(),
     tuiDefaultProp()
 ], TuiInputTagComponent.prototype, "search", void 0);
 __decorate([
-    Input(),
     tuiDefaultProp()
 ], TuiInputTagComponent.prototype, "editable", void 0);
 __decorate([
-    Input(),
     tuiDefaultProp()
 ], TuiInputTagComponent.prototype, "tagValidator", void 0);
 __decorate([
-    Input(),
-    HostBinding(`class._expandable`),
     tuiDefaultProp()
 ], TuiInputTagComponent.prototype, "expandable", void 0);
 __decorate([
-    Input(),
     tuiDefaultProp()
 ], TuiInputTagComponent.prototype, "inputHidden", void 0);
 __decorate([
-    Input(),
     tuiDefaultProp()
 ], TuiInputTagComponent.prototype, "uniqueTags", void 0);
 __decorate([
-    Input(),
     tuiDefaultProp()
 ], TuiInputTagComponent.prototype, "disabledItemHandler", void 0);
-__decorate([
-    Input(`pseudoFocused`)
-], TuiInputTagComponent.prototype, "pseudoFocusedSetter", null);
-__decorate([
-    Output()
-], TuiInputTagComponent.prototype, "searchChange", void 0);
-__decorate([
-    ContentChild(TuiDataListDirective, { read: TemplateRef })
-], TuiInputTagComponent.prototype, "datalist", void 0);
-__decorate([
-    ViewChild(`errorIcon`)
-], TuiInputTagComponent.prototype, "errorIconTemplate", void 0);
-__decorate([
-    ViewChild(TuiScrollbarComponent)
-], TuiInputTagComponent.prototype, "scrollerSetter", null);
-__decorate([
-    HostBinding(`attr.data-size`)
-], TuiInputTagComponent.prototype, "size", null);
-__decorate([
-    HostBinding(`class._label-outside`)
-], TuiInputTagComponent.prototype, "labelOutside", null);
-TuiInputTagComponent = TuiInputTagComponent_1 = __decorate([
-    Component({
-        selector: `tui-input-tag`,
-        changeDetection: ChangeDetectionStrategy.OnPush,
-        template: "<tui-hosted-dropdown\n    class=\"t-hosted\"\n    [canOpen]=\"canOpen\"\n    [content]=\"datalist || ''\"\n    [(open)]=\"open\"\n    (tuiActiveZoneChange)=\"onActiveZone($event)\"\n>\n    <tui-wrapper\n        [appearance]=\"appearance\"\n        [readOnly]=\"readOnly\"\n        [focused]=\"computedFocused\"\n        [hovered]=\"computedHovered\"\n        [disabled]=\"computedDisabled\"\n        [invalid]=\"computedInvalid\"\n        (tuiHoveredChange)=\"onHoveredChange($event)\"\n        (mousedown)=\"onMouseDown($event)\"\n    >\n        <div class=\"t-content\">\n            <div\n                *ngIf=\"iconAlignLeft\"\n                class=\"t-icons t-icons_left\"\n            >\n                <tui-svg\n                    class=\"t-icon\"\n                    [src]=\"icon\"\n                ></tui-svg>\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></ng-content>\n                    </div>\n                </div>\n                <tui-scrollbar\n                    *ngIf=\"!expandable; else items\"\n                    class=\"t-scrollbar\"\n                    [hidden]=\"true\"\n                >\n                    <ng-container [ngTemplateOutlet]=\"items\"></ng-container>\n                </tui-scrollbar>\n                <ng-template #items>\n                    <div\n                        #tagsContainer\n                        class=\"t-tags\"\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                                class=\"t-tag\"\n                                [status]=\"(status$ | async)!\"\n                                [leftContent]=\"getLeftContent(item)\"\n                                [allowSpaces]=\"allowSpaces\"\n                                [tuiFocusable]=\"false\"\n                                [disabled]=\"computedDisabled || disabledItemHandler(item)\"\n                                [editable]=\"editable && !readOnly\"\n                                [hoverable]=\"!readOnly\"\n                                [removable]=\"!readOnly\"\n                                [separator]=\"separator\"\n                                [maxLength]=\"controller.maxLength\"\n                                [size]=\"controller.size\"\n                                [value]=\"item.toString()\"\n                                (edited)=\"onTagEdited($event, index)\"\n                                (keydown.arrowLeft.prevent)=\"onTagKeyDownArrowLeft(index)\"\n                                (keydown.arrowRight.prevent)=\"onTagKeyDownArrowRight(index)\"\n                            ></tui-tag>\n                        </ng-container>\n                        <ng-template #text>\n                            <span\n                                *ngFor=\"let item of value\"\n                                class=\"t-text\"\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                                type=\"text\"\n                                automation-id=\"tui-input-tag__native\"\n                                class=\"t-native\"\n                                [placeholder]=\"controller.exampleText\"\n                                [class.t-native_hidden]=\"inputHidden\"\n                                [attr.maxLength]=\"controller.maxLength\"\n                                [id]=\"id\"\n                                [disabled]=\"computedDisabled\"\n                                [readOnly]=\"readOnly || inputHidden\"\n                                [tuiFocusable]=\"computedFocusable\"\n                                [ngModel]=\"search\"\n                                (ngModelChange)=\"onInput($event)\"\n                                (keydown.arrowLeft)=\"onFieldKeyDownArrowLeft($event)\"\n                                (keydown.backspace)=\"onFieldKeyDownBackspace($event)\"\n                                (keydown.enter.prevent)=\"onFieldKeyDownEnter()\"\n                            />\n                        </div>\n                    </div>\n                </ng-template>\n            </div>\n            <div\n                *ngIf=\"hasRightIcons\"\n                class=\"t-icons t-icons_right\"\n            >\n                <tui-svg\n                    *ngIf=\"hasCleaner\"\n                    #cleaner\n                    automation-id=\"tui-input-tag__cleaner\"\n                    src=\"tuiIconCloseLarge\"\n                    class=\"t-cleaner\"\n                    (click.stop)=\"onCleanerClick()\"\n                ></tui-svg>\n                <tui-tooltip\n                    *ngIf=\"hasTooltip\"\n                    automation-id=\"tui-input-tag__tooltip\"\n                    describeId=\"placeholer_until_accesibility_is_added\"\n                    class=\"t-tooltip\"\n                    [direction]=\"hintController.direction\"\n                    [mode]=\"hintController.mode\"\n                    [content]=\"hintController.content || ''\"\n                    [showDelay]=\"hintController.showDelay\"\n                    [hideDelay]=\"hintController.hideDelay\"\n                ></tui-tooltip>\n                <tui-svg\n                    *ngIf=\"iconAlignRight\"\n                    class=\"t-icon\"\n                    [src]=\"icon\"\n                ></tui-svg>\n            </div>\n        </div>\n        <ng-template #errorIcon>\n            <tui-svg\n                src=\"tuiIconAttention\"\n                class=\"t-error-icon\"\n            ></tui-svg>\n        </ng-template>\n    </tui-wrapper>\n</tui-hosted-dropdown>\n",
-        providers: [
-            {
-                provide: TUI_FOCUSABLE_ITEM_ACCESSOR,
-                useExisting: forwardRef(() => TuiInputTagComponent_1),
-            },
-            {
-                provide: TUI_DATA_LIST_HOST,
-                useExisting: forwardRef(() => TuiInputTagComponent_1),
-            },
-            FIXED_DROPDOWN_CONTROLLER_PROVIDER,
-            TEXTFIELD_CONTROLLER_PROVIDER,
-            HINT_CONTROLLER_PROVIDER,
-            MODE_PROVIDER,
-        ],
-        styles: [":host{font:var(--tui-font-text-s);color:var(--tui-text-01);position:relative;display:block;border-radius:var(--tui-radius-m);text-align:left}:host[data-size='s']{height:var(--tui-height-s);min-height:var(--tui-height-s);max-height:var(--tui-height-s)}:host[data-size='m']{height:var(--tui-height-m);min-height:var(--tui-height-m);max-height:var(--tui-height-m)}:host[data-size='l']{height:var(--tui-height-l);min-height:var(--tui-height-l);max-height:var(--tui-height-l);font:var(--tui-font-text-m);line-height:1.25rem}.t-input{font:var(--tui-font-text-s);color:var(--tui-text-01);padding:0;margin:0;border:0;border-radius:inherit;background:0 0;font-size:inherit;line-height:inherit;font-weight:inherit;color:inherit;caret-color:currentColor;outline:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;word-break:keep-all;-webkit-text-fill-color:currentColor;position:absolute;top:0;left:0;width:100%;height:100%;padding:0 var(--tui-padding-m);border:solid transparent;border-width:0 var(--border-end,0) 0 var(--border-start,0);border-inline-start-width:var(--border-start,0);border-inline-end-width:var(--border-end,0);text-indent:var(--text-indent);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:focus,.t-input:-webkit-autofill:hover{caret-color:var(--tui-base-09);border-radius:inherit;color:inherit!important;background-color:transparent!important;-webkit-text-fill-color:var(--tui-text-01)!important;border-color:var(--tui-autofill);-webkit-box-shadow:0 0 0 100rem var(--tui-autofill) inset!important}.t-input :host-context(tui-primitive-textfield[data-mode=onDark]):-webkit-autofill,.t-input :host-context(tui-primitive-textfield[data-mode=onDark]):-webkit-autofill:focus,.t-input :host-context(tui-primitive-textfield[data-mode=onDark]):-webkit-autofill:hover,.t-input :host-context(tui-text-area[data-mode=onDark]):-webkit-autofill,.t-input :host-context(tui-text-area[data-mode=onDark]):-webkit-autofill:focus,.t-input :host-context(tui-text-area[data-mode=onDark]):-webkit-autofill:hover,:host[data-mode=onDark] .t-input:-webkit-autofill,:host[data-mode=onDark] .t-input:-webkit-autofill:focus,:host[data-mode=onDark] .t-input:-webkit-autofill:hover{caret-color:var(--tui-base-09);border-radius:inherit;color:inherit!important;background-color:transparent!important;-webkit-text-fill-color:var(--tui-text-01-night)!important;border-color:var(--tui-autofill-night);-webkit-box-shadow:0 0 0 100rem var(--tui-autofill-night) inset!important}.t-input :host-context(tui-primitive-textfield[data-size='s']):not(tui-primitive-textfield),.t-input :host-context(tui-text-area[data-size='s']):not(tui-text-area),:host[data-size='s'] .t-input{padding:0 var(--tui-padding-s)}.t-input :host-context(tui-primitive-textfield[data-size='l']):not(tui-primitive-textfield),.t-input :host-context(tui-text-area[data-size='l']):not(tui-text-area),:host[data-size='l'] .t-input{padding:0 var(--tui-padding-l)}.t-input :host-context(tui-primitive-textfield._disabled),.t-input :host-context(tui-text-area._disabled),:host._disabled .t-input{pointer-events:none}.t-input :host-context(tui-primitive-textfield[data-size='l']:not(._label-outside)):not(tui-primitive-textfield),:host[data-size='l']:not(._label-outside) .t-input{padding-top:1.25rem}.t-input :host-context(tui-primitive-textfield[data-size='l']:not(._label-outside)):not(tui-primitive-textfield):-webkit-autofill+.t-content .t-placeholder,:host[data-size='l']:not(._label-outside) .t-input:-webkit-autofill+.t-content .t-placeholder{font-size:.8156rem;transform:translateY(-.625rem)}.t-input :host-context(tui-primitive-textfield[data-size='m']:not(._label-outside)):not(tui-primitive-textfield),:host[data-size='m']:not(._label-outside) .t-input{padding-top:1.125rem}.t-input :host-context(tui-primitive-textfield[data-size='m']:not(._label-outside)):not(tui-primitive-textfield):-webkit-autofill+.t-content .t-placeholder,:host[data-size='m']:not(._label-outside) .t-input:-webkit-autofill+.t-content .t-placeholder{font-size:.69rem;transform:translateY(-.5rem)}.t-input :host-context(tui-primitive-textfield._hidden),:host._hidden input.t-input{opacity:0;text-indent:-10em;-webkit-user-select:none}.t-content{display:flex;height:100%;width:100%;padding:0 var(--tui-padding-m);box-sizing:border-box;align-items:center;overflow:hidden}:host[data-size='s'] .t-content{padding:0 var(--tui-padding-s)}:host[data-size='l'] .t-content{padding:0 var(--tui-padding-l)}.t-content:after{content:'';margin-right:-.25rem}:host[data-size='m'] .t-content:after{display:none}.t-wrapper{flex:1;min-width:0;-webkit-padding-end:.25rem;padding-inline-end:.25rem;-webkit-padding-start:0;padding-inline-start:0}.t-placeholder{transition-property:transform,font-size,color,letter-spacing;transition-duration:var(--tui-duration,300ms);transition-timing-function:ease-in-out;font:var(--tui-font-text-s);color:var(--tui-text-01);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;width:100%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:var(--tui-text-02);pointer-events:none;will-change:transform;transform:translateY(0)}.t-placeholder_raised{transform:translateY(-.625rem)}:host[data-size='m'] .t-placeholder_raised{font:var(--tui-font-text-xs);transform:translateY(-.5rem);letter-spacing:.025rem}:host._invalid:not(._focused) .t-placeholder_raised,:host._invalid:not(._focused):hover .t-placeholder_raised{color:var(--tui-error-fill)}:host[data-mode=onDark]._invalid:not(._focused) .t-placeholder_raised,:host[data-mode=onDark]._invalid:not(._focused):hover .t-placeholder_raised{color:var(--tui-error-fill-night)}:host._focused .t-placeholder,:host[data-size='l']._focused._label-outside .t-placeholder,:host[data-size='m']._focused._label-outside .t-placeholder{color:var(--tui-text-03)}:host[data-size='l'] .t-placeholder{font-size:.9375rem}:host[data-size='l'] .t-placeholder_raised{font-size:.8156rem}:host[data-size='l']._focused:not(._label-outside) .t-placeholder,:host[data-size='m']._focused:not(._label-outside) .t-placeholder{color:var(--tui-text-01)}:host[data-mode=onDark] .t-placeholder{color:var(--tui-text-02-night)}:host[data-size='l'][data-mode=onDark]._focused:not(._label-outside) .t-placeholder,:host[data-size='m'][data-mode=onDark]._focused:not(._label-outside) .t-placeholder{color:var(--tui-text-01-night)}:host[data-mode=onDark]._focused .t-placeholder,:host[data-size='l'][data-mode=onDark]._focused._label-outside .t-placeholder,:host[data-size='m'][data-mode=onDark]._focused._label-outside .t-placeholder{color:var(--tui-text-02-night)}@supports (-webkit-hyphens:none){.t-placeholder{will-change:unset;transition-property:transform,color,letter-spacing}}.t-cleaner{transition-duration:var(--tui-duration,300ms);transition-timing-function:ease-in-out;display:flex;width:1.5rem;height:1.5rem;align-items:center;justify-content:center;color:var(--tui-text-03);position:relative;box-sizing:border-box;cursor:pointer;transition-property:color,transform}.t-cleaner:hover{color:var(--tui-text-02)}:host._disabled .t-cleaner,:host._readonly .t-cleaner{pointer-events:none}:host[data-mode=onDark] .t-cleaner{color:var(--tui-text-03-night)}:host[data-mode=onDark] .t-cleaner:hover{color:var(--tui-text-01-night)}.t-icon{display:flex;width:1.5rem;height:1.5rem;align-items:center;justify-content:center;color:var(--tui-text-03)}:host[data-mode=onDark] .t-icon{color:var(--tui-text-03-night)}.t-icon_left{margin:0 .5rem 0 -.25rem;-webkit-margin-start:-.25rem;margin-inline-start:-.25rem;-webkit-margin-end:.5rem;margin-inline-end:.5rem}:host[data-size='s'] .t-icon_left{margin-right:.25rem;-webkit-margin-end:.25rem;margin-inline-end:.25rem}:host{cursor:text}:host._expandable{height:auto;max-height:none}:host._disabled{pointer-events:none}:host._readonly{cursor:default}.t-hosted{display:block;border-radius:inherit}.t-scrollbar{margin:0 -.25rem;padding:0 .25rem}.t-tags{display:flex;align-items:center;box-sizing:border-box}:host._expandable .t-tags{flex-wrap:wrap;white-space:normal}:host._readonly .t-tags{pointer-events:none}:host[data-size='s'] .t-tags{min-height:var(--tui-height-s);padding:.25rem .25rem .25rem 0}:host[data-size='m'] .t-tags{min-height:var(--tui-height-m);padding:.5rem .25rem .5rem 0}:host[data-size='l'] .t-tags{min-height:var(--tui-height-l);padding:.625rem .25rem .625rem 0}:host[data-size='m']:not(._label-outside) .t-tags{padding:1.1875rem 1rem 0 0}:host[data-size='l']:not(._label-outside) .t-tags{padding:1.6875rem 1rem .5625rem 0}.t-tags :host[data-size]{-webkit-padding-start:0;padding-inline-start:0;-webkit-padding-end:.25rem;padding-inline-end:.25rem}:host[data-size]:not(._label-outside) .t-tags{-webkit-padding-end:1rem;padding-inline-end:1rem}.t-content{align-items:flex-start}.t-icons{display:flex;align-items:center;padding:0 0 0 .75rem;-webkit-padding-start:.75rem;padding-inline-start:.75rem;-webkit-padding-end:0;padding-inline-end:0}.t-icons_left{padding:0;margin:0 .5rem 0 -.25rem;-webkit-margin-start:-.25rem;margin-inline-start:-.25rem;-webkit-margin-end:.5rem;margin-inline-end:.5rem}:host._expandable .t-icons_right{margin:0 0 0 -.625rem;-webkit-margin-start:-.625rem;margin-inline-start:-.625rem;-webkit-margin-end:0;margin-inline-end:0}:host[data-size='s'] .t-icons{height:var(--tui-height-s)}:host[data-size='m'] .t-icons{height:var(--tui-height-m)}:host[data-size='l'] .t-icons{height:var(--tui-height-l)}.t-absolute-wrapper{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;flex-direction:column;justify-content:center}:host[data-size='m'] .t-absolute-wrapper{height:var(--tui-height-m)}:host[data-size='l'] .t-absolute-wrapper{height:var(--tui-height-l)}.t-wrapper{position:relative;padding:0}.t-tag{margin:.125rem .5rem .125rem -.25rem;-webkit-margin-start:-.25rem;margin-inline-start:-.25rem;-webkit-margin-end:.5rem;margin-inline-end:.5rem;max-width:100%;flex-shrink:0}.t-text:after{content:',\\00a0'}.t-text_disabled{color:var(--tui-text-03)}.t-text_error{color:var(--tui-negative)}:host:not(._expandable) .t-text{white-space:nowrap}:host:not(._focused) .t-text:last-of-type:after{content:''}.t-input-wrapper{position:relative;flex:1;max-width:100%}.t-input-wrapper_collapsed{flex:0;margin:0 0 0 -.5rem;-webkit-margin-start:-.5rem;margin-inline-start:-.5rem;-webkit-margin-end:0;margin-inline-end:0}:host[data-size='s'] .t-input-wrapper{min-height:1.5rem}:host[data-size='m'] .t-input-wrapper{min-height:calc(var(--tui-height-xs) + 2 * .125rem)}:host[data-size='l'] .t-input-wrapper{min-height:calc(var(--tui-height-s) + 2 * .125rem)}:host:not(._label-outside) .t-input-wrapper{min-height:1.25rem}.t-ghost{visibility:hidden;white-space:pre;text-overflow:clip;min-width:.125rem}:host:not(._expandable) .t-ghost{min-width:2rem}.t-native{margin:0;border:0;border-radius:inherit;background:0 0;font-size:inherit;line-height:inherit;font-weight:inherit;color:inherit;caret-color:currentColor;outline:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;word-break:keep-all;-webkit-text-fill-color:currentColor;position:absolute;top:0;left:0;width:100%;height: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:focus,.t-native:-webkit-autofill:hover{caret-color:var(--tui-base-09);border-radius:inherit;color:inherit!important;background-color:transparent!important;-webkit-text-fill-color:var(--tui-text-01)!important;border-color:var(--tui-autofill);-webkit-box-shadow:0 0 0 100rem var(--tui-autofill) inset!important}.t-native_hidden{opacity:0;text-indent:-10em}.t-native::-ms-input-placeholder{color:var(--tui-text-03);opacity:0}.t-native::placeholder{color:var(--tui-text-03);opacity:0}:host[data-mode=onDark] .t-native::-ms-input-placeholder{color:var(--tui-text-03-night)}:host[data-mode=onDark] .t-native::placeholder{color:var(--tui-text-03-night)}:host._focused .t-native:not(:read-only)::-ms-input-placeholder{opacity:1}:host._focused .t-native:not(:-moz-read-only)::placeholder{opacity:1}:host._focused .t-native:not(:read-only)::placeholder{opacity:1}.t-error-icon{display:block;color:var(--tui-error-fill);width:1rem;height:1rem}"]
-    }),
-    __param(0, Optional()),
-    __param(0, Self()),
-    __param(0, Inject(NgControl)),
-    __param(1, Inject(ChangeDetectorRef)),
-    __param(2, Inject(TuiScrollService)),
-    __param(3, Inject(ElementRef)),
-    __param(4, Inject(TUI_TEXTFIELD_APPEARANCE)),
-    __param(5, Optional()),
-    __param(5, Inject(TuiModeDirective)),
-    __param(6, Inject(TUI_MODE)),
-    __param(7, Inject(TUI_TAG_STATUS)),
-    __param(8, Inject(TUI_HINT_WATCHED_CONTROLLER)),
-    __param(9, Inject(TUI_TEXTFIELD_WATCHED_CONTROLLER)),
-    __param(10, Inject(TUI_INPUT_TAG_OPTIONS)),
-    __param(11, Optional()),
-    __param(11, Inject(TuiHostedDropdownComponent))
-], TuiInputTagComponent);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiInputTagComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: `tui-input-tag`,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    templateUrl: `./input-tag.template.html`,
+                    styleUrls: [`./input-tag.style.less`],
+                    providers: [
+                        tuiAsFocusableItemAccessor(TuiInputTagComponent),
+                        tuiAsControl(TuiInputTagComponent),
+                        tuiAsDataListHost(TuiInputTagComponent),
+                        TEXTFIELD_CONTROLLER_PROVIDER,
+                        HINT_CONTROLLER_PROVIDER,
+                        MODE_PROVIDER,
+                    ],
+                    viewProviders: [FIXED_DROPDOWN_CONTROLLER_PROVIDER],
+                }]
+        }], ctorParameters: function () { return [{ type: i6.NgControl, decorators: [{
+                    type: Optional
+                }, {
+                    type: Self
+                }, {
+                    type: Inject,
+                    args: [NgControl]
+                }] }, { type: i0.ChangeDetectorRef, decorators: [{
+                    type: Inject,
+                    args: [ChangeDetectorRef]
+                }] }, { type: i3.TuiScrollService, decorators: [{
+                    type: Inject,
+                    args: [TuiScrollService]
+                }] }, { type: i0.ElementRef, decorators: [{
+                    type: Inject,
+                    args: [ElementRef]
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [TUI_TEXTFIELD_APPEARANCE]
+                }] }, { type: i1.TuiModeDirective, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [TuiModeDirective]
+                }] }, { type: i7.Observable, decorators: [{
+                    type: Inject,
+                    args: [TUI_MODE]
+                }] }, { type: i1.TuiHintControllerDirective, decorators: [{
+                    type: Inject,
+                    args: [TUI_HINT_WATCHED_CONTROLLER]
+                }] }, { type: i1.TuiTextfieldController, decorators: [{
+                    type: Inject,
+                    args: [TUI_TEXTFIELD_WATCHED_CONTROLLER]
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [TUI_INPUT_TAG_OPTIONS]
+                }] }, { type: i1.TuiHostedDropdownComponent, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [TuiHostedDropdownComponent]
+                }] }]; }, propDecorators: { hostedDropdown: [{
+                type: ViewChild,
+                args: [TuiHostedDropdownComponent]
+            }], 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: [TuiScrollbarComponent, { read: ElementRef }]
+            }], separator: [{
+                type: Input
+            }], search: [{
+                type: Input
+            }], editable: [{
+                type: Input
+            }], tagValidator: [{
+                type: Input
+            }], expandable: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: [`class._expandable`]
+            }], inputHidden: [{
+                type: Input
+            }], uniqueTags: [{
+                type: Input
+            }], disabledItemHandler: [{
+                type: Input
+            }], pseudoFocusedSetter: [{
+                type: Input,
+                args: [`pseudoFocused`]
+            }], searchChange: [{
+                type: Output
+            }], datalist: [{
+                type: ContentChild,
+                args: [TuiDataListDirective, { read: TemplateRef }]
+            }], errorIconTemplate: [{
+                type: ViewChild,
+                args: [`errorIcon`]
+            }], scrollerSetter: [{
+                type: ViewChild,
+                args: [TuiScrollbarComponent]
+            }], size: [{
+                type: HostBinding,
+                args: [`attr.data-size`]
+            }], labelOutside: [{
+                type: HostBinding,
+                args: [`class._label-outside`]
+            }] } });
 
-let TuiInputTagModule = class TuiInputTagModule {
-};
-TuiInputTagModule = __decorate([
-    NgModule({
-        imports: [
+class TuiInputTagModule {
+}
+TuiInputTagModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiInputTagModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+TuiInputTagModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiInputTagModule, declarations: [TuiInputTagComponent], imports: [CommonModule,
+        FormsModule,
+        PolymorpheusModule,
+        TuiFocusableModule,
+        TuiHoveredModule,
+        TuiActiveZoneModule,
+        TuiSvgModule,
+        TuiScrollbarModule,
+        TuiTooltipModule,
+        TuiHostedDropdownModule,
+        TuiTagModule,
+        TuiWrapperModule], exports: [TuiInputTagComponent] });
+TuiInputTagModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiInputTagModule, providers: [TuiScrollService], imports: [[
             CommonModule,
             FormsModule,
             PolymorpheusModule,
@@ -456,16 +480,33 @@ TuiInputTagModule = __decorate([
             TuiHostedDropdownModule,
             TuiTagModule,
             TuiWrapperModule,
-        ],
-        providers: [TuiScrollService],
-        declarations: [TuiInputTagComponent],
-        exports: [TuiInputTagComponent],
-    })
-], TuiInputTagModule);
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiInputTagModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                        PolymorpheusModule,
+                        TuiFocusableModule,
+                        TuiHoveredModule,
+                        TuiActiveZoneModule,
+                        TuiSvgModule,
+                        TuiScrollbarModule,
+                        TuiTooltipModule,
+                        TuiHostedDropdownModule,
+                        TuiTagModule,
+                        TuiWrapperModule,
+                    ],
+                    providers: [TuiScrollService],
+                    declarations: [TuiInputTagComponent],
+                    exports: [TuiInputTagComponent],
+                }]
+        }] });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { TUI_INPUT_TAG_DEFAULT_OPTIONS, TUI_INPUT_TAG_OPTIONS, TuiInputTagComponent, TuiInputTagModule };
+export { TUI_INPUT_TAG_DEFAULT_OPTIONS, TUI_INPUT_TAG_OPTIONS, TuiInputTagComponent, TuiInputTagModule, tuiInputTagOptionsProvider };
 //# sourceMappingURL=taiga-ui-kit-components-input-tag.js.map