primenglab 22.0.0-beta.1

package/fesm2022/primenglab-inputtags.mjs

@@ -0,0 +1,748 @@
+export * from 'primenglab/types/inputtags';
+import { NgTemplateOutlet } from '@angular/common';
+import * as i0 from '@angular/core';
+import { Injectable, InjectionToken, forwardRef, inject, input, booleanAttribute, numberAttribute, output, contentChild, viewChild, signal, computed, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { TimesCircle } from '@primeicons/angular/times-circle';
+import { uuid, cn, resolveFieldData, focus } from '@primeuix/utils';
+import { SharedModule } from 'primenglab/api';
+import { AutoComplete } from 'primenglab/autocomplete';
+import { PARENT_INSTANCE } from 'primenglab/basecomponent';
+import { BaseInput } from 'primenglab/baseinput';
+import * as i1 from 'primenglab/bind';
+import { Bind } from 'primenglab/bind';
+import { Chip } from 'primenglab/chip';
+import { style } from '@primeuix/styles/inputtags';
+import { BaseStyle } from 'primenglab/base';
+
+const inlineStyles = {
+    root: { position: 'relative' }
+};
+const classes = {
+    root: ({ instance }) => [
+        'p-inputtags p-component p-inputwrapper',
+        {
+            'p-invalid': instance.invalid(),
+            'p-focus': instance.focused(),
+            'p-inputwrapper-filled': instance.$filled(),
+            'p-inputwrapper-focus': instance.focused() && !instance.$disabled(),
+            'p-inputtags-fluid': instance.hasFluid,
+            'p-disabled': instance.$disabled(),
+            'p-variant-filled': instance.$variant() === 'filled'
+        }
+    ],
+    item: ({ instance, i }) => [
+        'p-inputtags-item',
+        {
+            'p-focus': instance.focusedItemIndex() === i
+        }
+    ],
+    pcChip: 'p-inputtags-item',
+    pcInputText: 'p-inputtags-input'
+};
+class InputTagsStyle extends BaseStyle {
+    name = 'inputtags';
+    style = style;
+    classes = classes;
+    inlineStyles = inlineStyles;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: InputTagsStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: InputTagsStyle });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: InputTagsStyle, decorators: [{
+            type: Injectable
+        }] });
+/**
+ *
+ * InputTags is used to enter multiple tags.
+ *
+ * [Live Demo](https://www.primeng.org/inputtags)
+ *
+ * @module inputtagsstyle
+ *
+ */
+var InputTagsClasses;
+(function (InputTagsClasses) {
+    InputTagsClasses["root"] = "p-inputtags";
+    InputTagsClasses["item"] = "p-inputtags-item";
+    InputTagsClasses["pcInputText"] = "p-inputtags-input";
+})(InputTagsClasses || (InputTagsClasses = {}));
+
+const INPUTTAGS_INSTANCE = new InjectionToken('INPUTTAGS_INSTANCE');
+const INPUTTAGS_VALUE_ACCESSOR = {
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: forwardRef(() => InputTags),
+    multi: true
+};
+/**
+ * InputTags is used to enter multiple tags with optional typeahead suggestions.
+ * @group Components
+ */
+class InputTags extends BaseInput {
+    componentName = 'InputTags';
+    $pcInputTags = inject(INPUTTAGS_INSTANCE, { optional: true, skipSelf: true }) ?? undefined;
+    bindDirectiveInstance = inject(Bind, { self: true });
+    /**
+     * Advisory information to display on input.
+     * @group Props
+     */
+    placeholder = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    /**
+     * Maximum number of tags allowed.
+     * @group Props
+     */
+    max = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "max" }] : /* istanbul ignore next */ []));
+    /**
+     * Delimiter character or regex to split input into tags.
+     * @group Props
+     */
+    delimiter = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "delimiter" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether to allow duplicate tags.
+     * @defaultValue false
+     * @group Props
+     */
+    allowDuplicate = input(false, { ...(ngDevMode ? { debugName: "allowDuplicate" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Whether to add a tag when the input loses focus.
+     * @defaultValue false
+     * @group Props
+     */
+    addOnBlur = input(false, { ...(ngDevMode ? { debugName: "addOnBlur" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Whether to add a tag on tab key press.
+     * @defaultValue false
+     * @group Props
+     */
+    addOnTab = input(false, { ...(ngDevMode ? { debugName: "addOnTab" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Whether to add tags on paste event.
+     * @defaultValue false
+     * @group Props
+     */
+    addOnPaste = input(false, { ...(ngDevMode ? { debugName: "addOnPaste" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Index of the element in tabbing order.
+     * @group Props
+     */
+    tabindex = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "tabindex" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether typeahead mode is active.
+     * @defaultValue false
+     * @group Props
+     */
+    typeahead = input(false, { ...(ngDevMode ? { debugName: "typeahead" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * An array of suggestions to display in the dropdown.
+     * @group Props
+     */
+    suggestions = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "suggestions" }] : /* istanbul ignore next */ []));
+    /**
+     * Property name or getter function for option label.
+     * @group Props
+     */
+    optionLabel = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "optionLabel" }] : /* istanbul ignore next */ []));
+    /**
+     * Property name or getter function for option value.
+     * @group Props
+     */
+    optionValue = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "optionValue" }] : /* istanbul ignore next */ []));
+    /**
+     * Property name or getter function for disabled state.
+     * @group Props
+     */
+    optionDisabled = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "optionDisabled" }] : /* istanbul ignore next */ []));
+    /**
+     * Field name for option group label.
+     * @defaultValue 'label'
+     * @group Props
+     */
+    optionGroupLabel = input('label', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "optionGroupLabel" }] : /* istanbul ignore next */ []));
+    /**
+     * Field name for option group children.
+     * @defaultValue 'items'
+     * @group Props
+     */
+    optionGroupChildren = input('items', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "optionGroupChildren" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether to display options as grouped.
+     * @defaultValue false
+     * @group Props
+     */
+    group = input(false, { ...(ngDevMode ? { debugName: "group" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Delay in ms between keystrokes before triggering search.
+     * @defaultValue 300
+     * @group Props
+     */
+    delay = input(300, { ...(ngDevMode ? { debugName: "delay" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    /**
+     * Minimum number of characters to initiate a search.
+     * @defaultValue 1
+     * @group Props
+     */
+    minQueryLength = input(1, { ...(ngDevMode ? { debugName: "minQueryLength" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    /**
+     * Whether to trigger search when input receives focus.
+     * @defaultValue false
+     * @group Props
+     */
+    completeOnFocus = input(false, { ...(ngDevMode ? { debugName: "completeOnFocus" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Maximum height of the suggestions panel.
+     * @defaultValue '200px'
+     * @group Props
+     */
+    scrollHeight = input('200px', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "scrollHeight" }] : /* istanbul ignore next */ []));
+    /**
+     * Target element to attach the overlay.
+     * @defaultValue 'body'
+     * @group Props
+     */
+    appendTo = input('body', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "appendTo" }] : /* istanbul ignore next */ []));
+    /**
+     * Configuration for the overlay element.
+     * @group Props
+     */
+    overlayOptions = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "overlayOptions" }] : /* istanbul ignore next */ []));
+    /**
+     * Animation options for the overlay.
+     * @group Props
+     */
+    motionOptions = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "motionOptions" }] : /* istanbul ignore next */ []));
+    /**
+     * Inline style of the overlay panel.
+     * @group Props
+     */
+    panelStyle = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "panelStyle" }] : /* istanbul ignore next */ []));
+    /**
+     * CSS class of the overlay panel.
+     * @group Props
+     */
+    panelStyleClass = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "panelStyleClass" }] : /* istanbul ignore next */ []));
+    /**
+     * Inline style of the input field.
+     * @group Props
+     */
+    inputStyle = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "inputStyle" }] : /* istanbul ignore next */ []));
+    /**
+     * CSS class of the input field.
+     * @group Props
+     */
+    inputStyleClass = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "inputStyleClass" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether to auto-focus first option when overlay shows.
+     * @defaultValue false
+     * @group Props
+     */
+    autoOptionFocus = input(false, { ...(ngDevMode ? { debugName: "autoOptionFocus" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Whether hover focuses an option.
+     * @defaultValue true
+     * @group Props
+     */
+    focusOnHover = input(true, { ...(ngDevMode ? { debugName: "focusOnHover" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    onAdd = output();
+    onRemove = output();
+    onFocus = output();
+    onBlur = output();
+    /**
+     * Callback to invoke to search for suggestions.
+     * @param {InputTagsCompleteEvent} event - Custom complete event.
+     * @group Emits
+     */
+    completeMethod = output();
+    /**
+     * Callback to invoke when a suggestion is selected.
+     * @param {InputTagsSelectEvent} event - Custom select event.
+     * @group Emits
+     */
+    onSelect = output();
+    /**
+     * Callback to invoke when the overlay is shown.
+     * @group Emits
+     */
+    onShow = output();
+    /**
+     * Callback to invoke when the overlay is hidden.
+     * @group Emits
+     */
+    onHide = output();
+    itemTemplate = contentChild('item', { ...(ngDevMode ? { debugName: "itemTemplate" } : /* istanbul ignore next */ {}), descendants: false });
+    removeIconTemplate = contentChild('removeicon', { ...(ngDevMode ? { debugName: "removeIconTemplate" } : /* istanbul ignore next */ {}), descendants: false });
+    optionTemplate = contentChild('option', { ...(ngDevMode ? { debugName: "optionTemplate" } : /* istanbul ignore next */ {}), descendants: false });
+    groupTemplate = contentChild('group', { ...(ngDevMode ? { debugName: "groupTemplate" } : /* istanbul ignore next */ {}), descendants: false });
+    headerTemplate = contentChild('header', { ...(ngDevMode ? { debugName: "headerTemplate" } : /* istanbul ignore next */ {}), descendants: false });
+    footerTemplate = contentChild('footer', { ...(ngDevMode ? { debugName: "footerTemplate" } : /* istanbul ignore next */ {}), descendants: false });
+    autoCompleteRef = viewChild('ac', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "autoCompleteRef" }] : /* istanbul ignore next */ []));
+    focused = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "focused" }] : /* istanbul ignore next */ []));
+    focusedItemIndex = signal(-1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "focusedItemIndex" }] : /* istanbul ignore next */ []));
+    _componentStyle = inject(InputTagsStyle);
+    _internalId = uuid('pn_id_');
+    $id = computed(() => this._internalId, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "$id" }] : /* istanbul ignore next */ []));
+    _placeholder = computed(() => this.placeholder(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_placeholder" }] : /* istanbul ignore next */ []));
+    focusedItemId = computed(() => (this.focusedItemIndex() !== -1 ? `${this.$id()}_item_${this.focusedItemIndex()}` : null), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "focusedItemId" }] : /* istanbul ignore next */ []));
+    $appendTo = computed(() => this.appendTo() ?? this.config?.overlayAppendTo(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "$appendTo" }] : /* istanbul ignore next */ []));
+    $inputStyleClass = computed(() => cn(this.cx('pcInputText'), this.inputStyleClass()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "$inputStyleClass" }] : /* istanbul ignore next */ []));
+    _removeItemBound = this.removeItem.bind(this);
+    _pasteListener = null;
+    onAfterViewInit() {
+        this.bindPasteListener();
+    }
+    onAfterViewChecked() {
+        this.bindDirectiveInstance.setAttrs(this.ptms(['host', 'root']));
+    }
+    onDestroy() {
+        this.unbindPasteListener();
+    }
+    writeControlValue(value, setModelValue) {
+        setModelValue?.(value || []);
+    }
+    getItemLabel(item) {
+        const optLabel = this.optionLabel();
+        if (optLabel && typeof item === 'object') {
+            return typeof optLabel === 'function' ? optLabel(item) : resolveFieldData(item, optLabel);
+        }
+        return typeof item === 'object' ? JSON.stringify(item) : String(item);
+    }
+    addItem(event, value) {
+        const trimmed = value.trim();
+        if (!trimmed)
+            return;
+        if (this.max() != null && (this.modelValue()?.length ?? 0) >= this.max())
+            return;
+        if (!this.allowDuplicate() && this.modelValue()?.includes(trimmed))
+            return;
+        const newValue = [...(this.modelValue() || []), trimmed];
+        this._updateModel(newValue);
+        this.onAdd.emit({ originalEvent: event, value: trimmed });
+        this.clearAcInput();
+    }
+    removeItem(event, index) {
+        if (this.$disabled())
+            return;
+        const current = this.modelValue() || [];
+        const removed = current[index];
+        const newValue = current.filter((_, i) => i !== index);
+        this._updateModel(newValue);
+        this.onRemove.emit({ originalEvent: event, value: removed, index });
+        setTimeout(() => this.autoCompleteRef()?.overlayViewChild()?.alignOverlay());
+    }
+    onContainerClick(event) {
+        if (this.$disabled())
+            return;
+        const target = event.target;
+        if (target.closest?.('[data-p-focused]'))
+            return;
+        this.focusAcInput();
+    }
+    onContainerKeyDown(event) {
+        if (this.$disabled())
+            return;
+        switch (event.code) {
+            case 'ArrowLeft':
+                this.onArrowLeftInContainer(event);
+                break;
+            case 'ArrowRight':
+                this.onArrowRightInContainer(event);
+                break;
+            case 'Backspace':
+                this.onBackspaceInContainer(event);
+                break;
+        }
+    }
+    onAcSearch(event) {
+        this.completeMethod.emit({ originalEvent: event.originalEvent, query: event.query });
+    }
+    onAcSelect(event) {
+        const option = event.value;
+        const optValue = this.optionValue();
+        const value = optValue ? (typeof optValue === 'function' ? optValue(option) : resolveFieldData(option, optValue)) : option;
+        if (this.max() != null && (this.modelValue()?.length ?? 0) >= this.max()) {
+            this.clearAcInput();
+            return;
+        }
+        const newModelValue = [...(this.modelValue() || []), value];
+        this._updateModel(newModelValue);
+        this.onAdd.emit({ originalEvent: event.originalEvent, value });
+        this.onSelect.emit({ originalEvent: event.originalEvent, value: option });
+        // Clear the AC's internal value and input after selection
+        setTimeout(() => {
+            const ac = this.autoCompleteRef();
+            if (ac) {
+                ac.writeValue(null);
+                if (ac.inputEL()?.nativeElement) {
+                    ac.inputEL().nativeElement.value = '';
+                }
+            }
+        });
+    }
+    onAcKeyDown(event) {
+        const ac = this.autoCompleteRef();
+        const inputValue = ac?.inputEL()?.nativeElement?.value || '';
+        switch (event.code) {
+            case 'Enter':
+            case 'NumpadEnter':
+                // If AC overlay is open and an option is focused, AC handles it via onSelect
+                if (ac?.overlayVisible() && ac?.focusedOptionIndex() !== -1) {
+                    return;
+                }
+                // Otherwise add free text tag
+                if (inputValue) {
+                    this.addItem(event, inputValue);
+                    event.preventDefault();
+                    event.stopPropagation();
+                }
+                break;
+            case 'Backspace':
+                if (!inputValue && this.modelValue()?.length > 0) {
+                    this.removeItem(event, this.modelValue().length - 1);
+                    event.stopPropagation();
+                }
+                break;
+            case 'Tab':
+                if (this.addOnTab() && inputValue) {
+                    this.addItem(event, inputValue);
+                }
+                break;
+            default:
+                this.handleDelimiter(event);
+                break;
+        }
+    }
+    onInputFocus(event) {
+        if (this.$disabled())
+            return;
+        this.focused.set(true);
+        this.focusedItemIndex.set(-1);
+        this.onFocus.emit(event);
+    }
+    onInputBlur(event) {
+        if (this.addOnBlur()) {
+            const inputValue = this.autoCompleteRef()?.inputEL()?.nativeElement?.value || '';
+            if (inputValue) {
+                this.addItem(event, inputValue);
+            }
+        }
+        this.focused.set(false);
+        this.onModelTouched();
+        this.onBlur.emit(event);
+    }
+    handleDelimiter(event) {
+        const delimiter = this.delimiter();
+        if (!delimiter)
+            return;
+        const isMatch = typeof delimiter === 'string' ? event.key === delimiter : event.key.match(delimiter);
+        if (!isMatch)
+            return;
+        event.preventDefault();
+        const inputValue = this.autoCompleteRef()?.inputEL()?.nativeElement?.value || '';
+        if (inputValue) {
+            this.addItem(event, inputValue);
+        }
+    }
+    onArrowLeftInContainer(_event) {
+        const current = this.focusedItemIndex();
+        const length = this.modelValue()?.length ?? 0;
+        if (length === 0)
+            return;
+        if (current <= 0) {
+            this.focusedItemIndex.set(length - 1);
+        }
+        else {
+            this.focusedItemIndex.set(current - 1);
+        }
+    }
+    onArrowRightInContainer(_event) {
+        const current = this.focusedItemIndex();
+        const length = this.modelValue()?.length ?? 0;
+        if (length === 0)
+            return;
+        if (current >= length - 1) {
+            this.focusedItemIndex.set(-1);
+            this.focusAcInput();
+        }
+        else {
+            this.focusedItemIndex.set(current + 1);
+        }
+    }
+    onBackspaceInContainer(event) {
+        const current = this.focusedItemIndex();
+        if (current !== -1) {
+            this.removeItem(event, current);
+            const length = this.modelValue()?.length ?? 0;
+            if (length === 0) {
+                this.focusedItemIndex.set(-1);
+                this.focusAcInput();
+            }
+            else if (current >= length) {
+                this.focusedItemIndex.set(length - 1);
+            }
+        }
+    }
+    clearAcInput() {
+        const ac = this.autoCompleteRef();
+        if (ac?.inputEL()?.nativeElement) {
+            ac.inputEL().nativeElement.value = '';
+        }
+    }
+    focusAcInput() {
+        focus(this.autoCompleteRef()?.inputEL()?.nativeElement);
+    }
+    bindPasteListener() {
+        const inputEl = this.autoCompleteRef()?.inputEL()?.nativeElement;
+        if (inputEl) {
+            this._pasteListener = (event) => this.onInputPaste(event);
+            inputEl.addEventListener('paste', this._pasteListener);
+        }
+    }
+    unbindPasteListener() {
+        const inputEl = this.autoCompleteRef()?.inputEL()?.nativeElement;
+        if (inputEl && this._pasteListener) {
+            inputEl.removeEventListener('paste', this._pasteListener);
+            this._pasteListener = null;
+        }
+    }
+    onInputPaste(event) {
+        if (!this.addOnPaste())
+            return;
+        const pastedData = event.clipboardData?.getData('Text');
+        if (!pastedData)
+            return;
+        const delimiter = this.delimiter();
+        if (delimiter) {
+            pastedData.split(delimiter).forEach((v) => this.addItem(event, v));
+        }
+        else {
+            this.addItem(event, pastedData);
+        }
+        this.clearAcInput();
+        event.preventDefault();
+    }
+    _updateModel(value) {
+        this.writeModelValue(value);
+        this.onModelChange(value);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: InputTags, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.3", type: InputTags, isStandalone: true, selector: "p-inputtags, p-input-tags", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, delimiter: { classPropertyName: "delimiter", publicName: "delimiter", isSignal: true, isRequired: false, transformFunction: null }, allowDuplicate: { classPropertyName: "allowDuplicate", publicName: "allowDuplicate", isSignal: true, isRequired: false, transformFunction: null }, addOnBlur: { classPropertyName: "addOnBlur", publicName: "addOnBlur", isSignal: true, isRequired: false, transformFunction: null }, addOnTab: { classPropertyName: "addOnTab", publicName: "addOnTab", isSignal: true, isRequired: false, transformFunction: null }, addOnPaste: { classPropertyName: "addOnPaste", publicName: "addOnPaste", isSignal: true, isRequired: false, transformFunction: null }, tabindex: { classPropertyName: "tabindex", publicName: "tabindex", isSignal: true, isRequired: false, transformFunction: null }, typeahead: { classPropertyName: "typeahead", publicName: "typeahead", isSignal: true, isRequired: false, transformFunction: null }, suggestions: { classPropertyName: "suggestions", publicName: "suggestions", isSignal: true, isRequired: false, transformFunction: null }, optionLabel: { classPropertyName: "optionLabel", publicName: "optionLabel", isSignal: true, isRequired: false, transformFunction: null }, optionValue: { classPropertyName: "optionValue", publicName: "optionValue", isSignal: true, isRequired: false, transformFunction: null }, optionDisabled: { classPropertyName: "optionDisabled", publicName: "optionDisabled", isSignal: true, isRequired: false, transformFunction: null }, optionGroupLabel: { classPropertyName: "optionGroupLabel", publicName: "optionGroupLabel", isSignal: true, isRequired: false, transformFunction: null }, optionGroupChildren: { classPropertyName: "optionGroupChildren", publicName: "optionGroupChildren", isSignal: true, isRequired: false, transformFunction: null }, group: { classPropertyName: "group", publicName: "group", isSignal: true, isRequired: false, transformFunction: null }, delay: { classPropertyName: "delay", publicName: "delay", isSignal: true, isRequired: false, transformFunction: null }, minQueryLength: { classPropertyName: "minQueryLength", publicName: "minQueryLength", isSignal: true, isRequired: false, transformFunction: null }, completeOnFocus: { classPropertyName: "completeOnFocus", publicName: "completeOnFocus", isSignal: true, isRequired: false, transformFunction: null }, scrollHeight: { classPropertyName: "scrollHeight", publicName: "scrollHeight", isSignal: true, isRequired: false, transformFunction: null }, appendTo: { classPropertyName: "appendTo", publicName: "appendTo", isSignal: true, isRequired: false, transformFunction: null }, overlayOptions: { classPropertyName: "overlayOptions", publicName: "overlayOptions", isSignal: true, isRequired: false, transformFunction: null }, motionOptions: { classPropertyName: "motionOptions", publicName: "motionOptions", isSignal: true, isRequired: false, transformFunction: null }, panelStyle: { classPropertyName: "panelStyle", publicName: "panelStyle", isSignal: true, isRequired: false, transformFunction: null }, panelStyleClass: { classPropertyName: "panelStyleClass", publicName: "panelStyleClass", isSignal: true, isRequired: false, transformFunction: null }, inputStyle: { classPropertyName: "inputStyle", publicName: "inputStyle", isSignal: true, isRequired: false, transformFunction: null }, inputStyleClass: { classPropertyName: "inputStyleClass", publicName: "inputStyleClass", isSignal: true, isRequired: false, transformFunction: null }, autoOptionFocus: { classPropertyName: "autoOptionFocus", publicName: "autoOptionFocus", isSignal: true, isRequired: false, transformFunction: null }, focusOnHover: { classPropertyName: "focusOnHover", publicName: "focusOnHover", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onAdd: "onAdd", onRemove: "onRemove", onFocus: "onFocus", onBlur: "onBlur", completeMethod: "completeMethod", onSelect: "onSelect", onShow: "onShow", onHide: "onHide" }, host: { listeners: { "click": "onContainerClick($event)", "keydown": "onContainerKeyDown($event)" }, properties: { "class": "cx('root')", "style": "sx('root')", "attr.role": "'listbox'", "attr.aria-orientation": "'horizontal'", "attr.aria-activedescendant": "focusedItemId()" } }, providers: [INPUTTAGS_VALUE_ACCESSOR, InputTagsStyle, { provide: INPUTTAGS_INSTANCE, useExisting: InputTags }, { provide: PARENT_INSTANCE, useExisting: InputTags }], queries: [{ propertyName: "itemTemplate", first: true, predicate: ["item"], isSignal: true }, { propertyName: "removeIconTemplate", first: true, predicate: ["removeicon"], isSignal: true }, { propertyName: "optionTemplate", first: true, predicate: ["option"], isSignal: true }, { propertyName: "groupTemplate", first: true, predicate: ["group"], isSignal: true }, { propertyName: "headerTemplate", first: true, predicate: ["header"], isSignal: true }, { propertyName: "footerTemplate", first: true, predicate: ["footer"], isSignal: true }], viewQueries: [{ propertyName: "autoCompleteRef", first: true, predicate: ["ac"], descendants: true, isSignal: true }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0, template: `
+        @for (item of modelValue(); track i + '_' + item; let i = $index) {
+            @if (!itemTemplate()) {
+                <p-chip [class]="cx('item', { i })" [pt]="ptm('pcChip')" [label]="getItemLabel(item)" [removable]="true" (onRemove)="removeItem($event, i)" [unstyled]="unstyled()">
+                    <ng-template #removeicon>
+                        @if (!removeIconTemplate()) {
+                            <span [pBind]="ptm('chipIcon')" [class]="cx('chipIcon')">
+                                <svg data-p-icon="times-circle" [class]="cx('chipIcon')" [attr.aria-hidden]="true" />
+                            </span>
+                        } @else {
+                            <span [pBind]="ptm('chipIcon')" [attr.aria-hidden]="true">
+                                <ng-container [ngTemplateOutlet]="removeIconTemplate()!" [ngTemplateOutletContext]="{ $implicit: item, index: i }"></ng-container>
+                            </span>
+                        }
+                    </ng-template>
+                </p-chip>
+            } @else {
+                <ng-container [ngTemplateOutlet]="itemTemplate()!" [ngTemplateOutletContext]="{ $implicit: item, index: i, onRemove: _removeItemBound }"></ng-container>
+            }
+        }
+        <p-autocomplete
+            #ac
+            [typeahead]="typeahead()"
+            [suggestions]="suggestions()"
+            [optionLabel]="optionLabel()"
+            [optionValue]="optionValue()"
+            [optionDisabled]="optionDisabled()"
+            [optionGroupLabel]="optionGroupLabel()"
+            [optionGroupChildren]="optionGroupChildren()"
+            [group]="group()"
+            [delay]="delay()"
+            [minQueryLength]="minQueryLength()"
+            [completeOnFocus]="completeOnFocus()"
+            [scrollHeight]="scrollHeight()"
+            [appendTo]="$appendTo()"
+            [overlayOptions]="overlayOptions()"
+            [motionOptions]="motionOptions()"
+            [panelStyle]="panelStyle()"
+            [panelStyleClass]="panelStyleClass()"
+            [autoOptionFocus]="autoOptionFocus()"
+            [focusOnHover]="focusOnHover()"
+            [placeholder]="_placeholder()"
+            [tabindex]="tabindex()"
+            [disabled]="$disabled()"
+            [name]="name()"
+            [inputStyle]="inputStyle()"
+            [inputStyleClass]="$inputStyleClass()"
+            [pt]="ptm('pcAutoComplete')"
+            (completeMethod)="onAcSearch($event)"
+            (onSelect)="onAcSelect($event)"
+            (onFocus)="onInputFocus($event)"
+            (onBlur)="onInputBlur($event)"
+            (onShow)="onShow.emit()"
+            (onHide)="onHide.emit()"
+            (onInputKeydown)="onAcKeyDown($event)"
+        >
+            @if (optionTemplate()) {
+                <ng-template #item let-item let-index="index">
+                    <ng-container [ngTemplateOutlet]="optionTemplate()!" [ngTemplateOutletContext]="{ $implicit: item, index: index }"></ng-container>
+                </ng-template>
+            }
+            @if (groupTemplate()) {
+                <ng-template #group let-group>
+                    <ng-container [ngTemplateOutlet]="groupTemplate()!" [ngTemplateOutletContext]="{ $implicit: group }"></ng-container>
+                </ng-template>
+            }
+            @if (headerTemplate()) {
+                <ng-template #header>
+                    <ng-container [ngTemplateOutlet]="headerTemplate()!"></ng-container>
+                </ng-template>
+            }
+            @if (footerTemplate()) {
+                <ng-template #footer>
+                    <ng-container [ngTemplateOutlet]="footerTemplate()!"></ng-container>
+                </ng-template>
+            }
+        </p-autocomplete>
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: SharedModule }, { kind: "directive", type: Bind, selector: "[pBind]", inputs: ["pBind"] }, { kind: "component", type: Chip, selector: "p-chip", inputs: ["label", "icon", "image", "alt", "disabled", "removable", "removeIcon", "chipProps"], outputs: ["onRemove", "onImageError"] }, { kind: "component", type: TimesCircle, selector: "svg[data-p-icon=\"times-circle\"]" }, { kind: "component", type: AutoComplete, selector: "p-autocomplete, p-auto-complete", inputs: ["minQueryLength", "delay", "panelStyle", "panelStyleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "readonly", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "autoHighlight", "forceSelection", "type", "autoZIndex", "baseZIndex", "ariaLabel", "dropdownAriaLabel", "ariaLabelledBy", "dropdownIcon", "unique", "group", "completeOnFocus", "showClear", "dropdown", "showEmptyMessage", "dropdownMode", "multiple", "addOnTab", "tabindex", "dataKey", "emptyMessage", "autofocus", "autocomplete", "optionGroupChildren", "optionGroupLabel", "overlayOptions", "suggestions", "optionLabel", "optionValue", "id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "selectOnFocus", "searchLocale", "optionDisabled", "focusOnHover", "typeahead", "addOnBlur", "separator", "appendTo", "motionOptions"], outputs: ["completeMethod", "onSelect", "onUnselect", "onAdd", "onFocus", "onBlur", "onDropdownClick", "onClear", "onInputKeydown", "onKeyUp", "onShow", "onHide", "onLazyLoad"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: InputTags, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'p-inputtags, p-input-tags',
+                    standalone: true,
+                    imports: [NgTemplateOutlet, SharedModule, Bind, Chip, TimesCircle, AutoComplete],
+                    template: `
+        @for (item of modelValue(); track i + '_' + item; let i = $index) {
+            @if (!itemTemplate()) {
+                <p-chip [class]="cx('item', { i })" [pt]="ptm('pcChip')" [label]="getItemLabel(item)" [removable]="true" (onRemove)="removeItem($event, i)" [unstyled]="unstyled()">
+                    <ng-template #removeicon>
+                        @if (!removeIconTemplate()) {
+                            <span [pBind]="ptm('chipIcon')" [class]="cx('chipIcon')">
+                                <svg data-p-icon="times-circle" [class]="cx('chipIcon')" [attr.aria-hidden]="true" />
+                            </span>
+                        } @else {
+                            <span [pBind]="ptm('chipIcon')" [attr.aria-hidden]="true">
+                                <ng-container [ngTemplateOutlet]="removeIconTemplate()!" [ngTemplateOutletContext]="{ $implicit: item, index: i }"></ng-container>
+                            </span>
+                        }
+                    </ng-template>
+                </p-chip>
+            } @else {
+                <ng-container [ngTemplateOutlet]="itemTemplate()!" [ngTemplateOutletContext]="{ $implicit: item, index: i, onRemove: _removeItemBound }"></ng-container>
+            }
+        }
+        <p-autocomplete
+            #ac
+            [typeahead]="typeahead()"
+            [suggestions]="suggestions()"
+            [optionLabel]="optionLabel()"
+            [optionValue]="optionValue()"
+            [optionDisabled]="optionDisabled()"
+            [optionGroupLabel]="optionGroupLabel()"
+            [optionGroupChildren]="optionGroupChildren()"
+            [group]="group()"
+            [delay]="delay()"
+            [minQueryLength]="minQueryLength()"
+            [completeOnFocus]="completeOnFocus()"
+            [scrollHeight]="scrollHeight()"
+            [appendTo]="$appendTo()"
+            [overlayOptions]="overlayOptions()"
+            [motionOptions]="motionOptions()"
+            [panelStyle]="panelStyle()"
+            [panelStyleClass]="panelStyleClass()"
+            [autoOptionFocus]="autoOptionFocus()"
+            [focusOnHover]="focusOnHover()"
+            [placeholder]="_placeholder()"
+            [tabindex]="tabindex()"
+            [disabled]="$disabled()"
+            [name]="name()"
+            [inputStyle]="inputStyle()"
+            [inputStyleClass]="$inputStyleClass()"
+            [pt]="ptm('pcAutoComplete')"
+            (completeMethod)="onAcSearch($event)"
+            (onSelect)="onAcSelect($event)"
+            (onFocus)="onInputFocus($event)"
+            (onBlur)="onInputBlur($event)"
+            (onShow)="onShow.emit()"
+            (onHide)="onHide.emit()"
+            (onInputKeydown)="onAcKeyDown($event)"
+        >
+            @if (optionTemplate()) {
+                <ng-template #item let-item let-index="index">
+                    <ng-container [ngTemplateOutlet]="optionTemplate()!" [ngTemplateOutletContext]="{ $implicit: item, index: index }"></ng-container>
+                </ng-template>
+            }
+            @if (groupTemplate()) {
+                <ng-template #group let-group>
+                    <ng-container [ngTemplateOutlet]="groupTemplate()!" [ngTemplateOutletContext]="{ $implicit: group }"></ng-container>
+                </ng-template>
+            }
+            @if (headerTemplate()) {
+                <ng-template #header>
+                    <ng-container [ngTemplateOutlet]="headerTemplate()!"></ng-container>
+                </ng-template>
+            }
+            @if (footerTemplate()) {
+                <ng-template #footer>
+                    <ng-container [ngTemplateOutlet]="footerTemplate()!"></ng-container>
+                </ng-template>
+            }
+        </p-autocomplete>
+    `,
+                    providers: [INPUTTAGS_VALUE_ACCESSOR, InputTagsStyle, { provide: INPUTTAGS_INSTANCE, useExisting: InputTags }, { provide: PARENT_INSTANCE, useExisting: InputTags }],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    host: {
+                        '[class]': "cx('root')",
+                        '[style]': "sx('root')",
+                        '[attr.role]': "'listbox'",
+                        '[attr.aria-orientation]': "'horizontal'",
+                        '[attr.aria-activedescendant]': 'focusedItemId()',
+                        '(click)': 'onContainerClick($event)',
+                        '(keydown)': 'onContainerKeyDown($event)'
+                    },
+                    hostDirectives: [Bind]
+                }]
+        }], propDecorators: { placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], delimiter: [{ type: i0.Input, args: [{ isSignal: true, alias: "delimiter", required: false }] }], allowDuplicate: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowDuplicate", required: false }] }], addOnBlur: [{ type: i0.Input, args: [{ isSignal: true, alias: "addOnBlur", required: false }] }], addOnTab: [{ type: i0.Input, args: [{ isSignal: true, alias: "addOnTab", required: false }] }], addOnPaste: [{ type: i0.Input, args: [{ isSignal: true, alias: "addOnPaste", required: false }] }], tabindex: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabindex", required: false }] }], typeahead: [{ type: i0.Input, args: [{ isSignal: true, alias: "typeahead", required: false }] }], suggestions: [{ type: i0.Input, args: [{ isSignal: true, alias: "suggestions", required: false }] }], optionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionLabel", required: false }] }], optionValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionValue", required: false }] }], optionDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionDisabled", required: false }] }], optionGroupLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionGroupLabel", required: false }] }], optionGroupChildren: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionGroupChildren", required: false }] }], group: [{ type: i0.Input, args: [{ isSignal: true, alias: "group", required: false }] }], delay: [{ type: i0.Input, args: [{ isSignal: true, alias: "delay", required: false }] }], minQueryLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "minQueryLength", required: false }] }], completeOnFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "completeOnFocus", required: false }] }], scrollHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollHeight", required: false }] }], appendTo: [{ type: i0.Input, args: [{ isSignal: true, alias: "appendTo", required: false }] }], overlayOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "overlayOptions", required: false }] }], motionOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "motionOptions", required: false }] }], panelStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelStyle", required: false }] }], panelStyleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelStyleClass", required: false }] }], inputStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputStyle", required: false }] }], inputStyleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputStyleClass", required: false }] }], autoOptionFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoOptionFocus", required: false }] }], focusOnHover: [{ type: i0.Input, args: [{ isSignal: true, alias: "focusOnHover", required: false }] }], onAdd: [{ type: i0.Output, args: ["onAdd"] }], onRemove: [{ type: i0.Output, args: ["onRemove"] }], onFocus: [{ type: i0.Output, args: ["onFocus"] }], onBlur: [{ type: i0.Output, args: ["onBlur"] }], completeMethod: [{ type: i0.Output, args: ["completeMethod"] }], onSelect: [{ type: i0.Output, args: ["onSelect"] }], onShow: [{ type: i0.Output, args: ["onShow"] }], onHide: [{ type: i0.Output, args: ["onHide"] }], itemTemplate: [{ type: i0.ContentChild, args: ['item', { ...{ descendants: false }, isSignal: true }] }], removeIconTemplate: [{ type: i0.ContentChild, args: ['removeicon', { ...{ descendants: false }, isSignal: true }] }], optionTemplate: [{ type: i0.ContentChild, args: ['option', { ...{ descendants: false }, isSignal: true }] }], groupTemplate: [{ type: i0.ContentChild, args: ['group', { ...{ descendants: false }, isSignal: true }] }], headerTemplate: [{ type: i0.ContentChild, args: ['header', { ...{ descendants: false }, isSignal: true }] }], footerTemplate: [{ type: i0.ContentChild, args: ['footer', { ...{ descendants: false }, isSignal: true }] }], autoCompleteRef: [{ type: i0.ViewChild, args: ['ac', { isSignal: true }] }] } });
+class InputTagsModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: InputTagsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.3", ngImport: i0, type: InputTagsModule, imports: [InputTags, SharedModule], exports: [InputTags, SharedModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: InputTagsModule, imports: [InputTags, SharedModule, SharedModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: InputTagsModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [InputTags, SharedModule],
+                    exports: [InputTags, SharedModule]
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { INPUTTAGS_VALUE_ACCESSOR, InputTags, InputTagsClasses, InputTagsModule, InputTagsStyle };
+//# sourceMappingURL=primenglab-inputtags.mjs.map