primeng 16.5.1 → 16.7.0

package/fesm2022/primeng-autocomplete.mjs

@@ -1,10 +1,10 @@
 import * as i2 from '@angular/common';
 import { DOCUMENT, CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { forwardRef, EventEmitter, Component, ChangeDetectionStrategy, ViewEncapsulation, Inject, Input, Output, ViewChild, ContentChildren, NgModule } from '@angular/core';
+import { forwardRef, EventEmitter, signal, computed, Component, ChangeDetectionStrategy, ViewEncapsulation, Inject, Input, Output, ViewChild, ContentChildren, NgModule } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import * as i1 from 'primeng/api';
-import { TranslationKeys, PrimeTemplate, SharedModule } from 'primeng/api';
+import { PrimeTemplate, SharedModule } from 'primeng/api';
 import * as i7 from 'primeng/autofocus';
 import { AutoFocusModule } from 'primeng/autofocus';
 import * as i4 from 'primeng/button';
@@ -17,7 +17,7 @@ import * as i5 from 'primeng/ripple';
 import { RippleModule } from 'primeng/ripple';
 import * as i6 from 'primeng/scroller';
 import { ScrollerModule } from 'primeng/scroller';
-import { UniqueComponentId, ObjectUtils } from 'primeng/utils';
+import { ObjectUtils, UniqueComponentId } from 'primeng/utils';
 import { TimesCircleIcon } from 'primeng/icons/timescircle';
 import { SpinnerIcon } from 'primeng/icons/spinner';
 import { TimesIcon } from 'primeng/icons/times';
@@ -37,7 +37,6 @@ class AutoComplete {
     el;
     renderer;
     cd;
-    differs;
     config;
     overlayService;
     zone;
@@ -166,24 +165,16 @@ class AutoComplete {
      * @group Props
      */
     type = 'text';
-    /* @deprecated */
-    _autoZIndex;
-    get autoZIndex() {
-        return this._autoZIndex;
-    }
-    set autoZIndex(val) {
-        this._autoZIndex = val;
-        console.warn('The autoZIndex property is deprecated since v14.2.0, use overlayOptions property instead.');
-    }
-    /* @deprecated */
-    _baseZIndex;
-    get baseZIndex() {
-        return this._baseZIndex;
-    }
-    set baseZIndex(val) {
-        this._baseZIndex = val;
-        console.warn('The baseZIndex property is deprecated since v14.2.0, use overlayOptions property instead.');
-    }
+    /**
+     * Whether to automatically manage layering.
+     * @group Props
+     */
+    autoZIndex = true;
+    /**
+     * Base zIndex value to use in layering.
+     * @group Props
+     */
+    baseZIndex = 0;
     /**
      * Defines a string that labels the input for accessibility.
      * @group Props
@@ -227,6 +218,7 @@ class AutoComplete {
     /**
      * Field of a suggested object to resolve and display.
      * @group Props
+     * @deprecated use optionLabel property instead
      */
     field;
     /**
@@ -288,12 +280,12 @@ class AutoComplete {
      * Name of the options field of an option group.
      * @group Props
      */
-    optionGroupChildren;
+    optionGroupChildren = 'items';
     /**
      * Name of the label field of an option group.
      * @group Props
      */
-    optionGroupLabel;
+    optionGroupLabel = 'label';
     /**
      * Options for the overlay element.
      * @group Props
@@ -304,10 +296,10 @@ class AutoComplete {
      * @group Props
      */
     get suggestions() {
-        return this._suggestions;
+        return this._suggestions();
     }
     set suggestions(value) {
-        this._suggestions = value;
+        this._suggestions.set(value);
         this.handleSuggestionsChange();
     }
     /**
@@ -322,6 +314,59 @@ class AutoComplete {
         this._itemSize = val;
         console.warn('The itemSize property is deprecated, use virtualScrollItemSize property instead.');
     }
+    /**
+     * Property name or getter function to use as the label of an option.
+     * @group Props
+     */
+    optionLabel;
+    /**
+     * Unique identifier of the component.
+     * @group Props
+     */
+    id;
+    /**
+     * Text to display when the search is active. Defaults to global value in i18n translation configuration.
+     * @group Props
+     * @defaultValue '{0} results are available'
+     */
+    searchMessage;
+    /**
+     * Text to display when filtering does not return any results. Defaults to global value in i18n translation configuration.
+     * @group Props
+     * @defaultValue 'No selected item'
+     */
+    emptySelectionMessage;
+    /**
+     * Text to be displayed in hidden accessible field when options are selected. Defaults to global value in i18n translation configuration.
+     * @group Props
+     * @defaultValue '{0} items selected'
+     */
+    selectionMessage;
+    /**
+     * Whether to focus on the first visible or selected element when the overlay panel is shown.
+     * @group Props
+     */
+    autoOptionFocus = true;
+    /**
+     * When enabled, the focused option is selected.
+     * @group Props
+     */
+    selectOnFocus;
+    /**
+     * Locale to use in searching. The default locale is the host environment's current locale.
+     * @group Props
+     */
+    searchLocale;
+    /**
+     * Property name or getter function to use as the disabled flag of an option, defaults to false when not defined.
+     * @group Props
+     */
+    optionDisabled;
+    /**
+     * When enabled, the hovered option will be focused.
+     * @group Props
+     */
+    focusOnHover;
     /**
      * Callback to invoke to search for suggestions.
      * @param {AutoCompleteCompleteEvent} event - Custom complete event.
@@ -330,13 +375,13 @@ class AutoComplete {
     completeMethod = new EventEmitter();
     /**
      * Callback to invoke when a suggestion is selected.
-     * @param {*} value - selected value.
+     * @param {AutoCompleteOnSelectEvent} event - custom select event.
      * @group Emits
      */
     onSelect = new EventEmitter();
     /**
      * Callback to invoke when a selected value is removed.
-     * @param {*} value - removed value.
+     * @param {AutoCompleteUnselectEvent} event - custom unselect event.
      * @group Emits
      */
     onUnselect = new EventEmitter();
@@ -411,40 +456,112 @@ class AutoComplete {
     clearIconTemplate;
     dropdownIconTemplate;
     value;
-    _suggestions;
+    _suggestions = signal(null);
     onModelChange = () => { };
     onModelTouched = () => { };
     timeout;
-    overlayVisible = false;
+    overlayVisible;
     suggestionsUpdated;
     highlightOption;
     highlightOptionChanged;
-    focus = false;
+    focused = false;
     filled;
-    inputClick;
-    inputKeyDown;
-    noResults;
-    differ;
-    inputFieldValue = null;
     loading;
     scrollHandler;
-    documentResizeListener;
-    forceSelectionUpdateModelTimeout;
     listId;
-    itemClicked;
-    inputValue = null;
-    isSearching = false;
-    constructor(document, el, renderer, cd, differs, config, overlayService, zone) {
+    searchTimeout;
+    dirty = false;
+    modelValue = signal(null);
+    focusedMultipleOptionIndex = signal(-1);
+    focusedOptionIndex = signal(-1);
+    visibleOptions = computed(() => {
+        return this.group ? this.flatOptions(this._suggestions()) : this._suggestions() || [];
+    });
+    inputValue = computed(() => {
+        const modelValue = this.modelValue();
+        this.filled = ObjectUtils.isNotEmpty(this.modelValue());
+        if (modelValue) {
+            if (typeof modelValue === 'object') {
+                const label = this.getOptionLabel(modelValue);
+                return label != null ? label : modelValue;
+            }
+            else {
+                return modelValue;
+            }
+        }
+        else {
+            return '';
+        }
+    });
+    get focusedMultipleOptionId() {
+        return this.focusedMultipleOptionIndex() !== -1 ? `${this.id}_multiple_option_${this.focusedMultipleOptionIndex()}` : null;
+    }
+    get focusedOptionId() {
+        return this.focusedOptionIndex() !== -1 ? `${this.id}_${this.focusedOptionIndex()}` : null;
+    }
+    get containerClass() {
+        return {
+            'p-autocomplete p-component p-inputwrapper': true,
+            'p-disabled': this.disabled,
+            'p-focus': this.focused,
+            'p-autocomplete-dd': this.dropdown,
+            'p-autocomplete-multiple': this.multiple,
+            'p-inputwrapper-filled': this.modelValue() || ObjectUtils.isNotEmpty(this.inputValue),
+            'p-inputwrapper-focus': this.focused,
+            'p-overlay-open': this.overlayVisible
+        };
+    }
+    get multiContainerClass() {
+        return 'p-autocomplete-multiple-container p-component p-inputtext';
+    }
+    get panelClass() {
+        return {
+            'p-autocomplete-panel p-component': true,
+            'p-input-filled': this.config.inputStyle === 'filled',
+            'p-ripple-disabled': this.config.ripple === false
+        };
+    }
+    get inputClass() {
+        return {
+            'p-autocomplete-input p-inputtext p-component': !this.multiple,
+            'p-autocomplete-dd-input': this.dropdown
+        };
+    }
+    get searchResultMessageText() {
+        return ObjectUtils.isNotEmpty(this.visibleOptions()) && this.overlayVisible ? this.searchMessageText.replaceAll('{0}', this.visibleOptions().length) : this.emptySearchMessageText;
+    }
+    get searchMessageText() {
+        return this.searchMessage || this.config.translation.searchMessage || '';
+    }
+    get emptySearchMessageText() {
+        return this.emptyMessage || this.config.translation.emptySearchMessage || '';
+    }
+    get selectionMessageText() {
+        return this.selectionMessage || this.config.translation.selectionMessage || '';
+    }
+    get emptySelectionMessageText() {
+        return this.emptySelectionMessage || this.config.translation.emptySelectionMessage || '';
+    }
+    get selectedMessageText() {
+        return this.hasSelectedOption() ? this.selectionMessageText.replaceAll('{0}', this.multiple ? this.modelValue().length : '1') : this.emptySelectionMessageText;
+    }
+    get ariaSetSize() {
+        return this.visibleOptions().filter((option) => !this.isOptionGroup(option)).length;
+    }
+    get virtualScrollerDisabled() {
+        return !this.virtualScroll;
+    }
+    constructor(document, el, renderer, cd, config, overlayService, zone) {
         this.document = document;
         this.el = el;
         this.renderer = renderer;
         this.cd = cd;
-        this.differs = differs;
         this.config = config;
         this.overlayService = overlayService;
         this.zone = zone;
-        this.differ = differs.find([]).create(undefined);
-        this.listId = UniqueComponentId() + '_list';
+    }
+    ngOnInit() {
+        this.id = this.id || UniqueComponentId();
     }
     ngAfterViewChecked() {
         //Use timeouts as since Angular 4.2, AfterViewChecked is broken and not called after panel is updated
@@ -458,44 +575,6 @@ class AutoComplete {
                 this.suggestionsUpdated = false;
             });
         }
-        if (this.highlightOptionChanged) {
-            this.zone.runOutsideAngular(() => {
-                setTimeout(() => {
-                    if (this.overlayViewChild && this.itemsWrapper) {
-                        let listItem = DomHandler.findSingle(this.overlayViewChild.overlayViewChild.nativeElement, 'li.p-highlight');
-                        if (listItem) {
-                            DomHandler.scrollInView(this.itemsWrapper, listItem);
-                        }
-                    }
-                }, 1);
-                this.highlightOptionChanged = false;
-            });
-        }
-    }
-    handleSuggestionsChange() {
-        if (this._suggestions != null && this.loading) {
-            this.highlightOption = null;
-            if (this._suggestions.length) {
-                this.noResults = false;
-                this.show();
-                this.suggestionsUpdated = true;
-                if (this.autoHighlight) {
-                    this.highlightOption = this._suggestions[0];
-                }
-            }
-            else {
-                this.noResults = true;
-                if (this.showEmptyMessage) {
-                    this.show();
-                    this.suggestionsUpdated = true;
-                }
-                else {
-                    this.hide();
-                }
-            }
-            this.loading = false;
-            this.isSearching = false;
-        }
     }
     ngAfterContentInit() {
         this.templates.forEach((item) => {
@@ -539,518 +618,664 @@ class AutoComplete {
             }
         });
     }
-    writeValue(value) {
-        this.value = value;
-        this.filled = this.value && this.value.length ? true : false;
-        this.updateInputField();
-        this.cd.markForCheck();
+    handleSuggestionsChange() {
+        if (this.loading) {
+            this._suggestions() ? this.show() : !!this.emptyTemplate ? this.show() : this.hide();
+            const focusedOptionIndex = this.overlayVisible && this.autoOptionFocus ? this.findFirstFocusedOptionIndex() : -1;
+            this.focusedOptionIndex.set(focusedOptionIndex);
+            this.suggestionsUpdated = true;
+            this.loading = false;
+            this.cd.markForCheck();
+        }
     }
-    getOptionGroupChildren(optionGroup) {
-        return this.optionGroupChildren ? ObjectUtils.resolveFieldData(optionGroup, this.optionGroupChildren) : optionGroup.items;
+    flatOptions(options) {
+        return (options || []).reduce((result, option, index) => {
+            result.push({ optionGroup: option, group: true, index });
+            const optionGroupChildren = this.getOptionGroupChildren(option);
+            optionGroupChildren && optionGroupChildren.forEach((o) => result.push(o));
+            return result;
+        }, []);
     }
-    getOptionGroupLabel(optionGroup) {
-        return this.optionGroupLabel ? ObjectUtils.resolveFieldData(optionGroup, this.optionGroupLabel) : optionGroup.label != undefined ? optionGroup.label : optionGroup;
+    isOptionGroup(option) {
+        return this.optionGroupLabel && option.optionGroup && option.group;
     }
-    registerOnChange(fn) {
-        this.onModelChange = fn;
+    findFirstOptionIndex() {
+        return this.visibleOptions().findIndex((option) => this.isValidOption(option));
     }
-    registerOnTouched(fn) {
-        this.onModelTouched = fn;
+    findLastOptionIndex() {
+        return ObjectUtils.findLastIndex(this.visibleOptions(), (option) => this.isValidOption(option));
     }
-    setDisabledState(val) {
-        this.disabled = val;
-        this.cd.markForCheck();
+    findFirstFocusedOptionIndex() {
+        const selectedIndex = this.findSelectedOptionIndex();
+        return selectedIndex < 0 ? this.findFirstOptionIndex() : selectedIndex;
     }
-    onInput(event) {
-        // When an input element with a placeholder is clicked, the onInput event is invoked in IE.
-        if (!this.inputKeyDown && DomHandler.isIE()) {
+    findLastFocusedOptionIndex() {
+        const selectedIndex = this.findSelectedOptionIndex();
+        return selectedIndex < 0 ? this.findLastOptionIndex() : selectedIndex;
+    }
+    findSelectedOptionIndex() {
+        return this.hasSelectedOption() ? this.visibleOptions().findIndex((option) => this.isValidSelectedOption(option)) : -1;
+    }
+    findNextOptionIndex(index) {
+        const matchedOptionIndex = index < this.visibleOptions().length - 1
+            ? this.visibleOptions()
+                .slice(index + 1)
+                .findIndex((option) => this.isValidOption(option))
+            : -1;
+        return matchedOptionIndex > -1 ? matchedOptionIndex + index + 1 : index;
+    }
+    findPrevOptionIndex(index) {
+        const matchedOptionIndex = index > 0 ? ObjectUtils.findLastIndex(this.visibleOptions().slice(0, index), (option) => this.isValidOption(option)) : -1;
+        return matchedOptionIndex > -1 ? matchedOptionIndex : index;
+    }
+    isValidSelectedOption(option) {
+        return this.isValidOption(option) && this.isSelected(option);
+    }
+    isValidOption(option) {
+        return option && !(this.isOptionDisabled(option) || this.isOptionGroup(option));
+    }
+    isOptionDisabled(option) {
+        return this.optionDisabled ? ObjectUtils.resolveFieldData(option, this.optionDisabled) : false;
+    }
+    isSelected(option) {
+        return ObjectUtils.equals(this.modelValue(), this.getOptionValue(option), this.equalityKey());
+    }
+    isOptionMatched(option, value) {
+        return this.isValidOption(option) && this.getOptionLabel(option).toLocaleLowerCase(this.searchLocale) === value.toLocaleLowerCase(this.searchLocale);
+    }
+    isInputClicked(event) {
+        if (this.multiple)
+            return event.target === this.multiContainerEL.nativeElement || this.multiContainerEL.nativeElement.contains(event.target);
+        else
+            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.
+    }
+    onContainerClick(event) {
+        if (this.disabled || this.loading || this.isInputClicked(event) || this.isDropdownClicked(event)) {
             return;
         }
-        if (this.timeout) {
-            clearTimeout(this.timeout);
+        if (!this.overlayViewChild || !this.overlayViewChild.overlayViewChild.nativeElement.contains(event.target)) {
+            DomHandler.focus(this.inputEL.nativeElement);
+        }
+    }
+    handleDropdownClick(event) {
+        let query = undefined;
+        if (this.overlayVisible) {
+            this.hide(true);
         }
-        let value = event.target.value;
-        this.inputValue = value;
-        if (!this.multiple && !this.forceSelection) {
-            this.onModelChange(value);
+        else {
+            DomHandler.focus(this.inputEL.nativeElement);
+            query = this.inputEL.nativeElement.value;
+            if (this.dropdownMode === 'blank')
+                this.search(event, '', 'dropdown');
+            else if (this.dropdownMode === 'current')
+                this.search(event, query, 'dropdown');
         }
-        if (value.length === 0 && !this.multiple) {
-            this.value = null;
-            this.hide();
-            this.onClear.emit(event);
-            this.onModelChange(value);
+        this.onDropdownClick.emit({ originalEvent: event, query });
+    }
+    onInput(event) {
+        if (this.searchTimeout) {
+            clearTimeout(this.searchTimeout);
         }
-        if (value.length >= this.minLength) {
-            this.timeout = setTimeout(() => {
-                this.search(event, value);
-            }, this.delay);
+        let query = event.target.value;
+        if (!this.multiple) {
+            this.updateModel(query);
         }
-        else {
+        if (query.length === 0) {
             this.hide();
+            this.onClear.emit();
         }
-        this.updateFilledState();
-        this.inputKeyDown = false;
-    }
-    onInputClick(event) {
-        this.inputClick = true;
-    }
-    search(event, query) {
-        if (!this.isSearching) {
-            this.isSearching = true;
-            this.loading = true;
-            this.completeMethod.emit({
-                originalEvent: event,
-                query: query
-            });
-            setTimeout(() => {
-                this.isSearching = false;
-            }, 100);
+        else {
+            if (query.length >= this.minLength) {
+                this.focusedOptionIndex.set(-1);
+                this.searchTimeout = setTimeout(() => {
+                    this.search(event, query, 'input');
+                }, this.delay);
+            }
+            else {
+                this.hide();
+            }
         }
     }
-    selectItem(option, focus = true) {
-        if (this.forceSelectionUpdateModelTimeout) {
-            clearTimeout(this.forceSelectionUpdateModelTimeout);
-            this.forceSelectionUpdateModelTimeout = null;
-        }
-        if (this.multiple) {
-            this.multiInputEl.nativeElement.value = '';
-            this.value = this.value || [];
-            if (!this.isSelected(option) || !this.unique) {
-                this.value = [...this.value, option];
-                this.onModelChange(this.value);
+    onInputChange(event) {
+        if (this.forceSelection) {
+            let valid = false;
+            if (this.visibleOptions()) {
+                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.multiple && this.updateModel(null);
             }
         }
-        else {
-            this.inputEL.nativeElement.value = this.resolveFieldData(option);
-            this.value = option;
-            this.onModelChange(this.value);
+    }
+    onInputFocus(event) {
+        if (this.disabled) {
+            // For ScreenReaders
+            return;
         }
-        this.onSelect.emit(option);
-        this.updateFilledState();
-        if (focus) {
-            this.itemClicked = true;
-            this.focusInput();
+        if (!this.dirty && this.completeOnFocus) {
+            this.search(event, event.target.value, 'focus');
         }
-        this.hide();
+        this.dirty = true;
+        this.focused = true;
+        const focusedOptionIndex = this.focusedOptionIndex() !== -1 ? this.focusedOptionIndex() : this.overlayVisible && this.autoOptionFocus ? this.findFirstFocusedOptionIndex() : -1;
+        this.focusedOptionIndex.set(focusedOptionIndex);
+        this.overlayVisible && this.scrollInView(this.focusedOptionIndex());
+        this.onFocus.emit(event);
     }
-    show(event) {
-        if (this.multiInputEl || this.inputEL) {
-            let hasFocus = this.multiple ? this.multiInputEl?.nativeElement.ownerDocument.activeElement == this.multiInputEl?.nativeElement : this.inputEL?.nativeElement.ownerDocument.activeElement == this.inputEL?.nativeElement;
-            if (!this.overlayVisible && hasFocus) {
-                this.overlayVisible = true;
-            }
+    onMultipleContainerFocus(event) {
+        if (this.disabled) {
+            // For ScreenReaders
+            return;
         }
-        this.onShow.emit(event);
-        this.cd.markForCheck();
+        this.focused = true;
     }
-    clear() {
-        this.value = null;
-        this.inputValue = null;
-        if (this.multiple) {
-            this.multiInputEl.nativeElement.value = '';
+    onMultipleContainerBlur(event) {
+        this.focusedMultipleOptionIndex.set(-1);
+        this.focused = false;
+    }
+    onMultipleContainerKeyDown(event) {
+        if (this.disabled) {
+            event.preventDefault();
+            return;
         }
-        else {
-            this.inputValue = null;
-            this.inputEL.nativeElement.value = '';
+        switch (event.code) {
+            case 'ArrowLeft':
+                this.onArrowLeftKeyOnMultiple(event);
+                break;
+            case 'ArrowRight':
+                this.onArrowRightKeyOnMultiple(event);
+                break;
+            case 'Backspace':
+                this.onBackspaceKeyOnMultiple(event);
+                break;
+            default:
+                break;
         }
-        this.updateFilledState();
-        this.onModelChange(this.value);
-        this.onClear.emit();
     }
-    onOverlayAnimationStart(event) {
-        if (event.toState === 'visible') {
-            this.itemsWrapper = DomHandler.findSingle(this.overlayViewChild.overlayViewChild?.nativeElement, this.virtualScroll ? '.p-scroller' : '.p-autocomplete-panel');
-            this.virtualScroll && this.scroller?.setContentEl(this.itemsViewChild?.nativeElement);
-        }
+    onInputBlur(event) {
+        this.dirty = false;
+        this.focused = false;
+        this.focusedOptionIndex.set(-1);
+        this.onModelTouched();
+        this.onBlur.emit(event);
     }
-    resolveFieldData(value) {
-        let data = this.field ? ObjectUtils.resolveFieldData(value, this.field) : value;
-        return data !== (null || undefined) ? data : '';
+    onInputPaste(event) {
+        this.onKeyDown(event);
     }
-    hide(event) {
-        this.overlayVisible = false;
-        this.onHide.emit(event);
-        this.cd.markForCheck();
+    onInputKeyUp(event) {
+        this.onKeyUp.emit(event);
     }
-    handleDropdownClick(event) {
+    onKeyDown(event) {
+        if (this.disabled) {
+            event.preventDefault();
+            return;
+        }
+        switch (event.code) {
+            case 'ArrowDown':
+                this.onArrowDownKey(event);
+                break;
+            case 'ArrowUp':
+                this.onArrowUpKey(event);
+                break;
+            case 'ArrowLeft':
+                this.onArrowLeftKey(event);
+                break;
+            case 'ArrowRight':
+                this.onArrowRightKey(event);
+                break;
+            case 'Home':
+                this.onHomeKey(event);
+                break;
+            case 'End':
+                this.onEndKey(event);
+                break;
+            case 'PageDown':
+                this.onPageDownKey(event);
+                break;
+            case 'PageUp':
+                this.onPageUpKey(event);
+                break;
+            case 'Enter':
+            case 'NumpadEnter':
+                this.onEnterKey(event);
+                break;
+            case 'Escape':
+                this.onEscapeKey(event);
+                break;
+            case 'Tab':
+                this.onTabKey(event);
+                break;
+            case 'Backspace':
+                this.onBackspaceKey(event);
+                break;
+            case 'ShiftLeft':
+            case 'ShiftRight':
+                //NOOP
+                break;
+            default:
+                break;
+        }
+    }
+    onArrowDownKey(event) {
         if (!this.overlayVisible) {
-            this.focusInput();
-            let queryValue = this.multiple ? this.multiInputEl.nativeElement.value : this.inputEL.nativeElement.value;
-            if (this.dropdownMode === 'blank') {
-                this.onDropdownClick.emit({
-                    originalEvent: event,
-                    query: ''
-                });
-                this.search(event, '');
-            }
-            else if (this.dropdownMode === 'current') {
-                this.onDropdownClick.emit({
-                    originalEvent: event,
-                    query: queryValue
-                });
-                this.search(event, queryValue);
+            return;
+        }
+        const optionIndex = this.focusedOptionIndex() !== -1 ? this.findNextOptionIndex(this.focusedOptionIndex()) : this.findFirstFocusedOptionIndex();
+        this.changeFocusedOptionIndex(event, optionIndex);
+        event.preventDefault();
+    }
+    onArrowUpKey(event) {
+        if (!this.overlayVisible) {
+            return;
+        }
+        if (event.altKey) {
+            if (this.focusedOptionIndex() !== -1) {
+                this.onOptionSelect(event, this.visibleOptions()[this.focusedOptionIndex()]);
             }
+            this.overlayVisible && this.hide();
+            event.preventDefault();
         }
         else {
-            this.hide(event);
+            const optionIndex = this.focusedOptionIndex() !== -1 ? this.findPrevOptionIndex(this.focusedOptionIndex()) : this.findLastFocusedOptionIndex();
+            this.changeFocusedOptionIndex(event, optionIndex);
+            event.preventDefault();
         }
     }
-    focusInput() {
-        if (this.multiple)
-            this.multiInputEl.nativeElement.focus();
-        else
-            this.inputEL?.nativeElement.focus();
+    onArrowLeftKey(event) {
+        const target = event.currentTarget;
+        this.focusedOptionIndex.set(-1);
+        if (this.multiple) {
+            if (ObjectUtils.isEmpty(target.value) && this.hasSelectedOption()) {
+                DomHandler.focus(this.multiContainerEL.nativeElement);
+                this.focusedMultipleOptionIndex.set(this.modelValue().length);
+            }
+            else {
+                event.stopPropagation(); // To prevent onArrowLeftKeyOnMultiple method
+            }
+        }
     }
-    get emptyMessageLabel() {
-        return this.emptyMessage || this.config.getTranslation(TranslationKeys.EMPTY_MESSAGE);
+    onArrowRightKey(event) {
+        this.focusedOptionIndex.set(-1);
+        this.multiple && event.stopPropagation(); // To prevent onArrowRightKeyOnMultiple method
     }
-    removeItem(item) {
-        let itemIndex = DomHandler.index(item);
-        let removedValue = this.value[itemIndex];
-        this.value = this.value.filter((val, i) => i != itemIndex);
-        this.onModelChange(this.value);
-        this.updateFilledState();
-        this.onUnselect.emit(removedValue);
+    onHomeKey(event) {
+        const { currentTarget } = event;
+        const len = currentTarget.value.length;
+        currentTarget.setSelectionRange(0, event.shiftKey ? len : 0);
+        this.focusedOptionIndex.set(-1);
+        event.preventDefault();
     }
-    onKeydown(event) {
-        if (this.overlayVisible) {
-            switch (event.which) {
-                //down
-                case 40:
-                    if (this.group) {
-                        let highlightItemIndex = this.findOptionGroupIndex(this.highlightOption, this.suggestions);
-                        if (highlightItemIndex !== -1) {
-                            let nextItemIndex = highlightItemIndex.itemIndex + 1;
-                            if (nextItemIndex < this.getOptionGroupChildren(this.suggestions[highlightItemIndex.groupIndex]).length) {
-                                this.highlightOption = this.getOptionGroupChildren(this.suggestions[highlightItemIndex.groupIndex])[nextItemIndex];
-                                this.highlightOptionChanged = true;
-                            }
-                            else if (this.suggestions[highlightItemIndex.groupIndex + 1]) {
-                                this.highlightOption = this.getOptionGroupChildren(this.suggestions[highlightItemIndex.groupIndex + 1])[0];
-                                this.highlightOptionChanged = true;
-                            }
-                        }
-                        else {
-                            this.highlightOption = this.getOptionGroupChildren(this.suggestions[0])[0];
-                        }
-                    }
-                    else {
-                        let highlightItemIndex = this.findOptionIndex(this.highlightOption, this.suggestions);
-                        if (highlightItemIndex != -1) {
-                            var nextItemIndex = highlightItemIndex + 1;
-                            if (nextItemIndex != this.suggestions.length) {
-                                this.highlightOption = this.suggestions[nextItemIndex];
-                                this.highlightOptionChanged = true;
-                            }
-                        }
-                        else {
-                            this.highlightOption = this.suggestions[0];
-                        }
-                    }
-                    event.preventDefault();
-                    break;
-                //up
-                case 38:
-                    if (this.group) {
-                        let highlightItemIndex = this.findOptionGroupIndex(this.highlightOption, this.suggestions);
-                        if (highlightItemIndex !== -1) {
-                            let prevItemIndex = highlightItemIndex.itemIndex - 1;
-                            if (prevItemIndex >= 0) {
-                                this.highlightOption = this.getOptionGroupChildren(this.suggestions[highlightItemIndex.groupIndex])[prevItemIndex];
-                                this.highlightOptionChanged = true;
-                            }
-                            else if (prevItemIndex < 0) {
-                                let prevGroup = this.suggestions[highlightItemIndex.groupIndex - 1];
-                                if (prevGroup) {
-                                    this.highlightOption = this.getOptionGroupChildren(prevGroup)[this.getOptionGroupChildren(prevGroup).length - 1];
-                                    this.highlightOptionChanged = true;
-                                }
-                            }
-                        }
-                    }
-                    else {
-                        let highlightItemIndex = this.findOptionIndex(this.highlightOption, this.suggestions);
-                        if (highlightItemIndex > 0) {
-                            let prevItemIndex = highlightItemIndex - 1;
-                            this.highlightOption = this.suggestions[prevItemIndex];
-                            this.highlightOptionChanged = true;
-                        }
-                    }
-                    event.preventDefault();
-                    break;
-                //enter
-                case 13:
-                    if (this.highlightOption) {
-                        this.selectItem(this.highlightOption);
-                        this.hide();
-                    }
-                    event.preventDefault();
-                    break;
-                //escape
-                case 27:
-                    this.hide();
-                    event.preventDefault();
-                    break;
-                //tab
-                case 9:
-                    if (this.highlightOption) {
-                        this.selectItem(this.highlightOption);
-                    }
-                    this.hide();
-                    break;
-            }
+    onEndKey(event) {
+        const { currentTarget } = event;
+        const len = currentTarget.value.length;
+        currentTarget.setSelectionRange(event.shiftKey ? 0 : len, len);
+        this.focusedOptionIndex.set(-1);
+        event.preventDefault();
+    }
+    onPageDownKey(event) {
+        this.scrollInView(this.visibleOptions().length - 1);
+        event.preventDefault();
+    }
+    onPageUpKey(event) {
+        this.scrollInView(0);
+        event.preventDefault();
+    }
+    onEnterKey(event) {
+        if (!this.overlayVisible) {
+            this.onArrowDownKey(event);
         }
         else {
-            if (event.which === 40 && this.suggestions) {
-                this.search(event, event.target.value);
-            }
-            else if (event.ctrlKey && event.key === 'z' && !this.multiple) {
-                this.inputEL.nativeElement.value = this.resolveFieldData(null);
-                this.value = '';
-                this.onModelChange(this.value);
+            if (this.focusedOptionIndex() !== -1) {
+                this.onOptionSelect(event, this.visibleOptions()[this.focusedOptionIndex()]);
             }
-            else if (event.ctrlKey && event.key === 'z' && this.multiple) {
-                this.value.pop();
-                this.onModelChange(this.value);
-                this.updateFilledState();
+            this.hide();
+        }
+        event.preventDefault();
+    }
+    onEscapeKey(event) {
+        this.overlayVisible && this.hide(true);
+        event.preventDefault();
+    }
+    onTabKey(event) {
+        if (this.focusedOptionIndex() !== -1) {
+            this.onOptionSelect(event, this.visibleOptions()[this.focusedOptionIndex()]);
+        }
+        this.overlayVisible && this.hide();
+    }
+    onBackspaceKey(event) {
+        if (this.multiple) {
+            if (ObjectUtils.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);
+                this.onUnselect.emit({ originalEvent: event, value: removedValue });
             }
+            event.stopPropagation(); // To prevent onBackspaceKeyOnMultiple method
+        }
+    }
+    onArrowLeftKeyOnMultiple(event) {
+        const optionIndex = this.focusedMultipleOptionIndex() < 1 ? 0 : this.focusedMultipleOptionIndex() - 1;
+        this.focusedMultipleOptionIndex.set(optionIndex);
+    }
+    onArrowRightKeyOnMultiple(event) {
+        let optionIndex = this.focusedMultipleOptionIndex();
+        optionIndex++;
+        this.focusedMultipleOptionIndex.set(optionIndex);
+        if (optionIndex > this.modelValue().length - 1) {
+            this.focusedMultipleOptionIndex.set(-1);
+            DomHandler.focus(this.inputEL.nativeElement);
+        }
+    }
+    onBackspaceKeyOnMultiple(event) {
+        if (this.focusedMultipleOptionIndex() !== -1) {
+            this.removeOption(event, this.focusedMultipleOptionIndex());
         }
+    }
+    onOptionSelect(event, option, isHide = true) {
+        const value = this.getOptionValue(option);
         if (this.multiple) {
-            switch (event.which) {
-                //backspace
-                case 8:
-                    if (this.value && this.value.length && !this.multiInputEl?.nativeElement.value) {
-                        this.value = [...this.value];
-                        const removedValue = this.value.pop();
-                        this.onModelChange(this.value);
-                        this.updateFilledState();
-                        this.onUnselect.emit(removedValue);
-                    }
-                    break;
+            this.inputEL.nativeElement.value = '';
+            if (!this.isSelected(option)) {
+                this.updateModel([...(this.modelValue() || []), value]);
             }
         }
-        this.inputKeyDown = true;
+        else {
+            this.updateModel(value);
+        }
+        this.onSelect.emit({ originalEvent: event, value: option });
+        isHide && this.hide(true);
     }
-    onKeyup(event) {
-        this.onKeyUp.emit(event);
+    onOptionMouseEnter(event, index) {
+        if (this.focusOnHover) {
+            this.changeFocusedOptionIndex(event, index);
+        }
     }
-    onInputFocus(event) {
-        if (!this.itemClicked && this.completeOnFocus) {
-            let queryValue = this.multiple ? this.multiInputEl?.nativeElement.value : this.inputEL?.nativeElement.value;
-            this.search(event, queryValue);
+    search(event, query, source) {
+        //allow empty string but not undefined or null
+        if (query === undefined || query === null) {
+            return;
         }
-        this.focus = true;
-        this.onFocus.emit(event);
-        this.itemClicked = false;
+        //do not search blank values on input change
+        if (source === 'input' && query.trim().length === 0) {
+            return;
+        }
+        this.loading = true;
+        this.completeMethod.emit({ originalEvent: event, query });
     }
-    onInputBlur(event) {
-        this.focus = false;
-        this.onModelTouched();
-        this.onBlur.emit(event);
+    removeOption(event, index) {
+        const removedOption = this.modelValue()[index];
+        const value = this.modelValue()
+            .filter((_, i) => i !== index)
+            .map((option) => this.getOptionValue(option));
+        this.updateModel(value);
+        this.onUnselect.emit({ originalEvent: event, value: removedOption });
+        DomHandler.focus(this.inputEL.nativeElement);
     }
-    onInputChange(event) {
-        if (this.forceSelection) {
-            let valid = false;
-            const target = event.target;
-            let inputValue = target.value.trim();
-            if (this.suggestions) {
-                let suggestions = [...this.suggestions];
-                if (this.group) {
-                    let groupedSuggestions = this.suggestions.filter((s) => s[this.optionGroupChildren]).flatMap((s) => s[this.optionGroupChildren]);
-                    suggestions = suggestions.concat(groupedSuggestions);
-                }
-                for (let suggestion of suggestions) {
-                    let itemValue = this.field ? ObjectUtils.resolveFieldData(suggestion, this.field) : suggestion;
-                    if (itemValue && inputValue.toLowerCase() === itemValue.toLowerCase().trim()) {
-                        valid = true;
-                        this.forceSelectionUpdateModelTimeout = setTimeout(() => {
-                            this.selectItem(suggestion, false);
-                        }, 250);
-                        break;
-                    }
-                }
+    updateModel(value) {
+        this.value = value;
+        this.modelValue.set(value);
+        this.onModelChange(value);
+        this.updateInputValue();
+        this.cd.markForCheck();
+    }
+    updateInputValue() {
+        if (this.value && this.inputEL && this.inputEL.nativeElement) {
+            if (!this.multiple) {
+                this.inputEL.nativeElement.value = this.inputValue();
             }
-            if (!valid) {
-                if (this.multiple) {
-                    this.multiInputEl.nativeElement.value = '';
-                }
-                else {
-                    this.value = null;
-                    this.inputEL.nativeElement.value = '';
-                }
-                this.onClear.emit(event);
-                this.onModelChange(this.value);
-                this.updateFilledState();
+            else {
+                this.inputEL.nativeElement.value = '';
             }
         }
     }
-    onInputPaste(event) {
-        this.onKeydown(event);
-    }
-    isSelected(val) {
-        let selected = false;
-        if (this.value && this.value.length) {
-            for (let i = 0; i < this.value.length; i++) {
-                if (ObjectUtils.equals(this.value[i], val, this.dataKey)) {
-                    selected = true;
-                    break;
-                }
-            }
+    autoUpdateModel() {
+        if ((this.selectOnFocus || this.autoHighlight) && this.autoOptionFocus && !this.hasSelectedOption()) {
+            const focusedOptionIndex = this.findFirstFocusedOptionIndex();
+            this.focusedOptionIndex.set(focusedOptionIndex);
+            this.onOptionSelect(null, this.visibleOptions()[this.focusedOptionIndex()], false);
         }
-        return selected;
-    }
-    findOptionIndex(option, suggestions) {
-        let index = -1;
-        if (suggestions) {
-            for (let i = 0; i < suggestions.length; i++) {
-                if (ObjectUtils.equals(option, suggestions[i])) {
-                    index = i;
-                    break;
-                }
+    }
+    scrollInView(index = -1) {
+        const id = index !== -1 ? `${this.id}_${index}` : this.focusedOptionId;
+        if (this.itemsViewChild && this.itemsViewChild.nativeElement) {
+            const element = DomHandler.findSingle(this.itemsViewChild.nativeElement, `li[id="${id}"]`);
+            if (element) {
+                element.scrollIntoView && element.scrollIntoView({ block: 'nearest', inline: 'nearest' });
             }
-        }
-        return index;
-    }
-    findOptionGroupIndex(val, opts) {
-        let groupIndex, itemIndex;
-        if (opts) {
-            for (let i = 0; i < opts.length; i++) {
-                groupIndex = i;
-                itemIndex = this.findOptionIndex(val, this.getOptionGroupChildren(opts[i]));
-                if (itemIndex !== -1) {
-                    break;
-                }
+            else if (!this.virtualScrollerDisabled) {
+                setTimeout(() => {
+                    this.virtualScroll && this.scroller?.scrollToIndex(index !== -1 ? index : this.focusedOptionIndex());
+                }, 0);
             }
         }
-        if (itemIndex !== -1) {
-            return { groupIndex: groupIndex, itemIndex: itemIndex };
+    }
+    changeFocusedOptionIndex(event, index) {
+        if (this.focusedOptionIndex() !== index) {
+            this.focusedOptionIndex.set(index);
+            this.scrollInView();
+            if (this.selectOnFocus || this.autoHighlight) {
+                this.onOptionSelect(event, this.visibleOptions()[index], false);
+            }
         }
-        else {
-            return -1;
+    }
+    show(isFocus = false) {
+        this.dirty = true;
+        this.overlayVisible = true;
+        const focusedOptionIndex = this.focusedOptionIndex() !== -1 ? this.focusedOptionIndex() : this.autoOptionFocus ? this.findFirstFocusedOptionIndex() : -1;
+        this.focusedOptionIndex.set(focusedOptionIndex);
+        isFocus && DomHandler.focus(this.inputEL.nativeElement);
+        if (isFocus) {
+            DomHandler.focus(this.inputEL.nativeElement);
         }
+        this.onShow.emit();
+        this.cd.markForCheck();
     }
-    updateFilledState() {
-        if (this.multiple)
-            this.filled = (this.value && this.value.length) || (this.multiInputEl && this.multiInputEl.nativeElement && this.multiInputEl.nativeElement.value != '');
-        else
-            this.filled = (this.inputFieldValue && this.inputFieldValue != '') || (this.inputEL && this.inputEL.nativeElement && this.inputEL.nativeElement.value != '');
+    hide(isFocus = false) {
+        const _hide = () => {
+            this.dirty = isFocus;
+            this.overlayVisible = false;
+            this.focusedOptionIndex.set(-1);
+            isFocus && DomHandler.focus(this.inputEL.nativeElement);
+            this.onHide.emit();
+            this.cd.markForCheck();
+        };
+        setTimeout(() => {
+            _hide();
+        }, 0); // For ScreenReaders
     }
-    updateInputField() {
-        let formattedValue = this.resolveFieldData(this.value);
-        this.inputFieldValue = formattedValue;
-        if (this.inputEL && this.inputEL.nativeElement) {
-            this.inputEL.nativeElement.value = formattedValue;
+    clear() {
+        this.updateModel(null);
+        this.inputEL.nativeElement.value = '';
+        this.onClear.emit();
+    }
+    writeValue(value) {
+        this.value = value;
+        this.filled = this.value && this.value.length ? true : false;
+        this.updateModel(value);
+        this.cd.markForCheck();
+    }
+    hasSelectedOption() {
+        return ObjectUtils.isNotEmpty(this.modelValue());
+    }
+    getAriaPosInset(index) {
+        return ((this.optionGroupLabel
+            ? index -
+                this.visibleOptions()
+                    .slice(0, index)
+                    .filter((option) => this.isOptionGroup(option)).length
+            : index) + 1);
+    }
+    getOptionLabel(option) {
+        return this.field || this.optionLabel ? ObjectUtils.resolveFieldData(option, this.field || this.optionLabel) : option && option.label != undefined ? option.label : option;
+    }
+    getOptionValue(option) {
+        return option; // TODO: The 'optionValue' properties can be added.
+    }
+    getOptionIndex(index, scrollerOptions) {
+        return this.virtualScrollerDisabled ? index : scrollerOptions && scrollerOptions.getItemOptions(index)['index'];
+    }
+    getOptionGroupLabel(optionGroup) {
+        return this.optionGroupLabel ? ObjectUtils.resolveFieldData(optionGroup, this.optionGroupLabel) : optionGroup && optionGroup.label != undefined ? optionGroup.label : optionGroup;
+    }
+    getOptionGroupChildren(optionGroup) {
+        return this.optionGroupChildren ? ObjectUtils.resolveFieldData(optionGroup, this.optionGroupChildren) : optionGroup.items;
+    }
+    registerOnChange(fn) {
+        this.onModelChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onModelTouched = fn;
+    }
+    setDisabledState(val) {
+        this.disabled = val;
+        this.cd.markForCheck();
+    }
+    onOverlayAnimationStart(event) {
+        if (event.toState === 'visible') {
+            this.itemsWrapper = DomHandler.findSingle(this.overlayViewChild.overlayViewChild?.nativeElement, this.virtualScroll ? '.p-scroller' : '.p-autocomplete-panel');
+            this.virtualScroll && this.scroller?.setContentEl(this.itemsViewChild?.nativeElement);
         }
-        this.updateFilledState();
     }
     ngOnDestroy() {
-        if (this.forceSelectionUpdateModelTimeout) {
-            clearTimeout(this.forceSelectionUpdateModelTimeout);
-            this.forceSelectionUpdateModelTimeout = null;
-        }
         if (this.scrollHandler) {
             this.scrollHandler.destroy();
             this.scrollHandler = null;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: AutoComplete, deps: [{ token: DOCUMENT }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i0.IterableDiffers }, { token: i1.PrimeNGConfig }, { token: i1.OverlayService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.2", type: AutoComplete, selector: "p-autoComplete", inputs: { minLength: "minLength", delay: "delay", style: "style", panelStyle: "panelStyle", styleClass: "styleClass", panelStyleClass: "panelStyleClass", inputStyle: "inputStyle", inputId: "inputId", inputStyleClass: "inputStyleClass", placeholder: "placeholder", readonly: "readonly", disabled: "disabled", scrollHeight: "scrollHeight", lazy: "lazy", virtualScroll: "virtualScroll", virtualScrollItemSize: "virtualScrollItemSize", virtualScrollOptions: "virtualScrollOptions", maxlength: "maxlength", name: "name", required: "required", size: "size", appendTo: "appendTo", autoHighlight: "autoHighlight", forceSelection: "forceSelection", type: "type", autoZIndex: "autoZIndex", baseZIndex: "baseZIndex", ariaLabel: "ariaLabel", dropdownAriaLabel: "dropdownAriaLabel", ariaLabelledBy: "ariaLabelledBy", dropdownIcon: "dropdownIcon", unique: "unique", group: "group", completeOnFocus: "completeOnFocus", showClear: "showClear", field: "field", dropdown: "dropdown", showEmptyMessage: "showEmptyMessage", dropdownMode: "dropdownMode", multiple: "multiple", tabindex: "tabindex", dataKey: "dataKey", emptyMessage: "emptyMessage", showTransitionOptions: "showTransitionOptions", hideTransitionOptions: "hideTransitionOptions", autofocus: "autofocus", autocomplete: "autocomplete", optionGroupChildren: "optionGroupChildren", optionGroupLabel: "optionGroupLabel", overlayOptions: "overlayOptions", suggestions: "suggestions", itemSize: "itemSize" }, outputs: { completeMethod: "completeMethod", onSelect: "onSelect", onUnselect: "onUnselect", onFocus: "onFocus", onBlur: "onBlur", onDropdownClick: "onDropdownClick", onClear: "onClear", onKeyUp: "onKeyUp", onShow: "onShow", onHide: "onHide", onLazyLoad: "onLazyLoad" }, host: { properties: { "class.p-inputwrapper-filled": "filled", "class.p-inputwrapper-focus": "((focus && !disabled) || autofocus) || overlayVisible", "class.p-autocomplete-clearable": "showClear && !disabled" }, classAttribute: "p-element p-inputwrapper" }, providers: [AUTOCOMPLETE_VALUE_ACCESSOR], queries: [{ propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "containerEL", first: true, predicate: ["container"], descendants: true }, { propertyName: "inputEL", first: true, predicate: ["in"], 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 }], ngImport: i0, template: `
-        <span #container [ngClass]="{ 'p-autocomplete p-component': true, 'p-autocomplete-dd': dropdown, 'p-autocomplete-multiple': multiple }" [ngStyle]="style" [class]="styleClass">
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: AutoComplete, deps: [{ token: DOCUMENT }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i1.PrimeNGConfig }, { token: i1.OverlayService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.2", type: AutoComplete, selector: "p-autoComplete", inputs: { minLength: "minLength", delay: "delay", style: "style", panelStyle: "panelStyle", styleClass: "styleClass", panelStyleClass: "panelStyleClass", inputStyle: "inputStyle", inputId: "inputId", inputStyleClass: "inputStyleClass", placeholder: "placeholder", readonly: "readonly", disabled: "disabled", scrollHeight: "scrollHeight", lazy: "lazy", virtualScroll: "virtualScroll", virtualScrollItemSize: "virtualScrollItemSize", virtualScrollOptions: "virtualScrollOptions", maxlength: "maxlength", name: "name", required: "required", size: "size", appendTo: "appendTo", autoHighlight: "autoHighlight", forceSelection: "forceSelection", type: "type", autoZIndex: "autoZIndex", baseZIndex: "baseZIndex", ariaLabel: "ariaLabel", dropdownAriaLabel: "dropdownAriaLabel", ariaLabelledBy: "ariaLabelledBy", dropdownIcon: "dropdownIcon", unique: "unique", group: "group", completeOnFocus: "completeOnFocus", showClear: "showClear", field: "field", dropdown: "dropdown", showEmptyMessage: "showEmptyMessage", dropdownMode: "dropdownMode", multiple: "multiple", tabindex: "tabindex", dataKey: "dataKey", emptyMessage: "emptyMessage", showTransitionOptions: "showTransitionOptions", hideTransitionOptions: "hideTransitionOptions", autofocus: "autofocus", autocomplete: "autocomplete", optionGroupChildren: "optionGroupChildren", optionGroupLabel: "optionGroupLabel", overlayOptions: "overlayOptions", suggestions: "suggestions", itemSize: "itemSize", optionLabel: "optionLabel", id: "id", searchMessage: "searchMessage", emptySelectionMessage: "emptySelectionMessage", selectionMessage: "selectionMessage", autoOptionFocus: "autoOptionFocus", selectOnFocus: "selectOnFocus", searchLocale: "searchLocale", optionDisabled: "optionDisabled", focusOnHover: "focusOnHover" }, outputs: { completeMethod: "completeMethod", onSelect: "onSelect", onUnselect: "onUnselect", onFocus: "onFocus", onBlur: "onBlur", onDropdownClick: "onDropdownClick", onClear: "onClear", onKeyUp: "onKeyUp", onShow: "onShow", onHide: "onHide", onLazyLoad: "onLazyLoad" }, host: { properties: { "class.p-inputwrapper-filled": "filled", "class.p-inputwrapper-focus": "((focused && !disabled) || autofocus) || overlayVisible", "class.p-autocomplete-clearable": "showClear && !disabled" }, classAttribute: "p-element p-inputwrapper" }, providers: [AUTOCOMPLETE_VALUE_ACCESSOR], queries: [{ propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "containerEL", first: true, predicate: ["container"], descendants: true }, { 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 }], ngImport: i0, template: `
+        <div #container [ngClass]="containerClass" [ngStyle]="style" [class]="styleClass" (click)="onContainerClick($event)">
             <input
+                *ngIf="!multiple"
+                #focusInput
                 pAutoFocus
                 [autofocus]="autofocus"
-                *ngIf="!multiple"
-                #in
-                [attr.type]="type"
-                [attr.id]="inputId"
+                [ngClass]="inputClass"
                 [ngStyle]="inputStyle"
                 [class]="inputStyleClass"
+                [type]="type"
+                [attr.value]="inputValue()"
+                [attr.id]="inputId"
                 [autocomplete]="autocomplete"
-                [attr.required]="required"
-                [attr.name]="name"
-                class="p-autocomplete-input p-inputtext p-component"
-                [ngClass]="{ 'p-autocomplete-dd-input': dropdown, 'p-disabled': disabled }"
-                [value]="inputFieldValue"
+                [required]="required"
+                [name]="name"
                 aria-autocomplete="list"
-                role="searchbox"
-                (click)="onInputClick($event)"
-                (input)="onInput($event)"
-                (keydown)="onKeydown($event)"
-                (keyup)="onKeyup($event)"
-                (focus)="onInputFocus($event)"
-                (blur)="onInputBlur($event)"
-                (change)="onInputChange($event)"
-                (paste)="onInputPaste($event)"
+                role="combobox"
                 [attr.placeholder]="placeholder"
                 [attr.size]="size"
-                [attr.maxlength]="maxlength"
-                [attr.tabindex]="tabindex"
+                [maxlength]="maxlength"
+                [tabindex]="!disabled ? tabindex : -1"
                 [readonly]="readonly"
                 [disabled]="disabled"
                 [attr.aria-label]="ariaLabel"
                 [attr.aria-labelledby]="ariaLabelledBy"
                 [attr.aria-required]="required"
+                [attr.aria-expanded]="overlayVisible"
+                [attr.aria-controls]="id + '_list'"
+                [attr.aria-aria-activedescendant]="focused ? focusedOptionId : undefined"
+                (input)="onInput($event)"
+                (keydown)="onKeyDown($event)"
+                (change)="onInputChange($event)"
+                (focus)="onInputFocus($event)"
+                (blur)="onInputBlur($event)"
+                (paste)="onInputPaste($event)"
+                (keyup)="onInputKeyUp($event)"
             />
             <ng-container *ngIf="filled && !disabled && showClear && !loading">
-                <TimesIcon *ngIf="!clearIconTemplate" [styleClass]="'p-autocomplete-clear-icon'" (click)="clear()" />
-                <span *ngIf="clearIconTemplate" class="p-autocomplete-clear-icon" (click)="clear()">
+                <TimesIcon *ngIf="!clearIconTemplate" [styleClass]="'p-autocomplete-clear-icon'" (click)="clear()" [attr.aria-hidden]="true" />
+                <span *ngIf="clearIconTemplate" class="p-autocomplete-clear-icon" (click)="clear()" [attr.aria-hidden]="true">
                     <ng-template *ngTemplateOutlet="clearIconTemplate"></ng-template>
                 </span>
             </ng-container>
-            <ul *ngIf="multiple" #multiContainer class="p-autocomplete-multiple-container p-component p-inputtext" [ngClass]="{ 'p-disabled': disabled, 'p-focus': focus }" (click)="multiIn.focus()">
-                <li #token *ngFor="let val of value" class="p-autocomplete-token">
-                    <ng-container *ngTemplateOutlet="selectedItemTemplate; context: { $implicit: val }"></ng-container>
-                    <span *ngIf="!selectedItemTemplate" class="p-autocomplete-token-label">{{ resolveFieldData(val) }}</span>
-                    <span class="p-autocomplete-token-icon" (click)="removeItem(token)">
-                        <TimesCircleIcon [styleClass]="'p-autocomplete-token-icon'" *ngIf="!removeIconTemplate" />
-                        <span *ngIf="removeIconTemplate" class="p-autocomplete-token-icon">
+
+            <ul
+                *ngIf="multiple"
+                #multiContainer
+                [class]="multiContainerClass"
+                [tabindex]="-1"
+                role="listbox"
+                [attr.aria-orientation]="'horizontal'"
+                [attr.aria-activedescendant]="focused ? focusedMultipleOptionId : undefined"
+                (focus)="onMultipleContainerFocus($event)"
+                (blur)="onMultipleContainerBlur($event)"
+                (keydown)="onMultipleContainerKeyDown($event)"
+            >
+                <li
+                    #token
+                    *ngFor="let option of modelValue(); let i = index"
+                    [ngClass]="{ 'p-autocomplete-token': true, 'p-focus': focusedMultipleOptionIndex() === i }"
+                    [attr.id]="id + '_multiple_option_' + i"
+                    role="option"
+                    [attr.aria-label]="getOptionLabel(option)"
+                    [attr.aria-setsize]="modelValue().length"
+                    [attr.aria-posinset]="i + 1"
+                    [attr.aria-selected]="true"
+                >
+                    <ng-container *ngTemplateOutlet="selectedItemTemplate; context: { $implicit: option }"></ng-container>
+                    <span *ngIf="!selectedItemTemplate" class="p-autocomplete-token-label">{{ getOptionLabel(option) }}</span>
+                    <span class="p-autocomplete-token-icon" (click)="removeOption($event, i)">
+                        <TimesCircleIcon [styleClass]="'p-autocomplete-token-icon'" *ngIf="!removeIconTemplate" [attr.aria-hidden]="true" />
+                        <span *ngIf="removeIconTemplate" class="p-autocomplete-token-icon" [attr.aria-hidden]="true">
                             <ng-template *ngTemplateOutlet="removeIconTemplate"></ng-template>
                         </span>
                     </span>
                 </li>
-                <li class="p-autocomplete-input-token">
+                <li class="p-autocomplete-input-token" role="option">
                     <input
+                        #focusInput
                         pAutoFocus
                         [autofocus]="autofocus"
-                        #multiIn
+                        [ngClass]="inputClass"
+                        [ngStyle]="inputStyle"
+                        [class]="inputStyleClass"
                         [attr.type]="type"
                         [attr.id]="inputId"
-                        [disabled]="disabled"
-                        [attr.placeholder]="value && value.length ? null : placeholder"
-                        [attr.tabindex]="tabindex"
-                        [attr.maxlength]="maxlength"
-                        (input)="onInput($event)"
-                        (click)="onInputClick($event)"
-                        (keydown)="onKeydown($event)"
-                        [readonly]="readonly"
-                        (keyup)="onKeyup($event)"
-                        (focus)="onInputFocus($event)"
-                        (blur)="onInputBlur($event)"
-                        (change)="onInputChange($event)"
-                        (paste)="onInputPaste($event)"
                         [autocomplete]="autocomplete"
-                        [ngStyle]="inputStyle"
-                        [class]="inputStyleClass"
+                        [required]="required"
+                        [attr.name]="name"
+                        role="combobox"
+                        [attr.placeholder]="placeholder"
+                        [attr.size]="size"
+                        aria-autocomplete="list"
+                        [maxlength]="maxlength"
+                        [tabindex]="!disabled ? tabindex : -1"
+                        [readonly]="readonly"
+                        [disabled]="disabled"
                         [attr.aria-label]="ariaLabel"
                         [attr.aria-labelledby]="ariaLabelledBy"
                         [attr.aria-required]="required"
-                        aria-autocomplete="list"
-                        [attr.aria-controls]="listId"
-                        role="searchbox"
                         [attr.aria-expanded]="overlayVisible"
-                        aria-haspopup="true"
-                        [attr.aria-activedescendant]="'p-highlighted-option'"
+                        [attr.aria-controls]="id + '_list'"
+                        [attr.aria-aria-activedescendant]="focused ? focusedOptionId : undefined"
+                        (input)="onInput($event)"
+                        (keydown)="onKeyDown($event)"
+                        (change)="onInputChange($event)"
+                        (focus)="onInputFocus($event)"
+                        (blur)="onInputBlur($event)"
+                        (paste)="onInputPaste($event)"
+                        (keyup)="onInputKeyUp($event)"
                     />
                 </li>
             </ul>
             <ng-container *ngIf="loading">
-                <SpinnerIcon *ngIf="!loadingIconTemplate" [styleClass]="'p-autocomplete-loader'" [spin]="true" />
-                <span *ngIf="loadingIconTemplate" class="p-autocomplete-loader pi-spin ">
+                <SpinnerIcon *ngIf="!loadingIconTemplate" [styleClass]="'p-autocomplete-loader'" [spin]="true" [attr.aria-hidden]="true" />
+                <span *ngIf="loadingIconTemplate" class="p-autocomplete-loader pi-spin " [attr.aria-hidden]="true">
                     <ng-template *ngTemplateOutlet="loadingIconTemplate"></ng-template>
                 </span>
             </ng-container>
             <button #ddBtn type="button" pButton [attr.aria-label]="dropdownAriaLabel" class="p-autocomplete-dropdown p-button-icon-only" [disabled]="disabled" pRipple (click)="handleDropdownClick($event)" *ngIf="dropdown" [attr.tabindex]="tabindex">
-                <span *ngIf="dropdownIcon" [ngClass]="dropdownIcon"></span>
+                <span *ngIf="dropdownIcon" [ngClass]="dropdownIcon" [attr.aria-hidden]="true"></span>
                 <ng-container *ngIf="!dropdownIcon">
                     <ChevronDownIcon *ngIf="!dropdownIconTemplate" />
                     <ng-template *ngTemplateOutlet="dropdownIconTemplate"></ng-template>
@@ -1059,23 +1284,21 @@ class AutoComplete {
             <p-overlay
                 #overlay
                 [(visible)]="overlayVisible"
-                [options]="overlayOptions"
+                [options]="virtualScrollOptions"
                 [target]="'@parent'"
                 [appendTo]="appendTo"
-                [autoZIndex]="autoZIndex"
-                [baseZIndex]="baseZIndex"
                 [showTransitionOptions]="showTransitionOptions"
                 [hideTransitionOptions]="hideTransitionOptions"
                 (onAnimationStart)="onOverlayAnimationStart($event)"
-                (onShow)="show($event)"
-                (onHide)="hide($event)"
+                (onHide)="hide()"
             >
-                <div [ngClass]="['p-autocomplete-panel p-component']" [style.max-height]="virtualScroll ? 'auto' : scrollHeight" [ngStyle]="panelStyle" [class]="panelStyleClass">
+                <div [ngClass]="panelClass" [style.max-height]="virtualScroll ? 'auto' : scrollHeight" [ngStyle]="panelStyle" [class]="panelStyleClass">
                     <ng-container *ngTemplateOutlet="headerTemplate"></ng-container>
                     <p-scroller
                         *ngIf="virtualScroll"
                         #scroller
-                        [items]="suggestions"
+                        [items]="visibleOptions()"
+                        [tabindex]="-1"
                         [style]="{ height: scrollHeight }"
                         [itemSize]="virtualScrollItemSize || _itemSize"
                         [autoSize]="true"
@@ -1093,151 +1316,181 @@ class AutoComplete {
                         </ng-container>
                     </p-scroller>
                     <ng-container *ngIf="!virtualScroll">
-                        <ng-container *ngTemplateOutlet="buildInItems; context: { $implicit: suggestions, options: {} }"></ng-container>
+                        <ng-container *ngTemplateOutlet="buildInItems; context: { $implicit: visibleOptions(), options: {} }"></ng-container>
                     </ng-container>
 
                     <ng-template #buildInItems let-items let-scrollerOptions="options">
-                        <ul #items role="listbox" [attr.id]="listId" class="p-autocomplete-items" [ngClass]="scrollerOptions.contentStyleClass" [style]="scrollerOptions.contentStyle">
-                            <ng-container *ngIf="group">
-                                <ng-template ngFor let-optgroup [ngForOf]="items">
-                                    <li class="p-autocomplete-item-group" [ngStyle]="{ height: scrollerOptions.itemSize + 'px' }">
-                                        <span *ngIf="!groupTemplate">{{ getOptionGroupLabel(optgroup) || 'empty' }}</span>
-                                        <ng-container *ngTemplateOutlet="groupTemplate; context: { $implicit: optgroup }"></ng-container>
+                        <ul #items class="p-autocomplete-items" [ngClass]="scrollerOptions.contentStyleClass" [style]="scrollerOptions.contentStyle" role="listbox" [attr.id]="id + '_list'">
+                            <ng-template ngFor let-option [ngForOf]="items" let-i="index">
+                                <ng-container *ngIf="isOptionGroup(option)">
+                                    <li [attr.id]="id + '_' + getOptionIndex(i, scrollerOptions)" class="p-autocomplete-item-group" [ngStyle]="{ height: scrollerOptions.itemSize + 'px' }" role="option">
+                                        <span *ngIf="!groupTemplate">{{ getOptionGroupLabel(option.optionGroup) }}</span>
+                                        <ng-container *ngTemplateOutlet="groupTemplate; context: { $implicit: option.optionGroup }"></ng-container>
+                                    </li>
+                                </ng-container>
+                                <ng-container *ngIf="!isOptionGroup(option)">
+                                    <li
+                                        class="p-autocomplete-item"
+                                        pRipple
+                                        [ngStyle]="{ height: scrollerOptions.itemSize + 'px' }"
+                                        [ngClass]="{ 'p-highlight': isSelected(option), 'p-focus': focusedOptionIndex() === getOptionIndex(i, scrollerOptions), 'p-disabled': isOptionDisabled(option) }"
+                                        [attr.id]="id + '_' + getOptionIndex(i, scrollerOptions)"
+                                        role="option"
+                                        [attr.aria-label]="getOptionLabel(option)"
+                                        [attr.aria-selected]="isSelected(option)"
+                                        [attr.aria-disabled]="isOptionDisabled(option)"
+                                        [attr.data-p-focused]="focusedOptionIndex() === getOptionIndex(i, scrollerOptions)"
+                                        [attr.aria-setsize]="ariaSetSize"
+                                        [attr.aria-posinset]="getAriaPosInset(getOptionIndex(i, scrollerOptions))"
+                                        (click)="onOptionSelect($event, option)"
+                                        (mouseenter)="onOptionMouseEnter($event, getOptionIndex(i, scrollerOptions))"
+                                    >
+                                        <span *ngIf="!itemTemplate">{{ getOptionLabel(option) }}</span>
+                                        <ng-container *ngTemplateOutlet="itemTemplate; context: { $implicit: option, index: scrollerOptions.getOptions ? scrollerOptions.getOptions(i) : i }"></ng-container>
                                     </li>
-                                    <ng-container *ngTemplateOutlet="itemslist; context: { $implicit: getOptionGroupChildren(optgroup) }"></ng-container>
-                                </ng-template>
-                            </ng-container>
-                            <ng-container *ngIf="!group">
-                                <ng-container *ngTemplateOutlet="itemslist; context: { $implicit: items }"></ng-container>
-                            </ng-container>
-                            <ng-template #itemslist let-suggestionsToDisplay>
-                                <li
-                                    role="option"
-                                    *ngFor="let option of suggestionsToDisplay; let idx = index"
-                                    class="p-autocomplete-item"
-                                    pRipple
-                                    [ngStyle]="{ height: scrollerOptions.itemSize + 'px' }"
-                                    [ngClass]="{ 'p-highlight': option === highlightOption }"
-                                    [id]="highlightOption == option ? 'p-highlighted-option' : ''"
-                                    (click)="selectItem(option)"
-                                >
-                                    <span *ngIf="!itemTemplate">{{ resolveFieldData(option) }}</span>
-                                    <ng-container *ngTemplateOutlet="itemTemplate; context: { $implicit: option, index: scrollerOptions.getOptions ? scrollerOptions.getOptions(idx) : idx }"></ng-container>
-                                </li>
+                                </ng-container>
                             </ng-template>
-                            <li *ngIf="noResults && showEmptyMessage" class="p-autocomplete-empty-message" [ngStyle]="{ height: scrollerOptions.itemSize + 'px' }">
+                            <li *ngIf="!items || (items && items.length === 0 && showEmptyMessage)" class="p-autocomplete-empty-message" [ngStyle]="{ height: scrollerOptions.itemSize + 'px' }" role="option">
                                 <ng-container *ngIf="!emptyTemplate; else empty">
-                                    {{ emptyMessageLabel }}
+                                    {{ searchResultMessageText }}
                                 </ng-container>
                                 <ng-container #empty *ngTemplateOutlet="emptyTemplate"></ng-container>
                             </li>
                         </ul>
+                        <ng-container *ngTemplateOutlet="footerTemplate; context: { $implicit: items }"></ng-container>
+                        <span role="status" aria-live="polite" class="p-hidden-accessible">
+                            {{ selectedMessageText }}
+                        </span>
                     </ng-template>
-                    <ng-container *ngTemplateOutlet="footerTemplate"></ng-container>
                 </div>
             </p-overlay>
-        </span>
+        </div>
     `, isInline: true, styles: ["@layer primeng{.p-autocomplete{display:inline-flex;position:relative}.p-autocomplete-loader{position:absolute;top:50%;margin-top:-.5rem}.p-autocomplete-dd .p-autocomplete-input{flex:1 1 auto;width:1%}.p-autocomplete-dd .p-autocomplete-input,.p-autocomplete-dd .p-autocomplete-multiple-container{border-top-right-radius:0;border-bottom-right-radius:0}.p-autocomplete-dd .p-autocomplete-dropdown{border-top-left-radius:0;border-bottom-left-radius:0}.p-autocomplete-panel{overflow:auto}.p-autocomplete-items{margin:0;padding:0;list-style-type:none}.p-autocomplete-item{cursor:pointer;white-space:nowrap;position:relative;overflow:hidden}.p-autocomplete-multiple-container{margin:0;padding:0;list-style-type:none;cursor:text;overflow:hidden;display:flex;align-items:center;flex-wrap:wrap}.p-autocomplete-token{width:-moz-fit-content;width:fit-content;cursor:default;display:inline-flex;align-items:center;flex:0 0 auto}.p-autocomplete-token-icon{display:flex;cursor:pointer}.p-autocomplete-input-token{flex:1 1 auto;display:inline-flex}.p-autocomplete-input-token input{border:0 none;outline:0 none;background-color:transparent;margin:0;padding:0;box-shadow:none;border-radius:0;width:100%}.p-fluid .p-autocomplete{display:flex}.p-fluid .p-autocomplete-dd .p-autocomplete-input{width:1%}.p-autocomplete-clear-icon{position:absolute;top:50%;margin-top:-.5rem;cursor:pointer}.p-autocomplete-clearable{position:relative}}\n"], dependencies: [{ kind: "directive", type: i0.forwardRef(function () { return i2.NgClass; }), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(function () { return i2.NgForOf; }), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(function () { return i2.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(function () { return i2.NgTemplateOutlet; }), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i0.forwardRef(function () { return i2.NgStyle; }), selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i0.forwardRef(function () { return i3.Overlay; }), selector: "p-overlay", inputs: ["visible", "mode", "style", "styleClass", "contentStyle", "contentStyleClass", "target", "appendTo", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "listener", "responsive", "options"], outputs: ["visibleChange", "onBeforeShow", "onShow", "onBeforeHide", "onHide", "onAnimationStart", "onAnimationDone"] }, { kind: "directive", type: i0.forwardRef(function () { return i1.PrimeTemplate; }), selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i0.forwardRef(function () { return i4.ButtonDirective; }), selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }, { kind: "directive", type: i0.forwardRef(function () { return i5.Ripple; }), selector: "[pRipple]" }, { kind: "component", type: i0.forwardRef(function () { return i6.Scroller; }), selector: "p-scroller", 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: i0.forwardRef(function () { return i7.AutoFocus; }), selector: "[pAutoFocus]", inputs: ["autofocus"] }, { kind: "component", type: i0.forwardRef(function () { return TimesCircleIcon; }), selector: "TimesCircleIcon" }, { kind: "component", type: i0.forwardRef(function () { return SpinnerIcon; }), selector: "SpinnerIcon" }, { kind: "component", type: i0.forwardRef(function () { return TimesIcon; }), selector: "TimesIcon" }, { kind: "component", type: i0.forwardRef(function () { return ChevronDownIcon; }), selector: "ChevronDownIcon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: AutoComplete, decorators: [{
             type: Component,
             args: [{ selector: 'p-autoComplete', template: `
-        <span #container [ngClass]="{ 'p-autocomplete p-component': true, 'p-autocomplete-dd': dropdown, 'p-autocomplete-multiple': multiple }" [ngStyle]="style" [class]="styleClass">
+        <div #container [ngClass]="containerClass" [ngStyle]="style" [class]="styleClass" (click)="onContainerClick($event)">
             <input
+                *ngIf="!multiple"
+                #focusInput
                 pAutoFocus
                 [autofocus]="autofocus"
-                *ngIf="!multiple"
-                #in
-                [attr.type]="type"
-                [attr.id]="inputId"
+                [ngClass]="inputClass"
                 [ngStyle]="inputStyle"
                 [class]="inputStyleClass"
+                [type]="type"
+                [attr.value]="inputValue()"
+                [attr.id]="inputId"
                 [autocomplete]="autocomplete"
-                [attr.required]="required"
-                [attr.name]="name"
-                class="p-autocomplete-input p-inputtext p-component"
-                [ngClass]="{ 'p-autocomplete-dd-input': dropdown, 'p-disabled': disabled }"
-                [value]="inputFieldValue"
+                [required]="required"
+                [name]="name"
                 aria-autocomplete="list"
-                role="searchbox"
-                (click)="onInputClick($event)"
-                (input)="onInput($event)"
-                (keydown)="onKeydown($event)"
-                (keyup)="onKeyup($event)"
-                (focus)="onInputFocus($event)"
-                (blur)="onInputBlur($event)"
-                (change)="onInputChange($event)"
-                (paste)="onInputPaste($event)"
+                role="combobox"
                 [attr.placeholder]="placeholder"
                 [attr.size]="size"
-                [attr.maxlength]="maxlength"
-                [attr.tabindex]="tabindex"
+                [maxlength]="maxlength"
+                [tabindex]="!disabled ? tabindex : -1"
                 [readonly]="readonly"
                 [disabled]="disabled"
                 [attr.aria-label]="ariaLabel"
                 [attr.aria-labelledby]="ariaLabelledBy"
                 [attr.aria-required]="required"
+                [attr.aria-expanded]="overlayVisible"
+                [attr.aria-controls]="id + '_list'"
+                [attr.aria-aria-activedescendant]="focused ? focusedOptionId : undefined"
+                (input)="onInput($event)"
+                (keydown)="onKeyDown($event)"
+                (change)="onInputChange($event)"
+                (focus)="onInputFocus($event)"
+                (blur)="onInputBlur($event)"
+                (paste)="onInputPaste($event)"
+                (keyup)="onInputKeyUp($event)"
             />
             <ng-container *ngIf="filled && !disabled && showClear && !loading">
-                <TimesIcon *ngIf="!clearIconTemplate" [styleClass]="'p-autocomplete-clear-icon'" (click)="clear()" />
-                <span *ngIf="clearIconTemplate" class="p-autocomplete-clear-icon" (click)="clear()">
+                <TimesIcon *ngIf="!clearIconTemplate" [styleClass]="'p-autocomplete-clear-icon'" (click)="clear()" [attr.aria-hidden]="true" />
+                <span *ngIf="clearIconTemplate" class="p-autocomplete-clear-icon" (click)="clear()" [attr.aria-hidden]="true">
                     <ng-template *ngTemplateOutlet="clearIconTemplate"></ng-template>
                 </span>
             </ng-container>
-            <ul *ngIf="multiple" #multiContainer class="p-autocomplete-multiple-container p-component p-inputtext" [ngClass]="{ 'p-disabled': disabled, 'p-focus': focus }" (click)="multiIn.focus()">
-                <li #token *ngFor="let val of value" class="p-autocomplete-token">
-                    <ng-container *ngTemplateOutlet="selectedItemTemplate; context: { $implicit: val }"></ng-container>
-                    <span *ngIf="!selectedItemTemplate" class="p-autocomplete-token-label">{{ resolveFieldData(val) }}</span>
-                    <span class="p-autocomplete-token-icon" (click)="removeItem(token)">
-                        <TimesCircleIcon [styleClass]="'p-autocomplete-token-icon'" *ngIf="!removeIconTemplate" />
-                        <span *ngIf="removeIconTemplate" class="p-autocomplete-token-icon">
+
+            <ul
+                *ngIf="multiple"
+                #multiContainer
+                [class]="multiContainerClass"
+                [tabindex]="-1"
+                role="listbox"
+                [attr.aria-orientation]="'horizontal'"
+                [attr.aria-activedescendant]="focused ? focusedMultipleOptionId : undefined"
+                (focus)="onMultipleContainerFocus($event)"
+                (blur)="onMultipleContainerBlur($event)"
+                (keydown)="onMultipleContainerKeyDown($event)"
+            >
+                <li
+                    #token
+                    *ngFor="let option of modelValue(); let i = index"
+                    [ngClass]="{ 'p-autocomplete-token': true, 'p-focus': focusedMultipleOptionIndex() === i }"
+                    [attr.id]="id + '_multiple_option_' + i"
+                    role="option"
+                    [attr.aria-label]="getOptionLabel(option)"
+                    [attr.aria-setsize]="modelValue().length"
+                    [attr.aria-posinset]="i + 1"
+                    [attr.aria-selected]="true"
+                >
+                    <ng-container *ngTemplateOutlet="selectedItemTemplate; context: { $implicit: option }"></ng-container>
+                    <span *ngIf="!selectedItemTemplate" class="p-autocomplete-token-label">{{ getOptionLabel(option) }}</span>
+                    <span class="p-autocomplete-token-icon" (click)="removeOption($event, i)">
+                        <TimesCircleIcon [styleClass]="'p-autocomplete-token-icon'" *ngIf="!removeIconTemplate" [attr.aria-hidden]="true" />
+                        <span *ngIf="removeIconTemplate" class="p-autocomplete-token-icon" [attr.aria-hidden]="true">
                             <ng-template *ngTemplateOutlet="removeIconTemplate"></ng-template>
                         </span>
                     </span>
                 </li>
-                <li class="p-autocomplete-input-token">
+                <li class="p-autocomplete-input-token" role="option">
                     <input
+                        #focusInput
                         pAutoFocus
                         [autofocus]="autofocus"
-                        #multiIn
+                        [ngClass]="inputClass"
+                        [ngStyle]="inputStyle"
+                        [class]="inputStyleClass"
                         [attr.type]="type"
                         [attr.id]="inputId"
-                        [disabled]="disabled"
-                        [attr.placeholder]="value && value.length ? null : placeholder"
-                        [attr.tabindex]="tabindex"
-                        [attr.maxlength]="maxlength"
-                        (input)="onInput($event)"
-                        (click)="onInputClick($event)"
-                        (keydown)="onKeydown($event)"
-                        [readonly]="readonly"
-                        (keyup)="onKeyup($event)"
-                        (focus)="onInputFocus($event)"
-                        (blur)="onInputBlur($event)"
-                        (change)="onInputChange($event)"
-                        (paste)="onInputPaste($event)"
                         [autocomplete]="autocomplete"
-                        [ngStyle]="inputStyle"
-                        [class]="inputStyleClass"
+                        [required]="required"
+                        [attr.name]="name"
+                        role="combobox"
+                        [attr.placeholder]="placeholder"
+                        [attr.size]="size"
+                        aria-autocomplete="list"
+                        [maxlength]="maxlength"
+                        [tabindex]="!disabled ? tabindex : -1"
+                        [readonly]="readonly"
+                        [disabled]="disabled"
                         [attr.aria-label]="ariaLabel"
                         [attr.aria-labelledby]="ariaLabelledBy"
                         [attr.aria-required]="required"
-                        aria-autocomplete="list"
-                        [attr.aria-controls]="listId"
-                        role="searchbox"
                         [attr.aria-expanded]="overlayVisible"
-                        aria-haspopup="true"
-                        [attr.aria-activedescendant]="'p-highlighted-option'"
+                        [attr.aria-controls]="id + '_list'"
+                        [attr.aria-aria-activedescendant]="focused ? focusedOptionId : undefined"
+                        (input)="onInput($event)"
+                        (keydown)="onKeyDown($event)"
+                        (change)="onInputChange($event)"
+                        (focus)="onInputFocus($event)"
+                        (blur)="onInputBlur($event)"
+                        (paste)="onInputPaste($event)"
+                        (keyup)="onInputKeyUp($event)"
                     />
                 </li>
             </ul>
             <ng-container *ngIf="loading">
-                <SpinnerIcon *ngIf="!loadingIconTemplate" [styleClass]="'p-autocomplete-loader'" [spin]="true" />
-                <span *ngIf="loadingIconTemplate" class="p-autocomplete-loader pi-spin ">
+                <SpinnerIcon *ngIf="!loadingIconTemplate" [styleClass]="'p-autocomplete-loader'" [spin]="true" [attr.aria-hidden]="true" />
+                <span *ngIf="loadingIconTemplate" class="p-autocomplete-loader pi-spin " [attr.aria-hidden]="true">
                     <ng-template *ngTemplateOutlet="loadingIconTemplate"></ng-template>
                 </span>
             </ng-container>
             <button #ddBtn type="button" pButton [attr.aria-label]="dropdownAriaLabel" class="p-autocomplete-dropdown p-button-icon-only" [disabled]="disabled" pRipple (click)="handleDropdownClick($event)" *ngIf="dropdown" [attr.tabindex]="tabindex">
-                <span *ngIf="dropdownIcon" [ngClass]="dropdownIcon"></span>
+                <span *ngIf="dropdownIcon" [ngClass]="dropdownIcon" [attr.aria-hidden]="true"></span>
                 <ng-container *ngIf="!dropdownIcon">
                     <ChevronDownIcon *ngIf="!dropdownIconTemplate" />
                     <ng-template *ngTemplateOutlet="dropdownIconTemplate"></ng-template>
@@ -1246,23 +1499,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImpor
             <p-overlay
                 #overlay
                 [(visible)]="overlayVisible"
-                [options]="overlayOptions"
+                [options]="virtualScrollOptions"
                 [target]="'@parent'"
                 [appendTo]="appendTo"
-                [autoZIndex]="autoZIndex"
-                [baseZIndex]="baseZIndex"
                 [showTransitionOptions]="showTransitionOptions"
                 [hideTransitionOptions]="hideTransitionOptions"
                 (onAnimationStart)="onOverlayAnimationStart($event)"
-                (onShow)="show($event)"
-                (onHide)="hide($event)"
+                (onHide)="hide()"
             >
-                <div [ngClass]="['p-autocomplete-panel p-component']" [style.max-height]="virtualScroll ? 'auto' : scrollHeight" [ngStyle]="panelStyle" [class]="panelStyleClass">
+                <div [ngClass]="panelClass" [style.max-height]="virtualScroll ? 'auto' : scrollHeight" [ngStyle]="panelStyle" [class]="panelStyleClass">
                     <ng-container *ngTemplateOutlet="headerTemplate"></ng-container>
                     <p-scroller
                         *ngIf="virtualScroll"
                         #scroller
-                        [items]="suggestions"
+                        [items]="visibleOptions()"
+                        [tabindex]="-1"
                         [style]="{ height: scrollHeight }"
                         [itemSize]="virtualScrollItemSize || _itemSize"
                         [autoSize]="true"
@@ -1280,60 +1531,65 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImpor
                         </ng-container>
                     </p-scroller>
                     <ng-container *ngIf="!virtualScroll">
-                        <ng-container *ngTemplateOutlet="buildInItems; context: { $implicit: suggestions, options: {} }"></ng-container>
+                        <ng-container *ngTemplateOutlet="buildInItems; context: { $implicit: visibleOptions(), options: {} }"></ng-container>
                     </ng-container>
 
                     <ng-template #buildInItems let-items let-scrollerOptions="options">
-                        <ul #items role="listbox" [attr.id]="listId" class="p-autocomplete-items" [ngClass]="scrollerOptions.contentStyleClass" [style]="scrollerOptions.contentStyle">
-                            <ng-container *ngIf="group">
-                                <ng-template ngFor let-optgroup [ngForOf]="items">
-                                    <li class="p-autocomplete-item-group" [ngStyle]="{ height: scrollerOptions.itemSize + 'px' }">
-                                        <span *ngIf="!groupTemplate">{{ getOptionGroupLabel(optgroup) || 'empty' }}</span>
-                                        <ng-container *ngTemplateOutlet="groupTemplate; context: { $implicit: optgroup }"></ng-container>
+                        <ul #items class="p-autocomplete-items" [ngClass]="scrollerOptions.contentStyleClass" [style]="scrollerOptions.contentStyle" role="listbox" [attr.id]="id + '_list'">
+                            <ng-template ngFor let-option [ngForOf]="items" let-i="index">
+                                <ng-container *ngIf="isOptionGroup(option)">
+                                    <li [attr.id]="id + '_' + getOptionIndex(i, scrollerOptions)" class="p-autocomplete-item-group" [ngStyle]="{ height: scrollerOptions.itemSize + 'px' }" role="option">
+                                        <span *ngIf="!groupTemplate">{{ getOptionGroupLabel(option.optionGroup) }}</span>
+                                        <ng-container *ngTemplateOutlet="groupTemplate; context: { $implicit: option.optionGroup }"></ng-container>
                                     </li>
-                                    <ng-container *ngTemplateOutlet="itemslist; context: { $implicit: getOptionGroupChildren(optgroup) }"></ng-container>
-                                </ng-template>
-                            </ng-container>
-                            <ng-container *ngIf="!group">
-                                <ng-container *ngTemplateOutlet="itemslist; context: { $implicit: items }"></ng-container>
-                            </ng-container>
-                            <ng-template #itemslist let-suggestionsToDisplay>
-                                <li
-                                    role="option"
-                                    *ngFor="let option of suggestionsToDisplay; let idx = index"
-                                    class="p-autocomplete-item"
-                                    pRipple
-                                    [ngStyle]="{ height: scrollerOptions.itemSize + 'px' }"
-                                    [ngClass]="{ 'p-highlight': option === highlightOption }"
-                                    [id]="highlightOption == option ? 'p-highlighted-option' : ''"
-                                    (click)="selectItem(option)"
-                                >
-                                    <span *ngIf="!itemTemplate">{{ resolveFieldData(option) }}</span>
-                                    <ng-container *ngTemplateOutlet="itemTemplate; context: { $implicit: option, index: scrollerOptions.getOptions ? scrollerOptions.getOptions(idx) : idx }"></ng-container>
-                                </li>
+                                </ng-container>
+                                <ng-container *ngIf="!isOptionGroup(option)">
+                                    <li
+                                        class="p-autocomplete-item"
+                                        pRipple
+                                        [ngStyle]="{ height: scrollerOptions.itemSize + 'px' }"
+                                        [ngClass]="{ 'p-highlight': isSelected(option), 'p-focus': focusedOptionIndex() === getOptionIndex(i, scrollerOptions), 'p-disabled': isOptionDisabled(option) }"
+                                        [attr.id]="id + '_' + getOptionIndex(i, scrollerOptions)"
+                                        role="option"
+                                        [attr.aria-label]="getOptionLabel(option)"
+                                        [attr.aria-selected]="isSelected(option)"
+                                        [attr.aria-disabled]="isOptionDisabled(option)"
+                                        [attr.data-p-focused]="focusedOptionIndex() === getOptionIndex(i, scrollerOptions)"
+                                        [attr.aria-setsize]="ariaSetSize"
+                                        [attr.aria-posinset]="getAriaPosInset(getOptionIndex(i, scrollerOptions))"
+                                        (click)="onOptionSelect($event, option)"
+                                        (mouseenter)="onOptionMouseEnter($event, getOptionIndex(i, scrollerOptions))"
+                                    >
+                                        <span *ngIf="!itemTemplate">{{ getOptionLabel(option) }}</span>
+                                        <ng-container *ngTemplateOutlet="itemTemplate; context: { $implicit: option, index: scrollerOptions.getOptions ? scrollerOptions.getOptions(i) : i }"></ng-container>
+                                    </li>
+                                </ng-container>
                             </ng-template>
-                            <li *ngIf="noResults && showEmptyMessage" class="p-autocomplete-empty-message" [ngStyle]="{ height: scrollerOptions.itemSize + 'px' }">
+                            <li *ngIf="!items || (items && items.length === 0 && showEmptyMessage)" class="p-autocomplete-empty-message" [ngStyle]="{ height: scrollerOptions.itemSize + 'px' }" role="option">
                                 <ng-container *ngIf="!emptyTemplate; else empty">
-                                    {{ emptyMessageLabel }}
+                                    {{ searchResultMessageText }}
                                 </ng-container>
                                 <ng-container #empty *ngTemplateOutlet="emptyTemplate"></ng-container>
                             </li>
                         </ul>
+                        <ng-container *ngTemplateOutlet="footerTemplate; context: { $implicit: items }"></ng-container>
+                        <span role="status" aria-live="polite" class="p-hidden-accessible">
+                            {{ selectedMessageText }}
+                        </span>
                     </ng-template>
-                    <ng-container *ngTemplateOutlet="footerTemplate"></ng-container>
                 </div>
             </p-overlay>
-        </span>
+        </div>
     `, host: {
                         class: 'p-element p-inputwrapper',
                         '[class.p-inputwrapper-filled]': 'filled',
-                        '[class.p-inputwrapper-focus]': '((focus && !disabled) || autofocus) || overlayVisible',
+                        '[class.p-inputwrapper-focus]': '((focused && !disabled) || autofocus) || overlayVisible',
                         '[class.p-autocomplete-clearable]': 'showClear && !disabled'
                     }, providers: [AUTOCOMPLETE_VALUE_ACCESSOR], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, styles: ["@layer primeng{.p-autocomplete{display:inline-flex;position:relative}.p-autocomplete-loader{position:absolute;top:50%;margin-top:-.5rem}.p-autocomplete-dd .p-autocomplete-input{flex:1 1 auto;width:1%}.p-autocomplete-dd .p-autocomplete-input,.p-autocomplete-dd .p-autocomplete-multiple-container{border-top-right-radius:0;border-bottom-right-radius:0}.p-autocomplete-dd .p-autocomplete-dropdown{border-top-left-radius:0;border-bottom-left-radius:0}.p-autocomplete-panel{overflow:auto}.p-autocomplete-items{margin:0;padding:0;list-style-type:none}.p-autocomplete-item{cursor:pointer;white-space:nowrap;position:relative;overflow:hidden}.p-autocomplete-multiple-container{margin:0;padding:0;list-style-type:none;cursor:text;overflow:hidden;display:flex;align-items:center;flex-wrap:wrap}.p-autocomplete-token{width:-moz-fit-content;width:fit-content;cursor:default;display:inline-flex;align-items:center;flex:0 0 auto}.p-autocomplete-token-icon{display:flex;cursor:pointer}.p-autocomplete-input-token{flex:1 1 auto;display:inline-flex}.p-autocomplete-input-token input{border:0 none;outline:0 none;background-color:transparent;margin:0;padding:0;box-shadow:none;border-radius:0;width:100%}.p-fluid .p-autocomplete{display:flex}.p-fluid .p-autocomplete-dd .p-autocomplete-input{width:1%}.p-autocomplete-clear-icon{position:absolute;top:50%;margin-top:-.5rem;cursor:pointer}.p-autocomplete-clearable{position:relative}}\n"] }]
         }], ctorParameters: function () { return [{ type: Document, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]
-                }] }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: i0.IterableDiffers }, { type: i1.PrimeNGConfig }, { type: i1.OverlayService }, { type: i0.NgZone }]; }, propDecorators: { minLength: [{
+                }] }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: i1.PrimeNGConfig }, { type: i1.OverlayService }, { type: i0.NgZone }]; }, propDecorators: { minLength: [{
                 type: Input
             }], delay: [{
                 type: Input
@@ -1437,6 +1693,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImpor
                 type: Input
             }], itemSize: [{
                 type: Input
+            }], optionLabel: [{
+                type: Input
+            }], id: [{
+                type: Input
+            }], searchMessage: [{
+                type: Input
+            }], emptySelectionMessage: [{
+                type: Input
+            }], selectionMessage: [{
+                type: Input
+            }], autoOptionFocus: [{
+                type: Input
+            }], selectOnFocus: [{
+                type: Input
+            }], searchLocale: [{
+                type: Input
+            }], optionDisabled: [{
+                type: Input
+            }], focusOnHover: [{
+                type: Input
             }], completeMethod: [{
                 type: Output
             }], onSelect: [{
@@ -1464,7 +1740,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImpor
                 args: ['container']
             }], inputEL: [{
                 type: ViewChild,
-                args: ['in']
+                args: ['focusInput']
             }], multiInputEl: [{
                 type: ViewChild,
                 args: ['multiIn']