primeng 20.1.2 → 20.2.0

package/fesm2022/primeng-autocomplete.mjs

@@ -3,7 +3,7 @@ import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
 import { Injectable, forwardRef, input, EventEmitter, inject, signal, computed, booleanAttribute, numberAttribute, ContentChildren, HostListener, ContentChild, ViewChild, Output, Input, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
-import { resolveFieldData, isNotEmpty, uuid, findLastIndex, equals, focus, isEmpty, findSingle } from '@primeuix/utils';
+import { equals, isNotEmpty, uuid, findLastIndex, resolveFieldData, focus, isEmpty, findSingle } from '@primeuix/utils';
 import * as i1 from 'primeng/api';
 import { TranslationKeys, SharedModule, PrimeTemplate } from 'primeng/api';
 import { AutoFocus } from 'primeng/autofocus';
@@ -104,10 +104,10 @@ class AutoCompleteStyle extends BaseStyle {
     theme = theme;
     classes = classes;
     inlineStyles = inlineStyles;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: AutoCompleteStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: AutoCompleteStyle });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: AutoCompleteStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: AutoCompleteStyle });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: AutoCompleteStyle, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: AutoCompleteStyle, decorators: [{
             type: Injectable
         }] });
 /**
@@ -362,6 +362,11 @@ class AutoComplete extends BaseInput {
      * @group Props
      */
     multiple;
+    /**
+     * When enabled, the input value is added to the selected items on tab key press when multiple is true and typeahead is false.
+     * @group Props
+     */
+    addOnTab = false;
     /**
      * Index of the element in tabbing order.
      * @group Props
@@ -487,6 +492,17 @@ class AutoComplete extends BaseInput {
      * @group Props
      */
     typeahead = true;
+    /**
+     * Whether to add an item on blur event if the input has value and typeahead is false with multiple mode.
+     * @defaultValue false
+     * @group Props
+     */
+    addOnBlur = false;
+    /**
+     * Separator char to add item when typeahead is false and multiple mode is enabled.
+     * @group Props
+     */
+    separator;
     /**
      * Target element to attach the overlay, valid values are "body" or a local ng-template variable of another element (note: use binding with brackets for template variables, e.g. [appendTo]="mydiv" for a div element having #mydiv as variable name).
      * @defaultValue 'self'
@@ -511,6 +527,12 @@ class AutoComplete extends BaseInput {
      * @group Emits
      */
     onUnselect = new EventEmitter();
+    /**
+     * Callback to invoke when an item is added via addOnBlur or separator features.
+     * @param {AutoCompleteAddEvent} event - Custom add event.
+     * @group Emits
+     */
+    onAdd = new EventEmitter();
     /**
      * Callback to invoke when the component receives focus.
      * @param {Event} event - Browser event.
@@ -535,6 +557,12 @@ class AutoComplete extends BaseInput {
      * @group Emits
      */
     onClear = new EventEmitter();
