primeng 16.0.0-rc.1 → 16.0.0

package/fesm2022/primeng-autocomplete.mjs

@@ -2,7 +2,7 @@ import { trigger, transition, style, animate } from '@angular/animations';
 import * as i2 from '@angular/common';
 import { DOCUMENT, CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { forwardRef, EventEmitter, Component, ChangeDetectionStrategy, ViewEncapsulation, Inject, Input, ViewChild, ContentChildren, Output, NgModule } from '@angular/core';
+import { forwardRef, EventEmitter, Component, ChangeDetectionStrategy, ViewEncapsulation, Inject, Input, Output, ViewChild, ContentChildren, NgModule } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import * as i1 from 'primeng/api';
 import { TranslationKeys, PrimeTemplate, SharedModule } from 'primeng/api';
@@ -29,6 +29,10 @@ const AUTOCOMPLETE_VALUE_ACCESSOR = {
     useExisting: forwardRef(() => AutoComplete),
     multi: true
 };
+/**
+ * AutoComplete is an input component that provides real-time suggestions when being typed.
+ * @group Components
+ */
 class AutoComplete {
     document;
     el;
@@ -38,85 +42,355 @@ class AutoComplete {
     config;
     overlayService;
     zone;
+    /**
+     * Minimum number of characters to initiate a search.
+     * @group Props
+     */
     minLength = 1;
+    /**
+     * Delay between keystrokes to wait before sending a query.
+     * @group Props
+     */
     delay = 300;
+    /**
+     * Inline style of the component.
+     * @group Props
+     */
     style;
+    /**
+     * Inline style of the overlay panel element.
+     * @group Props
+     */
     panelStyle;
+    /**
+     * Style class of the component.
+     * @group Props
+     */
     styleClass;
+    /**
+     * Style class of the overlay panel element.
+     * @group Props
+     */
     panelStyleClass;
+    /**
+     * Inline style of the input field.
+     * @group Props
+     */
     inputStyle;
+    /**
+     * Identifier of the focus input to match a label defined for the component.
+     * @group Props
+     */
     inputId;
+    /**
+     * Inline style of the input field.
+     * @group Props
+     */
     inputStyleClass;
+    /**
+     * Hint text for the input field.
+     * @group Props
+     */
     placeholder;
+    /**
+     * When present, it specifies that the input cannot be typed.
+     * @group Props
+     */
     readonly;
+    /**
+     * When present, it specifies that the component should be disabled.
+     * @group Props
+     */
     disabled;
+    /**
+     * Maximum height of the suggestions panel.
+     * @group Props
+     */
     scrollHeight = '200px';
+    /**
+     * Defines if data is loaded and interacted with in lazy manner.
+     * @group Props
+     */
     lazy = false;
+    /**
+     * Whether the data should be loaded on demand during scroll.
+     * @group Props
+     */
     virtualScroll;
+    /**
+     * Height of an item in the list for VirtualScrolling.
+     * @group Props
+     */
     virtualScrollItemSize;
+    /**
+     * Whether to use the scroller feature. The properties of scroller component can be used like an object in it.
+     * @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;
+    /**
+     * Size of the input field.
+     * @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
+     */
     autoHighlight;
+    /**
+     * When present, autocomplete clears the manual input if it does not match of the suggestions to force only accepting values from the suggestions.
+     * @group Props
+     */
     forceSelection;
+    /**
+     * Type of the input, defaults to "text".
+     * @group Props
+     */
     type = 'text';
+    /**
+     * Whether to automatically manage layering.
+     * @group Props
+     */
     autoZIndex = true;
+    /**
+     * Base zIndex value to use in layering.
+     * @group Props
+     */
     baseZIndex = 0;
+    /**
+     * Defines a string that labels the input for accessibility.
+     * @group Props
+     */
     ariaLabel;
+    /**
+     * Defines a string that labels the dropdown button for accessibility.
+     * @group Props
+     */
     dropdownAriaLabel;
+    /**
+     * Specifies one or more IDs in the DOM that labels the input field.
+     * @group Props
+     */
     ariaLabelledBy;
+    /**
+     * Icon class of the dropdown icon.
+     * @group Props
+     */
     dropdownIcon;
+    /**
+     * Ensures uniqueness of selected items on multiple mode.
+     * @group Props
+     */
     unique = true;
+    /**
+     * Whether to display options as grouped when nested options are provided.
+     * @group Props
+     */
     group;
+    /**
+     * Whether to run a query when input receives focus.
+     * @group Props
+     */
     completeOnFocus = false;
+    /**
+     * When enabled, a clear icon is displayed to clear the value.
+     * @group Props
+     */
     showClear = false;
+    /**
+     * Field of a suggested object to resolve and display.
+     * @group Props
+     */
     field;
+    /**
+     * Displays a button next to the input field when enabled.
+     * @group Props
+     */
     dropdown;
+    /**
+     * Whether to show the empty message or not.
+     * @group Props
+     */
     showEmptyMessage;
+    /**
+     * Specifies the behavior dropdown button. Default "blank" mode sends an empty string and "current" mode sends the input value.
+     * @group Props
+     */
     dropdownMode = 'blank';
+    /**
+     * Specifies if multiple values can be selected.
+     * @group Props
+     */
     multiple;
+    /**
+     * Index of the element in tabbing order.
+     * @group Props
+     */
     tabindex;
+    /**
+     * A property to uniquely identify a value in options.
+     * @group Props
+     */
     dataKey;
+    /**
+     * Text to display when there is no data. Defaults to global value in i18n translation configuration.
+     * @group Props
+     */
     emptyMessage;
+    /**
+     * Transition options of the show animation.
+     * @group Props
+     */
     showTransitionOptions = '.12s cubic-bezier(0, 0, 0.2, 1)';
+    /**
+     * Transition options of the hide animation.
+     * @group Props
+     */
     hideTransitionOptions = '.1s linear';
+    /**
+     * When present, it specifies that the component should automatically get focus on load.
+     * @group Props
+     */
     autofocus;
+    /**
+     * Used to define a string that autocomplete attribute the current element.
+     * @group Props
+     */
     autocomplete = 'off';
+    /**
+     * Name of the options field of an option group.
+     * @group Props
+     */
     optionGroupChildren;
+    /**
+     * Name of the label field of an option group.
+     * @group Props
+     */
     optionGroupLabel;
+    /**
+     * Options for the overlay element.
+     * @group Props
+     */
     overlayOptions;
-    containerEL;
-    inputEL;
-    multiInputEL;
-    multiContainerEL;
-    dropdownButton;
-    itemsViewChild;
-    scroller;
-    overlayViewChild;
-    templates;
+    /**
+     * An array of suggestions to display.
+     * @group Props
+     */
+    get suggestions() {
+        return this._suggestions;
+    }
+    set suggestions(value) {
+        this._suggestions = 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.warn('The itemSize property is deprecated, use virtualScrollItemSize property instead.');
+    }
+    /**
+     * Callback to invoke to search for suggestions.
+     * @param {AutoCompleteCompleteEvent} event - Custom complete event.
+     * @group Emits
+     */
     completeMethod = new EventEmitter();
+    /**
+     * Callback to invoke when a suggestion is selected.
+     * @param {*} value - selected value.
+     * @group Emits
+     */
     onSelect = new EventEmitter();
+    /**
+     * Callback to invoke when a selected value is removed.
+     * @param {*} value - removed value.
+     * @group Emits
+     */
     onUnselect = new EventEmitter();
+    /**
+     * Callback to invoke when the component receives focus.
+     * @param {Event} event - Browser event.
+     * @group Emits
+     */
     onFocus = new EventEmitter();
+    /**
+     * Callback to invoke when the component loses focus.
+     * @param {Event} event - Browser event.
+     * @group Emits
+     */
     onBlur = new EventEmitter();
+    /**
+     * Callback to invoke to when dropdown button is clicked.
+     * @param {AutoCompleteDropdownClickEvent} event - custom dropdown click event.
+     * @group Emits
+     */
     onDropdownClick = new EventEmitter();
+    /**
+     * Callback to invoke when clear button is clicked.
+     * @param {Event} event - Browser event.
+     * @group Emits
+     */
     onClear = new EventEmitter();
+    /**
+     * Callback to invoke on input key up.
+     * @param {KeyboardEvent} event - Keyboard event.
+     * @group Emits
+     */
     onKeyUp = new EventEmitter();
+    /**
+     * Callback to invoke on overlay is shown.
+     * @param {Event} event - Browser event.
+     * @group Emits
+     */
     onShow = new EventEmitter();
+    /**
+     * Callback to invoke on overlay is hidden.
+     * @param {Event} event - Browser event.
+     * @group Emits
+     */
     onHide = new EventEmitter();
+    /**
+     * Callback to invoke on lazy load data.
+     * @param {AutoCompleteLazyLoadEvent} event - Lazy load event.
+     * @group Emits
+     */
     onLazyLoad = new EventEmitter();
-    /* @deprecated */
+    containerEL;
+    inputEL;
+    multiInputEl;
+    multiContainerEL;
+    dropdownButton;
+    itemsViewChild;
+    scroller;
+    overlayViewChild;
+    templates;
     _itemSize;
-    get itemSize() {
-        return this._itemSize;
-    }
-    set itemSize(val) {
-        this._itemSize = val;
-        console.warn('The itemSize property is deprecated, use virtualScrollItemSize property instead.');
-    }
     itemsWrapper;
     itemTemplate;
     emptyTemplate;
@@ -161,16 +435,9 @@ class AutoComplete {
         this.config = config;
         this.overlayService = overlayService;
         this.zone = zone;
-        this.differ = differs.find([]).create(null);
+        this.differ = differs.find([]).create(undefined);
         this.listId = UniqueComponentId() + '_list';
     }
-    get suggestions() {
-        return this._suggestions;
-    }
-    set suggestions(val) {
-        this._suggestions = val;
-        this.handleSuggestionsChange();
-    }
     ngAfterViewChecked() {
         //Use timeouts as since Angular 4.2, AfterViewChecked is broken and not called after panel is updated
         if (this.suggestionsUpdated && this.overlayViewChild) {
@@ -265,7 +532,7 @@ class AutoComplete {
     }
     writeValue(value) {
         this.value = value;
-        this.filled = this.value && this.value != '';
+        this.filled = this.value && this.value.length ? true : false;
         this.updateInputField();
         this.cd.markForCheck();
     }
@@ -335,7 +602,7 @@ class AutoComplete {
             this.forceSelectionUpdateModelTimeout = null;
         }
         if (this.multiple) {
-            this.multiInputEL.nativeElement.value = '';
+            this.multiInputEl.nativeElement.value = '';
             this.value = this.value || [];
             if (!this.isSelected(option) || !this.unique) {
                 this.value = [...this.value, option];
@@ -356,8 +623,8 @@ class AutoComplete {
         this.hide();
     }
     show(event) {
-        if (this.multiInputEL || this.inputEL) {
-            let hasFocus = this.multiple ? this.multiInputEL.nativeElement.ownerDocument.activeElement == this.multiInputEL.nativeElement : this.inputEL.nativeElement.ownerDocument.activeElement == this.inputEL.nativeElement;
+        if (this.multiInputEl || this.inputEL) {
+            let hasFocus = this.multiple ? this.multiInputEl?.nativeElement.ownerDocument.activeElement == this.multiInputEl?.nativeElement : this.inputEL?.nativeElement.ownerDocument.activeElement == this.inputEL?.nativeElement;
             if (!this.overlayVisible && hasFocus) {
                 this.overlayVisible = true;
             }
@@ -366,8 +633,10 @@ class AutoComplete {
         this.cd.markForCheck();
     }
     clear() {
+        this.value = null;
+        this.inputValue = null;
         if (this.multiple) {
-            this.value = null;
+            this.multiInputEl.nativeElement.value = '';
         }
         else {
             this.inputValue = null;
@@ -379,8 +648,8 @@ class AutoComplete {
     }
     onOverlayAnimationStart(event) {
         if (event.toState === 'visible') {
-            this.itemsWrapper = DomHandler.findSingle(this.overlayViewChild.overlayViewChild.nativeElement, this.virtualScroll ? '.p-scroller' : '.p-autocomplete-panel');
-            this.virtualScroll && this.scroller?.setContentEl(this.itemsViewChild.nativeElement);
+            this.itemsWrapper = DomHandler.findSingle(this.overlayViewChild.overlayViewChild?.nativeElement, this.virtualScroll ? '.p-scroller' : '.p-autocomplete-panel');
+            this.virtualScroll && this.scroller?.setContentEl(this.itemsViewChild?.nativeElement);
         }
     }
     resolveFieldData(value) {
@@ -395,7 +664,7 @@ class AutoComplete {
     handleDropdownClick(event) {
         if (!this.overlayVisible) {
             this.focusInput();
-            let queryValue = this.multiple ? this.multiInputEL.nativeElement.value : this.inputEL.nativeElement.value;
+            let queryValue = this.multiple ? this.multiInputEl.nativeElement.value : this.inputEL.nativeElement.value;
             if (this.dropdownMode === 'blank')
                 this.search(event, '');
             else if (this.dropdownMode === 'current')
@@ -411,9 +680,9 @@ class AutoComplete {
     }
     focusInput() {
         if (this.multiple)
-            this.multiInputEL.nativeElement.focus();
+            this.multiInputEl.nativeElement.focus();
         else
-            this.inputEL.nativeElement.focus();
+            this.inputEL?.nativeElement.focus();
     }
     get emptyMessageLabel() {
         return this.emptyMessage || this.config.getTranslation(TranslationKeys.EMPTY_MESSAGE);
@@ -533,7 +802,7 @@ class AutoComplete {
             switch (event.which) {
                 //backspace
                 case 8:
-                    if (this.value && this.value.length && !this.multiInputEL.nativeElement.value) {
+                    if (this.value && this.value.length && !this.multiInputEl?.nativeElement.value) {
                         this.value = [...this.value];
                         const removedValue = this.value.pop();
                         this.onModelChange(this.value);
@@ -550,7 +819,7 @@ class AutoComplete {
     }
     onInputFocus(event) {
         if (!this.itemClicked && this.completeOnFocus) {
-            let queryValue = this.multiple ? this.multiInputEL.nativeElement.value : this.inputEL.nativeElement.value;
+            let queryValue = this.multiple ? this.multiInputEl?.nativeElement.value : this.inputEL?.nativeElement.value;
             this.search(event, queryValue);
         }
         this.focus = true;
@@ -565,7 +834,8 @@ class AutoComplete {
     onInputChange(event) {
         if (this.forceSelection) {
             let valid = false;
-            let inputValue = event.target.value.trim();
+            const target = event.target;
+            let inputValue = target.value.trim();
             if (this.suggestions) {
                 for (let suggestion of this.suggestions) {
                     let itemValue = this.field ? ObjectUtils.resolveFieldData(suggestion, this.field) : suggestion;
@@ -580,7 +850,7 @@ class AutoComplete {
             }
             if (!valid) {
                 if (this.multiple) {
-                    this.multiInputEL.nativeElement.value = '';
+                    this.multiInputEl.nativeElement.value = '';
                 }
                 else {
                     this.value = null;
@@ -639,7 +909,7 @@ class AutoComplete {
     }
     updateFilledState() {
         if (this.multiple)
-            this.filled = (this.value && this.value.length) || (this.multiInputEL && this.multiInputEL.nativeElement && this.multiInputEL.nativeElement.value != '');
+            this.filled = (this.value && this.value.length) || (this.multiInputEl && this.multiInputEl.nativeElement && this.multiInputEl.nativeElement.value != '');
         else
             this.filled = (this.inputFieldValue && this.inputFieldValue != '') || (this.inputEL && this.inputEL.nativeElement && this.inputEL.nativeElement.value != '');
     }
@@ -661,8 +931,8 @@ class AutoComplete {
             this.scrollHandler = null;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AutoComplete, deps: [{ token: DOCUMENT }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i0.IterableDiffers }, { token: i1.PrimeNGConfig }, { token: i1.OverlayService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: AutoComplete, selector: "p-autoComplete", inputs: { minLength: "minLength", delay: "delay", style: "style", panelStyle: "panelStyle", styleClass: "styleClass", panelStyleClass: "panelStyleClass", inputStyle: "inputStyle", inputId: "inputId", inputStyleClass: "inputStyleClass", placeholder: "placeholder", readonly: "readonly", disabled: "disabled", scrollHeight: "scrollHeight", lazy: "lazy", virtualScroll: "virtualScroll", virtualScrollItemSize: "virtualScrollItemSize", virtualScrollOptions: "virtualScrollOptions", maxlength: "maxlength", name: "name", required: "required", size: "size", appendTo: "appendTo", autoHighlight: "autoHighlight", forceSelection: "forceSelection", type: "type", autoZIndex: "autoZIndex", baseZIndex: "baseZIndex", ariaLabel: "ariaLabel", dropdownAriaLabel: "dropdownAriaLabel", ariaLabelledBy: "ariaLabelledBy", dropdownIcon: "dropdownIcon", unique: "unique", group: "group", completeOnFocus: "completeOnFocus", showClear: "showClear", field: "field", dropdown: "dropdown", showEmptyMessage: "showEmptyMessage", dropdownMode: "dropdownMode", multiple: "multiple", tabindex: "tabindex", dataKey: "dataKey", emptyMessage: "emptyMessage", showTransitionOptions: "showTransitionOptions", hideTransitionOptions: "hideTransitionOptions", autofocus: "autofocus", autocomplete: "autocomplete", optionGroupChildren: "optionGroupChildren", optionGroupLabel: "optionGroupLabel", overlayOptions: "overlayOptions", itemSize: "itemSize", suggestions: "suggestions" }, outputs: { completeMethod: "completeMethod", onSelect: "onSelect", onUnselect: "onUnselect", onFocus: "onFocus", onBlur: "onBlur", onDropdownClick: "onDropdownClick", onClear: "onClear", onKeyUp: "onKeyUp", onShow: "onShow", onHide: "onHide", onLazyLoad: "onLazyLoad" }, host: { properties: { "class.p-inputwrapper-filled": "filled", "class.p-inputwrapper-focus": "((focus && !disabled) || autofocus) || overlayVisible", "class.p-autocomplete-clearable": "showClear && !disabled" }, classAttribute: "p-element p-inputwrapper" }, providers: [AUTOCOMPLETE_VALUE_ACCESSOR], queries: [{ propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "containerEL", first: true, predicate: ["container"], descendants: true }, { propertyName: "inputEL", first: true, predicate: ["in"], descendants: true }, { propertyName: "multiInputEL", first: true, predicate: ["multiIn"], descendants: true }, { propertyName: "multiContainerEL", first: true, predicate: ["multiContainer"], descendants: true }, { propertyName: "dropdownButton", first: true, predicate: ["ddBtn"], descendants: true }, { propertyName: "itemsViewChild", first: true, predicate: ["items"], descendants: true }, { propertyName: "scroller", first: true, predicate: ["scroller"], descendants: true }, { propertyName: "overlayViewChild", first: true, predicate: ["overlay"], descendants: true }], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: AutoComplete, deps: [{ token: DOCUMENT }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i0.IterableDiffers }, { token: i1.PrimeNGConfig }, { token: i1.OverlayService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.2", type: AutoComplete, selector: "p-autoComplete", inputs: { minLength: "minLength", delay: "delay", style: "style", panelStyle: "panelStyle", styleClass: "styleClass", panelStyleClass: "panelStyleClass", inputStyle: "inputStyle", inputId: "inputId", inputStyleClass: "inputStyleClass", placeholder: "placeholder", readonly: "readonly", disabled: "disabled", scrollHeight: "scrollHeight", lazy: "lazy", virtualScroll: "virtualScroll", virtualScrollItemSize: "virtualScrollItemSize", virtualScrollOptions: "virtualScrollOptions", maxlength: "maxlength", name: "name", required: "required", size: "size", appendTo: "appendTo", autoHighlight: "autoHighlight", forceSelection: "forceSelection", type: "type", autoZIndex: "autoZIndex", baseZIndex: "baseZIndex", ariaLabel: "ariaLabel", dropdownAriaLabel: "dropdownAriaLabel", ariaLabelledBy: "ariaLabelledBy", dropdownIcon: "dropdownIcon", unique: "unique", group: "group", completeOnFocus: "completeOnFocus", showClear: "showClear", field: "field", dropdown: "dropdown", showEmptyMessage: "showEmptyMessage", dropdownMode: "dropdownMode", multiple: "multiple", tabindex: "tabindex", dataKey: "dataKey", emptyMessage: "emptyMessage", showTransitionOptions: "showTransitionOptions", hideTransitionOptions: "hideTransitionOptions", autofocus: "autofocus", autocomplete: "autocomplete", optionGroupChildren: "optionGroupChildren", optionGroupLabel: "optionGroupLabel", overlayOptions: "overlayOptions", suggestions: "suggestions", itemSize: "itemSize" }, outputs: { completeMethod: "completeMethod", onSelect: "onSelect", onUnselect: "onUnselect", onFocus: "onFocus", onBlur: "onBlur", onDropdownClick: "onDropdownClick", onClear: "onClear", onKeyUp: "onKeyUp", onShow: "onShow", onHide: "onHide", onLazyLoad: "onLazyLoad" }, host: { properties: { "class.p-inputwrapper-filled": "filled", "class.p-inputwrapper-focus": "((focus && !disabled) || autofocus) || overlayVisible", "class.p-autocomplete-clearable": "showClear && !disabled" }, classAttribute: "p-element p-inputwrapper" }, providers: [AUTOCOMPLETE_VALUE_ACCESSOR], queries: [{ propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "containerEL", first: true, predicate: ["container"], descendants: true }, { propertyName: "inputEL", first: true, predicate: ["in"], descendants: true }, { propertyName: "multiInputEl", first: true, predicate: ["multiIn"], descendants: true }, { propertyName: "multiContainerEL", first: true, predicate: ["multiContainer"], descendants: true }, { propertyName: "dropdownButton", first: true, predicate: ["ddBtn"], descendants: true }, { propertyName: "itemsViewChild", first: true, predicate: ["items"], descendants: true }, { propertyName: "scroller", first: true, predicate: ["scroller"], descendants: true }, { propertyName: "overlayViewChild", first: true, predicate: ["overlay"], descendants: true }], ngImport: i0, template: `
         <span #container [ngClass]="{ 'p-autocomplete p-component': true, 'p-autocomplete-dd': dropdown, 'p-autocomplete-multiple': multiple }" [ngStyle]="style" [class]="styleClass">
             <input
                 pAutoFocus
@@ -845,7 +1115,7 @@ class AutoComplete {
         </span>
     `, isInline: true, styles: [".p-autocomplete{display:inline-flex;position:relative}.p-autocomplete-loader{position:absolute;top:50%;margin-top:-.5rem}.p-autocomplete-dd .p-autocomplete-input{flex:1 1 auto;width:1%}.p-autocomplete-dd .p-autocomplete-input,.p-autocomplete-dd .p-autocomplete-multiple-container{border-top-right-radius:0;border-bottom-right-radius:0}.p-autocomplete-dd .p-autocomplete-dropdown{border-top-left-radius:0;border-bottom-left-radius:0}.p-autocomplete-panel{overflow:auto}.p-autocomplete-items{margin:0;padding:0;list-style-type:none}.p-autocomplete-item{cursor:pointer;white-space:nowrap;position:relative;overflow:hidden}.p-autocomplete-multiple-container{margin:0;padding:0;list-style-type:none;cursor:text;overflow:hidden;display:flex;align-items:center;flex-wrap:wrap}.p-autocomplete-token{cursor:default;display:inline-flex;align-items:center;flex:0 0 auto}.p-autocomplete-token-icon{cursor:pointer}.p-autocomplete-input-token{flex:1 1 auto;display:inline-flex}.p-autocomplete-input-token input{border:0 none;outline:0 none;background-color:transparent;margin:0;padding:0;box-shadow:none;border-radius:0;width:100%}.p-fluid .p-autocomplete{display:flex}.p-fluid .p-autocomplete-dd .p-autocomplete-input{width:1%}.p-autocomplete-clear-icon{position:absolute;top:50%;margin-top:-.5rem;cursor:pointer}.p-autocomplete-clearable{position:relative}\n"], dependencies: [{ kind: "directive", type: i0.forwardRef(function () { return i2.NgClass; }), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(function () { return i2.NgForOf; }), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(function () { return i2.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(function () { return i2.NgTemplateOutlet; }), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i0.forwardRef(function () { return i2.NgStyle; }), selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i0.forwardRef(function () { return i3.Overlay; }), selector: "p-overlay", inputs: ["visible", "mode", "style", "styleClass", "contentStyle", "contentStyleClass", "target", "appendTo", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "listener", "responsive", "options"], outputs: ["visibleChange", "onBeforeShow", "onShow", "onBeforeHide", "onHide", "onAnimationStart", "onAnimationDone"] }, { kind: "directive", type: i0.forwardRef(function () { return i1.PrimeTemplate; }), selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i0.forwardRef(function () { return i4.ButtonDirective; }), selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }, { kind: "directive", type: i0.forwardRef(function () { return i5.Ripple; }), selector: "[pRipple]" }, { kind: "component", type: i0.forwardRef(function () { return i6.Scroller; }), selector: "p-scroller", inputs: ["id", "style", "styleClass", "tabindex", "items", "itemSize", "scrollHeight", "scrollWidth", "orientation", "step", "delay", "resizeDelay", "appendOnly", "inline", "lazy", "disabled", "loaderDisabled", "columns", "showSpacer", "showLoader", "numToleratedItems", "loading", "autoSize", "trackBy", "options"], outputs: ["onLazyLoad", "onScroll", "onScrollIndexChange"] }, { kind: "directive", type: i0.forwardRef(function () { return i7.AutoFocus; }), selector: "[pAutoFocus]", inputs: ["autofocus"] }, { kind: "component", type: i0.forwardRef(function () { return TimesCircleIcon; }), selector: "TimesCircleIcon" }, { kind: "component", type: i0.forwardRef(function () { return SpinnerIcon; }), selector: "SpinnerIcon" }, { kind: "component", type: i0.forwardRef(function () { return TimesIcon; }), selector: "TimesIcon" }, { kind: "component", type: i0.forwardRef(function () { return ChevronDownIcon; }), selector: "ChevronDownIcon" }], animations: [trigger('overlayAnimation', [transition(':enter', [style({ opacity: 0, transform: 'scaleY(0.8)' }), animate('{{showTransitionParams}}')]), transition(':leave', [animate('{{hideTransitionParams}}', style({ opacity: 0 }))])])], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AutoComplete, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: AutoComplete, decorators: [{
             type: Component,
             args: [{ selector: 'p-autoComplete', template: `
         <span #container [ngClass]="{ 'p-autocomplete p-component': true, 'p-autocomplete-dd': dropdown, 'p-autocomplete-multiple': multiple }" [ngStyle]="style" [class]="styleClass">
@@ -1137,13 +1407,39 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
                 type: Input
             }], overlayOptions: [{
                 type: Input
+            }], suggestions: [{
+                type: Input
+            }], itemSize: [{
+                type: Input
+            }], completeMethod: [{
+                type: Output
+            }], onSelect: [{
+                type: Output
+            }], onUnselect: [{
+                type: Output
+            }], onFocus: [{
+                type: Output
+            }], onBlur: [{
+                type: Output
+            }], onDropdownClick: [{
+                type: Output
+            }], onClear: [{
+                type: Output
+            }], onKeyUp: [{
+                type: Output
+            }], onShow: [{
+                type: Output
+            }], onHide: [{
+                type: Output
+            }], onLazyLoad: [{
+                type: Output
             }], containerEL: [{
                 type: ViewChild,
                 args: ['container']
             }], inputEL: [{
                 type: ViewChild,
                 args: ['in']
-            }], multiInputEL: [{
+            }], multiInputEl: [{
                 type: ViewChild,
                 args: ['multiIn']
             }], multiContainerEL: [{
@@ -1164,39 +1460,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
             }], templates: [{
                 type: ContentChildren,
                 args: [PrimeTemplate]
-            }], completeMethod: [{
-                type: Output
-            }], onSelect: [{
-                type: Output
-            }], onUnselect: [{
-                type: Output
-            }], onFocus: [{
-                type: Output
-            }], onBlur: [{
-                type: Output
-            }], onDropdownClick: [{
-                type: Output
-            }], onClear: [{
-                type: Output
-            }], onKeyUp: [{
-                type: Output
-            }], onShow: [{
-                type: Output
-            }], onHide: [{
-                type: Output
-            }], onLazyLoad: [{
-                type: Output
-            }], itemSize: [{
-                type: Input
-            }], suggestions: [{
-                type: Input
             }] } });
 class AutoCompleteModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AutoCompleteModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.0.0", ngImport: i0, type: AutoCompleteModule, declarations: [AutoComplete], imports: [CommonModule, OverlayModule, InputTextModule, ButtonModule, SharedModule, RippleModule, ScrollerModule, AutoFocusModule, TimesCircleIcon, SpinnerIcon, TimesIcon, ChevronDownIcon], exports: [AutoComplete, OverlayModule, SharedModule, ScrollerModule, AutoFocusModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AutoCompleteModule, imports: [CommonModule, OverlayModule, InputTextModule, ButtonModule, SharedModule, RippleModule, ScrollerModule, AutoFocusModule, TimesCircleIcon, SpinnerIcon, TimesIcon, ChevronDownIcon, OverlayModule, SharedModule, ScrollerModule, AutoFocusModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: AutoCompleteModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.0.2", ngImport: i0, type: AutoCompleteModule, declarations: [AutoComplete], imports: [CommonModule, OverlayModule, InputTextModule, ButtonModule, SharedModule, RippleModule, ScrollerModule, AutoFocusModule, TimesCircleIcon, SpinnerIcon, TimesIcon, ChevronDownIcon], exports: [AutoComplete, OverlayModule, SharedModule, ScrollerModule, AutoFocusModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: AutoCompleteModule, imports: [CommonModule, OverlayModule, InputTextModule, ButtonModule, SharedModule, RippleModule, ScrollerModule, AutoFocusModule, TimesCircleIcon, SpinnerIcon, TimesIcon, ChevronDownIcon, OverlayModule, SharedModule, ScrollerModule, AutoFocusModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AutoCompleteModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: AutoCompleteModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, OverlayModule, InputTextModule, ButtonModule, SharedModule, RippleModule, ScrollerModule, AutoFocusModule, TimesCircleIcon, SpinnerIcon, TimesIcon, ChevronDownIcon],