primeng/fesm2022/primeng-autocomplete.mjs.map

PrimeNG is an open source UI library for Angular featuring a rich set of 80+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with PrimeB

{"version":3,"file":"primeng-autocomplete.mjs","sources":["../../src/autocomplete/style/autocompletestyle.ts","../../src/autocomplete/autocomplete.ts","../../src/autocomplete/primeng-autocomplete.ts"],"sourcesContent":["import { Injectable } from '@angular/core';\nimport { style } from '@primeuix/styles/autocomplete';\nimport { BaseStyle } from 'primeng/base';\n\nconst theme = /*css*/ `\n    ${style}\n\n    /* For PrimeNG */\n    p-autoComplete.ng-invalid.ng-dirty .p-autocomplete-input,\n    p-autoComplete.ng-invalid.ng-dirty .p-autocomplete-input-multiple,\n    p-auto-complete.ng-invalid.ng-dirty .p-autocomplete-input,\n    p-auto-complete.ng-invalid.ng-dirty .p-autocomplete-input-multiple p-autocomplete.ng-invalid.ng-dirty .p-autocomplete-input,\n    p-autocomplete.ng-invalid.ng-dirty .p-autocomplete-input-multiple {\n        border-color: dt('autocomplete.invalid.border.color');\n    }\n\n    p-autoComplete.ng-invalid.ng-dirty .p-autocomplete-input:enabled:focus,\n    p-autoComplete.ng-invalid.ng-dirty:not(.p-disabled).p-focus .p-autocomplete-input-multiple,\n    p-auto-complete.ng-invalid.ng-dirty .p-autocomplete-input:enabled:focus,\n    p-auto-complete.ng-invalid.ng-dirty:not(.p-disabled).p-focus .p-autocomplete-input-multiple,\n    p-autocomplete.ng-invalid.ng-dirty .p-autocomplete-input:enabled:focus,\n    p-autocomplete.ng-invalid.ng-dirty:not(.p-disabled).p-focus .p-autocomplete-input-multiple {\n        border-color: dt('autocomplete.focus.border.color');\n    }\n\n    p-autoComplete.ng-invalid.ng-dirty .p-autocomplete-input-chip input::placeholder,\n    p-auto-complete.ng-invalid.ng-dirty .p-autocomplete-input-chip input::placeholder,\n    p-autocomplete.ng-invalid.ng-dirty .p-autocomplete-input-chip input::placeholder {\n        color: dt('autocomplete.invalid.placeholder.color');\n    }\n\n    p-autoComplete.ng-invalid.ng-dirty .p-autocomplete-input::placeholder,\n    p-auto-complete.ng-invalid.ng-dirty .p-autocomplete-input::placeholder,\n    p-autocomplete.ng-invalid.ng-dirty .p-autocomplete-input::placeholder {\n        color: dt('autocomplete.invalid.placeholder.color');\n    }\n`;\n\nconst inlineStyles = {\n    root: { position: 'relative' }\n};\n\nconst classes = {\n    root: ({ instance }) => [\n        'p-autocomplete p-component p-inputwrapper',\n        {\n            'p-invalid': instance.invalid(),\n            'p-focus': instance.focused,\n            'p-inputwrapper-filled': instance.$filled(),\n            'p-inputwrapper-focus': (instance.focused && !instance.$disabled()) || instance.autofocus || instance.overlayVisible,\n            'p-autocomplete-open': instance.overlayVisible,\n            'p-autocomplete-clearable': instance.showClear && !instance.$disabled(),\n            'p-autocomplete-fluid': instance.hasFluid\n        }\n    ],\n    pcInputText: 'p-autocomplete-input',\n    inputMultiple: ({ instance }) => [\n        'p-autocomplete-input-multiple',\n        {\n            'p-disabled': instance.$disabled(),\n            'p-variant-filled': instance.$variant() === 'filled'\n        }\n    ],\n    chipItem: ({ instance, i }) => [\n        'p-autocomplete-chip-item',\n        {\n            'p-focus': instance.focusedMultipleOptionIndex() === i\n        }\n    ],\n    pcChip: 'p-autocomplete-chip',\n    chipIcon: 'p-autocomplete-chip-icon',\n    inputChip: 'p-autocomplete-input-chip',\n    loader: 'p-autocomplete-loader',\n    dropdown: 'p-autocomplete-dropdown',\n    overlay: ({ instance }) => ['p-autocomplete-overlay p-component-overlay p-component', { 'p-input-filled': instance.$variant() === 'filled', 'p-ripple-disabled': instance.config.ripple() === false }],\n    listContainer: 'p-autocomplete-list-container',\n    list: 'p-autocomplete-list',\n    optionGroup: 'p-autocomplete-option-group',\n    option: ({ instance, option, i, scrollerOptions }) => ({\n        'p-autocomplete-option': true,\n        'p-autocomplete-option-selected': instance.isSelected(option),\n        'p-focus': instance.focusedOptionIndex() === instance.getOptionIndex(i, scrollerOptions),\n        'p-disabled': instance.isOptionDisabled(option)\n    }),\n    emptyMessage: 'p-autocomplete-empty-message',\n    clearIcon: 'p-autocomplete-clear-icon'\n};\n\n@Injectable()\nexport class AutoCompleteStyle extends BaseStyle {\n    name = 'autocomplete';\n\n    theme = theme;\n\n    classes = classes;\n\n    inlineStyles = inlineStyles;\n}\n\n/**\n *\n * AutoComplete is an input component that provides real-time suggestions while being typed.\n *\n * [Live Demo](https://www.primeng.org/autocomplete/)\n *\n * @module autocompletestyle\n *\n */\nexport enum AutoCompleteClasses {\n    /**\n     * Class name of the root element\n     */\n    root = 'p-autocomplete',\n    /**\n     * Class name of the input element\n     */\n    pcInputText = 'p-autocomplete-input',\n    /**\n     * Class name of the input multiple element\n     */\n    inputMultiple = 'p-autocomplete-input-multiple',\n    /**\n     * Class name of the chip item element\n     */\n    chipItem = 'p-autocomplete-chip-item',\n    /**\n     * Class name of the chip element\n     */\n    pcChip = 'p-autocomplete-chip',\n    /**\n     * Class name of the chip icon element\n     */\n    chipIcon = 'p-autocomplete-chip-icon',\n    /**\n     * Class name of the input chip element\n     */\n    inputChip = 'p-autocomplete-input-chip',\n    /**\n     * Class name of the loader element\n     */\n    loader = 'p-autocomplete-loader',\n    /**\n     * Class name of the dropdown element\n     */\n    dropdown = 'p-autocomplete-dropdown',\n    /**\n     * Class name of the panel element\n     */\n    panel = 'p-autocomplete-overlay',\n    /**\n     * Class name of the list element\n     */\n    list = 'p-autocomplete-list',\n    /**\n     * Class name of the option group element\n     */\n    optionGroup = 'p-autocomplete-option-group',\n    /**\n     * Class name of the option element\n     */\n    option = 'p-autocomplete-option',\n    /**\n     * Class name of the empty message element\n     */\n    emptyMessage = 'p-autocomplete-empty-message',\n    /**\n     * Class name of the clear icon\n     */\n    clearIcon = 'p-autocomplete-clear-icon'\n}\n\nexport interface AutoCompleteStyle extends BaseStyle {}\n","import { AnimationEvent } from '@angular/animations';\nimport { CommonModule } from '@angular/common';\nimport {\n    AfterContentInit,\n    AfterViewChecked,\n    booleanAttribute,\n    ChangeDetectionStrategy,\n    Component,\n    computed,\n    ContentChild,\n    ContentChildren,\n    ElementRef,\n    EventEmitter,\n    forwardRef,\n    HostListener,\n    inject,\n    input,\n    Input,\n    NgModule,\n    NgZone,\n    numberAttribute,\n    OnDestroy,\n    Output,\n    QueryList,\n    signal,\n    TemplateRef,\n    ViewChild,\n    ViewEncapsulation\n} from '@angular/core';\nimport { NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { equals, findLastIndex, findSingle, focus, isEmpty, isNotEmpty, resolveFieldData, uuid } from '@primeuix/utils';\nimport { OverlayOptions, OverlayService, PrimeTemplate, ScrollerOptions, SharedModule, TranslationKeys } from 'primeng/api';\nimport { AutoFocus } from 'primeng/autofocus';\nimport { BaseInput } from 'primeng/baseinput';\nimport { Chip } from 'primeng/chip';\nimport { PrimeNG } from 'primeng/config';\nimport { ConnectedOverlayScrollHandler } from 'primeng/dom';\nimport { ChevronDownIcon, SpinnerIcon, TimesCircleIcon, TimesIcon } from 'primeng/icons';\nimport { InputText } from 'primeng/inputtext';\nimport { Overlay } from 'primeng/overlay';\nimport { Ripple } from 'primeng/ripple';\nimport { Scroller } from 'primeng/scroller';\nimport { Nullable } from 'primeng/ts-helpers';\nimport { AutoCompleteCompleteEvent, AutoCompleteDropdownClickEvent, AutoCompleteLazyLoadEvent, AutoCompleteSelectEvent, AutoCompleteUnselectEvent } from './autocomplete.interface';\nimport { AutoCompleteStyle } from './style/autocompletestyle';\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, p-autocomplete, p-auto-complete',\n    standalone: true,\n    imports: [CommonModule, Overlay, InputText, Ripple, Scroller, AutoFocus, TimesCircleIcon, SpinnerIcon, ChevronDownIcon, Chip, SharedModule, TimesIcon],\n    template: `\n        <input\n            *ngIf=\"!multiple\"\n            #focusInput\n            [pAutoFocus]=\"autofocus\"\n            pInputText\n            [class]=\"cn(cx('pcInputText'), inputStyleClass)\"\n            [ngStyle]=\"inputStyle\"\n            [attr.type]=\"type\"\n            [attr.value]=\"inputValue()\"\n            [variant]=\"$variant()\"\n            [invalid]=\"invalid()\"\n            [attr.id]=\"inputId\"\n            [attr.autocomplete]=\"autocomplete\"\n            aria-autocomplete=\"list\"\n            role=\"combobox\"\n            [attr.placeholder]=\"placeholder\"\n            [attr.name]=\"name()\"\n            [attr.minlength]=\"minlength()\"\n            [pSize]=\"size()\"\n            [attr.min]=\"min()\"\n            [attr.max]=\"max()\"\n            [attr.pattern]=\"pattern()\"\n            [attr.size]=\"inputSize()\"\n            [attr.maxlength]=\"maxlength()\"\n            [attr.tabindex]=\"!$disabled() ? tabindex : -1\"\n            [attr.required]=\"required() ? '' : undefined\"\n            [attr.readonly]=\"readonly ? '' : undefined\"\n            [attr.disabled]=\"$disabled() ? '' : undefined\"\n            [attr.aria-label]=\"ariaLabel\"\n            [attr.aria-labelledby]=\"ariaLabelledBy\"\n            [attr.aria-required]=\"required()\"\n            [attr.aria-expanded]=\"overlayVisible ?? false\"\n            [attr.aria-controls]=\"overlayVisible ? id + '_list' : null\"\n            [attr.aria-activedescendant]=\"focused ? focusedOptionId : undefined\"\n            (input)=\"onInput($event)\"\n            (keydown)=\"onKeyDown($event)\"\n            (change)=\"onInputChange($event)\"\n            (focus)=\"onInputFocus($event)\"\n            (blur)=\"onInputBlur($event)\"\n            (paste)=\"onInputPaste($event)\"\n            (keyup)=\"onInputKeyUp($event)\"\n            [fluid]=\"hasFluid\"\n        />\n        <ng-container *ngIf=\"$filled() && !$disabled() && showClear && !loading\">\n            <svg data-p-icon=\"times\" *ngIf=\"!clearIconTemplate && !_clearIconTemplate\" [class]=\"cx('clearIcon')\" (click)=\"clear()\" [attr.aria-hidden]=\"true\" />\n            <span *ngIf=\"clearIconTemplate || _clearIconTemplate\" [class]=\"cx('clearIcon')\" (click)=\"clear()\" [attr.aria-hidden]=\"true\">\n                <ng-template *ngTemplateOutlet=\"clearIconTemplate || _clearIconTemplate\"></ng-template>\n            </span>\n        </ng-container>\n\n        <ul\n            *ngIf=\"multiple\"\n            #multiContainer\n            [class]=\"cx('inputMultiple')\"\n            [tabindex]=\"-1\"\n            role=\"listbox\"\n            [attr.aria-orientation]=\"'horizontal'\"\n            [attr.aria-activedescendant]=\"focused ? focusedMultipleOptionId : undefined\"\n            (focus)=\"onMultipleContainerFocus($event)\"\n            (blur)=\"onMultipleContainerBlur($event)\"\n            (keydown)=\"onMultipleContainerKeyDown($event)\"\n        >\n            <li\n                #token\n                *ngFor=\"let option of modelValue(); let i = index\"\n                [class]=\"cx('chipItem', { i })\"\n                [attr.id]=\"id + '_multiple_option_' + i\"\n                role=\"option\"\n                [attr.aria-label]=\"getOptionLabel(option)\"\n                [attr.aria-setsize]=\"modelValue().length\"\n                [attr.aria-posinset]=\"i + 1\"\n                [attr.aria-selected]=\"true\"\n            >\n                <p-chip [class]=\"cx('pcChip')\" [label]=\"!selectedItemTemplate && !_selectedItemTemplate && getOptionLabel(option)\" [removable]=\"true\" (onRemove)=\"!readonly ? removeOption($event, i) : ''\">\n                    <ng-container *ngTemplateOutlet=\"selectedItemTemplate || _selectedItemTemplate; context: { $implicit: option }\"></ng-container>\n                    <ng-template #removeicon>\n                        <span *ngIf=\"!removeIconTemplate && !_removeIconTemplate\" [class]=\"cx('chipIcon')\" (click)=\"!readonly ? removeOption($event, i) : ''\">\n                            <svg data-p-icon=\"times-circle\" [class]=\"cx('chipIcon')\" [attr.aria-hidden]=\"true\" />\n                        </span>\n                        <span *ngIf=\"removeIconTemplate || _removeIconTemplate\" [attr.aria-hidden]=\"true\">\n                            <ng-template *ngTemplateOutlet=\"removeIconTemplate || _removeIconTemplate; context: { removeCallback: removeOption.bind(this), index: i, class: cx('chipIcon') }\"></ng-template>\n                        </span>\n                    </ng-template>\n                </p-chip>\n            </li>\n            <li [class]=\"cx('inputChip')\" role=\"option\">\n                <input\n                    #focusInput\n                    [pAutoFocus]=\"autofocus\"\n                    [class]=\"cx('pcInputText')\"\n                    [ngStyle]=\"inputStyle\"\n                    [attr.type]=\"type\"\n                    [attr.id]=\"inputId\"\n                    [attr.autocomplete]=\"autocomplete\"\n                    [attr.name]=\"name()\"\n                    [attr.minlength]=\"minlength()\"\n                    [attr.maxlength]=\"maxlength()\"\n                    [attr.size]=\"size()\"\n                    [attr.min]=\"min()\"\n                    [attr.max]=\"max()\"\n                    [attr.pattern]=\"pattern()\"\n                    role=\"combobox\"\n                    [attr.placeholder]=\"!$filled() ? placeholder : null\"\n                    aria-autocomplete=\"list\"\n                    [attr.tabindex]=\"!$disabled() ? tabindex : -1\"\n                    [attr.required]=\"required() ? '' : undefined\"\n                    [attr.readonly]=\"readonly ? '' : undefined\"\n                    [attr.disabled]=\"$disabled() ? '' : undefined\"\n                    [attr.aria-label]=\"ariaLabel\"\n                    [attr.aria-labelledby]=\"ariaLabelledBy\"\n                    [attr.aria-required]=\"required()\"\n                    [attr.aria-expanded]=\"overlayVisible ?? false\"\n                    [attr.aria-controls]=\"overlayVisible ? id + '_list' : null\"\n                    [attr.aria-activedescendant]=\"focused ? focusedOptionId : undefined\"\n                    (input)=\"onInput($event)\"\n                    (keydown)=\"onKeyDown($event)\"\n                    (change)=\"onInputChange($event)\"\n                    (focus)=\"onInputFocus($event)\"\n                    (blur)=\"onInputBlur($event)\"\n                    (paste)=\"onInputPaste($event)\"\n                    (keyup)=\"onInputKeyUp($event)\"\n                />\n            </li>\n        </ul>\n        <ng-container *ngIf=\"loading\">\n            <svg data-p-icon=\"spinner\" *ngIf=\"!loadingIconTemplate && !_loadingIconTemplate\" [class]=\"cx('loader')\" [spin]=\"true\" [attr.aria-hidden]=\"true\" />\n            <span *ngIf=\"loadingIconTemplate || _loadingIconTemplate\" [class]=\"cx('loader')\" [attr.aria-hidden]=\"true\">\n                <ng-template *ngTemplateOutlet=\"loadingIconTemplate || _loadingIconTemplate\"></ng-template>\n            </span>\n        </ng-container>\n        <button #ddBtn type=\"button\" [attr.aria-label]=\"dropdownAriaLabel\" [class]=\"cx('dropdown')\" [disabled]=\"$disabled()\" pRipple (click)=\"handleDropdownClick($event)\" *ngIf=\"dropdown\" [attr.tabindex]=\"tabindex\">\n            <span *ngIf=\"dropdownIcon\" [ngClass]=\"dropdownIcon\" [attr.aria-hidden]=\"true\"></span>\n            <ng-container *ngIf=\"!dropdownIcon\">\n                <svg data-p-icon=\"chevron-down\" *ngIf=\"!dropdownIconTemplate && !_dropdownIconTemplate\" />\n                <ng-template *ngTemplateOutlet=\"dropdownIconTemplate || _dropdownIconTemplate\"></ng-template>\n            </ng-container>\n        </button>\n        <p-overlay\n            #overlay\n            [hostAttrSelector]=\"attrSelector\"\n            [(visible)]=\"overlayVisible\"\n            [options]=\"overlayOptions\"\n            [target]=\"'@parent'\"\n            [appendTo]=\"$appendTo()\"\n            [showTransitionOptions]=\"showTransitionOptions\"\n            [hideTransitionOptions]=\"hideTransitionOptions\"\n            (onAnimationStart)=\"onOverlayAnimationStart($event)\"\n            (onHide)=\"hide()\"\n        >\n            <ng-template #content>\n                <div [class]=\"cn(cx('overlay'), panelStyleClass)\" [ngStyle]=\"panelStyle\">\n                    <ng-container *ngTemplateOutlet=\"headerTemplate || _headerTemplate\"></ng-container>\n                    <div [class]=\"cx('listContainer')\" [style.max-height]=\"virtualScroll ? 'auto' : scrollHeight\">\n                        <p-scroller\n                            *ngIf=\"virtualScroll\"\n                            #scroller\n                            [items]=\"visibleOptions()\"\n                            [style]=\"{ height: scrollHeight }\"\n                            [itemSize]=\"virtualScrollItemSize\"\n                            [autoSize]=\"true\"\n                            [lazy]=\"lazy\"\n                            (onLazyLoad)=\"onLazyLoad.emit($event)\"\n                            [options]=\"virtualScrollOptions\"\n                        >\n                            <ng-template #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 || _loaderTemplate\">\n                                <ng-template #loader let-scrollerOptions=\"options\">\n                                    <ng-container *ngTemplateOutlet=\"loaderTemplate || _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: visibleOptions(), options: {} }\"></ng-container>\n                        </ng-container>\n                    </div>\n\n                    <ng-template #buildInItems let-items let-scrollerOptions=\"options\">\n                        <ul #items [class]=\"cn(cx('list'), scrollerOptions.contentStyleClass)\" [style]=\"scrollerOptions.contentStyle\" role=\"listbox\" [attr.id]=\"id + '_list'\" [attr.aria-label]=\"listLabel\">\n                            <ng-template ngFor let-option [ngForOf]=\"items\" let-i=\"index\">\n                                <ng-container *ngIf=\"isOptionGroup(option)\">\n                                    <li [attr.id]=\"id + '_' + getOptionIndex(i, scrollerOptions)\" [class]=\"cx('optionGroup')\" [ngStyle]=\"{ height: scrollerOptions.itemSize + 'px' }\" role=\"option\">\n                                        <span *ngIf=\"!groupTemplate\">{{ getOptionGroupLabel(option.optionGroup) }}</span>\n                                        <ng-container *ngTemplateOutlet=\"groupTemplate; context: { $implicit: option.optionGroup }\"></ng-container>\n                                    </li>\n                                </ng-container>\n                                <ng-container *ngIf=\"!isOptionGroup(option)\">\n                                    <li\n                                        pRipple\n                                        [ngStyle]=\"{ height: scrollerOptions.itemSize + 'px' }\"\n                                        [class]=\"cx('option', { option, i, scrollerOptions })\"\n                                        [attr.id]=\"id + '_' + getOptionIndex(i, scrollerOptions)\"\n                                        role=\"option\"\n                                        [attr.aria-label]=\"getOptionLabel(option)\"\n                                        [attr.aria-selected]=\"isSelected(option)\"\n                                        [attr.aria-disabled]=\"isOptionDisabled(option)\"\n                                        [attr.data-p-focused]=\"focusedOptionIndex() === getOptionIndex(i, scrollerOptions)\"\n                                        [attr.aria-setsize]=\"ariaSetSize\"\n                                        [attr.aria-posinset]=\"getAriaPosInset(getOptionIndex(i, scrollerOptions))\"\n                                        (click)=\"onOptionSelect($event, option)\"\n                                        (mouseenter)=\"onOptionMouseEnter($event, getOptionIndex(i, scrollerOptions))\"\n                                    >\n                                        <span *ngIf=\"!itemTemplate && !_itemTemplate\">{{ getOptionLabel(option) }}</span>\n                                        <ng-container\n                                            *ngTemplateOutlet=\"\n                                                itemTemplate || _itemTemplate;\n                                                context: {\n                                                    $implicit: option,\n                                                    index: scrollerOptions.getOptions ? scrollerOptions.getOptions(i) : i\n                                                }\n                                            \"\n                                        ></ng-container>\n                                    </li>\n                                </ng-container>\n                            </ng-template>\n                            <li *ngIf=\"!items || (items && items.length === 0 && showEmptyMessage)\" [class]=\"cx('emptyMessage')\" [ngStyle]=\"{ height: scrollerOptions.itemSize + 'px' }\" role=\"option\">\n                                <ng-container *ngIf=\"!emptyTemplate && !_emptyTemplate; else empty\">\n                                    {{ searchResultMessageText }}\n                                </ng-container>\n                                <ng-container #empty *ngTemplateOutlet=\"emptyTemplate || _emptyTemplate\"></ng-container>\n                            </li>\n                        </ul>\n                    </ng-template>\n                    <ng-container *ngTemplateOutlet=\"footerTemplate || _footerTemplate\"></ng-container>\n                </div>\n                <span role=\"status\" aria-live=\"polite\" class=\"p-hidden-accessible\">\n                    {{ selectedMessageText }}\n                </span>\n            </ng-template>\n        </p-overlay>\n    `,\n    providers: [AUTOCOMPLETE_VALUE_ACCESSOR, AutoCompleteStyle],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n    host: {\n        '[class]': \"cn(cx('root'), styleClass)\",\n        '[style]': \"sx('root')\"\n    }\n})\nexport class AutoComplete extends BaseInput implements AfterViewChecked, AfterContentInit, OnDestroy {\n    /**\n     * Minimum number of characters to initiate a search.\n     * @deprecated since v20.0.0, use `minQueryLength` instead.\n     * @group Props\n     */\n    @Input({ transform: numberAttribute }) minLength: number = 1;\n    /**\n     * Minimum number of characters to initiate a search.\n     * @group Props\n     */\n    @Input({ transform: numberAttribute }) minQueryLength: number | undefined;\n    /**\n     * Delay between keystrokes to wait before sending a query.\n     * @group Props\n     */\n    @Input({ transform: numberAttribute }) delay: number = 300;\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     * @deprecated since v20.0.0, use `class` instead.\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({ transform: booleanAttribute }) readonly: 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({ transform: booleanAttribute }) lazy: boolean = false;\n    /**\n     * Whether the data should be loaded on demand during scroll.\n     * @group Props\n     */\n    @Input({ transform: booleanAttribute }) virtualScroll: boolean | undefined;\n    /**\n     * Height of an item in the list for VirtualScrolling.\n     * @group Props\n     */\n    @Input({ transform: numberAttribute }) 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     * When enabled, highlights the first item in the list by default.\n     * @group Props\n     */\n    @Input({ transform: booleanAttribute }) 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({ transform: booleanAttribute }) 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({ transform: booleanAttribute }) autoZIndex: boolean = true;\n    /**\n     * Base zIndex value to use in layering.\n     * @group Props\n     */\n    @Input({ transform: numberAttribute }) 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({ transform: booleanAttribute }) unique: boolean = true;\n    /**\n     * Whether to display options as grouped when nested options are provided.\n     * @group Props\n     */\n    @Input({ transform: booleanAttribute }) group: boolean | undefined;\n    /**\n     * Whether to run a query when input receives focus.\n     * @group Props\n     */\n    @Input({ transform: booleanAttribute }) completeOnFocus: boolean = false;\n    /**\n     * When enabled, a clear icon is displayed to clear the value.\n     * @group Props\n     */\n    @Input({ transform: booleanAttribute }) showClear: boolean = false;\n    /**\n     * Displays a button next to the input field when enabled.\n     * @group Props\n     */\n    @Input({ transform: booleanAttribute }) dropdown: boolean | undefined;\n    /**\n     * Whether to show the empty message or not.\n     * @group Props\n     */\n    @Input({ transform: booleanAttribute }) showEmptyMessage: boolean | undefined = true;\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({ transform: booleanAttribute }) multiple: boolean | undefined;\n    /**\n     * Index of the element in tabbing order.\n     * @group Props\n     */\n    @Input({ transform: numberAttribute }) 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({ transform: booleanAttribute }) 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 = 'items';\n    /**\n     * Name of the label field of an option group.\n     * @group Props\n     */\n    @Input() optionGroupLabel: string | undefined = 'label';\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.set(value);\n        this.handleSuggestionsChange();\n    }\n    /**\n     * Property name or getter function to use as the label of an option.\n     * @group Props\n     */\n    @Input() optionLabel: string | ((item: any) => string) | undefined;\n    /**\n     * Property name or getter function to use as the value of an option.\n     * @group Props\n     */\n    @Input() optionValue: string | ((item: any) => string) | undefined;\n    /**\n     * Unique identifier of the component.\n     * @group Props\n     */\n    @Input() id: string | undefined;\n    /**\n     * Text to display when the search is active. Defaults to global value in i18n translation configuration.\n     * @group Props\n     * @defaultValue '{0} results are available'\n     */\n    @Input() searchMessage: string | undefined;\n    /**\n     * Text to display when filtering does not return any results. Defaults to global value in i18n translation configuration.\n     * @group Props\n     * @defaultValue 'No selected item'\n     */\n    @Input() emptySelectionMessage: string | undefined;\n    /**\n     * Text to be displayed in hidden accessible field when options are selected. Defaults to global value in i18n translation configuration.\n     * @group Props\n     * @defaultValue '{0} items selected'\n     */\n    @Input() selectionMessage: string | undefined;\n    /**\n     * Whether to focus on the first visible or selected element when the overlay panel is shown.\n     * @group Props\n     */\n    @Input({ transform: booleanAttribute }) autoOptionFocus: boolean | undefined = false;\n    /**\n     * When enabled, the focused option is selected.\n     * @group Props\n     */\n    @Input({ transform: booleanAttribute }) selectOnFocus: boolean | undefined;\n    /**\n     * Locale to use in searching. The default locale is the host environment's current locale.\n     * @group Props\n     */\n    @Input({ transform: booleanAttribute }) searchLocale: boolean | undefined;\n    /**\n     * Property name or getter function to use as the disabled flag of an option, defaults to false when not defined.\n     * @group Props\n     */\n    @Input() optionDisabled: string | ((item: any) => string) | undefined;\n    /**\n     * When enabled, the hovered option will be focused.\n     * @group Props\n     */\n    @Input({ transform: booleanAttribute }) focusOnHover: boolean | undefined = true;\n    /**\n     * Whether typeahead is active or not.\n     * @defaultValue true\n     * @group Props\n     */\n    @Input({ transform: booleanAttribute }) typeahead: boolean = true;\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     * @defaultValue 'self'\n     * @group Props\n     */\n    appendTo = input<HTMLElement | ElementRef | TemplateRef<any> | 'self' | 'body' | null | undefined | any>(undefined);\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 {AutoCompleteSelectEvent} event - custom select event.\n     * @group Emits\n     */\n    @Output() onSelect: EventEmitter<AutoCompleteSelectEvent> = new EventEmitter<AutoCompleteSelectEvent>();\n    /**\n     * Callback to invoke when a selected value is removed.\n     * @param {AutoCompleteUnselectEvent} event - custom unselect event.\n     * @group Emits\n     */\n    @Output() onUnselect: EventEmitter<AutoCompleteUnselectEvent> = new EventEmitter<AutoCompleteUnselectEvent>();\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('focusInput') 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    itemsWrapper: Nullable<HTMLDivElement>;\n\n    /**\n     * Custom item template.\n     * @group Templates\n     */\n    @ContentChild('item') itemTemplate: Nullable<TemplateRef<any>>;\n\n    /**\n     * Custom empty message template.\n     * @group Templates\n     */\n    @ContentChild('empty') emptyTemplate: Nullable<TemplateRef<any>>;\n\n    /**\n     * Custom header template.\n     * @group Templates\n     */\n    @ContentChild('header') headerTemplate: Nullable<TemplateRef<any>>;\n\n    /**\n     * Custom footer template.\n     * @group Templates\n     */\n    @ContentChild('footer') footerTemplate: Nullable<TemplateRef<any>>;\n\n    /**\n     * Custom selected item template.\n     * @group Templates\n     */\n    @ContentChild('selecteditem') selectedItemTemplate: Nullable<TemplateRef<any>>;\n\n    /**\n     * Custom group item template.\n     * @group Templates\n     */\n    @ContentChild('group') groupTemplate: Nullable<TemplateRef<any>>;\n\n    /**\n     * Custom loader template.\n     * @group Templates\n     */\n    @ContentChild('loader') loaderTemplate: Nullable<TemplateRef<any>>;\n\n    /**\n     * Custom remove icon template.\n     * @group Templates\n     */\n    @ContentChild('removeicon') removeIconTemplate: Nullable<TemplateRef<any>>;\n\n    /**\n     * Custom loading icon template.\n     * @group Templates\n     */\n    @ContentChild('loadingicon') loadingIconTemplate: Nullable<TemplateRef<any>>;\n\n    /**\n     * Custom clear icon template.\n     * @group Templates\n     */\n    @ContentChild('clearicon') clearIconTemplate: Nullable<TemplateRef<any>>;\n\n    /**\n     * Custom dropdown icon template.\n     * @group Templates\n     */\n    @ContentChild('dropdownicon') dropdownIconTemplate: Nullable<TemplateRef<any>>;\n\n    @HostListener('click', ['$event'])\n    onHostClick(event: MouseEvent) {\n        this.onContainerClick(event);\n    }\n\n    private primeng = inject(PrimeNG);\n\n    value: string | any;\n\n    _suggestions = signal<any>(null);\n\n    timeout: Nullable<any>;\n\n    overlayVisible: boolean | undefined;\n\n    suggestionsUpdated: Nullable<boolean>;\n\n    highlightOption: any;\n\n    highlightOptionChanged: Nullable<boolean>;\n\n    focused: boolean = false;\n\n    loading: Nullable<boolean>;\n\n    scrollHandler: Nullable<ConnectedOverlayScrollHandler>;\n\n    listId: string | undefined;\n\n    searchTimeout: any;\n\n    dirty: boolean = false;\n\n    _itemTemplate: TemplateRef<any>;\n\n    _groupTemplate: TemplateRef<any>;\n\n    _selectedItemTemplate: TemplateRef<any>;\n\n    _headerTemplate: TemplateRef<any>;\n\n    _emptyTemplate: TemplateRef<any>;\n\n    _footerTemplate: TemplateRef<any>;\n\n    _loaderTemplate: TemplateRef<any>;\n\n    _removeIconTemplate: TemplateRef<any>;\n\n    _loadingIconTemplate: TemplateRef<any>;\n\n    _clearIconTemplate: TemplateRef<any>;\n\n    _dropdownIconTemplate: TemplateRef<any>;\n\n    focusedMultipleOptionIndex = signal<number>(-1);\n\n    focusedOptionIndex = signal<number>(-1);\n\n    _componentStyle = inject(AutoCompleteStyle);\n\n    $appendTo = computed(() => this.appendTo() || this.config.overlayAppendTo());\n\n    visibleOptions = computed(() => {\n        return this.group ? this.flatOptions(this._suggestions()) : this._suggestions() || [];\n    });\n\n    inputValue = computed(() => {\n        const modelValue = this.modelValue();\n        const selectedOption = this.optionValueSelected ? (this.suggestions || []).find((item: any) => resolveFieldData(item, this.optionValue) === modelValue) : modelValue;\n\n        if (isNotEmpty(modelValue)) {\n            if (typeof modelValue === 'object' || this.optionValueSelected) {\n                const label = this.getOptionLabel(selectedOption);\n\n                return label != null ? label : modelValue;\n            } else {\n                return modelValue;\n            }\n        } else {\n            return '';\n        }\n    });\n\n    get focusedMultipleOptionId() {\n        return this.focusedMultipleOptionIndex() !== -1 ? `${this.id}_multiple_option_${this.focusedMultipleOptionIndex()}` : null;\n    }\n\n    get focusedOptionId() {\n        return this.focusedOptionIndex() !== -1 ? `${this.id}_${this.focusedOptionIndex()}` : null;\n    }\n\n    get searchResultMessageText() {\n        return isNotEmpty(this.visibleOptions()) && this.overlayVisible ? this.searchMessageText.replaceAll('{0}', this.visibleOptions().length) : this.emptySearchMessageText;\n    }\n\n    get searchMessageText() {\n        return this.searchMessage || this.config.translation.searchMessage || '';\n    }\n\n    get emptySearchMessageText() {\n        return this.emptyMessage || this.config.translation.emptySearchMessage || '';\n    }\n\n    get selectionMessageText() {\n        return this.selectionMessage || this.config.translation.selectionMessage || '';\n    }\n\n    get emptySelectionMessageText() {\n        return this.emptySelectionMessage || this.config.translation.emptySelectionMessage || '';\n    }\n\n    get selectedMessageText() {\n        return this.hasSelectedOption() ? this.selectionMessageText.replaceAll('{0}', this.multiple ? this.modelValue()?.length : '1') : this.emptySelectionMessageText;\n    }\n\n    get ariaSetSize() {\n        return this.visibleOptions().filter((option) => !this.isOptionGroup(option)).length;\n    }\n\n    get listLabel(): string {\n        return this.config.getTranslation(TranslationKeys.ARIA)['listLabel'];\n    }\n\n    get virtualScrollerDisabled() {\n        return !this.virtualScroll;\n    }\n\n    get optionValueSelected() {\n        return typeof this.modelValue() === 'string' && this.optionValue;\n    }\n\n    chipItemClass(index) {\n        return this._componentStyle.classes.chipItem({ instance: this, i: index });\n    }\n\n    constructor(\n        public overlayService: OverlayService,\n        private zone: NgZone\n    ) {\n        super();\n    }\n\n    ngOnInit() {\n        super.ngOnInit();\n        this.id = this.id || uuid('pn_id_');\n        this.cd.detectChanges();\n    }\n\n    @ContentChildren(PrimeTemplate) templates: QueryList<PrimeTemplate> | undefined;\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 '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    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\n    handleSuggestionsChange() {\n        if (this.loading) {\n            this._suggestions()?.length > 0 || this.showEmptyMessage || !!this.emptyTemplate ? this.show() : this.hide();\n            const focusedOptionIndex = this.overlayVisible && this.autoOptionFocus ? this.findFirstFocusedOptionIndex() : -1;\n            this.focusedOptionIndex.set(focusedOptionIndex);\n            this.suggestionsUpdated = true;\n            this.loading = false;\n            this.cd.markForCheck();\n        }\n    }\n\n    flatOptions(options) {\n        return (options || []).reduce((result, option, index) => {\n            result.push({ optionGroup: option, group: true, index });\n\n            const optionGroupChildren = this.getOptionGroupChildren(option);\n\n            optionGroupChildren && optionGroupChildren.forEach((o) => result.push(o));\n\n            return result;\n        }, []);\n    }\n\n    isOptionGroup(option) {\n        return this.optionGroupLabel && option.optionGroup && option.group;\n    }\n\n    findFirstOptionIndex() {\n        return this.visibleOptions().findIndex((option) => this.isValidOption(option));\n    }\n\n    findLastOptionIndex() {\n        return findLastIndex(this.visibleOptions(), (option) => this.isValidOption(option));\n    }\n\n    findFirstFocusedOptionIndex() {\n        const selectedIndex = this.findSelectedOptionIndex();\n\n        return selectedIndex < 0 ? this.findFirstOptionIndex() : selectedIndex;\n    }\n\n    findLastFocusedOptionIndex() {\n        const selectedIndex = this.findSelectedOptionIndex();\n\n        return selectedIndex < 0 ? this.findLastOptionIndex() : selectedIndex;\n    }\n\n    findSelectedOptionIndex() {\n        return this.hasSelectedOption() ? this.visibleOptions().findIndex((option) => this.isValidSelectedOption(option)) : -1;\n    }\n\n    findNextOptionIndex(index) {\n        const matchedOptionIndex =\n            index < this.visibleOptions().length - 1\n                ? this.visibleOptions()\n                      .slice(index + 1)\n                      .findIndex((option) => this.isValidOption(option))\n                : -1;\n\n        return matchedOptionIndex > -1 ? matchedOptionIndex + index + 1 : index;\n    }\n\n    findPrevOptionIndex(index) {\n        const matchedOptionIndex = index > 0 ? findLastIndex(this.visibleOptions().slice(0, index), (option) => this.isValidOption(option)) : -1;\n\n        return matchedOptionIndex > -1 ? matchedOptionIndex : index;\n    }\n\n    isValidSelectedOption(option) {\n        return this.isValidOption(option) && this.isSelected(option);\n    }\n\n    isValidOption(option) {\n        return option && !(this.isOptionDisabled(option) || this.isOptionGroup(option));\n    }\n\n    isOptionDisabled(option) {\n        return this.optionDisabled ? resolveFieldData(option, this.optionDisabled) : false;\n    }\n\n    isSelected(option) {\n        if (this.multiple) {\n            return this.unique ? (this.modelValue() as string[])?.find((model) => equals(model, this.getOptionValue(option), this.equalityKey())) : false;\n        }\n        return equals(this.modelValue(), this.getOptionValue(option), this.equalityKey());\n    }\n\n    isOptionMatched(option, value) {\n        return this.isValidOption(option) && this.getOptionLabel(option).toLocaleLowerCase(this.searchLocale) === value.toLocaleLowerCase(this.searchLocale);\n    }\n\n    isInputClicked(event) {\n        return event.target === this.inputEL.nativeElement;\n    }\n    isDropdownClicked(event) {\n        return this.dropdownButton?.nativeElement ? event.target === this.dropdownButton.nativeElement || this.dropdownButton.nativeElement.contains(event.target) : false;\n    }\n    equalityKey() {\n        return this.dataKey; // TODO: The 'optionValue' properties can be added.\n    }\n\n    onContainerClick(event) {\n        if (this.$disabled() || this.loading || this.isInputClicked(event) || this.isDropdownClicked(event)) {\n            return;\n        }\n\n        if (!this.overlayViewChild || !this.overlayViewChild.overlayViewChild?.nativeElement.contains(event.target)) {\n            focus(this.inputEL.nativeElement);\n        }\n    }\n\n    handleDropdownClick(event) {\n        let query = undefined;\n\n        if (this.overlayVisible) {\n