primeng 19.1.3 → 20.0.0-beta.1

package/fesm2022/primeng-autocomplete.mjs

@@ -1,13 +1,13 @@
 import * as i2 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Injectable, forwardRef, EventEmitter, inject, signal, computed, effect, booleanAttribute, numberAttribute, ContentChildren, ContentChild, ViewChild, Output, Input, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
+import { Injectable, forwardRef, input, EventEmitter, inject, signal, computed, booleanAttribute, numberAttribute, ContentChildren, HostListener, ContentChild, ViewChild, Output, Input, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { resolveFieldData, isNotEmpty, uuid, findLastIndex, equals, focus, isEmpty, findSingle } from '@primeuix/utils';
 import * as i1 from 'primeng/api';
 import { TranslationKeys, SharedModule, PrimeTemplate } from 'primeng/api';
 import { AutoFocus } from 'primeng/autofocus';
-import { BaseComponent } from 'primeng/basecomponent';
+import { BaseInput } from 'primeng/baseinput';
 import { Chip } from 'primeng/chip';
 import { PrimeNG } from 'primeng/config';
 import { TimesCircleIcon, SpinnerIcon, TimesIcon, ChevronDownIcon } from 'primeng/icons';
@@ -15,329 +15,71 @@ import { InputText } from 'primeng/inputtext';
 import { Overlay } from 'primeng/overlay';
 import { Ripple } from 'primeng/ripple';
 import { Scroller } from 'primeng/scroller';
+import { css, dt } from '@primeuix/styled';
+import { style } from '@primeuix/styles/autocomplete';
 import { BaseStyle } from 'primeng/base';
 
-const theme = ({ dt }) => `
-.p-autocomplete {
-    display: inline-flex;
-}
-
-.p-autocomplete-loader {
-    position: absolute;
-    top: 50%;
-    margin-top: -0.5rem;
-    inset-inline-end: ${dt('autocomplete.padding.x')};
-}
-
-.p-autocomplete:has(.p-autocomplete-dropdown) .p-autocomplete-loader {
-    inset-inline-end: calc(${dt('autocomplete.dropdown.width')} + ${dt('autocomplete.padding.x')});
-}
-
-.p-autocomplete:has(.p-autocomplete-dropdown) .p-autocomplete-input {
-    flex: 1 1 auto;
-    width: 1%;
-}
-
-.p-autocomplete:has(.p-autocomplete-dropdown) .p-autocomplete-input,
-.p-autocomplete:has(.p-autocomplete-dropdown) .p-autocomplete-input-multiple {
-    border-start-end-radius: 0;
-    border-end-end-radius: 0;
-}
-
-.p-autocomplete-dropdown {
-    cursor: pointer;
-    display: inline-flex;
-    user-select: none;
-    align-items: center;
-    justify-content: center;
-    overflow: hidden;
-    position: relative;
-    width: ${dt('autocomplete.dropdown.width')};
-    border-start-end-radius: ${dt('autocomplete.dropdown.border.radius')};
-    border-end-end-radius: ${dt('autocomplete.dropdown.border.radius')};
-    background: ${dt('autocomplete.dropdown.background')};
-    border: 1px solid ${dt('autocomplete.dropdown.border.color')};
-    border-inline-start: 0 none;
-    color: ${dt('autocomplete.dropdown.color')};
-    transition: background ${dt('autocomplete.transition.duration')}, color ${dt('autocomplete.transition.duration')}, border-color ${dt('autocomplete.transition.duration')}, outline-color ${dt('autocomplete.transition.duration')}, box-shadow ${dt('autocomplete.transition.duration')};
-    outline-color: transparent;
-}
-
-.p-autocomplete-dropdown:not(:disabled):hover {
-    background: ${dt('autocomplete.dropdown.hover.background')};
-    border-color: ${dt('autocomplete.dropdown.hover.border.color')};
-    color: ${dt('autocomplete.dropdown.hover.color')};
-}
-
-.p-autocomplete-dropdown:not(:disabled):active {
-    background: ${dt('autocomplete.dropdown.active.background')};
-    border-color: ${dt('autocomplete.dropdown.active.border.color')};
-    color: ${dt('autocomplete.dropdown.active.color')};
-}
-
-.p-autocomplete-dropdown:focus-visible {
-    box-shadow: ${dt('autocomplete.dropdown.focus.ring.shadow')};
-    outline: ${dt('autocomplete.dropdown.focus.ring.width')} ${dt('autocomplete.dropdown.focus.ring.style')} ${dt('autocomplete.dropdown.focus.ring.color')};
-    outline-offset: ${dt('autocomplete.dropdown.focus.ring.offset')};
-}
-
-.p-autocomplete .p-autocomplete-overlay {
-    min-width: 100%;
-}
-
-.p-autocomplete-overlay {
-    background: ${dt('autocomplete.overlay.background')};
-    color: ${dt('autocomplete.overlay.color')};
-    border: 1px solid ${dt('autocomplete.overlay.border.color')};
-    border-radius: ${dt('autocomplete.overlay.border.radius')};
-    box-shadow: ${dt('autocomplete.overlay.shadow')};
-}
-
-.p-autocomplete-list-container {
-    overflow: auto;
-}
-
-.p-autocomplete-list {
-    margin: 0;
-    list-style-type: none;
-    display: flex;
-    flex-direction: column;
-    gap: ${dt('autocomplete.list.gap')};
-    padding: ${dt('autocomplete.list.padding')};
-}
-
-.p-autocomplete-option {
-    cursor: pointer;
-    white-space: nowrap;
-    position: relative;
-    overflow: hidden;
-    display: flex;
-    align-items: center;
-    padding: ${dt('autocomplete.option.padding')};
-    border: 0 none;
-    color: ${dt('autocomplete.option.color')};
-    background: transparent;
-    transition: background ${dt('autocomplete.transition.duration')}, color ${dt('autocomplete.transition.duration')}, border-color ${dt('autocomplete.transition.duration')};
-    border-radius: ${dt('autocomplete.option.border.radius')};
-}
-
-.p-autocomplete-option:not(.p-autocomplete-option-selected):not(.p-disabled).p-focus {
-    background: ${dt('autocomplete.option.focus.background')};
-    color: ${dt('autocomplete.option.focus.color')};
-}
-
-.p-autocomplete-option-selected {
-    background: ${dt('autocomplete.option.selected.background')};
-    color: ${dt('autocomplete.option.selected.color')};
-}
-
-.p-autocomplete-option-selected.p-focus {
-    background: ${dt('autocomplete.option.selected.focus.background')};
-    color: ${dt('autocomplete.option.selected.focus.color')};
-}
-
-.p-autocomplete-option-group {
-    margin: 0;
-    padding: ${dt('autocomplete.option.group.padding')};
-    color: ${dt('autocomplete.option.group.color')};
-    background: ${dt('autocomplete.option.group.background')};
-    font-weight: ${dt('autocomplete.option.group.font.weight')};
-}
-
-.p-autocomplete-input-multiple {
-    margin: 0;
-    list-style-type: none;
-    cursor: text;
-    overflow: hidden;
-    display: flex;
-    align-items: center;
-    flex-wrap: wrap;
-    padding: calc(${dt('autocomplete.padding.y')} / 2) ${dt('autocomplete.padding.x')};
-    gap: calc(${dt('autocomplete.padding.y')} / 2);
-    color: ${dt('autocomplete.color')};
-    background: ${dt('autocomplete.background')};
-    border: 1px solid ${dt('autocomplete.border.color')};
-    border-radius: ${dt('autocomplete.border.radius')};
-    width: 100%;
-    transition: background ${dt('autocomplete.transition.duration')}, color ${dt('autocomplete.transition.duration')}, border-color ${dt('autocomplete.transition.duration')}, outline-color ${dt('autocomplete.transition.duration')}, box-shadow ${dt('autocomplete.transition.duration')};
-    outline-color: transparent;
-    box-shadow: ${dt('autocomplete.shadow')};
-}
-
-.p-autocomplete:not(.p-disabled):hover .p-autocomplete-input-multiple {
-    border-color: ${dt('autocomplete.hover.border.color')};
-}
-
-.p-autocomplete:not(.p-disabled).p-focus .p-autocomplete-input-multiple {
-    border-color: ${dt('autocomplete.focus.border.color')};
-    box-shadow: ${dt('autocomplete.focus.ring.shadow')};
-    outline: ${dt('autocomplete.focus.ring.width')} ${dt('autocomplete.focus.ring.style')} ${dt('autocomplete.focus.ring.color')};
-    outline-offset: ${dt('autocomplete.focus.ring.offset')};
-}
-
-.p-autocomplete.p-invalid .p-autocomplete-input-multiple {
-    border-color: ${dt('autocomplete.invalid.border.color')};
-}
-
-.p-variant-filled.p-autocomplete-input-multiple {
-    background: ${dt('autocomplete.filled.background')};
-}
-
-.p-autocomplete:not(.p-disabled):hover .p-variant-filled.p-autocomplete-input-multiple {
-    background: ${dt('autocomplete.filled.hover.background')};
-}
-
-.p-autocomplete:not(.p-disabled).p-focus .p-variant-filled.p-autocomplete-input-multiple  {
-    background: ${dt('autocomplete.filled.focus.background')};
-}
-
-.p-autocomplete.p-disabled {
-    opacity: 1;
-}
-
-.p-autocomplete.p-disabled .p-autocomplete-input-multiple {
-    opacity: 1;
-    background: ${dt('autocomplete.disabled.background')};
-    color: ${dt('autocomplete.disabled.color')};
-}
-
-.p-autocomplete-chip.p-chip {
-    padding-block-start: calc(${dt('autocomplete.padding.y')} / 2);
-    padding-block-end: calc(${dt('autocomplete.padding.y')} / 2);
-    border-radius: ${dt('autocomplete.chip.border.radius')};
-}
-
-.p-autocomplete-input-multiple:has(.p-autocomplete-chip) {
-    padding-inline-start: calc(${dt('autocomplete.padding.y')} / 2);
-    padding-inline-end: calc(${dt('autocomplete.padding.y')} / 2);
-}
-
-.p-autocomplete-chip-item.p-focus .p-autocomplete-chip {
-    background: ${dt('autocomplete.chip.focus.background')};
-    color: ${dt('autocomplete.chip.focus.color')};
-}
-
-.p-autocomplete-input-chip {
-    flex: 1 1 auto;
-    display: inline-flex;
-    padding-block-start: calc(${dt('autocomplete.padding.y')} / 2);
-    padding-block-end: calc(${dt('autocomplete.padding.y')} / 2);
-}
-
-.p-autocomplete-input-chip input {
-    border: 0 none;
-    outline: 0 none;
-    background: transparent;
-    margin: 0;
-    padding: 0;
-    box-shadow: none;
-    border-radius: 0;
-    width: 100%;
-    font-family: inherit;
-    font-feature-settings: inherit;
-    font-size: 1rem;
-    color: inherit;
-}
-
-.p-autocomplete-input-chip input::placeholder {
-    color: ${dt('autocomplete.placeholder.color')};
-}
-
-.p-autocomplete-empty-message {
-    padding: ${dt('autocomplete.empty.message.padding')};
-}
-
-.p-autocomplete-fluid {
-    display: flex;
-}
-
-.p-autocomplete-fluid:has(.p-autocomplete-dropdown) .p-autocomplete-input {
-    width: 1%;
-}
-
-.p-autocomplete:has(.p-inputtext-sm) .p-autocomplete-dropdown {
-    width: ${dt('autocomplete.dropdown.sm.width')};
-}
-
-.p-autocomplete:has(.p-inputtext-sm) .p-autocomplete-dropdown .p-icon {
-    font-size: ${dt('form.field.sm.font.size')};
-    width: ${dt('form.field.sm.font.size')};
-    height: ${dt('form.field.sm.font.size')};
-}
+const theme = css `
+    ${style}
 
-.p-autocomplete:has(.p-inputtext-lg) .p-autocomplete-dropdown {
-    width: ${dt('autocomplete.dropdown.lg.width')};
-}
-
-.p-autocomplete:has(.p-inputtext-lg) .p-autocomplete-dropdown .p-icon {
-    font-size: ${dt('form.field.lg.font.size')};
-    width: ${dt('form.field.lg.font.size')};
-    height: ${dt('form.field.lg.font.size')};
-}
+    /* For PrimeNG */
+    p-autoComplete.ng-invalid.ng-dirty .p-autocomplete-input,
+    p-autoComplete.ng-invalid.ng-dirty .p-autocomplete-input-multiple,
+    p-auto-complete.ng-invalid.ng-dirty .p-autocomplete-input,
+    p-auto-complete.ng-invalid.ng-dirty .p-autocomplete-input-multiple p-autocomplete.ng-invalid.ng-dirty .p-autocomplete-input,
+    p-autocomplete.ng-invalid.ng-dirty .p-autocomplete-input-multiple {
+        border-color: ${dt('autocomplete.invalid.border.color')};
+    }
 
-.p-autocomplete-clear-icon {
-    position: absolute;
-    top: 50%;
-    margin-top: -0.5rem;
-    cursor: pointer;
-    right: ${dt('autocomplete.padding.x')};
-    color: ${dt('autocomplete.dropdown.color')};
-}
+    p-autoComplete.ng-invalid.ng-dirty .p-autocomplete-input:enabled:focus,
+    p-autoComplete.ng-invalid.ng-dirty:not(.p-disabled).p-focus .p-autocomplete-input-multiple,
+    p-auto-complete.ng-invalid.ng-dirty .p-autocomplete-input:enabled:focus,
+    p-auto-complete.ng-invalid.ng-dirty:not(.p-disabled).p-focus .p-autocomplete-input-multiple,
+    p-autocomplete.ng-invalid.ng-dirty .p-autocomplete-input:enabled:focus,
+    p-autocomplete.ng-invalid.ng-dirty:not(.p-disabled).p-focus .p-autocomplete-input-multiple {
+        border-color: ${dt('autocomplete.focus.border.color')};
+    }
 
-.p-autocomplete:has(.p-autocomplete-dropdown) .p-autocomplete-clear-icon {
-    right: calc(${dt('autocomplete.padding.x')} + ${dt('autocomplete.dropdown.width')});
-}
-p-autoComplete.ng-invalid.ng-dirty .p-autocomplete-input,
-p-autoComplete.ng-invalid.ng-dirty .p-autocomplete-input-multiple,
-p-auto-complete.ng-invalid.ng-dirty .p-autocomplete-input,
-p-auto-complete.ng-invalid.ng-dirty .p-autocomplete-input-multiple
-p-autocomplete.ng-invalid.ng-dirty .p-autocomplete-input,
-p-autocomplete.ng-invalid.ng-dirty .p-autocomplete-input-multiple {
-    border-color: ${dt('autocomplete.invalid.border.color')};
-}
-p-autoComplete.ng-invalid.ng-dirty .p-autocomplete-input:enabled:focus,
-p-autoComplete.ng-invalid.ng-dirty:not(.p-disabled).p-focus .p-autocomplete-input-multiple,
-p-auto-complete.ng-invalid.ng-dirty .p-autocomplete-input:enabled:focus,
-p-auto-complete.ng-invalid.ng-dirty:not(.p-disabled).p-focus .p-autocomplete-input-multiple,
-p-autocomplete.ng-invalid.ng-dirty .p-autocomplete-input:enabled:focus,
-p-autocomplete.ng-invalid.ng-dirty:not(.p-disabled).p-focus .p-autocomplete-input-multiple {
-    border-color: ${dt('autocomplete.focus.border.color')};
-}
-p-autoComplete.ng-invalid.ng-dirty .p-autocomplete-input-chip input::placeholder,
-p-auto-complete.ng-invalid.ng-dirty .p-autocomplete-input-chip input::placeholder,
-p-autocomplete.ng-invalid.ng-dirty .p-autocomplete-input-chip input::placeholder {
-    color: ${dt('autocomplete.invalid.placeholder.color')};
-}
+    p-autoComplete.ng-invalid.ng-dirty .p-autocomplete-input-chip input::placeholder,
+    p-auto-complete.ng-invalid.ng-dirty .p-autocomplete-input-chip input::placeholder,
+    p-autocomplete.ng-invalid.ng-dirty .p-autocomplete-input-chip input::placeholder {
+        color: ${dt('autocomplete.invalid.placeholder.color')};
+    }
 
-p-autoComplete.ng-invalid.ng-dirty .p-autocomplete-input::placeholder,
-p-auto-complete.ng-invalid.ng-dirty .p-autocomplete-input::placeholder,
-p-autocomplete.ng-invalid.ng-dirty .p-autocomplete-input::placeholder {
-    color: ${dt('autocomplete.invalid.placeholder.color')};
-}`;
+    p-autoComplete.ng-invalid.ng-dirty .p-autocomplete-input::placeholder,
+    p-auto-complete.ng-invalid.ng-dirty .p-autocomplete-input::placeholder,
+    p-autocomplete.ng-invalid.ng-dirty .p-autocomplete-input::placeholder {
+        color: ${dt('autocomplete.invalid.placeholder.color')};
+    }
+`;
 const inlineStyles = {
     root: { position: 'relative' }
 };
 const classes = {
-    root: ({ instance }) => ({
-        'p-autocomplete p-component p-inputwrapper': true,
-        'p-disabled': instance.disabled,
-        'p-focus': instance.focused,
-        'p-inputwrapper-filled': instance.filled,
-        'p-inputwrapper-focus': (instance.focused && !instance.disabled) || instance.autofocus || instance.overlayVisible,
-        'p-autocomplete-open': instance.overlayVisible,
-        'p-autocomplete-clearable': instance.showClear && !instance.disabled,
-        // 'p-invalid': instance.invalid,
-        'p-autocomplete-fluid': instance.hasFluid
-    }),
-    pcInput: 'p-autocomplete-input',
-    inputMultiple: ({ instance }) => ({
-        'p-autocomplete-input-multiple': true,
-        'p-variant-filled': (instance.variant ?? (instance.config.inputStyle() || instance.config.inputVariant())) === 'filled'
-    }),
+    root: ({ instance }) => [
+        'p-autocomplete p-component p-inputwrapper',
+        {
+            'p-invalid': instance.invalid(),
+            'p-focus': instance.focused,
+            'p-inputwrapper-filled': instance.$filled(),
+            'p-inputwrapper-focus': (instance.focused && !instance.disabled()) || instance.autofocus || instance.overlayVisible,
+            'p-autocomplete-open': instance.overlayVisible,
+            'p-autocomplete-clearable': instance.showClear && !instance.disabled(),
+            'p-autocomplete-fluid': instance.hasFluid
+        }
+    ],
+    pcInputText: 'p-autocomplete-input',
+    inputMultiple: ({ instance }) => [
+        'p-autocomplete-input-multiple',
+        {
+            'p-disabled': instance.disabled(),
+            'p-variant-filled': instance.$variant() === 'filled'
+        }
+    ],
     chipItem: ({ instance, i }) => [
         'p-autocomplete-chip-item',
         {
-            'p-focus': instance.focusedMultipleOptionIndex === i
+            'p-focus': instance.focusedMultipleOptionIndex() === i
         }
     ],
     pcChip: 'p-autocomplete-chip',
@@ -345,26 +87,28 @@ const classes = {
     inputChip: 'p-autocomplete-input-chip',
     loader: 'p-autocomplete-loader',
     dropdown: 'p-autocomplete-dropdown',
-    overlay: 'p-autocomplete-overlay p-component',
+    overlay: ({ instance }) => ['p-autocomplete-overlay p-component', { 'p-input-filled': instance.$variant() === 'filled', 'p-ripple-disabled': instance.config.ripple() === false }],
+    listContainer: 'p-autocomplete-list-container',
     list: 'p-autocomplete-list',
     optionGroup: 'p-autocomplete-option-group',
-    option: ({ instance, option, i, getItemOptions }) => ({
+    option: ({ instance, option, i, scrollerOptions }) => ({
         'p-autocomplete-option': true,
         'p-autocomplete-option-selected': instance.isSelected(option),
-        'p-focus': instance.focusedOptionIndex === instance.getOptionIndex(i, getItemOptions),
+        'p-focus': instance.focusedOptionIndex() === instance.getOptionIndex(i, scrollerOptions),
         'p-disabled': instance.isOptionDisabled(option)
     }),
-    emptyMessage: 'p-autocomplete-empty-message'
+    emptyMessage: 'p-autocomplete-empty-message',
+    clearIcon: 'p-autocomplete-clear-icon'
 };
 class AutoCompleteStyle extends BaseStyle {
     name = 'autocomplete';
     theme = theme;
     classes = classes;
     inlineStyles = inlineStyles;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AutoCompleteStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AutoCompleteStyle });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: AutoCompleteStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: AutoCompleteStyle });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AutoCompleteStyle, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: AutoCompleteStyle, decorators: [{
             type: Injectable
         }] });
 /**
@@ -385,7 +129,7 @@ var AutoCompleteClasses;
     /**
      * Class name of the input element
      */