+    /**
+     * Callback to invoke on input key down.
+     * @param {KeyboardEvent} event - Keyboard event.
+     * @group Emits
+     */
+    onInputKeydown = new EventEmitter();
     /**
      * Callback to invoke on input key up.
      * @param {KeyboardEvent} event - Keyboard event.
@@ -659,7 +687,7 @@ class AutoComplete extends BaseInput {
     }, ...(ngDevMode ? [{ debugName: "visibleOptions" }] : []));
     inputValue = computed(() => {
         const modelValue = this.modelValue();
-        const selectedOption = this.optionValueSelected ? (this.suggestions || []).find((item) => resolveFieldData(item, this.optionValue) === modelValue) : modelValue;
+        const selectedOption = this.optionValueSelected ? (this.suggestions || []).find((option) => equals(option, modelValue, this.equalityKey())) : modelValue;
         if (isNotEmpty(modelValue)) {
             if (typeof modelValue === 'object' || this.optionValueSelected) {
                 const label = this.getOptionLabel(selectedOption);
@@ -842,28 +870,28 @@ class AutoComplete extends BaseInput {
     }
     isSelected(option) {
         if (this.multiple) {
-            return this.unique ? this.modelValue()?.find((model) => equals(model, this.getOptionValue(option), this.equalityKey())) : false;
+            return this.unique ? this.modelValue()?.some((model) => equals(model, option, this.equalityKey())) : false;
         }
-        return equals(this.modelValue(), this.getOptionValue(option), this.equalityKey());
+        return equals(this.modelValue(), option, this.equalityKey());
     }
     isOptionMatched(option, value) {
         return this.isValidOption(option) && this.getOptionLabel(option).toLocaleLowerCase(this.searchLocale) === value.toLocaleLowerCase(this.searchLocale);
     }
     isInputClicked(event) {
-        return event.target === this.inputEL.nativeElement;
+        return event.target === this.inputEL?.nativeElement;
     }
     isDropdownClicked(event) {
         return this.dropdownButton?.nativeElement ? event.target === this.dropdownButton.nativeElement || this.dropdownButton.nativeElement.contains(event.target) : false;
     }
     equalityKey() {
-        return this.dataKey; // TODO: The 'optionValue' properties can be added.
+        return this.optionValue ? undefined : this.dataKey;
     }
     onContainerClick(event) {
         if (this.$disabled() || this.loading || this.isInputClicked(event) || this.isDropdownClicked(event)) {
             return;
         }
         if (!this.overlayViewChild || !this.overlayViewChild.overlayViewChild?.nativeElement.contains(event.target)) {
-            focus(this.inputEL.nativeElement);
+            focus(this.inputEL?.nativeElement);
         }
     }
     handleDropdownClick(event) {
@@ -872,8 +900,8 @@ class AutoComplete extends BaseInput {
             this.hide(true);
         }
         else {
-            focus(this.inputEL.nativeElement);
-            query = this.inputEL.nativeElement.value;
+            focus(this.inputEL?.nativeElement);
+            query = this.inputEL?.nativeElement?.value;
             if (this.dropdownMode === 'blank')
                 this.search(event, '', 'dropdown');
             else if (this.dropdownMode === 'current')
@@ -917,14 +945,14 @@ class AutoComplete extends BaseInput {
         if (this.forceSelection) {
             let valid = false;
             if (this.visibleOptions()) {
-                const matchedValue = this.visibleOptions().find((option) => this.isOptionMatched(option, this.inputEL.nativeElement.value || ''));
+                const matchedValue = this.visibleOptions().find((option) => this.isOptionMatched(option, this.inputEL?.nativeElement?.value || ''));
                 if (matchedValue !== undefined) {
                     valid = true;
                     !this.isSelected(matchedValue) && this.onOptionSelect(event, matchedValue);
                 }
             }
             if (!valid) {
-                this.inputEL.nativeElement.value = '';
+                this.inputEL?.nativeElement && (this.inputEL.nativeElement.value = '');
                 !this.multiple && this.updateModel(null);
             }
         }
@@ -978,11 +1006,53 @@ class AutoComplete extends BaseInput {
         this.dirty = false;
         this.focused = false;
         this.focusedOptionIndex.set(-1);
+        if (this.addOnBlur && this.multiple && !this.typeahead) {
+            const inputValue = (this.multiInputEl?.nativeElement?.value || event.target.value || '').trim();
+            if (inputValue && !this.isSelected(inputValue)) {
+                this.updateModel([...(this.modelValue() || []), inputValue]);
+                this.onAdd.emit({ originalEvent: event, value: inputValue });
+                if (this.multiInputEl?.nativeElement) {
+                    this.multiInputEl.nativeElement.value = '';
+                }
+                else {
+                    event.target.value = '';
+                }
+            }
+        }
         this.onModelTouched();
         this.onBlur.emit(event);
     }
     onInputPaste(event) {
-        this.onKeyDown(event);
+        if (this.separator && this.multiple && !this.typeahead) {
+            const pastedData = (event.clipboardData || window['clipboardData'])?.getData('Text');
+            if (pastedData) {
+                const values = pastedData.split(this.separator);
+                const newValues = [...(this.modelValue() || [])];
+                values.forEach((value) => {
+                    const trimmedValue = value.trim();
+                    if (trimmedValue && !this.isSelected(trimmedValue)) {
+                        newValues.push(trimmedValue);
+                    }
+                });
+                if (newValues.length > (this.modelValue() || []).length) {
+                    const addedValues = newValues.slice((this.modelValue() || []).length);
+                    this.updateModel(newValues);
+                    addedValues.forEach((addedValue) => {
+                        this.onAdd.emit({ originalEvent: event, value: addedValue });
+                    });
+                    if (this.multiInputEl?.nativeElement) {
+                        this.multiInputEl.nativeElement.value = '';
+                    }
+                    else {
+                        event.target.value = '';
+                    }
+                    event.preventDefault();
+                }
+            }
+        }
+        else {
+            this.onKeyDown(event);
+        }
     }
     onInputKeyUp(event) {
         this.onKeyUp.emit(event);
@@ -992,6 +1062,8 @@ class AutoComplete extends BaseInput {
             event.preventDefault();
             return;
         }
+        // Emit keydown event for external handling
+        this.onInputKeydown.emit(event);
         switch (event.code) {
             case 'ArrowDown':
                 this.onArrowDownKey(event);
@@ -1035,9 +1107,28 @@ class AutoComplete extends BaseInput {
                 //NOOP
                 break;
             default:
+                this.handleSeparatorKey(event);
                 break;
         }
     }
+    handleSeparatorKey(event) {
+        if (this.separator && this.multiple && !this.typeahead) {
+            if (this.separator === event.key || (typeof this.separator === 'string' && event.key === this.separator) || (this.separator instanceof RegExp && event.key.match(this.separator))) {
+                const inputValue = (this.multiInputEl?.nativeElement?.value || event.target.value || '').trim();
+                if (inputValue && !this.isSelected(inputValue)) {
+                    this.updateModel([...(this.modelValue() || []), inputValue]);
+                    this.onAdd.emit({ originalEvent: event, value: inputValue });
+                    if (this.multiInputEl?.nativeElement) {
+                        this.multiInputEl.nativeElement.value = '';
+                    }
+                    else {
+                        event.target.value = '';
+                    }
+                    event.preventDefault();
+                }
+            }
+        }
+    }
     onArrowDownKey(event) {
         if (!this.overlayVisible) {
             return;
@@ -1070,7 +1161,7 @@ class AutoComplete extends BaseInput {
         this.focusedOptionIndex.set(-1);
         if (this.multiple) {
             if (isEmpty(target.value) && this.hasSelectedOption()) {
-                focus(this.multiContainerEL.nativeElement);
+                focus(this.multiContainerEL?.nativeElement);
                 this.focusedMultipleOptionIndex.set(this.modelValue().length);
             }
             else {
@@ -1105,11 +1196,12 @@ class AutoComplete extends BaseInput {
         event.preventDefault();
     }
     onEnterKey(event) {
-        if (!this.typeahead) {
+        if (!this.typeahead && !this.forceSelection) {
             if (this.multiple) {
-                if (!this.isSelected(event.target.value)) {
-                    this.updateModel([...(this.modelValue() || []), event.target.value]);
-                    this.inputEL.nativeElement.value = '';
+                const inputValue = event.target.value?.trim();
+                if (inputValue && !this.isSelected(inputValue)) {
+                    this.updateModel([...(this.modelValue() || []), inputValue]);
+                    this.inputEL?.nativeElement && (this.inputEL.nativeElement.value = '');
                 }
             }
         }
@@ -1129,14 +1221,40 @@ class AutoComplete extends BaseInput {
         event.preventDefault();
     }
     onTabKey(event) {
+        // If there's a focused option in the dropdown, select it
         if (this.focusedOptionIndex() !== -1) {
             this.onOptionSelect(event, this.visibleOptions()[this.focusedOptionIndex()]);
+            return;
+        }
+        // Handle tab key behavior for multiple mode without typeahead
+        if (this.multiple && !this.typeahead) {
+            const inputValue = (this.multiInputEl?.nativeElement?.value || this.inputEL?.nativeElement?.value || '').trim();
+            if (this.addOnTab) {
+                if (inputValue && !this.isSelected(inputValue)) {
+                    // Add the value and keep focus
+                    this.updateModel([...(this.modelValue() || []), inputValue]);
+                    this.onAdd.emit({ originalEvent: event, value: inputValue });
+                    if (this.multiInputEl?.nativeElement) {
+                        this.multiInputEl.nativeElement.value = '';
+                    }
+                    else if (this.inputEL?.nativeElement) {
+                        this.inputEL.nativeElement.value = '';
+                    }
+                    this.updateInputValue();
+                    event.preventDefault(); // Keep focus on the component
+                    this.overlayVisible && this.hide();
+                    return;
+                }
+                // If no value or already selected, allow normal tab behavior (blur)
+            }
+            // If addOnTab is false or no value to add, allow normal tab behavior
+            // which will trigger blur and potentially addOnBlur
         }
         this.overlayVisible && this.hide();
     }
     onBackspaceKey(event) {
         if (this.multiple) {
-            if (isNotEmpty(this.modelValue()) && !this.inputEL.nativeElement.value) {
+            if (isNotEmpty(this.modelValue()) && !this.inputEL?.nativeElement?.value) {
                 const removedValue = this.modelValue()[this.modelValue().length - 1];
                 const newValue = this.modelValue().slice(0, -1);
                 this.updateModel(newValue);
@@ -1144,9 +1262,6 @@ class AutoComplete extends BaseInput {
             }
             event.stopPropagation(); // To prevent onBackspaceKeyOnMultiple method
         }
-        if (!this.multiple && this.showClear && this.findSelectedOptionIndex() != -1) {
-            this.clear();
-        }
     }
     onArrowLeftKeyOnMultiple(event) {
         const optionIndex = this.focusedMultipleOptionIndex() < 1 ? 0 : this.focusedMultipleOptionIndex() - 1;
@@ -1158,7 +1273,7 @@ class AutoComplete extends BaseInput {
         this.focusedMultipleOptionIndex.set(optionIndex);
         if (optionIndex > this.modelValue().length - 1) {
             this.focusedMultipleOptionIndex.set(-1);
-            focus(this.inputEL.nativeElement);
+            focus(this.inputEL?.nativeElement);
         }
     }
     onBackspaceKeyOnMultiple(event) {
@@ -1167,15 +1282,14 @@ class AutoComplete extends BaseInput {
         }
     }
     onOptionSelect(event, option, isHide = true) {
-        const value = this.getOptionValue(option);
         if (this.multiple) {
-            this.inputEL.nativeElement.value = '';
+            this.inputEL?.nativeElement && (this.inputEL.nativeElement.value = '');
             if (!this.isSelected(option)) {
-                this.updateModel([...(this.modelValue() || []), value]);
+                this.updateModel([...(this.modelValue() || []), option]);
             }
         }
         else {
-            this.updateModel(value);
+            this.updateModel(option);
         }
         this.onSelect.emit({ originalEvent: event, value: option });
         isHide && this.hide(true);
@@ -1203,11 +1317,12 @@ class AutoComplete extends BaseInput {
         const value = this.modelValue().filter((_, i) => i !== index);
         this.updateModel(value);
         this.onUnselect.emit({ originalEvent: event, value: removedOption });
-        focus(this.inputEL.nativeElement);
+        focus(this.inputEL?.nativeElement);
     }
-    updateModel(value) {
+    updateModel(options) {
+        const value = this.multiple ? options.map((option) => this.getOptionValue(option)) : this.getOptionValue(options);
         this.value = value;
-        this.writeModelValue(value);
+        this.writeModelValue(options);
         this.onModelChange(value);
         this.updateInputValue();
         this.cd.markForCheck();
@@ -1257,9 +1372,9 @@ class AutoComplete extends BaseInput {
         this.overlayVisible = true;
         const focusedOptionIndex = this.focusedOptionIndex() !== -1 ? this.focusedOptionIndex() : this.autoOptionFocus ? this.findFirstFocusedOptionIndex() : -1;
         this.focusedOptionIndex.set(focusedOptionIndex);
-        isFocus && focus(this.inputEL.nativeElement);
+        isFocus && focus(this.inputEL?.nativeElement);
         if (isFocus) {
-            focus(this.inputEL.nativeElement);
+            focus(this.inputEL?.nativeElement);
         }
         this.onShow.emit();
         this.cd.markForCheck();
@@ -1269,7 +1384,7 @@ class AutoComplete extends BaseInput {
             this.dirty = isFocus;
             this.overlayVisible = false;
             this.focusedOptionIndex.set(-1);
-            isFocus && focus(this.inputEL.nativeElement);
+            isFocus && focus(this.inputEL?.nativeElement);
             this.onHide.emit();
             this.cd.markForCheck();
         };
@@ -1279,7 +1394,7 @@ class AutoComplete extends BaseInput {
     }
     clear() {
         this.updateModel(null);
-        this.inputEL.nativeElement.value = '';
+        this.inputEL?.nativeElement && (this.inputEL.nativeElement.value = '');
         this.onClear.emit();
     }
     hasSelectedOption() {
@@ -1313,7 +1428,7 @@ class AutoComplete extends BaseInput {
             this.itemsWrapper = findSingle(this.overlayViewChild.overlayViewChild?.nativeElement, this.virtualScroll ? '.p-scroller' : '.p-autocomplete-panel');
             if (this.virtualScroll) {
                 this.scroller?.setContentEl(this.itemsViewChild?.nativeElement);
-                this.scroller.viewInit();
+                this.scroller?.viewInit();
             }
             if (this.visibleOptions() && this.visibleOptions().length) {
                 if (this.virtualScroll) {
@@ -1338,8 +1453,9 @@ class AutoComplete extends BaseInput {
      * Writes the value to the control.
      */
     writeControlValue(value, setModelValue) {
+        const options = this.multiple ? this.visibleOptions().filter((option) => value?.some((val) => equals(val, option, this.equalityKey()))) : this.visibleOptions().find((option) => equals(value, option, this.equalityKey()));
         this.value = value;
-        setModelValue(value);
+        setModelValue(isEmpty(options) ? value : options);
         this.updateInputValue();
         this.cd.markForCheck();
     }
