@taiga-ui/kit 4.52.0-canary.216e347 → 4.52.0-canary.217a686

package/fesm2022/taiga-ui-kit-components-input-chip.mjs

@@ -1,16 +1,18 @@
-import { NgIf } from '@angular/common';
+import { TuiItem } from '@taiga-ui/cdk/directives/item';
+import { TuiLabel } from '@taiga-ui/core/components/label';
+import { TUI_TEXTFIELD_OPTIONS, TuiTextfieldMultiComponent, tuiAsTextfieldAccessor, TuiTextfieldComponent, TuiTextfieldOptionsDirective } from '@taiga-ui/core/components/textfield';
+import { TuiDropdownDirective, TuiDropdownOpen, tuiDropdownEnabled, TuiDropdownContent } from '@taiga-ui/core/portals/dropdown';
 import * as i0 from '@angular/core';
-import { inject, signal, computed, ElementRef, Component, ChangeDetectionStrategy, ViewChild, Input, Directive } from '@angular/core';
+import { inject, viewChild, ElementRef, signal, computed, input, ChangeDetectionStrategy, Component, Directive } from '@angular/core';
 import * as i2 from '@angular/forms';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { TUI_IS_MOBILE, tuiFallbackValueProvider } from '@taiga-ui/cdk/tokens';
-import { tuiDirectiveBinding, tuiIsString } from '@taiga-ui/cdk/utils/miscellaneous';
+import { tuiDirectiveBinding, tuiCreateOptions } from '@taiga-ui/cdk/utils/di';
+import { tuiIsString, tuiSanitizeText } from '@taiga-ui/cdk/utils/miscellaneous';
 import { TuiButton } from '@taiga-ui/core/components/button';
-import * as i2$1 from '@taiga-ui/core/components/textfield';
-import { TUI_TEXTFIELD_OPTIONS, TuiTextfieldComponent, TuiTextfieldMultiComponent, tuiAsTextfieldAccessor, TuiTextfieldBase } from '@taiga-ui/core/components/textfield';
 import { TuiAppearance } from '@taiga-ui/core/directives/appearance';
-import { TuiHintDirective, TuiHintOverflow } from '@taiga-ui/core/directives/hint';
 import { TUI_ITEMS_HANDLERS } from '@taiga-ui/core/directives/items-handlers';
+import { TuiHintDirective, TuiHintOverflow } from '@taiga-ui/core/portals/hint';
 import { TUI_COMMON_ICONS } from '@taiga-ui/core/tokens';
 import * as i1 from '@taiga-ui/kit/components/chip';
 import { TuiChip } from '@taiga-ui/kit/components/chip';
@@ -20,38 +22,37 @@ import { injectContext } from '@taiga-ui/polymorpheus';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { TuiControl, tuiAsControl } from '@taiga-ui/cdk/classes';
 import { TuiActiveZone } from '@taiga-ui/cdk/directives/active-zone';
-import * as i1$1 from '@taiga-ui/cdk/directives/native-validator';
-import { TuiNativeValidator } from '@taiga-ui/cdk/directives/native-validator';
 import { tuiInjectElement, tuiGetClipboardDataText } from '@taiga-ui/cdk/utils/dom';
-import { TuiDropdownDirective, tuiDropdownOpen, TuiDropdownOpen } from '@taiga-ui/core/directives/dropdown';
+import * as i1$1 from '@taiga-ui/core/components/input';
+import { TuiWithInput } from '@taiga-ui/core/components/input';
 import { filter } from 'rxjs';