-    AutoCompleteClasses["pcInput"] = "p-autocomplete-input";
+    AutoCompleteClasses["pcInputText"] = "p-autocomplete-input";
     /**
      * Class name of the input multiple element
      */
@@ -434,6 +178,10 @@ var AutoCompleteClasses;
      * Class name of the empty message element
      */
     AutoCompleteClasses["emptyMessage"] = "p-autocomplete-empty-message";
+    /**
+     * Class name of the clear icon
+     */
+    AutoCompleteClasses["clearIcon"] = "p-autocomplete-clear-icon";
 })(AutoCompleteClasses || (AutoCompleteClasses = {}));
 
 const AUTOCOMPLETE_VALUE_ACCESSOR = {
@@ -445,24 +193,25 @@ const AUTOCOMPLETE_VALUE_ACCESSOR = {
  * AutoComplete is an input component that provides real-time suggestions when being typed.
  * @group Components
  */
-class AutoComplete extends BaseComponent {
+class AutoComplete extends BaseInput {
     overlayService;
     zone;
     /**
      * Minimum number of characters to initiate a search.
+     * @deprecated since v20.0.0, use `minQueryLength` instead.
      * @group Props
      */
     minLength = 1;
     /**
-     * Delay between keystrokes to wait before sending a query.
+     * Minimum number of characters to initiate a search.
      * @group Props
      */
-    delay = 300;
+    minQueryLength;
     /**
-     * Inline style of the component.
+     * Delay between keystrokes to wait before sending a query.
      * @group Props
      */
-    style;
+    delay = 300;
     /**
      * Inline style of the overlay panel element.
      * @group Props
@@ -470,6 +219,7 @@ class AutoComplete extends BaseComponent {
     panelStyle;
     /**
      * Style class of the component.
+     * @deprecated since v20.0.0, use `class` instead.
      * @group Props
      */
     styleClass;
@@ -503,11 +253,6 @@ class AutoComplete extends BaseComponent {
      * @group Props
      */
     readonly;
-    /**
-     * When present, it specifies that the component should be disabled.
-     * @group Props
-     */
-    disabled;
     /**
      * Maximum height of the suggestions panel.
      * @group Props
@@ -533,31 +278,6 @@ class AutoComplete extends BaseComponent {
      * @group Props
      */
     virtualScrollOptions;
-    /**
-     * Maximum number of character allows in the input field.
-     * @group Props
-     */
-    maxlength;
-    /**
-     * Name of the input element.
-     * @group Props
-     */
-    name;
-    /**
-     * When present, it specifies that an input field must be filled out before submitting the form.
-     * @group Props
-     */
-    required;
-    /**
-     * Defines the size of the component.
-     * @group Props
-     */
-    size;
-    /**
-     * Target element to attach the overlay, valid values are "body" or a local ng-template variable of another element (note: use binding with brackets for template variables, e.g. [appendTo]="mydiv" for a div element having #mydiv as variable name).
-     * @group Props
-     */
-    appendTo;
     /**
      * When enabled, highlights the first item in the list by default.
      * @group Props
@@ -623,12 +343,6 @@ class AutoComplete extends BaseComponent {
      * @group Props
      */
     showClear = false;
-    /**
-     * Field of a suggested object to resolve and display.
-     * @group Props
-     * @deprecated use optionLabel property instead
-     */
-    field;
     /**
      * Displays a button next to the input field when enabled.
      * @group Props
@@ -710,18 +424,6 @@ class AutoComplete extends BaseComponent {
         this._suggestions.set(value);
         this.handleSuggestionsChange();
     }
-    /**
-     * Element dimensions of option for virtual scrolling.
-     * @group Props
-     * @deprecated use virtualScrollItemSize property instead.
-     */
-    get itemSize() {
-        return this._itemSize;
-    }
-    set itemSize(val) {
-        this._itemSize = val;
-        console.log('The itemSize property is deprecated, use virtualScrollItemSize property instead.');
-    }
     /**
      * Property name or getter function to use as the label of an option.
      * @group Props
@@ -787,15 +489,11 @@ class AutoComplete extends BaseComponent {
      */
     typeahead = true;
     /**
-     * Specifies the input variant of the component.
-     * @group Props
-     */
-    variant;
-    /**
-     * Spans 100% width of the container when enabled.
+     * Target element to attach the overlay, valid values are "body" or a local ng-template variable of another element (note: use binding with brackets for template variables, e.g. [appendTo]="mydiv" for a div element having #mydiv as variable name).
+     * @defaultValue 'self'
      * @group Props
      */
-    fluid = false;
+    appendTo = input(undefined);
     /**
      * Callback to invoke to search for suggestions.
      * @param {AutoCompleteCompleteEvent} event - Custom complete event.
@@ -862,7 +560,6 @@ class AutoComplete extends BaseComponent {
      * @group Emits
      */
     onLazyLoad = new EventEmitter();
-    containerEL;
     inputEL;
     multiInputEl;
     multiContainerEL;
@@ -870,7 +567,6 @@ class AutoComplete extends BaseComponent {
     itemsViewChild;
     scroller;
     overlayViewChild;
-    _itemSize;
     itemsWrapper;
     /**
      * Custom item template.
@@ -927,6 +623,9 @@ class AutoComplete extends BaseComponent {
      * @group Templates
      */
     dropdownIconTemplate;
+    onHostClick(event) {
+        this.onContainerClick(event);
+    }
     primeng = inject(PrimeNG);
     value;
     _suggestions = signal(null);
@@ -938,13 +637,6 @@ class AutoComplete extends BaseComponent {
     highlightOption;
     highlightOptionChanged;
     focused = false;
-    _filled;
-    get filled() {
-        return this._filled;
-    }
-    set filled(value) {
-        this._filled = value;
-    }
     loading;
     scrollHandler;
     listId;
@@ -961,10 +653,10 @@ class AutoComplete extends BaseComponent {
     _loadingIconTemplate;
     _clearIconTemplate;
     _dropdownIconTemplate;
-    modelValue = signal(null);
     focusedMultipleOptionIndex = signal(-1);
     focusedOptionIndex = signal(-1);
     _componentStyle = inject(AutoCompleteStyle);
+    $appendTo = computed(() => this.appendTo() || this.config.overlayAppendTo());
     visibleOptions = computed(() => {
         return this.group ? this.flatOptions(this._suggestions()) : this._suggestions() || [];
     });
@@ -990,25 +682,6 @@ class AutoComplete extends BaseComponent {
     get focusedOptionId() {
         return this.focusedOptionIndex() !== -1 ? `${this.id}_${this.focusedOptionIndex()}` : null;
     }
-    get rootClass() {
-        return this._componentStyle.classes.root({ instance: this });
-    }
-    get inputMultipleClass() {
-        return this._componentStyle.classes.inputMultiple({ instance: this });
-    }
-    get panelClass() {
-        return {
-            'p-autocomplete-overlay p-component': true,
-            'p-input-filled': this.config.inputStyle() === 'filled' || this.config.inputVariant() === 'filled',
-            'p-ripple-disabled': this.config.ripple() === false
-        };
-    }
-    get inputClass() {
-        return {
-            'p-autocomplete-input': !this.multiple,
-            'p-autocomplete-dd-input': this.dropdown
-        };
-    }
     get searchResultMessageText() {
         return isNotEmpty(this.visibleOptions()) && this.overlayVisible ? this.searchMessageText.replaceAll('{0}', this.visibleOptions().length) : this.emptySearchMessageText;
     }
@@ -1025,7 +698,7 @@ class AutoComplete extends BaseComponent {
         return this.emptySelectionMessage || this.config.translation.emptySelectionMessage || '';
     }
     get selectedMessageText() {
-        return this.hasSelectedOption() ? this.selectionMessageText.replaceAll('{0}', this.multiple ? this.modelValue().length : '1') : this.emptySelectionMessageText;
+        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;
@@ -1042,21 +715,10 @@ class AutoComplete extends BaseComponent {
     chipItemClass(index) {
         return this._componentStyle.classes.chipItem({ instance: this, i: index });
     }
-    optionClass(option, i, scrollerOptions) {
-        return {
-            'p-autocomplete-option': true,
-            'p-autocomplete-option-selected': this.isSelected(option),
-            'p-focus': this.focusedOptionIndex() === this.getOptionIndex(i, scrollerOptions),
-            'p-disabled': this.isOptionDisabled(option)
-        };
-    }
     constructor(overlayService, zone) {
         super();
         this.overlayService = overlayService;
         this.zone = zone;
-        effect(() => {
-            this.filled = isNotEmpty(this.modelValue());
-        });
     }
     ngOnInit() {
         super.ngOnInit();
@@ -1200,7 +862,7 @@ class AutoComplete extends BaseComponent {
         return this.dataKey; // TODO: The 'optionValue' properties can be added.
     }
     onContainerClick(event) {
-        if (this.disabled || this.loading || this.isInputClicked(event) || this.isDropdownClicked(event)) {
+        if (this.disabled() || this.loading || this.isInputClicked(event) || this.isDropdownClicked(event)) {
             return;
         }
         if (!this.overlayViewChild || !this.overlayViewChild.overlayViewChild?.nativeElement.contains(event.target)) {
@@ -1224,12 +886,13 @@ class AutoComplete extends BaseComponent {
     }
     onInput(event) {
         if (this.typeahead) {
+            const _minLength = this.minQueryLength || this.minLength;
             if (this.searchTimeout) {
                 clearTimeout(this.searchTimeout);
             }
             let query = event.target.value;
-            if (this.maxlength !== null) {
-                query = query.split('').slice(0, this.maxlength).join('');
+            if (this.maxlength() !== null) {
+                query = query.split('').slice(0, this.maxlength()).join('');
             }
             if (!this.multiple && !this.forceSelection) {
                 this.updateModel(query);
@@ -1241,7 +904,7 @@ class AutoComplete extends BaseComponent {
                 }, this.delay / 2);
             }
             else {
-                if (query.length >= this.minLength) {
+                if (query.length >= _minLength) {
                     this.focusedOptionIndex.set(-1);
                     this.searchTimeout = setTimeout(() => {
                         this.search(event, query, 'input');
@@ -1270,7 +933,7 @@ class AutoComplete extends BaseComponent {
         }
     }
     onInputFocus(event) {
-        if (this.disabled) {
+        if (this.disabled()) {
             // For ScreenReaders
             return;
         }
@@ -1285,7 +948,7 @@ class AutoComplete extends BaseComponent {
         this.onFocus.emit(event);
     }
     onMultipleContainerFocus(event) {
-        if (this.disabled) {
+        if (this.disabled()) {
             // For ScreenReaders
             return;
         }
@@ -1296,7 +959,7 @@ class AutoComplete extends BaseComponent {
         this.focused = false;
     }
     onMultipleContainerKeyDown(event) {
-        if (this.disabled) {
+        if (this.disabled()) {
             event.preventDefault();
             return;
         }
@@ -1328,7 +991,7 @@ class AutoComplete extends BaseComponent {
         this.onKeyUp.emit(event);
     }
     onKeyDown(event) {
-        if (this.disabled) {
+        if (this.disabled()) {
             event.preventDefault();
             return;
         }
@@ -1405,11 +1068,6 @@ class AutoComplete extends BaseComponent {
             event.stopPropagation();
         }
     }
-    get hasFluid() {
-        const nativeElement = this.el.nativeElement;
-        const fluidComponent = nativeElement.closest('p-fluid');
-        return this.fluid || !!fluidComponent;
-    }
     onArrowLeftKey(event) {
         const target = event.currentTarget;
         this.focusedOptionIndex.set(-1);
@@ -1550,7 +1208,7 @@ class AutoComplete extends BaseComponent {
     }
     updateModel(value) {
         this.value = value;
-        this.modelValue.set(value);
+        this.writeModelValue(value);
         this.onModelChange(value);
         this.updateInputValue();
         this.cd.markForCheck();
@@ -1627,7 +1285,7 @@ class AutoComplete extends BaseComponent {
     }
     writeValue(value) {
         this.value = value;
-        this.modelValue.set(value);
+        this.writeModelValue(value);
         this.updateInputValue();
         this.cd.markForCheck();
     }
@@ -1643,7 +1301,7 @@ class AutoComplete extends BaseComponent {
             : index) + 1);
     }
     getOptionLabel(option) {
-        return this.field || this.optionLabel ? resolveFieldData(option, this.field || this.optionLabel) : option && option.label != undefined ? option.label : option;
+        return this.optionLabel ? resolveFieldData(option, this.optionLabel) : option && option.label != undefined ? option.label : option;
     }
     getOptionValue(option) {
         return this.optionValue ? resolveFieldData(option, this.optionValue) : option && option.value != undefined ? option.value : option;
@@ -1663,10 +1321,6 @@ class AutoComplete extends BaseComponent {
     registerOnTouched(fn) {
         this.onModelTouched = fn;
     }
-    setDisabledState(val) {
-        this.disabled = val;
-        this.cd.markForCheck();
-    }
     onOverlayAnimationStart(event) {
         if (event.toState === 'visible') {
             this.itemsWrapper = findSingle(this.overlayViewChild.overlayViewChild?.nativeElement, this.virtualScroll ? '.p-scroller' : '.p-autocomplete-panel');
@@ -1697,480 +1351,497 @@ class AutoComplete extends BaseComponent {
         }
         super.ngOnDestroy();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AutoComplete, deps: [{ token: i1.OverlayService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.10", type: AutoComplete, isStandalone: true, selector: "p-autoComplete, p-autocomplete, p-auto-complete", inputs: { minLength: ["minLength", "minLength", numberAttribute], delay: ["delay", "delay", numberAttribute], style: "style", panelStyle: "panelStyle", styleClass: "styleClass", panelStyleClass: "panelStyleClass", inputStyle: "inputStyle", inputId: "inputId", inputStyleClass: "inputStyleClass", placeholder: "placeholder", readonly: ["readonly", "readonly", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], scrollHeight: "scrollHeight", lazy: ["lazy", "lazy", booleanAttribute], virtualScroll: ["virtualScroll", "virtualScroll", booleanAttribute], virtualScrollItemSize: ["virtualScrollItemSize", "virtualScrollItemSize", numberAttribute], virtualScrollOptions: "virtualScrollOptions", maxlength: ["maxlength", "maxlength", (value) => numberAttribute(value, null)], name: "name", required: ["required", "required", booleanAttribute], size: "size", appendTo: "appendTo", autoHighlight: ["autoHighlight", "autoHighlight", booleanAttribute], forceSelection: ["forceSelection", "forceSelection", booleanAttribute], type: "type", autoZIndex: ["autoZIndex", "autoZIndex", booleanAttribute], baseZIndex: ["baseZIndex", "baseZIndex", numberAttribute], ariaLabel: "ariaLabel", dropdownAriaLabel: "dropdownAriaLabel", ariaLabelledBy: "ariaLabelledBy", dropdownIcon: "dropdownIcon", unique: ["unique", "unique", booleanAttribute], group: ["group", "group", booleanAttribute], completeOnFocus: ["completeOnFocus", "completeOnFocus", booleanAttribute], showClear: ["showClear", "showClear", booleanAttribute], field: "field", dropdown: ["dropdown", "dropdown", booleanAttribute], showEmptyMessage: ["showEmptyMessage", "showEmptyMessage", booleanAttribute], dropdownMode: "dropdownMode", multiple: ["multiple", "multiple", booleanAttribute], tabindex: ["tabindex", "tabindex", numberAttribute], dataKey: "dataKey", emptyMessage: "emptyMessage", showTransitionOptions: "showTransitionOptions", hideTransitionOptions: "hideTransitionOptions", autofocus: ["autofocus", "autofocus", booleanAttribute], autocomplete: "autocomplete", optionGroupChildren: "optionGroupChildren", optionGroupLabel: "optionGroupLabel", overlayOptions: "overlayOptions", suggestions: "suggestions", itemSize: "itemSize", optionLabel: "optionLabel", optionValue: "optionValue", id: "id", searchMessage: "searchMessage", emptySelectionMessage: "emptySelectionMessage", selectionMessage: "selectionMessage", autoOptionFocus: ["autoOptionFocus", "autoOptionFocus", booleanAttribute], selectOnFocus: ["selectOnFocus", "selectOnFocus", booleanAttribute], searchLocale: ["searchLocale", "searchLocale", booleanAttribute], optionDisabled: "optionDisabled", focusOnHover: ["focusOnHover", "focusOnHover", booleanAttribute], typeahead: ["typeahead", "typeahead", booleanAttribute], variant: "variant", fluid: ["fluid", "fluid", booleanAttribute] }, outputs: { completeMethod: "completeMethod", onSelect: "onSelect", onUnselect: "onUnselect", onFocus: "onFocus", onBlur: "onBlur", onDropdownClick: "onDropdownClick", onClear: "onClear", onKeyUp: "onKeyUp", onShow: "onShow", onHide: "onHide", onLazyLoad: "onLazyLoad" }, providers: [AUTOCOMPLETE_VALUE_ACCESSOR, AutoCompleteStyle], queries: [{ propertyName: "itemTemplate", first: true, predicate: ["item"], descendants: true }, { propertyName: "emptyTemplate", first: true, predicate: ["empty"], descendants: true }, { propertyName: "headerTemplate", first: true, predicate: ["header"], descendants: true }, { propertyName: "footerTemplate", first: true, predicate: ["footer"], descendants: true }, { propertyName: "selectedItemTemplate", first: true, predicate: ["selecteditem"], descendants: true }, { propertyName: "groupTemplate", first: true, predicate: ["group"], descendants: true }, { propertyName: "loaderTemplate", first: true, predicate: ["loader"], descendants: true }, { propertyName: "removeIconTemplate", first: true, predicate: ["removeicon"], descendants: true }, { propertyName: "loadingIconTemplate", first: true, predicate: ["loadingicon"], descendants: true }, { propertyName: "clearIconTemplate", first: true, predicate: ["clearicon"], descendants: true }, { propertyName: "dropdownIconTemplate", first: true, predicate: ["dropdownicon"], descendants: true }, { propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "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 }], usesInheritance: true, ngImport: i0, template: `
-        <div #container [ngClass]="rootClass" [ngStyle]="style" style="position: relative;" [class]="styleClass" (click)="onContainerClick($event)">
-            <input
-                *ngIf="!multiple"
-                #focusInput
-                [pAutoFocus]="autofocus"
-                pInputText
-                [ngClass]="'p-autocomplete-input'"
-                [ngStyle]="inputStyle"
-                [class]="inputStyleClass"
-                [type]="type"
-                [attr.value]="inputValue()"
-                [variant]="variant"
-                [attr.id]="inputId"
-                [autocomplete]="autocomplete"
-                [required]="required"
-                [name]="name"
-                aria-autocomplete="list"
-                role="combobox"
-                [attr.placeholder]="placeholder"
-                [pSize]="size"
-                [attr.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 ?? false"
-                [attr.aria-controls]="overlayVisible ? id + '_list' : null"
-                [attr.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)"
-                [fluid]="hasFluid"
-            />
-            <ng-container *ngIf="filled && !disabled && showClear && !loading">
-                <TimesIcon *ngIf="!clearIconTemplate && !_clearIconTemplate" [styleClass]="'p-autocomplete-clear-icon'" (click)="clear()" [attr.aria-hidden]="true" />
-                <span *ngIf="clearIconTemplate || _clearIconTemplate" class="p-autocomplete-clear-icon" (click)="clear()" [attr.aria-hidden]="true">
-                    <ng-template *ngTemplateOutlet="clearIconTemplate || _clearIconTemplate"></ng-template>
-                </span>
-            </ng-container>
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: AutoComplete, deps: [{ token: i1.OverlayService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.6", type: AutoComplete, isStandalone: true, selector: "p-autoComplete, p-autocomplete, p-auto-complete", inputs: { minLength: { classPropertyName: "minLength", publicName: "minLength", isSignal: false, isRequired: false, transformFunction: numberAttribute }, minQueryLength: { classPropertyName: "minQueryLength", publicName: "minQueryLength", isSignal: false, isRequired: false, transformFunction: numberAttribute }, delay: { classPropertyName: "delay", publicName: "delay", isSignal: false, isRequired: false, transformFunction: numberAttribute }, panelStyle: { classPropertyName: "panelStyle", publicName: "panelStyle", isSignal: false, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: false, isRequired: false, transformFunction: null }, panelStyleClass: { classPropertyName: "panelStyleClass", publicName: "panelStyleClass", isSignal: false, isRequired: false, transformFunction: null }, inputStyle: { classPropertyName: "inputStyle", publicName: "inputStyle", isSignal: false, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: false, isRequired: false, transformFunction: null }, inputStyleClass: { classPropertyName: "inputStyleClass", publicName: "inputStyleClass", isSignal: false, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, scrollHeight: { classPropertyName: "scrollHeight", publicName: "scrollHeight", isSignal: false, isRequired: false, transformFunction: null }, lazy: { classPropertyName: "lazy", publicName: "lazy", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, virtualScroll: { classPropertyName: "virtualScroll", publicName: "virtualScroll", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, virtualScrollItemSize: { classPropertyName: "virtualScrollItemSize", publicName: "virtualScrollItemSize", isSignal: false, isRequired: false, transformFunction: numberAttribute }, virtualScrollOptions: { classPropertyName: "virtualScrollOptions", publicName: "virtualScrollOptions", isSignal: false, isRequired: false, transformFunction: null }, autoHighlight: { classPropertyName: "autoHighlight", publicName: "autoHighlight", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, forceSelection: { classPropertyName: "forceSelection", publicName: "forceSelection", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, type: { classPropertyName: "type", publicName: "type", isSignal: false, isRequired: false, transformFunction: null }, autoZIndex: { classPropertyName: "autoZIndex", publicName: "autoZIndex", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, baseZIndex: { classPropertyName: "baseZIndex", publicName: "baseZIndex", isSignal: false, isRequired: false, transformFunction: numberAttribute }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: false, isRequired: false, transformFunction: null }, dropdownAriaLabel: { classPropertyName: "dropdownAriaLabel", publicName: "dropdownAriaLabel", isSignal: false, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "ariaLabelledBy", isSignal: false, isRequired: false, transformFunction: null }, dropdownIcon: { classPropertyName: "dropdownIcon", publicName: "dropdownIcon", isSignal: false, isRequired: false, transformFunction: null }, unique: { classPropertyName: "unique", publicName: "unique", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, group: { classPropertyName: "group", publicName: "group", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, completeOnFocus: { classPropertyName: "completeOnFocus", publicName: "completeOnFocus", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, showClear: { classPropertyName: "showClear", publicName: "showClear", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, dropdown: { classPropertyName: "dropdown", publicName: "dropdown", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, showEmptyMessage: { classPropertyName: "showEmptyMessage", publicName: "showEmptyMessage", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, dropdownMode: { classPropertyName: "dropdownMode", publicName: "dropdownMode", isSignal: false, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, tabindex: { classPropertyName: "tabindex", publicName: "tabindex", isSignal: false, isRequired: false, transformFunction: numberAttribute }, dataKey: { classPropertyName: "dataKey", publicName: "dataKey", isSignal: false, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: false, isRequired: false, transformFunction: null }, showTransitionOptions: { classPropertyName: "showTransitionOptions", publicName: "showTransitionOptions", isSignal: false, isRequired: false, transformFunction: null }, hideTransitionOptions: { classPropertyName: "hideTransitionOptions", publicName: "hideTransitionOptions", isSignal: false, isRequired: false, transformFunction: null }, autofocus: { classPropertyName: "autofocus", publicName: "autofocus", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: false, isRequired: false, transformFunction: null }, optionGroupChildren: { classPropertyName: "optionGroupChildren", publicName: "optionGroupChildren", isSignal: false, isRequired: false, transformFunction: null }, optionGroupLabel: { classPropertyName: "optionGroupLabel", publicName: "optionGroupLabel", isSignal: false, isRequired: false, transformFunction: null }, overlayOptions: { classPropertyName: "overlayOptions", publicName: "overlayOptions", isSignal: false, isRequired: false, transformFunction: null }, suggestions: { classPropertyName: "suggestions", publicName: "suggestions", isSignal: false, isRequired: false, transformFunction: null }, optionLabel: { classPropertyName: "optionLabel", publicName: "optionLabel", isSignal: false, isRequired: false, transformFunction: null }, optionValue: { classPropertyName: "optionValue", publicName: "optionValue", isSignal: false, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: false, isRequired: false, transformFunction: null }, searchMessage: { classPropertyName: "searchMessage", publicName: "searchMessage", isSignal: false, isRequired: false, transformFunction: null }, emptySelectionMessage: { classPropertyName: "emptySelectionMessage", publicName: "emptySelectionMessage", isSignal: false, isRequired: false, transformFunction: null }, selectionMessage: { classPropertyName: "selectionMessage", publicName: "selectionMessage", isSignal: false, isRequired: false, transformFunction: null }, autoOptionFocus: { classPropertyName: "autoOptionFocus", publicName: "autoOptionFocus", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, selectOnFocus: { classPropertyName: "selectOnFocus", publicName: "selectOnFocus", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, searchLocale: { classPropertyName: "searchLocale", publicName: "searchLocale", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, optionDisabled: { classPropertyName: "optionDisabled", publicName: "optionDisabled", isSignal: false, isRequired: false, transformFunction: null }, focusOnHover: { classPropertyName: "focusOnHover", publicName: "focusOnHover", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, typeahead: { classPropertyName: "typeahead", publicName: "typeahead", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, appendTo: { classPropertyName: "appendTo", publicName: "appendTo", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { completeMethod: "completeMethod", onSelect: "onSelect", onUnselect: "onUnselect", onFocus: "onFocus", onBlur: "onBlur", onDropdownClick: "onDropdownClick", onClear: "onClear", onKeyUp: "onKeyUp", onShow: "onShow", onHide: "onHide", onLazyLoad: "onLazyLoad" }, host: { listeners: { "click": "onHostClick($event)" }, properties: { "class": "cn(cx('root'), styleClass)", "style": "sx('root')" } }, providers: [AUTOCOMPLETE_VALUE_ACCESSOR, AutoCompleteStyle], queries: [{ propertyName: "itemTemplate", first: true, predicate: ["item"], descendants: true }, { propertyName: "emptyTemplate", first: true, predicate: ["empty"], descendants: true }, { propertyName: "headerTemplate", first: true, predicate: ["header"], descendants: true }, { propertyName: "footerTemplate", first: true, predicate: ["footer"], descendants: true }, { propertyName: "selectedItemTemplate", first: true, predicate: ["selecteditem"], descendants: true }, { propertyName: "groupTemplate", first: true, predicate: ["group"], descendants: true }, { propertyName: "loaderTemplate", first: true, predicate: ["loader"], descendants: true }, { propertyName: "removeIconTemplate", first: true, predicate: ["removeicon"], descendants: true }, { propertyName: "loadingIconTemplate", first: true, predicate: ["loadingicon"], descendants: true }, { propertyName: "clearIconTemplate", first: true, predicate: ["clearicon"], descendants: true }, { propertyName: "dropdownIconTemplate", first: true, predicate: ["dropdownicon"], descendants: true }, { propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "inputEL", first: true, predicate: ["focusInput"], descendants: true }, { propertyName: "multiInputEl", first: true, predicate: ["multiIn"], descendants: true }, { propertyName: "multiContainerEL", first: true, predicate: ["multiContainer"], descendants: true }, { propertyName: "dropdownButton", first: true, predicate: ["ddBtn"], descendants: true }, { propertyName: "itemsViewChild", first: true, predicate: ["items"], descendants: true }, { propertyName: "scroller", first: true, predicate: ["scroller"], descendants: true }, { propertyName: "overlayViewChild", first: true, predicate: ["overlay"], descendants: true }], usesInheritance: true, ngImport: i0, template: `
+        <input
+            *ngIf="!multiple"
+            #focusInput
+            [pAutoFocus]="autofocus"
+            pInputText
+            [class]="cn(cx('pcInputText'), inputStyleClass)"
+            [ngStyle]="inputStyle"
+            [attr.type]="type"
+            [attr.value]="inputValue()"
+            [variant]="$variant()"
+            [invalid]="invalid()"
+            [attr.id]="inputId"
+            [attr.autocomplete]="autocomplete"
+            aria-autocomplete="list"
+            role="combobox"
+            [attr.placeholder]="placeholder"
+            [attr.name]="name()"
+            [attr.minlength]="minlength()"
+            [pSize]="size()"
+            [attr.min]="min()"
+            [attr.max]="max()"
+            [attr.pattern]="pattern()"
+            [attr.size]="inputSize()"
+            [attr.maxlength]="maxlength()"
+            [attr.tabindex]="!disabled() ? tabindex : -1"
+            [attr.required]="required() ? '' : undefined"
+            [attr.readonly]="readonly ? '' : undefined"
+            [attr.disabled]="disabled() ? '' : undefined"
+            [attr.aria-label]="ariaLabel"
+            [attr.aria-labelledby]="ariaLabelledBy"
+            [attr.aria-required]="required()"
+            [attr.aria-expanded]="overlayVisible ?? false"
+            [attr.aria-controls]="overlayVisible ? id + '_list' : null"
+            [attr.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)"
+            [fluid]="hasFluid"
+        />
+        <ng-container *ngIf="$filled() && !disabled() && showClear && !loading">
+            <TimesIcon *ngIf="!clearIconTemplate && !_clearIconTemplate" [styleClass]="cx('clearIcon')" (click)="clear()" [attr.aria-hidden]="true" />
+            <span *ngIf="clearIconTemplate || _clearIconTemplate" [class]="cx('clearIcon')" (click)="clear()" [attr.aria-hidden]="true">
+                <ng-template *ngTemplateOutlet="clearIconTemplate || _clearIconTemplate"></ng-template>
+            </span>
+        </ng-container>
 
-            <ul
-                *ngIf="multiple"
-                #multiContainer
-                [ngClass]="inputMultipleClass"
-                [tabindex]="-1"
-                role="listbox"
-                [attr.aria-orientation]="'horizontal'"
-                [attr.aria-activedescendant]="focused ? focusedMultipleOptionId : undefined"
-                (focus)="onMultipleContainerFocus($event)"
-                (blur)="onMultipleContainerBlur($event)"
-                (keydown)="onMultipleContainerKeyDown($event)"
+        <ul
+            *ngIf="multiple"
+            #multiContainer
+            [class]="cx('inputMultiple')"
+            [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"
+                [class]="cx('chipItem', { 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"
             >
-                <li
-                    #token
-                    *ngFor="let option of modelValue(); let i = index"
-                    [ngClass]="{ 'p-autocomplete-chip-item': 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"
-                >
+                <p-chip [class]="cx('pcChip')" [label]="!selectedItemTemplate && !_selectedItemTemplate && getOptionLabel(option)" [removable]="true" (onRemove)="!readonly ? removeOption($event, i) : ''">
                     <ng-container *ngTemplateOutlet="selectedItemTemplate || _selectedItemTemplate; context: { $implicit: option }"></ng-container>
-                    <p-chip styleClass="p-autocomplete-chip" *ngIf="!selectedItemTemplate && !_selectedItemTemplate" [label]="getOptionLabel(option)" [removable]="true" (onRemove)="!readonly ? removeOption($event, i) : ''">
-                        <ng-container *ngIf="!removeIconTemplate && !_removeIconTemplate">
-                            <ng-template #removeicon>
-                                <span class="p-autocomplete-chip-icon" (click)="!readonly ? removeOption($event, i) : ''">
-                                    <TimesCircleIcon [styleClass]="'p-autocomplete-chip-icon'" [attr.aria-hidden]="true" />
-                                </span>
-                            </ng-template>
-                        </ng-container>
-                    </p-chip>
-                    <span *ngIf="removeIconTemplate || _removeIconTemplate">
-                        <ng-template *ngTemplateOutlet="removeIconTemplate || _removeIconTemplate; context: { class: 'p-autocomplete-chip-icon', removeCallback: removeOption.bind(this), index: i }"></ng-template>
-                    </span>
-                </li>
-                <li class="p-autocomplete-input-chip" role="option">
-                    <input
-                        #focusInput
-                        [pAutoFocus]="autofocus"
-                        [ngClass]="inputClass"
-                        [ngStyle]="inputStyle"
-                        [class]="inputStyleClass"
-                        [attr.type]="type"
-                        [attr.id]="inputId"
-                        [autocomplete]="autocomplete"
-                        [required]="required"
-                        [attr.name]="name"
-                        role="combobox"
-                        [attr.placeholder]="!filled ? placeholder : null"
-                        aria-autocomplete="list"
-                        [attr.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 ?? false"
-                        [attr.aria-controls]="overlayVisible ? id + '_list' : null"
-                        [attr.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 && !_loadingIconTemplate" [styleClass]="'p-autocomplete-loader'" [spin]="true" [attr.aria-hidden]="true" />
-                <span *ngIf="loadingIconTemplate || _loadingIconTemplate" class="p-autocomplete-loader pi-spin " [attr.aria-hidden]="true">
-                    <ng-template *ngTemplateOutlet="loadingIconTemplate || _loadingIconTemplate"></ng-template>
-                </span>
+                    <ng-template #removeicon>
+                        <span *ngIf="!removeIconTemplate && !_removeIconTemplate" [class]="cx('chipIcon')" (click)="!readonly ? removeOption($event, i) : ''">
+                            <TimesCircleIcon [styleClass]="cx('chipIcon')" [attr.aria-hidden]="true" />
+                        </span>
+                        <span *ngIf="removeIconTemplate || _removeIconTemplate" [attr.aria-hidden]="true">
+                            <ng-template *ngTemplateOutlet="removeIconTemplate || _removeIconTemplate; context: { removeCallback: removeOption.bind(this), index: i, class: cx('chipIcon') }"></ng-template>
+                        </span>
+                    </ng-template>
+                </p-chip>
+            </li>
+            <li [class]="cx('inputChip')" role="option">
+                <input
+                    #focusInput
+                    [pAutoFocus]="autofocus"
+                    [class]="cx('pcInputText')"
+                    [ngStyle]="inputStyle"
+                    [attr.type]="type"
+                    [attr.id]="inputId"
+                    [attr.autocomplete]="autocomplete"
+                    [attr.name]="name()"
+                    [attr.minlength]="minlength()"
+                    [attr.maxlength]="maxlength()"
+                    [attr.size]="size()"
+                    [attr.min]="min()"
+                    [attr.max]="max()"
+                    [attr.pattern]="pattern()"
+                    role="combobox"
+                    [attr.placeholder]="!$filled() ? placeholder : null"
+                    aria-autocomplete="list"
+                    [attr.tabindex]="!disabled() ? tabindex : -1"
+                    [attr.required]="required() ? '' : undefined"
+                    [attr.readonly]="readonly ? '' : undefined"
+                    [attr.disabled]="disabled() ? '' : undefined"
+                    [attr.aria-label]="ariaLabel"
+                    [attr.aria-labelledby]="ariaLabelledBy"
+                    [attr.aria-required]="required()"
+                    [attr.aria-expanded]="overlayVisible ?? false"
+                    [attr.aria-controls]="overlayVisible ? id + '_list' : null"
+                    [attr.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 && !_loadingIconTemplate" [styleClass]="cx('loader')" [spin]="true" [attr.aria-hidden]="true" />
+            <span *ngIf="loadingIconTemplate || _loadingIconTemplate" [class]="cx('loader')" [attr.aria-hidden]="true">
+                <ng-template *ngTemplateOutlet="loadingIconTemplate || _loadingIconTemplate"></ng-template>
+            </span>
+        </ng-container>
+        <button #ddBtn type="button" [attr.aria-label]="dropdownAriaLabel" [class]="cx('dropdown')" [disabled]="disabled()" pRipple (click)="handleDropdownClick($event)" *ngIf="dropdown" [attr.tabindex]="tabindex">
+            <span *ngIf="dropdownIcon" [ngClass]="dropdownIcon" [attr.aria-hidden]="true"></span>
+            <ng-container *ngIf="!dropdownIcon">
+                <ChevronDownIcon *ngIf="!dropdownIconTemplate && !_dropdownIconTemplate" />
+                <ng-template *ngTemplateOutlet="dropdownIconTemplate || _dropdownIconTemplate"></ng-template>
             </ng-container>
-            <button #ddBtn type="button" [attr.aria-label]="dropdownAriaLabel" class="p-autocomplete-dropdown" [disabled]="disabled" pRipple (click)="handleDropdownClick($event)" *ngIf="dropdown" [attr.tabindex]="tabindex">
-                <span *ngIf="dropdownIcon" [ngClass]="dropdownIcon" [attr.aria-hidden]="true"></span>
-                <ng-container *ngIf="!dropdownIcon">
-                    <ChevronDownIcon *ngIf="!dropdownIconTemplate && !_dropdownIconTemplate" />
-                    <ng-template *ngTemplateOutlet="dropdownIconTemplate || _dropdownIconTemplate"></ng-template>
-                </ng-container>
-            </button>
-            <p-overlay
-                #overlay
-                [(visible)]="overlayVisible"
-                [options]="overlayOptions"
-                [target]="'@parent'"
-                [appendTo]="appendTo"
-                [showTransitionOptions]="showTransitionOptions"
-                [hideTransitionOptions]="hideTransitionOptions"
-                (onAnimationStart)="onOverlayAnimationStart($event)"
-                (onHide)="hide()"
-            >
-                <ng-template #content>
-                    <div [ngClass]="panelClass" [ngStyle]="panelStyle" [class]="panelStyleClass">
-                        <ng-container *ngTemplateOutlet="headerTemplate || _headerTemplate"></ng-container>
-                        <div class="p-autocomplete-list-container" [style.max-height]="virtualScroll ? 'auto' : scrollHeight">
-                            <p-scroller
-                                *ngIf="virtualScroll"
-                                #scroller
-                                [items]="visibleOptions()"
-                                [style]="{ height: scrollHeight }"
-                                [itemSize]="virtualScrollItemSize || _itemSize"
-                                [autoSize]="true"
-                                [lazy]="lazy"
-                                (onLazyLoad)="onLazyLoad.emit($event)"
-                                [options]="virtualScrollOptions"
-                            >
-                                <ng-template #content let-items let-scrollerOptions="options">
-                                    <ng-container *ngTemplateOutlet="buildInItems; context: { $implicit: items, options: scrollerOptions }"></ng-container>
+        </button>
+        <p-overlay
+            #overlay
+            [hostAttrSelector]="attrSelector"
+            [(visible)]="overlayVisible"
+            [options]="overlayOptions"
+            [target]="'@parent'"
+            [appendTo]="$appendTo()"
+            [showTransitionOptions]="showTransitionOptions"
+            [hideTransitionOptions]="hideTransitionOptions"
+            (onAnimationStart)="onOverlayAnimationStart($event)"
+            (onHide)="hide()"
+        >
+            <ng-template #content>
+                <div [class]="cn(cx('overlay'), panelStyleClass)" [ngStyle]="panelStyle">
+                    <ng-container *ngTemplateOutlet="headerTemplate || _headerTemplate"></ng-container>
+                    <div [class]="cx('listContainer')" [style.max-height]="virtualScroll ? 'auto' : scrollHeight">
+                        <p-scroller
+                            *ngIf="virtualScroll"
+                            #scroller
+                            [items]="visibleOptions()"
+                            [style]="{ height: scrollHeight }"
+                            [itemSize]="virtualScrollItemSize"
+                            [autoSize]="true"
+                            [lazy]="lazy"
+                            (onLazyLoad)="onLazyLoad.emit($event)"
+                            [options]="virtualScrollOptions"
+                        >
+                            <ng-template #content let-items let-scrollerOptions="options">
+                                <ng-container *ngTemplateOutlet="buildInItems; context: { $implicit: items, options: scrollerOptions }"></ng-container>
+                            </ng-template>
+                            <ng-container *ngIf="loaderTemplate || _loaderTemplate">
+                                <ng-template #loader let-scrollerOptions="options">
+                                    <ng-container *ngTemplateOutlet="loaderTemplate || _loaderTemplate; context: { options: scrollerOptions }"></ng-container>
                                 </ng-template>
-                                <ng-container *ngIf="loaderTemplate || _loaderTemplate">
-                                    <ng-template #loader let-scrollerOptions="options">
-                                        <ng-container *ngTemplateOutlet="loaderTemplate || _loaderTemplate; context: { options: scrollerOptions }"></ng-container>
-                                    </ng-template>
-                                </ng-container>
-                            </p-scroller>
-                            <ng-container *ngIf="!virtualScroll">
-                                <ng-container *ngTemplateOutlet="buildInItems; context: { $implicit: visibleOptions(), options: {} }"></ng-container>
                             </ng-container>
-                        </div>
-
-                        <ng-template #buildInItems let-items let-scrollerOptions="options">
-                            <ul #items class="p-autocomplete-list" [ngClass]="scrollerOptions.contentStyleClass" [style]="scrollerOptions.contentStyle" role="listbox" [attr.id]="id + '_list'" [attr.aria-label]="listLabel">
-                                <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-option-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
-                                            pRipple
-                                            [ngStyle]="{ height: scrollerOptions.itemSize + 'px' }"
-                                            [ngClass]="optionClass(option, i, scrollerOptions)"
-                                            [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 && !_itemTemplate">{{ getOptionLabel(option) }}</span>
-                                            <ng-container
-                                                *ngTemplateOutlet="
-                                                    itemTemplate || _itemTemplate;
-                                                    context: {
-                                                        $implicit: option,
-                                                        index: scrollerOptions.getOptions ? scrollerOptions.getOptions(i) : i
-                                                    }
-                                                "
-                                            ></ng-container>
-                                        </li>
-                                    </ng-container>
-                                </ng-template>
-                                <li *ngIf="!items || (items && items.length === 0 && showEmptyMessage)" class="p-autocomplete-empty-message" [ngStyle]="{ height: scrollerOptions.itemSize + 'px' }" role="option">
-                                    <ng-container *ngIf="!emptyTemplate && !_emptyTemplate; else empty">
-                                        {{ searchResultMessageText }}
-                                    </ng-container>
-                                    <ng-container #empty *ngTemplateOutlet="emptyTemplate || _emptyTemplate"></ng-container>
-                                </li>
-                            </ul>
-                        </ng-template>
-                        <ng-container *ngTemplateOutlet="footerTemplate || _footerTemplate"></ng-container>
+                        </p-scroller>
+                        <ng-container *ngIf="!virtualScroll">
+                            <ng-container *ngTemplateOutlet="buildInItems; context: { $implicit: visibleOptions(), options: {} }"></ng-container>
+                        </ng-container>
                     </div>
-                    <span role="status" aria-live="polite" class="p-hidden-accessible">
-                        {{ selectedMessageText }}
-                    </span>
-                </ng-template>
-            </p-overlay>
-        </div>
-    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: Overlay, selector: "p-overlay", inputs: ["visible", "mode", "style", "styleClass", "contentStyle", "contentStyleClass", "target", "appendTo", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "listener", "responsive", "options"], outputs: ["visibleChange", "onBeforeShow", "onShow", "onBeforeHide", "onHide", "onAnimationStart", "onAnimationDone"] }, { kind: "directive", type: InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }, { kind: "directive", type: Ripple, selector: "[pRipple]" }, { kind: "component", type: Scroller, selector: "p-scroller, p-virtualscroller, p-virtual-scroller, p-virtualScroller", inputs: ["id", "style", "styleClass", "tabindex", "items", "itemSize", "scrollHeight", "scrollWidth", "orientation", "step", "delay", "resizeDelay", "appendOnly", "inline", "lazy", "disabled", "loaderDisabled", "columns", "showSpacer", "showLoader", "numToleratedItems", "loading", "autoSize", "trackBy", "options"], outputs: ["onLazyLoad", "onScroll", "onScrollIndexChange"] }, { kind: "directive", type: AutoFocus, selector: "[pAutoFocus]", inputs: ["autofocus", "pAutoFocus"] }, { kind: "component", type: TimesCircleIcon, selector: "TimesCircleIcon" }, { kind: "component", type: SpinnerIcon, selector: "SpinnerIcon" }, { kind: "component", type: TimesIcon, selector: "TimesIcon" }, { kind: "component", type: ChevronDownIcon, selector: "ChevronDownIcon" }, { kind: "component", type: Chip, selector: "p-chip", inputs: ["label", "icon", "image", "alt", "style", "styleClass", "removable", "removeIcon", "chipProps"], outputs: ["onRemove", "onImageError"] }, { kind: "ngmodule", type: SharedModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+
+                    <ng-template #buildInItems let-items let-scrollerOptions="options">
+                        <ul #items [class]="cn(cx('list'), scrollerOptions.contentStyleClass)" [style]="scrollerOptions.contentStyle" role="listbox" [attr.id]="id + '_list'" [attr.aria-label]="listLabel">
+                            <ng-template ngFor let-option [ngForOf]="items" let-i="index">
+                                <ng-container *ngIf="isOptionGroup(option)">
+                                    <li [attr.id]="id + '_' + getOptionIndex(i, scrollerOptions)" [class]="cx('optionGroup')" [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
+                                        pRipple
+                                        [ngStyle]="{ height: scrollerOptions.itemSize + 'px' }"
+                                        [class]="cx('option', { option, i, scrollerOptions })"
+                                        [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 && !_itemTemplate">{{ getOptionLabel(option) }}</span>
+                                        <ng-container
+                                            *ngTemplateOutlet="
+                                                itemTemplate || _itemTemplate;
+                                                context: {
+                                                    $implicit: option,
+                                                    index: scrollerOptions.getOptions ? scrollerOptions.getOptions(i) : i
+                                                }
+                                            "
+                                        ></ng-container>
+                                    </li>
+                                </ng-container>
+                            </ng-template>
+                            <li *ngIf="!items || (items && items.length === 0 && showEmptyMessage)" [class]="cx('emptyMessage')" [ngStyle]="{ height: scrollerOptions.itemSize + 'px' }" role="option">
+                                <ng-container *ngIf="!emptyTemplate && !_emptyTemplate; else empty">
+                                    {{ searchResultMessageText }}
+                                </ng-container>
+                                <ng-container #empty *ngTemplateOutlet="emptyTemplate || _emptyTemplate"></ng-container>
+                            </li>
+                        </ul>
+                    </ng-template>
+                    <ng-container *ngTemplateOutlet="footerTemplate || _footerTemplate"></ng-container>
+                </div>
+                <span role="status" aria-live="polite" class="p-hidden-accessible">
+                    {{ selectedMessageText }}
+                </span>
+            </ng-template>
+        </p-overlay>
+    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: Overlay, selector: "p-overlay", inputs: ["visible", "mode", "style", "styleClass", "contentStyle", "contentStyleClass", "target", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "listener", "responsive", "options", "appendTo", "hostAttrSelector"], outputs: ["visibleChange", "onBeforeShow", "onShow", "onBeforeHide", "onHide", "onAnimationStart", "onAnimationDone"] }, { kind: "directive", type: InputText, selector: "[pInputText]", inputs: ["pSize", "variant", "fluid"] }, { kind: "directive", type: Ripple, selector: "[pRipple]" }, { kind: "component", type: Scroller, selector: "p-scroller, p-virtualscroller, p-virtual-scroller, p-virtualScroller", inputs: ["id", "style", "styleClass", "tabindex", "items", "itemSize", "scrollHeight", "scrollWidth", "orientation", "step", "delay", "resizeDelay", "appendOnly", "inline", "lazy", "disabled", "loaderDisabled", "columns", "showSpacer", "showLoader", "numToleratedItems", "loading", "autoSize", "trackBy", "options"], outputs: ["onLazyLoad", "onScroll", "onScrollIndexChange"] }, { kind: "directive", type: AutoFocus, selector: "[pAutoFocus]", inputs: ["pAutoFocus"] }, { kind: "component", type: TimesCircleIcon, selector: "TimesCircleIcon" }, { kind: "component", type: SpinnerIcon, selector: "SpinnerIcon" }, { kind: "component", type: TimesIcon, selector: "TimesIcon" }, { kind: "component", type: ChevronDownIcon, selector: "ChevronDownIcon" }, { kind: "component", type: Chip, selector: "p-chip", inputs: ["label", "icon", "image", "alt", "styleClass", "removable", "removeIcon", "chipProps"], outputs: ["onRemove", "onImageError"] }, { kind: "ngmodule", type: SharedModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AutoComplete, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: AutoComplete, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-autoComplete, p-autocomplete, p-auto-complete',
                     standalone: true,
                     imports: [CommonModule, Overlay, InputText, Ripple, Scroller, AutoFocus, TimesCircleIcon, SpinnerIcon, TimesIcon, ChevronDownIcon, Chip, SharedModule],
                     template: `
-        <div #container [ngClass]="rootClass" [ngStyle]="style" style="position: relative;" [class]="styleClass" (click)="onContainerClick($event)">
-            <input
-                *ngIf="!multiple"
-                #focusInput
-                [pAutoFocus]="autofocus"
-                pInputText
-                [ngClass]="'p-autocomplete-input'"
-                [ngStyle]="inputStyle"
-                [class]="inputStyleClass"
-                [type]="type"
-                [attr.value]="inputValue()"
-                [variant]="variant"
-                [attr.id]="inputId"
-                [autocomplete]="autocomplete"
-                [required]="required"
-                [name]="name"
-                aria-autocomplete="list"
-                role="combobox"
-                [attr.placeholder]="placeholder"
-                [pSize]="size"
-                [attr.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 ?? false"
-                [attr.aria-controls]="overlayVisible ? id + '_list' : null"
-                [attr.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)"
-                [fluid]="hasFluid"
-            />
-            <ng-container *ngIf="filled && !disabled && showClear && !loading">
-                <TimesIcon *ngIf="!clearIconTemplate && !_clearIconTemplate" [styleClass]="'p-autocomplete-clear-icon'" (click)="clear()" [attr.aria-hidden]="true" />
-                <span *ngIf="clearIconTemplate || _clearIconTemplate" class="p-autocomplete-clear-icon" (click)="clear()" [attr.aria-hidden]="true">
-                    <ng-template *ngTemplateOutlet="clearIconTemplate || _clearIconTemplate"></ng-template>
-                </span>
-            </ng-container>
+        <input
+            *ngIf="!multiple"
+            #focusInput
+            [pAutoFocus]="autofocus"
+            pInputText
+            [class]="cn(cx('pcInputText'), inputStyleClass)"
+            [ngStyle]="inputStyle"
+            [attr.type]="type"
+            [attr.value]="inputValue()"
+            [variant]="$variant()"
+            [invalid]="invalid()"
+            [attr.id]="inputId"
+            [attr.autocomplete]="autocomplete"
+            aria-autocomplete="list"
+            role="combobox"
+            [attr.placeholder]="placeholder"
+            [attr.name]="name()"
+            [attr.minlength]="minlength()"
+            [pSize]="size()"
+            [attr.min]="min()"
+            [attr.max]="max()"
+            [attr.pattern]="pattern()"
+            [attr.size]="inputSize()"
+            [attr.maxlength]="maxlength()"
+            [attr.tabindex]="!disabled() ? tabindex : -1"
+            [attr.required]="required() ? '' : undefined"
+            [attr.readonly]="readonly ? '' : undefined"
+            [attr.disabled]="disabled() ? '' : undefined"
+            [attr.aria-label]="ariaLabel"
+            [attr.aria-labelledby]="ariaLabelledBy"
+            [attr.aria-required]="required()"
+            [attr.aria-expanded]="overlayVisible ?? false"
+            [attr.aria-controls]="overlayVisible ? id + '_list' : null"
+            [attr.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)"
+            [fluid]="hasFluid"
+        />
+        <ng-container *ngIf="$filled() && !disabled() && showClear && !loading">
+            <TimesIcon *ngIf="!clearIconTemplate && !_clearIconTemplate" [styleClass]="cx('clearIcon')" (click)="clear()" [attr.aria-hidden]="true" />
+            <span *ngIf="clearIconTemplate || _clearIconTemplate" [class]="cx('clearIcon')" (click)="clear()" [attr.aria-hidden]="true">
+                <ng-template *ngTemplateOutlet="clearIconTemplate || _clearIconTemplate"></ng-template>
+            </span>
+        </ng-container>
 
-            <ul
-                *ngIf="multiple"
-                #multiContainer
-                [ngClass]="inputMultipleClass"
-                [tabindex]="-1"
-                role="listbox"
-                [attr.aria-orientation]="'horizontal'"
-                [attr.aria-activedescendant]="focused ? focusedMultipleOptionId : undefined"
-                (focus)="onMultipleContainerFocus($event)"
-                (blur)="onMultipleContainerBlur($event)"
-                (keydown)="onMultipleContainerKeyDown($event)"
+        <ul
+            *ngIf="multiple"
+            #multiContainer
+            [class]="cx('inputMultiple')"
+            [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"
+                [class]="cx('chipItem', { 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"
             >
-                <li
-                    #token
-                    *ngFor="let option of modelValue(); let i = index"
-                    [ngClass]="{ 'p-autocomplete-chip-item': 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"
-                >
+                <p-chip [class]="cx('pcChip')" [label]="!selectedItemTemplate && !_selectedItemTemplate && getOptionLabel(option)" [removable]="true" (onRemove)="!readonly ? removeOption($event, i) : ''">
                     <ng-container *ngTemplateOutlet="selectedItemTemplate || _selectedItemTemplate; context: { $implicit: option }"></ng-container>
-                    <p-chip styleClass="p-autocomplete-chip" *ngIf="!selectedItemTemplate && !_selectedItemTemplate" [label]="getOptionLabel(option)" [removable]="true" (onRemove)="!readonly ? removeOption($event, i) : ''">
-                        <ng-container *ngIf="!removeIconTemplate && !_removeIconTemplate">
-                            <ng-template #removeicon>
-                                <span class="p-autocomplete-chip-icon" (click)="!readonly ? removeOption($event, i) : ''">
-                                    <TimesCircleIcon [styleClass]="'p-autocomplete-chip-icon'" [attr.aria-hidden]="true" />
-                                </span>
-                            </ng-template>
-                        </ng-container>
-                    </p-chip>
-                    <span *ngIf="removeIconTemplate || _removeIconTemplate">
-                        <ng-template *ngTemplateOutlet="removeIconTemplate || _removeIconTemplate; context: { class: 'p-autocomplete-chip-icon', removeCallback: removeOption.bind(this), index: i }"></ng-template>
-                    </span>
-                </li>
-                <li class="p-autocomplete-input-chip" role="option">
-                    <input
-                        #focusInput
-                        [pAutoFocus]="autofocus"
-                        [ngClass]="inputClass"
-                        [ngStyle]="inputStyle"
-                        [class]="inputStyleClass"
-                        [attr.type]="type"
-                        [attr.id]="inputId"
-                        [autocomplete]="autocomplete"
-                        [required]="required"
-                        [attr.name]="name"
-                        role="combobox"
-                        [attr.placeholder]="!filled ? placeholder : null"
-                        aria-autocomplete="list"
-                        [attr.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 ?? false"
-                        [attr.aria-controls]="overlayVisible ? id + '_list' : null"
-                        [attr.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 && !_loadingIconTemplate" [styleClass]="'p-autocomplete-loader'" [spin]="true" [attr.aria-hidden]="true" />
-                <span *ngIf="loadingIconTemplate || _loadingIconTemplate" class="p-autocomplete-loader pi-spin " [attr.aria-hidden]="true">
-                    <ng-template *ngTemplateOutlet="loadingIconTemplate || _loadingIconTemplate"></ng-template>
-                </span>
+                    <ng-template #removeicon>
+                        <span *ngIf="!removeIconTemplate && !_removeIconTemplate" [class]="cx('chipIcon')" (click)="!readonly ? removeOption($event, i) : ''">
+                            <TimesCircleIcon [styleClass]="cx('chipIcon')" [attr.aria-hidden]="true" />
+                        </span>
+                        <span *ngIf="removeIconTemplate || _removeIconTemplate" [attr.aria-hidden]="true">
+                            <ng-template *ngTemplateOutlet="removeIconTemplate || _removeIconTemplate; context: { removeCallback: removeOption.bind(this), index: i, class: cx('chipIcon') }"></ng-template>
+                        </span>
+                    </ng-template>
+                </p-chip>
+            </li>
+            <li [class]="cx('inputChip')" role="option">
+                <input
+                    #focusInput
+                    [pAutoFocus]="autofocus"
+                    [class]="cx('pcInputText')"
+                    [ngStyle]="inputStyle"
+                    [attr.type]="type"
+                    [attr.id]="inputId"
+                    [attr.autocomplete]="autocomplete"
+                    [attr.name]="name()"
+                    [attr.minlength]="minlength()"
+                    [attr.maxlength]="maxlength()"
+                    [attr.size]="size()"
+                    [attr.min]="min()"
+                    [attr.max]="max()"
+                    [attr.pattern]="pattern()"
+                    role="combobox"
+                    [attr.placeholder]="!$filled() ? placeholder : null"
+                    aria-autocomplete="list"
+                    [attr.tabindex]="!disabled() ? tabindex : -1"
+                    [attr.required]="required() ? '' : undefined"
+                    [attr.readonly]="readonly ? '' : undefined"
+                    [attr.disabled]="disabled() ? '' : undefined"
+                    [attr.aria-label]="ariaLabel"
+                    [attr.aria-labelledby]="ariaLabelledBy"
+                    [attr.aria-required]="required()"
+                    [attr.aria-expanded]="overlayVisible ?? false"
+                    [attr.aria-controls]="overlayVisible ? id + '_list' : null"
+                    [attr.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 && !_loadingIconTemplate" [styleClass]="cx('loader')" [spin]="true" [attr.aria-hidden]="true" />
+            <span *ngIf="loadingIconTemplate || _loadingIconTemplate" [class]="cx('loader')" [attr.aria-hidden]="true">
+                <ng-template *ngTemplateOutlet="loadingIconTemplate || _loadingIconTemplate"></ng-template>
+            </span>
+        </ng-container>
+        <button #ddBtn type="button" [attr.aria-label]="dropdownAriaLabel" [class]="cx('dropdown')" [disabled]="disabled()" pRipple (click)="handleDropdownClick($event)" *ngIf="dropdown" [attr.tabindex]="tabindex">
+            <span *ngIf="dropdownIcon" [ngClass]="dropdownIcon" [attr.aria-hidden]="true"></span>
+            <ng-container *ngIf="!dropdownIcon">
+                <ChevronDownIcon *ngIf="!dropdownIconTemplate && !_dropdownIconTemplate" />
+                <ng-template *ngTemplateOutlet="dropdownIconTemplate || _dropdownIconTemplate"></ng-template>
             </ng-container>
-            <button #ddBtn type="button" [attr.aria-label]="dropdownAriaLabel" class="p-autocomplete-dropdown" [disabled]="disabled" pRipple (click)="handleDropdownClick($event)" *ngIf="dropdown" [attr.tabindex]="tabindex">
-                <span *ngIf="dropdownIcon" [ngClass]="dropdownIcon" [attr.aria-hidden]="true"></span>
-                <ng-container *ngIf="!dropdownIcon">
-                    <ChevronDownIcon *ngIf="!dropdownIconTemplate && !_dropdownIconTemplate" />
-                    <ng-template *ngTemplateOutlet="dropdownIconTemplate || _dropdownIconTemplate"></ng-template>
-                </ng-container>
-            </button>
-            <p-overlay
-                #overlay
-                [(visible)]="overlayVisible"
-                [options]="overlayOptions"
-                [target]="'@parent'"
-                [appendTo]="appendTo"
-                [showTransitionOptions]="showTransitionOptions"
-                [hideTransitionOptions]="hideTransitionOptions"
-                (onAnimationStart)="onOverlayAnimationStart($event)"
-                (onHide)="hide()"
-            >
-                <ng-template #content>
-                    <div [ngClass]="panelClass" [ngStyle]="panelStyle" [class]="panelStyleClass">
-                        <ng-container *ngTemplateOutlet="headerTemplate || _headerTemplate"></ng-container>
-                        <div class="p-autocomplete-list-container" [style.max-height]="virtualScroll ? 'auto' : scrollHeight">
-                            <p-scroller
-                                *ngIf="virtualScroll"
-                                #scroller
-                                [items]="visibleOptions()"
-                                [style]="{ height: scrollHeight }"
-                                [itemSize]="virtualScrollItemSize || _itemSize"
-                                [autoSize]="true"
-                                [lazy]="lazy"
-                                (onLazyLoad)="onLazyLoad.emit($event)"
-                                [options]="virtualScrollOptions"
-                            >
-                                <ng-template #content let-items let-scrollerOptions="options">
-                                    <ng-container *ngTemplateOutlet="buildInItems; context: { $implicit: items, options: scrollerOptions }"></ng-container>
+        </button>
+        <p-overlay
+            #overlay
+            [hostAttrSelector]="attrSelector"
+            [(visible)]="overlayVisible"
+            [options]="overlayOptions"
+            [target]="'@parent'"
+            [appendTo]="$appendTo()"
+            [showTransitionOptions]="showTransitionOptions"
+            [hideTransitionOptions]="hideTransitionOptions"
+            (onAnimationStart)="onOverlayAnimationStart($event)"
+            (onHide)="hide()"
+        >
+            <ng-template #content>
+                <div [class]="cn(cx('overlay'), panelStyleClass)" [ngStyle]="panelStyle">
+                    <ng-container *ngTemplateOutlet="headerTemplate || _headerTemplate"></ng-container>
+                    <div [class]="cx('listContainer')" [style.max-height]="virtualScroll ? 'auto' : scrollHeight">
+                        <p-scroller
+                            *ngIf="virtualScroll"
+                            #scroller
+                            [items]="visibleOptions()"
+                            [style]="{ height: scrollHeight }"
+                            [itemSize]="virtualScrollItemSize"
+                            [autoSize]="true"
+                            [lazy]="lazy"
+                            (onLazyLoad)="onLazyLoad.emit($event)"
+                            [options]="virtualScrollOptions"
+                        >
+                            <ng-template #content let-items let-scrollerOptions="options">
+                                <ng-container *ngTemplateOutlet="buildInItems; context: { $implicit: items, options: scrollerOptions }"></ng-container>
+                            </ng-template>
+                            <ng-container *ngIf="loaderTemplate || _loaderTemplate">
+                                <ng-template #loader let-scrollerOptions="options">
+                                    <ng-container *ngTemplateOutlet="loaderTemplate || _loaderTemplate; context: { options: scrollerOptions }"></ng-container>
                                 </ng-template>
-                                <ng-container *ngIf="loaderTemplate || _loaderTemplate">
-                                    <ng-template #loader let-scrollerOptions="options">
-                                        <ng-container *ngTemplateOutlet="loaderTemplate || _loaderTemplate; context: { options: scrollerOptions }"></ng-container>
-                                    </ng-template>
-                                </ng-container>
-                            </p-scroller>
-                            <ng-container *ngIf="!virtualScroll">
-                                <ng-container *ngTemplateOutlet="buildInItems; context: { $implicit: visibleOptions(), options: {} }"></ng-container>
                             </ng-container>
-                        </div>
-
-                        <ng-template #buildInItems let-items let-scrollerOptions="options">
-                            <ul #items class="p-autocomplete-list" [ngClass]="scrollerOptions.contentStyleClass" [style]="scrollerOptions.contentStyle" role="listbox" [attr.id]="id + '_list'" [attr.aria-label]="listLabel">
-                                <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-option-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
-                                            pRipple
-                                            [ngStyle]="{ height: scrollerOptions.itemSize + 'px' }"
-                                            [ngClass]="optionClass(option, i, scrollerOptions)"
-                                            [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 && !_itemTemplate">{{ getOptionLabel(option) }}</span>
-                                            <ng-container
-                                                *ngTemplateOutlet="
-                                                    itemTemplate || _itemTemplate;
-                                                    context: {
-                                                        $implicit: option,
-                                                        index: scrollerOptions.getOptions ? scrollerOptions.getOptions(i) : i
-                                                    }
-                                                "
-                                            ></ng-container>
-                                        </li>
-                                    </ng-container>
-                                </ng-template>
-                                <li *ngIf="!items || (items && items.length === 0 && showEmptyMessage)" class="p-autocomplete-empty-message" [ngStyle]="{ height: scrollerOptions.itemSize + 'px' }" role="option">
-                                    <ng-container *ngIf="!emptyTemplate && !_emptyTemplate; else empty">
-                                        {{ searchResultMessageText }}
-                                    </ng-container>
-                                    <ng-container #empty *ngTemplateOutlet="emptyTemplate || _emptyTemplate"></ng-container>
-                                </li>
-                            </ul>
-                        </ng-template>
-                        <ng-container *ngTemplateOutlet="footerTemplate || _footerTemplate"></ng-container>
+                        </p-scroller>
+                        <ng-container *ngIf="!virtualScroll">
+                            <ng-container *ngTemplateOutlet="buildInItems; context: { $implicit: visibleOptions(), options: {} }"></ng-container>
+                        </ng-container>
                     </div>
-                    <span role="status" aria-live="polite" class="p-hidden-accessible">
-                        {{ selectedMessageText }}
-                    </span>
-                </ng-template>
-            </p-overlay>
-        </div>
+
+                    <ng-template #buildInItems let-items let-scrollerOptions="options">
+                        <ul #items [class]="cn(cx('list'), scrollerOptions.contentStyleClass)" [style]="scrollerOptions.contentStyle" role="listbox" [attr.id]="id + '_list'" [attr.aria-label]="listLabel">
+                            <ng-template ngFor let-option [ngForOf]="items" let-i="index">
+                                <ng-container *ngIf="isOptionGroup(option)">
+                                    <li [attr.id]="id + '_' + getOptionIndex(i, scrollerOptions)" [class]="cx('optionGroup')" [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
+                                        pRipple
+                                        [ngStyle]="{ height: scrollerOptions.itemSize + 'px' }"
+                                        [class]="cx('option', { option, i, scrollerOptions })"
+                                        [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 && !_itemTemplate">{{ getOptionLabel(option) }}</span>
+                                        <ng-container
+                                            *ngTemplateOutlet="
+                                                itemTemplate || _itemTemplate;
+                                                context: {
+                                                    $implicit: option,
+                                                    index: scrollerOptions.getOptions ? scrollerOptions.getOptions(i) : i
+                                                }
+                                            "
+                                        ></ng-container>
+                                    </li>
+                                </ng-container>
+                            </ng-template>
+                            <li *ngIf="!items || (items && items.length === 0 && showEmptyMessage)" [class]="cx('emptyMessage')" [ngStyle]="{ height: scrollerOptions.itemSize + 'px' }" role="option">
+                                <ng-container *ngIf="!emptyTemplate && !_emptyTemplate; else empty">
+                                    {{ searchResultMessageText }}
+                                </ng-container>
+                                <ng-container #empty *ngTemplateOutlet="emptyTemplate || _emptyTemplate"></ng-container>
+                            </li>
+                        </ul>
+                    </ng-template>
+                    <ng-container *ngTemplateOutlet="footerTemplate || _footerTemplate"></ng-container>
+                </div>
+                <span role="status" aria-live="polite" class="p-hidden-accessible">
+                    {{ selectedMessageText }}
+                </span>
+            </ng-template>
+        </p-overlay>
     `,
                     providers: [AUTOCOMPLETE_VALUE_ACCESSOR, AutoCompleteStyle],
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    encapsulation: ViewEncapsulation.None
+                    encapsulation: ViewEncapsulation.None,
+                    host: {
+                        '[class]': "cn(cx('root'), styleClass)",
+                        '[style]': "sx('root')"
+                    }
                 }]
         }], ctorParameters: () => [{ type: i1.OverlayService }, { type: i0.NgZone }], propDecorators: { minLength: [{
                 type: Input,
                 args: [{ transform: numberAttribute }]
+            }], minQueryLength: [{
+                type: Input,
+                args: [{ transform: numberAttribute }]
             }], delay: [{
                 type: Input,
                 args: [{ transform: numberAttribute }]
-            }], style: [{
-                type: Input
             }], panelStyle: [{
                 type: Input
             }], styleClass: [{
@@ -2188,9 +1859,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
             }], readonly: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
-            }], disabled: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
             }], scrollHeight: [{
                 type: Input
             }], lazy: [{
@@ -2204,18 +1872,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                 args: [{ transform: numberAttribute }]
             }], virtualScrollOptions: [{
                 type: Input
-            }], maxlength: [{
-                type: Input,
-                args: [{ transform: (value) => numberAttribute(value, null) }]
-            }], name: [{
-                type: Input
-            }], required: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], size: [{
-                type: Input
-            }], appendTo: [{
-                type: Input
             }], autoHighlight: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
@@ -2250,8 +1906,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
             }], showClear: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
-            }], field: [{
-                type: Input
             }], dropdown: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
@@ -2287,8 +1941,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                 type: Input
             }], suggestions: [{
                 type: Input
-            }], itemSize: [{
-                type: Input
             }], optionLabel: [{
                 type: Input
             }], optionValue: [{
@@ -2318,11 +1970,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
             }], typeahead: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
-            }], variant: [{
-                type: Input
-            }], fluid: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
             }], completeMethod: [{
                 type: Output
             }], onSelect: [{
@@ -2345,9 +1992,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                 type: Output
             }], onLazyLoad: [{
                 type: Output
-            }], containerEL: [{
-                type: ViewChild,
-                args: ['container']
             }], inputEL: [{
                 type: ViewChild,
                 args: ['focusInput']
@@ -2402,16 +2046,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
             }], dropdownIconTemplate: [{
                 type: ContentChild,
                 args: ['dropdownicon']
+            }], onHostClick: [{
+                type: HostListener,
+                args: ['click', ['$event']]
             }], templates: [{
                 type: ContentChildren,
                 args: [PrimeTemplate]
             }] } });
 class AutoCompleteModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AutoCompleteModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.10", ngImport: i0, type: AutoCompleteModule, imports: [AutoComplete], exports: [AutoComplete, SharedModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AutoCompleteModule, imports: [AutoComplete, SharedModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: AutoCompleteModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.6", ngImport: i0, type: AutoCompleteModule, imports: [AutoComplete], exports: [AutoComplete, SharedModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: AutoCompleteModule, imports: [AutoComplete, SharedModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AutoCompleteModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: AutoCompleteModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [AutoComplete],