@@ -1350,8 +1466,8 @@ class AutoComplete extends BaseInput {
         }
         super.ngOnDestroy();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: AutoComplete, deps: [{ token: i1.OverlayService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.0", type: AutoComplete, isStandalone: true, selector: "p-autoComplete, p-autocomplete, p-auto-complete", inputs: { minLength: { classPropertyName: "minLength", publicName: "minLength", isSignal: false, isRequired: false, transformFunction: numberAttribute }, minQueryLength: { classPropertyName: "minQueryLength", publicName: "minQueryLength", isSignal: false, isRequired: false, transformFunction: numberAttribute }, delay: { classPropertyName: "delay", publicName: "delay", isSignal: false, isRequired: false, transformFunction: numberAttribute }, panelStyle: { classPropertyName: "panelStyle", publicName: "panelStyle", isSignal: false, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: false, isRequired: false, transformFunction: null }, panelStyleClass: { classPropertyName: "panelStyleClass", publicName: "panelStyleClass", isSignal: false, isRequired: false, transformFunction: null }, inputStyle: { classPropertyName: "inputStyle", publicName: "inputStyle", isSignal: false, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: false, isRequired: false, transformFunction: null }, inputStyleClass: { classPropertyName: "inputStyleClass", publicName: "inputStyleClass", isSignal: false, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, scrollHeight: { classPropertyName: "scrollHeight", publicName: "scrollHeight", isSignal: false, isRequired: false, transformFunction: null }, lazy: { classPropertyName: "lazy", publicName: "lazy", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, virtualScroll: { classPropertyName: "virtualScroll", publicName: "virtualScroll", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, virtualScrollItemSize: { classPropertyName: "virtualScrollItemSize", publicName: "virtualScrollItemSize", isSignal: false, isRequired: false, transformFunction: numberAttribute }, virtualScrollOptions: { classPropertyName: "virtualScrollOptions", publicName: "virtualScrollOptions", isSignal: false, isRequired: false, transformFunction: null }, autoHighlight: { classPropertyName: "autoHighlight", publicName: "autoHighlight", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, forceSelection: { classPropertyName: "forceSelection", publicName: "forceSelection", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, type: { classPropertyName: "type", publicName: "type", isSignal: false, isRequired: false, transformFunction: null }, autoZIndex: { classPropertyName: "autoZIndex", publicName: "autoZIndex", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, baseZIndex: { classPropertyName: "baseZIndex", publicName: "baseZIndex", isSignal: false, isRequired: false, transformFunction: numberAttribute }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: false, isRequired: false, transformFunction: null }, dropdownAriaLabel: { classPropertyName: "dropdownAriaLabel", publicName: "dropdownAriaLabel", isSignal: false, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "ariaLabelledBy", isSignal: false, isRequired: false, transformFunction: null }, dropdownIcon: { classPropertyName: "dropdownIcon", publicName: "dropdownIcon", isSignal: false, isRequired: false, transformFunction: null }, unique: { classPropertyName: "unique", publicName: "unique", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, group: { classPropertyName: "group", publicName: "group", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, completeOnFocus: { classPropertyName: "completeOnFocus", publicName: "completeOnFocus", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, showClear: { classPropertyName: "showClear", publicName: "showClear", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, dropdown: { classPropertyName: "dropdown", publicName: "dropdown", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, showEmptyMessage: { classPropertyName: "showEmptyMessage", publicName: "showEmptyMessage", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, dropdownMode: { classPropertyName: "dropdownMode", publicName: "dropdownMode", isSignal: false, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, tabindex: { classPropertyName: "tabindex", publicName: "tabindex", isSignal: false, isRequired: false, transformFunction: numberAttribute }, dataKey: { classPropertyName: "dataKey", publicName: "dataKey", isSignal: false, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: false, isRequired: false, transformFunction: null }, showTransitionOptions: { classPropertyName: "showTransitionOptions", publicName: "showTransitionOptions", isSignal: false, isRequired: false, transformFunction: null }, hideTransitionOptions: { classPropertyName: "hideTransitionOptions", publicName: "hideTransitionOptions", isSignal: false, isRequired: false, transformFunction: null }, autofocus: { classPropertyName: "autofocus", publicName: "autofocus", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: false, isRequired: false, transformFunction: null }, optionGroupChildren: { classPropertyName: "optionGroupChildren", publicName: "optionGroupChildren", isSignal: false, isRequired: false, transformFunction: null }, optionGroupLabel: { classPropertyName: "optionGroupLabel", publicName: "optionGroupLabel", isSignal: false, isRequired: false, transformFunction: null }, overlayOptions: { classPropertyName: "overlayOptions", publicName: "overlayOptions", isSignal: false, isRequired: false, transformFunction: null }, suggestions: { classPropertyName: "suggestions", publicName: "suggestions", isSignal: false, isRequired: false, transformFunction: null }, optionLabel: { classPropertyName: "optionLabel", publicName: "optionLabel", isSignal: false, isRequired: false, transformFunction: null }, optionValue: { classPropertyName: "optionValue", publicName: "optionValue", isSignal: false, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: false, isRequired: false, transformFunction: null }, searchMessage: { classPropertyName: "searchMessage", publicName: "searchMessage", isSignal: false, isRequired: false, transformFunction: null }, emptySelectionMessage: { classPropertyName: "emptySelectionMessage", publicName: "emptySelectionMessage", isSignal: false, isRequired: false, transformFunction: null }, selectionMessage: { classPropertyName: "selectionMessage", publicName: "selectionMessage", isSignal: false, isRequired: false, transformFunction: null }, autoOptionFocus: { classPropertyName: "autoOptionFocus", publicName: "autoOptionFocus", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, selectOnFocus: { classPropertyName: "selectOnFocus", publicName: "selectOnFocus", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, searchLocale: { classPropertyName: "searchLocale", publicName: "searchLocale", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, optionDisabled: { classPropertyName: "optionDisabled", publicName: "optionDisabled", isSignal: false, isRequired: false, transformFunction: null }, focusOnHover: { classPropertyName: "focusOnHover", publicName: "focusOnHover", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, typeahead: { classPropertyName: "typeahead", publicName: "typeahead", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, appendTo: { classPropertyName: "appendTo", publicName: "appendTo", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { completeMethod: "completeMethod", onSelect: "onSelect", onUnselect: "onUnselect", onFocus: "onFocus", onBlur: "onBlur", onDropdownClick: "onDropdownClick", onClear: "onClear", onKeyUp: "onKeyUp", onShow: "onShow", onHide: "onHide", onLazyLoad: "onLazyLoad" }, host: { listeners: { "click": "onHostClick($event)" }, properties: { "class": "cn(cx('root'), styleClass)", "style": "sx('root')" } }, providers: [AUTOCOMPLETE_VALUE_ACCESSOR, AutoCompleteStyle], queries: [{ propertyName: "itemTemplate", first: true, predicate: ["item"], descendants: true }, { propertyName: "emptyTemplate", first: true, predicate: ["empty"], descendants: true }, { propertyName: "headerTemplate", first: true, predicate: ["header"], descendants: true }, { propertyName: "footerTemplate", first: true, predicate: ["footer"], descendants: true }, { propertyName: "selectedItemTemplate", first: true, predicate: ["selecteditem"], descendants: true }, { propertyName: "groupTemplate", first: true, predicate: ["group"], descendants: true }, { propertyName: "loaderTemplate", first: true, predicate: ["loader"], descendants: true }, { propertyName: "removeIconTemplate", first: true, predicate: ["removeicon"], descendants: true }, { propertyName: "loadingIconTemplate", first: true, predicate: ["loadingicon"], descendants: true }, { propertyName: "clearIconTemplate", first: true, predicate: ["clearicon"], descendants: true }, { propertyName: "dropdownIconTemplate", first: true, predicate: ["dropdownicon"], descendants: true }, { propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "inputEL", first: true, predicate: ["focusInput"], descendants: true }, { propertyName: "multiInputEl", first: true, predicate: ["multiIn"], descendants: true }, { propertyName: "multiContainerEL", first: true, predicate: ["multiContainer"], descendants: true }, { propertyName: "dropdownButton", first: true, predicate: ["ddBtn"], descendants: true }, { propertyName: "itemsViewChild", first: true, predicate: ["items"], descendants: true }, { propertyName: "scroller", first: true, predicate: ["scroller"], descendants: true }, { propertyName: "overlayViewChild", first: true, predicate: ["overlay"], descendants: true }], usesInheritance: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: AutoComplete, deps: [{ token: i1.OverlayService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.2", type: AutoComplete, isStandalone: true, selector: "p-autoComplete, p-autocomplete, p-auto-complete", inputs: { minLength: { classPropertyName: "minLength", publicName: "minLength", isSignal: false, isRequired: false, transformFunction: numberAttribute }, minQueryLength: { classPropertyName: "minQueryLength", publicName: "minQueryLength", isSignal: false, isRequired: false, transformFunction: numberAttribute }, delay: { classPropertyName: "delay", publicName: "delay", isSignal: false, isRequired: false, transformFunction: numberAttribute }, panelStyle: { classPropertyName: "panelStyle", publicName: "panelStyle", isSignal: false, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: false, isRequired: false, transformFunction: null }, panelStyleClass: { classPropertyName: "panelStyleClass", publicName: "panelStyleClass", isSignal: false, isRequired: false, transformFunction: null }, inputStyle: { classPropertyName: "inputStyle", publicName: "inputStyle", isSignal: false, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: false, isRequired: false, transformFunction: null }, inputStyleClass: { classPropertyName: "inputStyleClass", publicName: "inputStyleClass", isSignal: false, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, scrollHeight: { classPropertyName: "scrollHeight", publicName: "scrollHeight", isSignal: false, isRequired: false, transformFunction: null }, lazy: { classPropertyName: "lazy", publicName: "lazy", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, virtualScroll: { classPropertyName: "virtualScroll", publicName: "virtualScroll", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, virtualScrollItemSize: { classPropertyName: "virtualScrollItemSize", publicName: "virtualScrollItemSize", isSignal: false, isRequired: false, transformFunction: numberAttribute }, virtualScrollOptions: { classPropertyName: "virtualScrollOptions", publicName: "virtualScrollOptions", isSignal: false, isRequired: false, transformFunction: null }, autoHighlight: { classPropertyName: "autoHighlight", publicName: "autoHighlight", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, forceSelection: { classPropertyName: "forceSelection", publicName: "forceSelection", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, type: { classPropertyName: "type", publicName: "type", isSignal: false, isRequired: false, transformFunction: null }, autoZIndex: { classPropertyName: "autoZIndex", publicName: "autoZIndex", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, baseZIndex: { classPropertyName: "baseZIndex", publicName: "baseZIndex", isSignal: false, isRequired: false, transformFunction: numberAttribute }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: false, isRequired: false, transformFunction: null }, dropdownAriaLabel: { classPropertyName: "dropdownAriaLabel", publicName: "dropdownAriaLabel", isSignal: false, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "ariaLabelledBy", isSignal: false, isRequired: false, transformFunction: null }, dropdownIcon: { classPropertyName: "dropdownIcon", publicName: "dropdownIcon", isSignal: false, isRequired: false, transformFunction: null }, unique: { classPropertyName: "unique", publicName: "unique", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, group: { classPropertyName: "group", publicName: "group", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, completeOnFocus: { classPropertyName: "completeOnFocus", publicName: "completeOnFocus", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, showClear: { classPropertyName: "showClear", publicName: "showClear", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, dropdown: { classPropertyName: "dropdown", publicName: "dropdown", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, showEmptyMessage: { classPropertyName: "showEmptyMessage", publicName: "showEmptyMessage", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, dropdownMode: { classPropertyName: "dropdownMode", publicName: "dropdownMode", isSignal: false, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, addOnTab: { classPropertyName: "addOnTab", publicName: "addOnTab", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, tabindex: { classPropertyName: "tabindex", publicName: "tabindex", isSignal: false, isRequired: false, transformFunction: numberAttribute }, dataKey: { classPropertyName: "dataKey", publicName: "dataKey", isSignal: false, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: false, isRequired: false, transformFunction: null }, showTransitionOptions: { classPropertyName: "showTransitionOptions", publicName: "showTransitionOptions", isSignal: false, isRequired: false, transformFunction: null }, hideTransitionOptions: { classPropertyName: "hideTransitionOptions", publicName: "hideTransitionOptions", isSignal: false, isRequired: false, transformFunction: null }, autofocus: { classPropertyName: "autofocus", publicName: "autofocus", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: false, isRequired: false, transformFunction: null }, optionGroupChildren: { classPropertyName: "optionGroupChildren", publicName: "optionGroupChildren", isSignal: false, isRequired: false, transformFunction: null }, optionGroupLabel: { classPropertyName: "optionGroupLabel", publicName: "optionGroupLabel", isSignal: false, isRequired: false, transformFunction: null }, overlayOptions: { classPropertyName: "overlayOptions", publicName: "overlayOptions", isSignal: false, isRequired: false, transformFunction: null }, suggestions: { classPropertyName: "suggestions", publicName: "suggestions", isSignal: false, isRequired: false, transformFunction: null }, optionLabel: { classPropertyName: "optionLabel", publicName: "optionLabel", isSignal: false, isRequired: false, transformFunction: null }, optionValue: { classPropertyName: "optionValue", publicName: "optionValue", isSignal: false, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: false, isRequired: false, transformFunction: null }, searchMessage: { classPropertyName: "searchMessage", publicName: "searchMessage", isSignal: false, isRequired: false, transformFunction: null }, emptySelectionMessage: { classPropertyName: "emptySelectionMessage", publicName: "emptySelectionMessage", isSignal: false, isRequired: false, transformFunction: null }, selectionMessage: { classPropertyName: "selectionMessage", publicName: "selectionMessage", isSignal: false, isRequired: false, transformFunction: null }, autoOptionFocus: { classPropertyName: "autoOptionFocus", publicName: "autoOptionFocus", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, selectOnFocus: { classPropertyName: "selectOnFocus", publicName: "selectOnFocus", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, searchLocale: { classPropertyName: "searchLocale", publicName: "searchLocale", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, optionDisabled: { classPropertyName: "optionDisabled", publicName: "optionDisabled", isSignal: false, isRequired: false, transformFunction: null }, focusOnHover: { classPropertyName: "focusOnHover", publicName: "focusOnHover", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, typeahead: { classPropertyName: "typeahead", publicName: "typeahead", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, addOnBlur: { classPropertyName: "addOnBlur", publicName: "addOnBlur", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, separator: { classPropertyName: "separator", publicName: "separator", isSignal: false, isRequired: false, transformFunction: null }, appendTo: { classPropertyName: "appendTo", publicName: "appendTo", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { completeMethod: "completeMethod", onSelect: "onSelect", onUnselect: "onUnselect", onAdd: "onAdd", onFocus: "onFocus", onBlur: "onBlur", onDropdownClick: "onDropdownClick", onClear: "onClear", onInputKeydown: "onInputKeydown", onKeyUp: "onKeyUp", onShow: "onShow", onHide: "onHide", onLazyLoad: "onLazyLoad" }, host: { listeners: { "click": "onHostClick($event)" }, properties: { "class": "cn(cx('root'), styleClass)", "style": "sx('root')" } }, providers: [AUTOCOMPLETE_VALUE_ACCESSOR, AutoCompleteStyle], queries: [{ propertyName: "itemTemplate", first: true, predicate: ["item"], descendants: true }, { propertyName: "emptyTemplate", first: true, predicate: ["empty"], descendants: true }, { propertyName: "headerTemplate", first: true, predicate: ["header"], descendants: true }, { propertyName: "footerTemplate", first: true, predicate: ["footer"], descendants: true }, { propertyName: "selectedItemTemplate", first: true, predicate: ["selecteditem"], descendants: true }, { propertyName: "groupTemplate", first: true, predicate: ["group"], descendants: true }, { propertyName: "loaderTemplate", first: true, predicate: ["loader"], descendants: true }, { propertyName: "removeIconTemplate", first: true, predicate: ["removeicon"], descendants: true }, { propertyName: "loadingIconTemplate", first: true, predicate: ["loadingicon"], descendants: true }, { propertyName: "clearIconTemplate", first: true, predicate: ["clearicon"], descendants: true }, { propertyName: "dropdownIconTemplate", first: true, predicate: ["dropdownicon"], descendants: true }, { propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "inputEL", first: true, predicate: ["focusInput"], descendants: true }, { propertyName: "multiInputEl", first: true, predicate: ["multiIn"], descendants: true }, { propertyName: "multiContainerEL", first: true, predicate: ["multiContainer"], descendants: true }, { propertyName: "dropdownButton", first: true, predicate: ["ddBtn"], descendants: true }, { propertyName: "itemsViewChild", first: true, predicate: ["items"], descendants: true }, { propertyName: "scroller", first: true, predicate: ["scroller"], descendants: true }, { propertyName: "overlayViewChild", first: true, predicate: ["overlay"], descendants: true }], usesInheritance: true, ngImport: i0, template: `
         <input
             *ngIf="!multiple"
             #focusInput
@@ -1425,10 +1541,10 @@ class AutoComplete extends BaseInput {
                 [attr.aria-posinset]="i + 1"
                 [attr.aria-selected]="true"
             >
-                <p-chip [class]="cx('pcChip')" [label]="!selectedItemTemplate && !_selectedItemTemplate && getOptionLabel(option)" [removable]="true" (onRemove)="!readonly ? removeOption($event, i) : ''">
+                <p-chip [class]="cx('pcChip')" [label]="!selectedItemTemplate && !_selectedItemTemplate && getOptionLabel(option)" [disabled]="$disabled()" [removable]="true" (onRemove)="!readonly ? removeOption($event, i) : ''">
                     <ng-container *ngTemplateOutlet="selectedItemTemplate || _selectedItemTemplate; context: { $implicit: option }"></ng-container>
                     <ng-template #removeicon>
-                        <span *ngIf="!removeIconTemplate && !_removeIconTemplate" [class]="cx('chipIcon')" (click)="!readonly ? removeOption($event, i) : ''">
+                        <span *ngIf="!removeIconTemplate && !_removeIconTemplate" [class]="cx('chipIcon')" (click)="!readonly && !$disabled() ? removeOption($event, i) : ''">
                             <svg data-p-icon="times-circle" [class]="cx('chipIcon')" [attr.aria-hidden]="true" />
                         </span>
                         <span *ngIf="removeIconTemplate || _removeIconTemplate" [attr.aria-hidden]="true">
@@ -1440,6 +1556,7 @@ class AutoComplete extends BaseInput {
             <li [class]="cx('inputChip')" role="option">
                 <input
                     #focusInput
+                    #multiIn
                     [pAutoFocus]="autofocus"
                     [class]="cx('pcInputText')"
                     [ngStyle]="inputStyle"
@@ -1583,9 +1700,9 @@ class AutoComplete extends BaseInput {
                 </span>
             </ng-template>
         </p-overlay>
-    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: Overlay, selector: "p-overlay", inputs: ["visible", "mode", "style", "styleClass", "contentStyle", "contentStyleClass", "target", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "listener", "responsive", "options", "appendTo", "hostAttrSelector"], outputs: ["visibleChange", "onBeforeShow", "onShow", "onBeforeHide", "onHide", "onAnimationStart", "onAnimationDone"] }, { kind: "directive", type: InputText, selector: "[pInputText]", inputs: ["pSize", "variant", "fluid", "invalid"] }, { kind: "directive", type: Ripple, selector: "[pRipple]" }, { kind: "component", type: Scroller, selector: "p-scroller, p-virtualscroller, p-virtual-scroller, p-virtualScroller", inputs: ["id", "style", "styleClass", "tabindex", "items", "itemSize", "scrollHeight", "scrollWidth", "orientation", "step", "delay", "resizeDelay", "appendOnly", "inline", "lazy", "disabled", "loaderDisabled", "columns", "showSpacer", "showLoader", "numToleratedItems", "loading", "autoSize", "trackBy", "options"], outputs: ["onLazyLoad", "onScroll", "onScrollIndexChange"] }, { kind: "directive", type: AutoFocus, selector: "[pAutoFocus]", inputs: ["pAutoFocus"] }, { kind: "component", type: TimesCircleIcon, selector: "[data-p-icon=\"times-circle\"]" }, { kind: "component", type: SpinnerIcon, selector: "[data-p-icon=\"spinner\"]" }, { kind: "component", type: ChevronDownIcon, selector: "[data-p-icon=\"chevron-down\"]" }, { kind: "component", type: Chip, selector: "p-chip", inputs: ["label", "icon", "image", "alt", "styleClass", "removable", "removeIcon", "chipProps"], outputs: ["onRemove", "onImageError"] }, { kind: "ngmodule", type: SharedModule }, { kind: "component", type: TimesIcon, selector: "[data-p-icon=\"times\"]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: Overlay, selector: "p-overlay", inputs: ["visible", "mode", "style", "styleClass", "contentStyle", "contentStyleClass", "target", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "listener", "responsive", "options", "appendTo", "hostAttrSelector"], outputs: ["visibleChange", "onBeforeShow", "onShow", "onBeforeHide", "onHide", "onAnimationStart", "onAnimationDone"] }, { kind: "directive", type: InputText, selector: "[pInputText]", inputs: ["pSize", "variant", "fluid", "invalid"] }, { kind: "directive", type: Ripple, selector: "[pRipple]" }, { kind: "component", type: Scroller, selector: "p-scroller, p-virtualscroller, p-virtual-scroller, p-virtualScroller", inputs: ["id", "style", "styleClass", "tabindex", "items", "itemSize", "scrollHeight", "scrollWidth", "orientation", "step", "delay", "resizeDelay", "appendOnly", "inline", "lazy", "disabled", "loaderDisabled", "columns", "showSpacer", "showLoader", "numToleratedItems", "loading", "autoSize", "trackBy", "options"], outputs: ["onLazyLoad", "onScroll", "onScrollIndexChange"] }, { kind: "directive", type: AutoFocus, selector: "[pAutoFocus]", inputs: ["pAutoFocus"] }, { kind: "component", type: TimesCircleIcon, selector: "[data-p-icon=\"times-circle\"]" }, { kind: "component", type: SpinnerIcon, selector: "[data-p-icon=\"spinner\"]" }, { kind: "component", type: ChevronDownIcon, selector: "[data-p-icon=\"chevron-down\"]" }, { kind: "component", type: Chip, selector: "p-chip", inputs: ["label", "icon", "image", "alt", "styleClass", "disabled", "removable", "removeIcon", "chipProps"], outputs: ["onRemove", "onImageError"] }, { kind: "ngmodule", type: SharedModule }, { kind: "component", type: TimesIcon, selector: "[data-p-icon=\"times\"]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: AutoComplete, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: AutoComplete, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-autoComplete, p-autocomplete, p-auto-complete',
@@ -1665,10 +1782,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                 [attr.aria-posinset]="i + 1"
                 [attr.aria-selected]="true"
             >
-                <p-chip [class]="cx('pcChip')" [label]="!selectedItemTemplate && !_selectedItemTemplate && getOptionLabel(option)" [removable]="true" (onRemove)="!readonly ? removeOption($event, i) : ''">
+                <p-chip [class]="cx('pcChip')" [label]="!selectedItemTemplate && !_selectedItemTemplate && getOptionLabel(option)" [disabled]="$disabled()" [removable]="true" (onRemove)="!readonly ? removeOption($event, i) : ''">
                     <ng-container *ngTemplateOutlet="selectedItemTemplate || _selectedItemTemplate; context: { $implicit: option }"></ng-container>
                     <ng-template #removeicon>
-                        <span *ngIf="!removeIconTemplate && !_removeIconTemplate" [class]="cx('chipIcon')" (click)="!readonly ? removeOption($event, i) : ''">
+                        <span *ngIf="!removeIconTemplate && !_removeIconTemplate" [class]="cx('chipIcon')" (click)="!readonly && !$disabled() ? removeOption($event, i) : ''">
                             <svg data-p-icon="times-circle" [class]="cx('chipIcon')" [attr.aria-hidden]="true" />
                         </span>
                         <span *ngIf="removeIconTemplate || _removeIconTemplate" [attr.aria-hidden]="true">
@@ -1680,6 +1797,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
             <li [class]="cx('inputChip')" role="option">
                 <input
                     #focusInput
+                    #multiIn
                     [pAutoFocus]="autofocus"
                     [class]="cx('pcInputText')"
                     [ngStyle]="inputStyle"
@@ -1916,6 +2034,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
             }], multiple: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
+            }], addOnTab: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], tabindex: [{
                 type: Input,
                 args: [{ transform: numberAttribute }]
@@ -1969,12 +2090,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
             }], typeahead: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
+            }], addOnBlur: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], separator: [{
+                type: Input
             }], completeMethod: [{
                 type: Output
             }], onSelect: [{
                 type: Output
             }], onUnselect: [{
                 type: Output
+            }], onAdd: [{
+                type: Output
             }], onFocus: [{
                 type: Output
             }], onBlur: [{
@@ -1983,6 +2111,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                 type: Output
             }], onClear: [{
                 type: Output
+            }], onInputKeydown: [{
+                type: Output
             }], onKeyUp: [{
                 type: Output
             }], onShow: [{
@@ -2053,11 +2183,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                 args: [PrimeTemplate]
             }] } });
 class AutoCompleteModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: AutoCompleteModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.0", ngImport: i0, type: AutoCompleteModule, imports: [AutoComplete], exports: [AutoComplete, SharedModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: AutoCompleteModule, imports: [AutoComplete, SharedModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: AutoCompleteModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.2", ngImport: i0, type: AutoCompleteModule, imports: [AutoComplete], exports: [AutoComplete, SharedModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: AutoCompleteModule, imports: [AutoComplete, SharedModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: AutoCompleteModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: AutoCompleteModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [AutoComplete],