primeng/fesm2022/primeng-autocomplete.mjs.map

[](https://badge.fury.io/js/primeng) [](https://www.npmjs.com/package/primeng) [![Actions CI](https://github.com/primefaces/primeng/workflows/No

{"version":3,"file":"primeng-autocomplete.mjs","sources":["../../src/app/components/autocomplete/autocomplete.ts","../../src/app/components/autocomplete/primeng-autocomplete.ts"],"sourcesContent":["import { animate, AnimationEvent, style, transition, trigger } from '@angular/animations';\nimport { CommonModule, DOCUMENT } from '@angular/common';\nimport {\n    AfterContentInit,\n    AfterViewChecked,\n    ChangeDetectionStrategy,\n    ChangeDetectorRef,\n    Component,\n    ContentChildren,\n    ElementRef,\n    EventEmitter,\n    forwardRef,\n    Inject,\n    Input,\n    IterableDiffers,\n    NgModule,\n    NgZone,\n    OnDestroy,\n    Output,\n    QueryList,\n    Renderer2,\n    TemplateRef,\n    ViewChild,\n    ViewEncapsulation\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { OverlayOptions, OverlayService, PrimeNGConfig, PrimeTemplate, SharedModule, TranslationKeys } from 'primeng/api';\nimport { AutoFocusModule } from 'primeng/autofocus';\nimport { ButtonModule } from 'primeng/button';\nimport { ConnectedOverlayScrollHandler, DomHandler } from 'primeng/dom';\nimport { InputTextModule } from 'primeng/inputtext';\nimport { Overlay, OverlayModule } from 'primeng/overlay';\nimport { RippleModule } from 'primeng/ripple';\nimport { Scroller, ScrollerModule } from 'primeng/scroller';\nimport { ScrollerOptions } from 'primeng/api';\nimport { ObjectUtils, UniqueComponentId } from 'primeng/utils';\nimport { TimesCircleIcon } from 'primeng/icons/timescircle';\nimport { SpinnerIcon } from 'primeng/icons/spinner';\nimport { TimesIcon } from 'primeng/icons/times';\nimport { ChevronDownIcon } from 'primeng/icons/chevrondown';\nimport { Nullable, VoidListener } from 'primeng/ts-helpers';\nimport { AutoCompleteCompleteEvent, AutoCompleteDropdownClickEvent, AutoCompleteLazyLoadEvent } from './autocomplete.interface';\n\nexport const AUTOCOMPLETE_VALUE_ACCESSOR: any = {\n    provide: NG_VALUE_ACCESSOR,\n    useExisting: forwardRef(() => AutoComplete),\n    multi: true\n};\n/**\n * AutoComplete is an input component that provides real-time suggestions when being typed.\n * @group Components\n */\n@Component({\n    selector: 'p-autoComplete',\n    template: `\n        <span #container [ngClass]=\"{ 'p-autocomplete p-component': true, 'p-autocomplete-dd': dropdown, 'p-autocomplete-multiple': multiple }\" [ngStyle]=\"style\" [class]=\"styleClass\">\n            <input\n                pAutoFocus\n                [autofocus]=\"autofocus\"\n                *ngIf=\"!multiple\"\n                #in\n                [attr.type]=\"type\"\n                [attr.id]=\"inputId\"\n                [ngStyle]=\"inputStyle\"\n                [class]=\"inputStyleClass\"\n                [autocomplete]=\"autocomplete\"\n                [attr.required]=\"required\"\n                [attr.name]=\"name\"\n                class=\"p-autocomplete-input p-inputtext p-component\"\n                [ngClass]=\"{ 'p-autocomplete-dd-input': dropdown, 'p-disabled': disabled }\"\n                [value]=\"inputFieldValue\"\n                aria-autocomplete=\"list\"\n                role=\"searchbox\"\n                (click)=\"onInputClick($event)\"\n                (input)=\"onInput($event)\"\n                (keydown)=\"onKeydown($event)\"\n                (keyup)=\"onKeyup($event)\"\n                (focus)=\"onInputFocus($event)\"\n                (blur)=\"onInputBlur($event)\"\n                (change)=\"onInputChange($event)\"\n                (paste)=\"onInputPaste($event)\"\n                [attr.placeholder]=\"placeholder\"\n                [attr.size]=\"size\"\n                [attr.maxlength]=\"maxlength\"\n                [attr.tabindex]=\"tabindex\"\n                [readonly]=\"readonly\"\n                [disabled]=\"disabled\"\n                [attr.aria-label]=\"ariaLabel\"\n                [attr.aria-labelledby]=\"ariaLabelledBy\"\n                [attr.aria-required]=\"required\"\n            />\n            <ng-container *ngIf=\"filled && !disabled && showClear\">\n                <TimesIcon *ngIf=\"!clearIconTemplate\" [styleClass]=\"'p-autocomplete-clear-icon'\" (click)=\"clear()\" />\n                <span *ngIf=\"clearIconTemplate\" class=\"p-autocomplete-clear-icon\" (click)=\"clear()\">\n                    <ng-template *ngTemplateOutlet=\"clearIconTemplate\"></ng-template>\n                </span>\n            </ng-container>\n            <ul *ngIf=\"multiple\" #multiContainer class=\"p-autocomplete-multiple-container p-component p-inputtext\" [ngClass]=\"{ 'p-disabled': disabled, 'p-focus': focus }\" (click)=\"multiIn.focus()\">\n                <li #token *ngFor=\"let val of value\" class=\"p-autocomplete-token\">\n                    <ng-container *ngTemplateOutlet=\"selectedItemTemplate; context: { $implicit: val }\"></ng-container>\n                    <span *ngIf=\"!selectedItemTemplate\" class=\"p-autocomplete-token-label\">{{ resolveFieldData(val) }}</span>\n                    <span class=\"p-autocomplete-token-icon\" (click)=\"removeItem(token)\">\n                        <TimesCircleIcon [styleClass]=\"'p-autocomplete-token-icon'\" *ngIf=\"!removeIconTemplate\" />\n                        <span *ngIf=\"removeIconTemplate\" class=\"p-autocomplete-token-icon\">\n                            <ng-template *ngTemplateOutlet=\"removeIconTemplate\"></ng-template>\n                        </span>\n                    </span>\n                </li>\n                <li class=\"p-autocomplete-input-token\">\n                    <input\n                        pAutoFocus\n                        [autofocus]=\"autofocus\"\n                        #multiIn\n                        [attr.type]=\"type\"\n                        [attr.id]=\"inputId\"\n                        [disabled]=\"disabled\"\n                        [attr.placeholder]=\"value && value.length ? null : placeholder\"\n                        [attr.tabindex]=\"tabindex\"\n                        [attr.maxlength]=\"maxlength\"\n                        (input)=\"onInput($event)\"\n                        (click)=\"onInputClick($event)\"\n                        (keydown)=\"onKeydown($event)\"\n                        [readonly]=\"readonly\"\n                        (keyup)=\"onKeyup($event)\"\n                        (focus)=\"onInputFocus($event)\"\n                        (blur)=\"onInputBlur($event)\"\n                        (change)=\"onInputChange($event)\"\n                        (paste)=\"onInputPaste($event)\"\n                        [autocomplete]=\"autocomplete\"\n                        [ngStyle]=\"inputStyle\"\n                        [class]=\"inputStyleClass\"\n                        [attr.aria-label]=\"ariaLabel\"\n                        [attr.aria-labelledby]=\"ariaLabelledBy\"\n                        [attr.aria-required]=\"required\"\n                        aria-autocomplete=\"list\"\n                        [attr.aria-controls]=\"listId\"\n                        role=\"searchbox\"\n                        [attr.aria-expanded]=\"overlayVisible\"\n                        aria-haspopup=\"true\"\n                        [attr.aria-activedescendant]=\"'p-highlighted-option'\"\n                    />\n                </li>\n            </ul>\n            <ng-container *ngIf=\"loading\">\n                <SpinnerIcon *ngIf=\"!loadingIconTemplate\" [styleClass]=\"'p-autocomplete-loader'\" [spin]=\"true\" />\n                <span *ngIf=\"loadingIconTemplate\" class=\"p-autocomplete-loader pi-spin \">\n                    <ng-template *ngTemplateOutlet=\"loadingIconTemplate\"></ng-template>\n                </span>\n            </ng-container>\n            <button #ddBtn type=\"button\" pButton [attr.aria-label]=\"dropdownAriaLabel\" class=\"p-autocomplete-dropdown p-button-icon-only\" [disabled]=\"disabled\" pRipple (click)=\"handleDropdownClick($event)\" *ngIf=\"dropdown\" [attr.tabindex]=\"tabindex\">\n                <span *ngIf=\"dropdownIcon\" [ngClass]=\"dropdownIcon\"></span>\n                <ng-container *ngIf=\"!dropdownIcon\">\n                    <ChevronDownIcon *ngIf=\"!dropdownIconTemplate\" />\n                    <ng-template *ngTemplateOutlet=\"dropdownIconTemplate\"></ng-template>\n                </ng-container>\n            </button>\n            <p-overlay\n                #overlay\n                [(visible)]=\"overlayVisible\"\n                [options]=\"virtualScrollOptions\"\n                [target]=\"'@parent'\"\n                [appendTo]=\"appendTo\"\n                [showTransitionOptions]=\"showTransitionOptions\"\n                [hideTransitionOptions]=\"hideTransitionOptions\"\n                (onAnimationStart)=\"onOverlayAnimationStart($event)\"\n                (onShow)=\"show($event)\"\n                (onHide)=\"hide($event)\"\n            >\n                <div [ngClass]=\"['p-autocomplete-panel p-component']\" [style.max-height]=\"virtualScroll ? 'auto' : scrollHeight\" [ngStyle]=\"panelStyle\" [class]=\"panelStyleClass\">\n                    <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\n                    <p-scroller\n                        *ngIf=\"virtualScroll\"\n                        #scroller\n                        [items]=\"suggestions\"\n                        [style]=\"{ height: scrollHeight }\"\n                        [itemSize]=\"virtualScrollItemSize || _itemSize\"\n                        [autoSize]=\"true\"\n                        [lazy]=\"lazy\"\n                        (onLazyLoad)=\"onLazyLoad.emit($event)\"\n                        [options]=\"virtualScrollOptions\"\n                    >\n                        <ng-template pTemplate=\"content\" let-items let-scrollerOptions=\"options\">\n                            <ng-container *ngTemplateOutlet=\"buildInItems; context: { $implicit: items, options: scrollerOptions }\"></ng-container>\n                        </ng-template>\n                        <ng-container *ngIf=\"loaderTemplate\">\n                            <ng-template pTemplate=\"loader\" let-scrollerOptions=\"options\">\n                                <ng-container *ngTemplateOutlet=\"loaderTemplate; context: { options: scrollerOptions }\"></ng-container>\n                            </ng-template>\n                        </ng-container>\n                    </p-scroller>\n                    <ng-container *ngIf=\"!virtualScroll\">\n                        <ng-container *ngTemplateOutlet=\"buildInItems; context: { $implicit: suggestions, options: {} }\"></ng-container>\n                    </ng-container>\n\n                    <ng-template #buildInItems let-items let-scrollerOptions=\"options\">\n                        <ul #items role=\"listbox\" [attr.id]=\"listId\" class=\"p-autocomplete-items\" [ngClass]=\"scrollerOptions.contentStyleClass\" [style]=\"scrollerOptions.contentStyle\">\n                            <ng-container *ngIf=\"group\">\n                                <ng-template ngFor let-optgroup [ngForOf]=\"items\">\n                                    <li class=\"p-autocomplete-item-group\" [ngStyle]=\"{ height: scrollerOptions.itemSize + 'px' }\">\n                                        <span *ngIf=\"!groupTemplate\">{{ getOptionGroupLabel(optgroup) || 'empty' }}</span>\n                                        <ng-container *ngTemplateOutlet=\"groupTemplate; context: { $implicit: optgroup }\"></ng-container>\n                                    </li>\n                                    <ng-container *ngTemplateOutlet=\"itemslist; context: { $implicit: getOptionGroupChildren(optgroup) }\"></ng-container>\n                                </ng-template>\n                            </ng-container>\n                            <ng-container *ngIf=\"!group\">\n                                <ng-container *ngTemplateOutlet=\"itemslist; context: { $implicit: items }\"></ng-container>\n                            </ng-container>\n                            <ng-template #itemslist let-suggestionsToDisplay>\n                                <li\n                                    role=\"option\"\n                                    *ngFor=\"let option of suggestionsToDisplay; let idx = index\"\n                                    class=\"p-autocomplete-item\"\n                                    pRipple\n                                    [ngStyle]=\"{ height: scrollerOptions.itemSize + 'px' }\"\n                                    [ngClass]=\"{ 'p-highlight': option === highlightOption }\"\n                                    [id]=\"highlightOption == option ? 'p-highlighted-option' : ''\"\n                                    (click)=\"selectItem(option)\"\n                                >\n                                    <span *ngIf=\"!itemTemplate\">{{ resolveFieldData(option) }}</span>\n                                    <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: option, index: scrollerOptions.getOptions ? scrollerOptions.getOptions(idx) : idx }\"></ng-container>\n                                </li>\n                            </ng-template>\n                            <li *ngIf=\"noResults && showEmptyMessage\" class=\"p-autocomplete-empty-message\" [ngStyle]=\"{ height: scrollerOptions.itemSize + 'px' }\">\n                                <ng-container *ngIf=\"!emptyTemplate; else empty\">\n                                    {{ emptyMessageLabel }}\n                                </ng-container>\n                                <ng-container #empty *ngTemplateOutlet=\"emptyTemplate\"></ng-container>\n                            </li>\n                        </ul>\n                    </ng-template>\n                    <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\n                </div>\n            </p-overlay>\n        </span>\n    `,\n    host: {\n        class: 'p-element p-inputwrapper',\n        '[class.p-inputwrapper-filled]': 'filled',\n        '[class.p-inputwrapper-focus]': '((focus && !disabled) || autofocus) || overlayVisible',\n        '[class.p-autocomplete-clearable]': 'showClear && !disabled'\n    },\n    providers: [AUTOCOMPLETE_VALUE_ACCESSOR],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n    styleUrls: ['./autocomplete.css']\n})\nexport class AutoComplete implements AfterViewChecked, AfterContentInit, OnDestroy, ControlValueAccessor {\n    /**\n     * Minimum number of characters to initiate a search.\n     * @group Props\n     */\n    @Input() minLength: number = 1;\n    /**\n     * Delay between keystrokes to wait before sending a query.\n     * @group Props\n     */\n    @Input() delay: number = 300;\n    /**\n     * Inline style of the component.\n     * @group Props\n     */\n    @Input() style: { [klass: string]: any } | null | undefined;\n    /**\n     * Inline style of the overlay panel element.\n     * @group Props\n     */\n    @Input() panelStyle: { [klass: string]: any } | null | undefined;\n    /**\n     * Style class of the component.\n     * @group Props\n     */\n    @Input() styleClass: string | undefined;\n    /**\n     * Style class of the overlay panel element.\n     * @group Props\n     */\n    @Input() panelStyleClass: string | undefined;\n    /**\n     * Inline style of the input field.\n     * @group Props\n     */\n    @Input() inputStyle: { [klass: string]: any } | null | undefined;\n    /**\n     * Identifier of the focus input to match a label defined for the component.\n     * @group Props\n     */\n    @Input() inputId: string | undefined;\n    /**\n     * Inline style of the input field.\n     * @group Props\n     */\n    @Input() inputStyleClass: string | undefined;\n    /**\n     * Hint text for the input field.\n     * @group Props\n     */\n    @Input() placeholder: string | undefined;\n    /**\n     * When present, it specifies that the input cannot be typed.\n     * @group Props\n     */\n    @Input() readonly: boolean | undefined;\n    /**\n     * When present, it specifies that the component should be disabled.\n     * @group Props\n     */\n    @Input() disabled: boolean | undefined;\n    /**\n     * Maximum height of the suggestions panel.\n     * @group Props\n     */\n    @Input() scrollHeight: string = '200px';\n    /**\n     * Defines if data is loaded and interacted with in lazy manner.\n     * @group Props\n     */\n    @Input() lazy: boolean = false;\n    /**\n     * Whether the data should be loaded on demand during scroll.\n     * @group Props\n     */\n    @Input() virtualScroll: boolean | undefined;\n    /**\n     * Height of an item in the list for VirtualScrolling.\n     * @group Props\n     */\n    @Input() virtualScrollItemSize: number | undefined;\n    /**\n     * Whether to use the scroller feature. The properties of scroller component can be used like an object in it.\n     * @group Props\n     */\n    @Input() virtualScrollOptions: ScrollerOptions | undefined;\n    /**\n     * Maximum number of character allows in the input field.\n     * @group Props\n     */\n    @Input() maxlength: number | undefined;\n    /**\n     * Name of the input element.\n     * @group Props\n     */\n    @Input() name: string | undefined;\n    /**\n     * When present, it specifies that an input field must be filled out before submitting the form.\n     * @group Props\n     */\n    @Input() required: boolean | undefined;\n    /**\n     * Size of the input field.\n     * @group Props\n     */\n    @Input() size: number | undefined;\n    /**\n     * 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).\n     * @group Props\n     */\n    @Input() appendTo: HTMLElement | ElementRef | TemplateRef<any> | string | null | undefined | any;\n    /**\n     * When enabled, highlights the first item in the list by default.\n     * @group Props\n     */\n    @Input() autoHighlight: boolean | undefined;\n    /**\n     * When present, autocomplete clears the manual input if it does not match of the suggestions to force only accepting values from the suggestions.\n     * @group Props\n     */\n    @Input() forceSelection: boolean | undefined;\n    /**\n     * Type of the input, defaults to \"text\".\n     * @group Props\n     */\n    @Input() type: string = 'text';\n    /**\n     * Whether to automatically manage layering.\n     * @group Props\n     */\n    @Input() autoZIndex: boolean = true;\n    /**\n     * Base zIndex value to use in layering.\n     * @group Props\n     */\n    @Input() baseZIndex: number = 0;\n    /**\n     * Defines a string that labels the input for accessibility.\n     * @group Props\n     */\n    @Input() ariaLabel: string | undefined;\n    /**\n     * Defines a string that labels the dropdown button for accessibility.\n     * @group Props\n     */\n    @Input() dropdownAriaLabel: string | undefined;\n    /**\n     * Specifies one or more IDs in the DOM that labels the input field.\n     * @group Props\n     */\n    @Input() ariaLabelledBy: string | undefined;\n    /**\n     * Icon class of the dropdown icon.\n     * @group Props\n     */\n    @Input() dropdownIcon: string | undefined;\n    /**\n     * Ensures uniqueness of selected items on multiple mode.\n     * @group Props\n     */\n    @Input() unique: boolean = true;\n    /**\n     * Whether to display options as grouped when nested options are provided.\n     * @group Props\n     */\n    @Input() group: boolean | undefined;\n    /**\n     * Whether to run a query when input receives focus.\n     * @group Props\n     */\n    @Input() completeOnFocus: boolean = false;\n    /**\n     * When enabled, a clear icon is displayed to clear the value.\n     * @group Props\n     */\n    @Input() showClear: boolean = false;\n    /**\n     * Field of a suggested object to resolve and display.\n     * @group Props\n     */\n    @Input() field: string | undefined;\n    /**\n     * Displays a button next to the input field when enabled.\n     * @group Props\n     */\n    @Input() dropdown: boolean | undefined;\n    /**\n     * Whether to show the empty message or not.\n     * @group Props\n     */\n    @Input() showEmptyMessage: boolean | undefined;\n    /**\n     * Specifies the behavior dropdown button. Default \"blank\" mode sends an empty string and \"current\" mode sends the input value.\n     * @group Props\n     */\n    @Input() dropdownMode: string = 'blank';\n    /**\n     * Specifies if multiple values can be selected.\n     * @group Props\n     */\n    @Input() multiple: boolean | undefined;\n    /**\n     * Index of the element in tabbing order.\n     * @group Props\n     */\n    @Input() tabindex: number | undefined;\n    /**\n     * A property to uniquely identify a value in options.\n     * @group Props\n     */\n    @Input() dataKey: string | undefined;\n    /**\n     * Text to display when there is no data. Defaults to global value in i18n translation configuration.\n     * @group Props\n     */\n    @Input() emptyMessage: string | undefined;\n    /**\n     * Transition options of the show animation.\n     * @group Props\n     */\n    @Input() showTransitionOptions: string = '.12s cubic-bezier(0, 0, 0.2, 1)';\n    /**\n     * Transition options of the hide animation.\n     * @group Props\n     */\n    @Input() hideTransitionOptions: string = '.1s linear';\n    /**\n     * When present, it specifies that the component should automatically get focus on load.\n     * @group Props\n     */\n    @Input() autofocus: boolean | undefined;\n    /**\n     * Used to define a string that autocomplete attribute the current element.\n     * @group Props\n     */\n    @Input() autocomplete: string = 'off';\n    /**\n     * Name of the options field of an option group.\n     * @group Props\n     */\n    @Input() optionGroupChildren: string | undefined;\n    /**\n     * Name of the label field of an option group.\n     * @group Props\n     */\n    @Input() optionGroupLabel: string | undefined;\n    /**\n     * Options for the overlay element.\n     * @group Props\n     */\n    @Input() overlayOptions: OverlayOptions | undefined;\n    /**\n     * An array of suggestions to display.\n     * @group Props\n     */\n    @Input() get suggestions(): any[] {\n        return this._suggestions;\n    }\n    set suggestions(value: any[]) {\n        this._suggestions = value;\n        this.handleSuggestionsChange();\n    }\n    /**\n     * Element dimensions of option for virtual scrolling.\n     * @group Props\n     * @deprecated use virtualScrollItemSize property instead.\n     */\n    @Input() get itemSize(): number {\n        return this._itemSize as number;\n    }\n    set itemSize(val: number) {\n        this._itemSize = val;\n        console.warn('The itemSize property is deprecated, use virtualScrollItemSize property instead.');\n    }\n    /**\n     * Callback to invoke to search for suggestions.\n     * @param {AutoCompleteCompleteEvent} event - Custom complete event.\n     * @group Emits\n     */\n    @Output() completeMethod: EventEmitter<AutoCompleteCompleteEvent> = new EventEmitter<AutoCompleteCompleteEvent>();\n    /**\n     * Callback to invoke when a suggestion is selected.\n     * @param {*} value - selected value.\n     * @group Emits\n     */\n    @Output() onSelect: EventEmitter<any> = new EventEmitter<any>();\n    /**\n     * Callback to invoke when a selected value is removed.\n     * @param {*} value - removed value.\n     * @group Emits\n     */\n    @Output() onUnselect: EventEmitter<any> = new EventEmitter<any>();\n    /**\n     * Callback to invoke when the component receives focus.\n     * @param {Event} event - Browser event.\n     * @group Emits\n     */\n    @Output() onFocus: EventEmitter<Event> = new EventEmitter();\n    /**\n     * Callback to invoke when the component loses focus.\n     * @param {Event} event - Browser event.\n     * @group Emits\n     */\n    @Output() onBlur: EventEmitter<Event> = new EventEmitter();\n    /**\n     * Callback to invoke to when dropdown button is clicked.\n     * @param {AutoCompleteDropdownClickEvent} event - custom dropdown click event.\n     * @group Emits\n     */\n    @Output() onDropdownClick: EventEmitter<AutoCompleteDropdownClickEvent> = new EventEmitter<AutoCompleteDropdownClickEvent>();\n    /**\n     * Callback to invoke when clear button is clicked.\n     * @param {Event} event - Browser event.\n     * @group Emits\n     */\n    @Output() onClear: EventEmitter<Event | undefined> = new EventEmitter<Event | undefined>();\n    /**\n     * Callback to invoke on input key up.\n     * @param {KeyboardEvent} event - Keyboard event.\n     * @group Emits\n     */\n    @Output() onKeyUp: EventEmitter<KeyboardEvent> = new EventEmitter();\n    /**\n     * Callback to invoke on overlay is shown.\n     * @param {Event} event - Browser event.\n     * @group Emits\n     */\n    @Output() onShow: EventEmitter<Event> = new EventEmitter<Event>();\n    /**\n     * Callback to invoke on overlay is hidden.\n     * @param {Event} event - Browser event.\n     * @group Emits\n     */\n    @Output() onHide: EventEmitter<Event> = new EventEmitter<Event>();\n    /**\n     * Callback to invoke on lazy load data.\n     * @param {AutoCompleteLazyLoadEvent} event - Lazy load event.\n     * @group Emits\n     */\n    @Output() onLazyLoad: EventEmitter<AutoCompleteLazyLoadEvent> = new EventEmitter<AutoCompleteLazyLoadEvent>();\n\n    @ViewChild('container') containerEL: Nullable<ElementRef>;\n\n    @ViewChild('in') inputEL: Nullable<ElementRef>;\n\n    @ViewChild('multiIn') multiInputEl: Nullable<ElementRef>;\n\n    @ViewChild('multiContainer') multiContainerEL: Nullable<ElementRef>;\n\n    @ViewChild('ddBtn') dropdownButton: Nullable<ElementRef>;\n\n    @ViewChild('items') itemsViewChild: Nullable<ElementRef>;\n\n    @ViewChild('scroller') scroller: Nullable<Scroller>;\n\n    @ViewChild('overlay') overlayViewChild!: Overlay;\n\n    @ContentChildren(PrimeTemplate) templates: Nullable<QueryList<PrimeTemplate>>;\n\n    _itemSize: Nullable<number>;\n\n    itemsWrapper: Nullable<HTMLDivElement>;\n\n    itemTemplate: Nullable<TemplateRef<any>>;\n\n    emptyTemplate: Nullable<TemplateRef<any>>;\n\n    headerTemplate: Nullable<TemplateRef<any>>;\n\n    footerTemplate: Nullable<TemplateRef<any>>;\n\n    selectedItemTemplate: Nullable<TemplateRef<any>>;\n\n    groupTemplate: Nullable<TemplateRef<any>>;\n\n    loaderTemplate: Nullable<TemplateRef<any>>;\n\n    removeIconTemplate: Nullable<TemplateRef<any>>;\n\n    loadingIconTemplate: Nullable<TemplateRef<any>>;\n\n    clearIconTemplate: Nullable<TemplateRef<any>>;\n\n    dropdownIconTemplate: Nullable<TemplateRef<any>>;\n\n    value: string | any;\n\n    _suggestions: any;\n\n    onModelChange: Function = () => {};\n\n    onModelTouched: Function = () => {};\n\n    timeout: Nullable<any>;\n\n    overlayVisible: boolean = false;\n\n    suggestionsUpdated: Nullable<boolean>;\n\n    highlightOption: any;\n\n    highlightOptionChanged: Nullable<boolean>;\n\n    focus: boolean = false;\n\n    filled: number | boolean | undefined;\n\n    inputClick: Nullable<boolean>;\n\n    inputKeyDown: Nullable<boolean>;\n\n    noResults: Nullable<boolean>;\n\n    differ: any;\n\n    inputFieldValue: Nullable<string> = null;\n\n    loading: Nullable<boolean>;\n\n    scrollHandler: Nullable<ConnectedOverlayScrollHandler>;\n\n    documentResizeListener: VoidListener;\n\n    forceSelectionUpdateModelTimeout: any;\n\n    listId: string | undefined;\n\n    itemClicked: boolean | undefined;\n\n    inputValue: Nullable<string> = null;\n\n    constructor(\n        @Inject(DOCUMENT) private document: Document,\n        public el: ElementRef,\n        public renderer: Renderer2,\n        public cd: ChangeDetectorRef,\n        public differs: IterableDiffers,\n        public config: PrimeNGConfig,\n        public overlayService: OverlayService,\n        private zone: NgZone\n    ) {\n        this.differ = differs.find([]).create(undefined);\n        this.listId = UniqueComponentId() + '_list';\n    }\n\n    ngAfterViewChecked() {\n        //Use timeouts as since Angular 4.2, AfterViewChecked is broken and not called after panel is updated\n        if (this.suggestionsUpdated && this.overlayViewChild) {\n            this.zone.runOutsideAngular(() => {\n                setTimeout(() => {\n                    if (this.overlayViewChild) {\n                        this.overlayViewChild.alignOverlay();\n                    }\n                }, 1);\n                this.suggestionsUpdated = false;\n            });\n        }\n\n        if (this.highlightOptionChanged) {\n            this.zone.runOutsideAngular(() => {\n                setTimeout(() => {\n                    if (this.overlayViewChild && this.itemsWrapper) {\n                        let listItem = DomHandler.findSingle((this.overlayViewChild.overlayViewChild as ElementRef).nativeElement, 'li.p-highlight');\n\n                        if (listItem) {\n                            DomHandler.scrollInView(this.itemsWrapper, listItem);\n                        }\n                    }\n                }, 1);\n                this.highlightOptionChanged = false;\n            });\n        }\n    }\n\n    handleSuggestionsChange() {\n        if (this._suggestions != null && this.loading) {\n            this.highlightOption = null;\n            if (this._suggestions.length) {\n                this.noResults = false;\n                this.show();\n                this.suggestionsUpdated = true;\n\n                if (this.autoHighlight) {\n                    this.highlightOption = this._suggestions[0];\n                }\n            } else {\n                this.noResults = true;\n\n                if (this.showEmptyMessage) {\n                    this.show();\n                    this.suggestionsUpdated = true;\n                } else {\n                    this.hide();\n                }\n            }\n\n            this.loading = false;\n        }\n    }\n\n    ngAfterContentInit() {\n        (this.templates as QueryList<PrimeTemplate>).forEach((item) => {\n            switch (item.getType()) {\n                case 'item':\n                    this.itemTemplate = item.template;\n                    break;\n\n                case 'group':\n                    this.groupTemplate = item.template;\n                    break;\n\n                case 'selectedItem':\n                    this.selectedItemTemplate = item.template;\n                    break;\n\n                case 'header':\n                    this.headerTemplate = item.template;\n                    break;\n\n                case 'empty':\n                    this.emptyTemplate = item.template;\n                    break;\n\n                case 'footer':\n                    this.footerTemplate = item.template;\n                    break;\n\n                case 'loader':\n                    this.loaderTemplate = item.template;\n                    break;\n\n                case 'removetokenicon':\n                    this.removeIconTemplate = item.template;\n                    break;\n\n                case 'loadingicon':\n                    this.loadingIconTemplate = item.template;\n                    break;\n\n                case 'clearicon':\n                    this.clearIconTemplate = item.template;\n                    break;\n\n                case 'dropdownicon':\n                    this.dropdownIconTemplate = item.template;\n                    break;\n\n                default:\n                    this.itemTemplate = item.template;\n                    break;\n            }\n        });\n    }\n\n    writeValue(value: any): void {\n        this.value = value;\n        this.filled = this.value && this.value.length ? true : false;\n        this.updateInputField();\n        this.cd.markForCheck();\n    }\n\n    getOptionGroupChildren(optionGroup: any) {\n        return this.optionGroupChildren ? ObjectUtils.resolveFieldData(optionGroup, this.optionGroupChildren) : optionGroup.items;\n    }\n\n    getOptionGroupLabel(optionGroup: any) {\n        return this.optionGroupLabel ? ObjectUtils.resolveFieldData(optionGroup, this.optionGroupLabel) : optionGroup.label != undefined ? optionGroup.label : optionGroup;\n    }\n\n    registerOnChange(fn: Function): void {\n        this.onModelChange = fn;\n    }\n\n    registerOnTouched(fn: Function): void {\n        this.onModelTouched = fn;\n    }\n\n    setDisabledState(val: boolean): void {\n        this.disabled = val;\n        this.cd.markForCheck();\n    }\n\n    onInput(event: Event) {\n        // When an input element with a placeholder is clicked, the onInput event is invoked in IE.\n        if (!this.inputKeyDown && DomHandler.isIE()) {\n            return;\n        }\n\n        if (this.timeout) {\n            clearTimeout(this.timeout);\n        }\n\n        let value = (<HTMLInputElement>event.target).value;\n        this.inputValue = value;\n        if (!this.multiple && !this.forceSelection) {\n            this.onModelChange(value);\n        }\n\n        if (value.length === 0 && !this.multiple) {\n            this.value = null;\n            this.hide();\n            this.onClear.emit(event);\n            this.onModelChange(value);\n        }\n\n        if (value.length >= this.minLength) {\n            this.timeout = setTimeout(() => {\n                this.search(event, value);\n            }, this.delay);\n        } else {\n            this.hide();\n        }\n        this.updateFilledState();\n        this.inputKeyDown = false;\n    }\n\n    onInputClick(event: MouseEvent) {\n        this.inputClick = true;\n    }\n\n    search(event: any, query: string) {\n        //allow empty string but not undefined or null\n        if (query === undefined || query === null) {\n            return;\n        }\n\n        this.loading = true;\n\n        this.completeMethod.emit({\n            originalEvent: event,\n            query: query\n        });\n    }\n\n    selectItem(option: any, focus: boolean = true) {\n        if (this.forceSelectionUpdateModelTimeout) {\n            clearTimeout(this.forceSelectionUpdateModelTimeout);\n            this.forceSelectionUpdateModelTimeout = null;\n        }\n\n        if (this.multiple) {\n            (this.multiInputEl as ElementRef).nativeElement.value = '';\n            this.value = this.value || [];\n            if (!this.isSelected(option) || !this.unique) {\n                this.value = [...this.value, option];\n                this.onModelChange(this.value);\n            }\n        } else {\n            (this.inputEL as ElementRef).nativeElement.value = this.resolveFieldData(option);\n            this.value = option;\n            this.onModelChange(this.value);\n        }\n\n        this.onSelect.emit(option);\n        this.updateFilledState();\n\n        if (focus) {\n            this.itemClicked = true;\n            this.focusInput();\n        }\n\n        this.hide();\n    }\n\n    show(event?: Event) {\n        if (this.multiInputEl || this.inputEL) {\n            let hasFocus = this.multiple ? this.multiInputEl?.nativeElement.ownerDocument.activeElement == this.multiInputEl?.nativeElement : this.inputEL?.nativeElement.ownerDocument.activeElement == this.inputEL?.nativeElement;\n\n            if (!this.overlayVisible && hasFocus) {\n                this.overlayVisible = true;\n            }\n        }\n\n        this.onShow.emit(event);\n        this.cd.markForCheck();\n    }\n\n    clear() {\n        this.value = null;\n        this.inputValue = null;\n        if (this.multiple) {\n            (<ElementRef>this.multiInputEl).nativeElement.value = '';\n        } else {\n            this.inputValue = null;\n            (<ElementRef>this.inputEL).nativeElement.value = '';\n        }\n\n        this.updateFilledState();\n        this.onModelChange(this.value);\n        this.onClear.emit();\n    }\n\n    onOverlayAnimationStart(event: AnimationEvent) {\n        if (event.toState === 'visible') {\n            this.itemsWrapper = DomHandler.findSingle(this.overlayViewChild.overlayViewChild?.nativeElement, this.virtualScroll ? '.p-scroller' : '.p-autocomplete-panel');\n            this.virtualScroll && this.scroller?.setContentEl(this.itemsViewChild?.nativeElement);\n        }\n    }\n\n    resolveFieldData(value: any) {\n        let data = this.field ? ObjectUtils.resolveFieldData(value, this.field) : value;\n        return data !== (null || undefined) ? data : '';\n    }\n\n    hide(event?: any) {\n        this.overlayVisible = false;\n\n        this.onHide.emit(event);\n        this.cd.markForCheck();\n    }\n\n    handleDropdownClick(event: Event) {\n        if (!this.overlayVisible) {\n            this.focusInput();\n            let queryValue = this.multiple ? (this.multiInputEl as ElementRef).nativeElement.value : (this.inputEL as ElementRef).nativeElement.value;\n\n            if (this.dropdownMode === 'blank') this.search(event, '');\n            else if (this.dropdownMode === 'current') this.search(event, queryValue);\n\n            this.onDropdownClick.emit({\n                originalEvent: event,\n                query: queryValue\n            });\n        } else {\n            this.hide();\n        }\n    }\n\n    focusInput() {\n        if (this.multiple) (this.multiInputEl as ElementRef).nativeElement.focus();\n        else this.inputEL?.nativeElement.focus();\n    }\n\n    get emptyMessageLabel(): string {\n        return this.emptyMessage || this.config.getTranslation(TranslationKeys.EMPTY_MESSAGE);\n    }\n\n    removeItem(item: any) {\n        let itemIndex = DomHandler.index(item);\n        let removedValue = (this.value as object[])[itemIndex];\n        this.value = (this.value as object[]).filter((val: any, i: number) => i != itemIndex);\n        this.onModelChange(this.value);\n        this.updateFilledState();\n        this.onUnselect.emit(removedValue);\n    }\n\n    onKeydown(event: Event) {\n        if (this.overlayVisible) {\n            switch ((<KeyboardEvent>event).which) {\n                //down\n                case 40:\n                    if (this.group) {\n                        let highlightItemIndex = this.findOptionGroupIndex(this.highlightOption, this.suggestions);\n                        if (highlightItemIndex !== -1) {\n                            let nextItemIndex = highlightItemIndex.itemIndex + 1;\n                            if (nextItemIndex < this.getOptionGroupChildren(this.suggestions[highlightItemIndex.groupIndex]).length) {\n                                this.highlightOption = this.getOptionGroupChildren(this.suggestions[highlightItemIndex.groupIndex])[nextItemIndex];\n                                this.highlightOptionChanged = true;\n                            } else if (this.suggestions[highlightItemIndex.groupIndex + 1]) {\n                                this.highlightOption = this.getOptionGroupChildren(this.suggestions[highlightItemIndex.groupIndex + 1])[0];\n                                this.highlightOptionChanged = true;\n                            }\n                        } else {\n                            this.highlightOption = this.getOptionGroupChildren(this.suggestions[0])[0];\n                        }\n                    } else {\n                        let highlightItemIndex = this.findOptionIndex(this.highlightOption, this.suggestions);\n                        if (highlightItemIndex != -1) {\n                            var nextItemIndex = highlightItemIndex + 1;\n                            if (nextItemIndex != this.suggestions.length) {\n                                this.highlightOption = this.suggestions[nextItemIndex];\n                                this.highlightOptionChanged = true;\n                            }\n                        } else {\n                            this.highlightOption = this.suggestions[0];\n                        }\n                    }\n\n                    event.preventDefault();\n                    break;\n\n                //up\n                case 38:\n                    if (this.group) {\n                        let highlightItemIndex = this.findOptionGroupIndex(this.highlightOption, this.suggestions);\n                        if (highlightItemIndex !== -1) {\n                            let prevItemIndex = highlightItemIndex.itemIndex - 1;\n                            if (prevItemIndex >= 0) {\n                                this.highlightOption = this.getOptionGroupChildren(this.suggestions[highlightItemIndex.groupIndex])[prevItemIndex];\n                                this.highlightOptionChanged = true;\n                            } else if (prevItemIndex < 0) {\n                                let prevGroup = this.suggestions[highlightItemIndex.groupIndex - 1];\n                                if (prevGroup) {\n                                    this.highlightOption = this.getOptionGroupChildren(prevGroup)[this.getOptionGroupChildren(prevGroup).length - 1];\n                                    this.highlightOptionChanged = true;\n                                }\n                            }\n                        }\n                    } else {\n                        let highlightItemIndex = this.findOptionIndex(this.highlightOption, this.suggestions);\n\n                        if (highlightItemIndex > 0) {\n                            let prevItemIndex = highlightItemIndex - 1;\n                            this.highlightOption = this.suggestions[prevItemIndex];\n                            this.highlightOptionChanged = true;\n                        }\n                    }\n\n                    event.preventDefault();\n                    break;\n\n                //enter\n                case 13:\n                    if (this.highlightOption) {\n                        this.selectItem(this.highlightOption);\n                        this.hide();\n                    }\n                    event.preventDefault();\n                    break;\n\n                //escape\n                case 27:\n                    this.hide();\n                    event.preventDefault();\n                    break;\n\n                //tab\n                case 9:\n                    if (this.highlightOption) {\n                        this.selectItem(this.highlightOption);\n                    }\n                    this.hide();\n                    break;\n            }\n        } else {\n            if ((<KeyboardEvent>event).which === 40 && this.suggestions) {\n                this.search(event, (<HTMLInputElement>event.target).value);\n            } else if ((<KeyboardEvent>event).ctrlKey && (<KeyboardEvent>event).key === 'z' && !this.multiple) {\n                (this.inputEL as ElementRef).nativeElement.value = this.resolveFieldData(null);\n                this.value = '';\n                this.onModelChange(this.value);\n            } else if ((<KeyboardEvent>event).ctrlKey && (<KeyboardEvent>event).key === 'z' && this.multiple) {\n                (this.value as object[]).pop();\n                this.onModelChange(this.value);\n                this.updateFilledState();\n            }\n        }\n\n        if (this.multiple) {\n            switch ((<KeyboardEvent>event).which) {\n                //backspace\n                case 8:\n                    if (this.value && this.value.length && !this.multiInputEl?.nativeElement.value) {\n                        this.value = [...this.value] as object[];\n                        const removedValue = this.value.pop();\n                        this.onModelChange(this.value);\n                        this.updateFilledState();\n                        this.onUnselect.emit(removedValue);\n                    }\n                    break;\n            }\n        }\n\n        this.inputKeyDown = true;\n    }\n\n    onKeyup(event: KeyboardEvent) {\n        this.onKeyUp.emit(event);\n    }\n\n    onInputFocus(event: Event) {\n        if (!this.itemClicked && this.completeOnFocus) {\n            let queryValue = this.multiple ? this.multiInputEl?.nativeElement.value : this.inputEL?.nativeElement.value;\n            this.search(event, queryValue);\n        }\n\n        this.focus = true;\n        this.onFocus.emit(event);\n        this.itemClicked = false;\n    }\n\n    onInputBlur(event: Event) {\n        this.focus = false;\n        this.onModelTouched();\n        this.onBlur.emit(event);\n    }\n\n    onInputChange(event: Event) {\n        if (this.forceSelection) {\n            let valid = false;\n            const target = event.target as HTMLTextAreaElement;\n            let inputValue = target.value.trim();\n\n            if (this.suggestions) {\n                let suggestions = [...this.suggestions];\n                if (this.group) {\n                    let groupedSuggestions = this.suggestions.filter((s) => s[this.optionGroupChildren]).flatMap((s) => s[this.optionGroupChildren]);\n                    suggestions = suggestions.concat(groupedSuggestions);\n                }\n\n                for (let suggestion of suggestions) {\n                    let itemValue = this.field ? ObjectUtils.resolveFieldData(suggestion, this.field) : suggestion;\n                    if (itemValue && inputValue === itemValue.trim()) {\n                        valid = true;\n                        this.forceSelectionUpdateModelTimeout = setTimeout(() => {\n                            this.selectItem(suggestion, false);\n                        }, 250);\n                        break;\n                    }\n                }\n            }\n\n            if (!valid) {\n                if (this.multiple) {\n                    (<ElementRef>this.multiInputEl).nativeElement.value = '';\n                } else {\n                    this.value = null;\n                    (<ElementRef>this.inputEL).nativeElement.value = '';\n                }\n\n                this.onClear.emit(event);\n                this.onModelChange(this.value);\n                this.updateFilledState();\n            }\n        }\n    }\n\n    onInputPaste(event: ClipboardEvent) {\n        this.onKeydown(event);\n    }\n\n    isSelected(val: any): boolean {\n        let selected: boolean = false;\n        if (this.value && this.value.length) {\n            for (let i = 0; i < this.value.length; i++) {\n                if (ObjectUtils.equals(this.value[i], val, this.dataKey)) {\n                    selected = true;\n                    break;\n                }\n            }\n        }\n        return selected;\n    }\n\n    findOptionIndex(option: any, suggestions: any): number {\n        let index: number = -1;\n        if (suggestions) {\n            for (let i = 0; i < suggestions.length; i++) {\n                if (ObjectUtils.equals(option, suggestions[i])) {\n                    index = i;\n                    break;\n                }\n            }\n        }\n\n        return index;\n    }\n\n    findOptionGroupIndex(val: any, opts: any[]): any {\n        let groupIndex, itemIndex;\n\n        if (opts) {\n            for (let i = 0; i < opts.length; i++) {\n                groupIndex = i;\n                itemIndex = this.findOptionIndex(val, this.getOptionGroupChildren(opts[i]));\n\n                if (itemIndex !== -1) {\n                    break;\n                }\n            }\n        }\n\n        if (itemIndex !== -1) {\n            return { groupIndex: groupIndex, itemIndex: itemIndex };\n        } else {\n            return -1;\n        }\n    }\n\n    updateFilledState() {\n        if (this.multiple) this.filled = (this.value && this.value.length) || (this.multiInputEl && this.multiInputEl.nativeElement && this.multiInputEl.nativeElement.value != '');\n        else this.filled = (this.inputFieldValue && this.inputFieldValue != '') || (this.inputEL && this.inputEL.nativeElement && this.inputEL.nativeElement.value != '');\n    }\n\n    updateInputField() {\n        let formattedValue = this.resolveFieldData(this.value);\n        this.inputFieldValue = formattedValue;\n\n        if (this.inputEL && this.inputEL.nativeElement) {\n            this.inputEL.nativeElement.value = formattedValue;\n        }\n\n        this.updateFilledState();\n    }\n\n    ngOnDestroy() {\n        if (this.forceSelectionUpdateModelTimeout) {\n            clearTimeout(this.forceSelectionUpdateModelTimeout);\n            this.forceSelectionUpdateModelTimeout = null;\n        }\n\n        if (this.scrollHandler) {\n            this.scrollHandler.destroy();\n            this.scrollHandler = null;\n        }\n    }\n}\n\n@NgModule({\n    imports: [CommonModule, OverlayModule, InputTextModule, ButtonModule, SharedModule, RippleModule, ScrollerModule, AutoFocusModule, TimesCircleIcon, SpinnerIcon, TimesIcon, ChevronDownIcon],\n    exports: [AutoComplete, OverlayModule, SharedModule, ScrollerModule, AutoFocusModule],\n    declarations: [AutoComplete]\n})\nexport class AutoCompleteModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AA2Ca,MAAA,2BAA2B,GAAQ;AAC5C,IAAA,OAAO,EAAE,iBAAiB;AAC1B,IAAA,WAAW,EAAE,UAAU,CAAC,MAAM,YAAY,CAAC;AAC3C,IAAA,KAAK,EAAE,IAAI;EACb;AACF;;;AAGG;AACH,MAmMa,YAAY,CAAA;AAgbS,IAAA,QAAA,CAAA;AACnB,IAAA,EAAA,CAAA;AACA,IAAA,QAAA,CAAA;AACA,IAAA,EAAA,CAAA;AACA,IAAA,OAAA,CAAA;AACA,IAAA,MAAA,CAAA;AACA,IAAA,cAAA,CAAA;AACC,IAAA,IAAA,CAAA;AAtbZ;;;AAGG;IACM,SAAS,GAAW,CAAC,CAAC;AAC/B;;;AAGG;IACM,KAAK,GAAW,GAAG,CAAC;AAC7B;;;AAGG;AACM,IAAA,KAAK,CAA8C;AAC5D;;;AAGG;AACM,IAAA,UAAU,CAA8C;AACjE;;;AAGG;AACM,IAAA,UAAU,CAAqB;AACxC;;;AAGG;AACM,IAAA,eAAe,CAAqB;AAC7C;;;AAGG;AACM,IAAA,UAAU,CAA8C;AACjE;;;AAGG;AACM,IAAA,OAAO,CAAqB;AACrC;;;AAGG;AACM,IAAA,eAAe,CAAqB;AAC7C;;;AAGG;AACM,IAAA,