primeng/fesm2022/primeng-listbox.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-listbox.mjs","sources":["../../src/app/components/listbox/listbox.ts","../../src/app/components/listbox/primeng-listbox.ts"],"sourcesContent":["import {\n    NgModule,\n    Component,\n    ElementRef,\n    Input,\n    Output,\n    EventEmitter,\n    AfterContentInit,\n    ContentChildren,\n    ContentChild,\n    QueryList,\n    TemplateRef,\n    forwardRef,\n    ChangeDetectorRef,\n    ViewChild,\n    ChangeDetectionStrategy,\n    ViewEncapsulation,\n    OnInit,\n    OnDestroy,\n    computed,\n    signal,\n    Renderer2,\n    booleanAttribute,\n    numberAttribute\n} from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { SharedModule, PrimeTemplate, Footer, Header, FilterService, TranslationKeys, PrimeNGConfig, ScrollerOptions } from 'primeng/api';\nimport { DomHandler } from 'primeng/dom';\nimport { ObjectUtils, UniqueComponentId } from 'primeng/utils';\nimport { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms';\nimport { RippleModule } from 'primeng/ripple';\nimport { Subscription } from 'rxjs';\nimport { SearchIcon } from 'primeng/icons/search';\nimport { CheckIcon } from 'primeng/icons/check';\nimport { Nullable } from 'primeng/ts-helpers';\nimport { ListboxChangeEvent, ListboxClickEvent, ListboxDoubleClickEvent, ListboxFilterEvent, ListboxFilterOptions, ListboxSelectAllChangeEvent } from './listbox.interface';\nimport { Scroller, ScrollerModule } from 'primeng/scroller';\n\nexport const LISTBOX_VALUE_ACCESSOR: any = {\n    provide: NG_VALUE_ACCESSOR,\n    useExisting: forwardRef(() => Listbox),\n    multi: true\n};\n/**\n * ListBox is used to select one or more values from a list of items.\n * @group Components\n */\n@Component({\n    selector: 'p-listbox',\n    template: `\n        <div [attr.id]=\"id\" [ngClass]=\"containerClass\" [ngStyle]=\"style\" [class]=\"styleClass\" (focusout)=\"onFocusout($event)\">\n            <span\n                #firstHiddenFocusableElement\n                role=\"presentation\"\n                [attr.aria-hidden]=\"true\"\n                class=\"p-hidden-accessible p-hidden-focusable\"\n                [tabindex]=\"!disabled ? tabindex : -1\"\n                (focus)=\"onFirstHiddenFocus($event)\"\n                [attr.data-p-hidden-focusable]=\"true\"\n            >\n            </span>\n            <div class=\"p-listbox-header\" *ngIf=\"headerFacet || headerTemplate\">\n                <ng-content select=\"p-header\"></ng-content>\n                <ng-container *ngTemplateOutlet=\"headerTemplate; context: { $implicit: modelValue(), options: visibleOptions() }\"></ng-container>\n            </div>\n            <div class=\"p-listbox-header\" *ngIf=\"(checkbox && multiple && showToggleAll) || filter\">\n                <div *ngIf=\"checkbox && multiple && showToggleAll\" class=\"p-checkbox p-component\" [ngClass]=\"{ 'p-checkbox-disabled': disabled || toggleAllDisabled }\" (click)=\"onToggleAll($event)\" (keydown)=\"onHeaderCheckboxKeyDown($event)\">\n                    <div class=\"p-hidden-accessible\" [attr.data-p-hidden-accessible]=\"true\">\n                        <input\n                            #headerchkbox\n                            type=\"checkbox\"\n                            readonly=\"readonly\"\n                            [attr.checked]=\"allSelected()\"\n                            [disabled]=\"disabled || toggleAllDisabled\"\n                            (focus)=\"onHeaderCheckboxFocus($event)\"\n                            (blur)=\"onHeaderCheckboxBlur($event)\"\n                            [attr.aria-label]=\"toggleAllAriaLabel\"\n                        />\n                    </div>\n                    <div class=\"p-checkbox-box\" role=\"checkbox\" [attr.aria-checked]=\"allSelected()\" [ngClass]=\"{ 'p-highlight': allSelected(), 'p-focus': headerCheckboxFocus, 'p-disabled': disabled || toggleAllDisabled }\">\n                        <ng-container *ngIf=\"allSelected()\">\n                            <CheckIcon [styleClass]=\"'p-checkbox-icon'\" *ngIf=\"!checkIconTemplate\" [attr.aria-hidden]=\"true\" />\n                            <span *ngIf=\"checkIconTemplate\" class=\"p-checkbox-icon\" [attr.aria-hidden]=\"true\">\n                                <ng-template *ngTemplateOutlet=\"checkIconTemplate\"></ng-template>\n                            </span>\n                        </ng-container>\n                    </div>\n                </div>\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-listbox-filter-container\" *ngIf=\"filter\">\n                        <input\n                            #filterInput\n                            type=\"text\"\n                            class=\"p-listbox-filter p-inputtext p-component\"\n                            role=\"searchbox\"\n                            [value]=\"_filterValue() || ''\"\n                            [disabled]=\"disabled\"\n                            [attr.aria-owns]=\"id + '_list'\"\n                            [attr.aria-activedescendant]=\"focusedOptionId\"\n                            [attr.placeholder]=\"filterPlaceHolder\"\n                            [attr.aria-label]=\"ariaFilterLabel\"\n                            [tabindex]=\"!disabled && !focused ? tabindex : -1\"\n                            (input)=\"onFilterChange($event)\"\n                            (keydown)=\"onFilterKeyDown($event)\"\n                            (blur)=\"onFilterBlur($event)\"\n                        />\n                        <SearchIcon *ngIf=\"!filterIconTemplate\" [styleClass]=\"'p-listbox-filter-icon'\" [attr.aria-hidden]=\"true\" />\n                        <span *ngIf=\"filterIconTemplate\" class=\"p-listbox-filter-icon\" [attr.aria-hidden]=\"true\">\n                            <ng-template *ngTemplateOutlet=\"filterIconTemplate\"></ng-template>\n                        </span>\n                    </div>\n                    <span role=\"status\" attr.aria-live=\"polite\" class=\"p-hidden-accessible\" [attr.data-p-hidden-accessible]=\"true\">\n                        {{ filterResultMessageText }}\n                    </span>\n                </ng-template>\n            </div>\n            <div [ngClass]=\"'p-listbox-list-wrapper'\" [ngStyle]=\"listStyle\" [class]=\"listStyleClass\" [style.max-height]=\"virtualScroll ? 'auto' : scrollHeight || 'auto'\">\n                <p-scroller\n                    #scroller\n                    *ngIf=\"virtualScroll\"\n                    [items]=\"visibleOptions()\"\n                    [style]=\"{ height: scrollHeight }\"\n                    [itemSize]=\"virtualScrollItemSize\"\n                    [autoSize]=\"true\"\n                    [tabindex]=\"-1\"\n                    [lazy]=\"lazy\"\n                    [options]=\"virtualScrollOptions\"\n                    (onLazyLoad)=\"onLazyLoad.emit($event)\"\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\n                        #list\n                        class=\"p-listbox-list\"\n                        role=\"listbox\"\n                        [tabindex]=\"-1\"\n                        [attr.aria-multiselectable]=\"true\"\n                        [ngClass]=\"scrollerOptions.contentStyleClass\"\n                        [style]=\"scrollerOptions.contentStyle\"\n                        [attr.aria-activedescendant]=\"focused ? focusedOptionId : undefined\"\n                        [attr.aria-label]=\"ariaLabel\"\n                        [attr.aria-multiselectable]=\"multiple\"\n                        [attr.aria-disabled]=\"disabled\"\n                        (focus)=\"onListFocus($event)\"\n                        (blur)=\"onListBlur($event)\"\n                        (keydown)=\"onListKeyDown($event)\"\n                    >\n                        <ng-template ngFor let-option [ngForOf]=\"items\" let-i=\"index\">\n                            <ng-container *ngIf=\"isOptionGroup(option)\">\n                                <li [attr.id]=\"id + '_' + getOptionIndex(i, scrollerOptions)\" class=\"p-listbox-item-group\" [ngStyle]=\"{ height: scrollerOptions.itemSize + 'px' }\" role=\"option\">\n                                    <span *ngIf=\"!groupTemplate\">{{ getOptionGroupLabel(option.optionGroup) }}</span>\n                                    <ng-container *ngTemplateOutlet=\"groupTemplate; context: { $implicit: option.optionGroup }\"></ng-container>\n                                </li>\n                            </ng-container>\n                            <ng-container *ngIf=\"!isOptionGroup(option)\">\n                                <li\n                                    pRipple\n                                    class=\"p-listbox-item\"\n                                    role=\"option\"\n                                    [attr.id]=\"id + '_' + getOptionIndex(i, scrollerOptions)\"\n                                    [ngStyle]=\"{ height: scrollerOptions.itemSize + 'px' }\"\n                                    [ngClass]=\"{ 'p-listbox-item': true, 'p-highlight': isSelected(option), 'p-focus': focusedOptionIndex() === getOptionIndex(i, scrollerOptions), 'p-disabled': isOptionDisabled(option) }\"\n                                    [attr.aria-label]=\"getOptionLabel(option)\"\n                                    [attr.aria-selected]=\"isSelected(option)\"\n                                    [attr.aria-disabled]=\"isOptionDisabled(option)\"\n                                    [attr.aria-setsize]=\"ariaSetSize\"\n                                    [attr.ariaPosInset]=\"getAriaPosInset(getOptionIndex(i, scrollerOptions))\"\n                                    (click)=\"onOptionSelect($event, option, getOptionIndex(i, scrollerOptions))\"\n                                    (dblclick)=\"onOptionDoubleClick($event, option)\"\n                                    (mousedown)=\"onOptionMouseDown($event, getOptionIndex(i, scrollerOptions))\"\n                                    (mouseenter)=\"onOptionMouseEnter($event, getOptionIndex(i, scrollerOptions))\"\n                                    (touchend)=\"onOptionTouchEnd()\"\n                                >\n                                    <div class=\"p-checkbox p-component\" *ngIf=\"checkbox && multiple\" [ngClass]=\"{ 'p-checkbox-disabled': disabled || isOptionDisabled(option) }\">\n                                        <div class=\"p-checkbox-box\" [ngClass]=\"{ 'p-highlight': isSelected(option) }\">\n                                            <ng-container *ngIf=\"isSelected(option)\">\n                                                <CheckIcon [styleClass]=\"'p-checkbox-icon'\" *ngIf=\"!checkIconTemplate\" [attr.aria-hidden]=\"true\" />\n                                                <span *ngIf=\"checkIconTemplate\" class=\"p-checkbox-icon\" [attr.aria-hidden]=\"true\">\n                                                    <ng-template *ngTemplateOutlet=\"checkIconTemplate\"></ng-template>\n                                                </span>\n                                            </ng-container>\n                                        </div>\n                                    </div>\n                                    <span *ngIf=\"!itemTemplate\">{{ getOptionLabel(option) }}</span>\n                                    <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: option, index: getOptionIndex(i, scrollerOptions) }\"></ng-container>\n                                </li>\n                            </ng-container>\n                        </ng-template>\n                        <li *ngIf=\"hasFilter() && isEmpty()\" class=\"p-listbox-empty-message\" role=\"option\">\n                            <ng-container *ngIf=\"!emptyFilterTemplate && !emptyTemplate; else emptyFilter\">\n                                {{ emptyFilterMessageText }}\n                            </ng-container>\n                            <ng-container #emptyFilter *ngTemplateOutlet=\"emptyFilterTemplate || emptyTemplate\"></ng-container>\n                        </li>\n                        <li *ngIf=\"!hasFilter() && isEmpty()\" class=\"p-listbox-empty-message\" role=\"option\">\n                            <ng-container *ngIf=\"!emptyTemplate; else empty\">\n                                {{ emptyMessage }}\n                            </ng-container>\n                            <ng-container #empty *ngTemplateOutlet=\"emptyTemplate\"></ng-container>\n                        </li>\n                    </ul>\n                </ng-template>\n            </div>\n            <div class=\"p-listbox-footer\" *ngIf=\"footerFacet || footerTemplate\">\n                <ng-content select=\"p-footer\"></ng-content>\n                <ng-container *ngTemplateOutlet=\"footerTemplate; context: { $implicit: modelValue(), options: visibleOptions() }\"></ng-container>\n            </div>\n            <span *ngIf=\"isEmpty()\" role=\"status\" aria-live=\"polite\" class=\"p-hidden-accessible\">\n                {{ emptyMessage }}\n            </span>\n            <span role=\"status\" aria-live=\"polite\" class=\"p-hidden-accessible\">\n                {{ selectedMessageText }}\n            </span>\n            <span\n                #lastHiddenFocusableElement\n                role=\"presentation\"\n                [attr.aria-hidden]=\"true\"\n                class=\"p-hidden-accessible p-hidden-focusable\"\n                [tabindex]=\"!disabled ? tabindex : -1\"\n                (focus)=\"onLastHiddenFocus($event)\"\n                [attr.data-p-hidden-focusable]=\"true\"\n            >\n            </span>\n        </div>\n    `,\n    providers: [LISTBOX_VALUE_ACCESSOR],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n    styleUrls: ['./listbox.css'],\n    host: {\n        class: 'p-element'\n    }\n})\nexport class Listbox implements AfterContentInit, OnInit, ControlValueAccessor, OnDestroy {\n    /**\n     * Unique identifier of the component.\n     * @group Props\n     */\n    @Input() id: string | undefined;\n    /**\n     * Text to display when the search is active. Defaults to global value in i18n translation configuration.\n     * @group Props\n     * @defaultValue '{0} results are available'\n     */\n    @Input() searchMessage: string | undefined;\n    /**\n     * Text to display when filtering does not return any results. Defaults to global value in i18n translation configuration.\n     * @group Props\n     * @defaultValue 'No selected item'\n     */\n    @Input() emptySelectionMessage: string | undefined;\n    /**\n     * Text to be displayed in hidden accessible field when options are selected. Defaults to global value in i18n translation configuration.\n     * @group Props\n     * @defaultValue '{0} items selected'\n     */\n    @Input() selectionMessage: string | undefined;\n    /**\n     * Whether to focus on the first visible or selected element when the overlay panel is shown.\n     * @group Props\n     */\n    @Input({ transform: booleanAttribute }) autoOptionFocus: boolean | undefined = true;\n    /**\n     * Defines a string that labels the input for accessibility.\n     * @group Props\n     */\n    @Input() ariaLabel: string | undefined;\n    /**\n     * When enabled, the focused option is selected.\n     * @group Props\n     */\n    @Input({ transform: booleanAttribute }) selectOnFocus: boolean | undefined;\n    /**\n     * Locale to use in searching. The default locale is the host environment's current locale.\n     * @group Props\n     */\n    @Input({ transform: booleanAttribute }) searchLocale: boolean | undefined;\n    /**\n     * When enabled, the hovered option will be focused.\n     * @group Props\n     */\n    @Input({ transform: booleanAttribute }) focusOnHover: boolean | undefined;\n    /**\n     * Text to display when filtering.\n     * @group Props\n     */\n    @Input() filterMessage: string | undefined;\n    /**\n     * Fields used when filtering the options, defaults to optionLabel.\n     * @group Props\n     */\n    @Input() filterFields: any[] | undefined;\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     * 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     * Index of the element in tabbing order.\n     * @group Props\n     */\n    @Input({ transform: numberAttribute }) tabindex: number | undefined = 0;\n    /**\n     * When specified, allows selecting multiple values.\n     * @group Props\n     */\n    @Input({ transform: booleanAttribute }) multiple: boolean | undefined;\n    /**\n     * Inline style of the container.\n     * @group Props\n     */\n    @Input() style: { [klass: string]: any } | null | undefined;\n    /**\n     * Style class of the container.\n     * @group Props\n     */\n    @Input() styleClass: string | undefined;\n    /**\n     * Inline style of the list element.\n     * @group Props\n     */\n    @Input() listStyle: { [klass: string]: any } | null | undefined;\n    /**\n     * Style class of the list element.\n     * @group Props\n     */\n    @Input() listStyleClass: string | undefined;\n    /**\n     * When present, it specifies that the element value cannot be changed.\n     * @group Props\n     */\n    @Input({ transform: booleanAttribute }) readonly: boolean | undefined;\n    /**\n     * When present, it specifies that the element should be disabled.\n     * @group Props\n     */\n    @Input({ transform: booleanAttribute }) disabled: boolean | undefined;\n    /**\n     * When specified, allows selecting items with checkboxes.\n     * @group Props\n     */\n    @Input({ transform: booleanAttribute }) checkbox: boolean = false;\n    /**\n     * When specified, displays a filter input at header.\n     * @group Props\n     */\n    @Input({ transform: booleanAttribute }) filter: boolean = false;\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     * 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     * 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     * Defines how multiple items can be selected, when true metaKey needs to be pressed to select or unselect an item and when set to false selection of each item can be toggled individually. On touch enabled devices, metaKeySelection is turned off automatically.\n     * @group Props\n     */\n    @Input({ transform: booleanAttribute }) metaKeySelection: boolean = false;\n    /**\n     * A property to uniquely identify a value in options.\n     * @group Props\n     */\n    @Input() dataKey: string | undefined;\n    /**\n     * Whether header checkbox is shown in multiple mode.\n     * @group Props\n     */\n    @Input({ transform: booleanAttribute }) showToggleAll: boolean = true;\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 options field of an option group.\n     * @group Props\n     */\n    @Input() optionGroupChildren: string | undefined = 'items';\n    /**\n     * Name of the label field of an option group.\n     * @group Props\n     */\n    @Input() optionGroupLabel: string | undefined = 'label';\n    /**\n     * Name of the disabled field of an option.\n     * @group Props\n     */\n    @Input() optionDisabled: string | undefined;\n    /**\n     * Defines a string that labels the filter input.\n     * @group Props\n     */\n    @Input() ariaFilterLabel: string | undefined;\n    /**\n     * Defines placeholder of the filter input.\n     * @group Props\n     */\n    @Input() filterPlaceHolder: string | undefined;\n    /**\n     * Text to display when filtering does not return any results.\n     * @group Props\n     */\n    @Input() emptyFilterMessage: string | undefined;\n    /**\n     * Text to display when there is no data. Defaults to global value in i18n translation configuration.\n     * @group Props\n     */\n    @Input() emptyMessage: string | undefined;\n    /**\n     * Whether to display options as grouped when nested options are provided.\n     * @group Props\n     */\n    @Input({ transform: booleanAttribute }) group: boolean | undefined;\n    /**\n     * An array of selectitems to display as the available options.\n     * @group Props\n     */\n    @Input() get options(): any[] {\n        return this._options();\n    }\n    set options(val: any[]) {\n        this._options.set(val);\n    }\n    /**\n     * When specified, filter displays with this value.\n     * @group Props\n     */\n    @Input() get filterValue(): string {\n        return this._filterValue();\n    }\n    set filterValue(val: string) {\n        this._filterValue.set(val);\n    }\n    /**\n     * Whether all data is selected.\n     * @group Props\n     */\n    @Input() get selectAll(): boolean | undefined | null {\n        return this._selectAll;\n    }\n    set selectAll(value: boolean | undefined | null) {\n        this._selectAll = value;\n    }\n    /**\n     * Callback to invoke on value change.\n     * @param {ListboxChangeEvent} event - Custom change event.\n     * @group Emits\n     */\n    @Output() onChange: EventEmitter<ListboxChangeEvent> = new EventEmitter<ListboxChangeEvent>();\n    /**\n     * Callback to invoke when option is clicked.\n     * @param {ListboxClickEvent} event - Custom click event.\n     * @group Emits\n     */\n    @Output() onClick: EventEmitter<ListboxClickEvent> = new EventEmitter<ListboxClickEvent>();\n    /**\n     * Callback to invoke when option is double clicked.\n     * @param {ListboxDoubleClickEvent} event - Custom double click event.\n     * @group Emits\n     */\n    @Output() onDblClick: EventEmitter<ListboxDoubleClickEvent> = new EventEmitter<ListboxDoubleClickEvent>();\n    /**\n     * Callback to invoke when data is filtered.\n     * @param {ListboxFilterEvent} event - Custom filter event.\n     * @group Emits\n     */\n    @Output() onFilter: EventEmitter<ListboxFilterEvent> = new EventEmitter<ListboxFilterEvent>();\n    /**\n     * Callback to invoke when component receives focus.\n     * @param {FocusEvent} event - Focus event.\n     * @group Emits\n     */\n    @Output() onFocus: EventEmitter<FocusEvent> = new EventEmitter<FocusEvent>();\n    /**\n     * Callback to invoke when component loses focus.\n     * @param {FocusEvent} event - Blur event.\n     * @group Emits\n     */\n    @Output() onBlur: EventEmitter<FocusEvent> = new EventEmitter<FocusEvent>();\n    /**\n     * Callback to invoke when all data is selected.\n     * @param {ListboxSelectAllChangeEvent} event - Custom select event.\n     * @group Emits\n     */\n    @Output() onSelectAllChange: EventEmitter<ListboxSelectAllChangeEvent> = new EventEmitter<ListboxSelectAllChangeEvent>();\n\n    @ViewChild('headerchkbox') headerCheckboxViewChild: Nullable<ElementRef>;\n\n    @ViewChild('filter') filterViewChild: Nullable<ElementRef>;\n\n    @ViewChild('lastHiddenFocusableElement') lastHiddenFocusableElement: Nullable<ElementRef>;\n\n    @ViewChild('firstHiddenFocusableElement') firstHiddenFocusableElement: Nullable<ElementRef>;\n\n    @ViewChild('scroller') scroller: Nullable<Scroller>;\n\n    @ViewChild('list') listViewChild: Nullable<ElementRef>;\n\n    @ContentChild(Header) headerFacet: Nullable<TemplateRef<any>>;\n\n    @ContentChild(Footer) footerFacet: Nullable<TemplateRef<any>>;\n\n    @ContentChildren(PrimeTemplate) templates!: QueryList<PrimeTemplate>;\n\n    public itemTemplate: TemplateRef<any> | undefined;\n\n    public groupTemplate: TemplateRef<any> | undefined;\n\n    public headerTemplate: TemplateRef<any> | undefined;\n\n    public filterTemplate: TemplateRef<any> | undefined;\n\n    public footerTemplate: TemplateRef<any> | undefined;\n\n    public emptyFilterTemplate: TemplateRef<any> | undefined;\n\n    public emptyTemplate: TemplateRef<any> | undefined;\n\n    filterIconTemplate: TemplateRef<any> | undefined;\n\n    checkIconTemplate: TemplateRef<any> | undefined;\n\n    public _filterValue = signal<string | null | undefined>(null);\n\n    public _filteredOptions: any[] | undefined | null;\n\n    filterOptions: ListboxFilterOptions | undefined;\n\n    public filtered: boolean | undefined | null;\n\n    public value: any | undefined | null;\n\n    public onModelChange: Function = () => {};\n\n    public onModelTouched: Function = () => {};\n\n    public optionTouched: boolean | undefined | null;\n\n    public focus: boolean | undefined | null;\n\n    public headerCheckboxFocus: boolean | undefined | null;\n\n    translationSubscription: Nullable<Subscription>;\n\n    focused: boolean | undefined;\n\n    get containerClass() {\n        return {\n            'p-listbox p-component': true,\n            'p-disabled': this.disabled\n        };\n    }\n\n    get focusedOptionId() {\n        return this.focusedOptionIndex() !== -1 ? `${this.id}_${this.focusedOptionIndex()}` : null;\n    }\n\n    get filterResultMessageText() {\n        return ObjectUtils.isNotEmpty(this.visibleOptions()) ? this.filterMessageText.replaceAll('{0}', this.visibleOptions().length) : this.emptyFilterMessageText;\n    }\n\n    get filterMessageText() {\n        return this.filterMessage || this.config.translation.searchMessage || '';\n    }\n\n    get searchMessageText() {\n        return this.searchMessage || this.config.translation.searchMessage || '';\n    }\n\n    get emptyFilterMessageText() {\n        return this.emptyFilterMessage || this.config.translation.emptySearchMessage || this.config.translation.emptyFilterMessage || '';\n    }\n\n    get selectionMessageText() {\n        return this.selectionMessage || this.config.translation.selectionMessage || '';\n    }\n\n    get emptySelectionMessageText() {\n        return this.emptySelectionMessage || this.config.translation.emptySelectionMessage || '';\n    }\n\n    get selectedMessageText() {\n        return this.hasSelectedOption() ? this.selectionMessageText.replaceAll('{0}', this.multiple ? this.modelValue().length : '1') : this.emptySelectionMessageText;\n    }\n\n    get ariaSetSize() {\n        return this.visibleOptions().filter((option) => !this.isOptionGroup(option)).length;\n    }\n\n    get virtualScrollerDisabled() {\n        return !this.virtualScroll;\n    }\n\n    get searchFields() {\n        return this.filterFields || [this.optionLabel];\n    }\n\n    get toggleAllAriaLabel() {\n        return this.config.translation.aria ? this.config.translation.aria[this.allSelected() ? 'selectAll' : 'unselectAll'] : undefined;\n    }\n\n    searchValue: string | undefined;\n\n    searchTimeout: any;\n\n    _selectAll: boolean | undefined | null = null;\n\n    _options = signal<any>(null);\n\n    startRangeIndex = signal<number>(-1);\n\n    focusedOptionIndex = signal<number>(-1);\n\n    modelValue = signal<any>(null);\n\n    visibleOptions = computed(() => {\n        const options = this.group ? this.flatOptions(this._options()) : this._options() || [];\n        return this._filterValue() ? this.filterService.filter(options, this.searchFields, this._filterValue(), this.filterMatchMode, this.filterLocale) : options;\n    });\n\n    constructor(\n        public el: ElementRef,\n        public cd: ChangeDetectorRef,\n        public filterService: FilterService,\n        public config: PrimeNGConfig,\n        private renderer: Renderer2\n    ) {}\n\n    ngOnInit() {\n        this.id = this.id || UniqueComponentId();\n        this.translationSubscription = this.config.translationObserver.subscribe(() => {\n            this.cd.markForCheck();\n        });\n\n        this.autoUpdateModel();\n\n        if (this.filterBy) {\n            this.filterOptions = {\n                filter: (value) => this.onFilterChange(value),\n                reset: () => this.resetFilter()\n            };\n        }\n    }\n\n    ngAfterContentInit() {\n        this.templates.forEach((item) => {\n            switch (item.getType()) {\n                case 'item':\n                    this.itemTemplate = item.template;\n                    break;\n\n                case 'group':\n                    this.groupTemplate = item.template;\n                    break;\n\n                case '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 'empty':\n                    this.emptyTemplate = item.template;\n                    break;\n\n                case 'emptyfilter':\n                    this.emptyFilterTemplate = item.template;\n                    break;\n\n                case 'filtericon':\n                    this.filterIconTemplate = item.template;\n                    break;\n\n                case 'checkicon':\n                    this.checkIconTemplate = item.template;\n                    break;\n\n                default:\n                    this.itemTemplate = item.template;\n                    break;\n            }\n        });\n    }\n\n    writeValue(value: any): void {\n        this.value = value;\n        this.modelValue.set(this.value);\n        this.cd.markForCheck();\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    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() && !this.multiple) {\n            const focusedOptionIndex = this.findFirstFocusedOptionIndex();\n            this.focusedOptionIndex.set(focusedOptionIndex);\n            this.onOptionSelect(null, this.visibleOptions()[this.focusedOptionIndex()]);\n        }\n    }\n    /**\n     * Updates the model value.\n     * @group Method\n     */\n    public updateModel(value, event?) {\n        this.value = value;\n        this.modelValue.set(value);\n        this.onModelChange(value);\n\n        this.onChange.emit({ originalEvent: event, value: this.value });\n    }\n\n    removeOption(option) {\n        return this.modelValue().filter((val) => !ObjectUtils.equals(val, this.getOptionValue(option), this.equalityKey()));\n    }\n\n    onOptionSelect(event, option, index = -1) {\n        if (this.disabled || this.isOptionDisabled(option) || this.readonly) {\n            return;\n        }\n\n        event && this.onClick.emit({ originalEvent: event, option, value: this.value });\n\n        this.multiple ? this.onOptionSelectMultiple(event, option) : this.onOptionSelectSingle(event, option);\n        this.optionTouched = false;\n        index !== -1 && this.focusedOptionIndex.set(index);\n    }\n\n    onOptionSelectMultiple(event, option) {\n        let selected = this.isSelected(option);\n        let value = null;\n        let metaSelection = this.optionTouched ? false : this.metaKeySelection;\n\n        if (metaSelection) {\n            let metaKey = event.metaKey || event.ctrlKey;\n\n            if (selected) {\n                value = metaKey ? this.removeOption(option) : [this.getOptionValue(option)];\n            } else {\n                value = metaKey ? this.modelValue() || [] : [];\n                value = [...value, this.getOptionValue(option)];\n            }\n        } else {\n            value = selected ? this.removeOption(option) : [...(this.modelValue() || []), this.getOptionValue(option)];\n        }\n\n        this.updateModel(value, event);\n    }\n\n    onOptionSelectSingle(event, option) {\n        let selected = this.isSelected(option);\n        let valueChanged = false;\n        let value = null;\n        let metaSelection = this.optionTouched ? false : this.metaKeySelection;\n\n        if (metaSelection) {\n            let metaKey = event.metaKey || event.ctrlKey;\n\n            if (selected) {\n                if (metaKey) {\n                    value = null;\n                    valueChanged = true;\n                }\n            } else {\n                value = this.getOptionValue(option);\n                valueChanged = true;\n            }\n        } else {\n            value = selected ? null : this.getOptionValue(option);\n            valueChanged = true;\n        }\n\n        if (valueChanged) {\n            this.updateModel(value, event);\n        }\n    }\n\n    onOptionSelectRange(event, start = -1, end = -1) {\n        start === -1 && (start = this.findNearestSelectedOptionIndex(end, true));\n        end === -1 && (end = this.findNearestSelectedOptionIndex(start));\n\n        if (start !== -1 && end !== -1) {\n            const rangeStart = Math.min(start, end);\n            const rangeEnd = Math.max(start, end);\n            const value = this.visibleOptions()\n                .slice(rangeStart, rangeEnd + 1)\n                .filter((option) => this.isValidOption(option))\n                .map((option) => this.getOptionValue(option));\n\n            this.updateModel(value, event);\n        }\n    }\n\n    onToggleAll(event) {\n        if (this.disabled || this.readonly) {\n            return;\n        }\n        DomHandler.focus(this.headerCheckboxViewChild.nativeElement);\n\n        if (this.selectAll !== null) {\n            this.onSelectAllChange.emit({\n                originalEvent: event,\n                checked: !this.allSelected()\n            });\n        } else {\n            const value = this.allSelected()\n                ? []\n                : this.visibleOptions()\n                      .filter((option) => this.isValidOption(option))\n                      .map((option) => this.getOptionValue(option));\n\n            this.updateModel(value, event);\n            this.onChange.emit({ originalEvent: event, value: this.value });\n        }\n\n        event.preventDefault();\n        // event.stopPropagation();\n    }\n\n    allSelected() {\n        return this.selectAll !== null ? this.selectAll : ObjectUtils.isNotEmpty(this.visibleOptions()) && this.visibleOptions().every((option) => this.isOptionGroup(option) || this.isOptionDisabled(option) || this.isSelected(option));\n    }\n\n    onOptionTouchEnd() {\n        if (this.disabled) {\n            return;\n        }\n\n        this.optionTouched = true;\n    }\n\n    onOptionMouseDown(event: MouseEvent, index: number) {\n        this.changeFocusedOptionIndex(event, index);\n    }\n\n    onOptionMouseEnter(event: MouseEvent, index: number) {\n        if (this.focusOnHover) {\n            this.changeFocusedOptionIndex(event, index);\n        }\n    }\n\n    onOptionDoubleClick(event: MouseEvent, option: any) {\n        if (this.disabled || this.isOptionDisabled(option) || this.readonly) {\n            return;\n        }\n\n        this.onDblClick.emit({\n            originalEvent: event,\n            option: option,\n            value: this.value\n        });\n    }\n\n    onFirstHiddenFocus(event: FocusEvent) {\n        DomHandler.focus(this.listViewChild.nativeElement);\n        const firstFocusableEl = DomHandler.getFirstFocusableElement(this.el.nativeElement, ':not([data-p-hidden-focusable=\"true\"])');\n        this.lastHiddenFocusableElement.nativeElement.tabIndex = ObjectUtils.isEmpty(firstFocusableEl) ? '-1' : undefined;\n        this.firstHiddenFocusableElement.nativeElement.tabIndex = -1;\n    }\n\n    onLastHiddenFocus(event: FocusEvent) {\n        const relatedTarget = event.relatedTarget;\n\n        if (relatedTarget === this.listViewChild.nativeElement) {\n            const firstFocusableEl = DomHandler.getFirstFocusableElement(this.el.nativeElement, ':not(.p-hidden-focusable)');\n\n            DomHandler.focus(firstFocusableEl);\n            this.firstHiddenFocusableElement.nativeElement.tabIndex = undefined;\n        } else {\n            DomHandler.focus(this.firstHiddenFocusableElement.nativeElement);\n        }\n        this.lastHiddenFocusableElement.nativeElement.tabIndex = -1;\n    }\n\n    onFocusout(event: FocusEvent) {\n        if (!this.el.nativeElement.contains(event.relatedTarget) && this.lastHiddenFocusableElement && this.firstHiddenFocusableElement) {\n            this.firstHiddenFocusableElement.nativeElement.tabIndex = this.lastHiddenFocusableElement.nativeElement.tabIndex = undefined;\n        }\n    }\n\n    onListFocus(event: FocusEvent) {\n        this.focused = true;\n        const focusedOptionIndex = this.focusedOptionIndex() !== -1 ? this.focusedOptionIndex() : this.autoOptionFocus ? this.findFirstFocusedOptionIndex() : -1;\n        this.focusedOptionIndex.set(focusedOptionIndex);\n        this.onFocus.emit(event);\n    }\n\n    onListBlur(event: FocusEvent) {\n        this.focused = false;\n        this.focusedOptionIndex.set(-1);\n        this.startRangeIndex.set(-1);\n        this.searchValue = '';\n    }\n\n    onHeaderCheckboxFocus(event) {\n        this.headerCheckboxFocus = true;\n    }\n\n    onHeaderCheckboxBlur() {\n        this.headerCheckboxFocus = false;\n    }\n\n    onHeaderCheckboxKeyDown(event) {\n        if (this.disabled) {\n            event.preventDefault();\n\n            return;\n        }\n\n        switch (event.code) {\n            case 'Space':\n                this.onToggleAll(event);\n                break;\n            case 'Enter':\n                this.onToggleAll(event);\n                break;\n            case 'Tab':\n                this.onHeaderCheckboxTabKeyDown(event);\n                break;\n            default:\n                break;\n        }\n    }\n\n    onHeaderCheckboxTabKeyDown(event) {\n        DomHandler.focus(this.listViewChild.nativeElement);\n        event.preventDefault();\n    }\n\n    onFilterChange(event: KeyboardEvent) {\n        let value: string = (event.target as HTMLInputElement).value?.trim();\n        this._filterValue.set(value);\n        this.focusedOptionIndex.set(-1);\n        this.startRangeIndex.set(-1);\n        this.onFilter.emit({ originalEvent: event, filter: this._filterValue() });\n\n        !this.virtualScrollerDisabled && this.scroller.scrollToIndex(0);\n    }\n\n    onFilterBlur(event: FocusEvent) {\n        this.focusedOptionIndex.set(-1);\n        this.startRangeIndex.set(-1);\n    }\n\n    onListKeyDown(event: KeyboardEvent) {\n        const metaKey = event.metaKey || event.ctrlKey;\n\n        switch (event.code) {\n            case 'ArrowDown':\n                this.onArrowDownKey(event);\n                break;\n\n            case 'ArrowUp':\n                this.onArrowUpKey(event);\n                break;\n\n            case 'Home':\n                this.onHomeKey(event);\n                break;\n\n            case 'End':\n                this.onEndKey(event);\n                break;\n\n            case 'PageDown':\n                this.onPageDownKey(event);\n                break;\n\n            case 'PageUp':\n                this.onPageUpKey(event);\n                break;\n\n            case 'Enter':\n            case 'Space':\n            case 'NumpadEnter':\n                this.onSpaceKey(event);\n                break;\n\n            case 'Tab':\n                //NOOP\n                break;\n\n            case 'ShiftLeft':\n            case 'ShiftRight':\n                this.onShiftKey();\n                break;\n\n            default:\n                if (this.multiple && event.code === 'KeyA' && metaKey) {\n                    const value = this.visibleOptions()\n                        .filter((option) => this.isValidOption(option))\n                        .map((option) => this.getOptionValue(option));\n\n                    this.updateModel(value, event);\n\n                    event.preventDefault();\n                    break;\n                }\n\n                if (!metaKey && ObjectUtils.isPrintableCharacter(event.key)) {\n                    this.searchOptions(event, event.key);\n                    event.preventDefault();\n                }\n\n                break;\n        }\n    }\n\n    onFilterKeyDown(event: KeyboardEvent) {\n        switch (event.code) {\n            case 'ArrowDown':\n                this.onArrowDownKey(event);\n                break;\n\n            case 'ArrowUp':\n                this.onArrowUpKey(event);\n                break;\n\n            case 'ArrowLeft':\n            case 'ArrowRight':\n                this.onArrowLeftKey(event, true);\n                break;\n\n            case 'Home':\n                this.onHomeKey(event, true);\n                break;\n\n            case 'End':\n                this.onEndKey(event, true);\n                break;\n\n            case 'Enter':\n                this.onEnterKey(event);\n                break;\n\n            case 'ShiftLeft':\n            case 'ShiftRight':\n                this.onShiftKey();\n                break;\n\n            default:\n                break;\n        }\n    }\n\n    onArrowDownKey(event: KeyboardEvent) {\n        const optionIndex = this.focusedOptionIndex() !== -1 ? this.findNextOptionIndex(this.focusedOptionIndex()) : this.findFirstFocusedOptionIndex();\n\n        if (this.multiple && event.shiftKey) {\n            this.onOptionSelectRange(event, this.startRangeIndex(), optionIndex);\n        }\n\n        this.changeFocusedOptionIndex(event, optionIndex);\n        event.preventDefault();\n    }\n\n    onArrowUpKey(event: KeyboardEvent) {\n        const optionIndex = this.focusedOptionIndex() !== -1 ? this.findPrevOptionIndex(this.focusedOptionIndex()) : this.findLastFocusedOptionIndex();\n\n        if (this.multiple && event.shiftKey) {\n            this.onOptionSelectRange(event, optionIndex, this.startRangeIndex());\n        }\n\n        this.changeFocusedOptionIndex(event, optionIndex);\n        event.preventDefault();\n    }\n\n    onArrowLeftKey(event: KeyboardEvent, pressedInInputText = false) {\n        pressedInInputText && this.focusedOptionIndex.set(-1);\n    }\n\n    onHomeKey(event: KeyboardEvent, pressedInInputText: boolean = false) {\n        if (pressedInInputText) {\n            (event.currentTarget as HTMLInputElement).setSelectionRange(0, 0);\n            this.focusedOptionIndex.set(-1);\n        } else {\n            let metaKey = event.metaKey || event.ctrlKey;\n            let optionIndex = this.findFirstOptionIndex();\n\n            if (this.multiple && event.shiftKey && metaKey) {\n                this.onOptionSelectRange(event, optionIndex, this.startRangeIndex());\n            }\n\n            this.changeFocusedOptionIndex(event, optionIndex);\n        }\n\n        event.preventDefault();\n    }\n\n    onEndKey(event: KeyboardEvent, pressedInInputText: boolean = false) {\n        if (pressedInInputText) {\n            const target = event.currentTarget as HTMLInputElement;\n            const len = target.value.length;\n\n            target.setSelectionRange(len, len);\n            this.focusedOptionIndex.set(-1);\n        } else {\n            let metaKey = event.metaKey || event.ctrlKey;\n            let optionIndex = this.findLastOptionIndex();\n\n            if (this.multiple && event.shiftKey && metaKey) {\n                this.onOptionSelectRange(event, this.startRangeIndex(), optionIndex);\n            }\n\n            this.changeFocusedOptionIndex(event, optionIndex);\n        }\n\n        event.preventDefault();\n    }\n\n    onPageDownKey(event: KeyboardEvent) {\n        this.scrollInView(0);\n        event.preventDefault();\n    }\n\n    onPageUpKey(event: KeyboardEvent) {\n        this.scrollInView(this.visibleOptions().length - 1);\n        event.preventDefault();\n    }\n\n    onEnterKey(event) {\n        if (this.focusedOptionIndex() !== -1) {\n            if (this.multiple && event.shiftKey) this.onOptionSelectRange(event, this.focusedOptionIndex());\n            else this.onOptionSelect(event, this.visibleOptions()[this.focusedOptionIndex()]);\n        }\n\n        event.preventDefault();\n    }\n\n    onSpaceKey(event: KeyboardEvent) {\n        this.onEnterKey(event);\n    }\n\n    onShiftKey() {\n        const focusedOptionIndex = this.focusedOptionIndex();\n        this.startRangeIndex.set(focusedOptionIndex);\n    }\n\n    getOptionGroupChildren(optionGroup) {\n        return this.optionGroupChildren ? ObjectUtils.resolveFieldData(optionGroup, this.optionGroupChildren) : optionGroup.items;\n    }\n\n    getOptionGroupLabel(optionGroup: any) {\n        return this.optionGroupLabel ? ObjectUtils.resolveFieldData(optionGroup, this.optionGroupLabel) : optionGroup && optionGroup.label !== undefined ? optionGroup.label : optionGroup;\n    }\n\n    getOptionLabel(option) {\n        return this.optionLabel ? ObjectUtils.resolveFieldData(option, this.optionLabel) : option.label != undefined ? option.label : option;\n    }\n\n    getOptionIndex(index, scrollerOptions) {\n        return this.virtualScrollerDisabled ? index : scrollerOptions && scrollerOptions.getItemOptions(index)['index'];\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    getAriaPosInset(index: number) {\n        return (\n            (this.optionGroupLabel\n                ? index -\n                  this.visibleOptions()\n                      .slice(0, index)\n                      .filter((option) => this.isOptionGroup(option)).length\n                : index) + 1\n        );\n    }\n\n    hasSelectedOption() {\n        return ObjectUtils.isNotEmpty(this.modelValue());\n    }\n\n    isOptionGroup(option) {\n        return this.optionGroupLabel && option.optionGroup && option.group;\n    }\n\n    changeFocusedOptionIndex(event, index) {\n        if (this.focusedOptionIndex() !== index) {\n            this.focusedOptionIndex.set(index);\n            this.scrollInView();\n\n            if (this.selectOnFocus && !this.multiple) {\n                this.onOptionSelect(event, this.visibleOptions()[index]);\n            }\n        }\n    }\n\n    searchOptions(event, char) {\n        this.searchValue = (this.searchValue || '') + char;\n\n        let optionIndex = -1;\n        let matched = false;\n\n        if (this.focusedOptionIndex() !== -1) {\n            optionIndex = this.visibleOptions()\n                .slice(this.focusedOptionIndex())\n                .findIndex((option) => this.isOptionMatched(option));\n            optionIndex =\n                optionIndex === -1\n                    ? this.visibleOptions()\n                          .slice(0, this.focusedOptionIndex())\n                          .findIndex((option) => this.isOptionMatched(option))\n                    : optionIndex + this.focusedOptionIndex();\n        } else {\n            optionIndex = this.visibleOptio