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    booleanAttribute,\n    ChangeDetectionStrategy,\n    ChangeDetectorRef,\n    Component,\n    computed,\n    ContentChildren,\n    effect,\n    ElementRef,\n    EventEmitter,\n    forwardRef,\n    Input,\n    NgModule,\n    NgZone,\n    numberAttribute,\n    OnInit,\n    Output,\n    QueryList,\n    Renderer2,\n    Signal,\n    signal,\n    SimpleChanges,\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 { CheckIcon } from 'primeng/icons/check';\nimport { BlankIcon } from 'primeng/icons/blank';\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            [id]=\"id\"\n            (click)=\"onOptionClick($event)\"\n            (mouseenter)=\"onOptionMouseEnter($event)\"\n            role=\"option\"\n            pRipple\n            [attr.aria-label]=\"label\"\n            [attr.aria-setsize]=\"ariaSetSize\"\n            [attr.aria-posinset]=\"ariaPosInset\"\n            [attr.aria-selected]=\"selected\"\n            [attr.data-p-focused]=\"focused\"\n            [attr.data-p-highlight]=\"selected\"\n            [attr.data-p-disabled]=\"disabled\"\n            [ngStyle]=\"{ height: itemSize + 'px' }\"\n            [ngClass]=\"{ 'p-dropdown-item': true, 'p-highlight': selected, 'p-disabled': disabled, 'p-focus': focused }\"\n        >\n            <ng-container *ngIf=\"checkmark\">\n                <CheckIcon *ngIf=\"selected\" [styleClass]=\"'p-dropdown-check-icon'\" />\n                <BlankIcon *ngIf=\"!selected\" [styleClass]=\"'p-dropdown-blank-icon'\" />\n            </ng-container>\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() id: string | undefined;\n\n    @Input() option: SelectItem | undefined;\n\n    @Input({ transform: booleanAttribute }) selected: boolean | undefined;\n\n    @Input({ transform: booleanAttribute }) focused: boolean | undefined;\n\n    @Input() label: string | undefined;\n\n    @Input({ transform: booleanAttribute }) disabled: boolean | undefined;\n\n    @Input({ transform: booleanAttribute }) visible: boolean | undefined;\n\n    @Input({ transform: numberAttribute }) itemSize: number | undefined;\n\n    @Input() ariaPosInset: string | undefined;\n\n    @Input() ariaSetSize: string | undefined;\n\n    @Input() template: TemplateRef<any> | undefined;\n\n    @Input({ transform: booleanAttribute }) checkmark: boolean;\n\n    @Output() onClick: EventEmitter<any> = new EventEmitter();\n\n    @Output() onMouseEnter: EventEmitter<any> = new EventEmitter();\n\n    ngOnInit() {}\n\n    onOptionClick(event: Event) {\n        this.onClick.emit(event);\n    }\n\n    onOptionMouseEnter(event: Event) {\n        this.onMouseEnter.emit(event);\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 #container [attr.id]=\"id\" [ngClass]=\"containerClass\" (click)=\"onContainerClick($event)\" [ngStyle]=\"style\" [class]=\"styleClass\">\n            <span\n                #focusInput\n                [ngClass]=\"inputClass\"\n                *ngIf=\"!editable\"\n                [pTooltip]=\"tooltip\"\n                [tooltipPosition]=\"tooltipPosition\"\n                [positionStyle]=\"tooltipPositionStyle\"\n                [tooltipStyleClass]=\"tooltipStyleClass\"\n                [attr.aria-disabled]=\"disabled\"\n                [attr.id]=\"inputId\"\n                role=\"combobox\"\n                [attr.aria-label]=\"ariaLabel || (label() === 'p-emptylabel' ? undefined : label())\"\n                [attr.aria-labelledby]=\"ariaLabelledBy\"\n                [attr.aria-haspopup]=\"'listbox'\"\n                [attr.aria-expanded]=\"overlayVisible ?? false\"\n                [attr.aria-controls]=\"overlayVisible ? id + '_list' : null\"\n                [attr.tabindex]=\"!disabled ? tabindex : -1\"\n                pAutoFocus\n                [autofocus]=\"autofocus\"\n                [attr.aria-activedescendant]=\"focused ? focusedOptionId : undefined\"\n                (focus)=\"onInputFocus($event)\"\n                (blur)=\"onInputBlur($event)\"\n                (keydown)=\"onKeyDown($event)\"\n                [attr.aria-required]=\"required\"\n                [attr.required]=\"required\"\n            >\n                <ng-container *ngIf=\"!selectedItemTemplate; else defaultPlaceholder\">{{ label() === 'p-emptylabel' ? '&nbsp;' : label() }}</ng-container>\n                <ng-container *ngIf=\"selectedItemTemplate && selectedOption\" [ngTemplateOutlet]=\"selectedItemTemplate\" [ngTemplateOutletContext]=\"{ $implicit: selectedOption }\"></ng-container>\n                <ng-template #defaultPlaceholder>\n                    <span *ngIf=\"!selectedOption\">{{ label() === 'p-emptylabel' ? '&nbsp;' : label() }}</span>\n                </ng-template>\n            </span>\n            <input\n                *ngIf=\"editable\"\n                #editableInput\n                type=\"text\"\n                [attr.id]=\"inputId\"\n                [attr.maxlength]=\"maxlength\"\n                [ngClass]=\"inputClass\"\n                [disabled]=\"disabled\"\n                aria-haspopup=\"listbox\"\n                [attr.placeholder]=\"modelValue() === undefined || modelValue() === null ? placeholder() : undefined\"\n                [attr.aria-label]=\"ariaLabel || (label() === 'p-emptylabel' ? undefined : label())\"\n                (input)=\"onEditableInput($event)\"\n                (keydown)=\"onKeyDown($event)\"\n                pAutoFocus\n                [autofocus]=\"autofocus\"\n                [attr.aria-activedescendant]=\"focused ? focusedOptionId : undefined\"\n                (focus)=\"onInputFocus($event)\"\n                (blur)=\"onInputBlur($event)\"\n            />\n            <ng-container *ngIf=\"isVisibleClearIcon\">\n                <TimesIcon [styleClass]=\"'p-dropdown-clear-icon'\" (click)=\"clear($event)\" *ngIf=\"!clearIconTemplate\" [attr.data-pc-section]=\"'clearicon'\" />\n                <span class=\"p-dropdown-clear-icon\" (click)=\"clear($event)\" *ngIf=\"clearIconTemplate\" [attr.data-pc-section]=\"'clearicon'\">\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 ?? false\" [attr.data-pc-section]=\"'trigger'\">\n                <ng-container *ngIf=\"loading; else elseBlock\">\n                    <ng-container *ngIf=\"loadingIconTemplate\">\n                        <ng-container *ngTemplateOutlet=\"loadingIconTemplate\"></ng-container>\n                    </ng-container>\n                    <ng-container *ngIf=\"!loadingIconTemplate\">\n                        <span *ngIf=\"loadingIcon\" [ngClass]=\"'p-dropdown-trigger-icon pi-spin ' + loadingIcon\" aria-hidden=\"true\"></span>\n                        <span *ngIf=\"!loadingIcon\" [class]=\"'p-dropdown-trigger-icon pi pi-spinner pi-spin'\" aria-hidden=\"true\"></span>\n                    </ng-container>\n                </ng-container>\n\n                <ng-template #elseBlock>\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                </ng-template>\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                        <span\n                            #firstHiddenFocusableEl\n                            role=\"presentation\"\n                            class=\"p-hidden-accessible p-hidden-focusable\"\n                            [attr.tabindex]=\"0\"\n                            (focus)=\"onFirstHiddenFocus($event)\"\n                            [attr.data-p-hidden-accessible]=\"true\"\n                            [attr.data-p-hidden-focusable]=\"true\"\n                        >\n                        </span>\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                                        role=\"searchbox\"\n                                        autocomplete=\"off\"\n                                        [value]=\"_filterValue() || ''\"\n                                        class=\"p-dropdown-filter p-inputtext p-component\"\n                                        [ngClass]=\"{ 'p-variant-filled': variant === 'filled' || config.inputStyle() === 'filled' }\"\n                                        [attr.placeholder]=\"filterPlaceholder\"\n                                        [attr.aria-owns]=\"id + '_list'\"\n                                        (input)=\"onFilterInputChange($event)\"\n                                        [attr.aria-label]=\"ariaFilterLabel\"\n                                        [attr.aria-activedescendant]=\"focusedOptionId\"\n                                        (keydown)=\"onFilterKeyDown($event)\"\n                                        (blur)=\"onFilterBlur($event)\"\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]=\"visibleOptions()\"\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: visibleOptions(), options: {} }\"></ng-container>\n                            </ng-container>\n\n                            <ng-template #buildInItems let-items let-scrollerOptions=\"options\">\n                                <ul #items [attr.id]=\"id + '_list'\" [attr.aria-label]=\"listLabel\" class=\"p-dropdown-items\" [ngClass]=\"scrollerOptions.contentStyleClass\" [style]=\"scrollerOptions.contentStyle\" role=\"listbox\">\n                                    <ng-template ngFor let-option [ngForOf]=\"items\" let-i=\"index\">\n                                        <ng-container *ngIf=\"isOptionGroup(option)\">\n                                            <li class=\"p-dropdown-item-group\" [attr.id]=\"id + '_' + getOptionIndex(i, scrollerOptions)\" [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                                            <p-dropdownItem\n                                                [id]=\"id + '_' + getOptionIndex(i, scrollerOptions)\"\n                                                [option]=\"option\"\n                                                [checkmark]=\"checkmark\"\n                                                [selected]=\"isSelected(option)\"\n                                                [label]=\"getOptionLabel(option)\"\n                                                [disabled]=\"isOptionDisabled(option)\"\n                                                [template]=\"itemTemplate\"\n                                                [focused]=\"focusedOptionIndex() === getOptionIndex(i, scrollerOptions)\"\n                                                [ariaPosInset]=\"getAriaPosInset(getOptionIndex(i, scrollerOptions))\"\n                                                [ariaSetSize]=\"ariaSetSize\"\n                                                (onClick)=\"onOptionSelect($event, option)\"\n                                                (onMouseEnter)=\"onOptionMouseEnter($event, getOptionIndex(i, scrollerOptions))\"\n                                            ></p-dropdownItem>\n                                        </ng-container>\n                                    </ng-template>\n                                    <li *ngIf=\"filterValue && isEmpty()\" class=\"p-dropdown-empty-message\" [ngStyle]=\"{ height: scrollerOptions.itemSize + 'px' }\" role=\"option\">\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' }\" role=\"option\">\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                        <span\n                            #lastHiddenFocusableEl\n                            role=\"presentation\"\n                            class=\"p-hidden-accessible p-hidden-focusable\"\n                            [attr.tabindex]=\"0\"\n                            (focus)=\"onLastHiddenFocus($event)\"\n                            [attr.data-p-hidden-accessible]=\"true\"\n                            [attr.data-p-hidden-focusable]=\"true\"\n                        ></span>\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     * Unique identifier of the component\n     * @group Props\n     */\n    @Input() id: string | undefined;\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({ transform: booleanAttribute }) 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({ transform: booleanAttribute }) 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({ transform: booleanAttribute }) 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({ transform: booleanAttribute }) 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({ transform: numberAttribute }) tabindex: number | undefined = 0;\n    /**\n     * Default text to display when no option is selected.\n     * @group Props\n     */\n    @Input() set placeholder(val: string | undefined) {\n        this._placeholder.set(val);\n    }\n    get placeholder(): Signal<string | undefined> {\n        return this._placeholder.asReadonly();\n    }\n    /**\n     * Icon to display in loading state.\n     * @group Props\n     */\n    @Input() loadingIcon: 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     * Specifies the input variant of the component.\n     * @group Props\n     */\n    @Input() variant: 'filled' | 'outlined' = 'outlined';\n    /**\n     * Identifier of the accessible input element.\n     * @group Props\n     */\n    @Input() inputId: 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     * Fields used when filtering the options, defaults to optionLabel.\n     * @group Props\n     */\n    @Input() filterFields: any[] | undefined;\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     * Clears the filter value when hiding the dropdown.\n     * @group Props\n     */\n    @Input({ transform: booleanAttribute }) resetFilterOnHide: boolean = false;\n    /**\n     * Whether the selected option will be shown with a check mark.\n     * @group Props\n     */\n    @Input({ transform: booleanAttribute }) checkmark: boolean = false;\n    /**\n     * Icon class of the dropdown icon.\n     * @group Props\n     */\n    @Input() dropdownIcon: string | undefined;\n    /**\n     * Whether the dropdown is in loading state.\n     * @group Props\n     */\n    @Input({ transform: booleanAttribute }) loading: boolean | undefined = false;\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 = 'label';\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     * @deprecated since v17.3.0, set initial value by model instead.\n     * @group Props\n     */\n    @Input({ transform: booleanAttribute }) autoDisplayFirst: 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     * When enabled, a clear icon is displayed to clear the value.\n     * @group Props\n     */\n    @Input({ transform: booleanAttribute }) 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({ 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     * 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 aria label 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({ transform: numberAttribute }) 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     * Fields used when filtering the options, defaults to optionLabel.\n     * @group Props\n     */\n    @Input({ transform: booleanAttribute }) focusOnHover: boolean = false;\n    /**\n     * Determines if the option will be selected on focus.\n     * @group Props\n     */\n    @Input({ transform: booleanAttribute }) selectOnFocus: boolean = false;\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 = true;\n    /**\n     * Applies focus to the filter element when the overlay is shown.\n     * @group Props\n     */\n    @Input({ transform: booleanAttribute }) autofocusFilter: boolean = true;\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        setTimeout(() => {\n            this._filterValue.set(val);\n        });\n    }\n    /**\n     * An array of objects to display as the available options.\n     * @group Props\n     */\n    @Input() get options(): any[] | undefined {\n        const options = this._options();\n        return options;\n    }\n    set options(val: any[] | undefined) {\n        if (!ObjectUtils.deepEquals(val, this._options())) {\n            this._options.set(val);\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('focusInput') focusInputViewChild: 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    @ViewChild('firstHiddenFocusableEl') firstHiddenFocusableElementOnOverlay: Nullable<ElementRef>;\n\n    @ViewChild('lastHiddenFocusableEl') lastHiddenFocusableElementOnOverlay: Nullable<ElementRef>;\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    loadingIconTemplate: Nullable<TemplateRef<any>>;\n\n    clearIconTemplate: Nullable<TemplateRef<any>>;\n\n    filterIconTemplate: Nullable<TemplateRef<any>>;\n\n    filterOptions: DropdownFilterOptions | undefined;\n\n    _options = signal<any[] | undefined>(null);\n\n    _placeholder = signal<string | undefined>(undefined);\n\n    modelValue = signal<any>(null);\n\n    value: any;\n\n    onModelChange: Function = () => {};\n\n    onModelTouched: Function = () => {};\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 = signal<any>(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    focusedOptionIndex = signal<number>(-1);\n\n    labelId: Nullable<string>;\n\n    listId: Nullable<string>;\n\n    clicked = signal<boolean>(false);\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 isVisibleClearIcon(): boolean | undefined {\n        return this.modelValue() != null && this.hasSelectedOption() && this.showClear && !this.disabled;\n    }\n\n    get listLabel(): string {\n        return this.config.getTranslation(TranslationKeys.ARIA)['listLabel'];\n    }\n\n    get containerClass() {\n        return {\n            'p-dropdown p-component p-inputwrapper': true,\n            'p-disabled': this.disabled,\n            'p-dropdown-clearable': this.showClear && !this.disabled,\n            'p-focus': this.focused,\n            'p-inputwrapper-filled': this.modelValue() !== undefined && this.modelValue() !== null && !this.modelValue().length,\n            'p-inputwrapper-focus': this.focused || this.overlayVisible,\n            'p-variant-filled': this.variant === 'filled' || this.config.inputStyle() === 'filled'\n        };\n    }\n\n    get inputClass() {\n        const label = this.label();\n        return {\n            'p-dropdown-label p-inputtext': true,\n            'p-placeholder': this.placeholder() && label === this.placeholder(),\n            'p-dropdown-label-empty': !this.editable && !this.selectedItemTemplate && (label === undefined || label === null || label === 'p-emptylabel' || label.length === 0)\n        };\n    }\n\n    get panelClass() {\n        return {\n            'p-dropdown-panel p-component': true,\n            'p-input-filled': this.config.inputStyle() === 'filled',\n            'p-ripple-disabled': this.config.ripple === false\n        };\n    }\n\n    get focusedOptionId() {\n        return this.focusedOptionIndex() !== -1 ? `${this.id}_${this.focusedOptionIndex()}` : null;\n    }\n\n    visibleOptions = computed(() => {\n        const options = this.getAllVisibleAndNonVisibleOptions();\n\n        if (this._filterValue()) {\n            const _filterBy = this.filterBy || this.optionLabel;\n\n            const filteredOptions =\n                !_filterBy && !this.filterFields && !this.optionValue\n                    ? this.options.filter((option) => {\n                          if (option.label) {\n                              return option.label.toString().toLowerCase().indexOf(this._filterValue().toLowerCase().trim()) !== -1;\n                          }\n                          return option.toString().toLowerCase().indexOf(this._filterValue().toLowerCase().trim()) !== -1;\n                      })\n                    : this.filterService.filter(options, this.searchFields(), this._filterValue().trim(), this.filterMatchMode, this.filterLocale);\n\n            if (this.group) {\n                const optionGroups = this.options || [];\n                const filtered = [];\n\n                optionGroups.forEach((group) => {\n                    const groupChildren = this.getOptionGroupChildren(group);\n                    const filteredItems = groupChildren.filter((item) => filteredOptions.includes(item));\n\n                    if (filteredItems.length > 0) filtered.push({ ...group, [typeof this.optionGroupChildren === 'string' ? this.optionGroupChildren : 'items']: [...filteredItems] });\n                });\n\n                return this.flatOptions(filtered);\n            }\n            return filteredOptions;\n        }\n\n        return options;\n    });\n\n    label = computed(() => {\n        // use  getAllVisibleAndNonVisibleOptions verses just visible options\n        // this will find the selected option whether or not the user is currently filtering  because the filtered (i.e. visible) options, are a subset of all the options\n        const options = this.getAllVisibleAndNonVisibleOptions();\n        // use isOptionEqualsModelValue for the use case where the dropdown is initalized with a disabled option\n        const selectedOptionIndex = options.findIndex((option) => this.isOptionValueEqualsModelValue(option));\n\n        return selectedOptionIndex !== -1 ? this.getOptionLabel(options[selectedOptionIndex]) : this.placeholder() || 'p-emptylabel';\n    });\n\n    filled = computed(() => {\n        if (typeof this.modelValue() === 'string') return !!this.modelValue();\n        return this.label() !== 'p-emptylabel' && this.modelValue() !== undefined && this.modelValue() !== null;\n    });\n\n    selectedOption: any;\n\n    editableInputValue = computed(() => this.getOptionLabel(this.selectedOption) || this.modelValue() || '');\n\n    constructor(\n        public el: ElementRef,\n        public renderer: Renderer2,\n        public cd: ChangeDetectorRef,\n        public zone: NgZone,\n        public filterService: FilterService,\n        public config: PrimeNGConfig\n    ) {\n        effect(() => {\n            const modelValue = this.modelValue();\n            const visibleOptions = this.visibleOptions();\n\n            if (visibleOptions && ObjectUtils.isNotEmpty(visibleOptions)) {\n                const selectedOptionIndex = this.findSelectedOptionIndex();\n\n                if (selectedOptionIndex !== -1 || modelValue === undefined || (typeof modelValue === 'string' && modelValue.length === 0) || this.isModelValueNotSet() || this.editable) {\n                    this.selectedOption = visibleOptions[selectedOptionIndex];\n                }\n            }\n\n            if (ObjectUtils.isEmpty(visibleOptions) && (modelValue === undefined || this.isModelValueNotSet()) && ObjectUtils.isNotEmpty(this.selectedOption)) {\n                this.selectedOption = null;\n            }\n\n            if (modelValue !== undefined && this.editable) {\n                this.updateEditableLabel();\n            }\n            this.cd.markForCheck();\n        });\n    }\n\n    private isModelValueNotSet(): boolean {\n        return this.modelValue() === null && !this.isOptionValueEqualsModelValue(this.selectedOption);\n    }\n\n    private getAllVisibleAndNonVisibleOptions() {\n        return this.group ? this.flatOptions(this.options) : this.options || [];\n    }\n\n    ngOnInit() {\n        this.id = this.id || UniqueComponentId();\n        this.autoUpdateModel();\n\n        if (this.filterBy) {\n            this.filterOptions = {\n                filter: (value) => this.onFilterInputChange(value),\n                reset: () => this.resetFilter()\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    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 'loadingicon':\n                    this.loadingIconTemplate = 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    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    autoUpdateModel() {\n        if (this.selectOnFocus && this.autoOptionFocus && !this.hasSelectedOption()) {\n            this.focusedOptionIndex.set(this.findFirstFocusedOptionIndex());\n            this.onOptionSelect(null, this.visibleOptions()[this.focusedOptionIndex()], false);\n        }\n        if (this.autoDisplayFirst && (this.modelValue() === null || this.modelValue() === undefined)) {\n            if (!this.placeholder()) {\n                const ind = this.findFirstOptionIndex();\n                this.onOptionSelect(null, this.visibleOptions()[ind], false, true);\n            }\n        }\n    }\n\n    onOptionSelect(event, option, isHide = true, preventChange = false) {\n        if (!this.isSelected(option)) {\n            const value = this.getOptionValue(option);\n            this.updateModel(value, event);\n            this.focusedOptionIndex.set(this.findSelectedOptionIndex());\n            preventChange === false && this.onChange.emit({ originalEvent: event, value: value });\n        }\n        if (isHide) {\n            this.hide(true);\n        }\n    }\n\n    onOptionMouseEnter(event, index) {\n        if (this.focusOnHover) {\n            this.changeFocusedOptionIndex(event, index);\n        }\n    }\n\n    updateModel(value, event?) {\n        this.value = value;\n        this.onModelChange(value);\n        this.modelValue.set(value);\n        this.selectedOptionUpdated = true;\n    }\n\n    writeValue(value: any): void {\n        if (this.filter) {\n            this.resetFilter();\n        }\n\n        this.value = value;\n        this.allowModelChange() && this.onModelChange(value);\n        this.modelValue.set(this.value);\n        this.updateEditableLabel();\n        this.cd.markForCheck();\n    }\n\n    allowModelChange() {\n        return this.autoDisplayFirst && !this.p