-import { tuiCreateOptions } from '@taiga-ui/cdk/utils/di';
 
 class TuiInputChipComponent {
     constructor() {
         this.options = inject(TUI_TEXTFIELD_OPTIONS);
         this.context = injectContext();
         this.value = tuiInjectValue();
+        this.input = viewChild(TuiChip, { read: ElementRef });
         this.icons = inject(TUI_COMMON_ICONS);
         this.mobile = inject(TUI_IS_MOBILE);
         this.internal = signal(this.context.$implicit.item);
         this.editing = signal(false);
         this.hint = inject(TuiHintDirective, { self: true, optional: true });
         this.handlers = inject(TUI_ITEMS_HANDLERS);
-        this.textfield = inject(TuiTextfieldComponent);
+        this.textfield = inject(TuiTextfieldMultiComponent);
         this.disabled = tuiDirectiveBinding(TuiAppearance, 'tuiAppearanceState', computed(() => this.handlers.disabledItemHandler()(this.context.$implicit.item)
             ? 'disabled'
             : null));
         this.size = tuiDirectiveBinding(TuiChip, 'size', computed(() => (this.options.size() === 'l' ? 's' : 'xs')));
-        this.editable = true;
+        this.editable = input(true);
     }
     get index() {
         return this.context.$implicit.index;
     }
     delete() {
-        this.textfield.cva?.onChange(this.value().filter((_, i) => i !== this.index));
+        this.textfield.cva()?.onChange(this.value().filter((_, i) => i !== this.index));
         if (!this.mobile) {
-            this.textfield.input?.nativeElement.focus({ preventScroll: true });
+            this.textfield.input()?.nativeElement.focus({ preventScroll: true });
         }
     }
     save() {
@@ -62,31 +63,30 @@ class TuiInputChipComponent {
             return;
         }
         const value = this.value().map((item, index) => index === this.index ? this.internal() : item);
-        this.textfield.cva?.onChange(value);
+        this.textfield.cva()?.onChange(value);
         this.editing.set(false);
-        this.textfield.input?.nativeElement.focus({ preventScroll: true });
+        this.textfield.input()?.nativeElement.focus({ preventScroll: true });
     }
     cancel() {
         this.editing.set(false);
         this.internal.set(this.context.$implicit.item);
     }
     edit() {
-        if (!this.editable ||
-            !this.textfield.cva?.interactive() ||
+        if (!this.editable() ||
+            !this.textfield.cva()?.interactive() ||
             !tuiIsString(this.internal())) {
             return;
         }
         this.editing.set(true);
-        setTimeout(() => this.input?.nativeElement.focus());
+        setTimeout(() => this.input()?.nativeElement.focus());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiInputChipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiInputChipComponent, isStandalone: true, selector: "tui-input-chip", inputs: { editable: "editable" }, host: { attributes: { "tuiChip": "" }, listeners: { "click": "editing() && $event.stopPropagation()", "keydown.backspace.prevent": "delete()", "keydown.enter.prevent": "edit()", "dblclick": "edit()" }, properties: { "class._edit": "editing()", "attr.tabIndex": "disabled() ? null : -1" }, classAttribute: "tui-interactive" }, viewQueries: [{ propertyName: "input", first: true, predicate: TuiChip, descendants: true, read: ElementRef }], hostDirectives: [{ directive: i1.TuiChip }], ngImport: i0, template: "<input\n    appearance=\"\"\n    enterkeyhint=\"enter\"\n    tuiChip\n    class=\"t-input\"\n    [disabled]=\"!editing()\"\n    [ngModel]=\"internal()\"\n    [ngModelOptions]=\"{standalone: true}\"\n    (blur)=\"cancel()\"\n    (keydown.enter)=\"save()\"\n    (keydown.esc)=\"cancel()\"\n    (keydown.stop)=\"(0)\"\n    (ngModelChange)=\"internal.set($event)\"\n/>\n<div\n    tuiFade\n    tuiFadeOffset=\"0.5rem\"\n    class=\"t-text\"\n    [tuiHintOverflow]=\"hint?.content() ? null : handlers.stringify()(internal())\"\n    (mousedown.prevent.zoneless)=\"(0)\"\n>\n    {{ handlers.stringify()(internal()) }}\n</div>\n<button\n    *ngIf=\"textfield.cva?.interactive() && !editing() && !disabled()\"\n    tabIndex=\"-1\"\n    tuiIconButton\n    type=\"button\"\n    [iconStart]=\"icons.close\"\n    (click.stop)=\"delete()\"\n    (pointerdown.prevent.stop.zoneless)=\"(0)\"\n>\n    Remove\n</button>\n", styles: [":host{cursor:pointer;margin:.125rem 0;margin-inline-end:.25rem}:host[data-state=disabled]{pointer-events:none}:host .t-input{padding:0;text-indent:.375rem;transition:none;color:var(--tui-text-primary);cursor:text;outline:none}:host .t-input:disabled{visibility:hidden}:host._edit{background:transparent}:host._edit .t-text{pointer-events:none;visibility:hidden}:host._edit:before{color:transparent;transition:none}:host-context(tui-textfield[data-size=\"s\"]){left:-.375rem;inset-inline-start:-.375rem;margin:.0625rem 0;margin-inline-end:.125rem}:host-context(tui-textfield[data-size=\"m\"]){left:-.125rem;inset-inline-start:-.125rem}:host-context(tui-textfield[data-size=\"l\"]){left:-.25rem;inset-inline-start:-.25rem}:host-context(tui-textfield[data-size=\"l\"]) .t-input{text-indent:.625rem}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: TuiButton, selector: "a[tuiButton],button[tuiButton],a[tuiIconButton],button[tuiIconButton]", inputs: ["size"] }, { kind: "directive", type: TuiChip, selector: "tui-chip,[tuiChip]", inputs: ["size"] }, { kind: "directive", type: TuiFade, selector: "[tuiFade]", inputs: ["tuiFadeHeight", "tuiFadeSize", "tuiFadeOffset", "tuiFade"] }, { kind: "directive", type: TuiHintOverflow, selector: "[tuiHintOverflow]", inputs: ["tuiHintOverflow"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiInputChipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: TuiInputChipComponent, isStandalone: true, selector: "tui-input-chip", inputs: { editable: { classPropertyName: "editable", publicName: "editable", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "tuiChip": "" }, listeners: { "click": "editing() && $event.stopPropagation()", "keydown.backspace.prevent": "delete()", "keydown.enter.prevent": "edit()", "dblclick": "edit()" }, properties: { "class._edit": "editing()", "attr.tabIndex": "disabled() ? null : -1" }, classAttribute: "tui-interactive" }, viewQueries: [{ propertyName: "input", first: true, predicate: TuiChip, descendants: true, read: ElementRef, isSignal: true }], hostDirectives: [{ directive: i1.TuiChip }], ngImport: i0, template: "<input\n    appearance=\"\"\n    enterkeyhint=\"enter\"\n    tuiChip\n    class=\"t-input\"\n    [disabled]=\"!editing()\"\n    [ngModel]=\"internal()\"\n    [ngModelOptions]=\"{standalone: true}\"\n    (blur)=\"cancel()\"\n    (keydown.enter)=\"save()\"\n    (keydown.esc)=\"cancel()\"\n    (keydown.stop)=\"(0)\"\n    (ngModelChange)=\"internal.set($event)\"\n/>\n<div\n    tuiFade\n    tuiFadeOffset=\"0.5rem\"\n    class=\"t-text\"\n    [tuiHintOverflow]=\"hint?.content() ? null : handlers.stringify()(internal())\"\n    (mousedown.prevent.zoneless)=\"(0)\"\n>\n    {{ handlers.stringify()(internal()) }}\n</div>\n@if (textfield.cva()?.interactive() && !editing() && !disabled()) {\n    <button\n        tabIndex=\"-1\"\n        tuiIconButton\n        type=\"button\"\n        [iconStart]=\"icons.close\"\n        (click.stop)=\"delete()\"\n        (pointerdown.prevent.stop.zoneless)=\"(0)\"\n    >\n        Remove\n    </button>\n}\n", styles: [":host{cursor:pointer;margin:.125rem 0;margin-inline-end:.25rem}:host[data-state=disabled]{pointer-events:none}:host .t-input{padding:0;text-indent:.375rem;transition:none;color:var(--tui-text-primary);cursor:text;outline:none}:host .t-input:disabled{visibility:hidden}:host._edit{background:transparent}:host._edit .t-text{pointer-events:none;visibility:hidden}:host._edit:before{color:transparent;transition:none}:host-context(tui-textfield[data-size=\"s\"]){left:-.375rem;inset-inline-start:-.375rem;margin:.0625rem 0;margin-inline-end:.125rem}:host-context(tui-textfield[data-size=\"m\"]){left:-.125rem;inset-inline-start:-.125rem}:host-context(tui-textfield[data-size=\"l\"]){left:-.25rem;inset-inline-start:-.25rem}:host-context(tui-textfield[data-size=\"l\"]) .t-input{text-indent:.625rem}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: TuiButton, selector: "a[tuiButton],button[tuiButton],a[tuiIconButton],button[tuiIconButton]", inputs: ["size"] }, { kind: "directive", type: TuiChip, selector: "tui-chip,[tuiChip]", inputs: ["size"] }, { kind: "directive", type: TuiFade, selector: "[tuiFade]", inputs: ["tuiFadeHeight", "tuiFadeSize", "tuiFadeOffset", "tuiFade"] }, { kind: "directive", type: TuiHintOverflow, selector: "[tuiHintOverflow]", inputs: ["tuiHintOverflow"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiInputChipComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiInputChipComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'tui-input-chip', imports: [
+            args: [{ selector: 'tui-input-chip', imports: [
                         FormsModule,
-                        NgIf,
                         ReactiveFormsModule,
                         TuiButton,
                         TuiChip,
@@ -101,13 +101,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         '(keydown.backspace.prevent)': 'delete()',
                         '(keydown.enter.prevent)': 'edit()',
                         '(dblclick)': 'edit()',
-                    }, template: "<input\n    appearance=\"\"\n    enterkeyhint=\"enter\"\n    tuiChip\n    class=\"t-input\"\n    [disabled]=\"!editing()\"\n    [ngModel]=\"internal()\"\n    [ngModelOptions]=\"{standalone: true}\"\n    (blur)=\"cancel()\"\n    (keydown.enter)=\"save()\"\n    (keydown.esc)=\"cancel()\"\n    (keydown.stop)=\"(0)\"\n    (ngModelChange)=\"internal.set($event)\"\n/>\n<div\n    tuiFade\n    tuiFadeOffset=\"0.5rem\"\n    class=\"t-text\"\n    [tuiHintOverflow]=\"hint?.content() ? null : handlers.stringify()(internal())\"\n    (mousedown.prevent.zoneless)=\"(0)\"\n>\n    {{ handlers.stringify()(internal()) }}\n</div>\n<button\n    *ngIf=\"textfield.cva?.interactive() && !editing() && !disabled()\"\n    tabIndex=\"-1\"\n    tuiIconButton\n    type=\"button\"\n    [iconStart]=\"icons.close\"\n    (click.stop)=\"delete()\"\n    (pointerdown.prevent.stop.zoneless)=\"(0)\"\n>\n    Remove\n</button>\n", styles: [":host{cursor:pointer;margin:.125rem 0;margin-inline-end:.25rem}:host[data-state=disabled]{pointer-events:none}:host .t-input{padding:0;text-indent:.375rem;transition:none;color:var(--tui-text-primary);cursor:text;outline:none}:host .t-input:disabled{visibility:hidden}:host._edit{background:transparent}:host._edit .t-text{pointer-events:none;visibility:hidden}:host._edit:before{color:transparent;transition:none}:host-context(tui-textfield[data-size=\"s\"]){left:-.375rem;inset-inline-start:-.375rem;margin:.0625rem 0;margin-inline-end:.125rem}:host-context(tui-textfield[data-size=\"m\"]){left:-.125rem;inset-inline-start:-.125rem}:host-context(tui-textfield[data-size=\"l\"]){left:-.25rem;inset-inline-start:-.25rem}:host-context(tui-textfield[data-size=\"l\"]) .t-input{text-indent:.625rem}\n"] }]
-        }], propDecorators: { input: [{
-                type: ViewChild,
-                args: [TuiChip, { read: ElementRef }]
-            }], editable: [{
-                type: Input
-            }] } });
+                    }, template: "<input\n    appearance=\"\"\n    enterkeyhint=\"enter\"\n    tuiChip\n    class=\"t-input\"\n    [disabled]=\"!editing()\"\n    [ngModel]=\"internal()\"\n    [ngModelOptions]=\"{standalone: true}\"\n    (blur)=\"cancel()\"\n    (keydown.enter)=\"save()\"\n    (keydown.esc)=\"cancel()\"\n    (keydown.stop)=\"(0)\"\n    (ngModelChange)=\"internal.set($event)\"\n/>\n<div\n    tuiFade\n    tuiFadeOffset=\"0.5rem\"\n    class=\"t-text\"\n    [tuiHintOverflow]=\"hint?.content() ? null : handlers.stringify()(internal())\"\n    (mousedown.prevent.zoneless)=\"(0)\"\n>\n    {{ handlers.stringify()(internal()) }}\n</div>\n@if (textfield.cva()?.interactive() && !editing() && !disabled()) {\n    <button\n        tabIndex=\"-1\"\n        tuiIconButton\n        type=\"button\"\n        [iconStart]=\"icons.close\"\n        (click.stop)=\"delete()\"\n        (pointerdown.prevent.stop.zoneless)=\"(0)\"\n    >\n        Remove\n    </button>\n}\n", styles: [":host{cursor:pointer;margin:.125rem 0;margin-inline-end:.25rem}:host[data-state=disabled]{pointer-events:none}:host .t-input{padding:0;text-indent:.375rem;transition:none;color:var(--tui-text-primary);cursor:text;outline:none}:host .t-input:disabled{visibility:hidden}:host._edit{background:transparent}:host._edit .t-text{pointer-events:none;visibility:hidden}:host._edit:before{color:transparent;transition:none}:host-context(tui-textfield[data-size=\"s\"]){left:-.375rem;inset-inline-start:-.375rem;margin:.0625rem 0;margin-inline-end:.125rem}:host-context(tui-textfield[data-size=\"m\"]){left:-.125rem;inset-inline-start:-.125rem}:host-context(tui-textfield[data-size=\"l\"]){left:-.25rem;inset-inline-start:-.25rem}:host-context(tui-textfield[data-size=\"l\"]) .t-input{text-indent:.625rem}\n"] }]
+        }] });
 
 const TUI_INPUT_CHIP_DEFAULT_OPTIONS = {
     separator: ',',
@@ -115,34 +110,34 @@ const TUI_INPUT_CHIP_DEFAULT_OPTIONS = {
 };
 const [TUI_INPUT_CHIP_OPTIONS, tuiInputChipOptionsProvider] = tuiCreateOptions(TUI_INPUT_CHIP_DEFAULT_OPTIONS);
 
-// TODO(v5): remove base component after angular update
-class TuiInputChipBaseDirective extends TuiControl {
+// TODO: Consider making input[tuiTextfieldMulti] to reuse here and in InputDateMulti
+class TuiInputChipDirective extends TuiControl {
     constructor() {
         super(...arguments);
         this.options = inject(TUI_INPUT_CHIP_OPTIONS);
         this.mobile = inject(TUI_IS_MOBILE);
         this.dropdown = inject(TuiDropdownDirective);
         this.textfield = inject(TuiTextfieldMultiComponent);
-        this.open = tuiDropdownOpen();
+        this.open = inject(TuiDropdownOpen).open;
         this.handlers = inject(TUI_ITEMS_HANDLERS);
-        this.enabled = tuiDirectiveBinding(TuiDropdownOpen, 'tuiDropdownEnabled', this.interactive, {});
+        this.dropdownEnabled = tuiDropdownEnabled(this.interactive);
         this.sub = inject(TuiActiveZone)
             .tuiActiveZoneChange.pipe(filter((active) => !active && !this.el.matches('select')), takeUntilDestroyed())
             .subscribe(() => {
             this.onEnter();
             this.textfield.value.set('');
         });
-        this.separator = this.options.separator;
-        this.unique = this.options.unique;
+        this.separator = input(this.options.separator);
+        this.unique = input(this.options.unique);
         this.el = tuiInjectElement();
     }
     setValue(value) {
         this.textfield.value.set('');
-        this.onChange(this.unique ? Array.from(new Set(value.reverse())).reverse() : value);
+        this.onChange(this.unique() ? Array.from(new Set(value.reverse())).reverse() : value);
     }
     onEnter() {
         const value = this.textfield.value().trim();
-        const items = this.separator ? value.split(this.separator) : [value];
+        const items = this.separator() ? value.split(this.separator()) : [value];
         const valid = items.filter((item) => item && !this.handlers.disabledItemHandler()(item));
         if (!value || !valid.length) {
             return;
@@ -151,8 +146,8 @@ class TuiInputChipBaseDirective extends TuiControl {
         this.scrollTo();
     }
     onInput() {
-        this.open.set(!!this.dropdown.content);
-        if (this.separator && this.textfield.value().match(this.separator)) {
+        this.open.set(!!this.dropdown.content());
+        if (this.separator() && this.textfield.value().match(this.separator())) {
             this.onEnter();
         }
         else {
@@ -163,16 +158,21 @@ class TuiInputChipBaseDirective extends TuiControl {
         const value = 'dataTransfer' in event
             ? event.dataTransfer?.getData('text/plain') || ''
             : tuiGetClipboardDataText(event);
-        this.textfield.value.set(value);
+        this.textfield.value.set(tuiSanitizeText(value));
         this.onEnter();
     }
     onBackspace(key) {
         // (keydown.backspace) doesn't emit event on empty input in ios safari
-        if (key === 'Backspace' &&
-            !this.textfield.value() &&
-            this.interactive() &&
-            (this.mobile || !this.textfield.item)) {
-            this.onChange(this.value().slice(0, -1));
+        if (key === 'Backspace' && !this.textfield.value() && this.interactive()) {
+            if (this.mobile || !this.textfield.item()) {
+                this.onChange(this.value().slice(0, -1));
+            }
+            else {
+                this.el.dispatchEvent(new KeyboardEvent('keydown', {
+                    key: 'ArrowLeft',
+                    bubbles: true,
+                }));
+            }
         }
     }
     scrollTo() {
@@ -185,61 +185,50 @@ class TuiInputChipBaseDirective extends TuiControl {
             });
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiInputChipBaseDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: TuiInputChipBaseDirective, isStandalone: true, inputs: { separator: "separator", unique: "unique" }, host: { attributes: { "enterkeyhint": "enter" }, listeners: { "keydown.enter.prevent": "onEnter()", "keydown.zoneless": "onBackspace($event.key)", "input": "onInput()", "paste.prevent": "onPaste($event)", "drop.prevent": "onPaste($event)" }, properties: { "disabled": "disabled()" } }, usesInheritance: true, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiInputChipBaseDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    standalone: true,
-                    host: {
-                        enterkeyhint: 'enter',
-                        '[disabled]': 'disabled()',
-                        '(keydown.enter.prevent)': 'onEnter()',
-                        '(keydown.zoneless)': 'onBackspace($event.key)',
-                        '(input)': 'onInput()',
-                        '(paste.prevent)': 'onPaste($event)',
-                        '(drop.prevent)': 'onPaste($event)',
-                    },
-                }]
-        }], propDecorators: { separator: [{
-                type: Input
-            }], unique: [{
-                type: Input
-            }] } });
-class TuiInputChipDirective extends TuiInputChipBaseDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiInputChipDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: TuiInputChipDirective, isStandalone: true, selector: "input[tuiInputChip]", providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiInputChipDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.17", type: TuiInputChipDirective, isStandalone: true, selector: "input[tuiInputChip]", inputs: { separator: { classPropertyName: "separator", publicName: "separator", isSignal: true, isRequired: false, transformFunction: null }, unique: { classPropertyName: "unique", publicName: "unique", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "enterkeyhint": "enter" }, listeners: { "keydown.enter.prevent": "onEnter()", "keydown.zoneless": "onBackspace($event.key)", "input": "onInput()", "paste.prevent": "onPaste($event)", "drop.prevent": "onPaste($event)", "focus": "scrollTo()" }, properties: { "disabled": "disabled()" } }, providers: [
             tuiAsControl(TuiInputChipDirective),
             tuiFallbackValueProvider([]),
             tuiAsTextfieldAccessor(TuiInputChipDirective),
-        ], usesInheritance: true, hostDirectives: [{ directive: i1$1.TuiNativeValidator }, { directive: i2$1.TuiTextfieldBase, inputs: ["invalid", "invalid", "focused", "focused", "readOnly", "readOnly", "state", "state"] }], ngImport: i0 }); }
+        ], usesInheritance: true, hostDirectives: [{ directive: i1$1.TuiWithInput }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiInputChipDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiInputChipDirective, decorators: [{
             type: Directive,
             args: [{
-                    standalone: true,
                     selector: 'input[tuiInputChip]',
                     providers: [
                         tuiAsControl(TuiInputChipDirective),
                         tuiFallbackValueProvider([]),
                         tuiAsTextfieldAccessor(TuiInputChipDirective),
                     ],
-                    hostDirectives: [
-                        TuiNativeValidator,
-                        {
-                            directive: TuiTextfieldBase,
-                            inputs: ['invalid', 'focused', 'readOnly', 'state'],
-                        },
-                    ],
+                    hostDirectives: [TuiWithInput],
+                    host: {
+                        enterkeyhint: 'enter',
+                        '[disabled]': 'disabled()',
+                        '(keydown.enter.prevent)': 'onEnter()',
+                        '(keydown.zoneless)': 'onBackspace($event.key)',
+                        '(input)': 'onInput()',
+                        '(paste.prevent)': 'onPaste($event)',
+                        '(drop.prevent)': 'onPaste($event)',
+                        '(focus)': 'scrollTo()',
+                    },
                 }]
         }] });
 
