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

Taiga UI Angular main components kit

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, viewChild, ElementRef, signal, computed, input, ChangeDetectionStrategy, Component, Directive } from '@angular/core';
import * as i2 from '@angular/forms';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { WA_IS_MOBILE } from '@ng-web-apis/platform';
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 { TuiAppearance } from '@taiga-ui/core/directives/appearance';
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';
import { TuiFade } from '@taiga-ui/kit/directives/fade';
import { TUI_FILE_TEXTS } from '@taiga-ui/kit/tokens';
import { tuiInjectValue } from '@taiga-ui/kit/utils';
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 { tuiFallbackValueProvider } from '@taiga-ui/cdk/tokens';
import { tuiInjectElement, tuiGetClipboardDataText } from '@taiga-ui/cdk/utils/dom';
import * as i1$1 from '@taiga-ui/core/components/input';
import { TuiWithInput } from '@taiga-ui/core/components/input';
import { filter } from 'rxjs';

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(WA_IS_MOBILE);
        this.texts = inject(TUI_FILE_TEXTS);
        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(TuiTextfieldMultiComponent);
        this.disabled = tuiDirectiveBinding(TuiAppearance, 'tuiAppearanceState', computed(() => this.handlers.disabledItemHandler()(this.context.$implicit.item) ||
            this.textfield.cva()?.disabled()
            ? 'disabled'
            : null));
        this.size = tuiDirectiveBinding(TuiChip, 'size', computed(() => (this.options.size() === 'l' ? 's' : 'xs')));
        this.editable = input(true);
    }
    get index() {
        return this.context.$implicit.index;
    }
    delete() {
        if (this.textfield.cva()?.interactive()) {
            this.textfield
                .cva()
                ?.onChange(this.value().filter((_, i) => i !== this.index));
        }
        if (!this.mobile) {
            this.textfield.input()?.nativeElement.focus({ preventScroll: true });
        }
    }
    save() {
        if (!this.internal()) {
            this.delete();
        }
        else if (this.handlers.disabledItemHandler()(this.internal())) {
            return;
        }
        const value = this.value().map((item, index) => index === this.index ? this.internal() : item);
        this.textfield.cva()?.onChange(value);
        this.editing.set(false);
        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() ||
            !tuiIsString(this.internal()) ||
            this.disabled()) {
            return;
        }
        this.editing.set(true);
        setTimeout(() => this.input()?.nativeElement.focus());
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TuiInputChipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", 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()", "dblclick": "edit()", "keydown.backspace.prevent": "delete()", "keydown.enter.prevent": "edit()" }, properties: { "attr.tabIndex": "disabled() ? null : -1", "class._edit": "editing()" }, 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        {{ texts().remove }}\n    </button>\n}\n", styles: [":host{cursor:pointer;margin:.125rem 0;margin-inline-end:.25rem;pointer-events:auto}:host[tuiChip][tuiChip][data-state=disabled],:host-context(tui-textfield[data-state=\"disabled\"]) :host[tuiChip][tuiChip]{cursor:default}: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\"]){inset-inline-start:calc(var(--t-start) / 4 - .375rem);margin:.0625rem 0;margin-inline-end:.125rem}:host-context(tui-textfield[data-size=\"m\"]){inset-inline-start:-.125rem}:host-context(tui-textfield[data-size=\"l\"]){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: "[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: "19.2.21", ngImport: i0, type: TuiInputChipComponent, decorators: [{
            type: Component,
            args: [{ selector: 'tui-input-chip', imports: [
                        FormsModule,
                        ReactiveFormsModule,
                        TuiButton,
                        TuiChip,
                        TuiFade,
                        TuiHintOverflow,
                    ], changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [TuiChip], host: {
                        tuiChip: '',
                        class: 'tui-interactive',
                        '[attr.tabIndex]': 'disabled() ? null : -1',
                        '[class._edit]': 'editing()',
                        '(click)': 'editing() && $event.stopPropagation()',
                        '(dblclick)': 'edit()',
                        '(keydown.backspace.prevent)': 'delete()',
                        '(keydown.enter.prevent)': '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@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        {{ texts().remove }}\n    </button>\n}\n", styles: [":host{cursor:pointer;margin:.125rem 0;margin-inline-end:.25rem;pointer-events:auto}:host[tuiChip][tuiChip][data-state=disabled],:host-context(tui-textfield[data-state=\"disabled\"]) :host[tuiChip][tuiChip]{cursor:default}: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\"]){inset-inline-start:calc(var(--t-start) / 4 - .375rem);margin:.0625rem 0;margin-inline-end:.125rem}:host-context(tui-textfield[data-size=\"m\"]){inset-inline-start:-.125rem}:host-context(tui-textfield[data-size=\"l\"]){inset-inline-start:-.25rem}:host-context(tui-textfield[data-size=\"l\"]) .t-input{text-indent:.625rem}\n"] }]
        }] });

const TUI_INPUT_CHIP_DEFAULT_OPTIONS = {
    separator: ',',
    unique: true,
};
const [TUI_INPUT_CHIP_OPTIONS, tuiInputChipOptionsProvider] = tuiCreateOptions(TUI_INPUT_CHIP_DEFAULT_OPTIONS);

// 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(WA_IS_MOBILE);
        this.dropdown = inject(TuiDropdownDirective);
        this.textfield = inject(TuiTextfieldMultiComponent);
        this.open = inject(TuiDropdownOpen).open;
        this.handlers = inject(TUI_ITEMS_HANDLERS);
        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 = 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);
    }
    onEnter(rawValue = this.textfield.value()) {
        const value = rawValue.trim();
        const items = this.separator() ? value.split(this.separator()) : [value];
        const valid = items
            .map((item) => tuiSanitizeText(item))
            .filter((item) => item &&
            !this.handlers.disabledItemHandler()(item) &&
            this.handlers.stringify()(item));
        if (!value || !valid.length) {
            return;
        }
        this.setValue([...this.value(), ...valid]);
        this.scrollTo();
    }
    onInput() {
        this.open.set(!!this.dropdown.content());
        if (this.separator() && this.textfield.value().match(this.separator())) {
            this.onEnter();
        }
        else {
            this.scrollTo();
        }
    }
    onPaste(event) {
        const input = this.textfield.input();
        const value = 'dataTransfer' in event
            ? event.dataTransfer?.getData('text/plain') || ''
            : tuiGetClipboardDataText(event);
        if (input) {
            input.nativeElement.value = value;
        }
        this.onEnter(value);
    }
    onBackspace(key) {
        // (keydown.backspace) doesn't emit event on empty input in ios safari
        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() {
        const sign = this.textfield.el.matches('[dir="rtl"] :scope') ? -1 : 1;
        // Allow change detection to run and add new tag to DOM
        setTimeout(() => {
            this.textfield.el.scrollTo({
                left: sign * Number.MAX_SAFE_INTEGER,
                top: Number.MAX_SAFE_INTEGER,
            });
        }, 100);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TuiInputChipDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.21", 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: { "drop.prevent": "onPaste($event)", "focus": "scrollTo()", "input": "onInput()", "keydown.enter.prevent": "onEnter()", "keydown.zoneless": "onBackspace($event.key)", "paste.prevent": "onPaste($event)" }, properties: { "disabled": "disabled()" } }, providers: [
            tuiAsControl(TuiInputChipDirective),
            tuiFallbackValueProvider([]),
            tuiAsTextfieldAccessor(TuiInputChipDirective),
        ], usesInheritance: true, hostDirectives: [{ directive: i1$1.TuiWithInput }], ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TuiInputChipDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: 'input[tuiInputChip]',
                    providers: [
                        tuiAsControl(TuiInputChipDirective),
                        tuiFallbackValueProvider([]),
                        tuiAsTextfieldAccessor(TuiInputChipDirective),
                    ],
                    hostDirectives: [TuiWithInput],
                    host: {
                        enterkeyhint: 'enter',
                        '[disabled]': 'disabled()',
                        '(drop.prevent)': 'onPaste($event)',
                        '(focus)': 'scrollTo()',
                        '(input)': 'onInput()',
                        '(keydown.enter.prevent)': 'onEnter()',
                        '(keydown.zoneless)': 'onBackspace($event.key)',
                        '(paste.prevent)': 'onPaste($event)',
                    },
                }]
        }] });

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, TuiInputChipComponent, TuiInputChipDirective, tuiInputChipOptionsProvider };
//# sourceMappingURL=taiga-ui-kit-components-input-chip.mjs.map