primeng/fesm2022/primeng-dropdown.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-dropdown.mjs","sources":["../../src/app/components/dropdown/dropdown.ts","../../src/app/components/dropdown/primeng-dropdown.ts"],"sourcesContent":["import { AnimationEvent } from '@angular/animations';\nimport { CommonModule } from '@angular/common';\nimport {\n    AfterContentInit,\n    AfterViewChecked,\n    AfterViewInit,\n    ChangeDetectionStrategy,\n    ChangeDetectorRef,\n    Component,\n    ContentChildren,\n    ElementRef,\n    EventEmitter,\n    forwardRef,\n    Input,\n    NgModule,\n    NgZone,\n    OnInit,\n    Output,\n    QueryList,\n    Renderer2,\n    TemplateRef,\n    ViewChild,\n    ViewEncapsulation,\n    ViewRef\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { FilterService, OverlayOptions, PrimeNGConfig, PrimeTemplate, SelectItem, SharedModule, TranslationKeys } from 'primeng/api';\nimport { AutoFocusModule } from 'primeng/autofocus';\nimport { DomHandler } from 'primeng/dom';\nimport { Overlay, OverlayModule } from 'primeng/overlay';\nimport { RippleModule } from 'primeng/ripple';\nimport { Scroller, ScrollerModule } from 'primeng/scroller';\nimport { ScrollerOptions } from 'primeng/api';\nimport { TooltipModule } from 'primeng/tooltip';\nimport { ObjectUtils, UniqueComponentId } from 'primeng/utils';\nimport { TimesIcon } from 'primeng/icons/times';\nimport { ChevronDownIcon } from 'primeng/icons/chevrondown';\nimport { SearchIcon } from 'primeng/icons/search';\nimport { DropdownChangeEvent, DropdownFilterEvent, DropdownFilterOptions, DropdownLazyLoadEvent } from './dropdown.interface';\nimport { Nullable } from 'primeng/ts-helpers';\n\nexport const DROPDOWN_VALUE_ACCESSOR: any = {\n    provide: NG_VALUE_ACCESSOR,\n    useExisting: forwardRef(() => Dropdown),\n    multi: true\n};\n\n@Component({\n    selector: 'p-dropdownItem',\n    template: `\n        <li\n            (click)=\"onOptionClick($event)\"\n            role=\"option\"\n            pRipple\n            [attr.aria-label]=\"label\"\n            [attr.aria-selected]=\"selected\"\n            [ngStyle]=\"{ height: itemSize + 'px' }\"\n            [id]=\"selected ? 'p-highlighted-option' : ''\"\n            [ngClass]=\"{ 'p-dropdown-item': true, 'p-highlight': selected, 'p-disabled': disabled }\"\n        >\n            <span *ngIf=\"!template\">{{ label ?? 'empty' }}</span>\n            <ng-container *ngTemplateOutlet=\"template; context: { $implicit: option }\"></ng-container>\n        </li>\n    `,\n    host: {\n        class: 'p-element'\n    }\n})\nexport class DropdownItem {\n    @Input() option: SelectItem | undefined;\n\n    @Input() selected: boolean | undefined;\n\n    @Input() label: string | undefined;\n\n    @Input() disabled: boolean | undefined;\n\n    @Input() visible: boolean | undefined;\n\n    @Input() itemSize: number | undefined;\n\n    @Input() template: TemplateRef<any> | undefined;\n\n    @Output() onClick: EventEmitter<any> = new EventEmitter();\n\n    onOptionClick(event: Event) {\n        this.onClick.emit({\n            originalEvent: event,\n            option: this.option\n        });\n    }\n}\n/**\n * Dropdown also known as Select, is used to choose an item from a collection of options.\n * @group Components\n */\n@Component({\n    selector: 'p-dropdown',\n    template: `\n        <div\n            #container\n            [ngClass]=\"{ 'p-dropdown p-component': true, 'p-disabled': disabled, 'p-dropdown-open': overlayVisible, 'p-focus': focused, 'p-dropdown-clearable': showClear && !disabled }\"\n            (click)=\"onMouseclick($event)\"\n            [ngStyle]=\"style\"\n            [class]=\"styleClass\"\n        >\n            <div class=\"p-hidden-accessible\">\n                <input\n                    #in\n                    [attr.id]=\"inputId\"\n                    type=\"text\"\n                    readonly\n                    (focus)=\"onInputFocus($event)\"\n                    aria-haspopup=\"listbox\"\n                    [attr.placeholder]=\"placeholder\"\n                    aria-haspopup=\"listbox\"\n                    [attr.aria-label]=\"ariaLabel\"\n                    [attr.aria-expanded]=\"false\"\n                    [attr.aria-labelledby]=\"ariaLabelledBy\"\n                    (blur)=\"onInputBlur($event)\"\n                    (keydown)=\"onKeydown($event, true)\"\n                    [disabled]=\"disabled\"\n                    [attr.tabindex]=\"tabindex\"\n                    pAutoFocus\n                    [autofocus]=\"autofocus\"\n                    [attr.aria-activedescendant]=\"overlayVisible ? labelId : null\"\n                    role=\"combobox\"\n                />\n            </div>\n            <span\n                [attr.id]=\"labelId\"\n                [ngClass]=\"{ 'p-dropdown-label p-inputtext': true, 'p-dropdown-label-empty': label == null || label.length === 0 }\"\n                *ngIf=\"!editable && label != null\"\n                [pTooltip]=\"tooltip\"\n                [tooltipPosition]=\"tooltipPosition\"\n                [positionStyle]=\"tooltipPositionStyle\"\n                [tooltipStyleClass]=\"tooltipStyleClass\"\n            >\n                <ng-container *ngIf=\"!selectedItemTemplate\">{{ label || 'empty' }}</ng-container>\n                <ng-container *ngTemplateOutlet=\"selectedItemTemplate; context: { $implicit: selectedOption }\"></ng-container>\n            </span>\n            <span [ngClass]=\"{ 'p-dropdown-label p-inputtext p-placeholder': true, 'p-dropdown-label-empty': placeholder == null || placeholder.length === 0 }\" *ngIf=\"!editable && label == null\">{{ placeholder || 'empty' }}</span>\n            <input\n                #editableInput\n                type=\"text\"\n                [attr.maxlength]=\"maxlength\"\n                class=\"p-dropdown-label p-inputtext\"\n                *ngIf=\"editable\"\n                [disabled]=\"disabled\"\n                [attr.placeholder]=\"placeholder\"\n                aria-haspopup=\"listbox\"\n                [attr.aria-expanded]=\"overlayVisible\"\n                (input)=\"onEditableInputChange($event)\"\n                (focus)=\"onEditableInputFocus($event)\"\n                (blur)=\"onInputBlur($event)\"\n            />\n\n            <ng-container *ngIf=\"isVisibleClearIcon\">\n                <TimesIcon [styleClass]=\"'p-dropdown-clear-icon'\" (click)=\"clear($event)\" *ngIf=\"!clearIconTemplate\" />\n                <span class=\"p-dropdown-clear-icon\" (click)=\"clear($event)\" *ngIf=\"clearIconTemplate\">\n                    <ng-template *ngTemplateOutlet=\"clearIconTemplate\"></ng-template>\n                </span>\n            </ng-container>\n\n            <div class=\"p-dropdown-trigger\" role=\"button\" aria-label=\"dropdown trigger\" aria-haspopup=\"listbox\" [attr.aria-expanded]=\"overlayVisible\">\n                <ng-container *ngIf=\"!dropdownIconTemplate\">\n                    <span class=\"p-dropdown-trigger-icon\" *ngIf=\"dropdownIcon\" [ngClass]=\"dropdownIcon\"></span>\n                    <ChevronDownIcon *ngIf=\"!dropdownIcon\" [styleClass]=\"'p-dropdown-trigger-icon'\" />\n                </ng-container>\n                <span *ngIf=\"dropdownIconTemplate\" class=\"p-dropdown-trigger-icon\">\n                    <ng-template *ngTemplateOutlet=\"dropdownIconTemplate\"></ng-template>\n                </span>\n            </div>\n\n            <p-overlay\n                #overlay\n                [(visible)]=\"overlayVisible\"\n                [options]=\"overlayOptions\"\n                [target]=\"'@parent'\"\n                [appendTo]=\"appendTo\"\n                [autoZIndex]=\"autoZIndex\"\n                [baseZIndex]=\"baseZIndex\"\n                [showTransitionOptions]=\"showTransitionOptions\"\n                [hideTransitionOptions]=\"hideTransitionOptions\"\n                (onAnimationStart)=\"onOverlayAnimationStart($event)\"\n                (onHide)=\"hide()\"\n            >\n                <ng-template pTemplate=\"content\">\n                    <div [ngClass]=\"'p-dropdown-panel p-component'\" [ngStyle]=\"panelStyle\" [class]=\"panelStyleClass\">\n                        <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\n                        <div class=\"p-dropdown-header\" *ngIf=\"filter\" (click)=\"$event.stopPropagation()\">\n                            <ng-container *ngIf=\"filterTemplate; else builtInFilterElement\">\n                                <ng-container *ngTemplateOutlet=\"filterTemplate; context: { options: filterOptions }\"></ng-container>\n                            </ng-container>\n                            <ng-template #builtInFilterElement>\n                                <div class=\"p-dropdown-filter-container\">\n                                    <input\n                                        #filter\n                                        type=\"text\"\n                                        autocomplete=\"off\"\n                                        [value]=\"filterValue || ''\"\n                                        class=\"p-dropdown-filter p-inputtext p-component\"\n                                        [attr.placeholder]=\"filterPlaceholder\"\n                                        (keydown.enter)=\"$event.preventDefault()\"\n                                        (keydown)=\"onKeydown($event, false)\"\n                                        (input)=\"onFilterInputChange($event)\"\n                                        [attr.aria-label]=\"ariaFilterLabel\"\n                                        [attr.aria-activedescendant]=\"overlayVisible ? 'p-highlighted-option' : labelId\"\n                                    />\n                                    <SearchIcon *ngIf=\"!filterIconTemplate\" [styleClass]=\"'p-dropdown-filter-icon'\" />\n                                    <span *ngIf=\"filterIconTemplate\" class=\"p-dropdown-filter-icon\">\n                                        <ng-template *ngTemplateOutlet=\"filterIconTemplate\"></ng-template>\n                                    </span>\n                                </div>\n                            </ng-template>\n                        </div>\n                        <div class=\"p-dropdown-items-wrapper\" [style.max-height]=\"virtualScroll ? 'auto' : scrollHeight || 'auto'\">\n                            <p-scroller\n                                *ngIf=\"virtualScroll\"\n                                #scroller\n                                [items]=\"optionsToDisplay\"\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: optionsToDisplay, options: {} }\"></ng-container>\n                            </ng-container>\n\n                            <ng-template #buildInItems let-items let-scrollerOptions=\"options\">\n                                <ul #items [attr.id]=\"listId\" class=\"p-dropdown-items\" [ngClass]=\"scrollerOptions.contentStyleClass\" [style]=\"scrollerOptions.contentStyle\" role=\"listbox\">\n                                    <ng-container *ngIf=\"group\">\n                                        <ng-template ngFor let-optgroup [ngForOf]=\"items\">\n                                            <li class=\"p-dropdown-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), selectedOption: selectedOption }\"></ng-container>\n                                        </ng-template>\n                                    </ng-container>\n                                    <ng-container *ngIf=\"!group\">\n                                        <ng-container *ngTemplateOutlet=\"itemslist; context: { $implicit: items, selectedOption: selectedOption }\"></ng-container>\n                                    </ng-container>\n                                    <ng-template #itemslist let-options let-selectedOption=\"selectedOption\">\n                                        <ng-template ngFor let-option let-i=\"index\" [ngForOf]=\"options\">\n                                            <p-dropdownItem\n                                                [option]=\"option\"\n                                                [selected]=\"selectedOption == option\"\n                                                [label]=\"getOptionLabel(option)\"\n                                                [disabled]=\"isOptionDisabled(option)\"\n                                                (onClick)=\"onItemClick($event)\"\n                                                [template]=\"itemTemplate\"\n                                            ></p-dropdownItem>\n                                        </ng-template>\n                                    </ng-template>\n                                    <li *ngIf=\"filterValue && isEmpty()\" class=\"p-dropdown-empty-message\" [ngStyle]=\"{ height: scrollerOptions.itemSize + 'px' }\">\n                                        <ng-container *ngIf=\"!emptyFilterTemplate && !emptyTemplate; else emptyFilter\">\n                                            {{ emptyFilterMessageLabel }}\n                                        </ng-container>\n                                        <ng-container #emptyFilter *ngTemplateOutlet=\"emptyFilterTemplate || emptyTemplate\"></ng-container>\n                                    </li>\n                                    <li *ngIf=\"!filterValue && isEmpty()\" class=\"p-dropdown-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                        </div>\n                        <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\n                    </div>\n                </ng-template>\n            </p-overlay>\n        </div>\n    `,\n\n    host: {\n        class: 'p-element p-inputwrapper',\n        '[class.p-inputwrapper-filled]': 'filled',\n        '[class.p-inputwrapper-focus]': 'focused || overlayVisible'\n    },\n    providers: [DROPDOWN_VALUE_ACCESSOR],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n    styleUrls: ['./dropdown.css']\n})\nexport class Dropdown implements OnInit, AfterViewInit, AfterContentInit, AfterViewChecked, ControlValueAccessor {\n    /**\n     * Height of the viewport in pixels, a scrollbar is defined if height of list exceeds this value.\n     * @group Props\n     */\n    @Input() scrollHeight: string = '200px';\n    /**\n     * When specified, displays an input field to filter the items on keyup.\n     * @group Props\n     */\n    @Input() filter: boolean | undefined;\n    /**\n     * Name of the input element.\n     * @group Props\n     */\n    @Input() name: string | undefined;\n    /**\n     * Inline style of the element.\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 element.\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     * When present, it specifies that the component cannot be edited.\n     * @group Props\n     */\n    @Input() readonly: boolean | 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     * When present, custom value instead of predefined options can be entered using the editable input field.\n     * @group Props\n     */\n    @Input() editable: boolean | 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     * Index of the element in tabbing order.\n     * @group Props\n     */\n    @Input() tabindex: number | undefined;\n    /**\n     * Default text to display when no option is selected.\n     * @group Props\n     */\n    @Input() placeholder: string | undefined;\n    /**\n     * Placeholder text to show when filter input is empty.\n     * @group Props\n     */\n    @Input() filterPlaceholder: string | undefined;\n    /**\n     * Locale to use in filtering. The default locale is the host environment's current locale.\n     * @group Props\n     */\n    @Input() filterLocale: string | undefined;\n    /**\n     * Identifier of the accessible input element.\n     * @group Props\n     */\n    @Input() inputId: string | undefined;\n    /**\n     * No description available.\n     * @group Props\n     */\n    @Input() selectId: string | undefined;\n    /**\n     * A property to uniquely identify a value in options.\n     * @group Props\n     */\n    @Input() dataKey: string | undefined;\n    /**\n     * When filtering is enabled, filterBy decides which field or fields (comma separated) to search against.\n     * @group Props\n     */\n    @Input() filterBy: string | undefined;\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     * Clears the filter value when hiding the dropdown.\n     * @group Props\n     */\n    @Input() resetFilterOnHide: boolean = false;\n    /**\n     * Icon class of the dropdown icon.\n     * @group Props\n     */\n    @Input() dropdownIcon: string | undefined;\n    /**\n     * Name of the label field of an option.\n     * @group Props\n     */\n    @Input() optionLabel: string | undefined;\n    /**\n     * Name of the value field of an option.\n     * @group Props\n     */\n    @Input() optionValue: string | undefined;\n    /**\n     * Name of the disabled field of an option.\n     * @group Props\n     */\n    @Input() optionDisabled: string | undefined;\n    /**\n     * Name of the label field of an option group.\n     * @group Props\n     */\n    @Input() optionGroupLabel: string | undefined;\n    /**\n     * Name of the options field of an option group.\n     * @group Props\n     */\n    @Input() optionGroupChildren: string = 'items';\n    /**\n     * Whether to display the first item as the label if no placeholder is defined and value is null.\n     * @group Props\n     */\n    @Input() autoDisplayFirst: 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     * When enabled, a clear icon is displayed to clear the value.\n     * @group Props\n     */\n    @Input() showClear: boolean | 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     */\n    @Input() emptyFilterMessage: string = '';\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 = '';\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     * Whether to use overlay API feature. The properties of overlay API can be used like an object in it.\n     * @group Props\n     */\n    @Input() overlayOptions: OverlayOptions | undefined;\n    /**\n     * Defines a string that labels the filter input.\n     * @group Props\n     */\n    @Input() ariaFilterLabel: string | undefined;\n    /**\n     * Used to define a string that autocomplete attribute the current element.\n     * @group Props\n     */\n    @Input() ariaLabel: string | undefined;\n    /**\n     * Establishes relationships between the component and label(s) where its value should be one or more element IDs.\n     * @group Props\n     */\n    @Input() ariaLabelledBy: string | undefined;\n    /**\n     * Defines how the items are filtered.\n     * @group Props\n     */\n    @Input() filterMatchMode: 'contains' | 'startsWith' | 'endsWith' | 'equals' | 'notEquals' | 'in' | 'lt' | 'lte' | 'gt' | 'gte' = 'contains';\n    /**\n     * Maximum number of character allows in the editable input field.\n     * @group Props\n     */\n    @Input() maxlength: number | undefined;\n    /**\n     * Advisory information to display in a tooltip on hover.\n     * @group Props\n     */\n    @Input() tooltip: string = '';\n    /**\n     * Position of the tooltip.\n     * @group Props\n     */\n    @Input() tooltipPosition: 'top' | 'left' | 'right' | 'bottom' = 'right';\n    /**\n     * Type of CSS position.\n     * @group Props\n     */\n    @Input() tooltipPositionStyle: string = 'absolute';\n    /**\n     * Style class of the tooltip.\n     * @group Props\n     */\n    @Input() tooltipStyleClass: string | undefined;\n    /**\n     * Applies focus to the filter element when the overlay is shown.\n     * @group Props\n     */\n    @Input() autofocusFilter: boolean = true;\n    /**\n     * No description available.\n     * @group Props\n     */\n    @Input() overlayDirection: string = 'end';\n    /**\n     * When present, it specifies that the component should be disabled.\n     * @group Props\n     */\n    @Input() get disabled(): boolean | undefined {\n        return this._disabled;\n    }\n    set disabled(_disabled: boolean | undefined) {\n        if (_disabled) {\n            this.focused = false;\n\n            if (this.overlayVisible) this.hide();\n        }\n\n        this._disabled = _disabled;\n        if (!(this.cd as ViewRef).destroyed) {\n            this.cd.detectChanges();\n        }\n    }\n    /**\n     * Item size of item to be virtual scrolled.\n     * @group Props\n     * @deprecated use virtualScrollItemSize property instead.\n     */\n    @Input() get itemSize(): number | undefined {\n        return this._itemSize;\n    }\n    set itemSize(val: number | undefined) {\n        this._itemSize = val;\n        console.warn('The itemSize property is deprecated, use virtualScrollItemSize property instead.');\n    }\n    _itemSize: number | undefined;\n    /**\n     * Whether to automatically manage layering.\n     * @group Props\n     * @deprecated since v14.2.0, use overlayOptions property instead.\n     */\n    @Input() get autoZIndex(): boolean | undefined {\n        return this._autoZIndex;\n    }\n    set autoZIndex(val: boolean | undefined) {\n        this._autoZIndex = val;\n        console.warn('The autoZIndex property is deprecated since v14.2.0, use overlayOptions property instead.');\n    }\n    _autoZIndex: boolean | undefined;\n    /**\n     * Base zIndex value to use in layering.\n     * @group Props\n     * @deprecated since v14.2.0, use overlayOptions property instead.\n     */\n    @Input() get baseZIndex(): number | undefined {\n        return this._baseZIndex;\n    }\n    set baseZIndex(val: number | undefined) {\n        this._baseZIndex = val;\n        console.warn('The baseZIndex property is deprecated since v14.2.0, use overlayOptions property instead.');\n    }\n    _baseZIndex: number | undefined;\n    /**\n     * Transition options of the show animation.\n     * @group Props\n     * @deprecated since v14.2.0, use overlayOptions property instead.\n     */\n    @Input() get showTransitionOptions(): string | undefined {\n        return this._showTransitionOptions;\n    }\n    set showTransitionOptions(val: string | undefined) {\n        this._showTransitionOptions = val;\n        console.warn('The showTransitionOptions property is deprecated since v14.2.0, use overlayOptions property instead.');\n    }\n    _showTransitionOptions: string | undefined;\n    /**\n     * Transition options of the hide animation.\n     * @group Props\n     * @deprecated since v14.2.0, use overlayOptions property instead.\n     */\n    @Input() get hideTransitionOptions(): string | undefined {\n        return this._hideTransitionOptions;\n    }\n    set hideTransitionOptions(val: string | undefined) {\n        this._hideTransitionOptions = val;\n        console.warn('The hideTransitionOptions property is deprecated since v14.2.0, use overlayOptions property instead.');\n    }\n    _hideTransitionOptions: string | undefined;\n    /**\n     * When specified, filter displays with this value.\n     * @group Props\n     */\n    @Input() get filterValue(): string | undefined | null {\n        return this._filterValue;\n    }\n    set filterValue(val: string | undefined | null) {\n        this._filterValue = val;\n        this.activateFilter();\n    }\n    /**\n     * An array of objects to display as the available options.\n     * @group Props\n     */\n    @Input() get options(): any[] | undefined {\n        return this._options;\n    }\n    set options(val: any[] | undefined) {\n        this._options = val;\n        this.optionsToDisplay = this._options;\n        this.updateSelectedOption(this.value);\n\n        this.selectedOption = this.findOption(this.value, this.optionsToDisplay as any[]);\n        if (!this.selectedOption && ObjectUtils.isNotEmpty(this.value) && !this.editable) {\n            this.value = null;\n            this.onModelChange(this.value);\n        }\n\n        this.optionsChanged = true;\n\n        if (this._filterValue && this._filterValue.length) {\n            this.activateFilter();\n        }\n    }\n    /**\n     * Callback to invoke when value of dropdown changes.\n     * @param {DropdownChangeEvent} event - custom change event.\n     * @group Emits\n     */\n    @Output() onChange: EventEmitter<DropdownChangeEvent> = new EventEmitter<DropdownChangeEvent>();\n    /**\n     * Callback to invoke when data is filtered.\n     * @param {DropdownFilterEvent} event - custom filter event.\n     * @group Emits\n     */\n    @Output() onFilter: EventEmitter<DropdownFilterEvent> = new EventEmitter<DropdownFilterEvent>();\n    /**\n     * Callback to invoke when dropdown gets focus.\n     * @param {Event} event - Browser event.\n     * @group Emits\n     */\n    @Output() onFocus: EventEmitter<Event> = new EventEmitter<Event>();\n    /**\n     * Callback to invoke when dropdown loses focus.\n     * @param {Event} event - Browser event.\n     * @group Emits\n     */\n    @Output() onBlur: EventEmitter<Event> = new EventEmitter<Event>();\n    /**\n     * Callback to invoke when component is clicked.\n     * @param {MouseEvent} event - Mouse event.\n     * @group Emits\n     */\n    @Output() onClick: EventEmitter<MouseEvent> = new EventEmitter<MouseEvent>();\n    /**\n     * Callback to invoke when dropdown overlay gets visible.\n     * @param {AnimationEvent} event - Animation event.\n     * @group Emits\n     */\n    @Output() onShow: EventEmitter<AnimationEvent> = new EventEmitter<AnimationEvent>();\n    /**\n     * Callback to invoke when dropdown overlay gets hidden.\n     * @param {AnimationEvent} event - Animation event.\n     * @group Emits\n     */\n    @Output() onHide: EventEmitter<AnimationEvent> = new EventEmitter<AnimationEvent>();\n    /**\n     * Callback to invoke when dropdown clears the value.\n     * @param {Event} event - Browser event.\n     * @group Emits\n     */\n    @Output() onClear: EventEmitter<Event> = new EventEmitter<Event>();\n    /**\n     * Callback to invoke in lazy mode to load new data.\n     * @param {DropdownLazyLoadEvent} event - Lazy load event.\n     * @group Emits\n     */\n    @Output() onLazyLoad: EventEmitter<DropdownLazyLoadEvent> = new EventEmitter<DropdownLazyLoadEvent>();\n\n    @ViewChild('container') containerViewChild: Nullable<ElementRef>;\n\n    @ViewChild('filter') filterViewChild: Nullable<ElementRef>;\n\n    @ViewChild('in') accessibleViewChild: Nullable<ElementRef>;\n\n    @ViewChild('editableInput') editableInputViewChild: Nullable<ElementRef>;\n\n    @ViewChild('items') itemsViewChild: Nullable<ElementRef>;\n\n    @ViewChild('scroller') scroller: Nullable<Scroller>;\n\n    @ViewChild('overlay') overlayViewChild: Nullable<Overlay>;\n\n    @ContentChildren(PrimeTemplate) templates: Nullable<QueryList<PrimeTemplate>>;\n\n    _disabled: boolean | undefined;\n\n    itemsWrapper: Nullable<HTMLDivElement>;\n\n    itemTemplate: Nullable<TemplateRef<any>>;\n\n    groupTemplate: Nullable<TemplateRef<any>>;\n\n    loaderTemplate: Nullable<TemplateRef<any>>;\n\n    selectedItemTemplate: Nullable<TemplateRef<any>>;\n\n    headerTemplate: Nullable<TemplateRef<any>>;\n\n    filterTemplate: Nullable<TemplateRef<any>>;\n\n    footerTemplate: Nullable<TemplateRef<any>>;\n\n    emptyFilterTemplate: Nullable<TemplateRef<any>>;\n\n    emptyTemplate: Nullable<TemplateRef<any>>;\n\n    dropdownIconTemplate: Nullable<TemplateRef<any>>;\n\n    clearIconTemplate: Nullable<TemplateRef<any>>;\n\n    filterIconTemplate: Nullable<TemplateRef<any>>;\n\n    filterOptions: DropdownFilterOptions | undefined;\n\n    selectedOption: any;\n\n    _options: any[] | undefined;\n\n    value: any;\n\n    onModelChange: Function = () => {};\n\n    onModelTouched: Function = () => {};\n\n    optionsToDisplay: any[] | undefined;\n\n    hover: Nullable<boolean>;\n\n    focused: Nullable<boolean>;\n\n    overlayVisible: Nullable<boolean>;\n\n    optionsChanged: Nullable<boolean>;\n\n    panel: Nullable<HTMLDivElement>;\n\n    dimensionsUpdated: Nullable<boolean>;\n\n    hoveredItem: any;\n\n    selectedOptionUpdated: Nullable<boolean>;\n\n    _filterValue: string | undefined | null;\n\n    searchValue: Nullable<string>;\n\n    searchIndex: Nullable<number>;\n\n    searchTimeout: any;\n\n    previousSearchChar: Nullable<string>;\n\n    currentSearchChar: Nullable<string>;\n\n    preventModelTouched: Nullable<boolean>;\n\n    id: string = UniqueComponentId();\n\n    labelId: Nullable<string>;\n\n    listId: Nullable<string>;\n\n    constructor(public el: ElementRef, public renderer: Renderer2, public cd: ChangeDetectorRef, public zone: NgZone, public filterService: FilterService, public config: PrimeNGConfig) {}\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 'selectedItem':\n                    this.selectedItemTemplate = item.template;\n                    break;\n\n                case 'header':\n                    this.headerTemplate = item.template;\n                    break;\n\n                case 'filter':\n                    this.filterTemplate = item.template;\n                    break;\n\n                case 'footer':\n                    this.footerTemplate = item.template;\n                    break;\n\n                case 'emptyfilter':\n                    this.emptyFilterTemplate = item.template;\n                    break;\n\n                case 'empty':\n                    this.emptyTemplate = item.template;\n                    break;\n\n                case 'group':\n                    this.groupTemplate = item.template;\n                    break;\n\n                case 'loader':\n                    this.loaderTemplate = item.template;\n                    break;\n\n                case 'dropdownicon':\n                    this.dropdownIconTemplate = item.template;\n                    break;\n\n                case 'clearicon':\n                    this.clearIconTemplate = item.template;\n                    break;\n\n                case 'filtericon':\n                    this.filterIconTemplate = item.template;\n                    break;\n\n                default:\n                    this.itemTemplate = item.template;\n                    break;\n            }\n        });\n    }\n\n    ngOnInit() {\n        this.optionsToDisplay = this.options;\n        this.updateSelectedOption(null);\n        this.labelId = this.id + '_label';\n        this.listId = this.id + '_list';\n\n        if (this.filterBy) {\n            this.filterOptions = {\n                filter: (value) => this.onFilterInputChange(value),\n                reset: () => this.resetFilter()\n            };\n        }\n    }\n\n    ngAfterViewInit() {\n        if (this.editable) {\n            this.updateEditableLabel();\n        }\n    }\n\n    get label(): string {\n        if (typeof this.selectedOption === 'number') {\n            this.selectedOption = this.selectedOption.toString();\n        }\n\n        return this.selectedOption ? this.getOptionLabel(this.selectedOption) : null;\n    }\n\n    get emptyMessageLabel(): string {\n        return this.emptyMessage || this.config.getTranslation(TranslationKeys.EMPTY_MESSAGE);\n    }\n\n    get emptyFilterMessageLabel(): string {\n        return this.emptyFilterMessage || this.config.getTranslation(TranslationKeys.EMPTY_FILTER_MESSAGE);\n    }\n\n    get filled(): boolean {\n        if (typeof this.value === 'string') return !!this.value;\n\n        return this.value || this.value != null || this.value != undefined;\n    }\n\n    get isVisibleClearIcon(): boolean | undefined {\n        return this.value != null && this.value !== '' && this.showClear && !this.disabled;\n    }\n\n    updateEditableLabel(): void {\n        if (this.editableInputViewChild && this.editableInputViewChild.nativeElement) {\n            this.editableInputViewChild.nativeElement.value = this.selectedOption ? this.getOptionLabel(this.selectedOption) : this.value || '';\n        }\n    }\n\n    getOptionLabel(option: any) {\n        return this.optionLabel ? ObjectUtils.resolveFieldData(option, this.optionLabel) : option && option.label !== undefined ? option.label : option;\n    }\n\n    getOptionValue(option: any) {\n        return this.optionValue ? ObjectUtils.resolveFieldData(option, this.optionValue) : !this.optionLabel && option && option.value !== undefined ? option.value : option;\n    }\n\n    isOptionDisabled(option: any) {\n        return this.optionDisabled ? ObjectUtils.resolveFieldData(option, this.optionDisabled) : option && option.disabled !== undefined ? option.disabled : false;\n    }\n\n    getOptionGroupLabel(optionGroup: any) {\n        return this.optionGroupLabel ? ObjectUtils.resolveFieldData(optionGroup, this.optionGroupLabel) : optionGroup && optionGroup.label !== undefined ? optionGroup.label : optionGroup;\n    }\n\n    getOptionGroupChildren(optionGroup: any) {\n        return this.optionGroupChildren ? ObjectUtils.resolveFieldData(optionGroup, this.optionGroupChildren) : optionGroup.items;\n    }\n\n    onItemClick(event: { originalEvent: Event; option: any }) {\n        const option = event.option;\n\n        if (!this.isOptionDisabled(option)) {\n            this.selectItem(event.originalEvent, option);\n            this.accessibleViewChild?.nativeElement.focus({ preventScroll: true });\n        }\n\n        setTimeout(() => {\n            this.hide();\n        }, 1);\n    }\n\n    selectItem(event: Event, option: any) {\n        if (this.selectedOption != option) {\n            this.selectedOption = option;\n            this.value = this.getOptionValue(option);\n\n            this.onModelChange(this.value);\n            this.updateEditableLabel();\n            this.onChange.emit({\n                originalEvent: event,\n                value: this.value\n            });\n        }\n    }\n\n    ngAfterViewChecked() {\n        if (this.optionsChanged && this.overlayVisible) {\n            this.optionsChanged = false;\n\n            this.zone.runOutsideAngular(() => {\n                setTimeout(() => {\n                    if (this.overlayViewChild) {\n                        this.overlayViewChild.alignOverlay();\n                    }\n                }, 1);\n            });\n        }\n\n        if (this.selectedOptionUpdated && this.itemsWrapper) {\n            let selectedItem = DomHandler.findSingle(this.overlayViewChild?.overlayViewChild?.nativeElement, 'li.p-highlight');\n            if (selectedItem) {\n                DomHandler.scrollInView(this.itemsWrapper, selectedItem);\n            }\n            this.selectedOptionUpdated = false;\n        }\n    }\n\n    writeValue(value: any): void {\n        if (this.filter) {\n            this.resetFilter();\n        }\n\n        this.value = value;\n        this.updateSelectedOption(value);\n        this.updateEditableLabel();\n        this.cd.markForCheck();\n    }\n\n    /**\n     * Callback to invoke on filter reset.\n     * @group Method\n     */\n    public resetFilter(): void {\n        this._filterValue = null;\n\n        if (this.filterViewChild && this.filterViewChild.nativeElement) {\n            this.filterViewChild.nativeElement.value = '';\n        }\n\n        this.optionsToDisplay = this.options;\n    }\n\n    updateSelectedOption(val: any): void {\n        this.selectedOption = this.findOption(val, this.optionsToDisplay as any[]);\n\n        if (this.autoDisplayFirst && !this.placeholder && !this.selectedOption && this.optionsToDisplay && this.optionsToDisplay.length && !this.editable) {\n            if (this.group) {\n                this.selectedOption = this.getOptionGroupChildren(this.optionsToDisplay[0])[0];\n            } else {\n                this.selectedOption = this.optionsToDisplay[0];\n            }\n            this.value = this.getOptionValue(this.selectedOption);\n            this.onModelChange(this.value);\n        }\n\n        this.selectedOptionUpdated = true;\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    onMouseclick(event: MouseEvent) {\n        if (this.disabled || this.readonly || this.isInputClick(event)) {\n            return;\n        }\n\n        this.onClick.emit(event);\n\n        this.accessibleViewChild?.nativeElement.focus({ preventScroll: true });\n\n        if (this.overlayVisible) this.hide();\n        else this.show();\n\n        this.cd.detectChanges();\n    }\n\n    isInputClick(event: MouseEvent): boolean {\n        return (\n            DomHandler.hasClass(event.target, 'p-dropdown-clear-icon') ||\n            (event.target as HTMLInputElement).isSameNode(this.accessibleViewChild?.nativeElement) ||\n            ((this.editableInputViewChild && (event.target as HTMLInputElement).isSameNode(this.editableInputViewChild.nativeElement)) as boolean)\n        );\n    }\n\n    isEmpty() {\n        return !this.optionsToDisplay || (this.optionsToDisplay && this.optionsToDisplay.length === 0);\n    }\n\n    onEditableInputFocus(event: Event) {\n        this.focused = true;\n        this.hide();\n        this.onFocus.emit(event);\n    }\n\n    onEditableInputChange(event: Event) {\n        this.value = (event.target as HTMLInputElement).value;\n        this.updateSelectedOption(this.value);\n        this.onModelChange(this.value);\n        this.onChange.emit({\n            originalEvent: event,\n            value: this.value\n        });\n    }\n    /**\n     * Displays the panel.\n     * @group Method\n     */\n    public show() {\n        this.overlayVisible = true;\n        this.cd.markForCheck();\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-dropdown-items-wrapper');\n            this.virtualScroll && this.scroller?.setContentEl(this.itemsViewChild?.nativeElement);\n\n            if (this.options && this.options.length) {\n                if (this.virtualScroll) {\n                    const selectedIndex = this.selectedOption ? this.findOptionIndex(this.getOptionValue(this.selectedOption), this.optionsToDisplay as any[]) : -1;\n                    if (selectedIndex !== -1) {\n                        this.scroller?.scrollToIndex(selectedIndex);\n                    }\n                } else {\n                    let selectedListItem = DomHandler.findSingle(this.itemsWrapper, '.p-dropdown-item.p-highlight');\n\n                    if (selectedListItem) {\n                        selectedListItem.scrollIntoView({ block: 'nearest', inline: 'center' });\n                    }\n                }\n            }\n\n            if (this.filterViewChild && this.filterViewChild.nativeElement) {\n                this.preventModelTouched = true;\n\n                if (this.autofocusFilter) {\n                    this.filterViewChild.nativeElement.focus();\n                }\n            }\n\n            this.onShow.emit(event);\n        }\n        if (event.toState === 'void') {\n            this.itemsWrapper = null;\n            this.onModelTouched();\n            this.onHide.emit(event);\n        }\n    }\n    /**\n     * Hides the panel.\n     * @group Method\n     */\n    public hide() {\n        this.overlayVisible = false;\n\n        if (this.filter && this.resetFilterOnHide) {\n            this.resetFilter();\n        }\n\n        this.cd.markForCheck();\n    }\n\n    onInputFocus(event: Event) {\n        this.focused = true;\n        this.onFocus.emit(event);\n    }\n\n    onInputBlur(event: Event) {\n        this.focused = false;\n        this.onBlur.emit(event);\n\n        if (!this.preventModelTouched) {\n            this.onModelTouched();\n        }\n        this.preventModelTouched = false;\n    }\n\n    findPrevEnabledOption(index: number) {\n        let prevEnabledOption;\n\n        if (this.optionsToDisplay && this.optionsToDisplay.length) {\n            for (let i = index - 1; 0 <= i; i--) {\n                let option = this.optionsToDisplay[i];\n                if (this.isOptionDisabled(option)) {\n                    continue;\n                } else {\n                    prevEnabledOption = option;\n                    break;\n                }\n            }\n\n            if (!prevEnabledOption) {\n                for (let i = this.optionsToDisplay.length - 1; i >= index; i--) {\n                    let option = this.optionsToDisplay[i];\n                    if (this.isOptionDisabled(option)) {\n                        continue;\n                    } else {\n                        prevEnabledOption = option;\n                        break;\n                    }\n                }\n            }\n        }\n\n        return prevEnabledOption;\n    }\n\n    findNextEnabledOption(index: number) {\n        let nextEnabledOption;\n\n        if (this.optionsToDisplay && this.optionsToDisplay.length) {\n            for (let i = index + 1; i < this.optionsToDisplay.length; i++) {\n                let option = this.optionsToDisplay[i];\n                if (this.isOptionDisabled(option)) {\n                    continue;\n                } else {\n                    nextEnabledOption = option;\n                    break;\n                }\n            }\n\n            if (!nextEnabledOption) {\n                for (let i = 0; i < index; i++) {\n                    let option = this.optionsToDisplay[i];\n                    if (this.isOptionDisabled(option)) {\n                        continue;\n                    } else {\n                        nextEnabledOption = option;\n                        break;\n                    }\n                }\n            }\n        }\n\n        return nextEnabledOption;\n    }\n\n    onKeydown(event: KeyboardEvent, search: boolean) {\n        if (this.readonly || !this.optionsToDisplay || this.optionsToDisplay.length === null) {\n            return;\n        }\n\n        switch (event.which) {\n            //down\n            case 40:\n                if (!this.overlayVisible && event.altKey) {\n                    this.show();\n                } else {\n                    if (this.group) {\n                        let selectedItemIndex = this.selectedOption ? this.findOptionGroupIndex(this.getOptionValue(this.selectedOption), this.optionsToDisplay) : -1;\n\n                        if (selectedItemIndex !== -1) {\n                            let nextItemIndex = selectedItemIndex.itemIndex + 1;\n                            if (nextItemIndex < this.getOptionGroupChildren(this.optionsToDisplay[selectedItemIndex.groupIndex]).length) {\n                                this.selectItem(event, this.getOptionGroupChildren(this.optionsToDisplay[selectedItemIndex.groupIndex])[nextItemIndex]);\n                                this.selectedOptionUpdated = true;\n                            } else if (this.optionsToDisplay[selectedItemIndex.groupIndex + 1]) {\n                                this.selectItem(event, this.getOptionGroupChildren(this.optionsToDisplay[selectedItemIndex.groupIndex + 1])[0]);\n                                this.selectedOptionUpdated = true;\n                            }\n                        } else {\n                            if (this.optionsToDisplay && this.optionsToDisplay.length > 0) {\n                                this.selectItem(event, this.getOptionGroupChildren(this.optionsToDisplay[0])[0]);\n                            }\n                        }\n                    } else {\n                        let selectedItemIndex = this.selectedOption ? this.findOptionIndex(this.getOptionValue(this.selectedOption), this.optionsToDisplay) : -1;\n                        let nextEnabledOption = this.findNextEnabledOption(selectedItemIndex);\n                        if (nextEnabledOption) {\n                            this.selectItem(event, nextEnabledOption);\n                            this.selectedOptionUpdated = true;\n                        }\n                    }\n                }\n\n                event.preventDefault();\n\n                break;\n\n            //up\n            case 38:\n                if (this.group) {\n                    let selectedItemIndex = this.selectedOption ? this.findOptionGroupIndex(this.getOptionValue(this.selectedOption), this.optionsToDisplay) : -1;\n                    if (selectedItemIndex !== -1) {\n                        let prevItemIndex = selectedItemIndex.itemIndex - 1;\n                        if (prevItemIndex >= 0) {\n                            this.selectItem(event, this.getOptionGroupChildren(this.optionsToDisplay[selectedItemIndex.groupIndex])[prevItemIndex]);\n                            this.selectedOptionUpdated = true;\n                        } else if (prevItemIndex < 0) {\n                            let prevGroup = this.optionsToDisplay[selectedItemIndex.groupIndex - 1];\n                            if (prevGroup) {\n                                this.selectItem(event, this.getOptionGroupChildren(prevGroup)[this.getOptionGroupChildren(p