-const TuiInputChip = [TuiInputChipDirective, TuiInputChipComponent];
+const TuiInputChip = [
+    TuiItem,
+    TuiLabel,
+    TuiTextfieldComponent,
+    TuiTextfieldOptionsDirective,
+    TuiTextfieldMultiComponent,
+    TuiDropdownContent,
+    TuiInputChipDirective,
+    TuiInputChipComponent,
+];
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { TUI_INPUT_CHIP_DEFAULT_OPTIONS, TUI_INPUT_CHIP_OPTIONS, TuiInputChip, TuiInputChipBaseDirective, TuiInputChipComponent, TuiInputChipDirective, tuiInputChipOptionsProvider };
+export { TUI_INPUT_CHIP_DEFAULT_OPTIONS, TUI_INPUT_CHIP_OPTIONS, TuiInputChip, TuiInputChipComponent, TuiInputChipDirective, tuiInputChipOptionsProvider };
 //# sourceMappingURL=taiga-ui-kit-components-input-chip.mjs.map

package/fesm2022/taiga-ui-kit-components-input-chip.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"taiga-ui-kit-components-input-chip.mjs","sources":["../../../projects/kit/components/input-chip/input-chip.component.ts","../../../projects/kit/components/input-chip/input-chip.template.html","../../../projects/kit/components/input-chip/input-chip.options.ts","../../../projects/kit/components/input-chip/input-chip.directive.ts","../../../projects/kit/components/input-chip/input-chip.ts","../../../projects/kit/components/input-chip/taiga-ui-kit-components-input-chip.ts"],"sourcesContent":["import {NgIf} from '@angular/common';\nimport {\n    ChangeDetectionStrategy,\n    Component,\n    computed,\n    ElementRef,\n    inject,\n    Input,\n    signal,\n    ViewChild,\n} from '@angular/core';\nimport {FormsModule, ReactiveFormsModule} from '@angular/forms';\nimport {TUI_IS_MOBILE} from '@taiga-ui/cdk/tokens';\nimport {type TuiContext} from '@taiga-ui/cdk/types';\nimport {tuiDirectiveBinding, tuiIsString} from '@taiga-ui/cdk/utils/miscellaneous';\nimport {TuiButton} from '@taiga-ui/core/components/button';\nimport {\n    TUI_TEXTFIELD_OPTIONS,\n    TuiTextfieldComponent,\n    type TuiTextfieldItem,\n} from '@taiga-ui/core/components/textfield';\nimport {TuiAppearance} from '@taiga-ui/core/directives/appearance';\nimport {TuiHintDirective, TuiHintOverflow} from '@taiga-ui/core/directives/hint';\nimport {\n    TUI_ITEMS_HANDLERS,\n    type TuiItemsHandlers,\n} from '@taiga-ui/core/directives/items-handlers';\nimport {TUI_COMMON_ICONS} from '@taiga-ui/core/tokens';\nimport {TuiChip} from '@taiga-ui/kit/components/chip';\nimport {TuiFade} from '@taiga-ui/kit/directives/fade';\nimport {tuiInjectValue} from '@taiga-ui/kit/utils';\nimport {injectContext} from '@taiga-ui/polymorpheus';\n\n@Component({\n    standalone: true,\n    selector: 'tui-input-chip',\n    imports: [\n        FormsModule,\n        NgIf,\n        ReactiveFormsModule,\n        TuiButton,\n        TuiChip,\n        TuiFade,\n        TuiHintOverflow,\n    ],\n    templateUrl: './input-chip.template.html',\n    styleUrls: ['./input-chip.styles.less'],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    hostDirectives: [TuiChip],\n    host: {\n        tuiChip: '',\n        class: 'tui-interactive',\n        '[class._edit]': 'editing()',\n        '[attr.tabIndex]': 'disabled() ? null : -1',\n        '(click)': 'editing() && $event.stopPropagation()',\n        '(keydown.backspace.prevent)': 'delete()',\n        '(keydown.enter.prevent)': 'edit()',\n        '(dblclick)': 'edit()',\n    },\n})\nexport class TuiInputChipComponent<T> {\n    @ViewChild(TuiChip, {read: ElementRef})\n    private readonly input?: ElementRef<HTMLInputElement>;\n\n    private readonly options = inject(TUI_TEXTFIELD_OPTIONS);\n    private readonly context = injectContext<TuiContext<TuiTextfieldItem<T>>>();\n    private readonly value = tuiInjectValue<readonly T[]>();\n\n    protected readonly icons = inject(TUI_COMMON_ICONS);\n    protected readonly mobile = inject(TUI_IS_MOBILE);\n    protected readonly internal = signal(this.context.$implicit.item);\n    protected readonly editing = signal(false);\n    protected readonly hint = inject(TuiHintDirective, {self: true, optional: true});\n    protected readonly handlers: TuiItemsHandlers<T> = inject(TUI_ITEMS_HANDLERS);\n    protected readonly textfield = inject(TuiTextfieldComponent);\n\n    protected readonly disabled = tuiDirectiveBinding(\n        TuiAppearance,\n        'tuiAppearanceState',\n        computed(() =>\n            this.handlers.disabledItemHandler()(this.context.$implicit.item)\n                ? 'disabled'\n                : null,\n        ),\n    );\n\n    protected readonly size = tuiDirectiveBinding(\n        TuiChip,\n        'size',\n        computed(() => (this.options.size() === 'l' ? 's' : 'xs')),\n    );\n\n    @Input()\n    public editable = true;\n\n    protected get index(): number {\n        return this.context.$implicit.index;\n    }\n\n    protected delete(): void {\n        this.textfield.cva?.onChange(this.value().filter((_, i) => i !== this.index));\n\n        if (!this.mobile) {\n            this.textfield.input?.nativeElement.focus({preventScroll: true});\n        }\n    }\n\n    protected save(): void {\n        if (!this.internal()) {\n            this.delete();\n        } else if (this.handlers.disabledItemHandler()(this.internal())) {\n            return;\n        }\n\n        const value = this.value().map((item, index) =>\n            index === this.index ? this.internal() : item,\n        );\n\n        this.textfield.cva?.onChange(value);\n        this.editing.set(false);\n        this.textfield.input?.nativeElement.focus({preventScroll: true});\n    }\n\n    protected cancel(): void {\n        this.editing.set(false);\n        this.internal.set(this.context.$implicit.item);\n    }\n\n    protected edit(): void {\n        if (\n            !this.editable ||\n            !this.textfield.cva?.interactive() ||\n            !tuiIsString(this.internal())\n        ) {\n            return;\n        }\n\n        this.editing.set(true);\n        setTimeout(() => this.input?.nativeElement.focus());\n    }\n}\n","<input\n    appearance=\"\"\n    enterkeyhint=\"enter\"\n    tuiChip\n    class=\"t-input\"\n    [disabled]=\"!editing()\"\n    [ngModel]=\"internal()\"\n    [ngModelOptions]=\"{standalone: true}\"\n    (blur)=\"cancel()\"\n    (keydown.enter)=\"save()\"\n    (keydown.esc)=\"cancel()\"\n    (keydown.stop)=\"(0)\"\n    (ngModelChange)=\"internal.set($event)\"\n/>\n<div\n    tuiFade\n    tuiFadeOffset=\"0.5rem\"\n    class=\"t-text\"\n    [tuiHintOverflow]=\"hint?.content() ? null : handlers.stringify()(internal())\"\n    (mousedown.prevent.zoneless)=\"(0)\"\n>\n    {{ handlers.stringify()(internal()) }}\n</div>\n<button\n    *ngIf=\"textfield.cva?.interactive() && !editing() && !disabled()\"\n    tabIndex=\"-1\"\n    tuiIconButton\n    type=\"button\"\n    [iconStart]=\"icons.close\"\n    (click.stop)=\"delete()\"\n    (pointerdown.prevent.stop.zoneless)=\"(0)\"\n>\n    Remove\n</button>\n","import {tuiCreateOptions} from '@taiga-ui/cdk/utils/di';\n\nexport interface TuiInputChipOptions {\n    readonly separator: RegExp | string;\n    readonly unique: boolean;\n}\n\nexport const TUI_INPUT_CHIP_DEFAULT_OPTIONS: TuiInputChipOptions = {\n    separator: ',',\n    unique: true,\n};\n\nexport const [TUI_INPUT_CHIP_OPTIONS, tuiInputChipOptionsProvider] = tuiCreateOptions(\n    TUI_INPUT_CHIP_DEFAULT_OPTIONS,\n);\n","import {Directive, inject, Input} from '@angular/core';\nimport {takeUntilDestroyed} from '@angular/core/rxjs-interop';\nimport {tuiAsControl, TuiControl} from '@taiga-ui/cdk/classes';\nimport {TuiActiveZone} from '@taiga-ui/cdk/directives/active-zone';\nimport {TuiNativeValidator} from '@taiga-ui/cdk/directives/native-validator';\nimport {TUI_IS_MOBILE, tuiFallbackValueProvider} from '@taiga-ui/cdk/tokens';\nimport {tuiGetClipboardDataText, tuiInjectElement} from '@taiga-ui/cdk/utils/dom';\nimport {tuiDirectiveBinding} from '@taiga-ui/cdk/utils/miscellaneous';\nimport {\n    tuiAsTextfieldAccessor,\n    type TuiTextfieldAccessor,\n    TuiTextfieldBase,\n    TuiTextfieldMultiComponent,\n} from '@taiga-ui/core/components/textfield';\nimport {\n    TuiDropdownDirective,\n    TuiDropdownOpen,\n    tuiDropdownOpen,\n} from '@taiga-ui/core/directives/dropdown';\nimport {\n    TUI_ITEMS_HANDLERS,\n    type TuiItemsHandlers,\n} from '@taiga-ui/core/directives/items-handlers';\nimport {filter} from 'rxjs';\n\nimport {TUI_INPUT_CHIP_OPTIONS} from './input-chip.options';\n\n// TODO(v5): remove base component after angular update\n@Directive({\n    standalone: true,\n    host: {\n        enterkeyhint: 'enter',\n        '[disabled]': 'disabled()',\n        '(keydown.enter.prevent)': 'onEnter()',\n        '(keydown.zoneless)': 'onBackspace($event.key)',\n        '(input)': 'onInput()',\n        '(paste.prevent)': 'onPaste($event)',\n        '(drop.prevent)': 'onPaste($event)',\n    },\n})\nexport class TuiInputChipBaseDirective<T>\n    extends TuiControl<T[]>\n    implements TuiTextfieldAccessor<T[]>\n{\n    private readonly options = inject(TUI_INPUT_CHIP_OPTIONS);\n    private readonly mobile = inject(TUI_IS_MOBILE);\n    private readonly dropdown = inject(TuiDropdownDirective);\n\n    protected readonly textfield = inject(TuiTextfieldMultiComponent);\n    protected readonly open = tuiDropdownOpen();\n    protected readonly handlers: TuiItemsHandlers<T> = inject(TUI_ITEMS_HANDLERS);\n    protected readonly enabled = tuiDirectiveBinding(\n        TuiDropdownOpen,\n        'tuiDropdownEnabled',\n        this.interactive,\n        {},\n    );\n\n    protected readonly sub = inject(TuiActiveZone)\n        .tuiActiveZoneChange.pipe(\n            filter((active) => !active && !this.el.matches('select')),\n            takeUntilDestroyed(),\n        )\n        .subscribe(() => {\n            this.onEnter();\n            this.textfield.value.set('');\n        });\n\n    @Input()\n    public separator = this.options.separator;\n\n    @Input()\n    public unique = this.options.unique;\n\n    public readonly el = tuiInjectElement<HTMLInputElement>();\n\n    public setValue(value: T[]): void {\n        this.textfield.value.set('');\n        this.onChange(\n            this.unique ? Array.from(new Set(value.reverse())).reverse() : value,\n        );\n    }\n\n    protected onEnter(): void {\n        const value = this.textfield.value().trim();\n        const items: any[] = this.separator ? value.split(this.separator) : [value];\n        const valid = items.filter(\n            (item) => item && !this.handlers.disabledItemHandler()(item),\n        );\n\n        if (!value || !valid.length) {\n            return;\n        }\n\n        this.setValue([...this.value(), ...valid]);\n        this.scrollTo();\n    }\n\n    protected onInput(): void {\n        this.open.set(!!this.dropdown.content);\n\n        if (this.separator && this.textfield.value().match(this.separator)) {\n            this.onEnter();\n        } else {\n            this.scrollTo();\n        }\n    }\n\n    protected onPaste(event: ClipboardEvent | DragEvent): void {\n        const value =\n            'dataTransfer' in event\n                ? event.dataTransfer?.getData('text/plain') || ''\n                : tuiGetClipboardDataText(event);\n\n        this.textfield.value.set(value);\n        this.onEnter();\n    }\n\n    protected onBackspace(key: string): void {\n        // (keydown.backspace) doesn't emit event on empty input in ios safari\n        if (\n            key === 'Backspace' &&\n            !this.textfield.value() &&\n            this.interactive() &&\n            (this.mobile || !this.textfield.item)\n        ) {\n            this.onChange(this.value().slice(0, -1));\n        }\n    }\n\n    protected scrollTo(): void {\n        const sign = this.textfield.el.matches('[dir=\"rtl\"] :scope') ? -1 : 1;\n\n        // Allow change detection to run and add new tag to DOM\n        setTimeout(() => {\n            this.textfield.el.scrollTo({\n                left: sign * Number.MAX_SAFE_INTEGER,\n                top: Number.MAX_SAFE_INTEGER,\n            });\n        });\n    }\n}\n\n@Directive({\n    standalone: true,\n    selector: 'input[tuiInputChip]',\n    providers: [\n        tuiAsControl(TuiInputChipDirective),\n        tuiFallbackValueProvider([]),\n        tuiAsTextfieldAccessor(TuiInputChipDirective),\n    ],\n    hostDirectives: [\n        TuiNativeValidator,\n        {\n            directive: TuiTextfieldBase,\n            inputs: ['invalid', 'focused', 'readOnly', 'state'],\n        },\n    ],\n})\nexport class TuiInputChipDirective<T> extends TuiInputChipBaseDirective<T> {}\n","import {TuiInputChipComponent} from './input-chip.component';\nimport {TuiInputChipDirective} from './input-chip.directive';\n\nexport const TuiInputChip = [TuiInputChipDirective, TuiInputChipComponent] as const;\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["i1","i2"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiCA,MA2Ba,qBAAqB,CAAA;AA3BlC,IAAA,WAAA,GAAA;AA+BqB,QAAA,IAAA,CAAA,OAAO,GAAG,MAAM,CAAC,qBAAqB,CAAC,CAAC;QACxC,IAAO,CAAA,OAAA,GAAG,aAAa,EAAmC,CAAC;QAC3D,IAAK,CAAA,KAAA,GAAG,cAAc,EAAgB,CAAC;AAErC,QAAA,IAAA,CAAA,KAAK,GAAG,MAAM,CAAC,gBAAgB,CAAC,CAAC;AACjC,QAAA,IAAA,CAAA,MAAM,GAAG,MAAM,CAAC,aAAa,CAAC,CAAC;QAC/B,IAAQ,CAAA,QAAA,GAAG,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC;AAC/C,QAAA,IAAA,CAAA,OAAO,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;AACxB,QAAA,IAAA,CAAA,IAAI,GAAG,MAAM,CAAC,gBAAgB,EAAE,EAAC,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAC,CAAC,CAAC;AAC9D,QAAA,IAAA,CAAA,QAAQ,GAAwB,MAAM,CAAC,kBAAkB,CAAC,CAAC;AAC3D,QAAA,IAAA,CAAA,SAAS,GAAG,MAAM,CAAC,qBAAqB,CAAC,CAAC;QAE1C,IAAQ,CAAA,QAAA,GAAG,mBAAmB,CAC7C,aAAa,EACb,oBAAoB,EACpB,QAAQ,CAAC,MACL,IAAI,CAAC,QAAQ,CAAC,mBAAmB,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,IAAI,CAAC;AAC5D,cAAE,UAAU;AACZ,cAAE,IAAI,CACb,CACJ,CAAC;AAEiB,QAAA,IAAA,CAAA,IAAI,GAAG,mBAAmB,CACzC,OAAO,EACP,MAAM,EACN,QAAQ,CAAC,OAAO,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,KAAK,GAAG,GAAG,GAAG,GAAG,IAAI,CAAC,CAAC,CAC7D,CAAC;QAGK,IAAQ,CAAA,QAAA,GAAG,IAAI,CAAC;AA+C1B,KAAA;AA7CG,IAAA,IAAc,KAAK,GAAA;AACf,QAAA,OAAO,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,KAAK,CAAC;KACvC;IAES,MAAM,GAAA;AACZ,QAAA,IAAI,CAAC,SAAS,CAAC,GAAG,EAAE,QAAQ,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;AAE9E,QAAA,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE;AACd,YAAA,IAAI,CAAC,SAAS,CAAC,KAAK,EAAE,aAAa,CAAC,KAAK,CAAC,EAAC,aAAa,EAAE,IAAI,EAAC,CAAC,CAAC;AACpE,SAAA;KACJ;IAES,IAAI,GAAA;AACV,QAAA,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,EAAE;YAClB,IAAI,CAAC,MAAM,EAAE,CAAC;AACjB,SAAA;AAAM,aAAA,IAAI,IAAI,CAAC,QAAQ,CAAC,mBAAmB,EAAE,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC,EAAE;YAC7D,OAAO;AACV,SAAA;AAED,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,EAAE,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,KACvC,KAAK,KAAK,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE,GAAG,IAAI,CAChD,CAAC;QAEF,IAAI,CAAC,SAAS,CAAC,GAAG,EAAE,QAAQ,CAAC,KAAK,CAAC,CAAC;AACpC,QAAA,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;AACxB,QAAA,IAAI,CAAC,SAAS,CAAC,KAAK,EAAE,aAAa,CAAC,KAAK,CAAC,EAAC,aAAa,EAAE,IAAI,EAAC,CAAC,CAAC;KACpE;IAES,MAAM,GAAA;AACZ,QAAA,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;AACxB,QAAA,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC;KAClD;IAES,IAAI,GAAA;QACV,IACI,CAAC,IAAI,CAAC,QAAQ;AACd,YAAA,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,EAAE,WAAW,EAAE;AAClC,YAAA,CAAC,WAAW,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC,EAC/B;YACE,OAAO;AACV,SAAA;AAED,QAAA,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;AACvB,QAAA,UAAU,CAAC,MAAM,IAAI,CAAC,KAAK,EAAE,aAAa,CAAC,KAAK,EAAE,CAAC,CAAC;KACvD;+GA/EQ,qBAAqB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;AAArB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,qBAAqB,ydACnB,OAAO,EAAA,WAAA,EAAA,IAAA,EAAA,IAAA,EAAS,UAAU,EC7DzC,CAAA,EAAA,cAAA,EAAA,CAAA,EAAA,SAAA,EAAA,EAAA,CAAA,OAAA,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAAA,u4BAkCA,s1BDGQ,WAAW,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,oBAAA,EAAA,QAAA,EAAA,8MAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,eAAA,EAAA,QAAA,EAAA,2CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,qDAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,UAAA,EAAA,SAAA,EAAA,gBAAA,CAAA,EAAA,OAAA,EAAA,CAAA,eAAA,CAAA,EAAA,QAAA,EAAA,CAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACX,IAAI,EACJ,QAAA,EAAA,QAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,UAAA,EAAA,UAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,mBAAmB,+BACnB,SAAS,EAAA,QAAA,EAAA,uEAAA,EAAA,MAAA,EAAA,CAAA,MAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACT,OAAO,EACP,QAAA,EAAA,oBAAA,EAAA,MAAA,EAAA,CAAA,MAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,OAAO,4HACP,eAAe,EAAA,QAAA,EAAA,mBAAA,EAAA,MAAA,EAAA,CAAA,iBAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA,EAAA;;4FAiBV,qBAAqB,EAAA,UAAA,EAAA,CAAA;kBA3BjC,SAAS;iCACM,IAAI,EAAA,QAAA,EACN,gBAAgB,EACjB,OAAA,EAAA;wBACL,WAAW;wBACX,IAAI;wBACJ,mBAAmB;wBACnB,SAAS;wBACT,OAAO;wBACP,OAAO;wBACP,eAAe;AAClB,qBAAA,EAAA,eAAA,EAGgB,uBAAuB,CAAC,MAAM,kBAC/B,CAAC,OAAO,CAAC,EACnB,IAAA,EAAA;AACF,wBAAA,OAAO,EAAE,EAAE;AACX,wBAAA,KAAK,EAAE,iBAAiB;AACxB,wBAAA,eAAe,EAAE,WAAW;AAC5B,wBAAA,iBAAiB,EAAE,wBAAwB;AAC3C,wBAAA,SAAS,EAAE,uCAAuC;AAClD,wBAAA,6BAA6B,EAAE,UAAU;AACzC,wBAAA,yBAAyB,EAAE,QAAQ;AACnC,wBAAA,YAAY,EAAE,QAAQ;AACzB,qBAAA,EAAA,QAAA,EAAA,u4BAAA,EAAA,MAAA,EAAA,CAAA,+xBAAA,CAAA,EAAA,CAAA;8BAIgB,KAAK,EAAA,CAAA;sBADrB,SAAS;AAAC,gBAAA,IAAA,EAAA,CAAA,OAAO,EAAE,EAAC,IAAI,EAAE,UAAU,EAAC,CAAA;gBAgC/B,QAAQ,EAAA,CAAA;sBADd,KAAK;;;AErFG,MAAA,8BAA8B,GAAwB;AAC/D,IAAA,SAAS,EAAE,GAAG;AACd,IAAA,MAAM,EAAE,IAAI;EACd;AAEK,MAAM,CAAC,sBAAsB,EAAE,2BAA2B,CAAC,GAAG,gBAAgB,CACjF,8BAA8B;;ACclC;AACA,MAYa,yBACT,SAAQ,UAAe,CAAA;AAb3B,IAAA,WAAA,GAAA;;AAgBqB,QAAA,IAAA,CAAA,OAAO,GAAG,MAAM,CAAC,sBAAsB,CAAC,CAAC;AACzC,QAAA,IAAA,CAAA,MAAM,GAAG,MAAM,CAAC,aAAa,CAAC,CAAC;AAC/B,QAAA,IAAA,CAAA,QAAQ,GAAG,MAAM,CAAC,oBAAoB,CAAC,CAAC;AAEtC,QAAA,IAAA,CAAA,SAAS,GAAG,MAAM,CAAC,0BAA0B,CAAC,CAAC;QAC/C,IAAI,CAAA,IAAA,GAAG,eAAe,EAAE,CAAC;AACzB,QAAA,IAAA,CAAA,QAAQ,GAAwB,MAAM,CAAC,kBAAkB,CAAC,CAAC;AAC3D,QAAA,IAAA,CAAA,OAAO,GAAG,mBAAmB,CAC5C,eAAe,EACf,oBAAoB,EACpB,IAAI,CAAC,WAAW,EAChB,EAAE,CACL,CAAC;AAEiB,QAAA,IAAA,CAAA,GAAG,GAAG,MAAM,CAAC,aAAa,CAAC;aACzC,mBAAmB,CAAC,IAAI,CACrB,MAAM,CAAC,CAAC,MAAM,KAAK,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,EACzD,kBAAkB,EAAE,CACvB;aACA,SAAS,CAAC,MAAK;YACZ,IAAI,CAAC,OAAO,EAAE,CAAC;YACf,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC;AACjC,SAAC,CAAC,CAAC;AAGA,QAAA,IAAA,CAAA,SAAS,GAAG,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC;AAGnC,QAAA,IAAA,CAAA,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC;QAEpB,IAAE,CAAA,EAAA,GAAG,gBAAgB,EAAoB,CAAC;AAmE7D,KAAA;AAjEU,IAAA,QAAQ,CAAC,KAAU,EAAA;QACtB,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC;AAC7B,QAAA,IAAI,CAAC,QAAQ,CACT,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,GAAG,CAAC,KAAK,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,OAAO,EAAE,GAAG,KAAK,CACvE,CAAC;KACL;IAES,OAAO,GAAA;QACb,MAAM,KAAK,GAAG,IAAI,CAAC,SAAS,CAAC,KAAK,EAAE,CAAC,IAAI,EAAE,CAAC;QAC5C,MAAM,KAAK,GAAU,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;QAC5E,MAAM,KAAK,GAAG,KAAK,CAAC,MAAM,CACtB,CAAC,IAAI,KAAK,IAAI,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,mBAAmB,EAAE,CAAC,IAAI,CAAC,CAC/D,CAAC;AAEF,QAAA,IAAI,CAAC,KAAK,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE;YACzB,OAAO;AACV,SAAA;AAED,QAAA,IAAI,CAAC,QAAQ,CAAC,CAAC,GAAG,IAAI,CAAC,KAAK,EAAE,EAAE,GAAG,KAAK,CAAC,CAAC,CAAC;QAC3C,IAAI,CAAC,QAAQ,EAAE,CAAC;KACnB;IAES,OAAO,GAAA;AACb,QAAA,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC;AAEvC,QAAA,IAAI,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,SAAS,CAAC,KAAK,EAAE,CAAC,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,EAAE;YAChE,IAAI,CAAC,OAAO,EAAE,CAAC;AAClB,SAAA;AAAM,aAAA;YACH,IAAI,CAAC,QAAQ,EAAE,CAAC;AACnB,SAAA;KACJ;AAES,IAAA,OAAO,CAAC,KAAiC,EAAA;AAC/C,QAAA,MAAM,KAAK,GACP,cAAc,IAAI,KAAK;cACjB,KAAK,CAAC,YAAY,EAAE,OAAO,CAAC,YAAY,CAAC,IAAI,EAAE;AACjD,cAAE,uBAAuB,CAAC,KAAK,CAAC,CAAC;QAEzC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;QAChC,IAAI,CAAC,OAAO,EAAE,CAAC;KAClB;AAES,IAAA,WAAW,CAAC,GAAW,EAAA;;QAE7B,IACI,GAAG,KAAK,WAAW;AACnB,YAAA,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,EAAE;YACvB,IAAI,CAAC,WAAW,EAAE;aACjB,IAAI,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,EACvC;AACE,YAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;AAC5C,SAAA;KACJ;IAES,QAAQ,GAAA;QACd,MAAM,IAAI,GAAG,IAAI,CAAC,SAAS,CAAC,EAAE,CAAC,OAAO,CAAC,oBAAoB,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC;;QAGtE,UAAU,CAAC,MAAK;AACZ,YAAA,IAAI,CAAC,SAAS,CAAC,EAAE,CAAC,QAAQ,CAAC;AACvB,gBAAA,IAAI,EAAE,IAAI,GAAG,MAAM,CAAC,gBAAgB;gBACpC,GAAG,EAAE,MAAM,CAAC,gBAAgB;AAC/B,aAAA,CAAC,CAAC;AACP,SAAC,CAAC,CAAC;KACN;+GApGQ,yBAAyB,EAAA,IAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;mGAAzB,yBAAyB,EAAA,YAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,SAAA,EAAA,WAAA,EAAA,MAAA,EAAA,QAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,cAAA,EAAA,OAAA,EAAA,EAAA,SAAA,EAAA,EAAA,uBAAA,EAAA,WAAA,EAAA,kBAAA,EAAA,yBAAA,EAAA,OAAA,EAAA,WAAA,EAAA,eAAA,EAAA,iBAAA,EAAA,cAAA,EAAA,iBAAA,EAAA,EAAA,UAAA,EAAA,EAAA,UAAA,EAAA,YAAA,EAAA,EAAA,EAAA,eAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA,CAAA,EAAA;;4FAAzB,yBAAyB,EAAA,UAAA,EAAA,CAAA;kBAZrC,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACP,oBAAA,UAAU,EAAE,IAAI;AAChB,oBAAA,IAAI,EAAE;AACF,wBAAA,YAAY,EAAE,OAAO;AACrB,wBAAA,YAAY,EAAE,YAAY;AAC1B,wBAAA,yBAAyB,EAAE,WAAW;AACtC,wBAAA,oBAAoB,EAAE,yBAAyB;AAC/C,wBAAA,SAAS,EAAE,WAAW;AACtB,wBAAA,iBAAiB,EAAE,iBAAiB;AACpC,wBAAA,gBAAgB,EAAE,iBAAiB;AACtC,qBAAA;AACJ,iBAAA,CAAA;8BA8BU,SAAS,EAAA,CAAA;sBADf,KAAK;gBAIC,MAAM,EAAA,CAAA;sBADZ,KAAK;;AAwEV,MAgBa,qBAAyB,SAAQ,yBAA4B,CAAA;+GAA7D,qBAAqB,EAAA,IAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;AAArB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,qBAAqB,EAbnB,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,qBAAA,EAAA,SAAA,EAAA;YACP,YAAY,CAAC,qBAAqB,CAAC;YACnC,wBAAwB,CAAC,EAAE,CAAC;YAC5B,sBAAsB,CAAC,qBAAqB,CAAC;AAChD,SAAA,EAAA,eAAA,EAAA,IAAA,EAAA,cAAA,EAAA,CAAA,EAAA,SAAA,EAAAA,IAAA,CAAA,kBAAA,EAAA,EAAA,EAAA,SAAA,EAAAC,IAAA,CAAA,gBAAA,EAAA,MAAA,EAAA,CAAA,SAAA,EAAA,SAAA,EAAA,SAAA,EAAA,SAAA,EAAA,UAAA,EAAA,UAAA,EAAA,OAAA,EAAA,OAAA,CAAA,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA,CAAA,EAAA;;4FASQ,qBAAqB,EAAA,UAAA,EAAA,CAAA;kBAhBjC,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACP,oBAAA,UAAU,EAAE,IAAI;AAChB,oBAAA,QAAQ,EAAE,qBAAqB;AAC/B,oBAAA,SAAS,EAAE;AACP,wBAAA,YAAY,CAAuB,qBAAA,CAAA;wBACnC,wBAAwB,CAAC,EAAE,CAAC;AAC5B,wBAAA,sBAAsB,CAAuB,qBAAA,CAAA;AAChD,qBAAA;AACD,oBAAA,cAAc,EAAE;wBACZ,kBAAkB;AAClB,wBAAA;AACI,4BAAA,SAAS,EAAE,gBAAgB;4BAC3B,MAAM,EAAE,CAAC,SAAS,EAAE,SAAS,EAAE,UAAU,EAAE,OAAO,CAAC;AACtD,yBAAA;AACJ,qBAAA;AACJ,iBAAA,CAAA;;;MC3JY,YAAY,GAAG,CAAC,qBAAqB,EAAE,qBAAqB;;ACHzE;;AAEG;;;;"}
+{"version":3,"file":"taiga-ui-kit-components-input-chip.mjs","sources":["../../../projects/kit/components/input-chip/input-chip.component.ts","../../../projects/kit/components/input-chip/input-chip.template.html","../../../projects/kit/components/input-chip/input-chip.options.ts","../../../projects/kit/components/input-chip/input-chip.directive.ts","../../../projects/kit/components/input-chip/input-chip.ts","../../../projects/kit/components/input-chip/taiga-ui-kit-components-input-chip.ts"],"sourcesContent":["import {\n    ChangeDetectionStrategy,\n    Component,\n    computed,\n    ElementRef,\n    inject,\n    input,\n    type Signal,\n    signal,\n    viewChild,\n} from '@angular/core';\nimport {FormsModule, ReactiveFormsModule} from '@angular/forms';\nimport {TUI_IS_MOBILE} from '@taiga-ui/cdk/tokens';\nimport {type TuiContext} from '@taiga-ui/cdk/types';\nimport {tuiDirectiveBinding} from '@taiga-ui/cdk/utils/di';\nimport {tuiIsString} from '@taiga-ui/cdk/utils/miscellaneous';\nimport {TuiButton} from '@taiga-ui/core/components/button';\nimport {\n    TUI_TEXTFIELD_OPTIONS,\n    type TuiTextfieldItem,\n    TuiTextfieldMultiComponent,\n} from '@taiga-ui/core/components/textfield';\nimport {TuiAppearance} from '@taiga-ui/core/directives/appearance';\nimport {\n    TUI_ITEMS_HANDLERS,\n    type TuiItemsHandlers,\n} from '@taiga-ui/core/directives/items-handlers';\nimport {TuiHintDirective, TuiHintOverflow} from '@taiga-ui/core/portals/hint';\nimport {TUI_COMMON_ICONS} from '@taiga-ui/core/tokens';\nimport {TuiChip} from '@taiga-ui/kit/components/chip';\nimport {TuiFade} from '@taiga-ui/kit/directives/fade';\nimport {tuiInjectValue} from '@taiga-ui/kit/utils';\nimport {injectContext} from '@taiga-ui/polymorpheus';\n\n@Component({\n    selector: 'tui-input-chip',\n    imports: [\n        FormsModule,\n        ReactiveFormsModule,\n        TuiButton,\n        TuiChip,\n        TuiFade,\n        TuiHintOverflow,\n    ],\n    templateUrl: './input-chip.template.html',\n    styleUrl: './input-chip.styles.less',\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    hostDirectives: [TuiChip],\n    host: {\n        tuiChip: '',\n        class: 'tui-interactive',\n        '[class._edit]': 'editing()',\n        '[attr.tabIndex]': 'disabled() ? null : -1',\n        '(click)': 'editing() && $event.stopPropagation()',\n        '(keydown.backspace.prevent)': 'delete()',\n        '(keydown.enter.prevent)': 'edit()',\n        '(dblclick)': 'edit()',\n    },\n})\nexport class TuiInputChipComponent<T> {\n    private readonly options = inject(TUI_TEXTFIELD_OPTIONS);\n    private readonly context = injectContext<TuiContext<TuiTextfieldItem<T>>>();\n    private readonly value = tuiInjectValue<readonly T[]>();\n    private readonly input: Signal<ElementRef<HTMLInputElement> | undefined> = viewChild(\n        TuiChip,\n        {read: ElementRef},\n    );\n\n    protected readonly icons = inject(TUI_COMMON_ICONS);\n    protected readonly mobile = inject(TUI_IS_MOBILE);\n    protected readonly internal = signal(this.context.$implicit.item);\n    protected readonly editing = signal(false);\n    protected readonly hint = inject(TuiHintDirective, {self: true, optional: true});\n    protected readonly handlers: TuiItemsHandlers<T> = inject(TUI_ITEMS_HANDLERS);\n    protected readonly textfield = inject(TuiTextfieldMultiComponent);\n    protected readonly disabled = tuiDirectiveBinding(\n        TuiAppearance,\n        'tuiAppearanceState',\n        computed(() =>\n            this.handlers.disabledItemHandler()(this.context.$implicit.item)\n                ? 'disabled'\n                : null,\n        ),\n    );\n\n    protected readonly size = tuiDirectiveBinding(\n        TuiChip,\n        'size',\n        computed(() => (this.options.size() === 'l' ? 's' : 'xs')),\n    );\n\n    public readonly editable = input(true);\n\n    protected get index(): number {\n        return this.context.$implicit.index;\n    }\n\n    protected delete(): void {\n        this.textfield.cva()?.onChange(this.value().filter((_, i) => i !== this.index));\n\n        if (!this.mobile) {\n            this.textfield.input()?.nativeElement.focus({preventScroll: true});\n        }\n    }\n\n    protected save(): void {\n        if (!this.internal()) {\n            this.delete();\n        } else if (this.handlers.disabledItemHandler()(this.internal())) {\n            return;\n        }\n\n        const value = this.value().map((item, index) =>\n            index === this.index ? this.internal() : item,\n        );\n\n        this.textfield.cva()?.onChange(value);\n        this.editing.set(false);\n        this.textfield.input()?.nativeElement.focus({preventScroll: true});\n    }\n\n    protected cancel(): void {\n        this.editing.set(false);\n        this.internal.set(this.context.$implicit.item);\n    }\n\n    protected edit(): void {\n        if (\n            !this.editable() ||\n            !this.textfield.cva()?.interactive() ||\n            !tuiIsString(this.internal())\n        ) {\n            return;\n        }\n\n        this.editing.set(true);\n        setTimeout(() => this.input()?.nativeElement.focus());\n    }\n}\n","<input\n    appearance=\"\"\n    enterkeyhint=\"enter\"\n    tuiChip\n    class=\"t-input\"\n    [disabled]=\"!editing()\"\n    [ngModel]=\"internal()\"\n    [ngModelOptions]=\"{standalone: true}\"\n    (blur)=\"cancel()\"\n    (keydown.enter)=\"save()\"\n    (keydown.esc)=\"cancel()\"\n    (keydown.stop)=\"(0)\"\n    (ngModelChange)=\"internal.set($event)\"\n/>\n<div\n    tuiFade\n    tuiFadeOffset=\"0.5rem\"\n    class=\"t-text\"\n    [tuiHintOverflow]=\"hint?.content() ? null : handlers.stringify()(internal())\"\n    (mousedown.prevent.zoneless)=\"(0)\"\n>\n    {{ handlers.stringify()(internal()) }}\n</div>\n@if (textfield.cva()?.interactive() && !editing() && !disabled()) {\n    <button\n        tabIndex=\"-1\"\n        tuiIconButton\n        type=\"button\"\n        [iconStart]=\"icons.close\"\n        (click.stop)=\"delete()\"\n        (pointerdown.prevent.stop.zoneless)=\"(0)\"\n    >\n        Remove\n    </button>\n}\n","import {tuiCreateOptions} from '@taiga-ui/cdk/utils/di';\n\nexport interface TuiInputChipOptions {\n    readonly separator: RegExp | string;\n    readonly unique: boolean;\n}\n\nexport const TUI_INPUT_CHIP_DEFAULT_OPTIONS: TuiInputChipOptions = {\n    separator: ',',\n    unique: true,\n};\n\nexport const [TUI_INPUT_CHIP_OPTIONS, tuiInputChipOptionsProvider] = tuiCreateOptions(\n    TUI_INPUT_CHIP_DEFAULT_OPTIONS,\n);\n","import {Directive, inject, input} from '@angular/core';\nimport {takeUntilDestroyed} from '@angular/core/rxjs-interop';\nimport {tuiAsControl, TuiControl} from '@taiga-ui/cdk/classes';\nimport {TuiActiveZone} from '@taiga-ui/cdk/directives/active-zone';\nimport {TUI_IS_MOBILE, tuiFallbackValueProvider} from '@taiga-ui/cdk/tokens';\nimport {tuiGetClipboardDataText, tuiInjectElement} from '@taiga-ui/cdk/utils/dom';\nimport {tuiSanitizeText} from '@taiga-ui/cdk/utils/miscellaneous';\nimport {TuiWithInput} from '@taiga-ui/core/components/input';\nimport {\n    tuiAsTextfieldAccessor,\n    type TuiTextfieldAccessor,\n    TuiTextfieldMultiComponent,\n} from '@taiga-ui/core/components/textfield';\nimport {\n    TUI_ITEMS_HANDLERS,\n    type TuiItemsHandlers,\n} from '@taiga-ui/core/directives/items-handlers';\nimport {\n    TuiDropdownDirective,\n    tuiDropdownEnabled,\n    TuiDropdownOpen,\n} from '@taiga-ui/core/portals/dropdown';\nimport {filter} from 'rxjs';\n\nimport {TUI_INPUT_CHIP_OPTIONS} from './input-chip.options';\n\n// TODO: Consider making input[tuiTextfieldMulti] to reuse here and in InputDateMulti\n@Directive({\n    selector: 'input[tuiInputChip]',\n    providers: [\n        tuiAsControl(TuiInputChipDirective),\n        tuiFallbackValueProvider([]),\n        tuiAsTextfieldAccessor(TuiInputChipDirective),\n    ],\n    hostDirectives: [TuiWithInput],\n    host: {\n        enterkeyhint: 'enter',\n        '[disabled]': 'disabled()',\n        '(keydown.enter.prevent)': 'onEnter()',\n        '(keydown.zoneless)': 'onBackspace($event.key)',\n        '(input)': 'onInput()',\n        '(paste.prevent)': 'onPaste($event)',\n        '(drop.prevent)': 'onPaste($event)',\n        '(focus)': 'scrollTo()',\n    },\n})\nexport class TuiInputChipDirective<T>\n    extends TuiControl<T[]>\n    implements TuiTextfieldAccessor<T[]>\n{\n    private readonly options = inject(TUI_INPUT_CHIP_OPTIONS);\n    private readonly mobile = inject(TUI_IS_MOBILE);\n    private readonly dropdown = inject(TuiDropdownDirective);\n\n    protected readonly textfield = inject(TuiTextfieldMultiComponent);\n    protected readonly open = inject(TuiDropdownOpen).open;\n    protected readonly handlers: TuiItemsHandlers<T> = inject(TUI_ITEMS_HANDLERS);\n    protected readonly dropdownEnabled = tuiDropdownEnabled(this.interactive);\n    protected readonly sub = inject(TuiActiveZone)\n        .tuiActiveZoneChange.pipe(\n            filter((active) => !active && !this.el.matches('select')),\n            takeUntilDestroyed(),\n        )\n        .subscribe(() => {\n            this.onEnter();\n            this.textfield.value.set('');\n        });\n\n    public readonly separator = input(this.options.separator);\n    public readonly unique = input(this.options.unique);\n    public readonly el = tuiInjectElement<HTMLInputElement>();\n\n    public setValue(value: T[]): void {\n        this.textfield.value.set('');\n        this.onChange(\n            this.unique() ? Array.from(new Set(value.reverse())).reverse() : value,\n        );\n    }\n\n    protected onEnter(): void {\n        const value = this.textfield.value().trim();\n        const items: any[] = this.separator() ? value.split(this.separator()) : [value];\n        const valid = items.filter(\n            (item) => item && !this.handlers.disabledItemHandler()(item),\n        );\n\n        if (!value || !valid.length) {\n            return;\n        }\n\n        this.setValue([...this.value(), ...valid]);\n        this.scrollTo();\n    }\n\n    protected onInput(): void {\n        this.open.set(!!this.dropdown.content());\n\n        if (this.separator() && this.textfield.value().match(this.separator())) {\n            this.onEnter();\n        } else {\n            this.scrollTo();\n        }\n    }\n\n    protected onPaste(event: ClipboardEvent | DragEvent): void {\n        const value =\n            'dataTransfer' in event\n                ? event.dataTransfer?.getData('text/plain') || ''\n                : tuiGetClipboardDataText(event);\n\n        this.textfield.value.set(tuiSanitizeText(value));\n        this.onEnter();\n    }\n\n    protected onBackspace(key: string): void {\n        // (keydown.backspace) doesn't emit event on empty input in ios safari\n        if (key === 'Backspace' && !this.textfield.value() && this.interactive()) {\n            if (this.mobile || !this.textfield.item()) {\n                this.onChange(this.value().slice(0, -1));\n            } else {\n                this.el.dispatchEvent(\n                    new KeyboardEvent('keydown', {\n                        key: 'ArrowLeft',\n                        bubbles: true,\n                    }),\n                );\n            }\n        }\n    }\n\n    protected scrollTo(): void {\n        const sign = this.textfield.el.matches('[dir=\"rtl\"] :scope') ? -1 : 1;\n\n        // Allow change detection to run and add new tag to DOM\n        setTimeout(() => {\n            this.textfield.el.scrollTo({\n                left: sign * Number.MAX_SAFE_INTEGER,\n                top: Number.MAX_SAFE_INTEGER,\n            });\n        });\n    }\n}\n","import {TuiItem} from '@taiga-ui/cdk/directives/item';\nimport {TuiLabel} from '@taiga-ui/core/components/label';\nimport {\n    TuiTextfieldComponent,\n    TuiTextfieldMultiComponent,\n    TuiTextfieldOptionsDirective,\n} from '@taiga-ui/core/components/textfield';\nimport {TuiDropdownContent} from '@taiga-ui/core/portals/dropdown';\n\nimport {TuiInputChipComponent} from './input-chip.component';\nimport {TuiInputChipDirective} from './input-chip.directive';\n\nexport const TuiInputChip = [\n    TuiItem,\n    TuiLabel,\n    TuiTextfieldComponent,\n    TuiTextfieldOptionsDirective,\n    TuiTextfieldMultiComponent,\n    TuiDropdownContent,\n    TuiInputChipDirective,\n    TuiInputChipComponent,\n] as const;\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["i1"],"mappings":"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"}

package/fesm2022/taiga-ui-kit-components-input-color.mjs

@@ -1,18 +1,19 @@
-import { NgIf } from '@angular/common';
+import { TuiLabel } from '@taiga-ui/core/components/label';
+import { TuiTextfieldContent, TuiTextfieldComponent, TuiTextfieldOptionsDirective } from '@taiga-ui/core/components/textfield';
+import { TuiDropdownContent } from '@taiga-ui/core/portals/dropdown';
 import * as i0 from '@angular/core';
-import { inject, signal, computed, Component, ViewEncapsulation, ChangeDetectionStrategy, Input } from '@angular/core';
+import { inject, HostAttributeToken, signal, computed, Input, ChangeDetectionStrategy, ViewEncapsulation, Component } from '@angular/core';
 import * as i3 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import * as i1 from '@maskito/angular';
 import { MaskitoDirective } from '@maskito/angular';
-import { maskitoPrefixPostprocessorGenerator, maskitoAddOnFocusPlugin, maskitoRemoveOnBlurPlugin } from '@maskito/kit';
+import { maskitoAddOnFocusPlugin, maskitoRemoveOnBlurPlugin, maskitoPrefixPostprocessorGenerator } from '@maskito/kit';
 import { TuiControl, tuiAsControl } from '@taiga-ui/cdk/classes';
 import { tuiFallbackValueProvider } from '@taiga-ui/cdk/tokens';
 import { tuiInjectElement } from '@taiga-ui/cdk/utils/dom';
-import { tuiDirectiveBinding } from '@taiga-ui/cdk/utils/miscellaneous';
-import * as i2 from '@taiga-ui/core/components/textfield';
-import { TuiTextfieldContent, TuiWithTextfield } from '@taiga-ui/core/components/textfield';
-import { TuiIcons } from '@taiga-ui/core/directives/icons';
+import * as i2 from '@taiga-ui/core/components/input';
+import { TuiWithInput } from '@taiga-ui/core/components/input';
+import { TuiIcons, tuiIconStart } from '@taiga-ui/core/directives/icons';
 import * as i4 from '@taiga-ui/kit/components/slider';
 import { tuiSliderOptionsProvider, TuiSlider } from '@taiga-ui/kit/components/slider';
 import { tuiMaskito } from '@taiga-ui/kit/utils';
@@ -24,17 +25,17 @@ const [TUI_INPUT_COLOR_OPTIONS, tuiInputColorOptionsProvider] = tuiCreateOptions
 });
 
 const REGEX = /[0-9a-fA-F]/;
-class TuiInputColor extends TuiControl {
+const EMPTY = '"data:image/svg+xml;utf8,<svg xmlns=http://www.w3.org/2000/svg></svg>"';
+class TuiInputColorComponent extends TuiControl {
     constructor() {
         super(...arguments);
         this.options = inject(TUI_INPUT_COLOR_OPTIONS);
         this.el = tuiInjectElement();
-        this.list = this.el.getAttribute('list');
+        this.list = inject(new HostAttributeToken('list'), { optional: true });
         this.format = signal(this.options.format);
         this.align = signal(this.options.align);
-        this.icon = tuiDirectiveBinding(TuiIcons, 'iconStart', computed(() => this.align() === 'left'
-            ? '"data:image/svg+xml;utf8,<svg xmlns=http://www.w3.org/2000/svg></svg>"'
-            : ''), {});
+        this.left = inject(TuiIcons).iconStart() || '';
+        this.icon = tuiIconStart(computed(() => (this.align() === 'left' ? EMPTY : this.left)), {});
         this.maskito = tuiMaskito(computed((length = this.format().length * 2) => ({
             mask: ['#', ...Array.from({ length }).fill(REGEX)],
             postprocessors: [maskitoPrefixPostprocessorGenerator('#')],
@@ -59,28 +60,27 @@ class TuiInputColor extends TuiControl {
         const value = this.filled() ? this.value().slice(0, 7) : '#000000';
         this.onChange(`${value}${toHex(opacity)}`);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiInputColor, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiInputColor, isStandalone: true, selector: "input[tuiInputColor]", inputs: { alignSetter: ["align", "alignSetter"], formatSetter: ["format", "formatSetter"] }, host: { attributes: { "ngSkipHydration": "true", "inputmode": "numeric", "spellcheck": "false" }, listeners: { "input": "onChange($event.target.value)" }, properties: { "disabled": "disabled()", "value": "value()", "attr.list": "null" } }, providers: [
-            tuiAsControl(TuiInputColor),
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiInputColorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: TuiInputColorComponent, isStandalone: true, selector: "input[tuiInputColor]", inputs: { alignSetter: ["align", "alignSetter"], formatSetter: ["format", "formatSetter"] }, host: { attributes: { "ngSkipHydration": "true", "spellcheck": "false" }, listeners: { "input": "onChange($event.target.value)" }, properties: { "disabled": "disabled()", "value": "value()", "attr.list": "null" } }, providers: [
+            tuiAsControl(TuiInputColorComponent),
             tuiFallbackValueProvider(''),
             tuiSliderOptionsProvider({ trackColor: 'transparent' }),
-        ], usesInheritance: true, hostDirectives: [{ directive: i1.MaskitoDirective }, { directive: i2.TuiWithTextfield }], ngImport: i0, template: "<ng-container *tuiTextfieldContent>\n    <input\n        #input\n        tabindex=\"-1\"\n        type=\"color\"\n        class=\"tui-input-color_picker\"\n        [attr.list]=\"list\"\n        [class.tui-input-color_left]=\"align() === 'left'\"\n        [disabled]=\"!interactive()\"\n        [style.--t-opacity]=\"filled() ? opacity() / 255 : 0\"\n        [value]=\"value().length > 6 ? value().slice(0, 7) : ''\"\n        (input)=\"onInput(input.value)\"\n    />\n    <input\n        *ngIf=\"format() === 'hexa' && interactive()\"\n        max=\"255\"\n        tuiSlider\n        type=\"range\"\n        [ngModel]=\"opacity()\"\n        [ngModelOptions]=\"{standalone: true}\"\n        (ngModelChange)=\"onOpacity($event)\"\n        (pointerdown.stop)=\"el.focus()\"\n    />\n</ng-container>\n", styles: [".tui-input-color_picker.tui-input-color_picker{position:relative;font-size:1rem;inline-size:calc(var(--t-height) / 2);block-size:calc(var(--t-height) / 2);border:none;border-radius:100%;padding:0!important;overflow:hidden;cursor:pointer;background:repeating-conic-gradient(var(--tui-border-normal) 0% 25%,transparent 0% 50%);box-shadow:0 0 0 1px var(--tui-border-normal)}.tui-input-color_picker.tui-input-color_picker:disabled{cursor:default}tui-textfield[data-size=s] .tui-input-color_picker{margin-inline-end:.25rem}tui-textfield[data-size=l] .tui-input-color_picker{margin-inline-end:-.25rem}.tui-input-color_picker.tui-input-color_left{position:absolute;top:50%;left:calc(var(--t-height) / 4);inset-inline-start:calc(var(--t-height) / 4);transform:translateY(-50%)}.tui-input-color_picker::-webkit-color-swatch-wrapper{padding:0}.tui-input-color_picker::-webkit-color-swatch{border:none;opacity:var(--t-opacity)}.tui-input-color_picker::-moz-color-swatch{border:none;opacity:var(--t-opacity)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { 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.RangeValueAccessor, selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { 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: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.TuiSliderComponent, selector: "input[type=range][tuiSlider]", inputs: ["size", "segments"] }, { kind: "directive", type: TuiTextfieldContent, selector: "ng-template[tuiTextfieldContent]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], usesInheritance: true, hostDirectives: [{ directive: i1.MaskitoDirective }, { directive: i2.TuiWithInput }], ngImport: i0, template: "<ng-container *tuiTextfieldContent>\n    <input\n        #input\n        tabindex=\"-1\"\n        type=\"color\"\n        class=\"tui-input-color_picker\"\n        [attr.list]=\"list\"\n        [class.tui-input-color_left]=\"align() === 'left'\"\n        [disabled]=\"!interactive()\"\n        [style.--t-opacity]=\"filled() ? opacity() / 255 : 0\"\n        [value]=\"value().length > 6 ? value().slice(0, 7) : ''\"\n        (input)=\"onInput(input.value)\"\n    />\n    @if (format() === 'hexa' && interactive()) {\n        <input\n            max=\"255\"\n            tuiSlider\n            type=\"range\"\n            [ngModel]=\"opacity()\"\n            [ngModelOptions]=\"{standalone: true}\"\n            (ngModelChange)=\"onOpacity($event)\"\n            (pointerdown.stop)=\"el.focus()\"\n        />\n    }\n</ng-container>\n", styles: [".tui-input-color_picker.tui-input-color_picker{position:relative;font-size:1rem;inline-size:calc(var(--t-height) / 2);block-size:calc(var(--t-height) / 2);border:none;border-radius:100%;padding:0!important;overflow:hidden;cursor:pointer;order:100;background:repeating-conic-gradient(var(--tui-border-normal) 0% 25%,transparent 0% 50%);box-shadow:0 0 0 1px var(--tui-border-normal)}.tui-input-color_picker.tui-input-color_picker:disabled{cursor:default}tui-textfield[data-size=s] .tui-input-color_picker{margin-inline-end:.25rem}tui-textfield[data-size=l] .tui-input-color_picker{margin-inline-end:-.25rem}.tui-input-color_picker.tui-input-color_left{position:absolute;top:50%;left:calc(var(--t-height) / 4);inset-inline-start:calc(var(--t-height) / 4);transform:translateY(-50%)}.tui-input-color_picker::-webkit-color-swatch-wrapper{padding:0}.tui-input-color_picker::-webkit-color-swatch{border:none;opacity:var(--t-opacity)}.tui-input-color_picker::-moz-color-swatch{border:none;opacity:var(--t-opacity)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { 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.RangeValueAccessor, selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { 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: "component", type: i4.TuiSliderComponent, selector: "input[type=range][tuiSlider]", inputs: ["size", "segments"] }, { kind: "directive", type: TuiTextfieldContent, selector: "ng-template[tuiTextfieldContent]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiInputColor, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiInputColorComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'input[tuiInputColor]', imports: [FormsModule, NgIf, TuiSlider, TuiTextfieldContent], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
-                        tuiAsControl(TuiInputColor),
+            args: [{ selector: 'input[tuiInputColor]', imports: [FormsModule, TuiSlider, TuiTextfieldContent], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        tuiAsControl(TuiInputColorComponent),
                         tuiFallbackValueProvider(''),
                         tuiSliderOptionsProvider({ trackColor: 'transparent' }),
-                    ], hostDirectives: [MaskitoDirective, TuiWithTextfield], host: {
+                    ], hostDirectives: [MaskitoDirective, TuiWithInput], host: {
                         ngSkipHydration: 'true',
-                        inputmode: 'numeric',
                         spellcheck: 'false',
                         '[disabled]': 'disabled()',
                         '[value]': 'value()',
                         '[attr.list]': 'null',
                         '(input)': 'onChange($event.target.value)',
-                    }, template: "<ng-container *tuiTextfieldContent>\n    <input\n        #input\n        tabindex=\"-1\"\n        type=\"color\"\n        class=\"tui-input-color_picker\"\n        [attr.list]=\"list\"\n        [class.tui-input-color_left]=\"align() === 'left'\"\n        [disabled]=\"!interactive()\"\n        [style.--t-opacity]=\"filled() ? opacity() / 255 : 0\"\n        [value]=\"value().length > 6 ? value().slice(0, 7) : ''\"\n        (input)=\"onInput(input.value)\"\n    />\n    <input\n        *ngIf=\"format() === 'hexa' && interactive()\"\n        max=\"255\"\n        tuiSlider\n        type=\"range\"\n        [ngModel]=\"opacity()\"\n        [ngModelOptions]=\"{standalone: true}\"\n        (ngModelChange)=\"onOpacity($event)\"\n        (pointerdown.stop)=\"el.focus()\"\n    />\n</ng-container>\n", styles: [".tui-input-color_picker.tui-input-color_picker{position:relative;font-size:1rem;inline-size:calc(var(--t-height) / 2);block-size:calc(var(--t-height) / 2);border:none;border-radius:100%;padding:0!important;overflow:hidden;cursor:pointer;background:repeating-conic-gradient(var(--tui-border-normal) 0% 25%,transparent 0% 50%);box-shadow:0 0 0 1px var(--tui-border-normal)}.tui-input-color_picker.tui-input-color_picker:disabled{cursor:default}tui-textfield[data-size=s] .tui-input-color_picker{margin-inline-end:.25rem}tui-textfield[data-size=l] .tui-input-color_picker{margin-inline-end:-.25rem}.tui-input-color_picker.tui-input-color_left{position:absolute;top:50%;left:calc(var(--t-height) / 4);inset-inline-start:calc(var(--t-height) / 4);transform:translateY(-50%)}.tui-input-color_picker::-webkit-color-swatch-wrapper{padding:0}.tui-input-color_picker::-webkit-color-swatch{border:none;opacity:var(--t-opacity)}.tui-input-color_picker::-moz-color-swatch{border:none;opacity:var(--t-opacity)}\n"] }]
+                    }, template: "<ng-container *tuiTextfieldContent>\n    <input\n        #input\n        tabindex=\"-1\"\n        type=\"color\"\n        class=\"tui-input-color_picker\"\n        [attr.list]=\"list\"\n        [class.tui-input-color_left]=\"align() === 'left'\"\n        [disabled]=\"!interactive()\"\n        [style.--t-opacity]=\"filled() ? opacity() / 255 : 0\"\n        [value]=\"value().length > 6 ? value().slice(0, 7) : ''\"\n        (input)=\"onInput(input.value)\"\n    />\n    @if (format() === 'hexa' && interactive()) {\n        <input\n            max=\"255\"\n            tuiSlider\n            type=\"range\"\n            [ngModel]=\"opacity()\"\n            [ngModelOptions]=\"{standalone: true}\"\n            (ngModelChange)=\"onOpacity($event)\"\n            (pointerdown.stop)=\"el.focus()\"\n        />\n    }\n</ng-container>\n", styles: [".tui-input-color_picker.tui-input-color_picker{position:relative;font-size:1rem;inline-size:calc(var(--t-height) / 2);block-size:calc(var(--t-height) / 2);border:none;border-radius:100%;padding:0!important;overflow:hidden;cursor:pointer;order:100;background:repeating-conic-gradient(var(--tui-border-normal) 0% 25%,transparent 0% 50%);box-shadow:0 0 0 1px var(--tui-border-normal)}.tui-input-color_picker.tui-input-color_picker:disabled{cursor:default}tui-textfield[data-size=s] .tui-input-color_picker{margin-inline-end:.25rem}tui-textfield[data-size=l] .tui-input-color_picker{margin-inline-end:-.25rem}.tui-input-color_picker.tui-input-color_left{position:absolute;top:50%;left:calc(var(--t-height) / 4);inset-inline-start:calc(var(--t-height) / 4);transform:translateY(-50%)}.tui-input-color_picker::-webkit-color-swatch-wrapper{padding:0}.tui-input-color_picker::-webkit-color-swatch{border:none;opacity:var(--t-opacity)}.tui-input-color_picker::-moz-color-swatch{border:none;opacity:var(--t-opacity)}\n"] }]
         }], propDecorators: { alignSetter: [{
                 type: Input,
                 args: ['align']
@@ -92,9 +92,17 @@ function toHex(value) {
     return value.toString(16).padStart(2, '0');
 }
 
+const TuiInputColor = [
+    TuiInputColorComponent,
+    TuiLabel,
+    TuiTextfieldComponent,
+    TuiTextfieldOptionsDirective,
+    TuiDropdownContent,
+];
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { TUI_INPUT_COLOR_OPTIONS, TuiInputColor, tuiInputColorOptionsProvider };
+export { TUI_INPUT_COLOR_OPTIONS, TuiInputColor, TuiInputColorComponent, tuiInputColorOptionsProvider };
 //# sourceMappingURL=taiga-ui-kit-components-input-color.mjs.map