primeng/fesm2022/primeng-dropdown.mjs.map

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

{"version":3,"file":"primeng-dropdown.mjs","sources":["../../src/dropdown/style/dropdownstyle.ts","../../src/dropdown/dropdown.ts","../../src/dropdown/primeng-dropdown.ts"],"sourcesContent":["import { Injectable } from '@angular/core';\nimport { BaseStyle } from 'primeng/base';\n/**\n *\n * Dropdown also known as Select, is used to choose an item from a collection of options.\n *\n * [Live Demo](https://www.primeng.org/select/)\n *\n * @module dropdownstyle\n *\n */\nimport type { SelectStyle } from 'primeng/select';\n\nconst theme = ({ dt }) => `\n.p-select {\n    display: inline-flex;\n    cursor: pointer;\n    position: relative;\n    user-select: none;\n    background: ${dt('select.background')};\n    border: 1px solid ${dt('select.border.color')};\n    transition: background ${dt('select.transition.duration')}, color ${dt('select.transition.duration')}, border-color ${dt('select.transition.duration')},\n        outline-color ${dt('select.transition.duration')}, box-shadow ${dt('select.transition.duration')};\n    border-radius: ${dt('select.border.radius')};\n    outline-color: transparent;\n    box-shadow: ${dt('select.shadow')};\n}\n\n.p-select:not(.p-disabled):hover {\n    border-color: ${dt('select.hover.border.color')};\n}\n\n.p-select:not(.p-disabled).p-focus {\n    border-color: ${dt('select.focus.border.color')};\n    box-shadow: ${dt('select.focus.ring.shadow')};\n    outline: ${dt('select.focus.ring.width')} ${dt('select.focus.ring.style')} ${dt('select.focus.ring.color')};\n    outline-offset: ${dt('select.focus.ring.offset')};\n}\n\n.p-select.p-variant-filled {\n    background: ${dt('select.filled.background')};\n}\n\n.p-select.p-variant-filled.p-focus {\n    background: ${dt('select.filled.focus.background')};\n}\n\n.p-select.p-disabled {\n    opacity: 1;\n    background: ${dt('select.disabled.background')};\n}\n\n.p-select-clear-icon {\n    position: absolute;\n    top: 50%;\n    margin-top: -0.5rem;\n    color: ${dt('select.clear.icon.color')};\n    right: ${dt('select.dropdown.width')};\n}\n\n.p-select-dropdown {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    background: transparent;\n    color: ${dt('select.dropdown.color')};\n    width: ${dt('select.dropdown.width')};\n    border-start-end-radius: ${dt('select.border.radius')};\n    border-end-end-radius: ${dt('select.border.radius')};\n}\n\n.p-select-label {\n    display: block;\n    white-space: nowrap;\n    overflow: hidden;\n    flex: 1 1 auto;\n    width: 1%;\n    padding: ${dt('select.padding.y')} ${dt('select.padding.x')};\n    text-overflow: ellipsis;\n    cursor: pointer;\n    color: ${dt('select.color')};\n    background: transparent;\n    border: 0 none;\n    outline: 0 none;\n}\n\n.p-select-label.p-placeholder {\n    color: ${dt('select.placeholder.color')};\n}\n\n.p-select:has(.p-select-clear-icon) .p-select-label {\n    padding-right: calc(1rem + ${dt('select.padding.x')});\n}\n\n.p-select.p-disabled .p-select-label {\n    color: ${dt('select.disabled.color')};\n}\n\n.p-select-label-empty {\n    overflow: hidden;\n    opacity: 0;\n}\n\ninput.p-select-label {\n    cursor: default;\n}\n\n.p-select .p-select-overlay {\n    min-width: 100%;\n}\n\n.p-select-overlay {\n    position: absolute;\n    top: 0;\n    left: 0;\n    background: ${dt('select.overlay.background')};\n    color: ${dt('select.overlay.color')};\n    border: 1px solid ${dt('select.overlay.border.color')};\n    border-radius: ${dt('select.overlay.border.radius')};\n    box-shadow: ${dt('select.overlay.shadow')};\n}\n\n.p-select-header {\n    padding: ${dt('select.list.header.padding')};\n}\n\n.p-select-filter {\n    width: 100%;\n}\n\n.p-select-list-container {\n    overflow: auto;\n}\n\n.p-select-option-group {\n    cursor: auto;\n    margin: 0;\n    padding: ${dt('select.option.group.padding')};\n    background: ${dt('select.option.group.background')};\n    color: ${dt('select.option.group.color')};\n    font-weight: ${dt('select.option.group.font.weight')};\n}\n\n.p-select-list {\n    margin: 0;\n    padding: 0;\n    list-style-type: none;\n    padding: ${dt('select.list.padding')};\n    gap: ${dt('select.list.gap')};\n    display: flex;\n    flex-direction: column;\n}\n\n.p-select-option {\n    cursor: pointer;\n    font-weight: normal;\n    white-space: nowrap;\n    position: relative;\n    overflow: hidden;\n    display: flex;\n    align-items: center;\n    padding: ${dt('select.option.padding')};\n    border: 0 none;\n    color: ${dt('select.option.color')};\n    background: transparent;\n    transition: background ${dt('select.transition.duration')}, color ${dt('select.transition.duration')}, border-color ${dt('select.transition.duration')},\n    box-shadow ${dt('select.transition.duration')}, outline-color ${dt('select.transition.duration')};\n    border-radius: ${dt('select.option.border.radius')};\n}\n\n.p-select-option:not(.p-select-option-selected):not(.p-disabled).p-focus {\n    background: ${dt('select.option.focus.background')};\n    color: ${dt('select.option.focus.color')};\n}\n\n.p-select-option.p-select-option-selected {\n    background: ${dt('select.option.selected.background')};\n    color: ${dt('select.option.selected.color')};\n}\n\n.p-select-option.p-select-option-selected.p-focus {\n    background: ${dt('select.option.selected.focus.background')};\n    color: ${dt('select.option.selected.focus.color')};\n}\n\n.p-select-option-check-icon {\n    position: relative;\n    margin-inline-start: ${dt('select.checkmark.gutter.start')};\n    margin-inline-end: ${dt('select.checkmark.gutter.end')};\n    color: ${dt('select.checkmark.color')};\n}\n\n.p-select-empty-message {\n    padding: ${dt('select.empty.message.padding')};\n}\n\n.p-select-fluid {\n    display: flex;\n}\n\n/*For PrimeNG*/\n\n.p-dropdown.ng-invalid.ng-dirty,\n.p-select.ng-invalid.ng-dirty {\n    outline: 1px solid ${dt('select.invalid.border.color')};\n    outline-offset: 0;\n}\n\n.p-dropdown.ng-invalid.ng-dirty .p-dropdown-label.p-placeholder,\n.p-select.ng-invalid.ng-dirty .p-select-label.p-placeholder {\n    color: ${dt('select.invalid.placeholder.color')};\n}\n`;\n\nconst classes = {\n    root: ({ instance }) => [\n        'p-dropdown p-select p-component p-inputwrapper',\n        {\n            'p-disabled': instance.disabled,\n            'p-variant-filled': instance.variant === 'filled' || instance.config.inputVariant() === 'filled' || instance.config.inputStyle() === 'filled',\n            'p-focus': instance.focused,\n            'p-inputwrapper-filled': instance.modelValue() !== undefined && instance.modelValue() !== null && !instance.modelValue().length,\n            'p-inputwrapper-focus': instance.focused || instance.overlayVisible,\n            'p-select-open': instance.overlayVisible,\n            'p-select-fluid': instance.hasFluid,\n            'p-select-sm p-inputfield-sm': instance.size === 'small',\n            'p-select-lg p-inputfield-lg': instance.size === 'large'\n        }\n    ],\n    label: ({ instance, props }) => [\n        'p-select-label',\n        {\n            'p-placeholder': !props.editable && instance.label === props.placeholder,\n            'p-select-label-empty': !props.editable && !instance.$slots['value'] && (instance.label === 'p-emptylabel' || instance.label.length === 0)\n        }\n    ],\n    clearIcon: 'p-select-clear-icon',\n    dropdown: 'p-select-dropdown',\n    loadingicon: 'p-select-loading-icon',\n    dropdownIcon: 'p-select-dropdown-icon',\n    overlay: 'p-select-overlay p-component',\n    header: 'p-select-header',\n    pcFilter: 'p-select-filter',\n    listContainer: 'p-select-list-container',\n    list: 'p-select-list',\n    optionGroup: 'p-select-option-group',\n    optionGroupLabel: 'p-select-option-group-label',\n    option: ({ instance, props, state, option, focusedOption }) => [\n        'p-select-option',\n        {\n            'p-select-option-selected': instance.isSelected(option) && props.highlightOnSelect,\n            'p-focus': state.focusedOptionIndex === focusedOption,\n            'p-disabled': instance.isOptionDisabled(option)\n        }\n    ],\n    optionLabel: 'p-select-option-label',\n    optionCheckIcon: 'p-select-option-check-icon',\n    optionBlankIcon: 'p-select-option-blank-icon',\n    emptyMessage: 'p-select-empty-message'\n};\n\n@Injectable()\nexport class DropdownStyle extends BaseStyle {\n    name = 'select';\n\n    theme = theme;\n\n    classes = classes;\n}\n\nexport enum DropdownClasses {}\n\nexport interface DropdownStyle extends SelectStyle {}\n","import { AnimationEvent } from '@angular/animations';\nimport { CommonModule } from '@angular/common';\nimport {\n    AfterContentInit,\n    AfterViewChecked,\n    AfterViewInit,\n    booleanAttribute,\n    ChangeDetectionStrategy,\n    Component,\n    computed,\n    ContentChildren,\n    effect,\n    ElementRef,\n    EventEmitter,\n    forwardRef,\n    HostBinding,\n    inject,\n    Input,\n    NgModule,\n    NgZone,\n    numberAttribute,\n    OnInit,\n    Output,\n    QueryList,\n    Signal,\n    signal,\n    TemplateRef,\n    ViewChild,\n    ViewEncapsulation,\n    ViewRef\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport {\n    deepEquals,\n    equals,\n    findLastIndex,\n    findSingle,\n    focus,\n    getFirstFocusableElement,\n    getFocusableElements,\n    getLastFocusableElement,\n    isEmpty,\n    isNotEmpty,\n    isPrintableCharacter,\n    resolveFieldData,\n    scrollInView,\n    unblockBodyScroll,\n    uuid\n} from '@primeuix/utils';\nimport { FilterService, OverlayOptions, PrimeTemplate, ScrollerOptions, SelectItem, SharedModule, TranslationKeys } from 'primeng/api';\nimport { AutoFocusModule } from 'primeng/autofocus';\nimport { BaseComponent } from 'primeng/basecomponent';\nimport { IconField } from 'primeng/iconfield';\nimport { BlankIcon, CheckIcon, ChevronDownIcon, SearchIcon, TimesIcon } from 'primeng/icons';\nimport { InputIcon } from 'primeng/inputicon';\nimport { InputTextModule } from 'primeng/inputtext';\nimport { Overlay, OverlayModule } from 'primeng/overlay';\nimport { Ripple } from 'primeng/ripple';\nimport { Scroller } from 'primeng/scroller';\nimport { TooltipModule } from 'primeng/tooltip';\nimport { Nullable } from 'primeng/ts-helpers';\nimport { DropdownChangeEvent, DropdownFilterEvent, DropdownFilterOptions, DropdownLazyLoadEvent } from './dropdown.interface';\nimport { DropdownStyle } from './style/dropdownstyle';\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    standalone: false,\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]=\"{\n                'p-select-option': true,\n                'p-select-option-selected': selected,\n                'p-disabled': disabled,\n                'p-focus': focused\n            }\"\n        >\n            <ng-container *ngIf=\"checkmark\">\n                <CheckIcon *ngIf=\"selected\" [styleClass]=\"'p-select-option-check-icon'\" />\n                <BlankIcon *ngIf=\"!selected\" [styleClass]=\"'p-select-option-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})\nexport class DropdownItem extends BaseComponent {\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    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    standalone: false,\n    template: `\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]=\"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]=\"autofocus\"\n            [attr.aria-activedescendant]=\"focused ? focusedOptionId : undefined\"\n            (focus)=\"onInputFocus($event)\"\n            (blur)=\"onInputBlur($event)\"\n        />\n        <ng-container *ngIf=\"isVisibleClearIcon\">\n            <TimesIcon class=\"p-select-clear-icon\" (click)=\"clear($event)\" *ngIf=\"!clearIconTemplate\" [attr.data-pc-section]=\"'clearicon'\" />\n            <span class=\"p-select-clear-icon\" (click)=\"clear($event)\" *ngIf=\"clearIconTemplate\" [attr.data-pc-section]=\"'clearicon'\">\n                <ng-template *ngTemplateOutlet=\"clearIconTemplate; context: { class: 'p-select-clear-icon' }\"></ng-template>\n            </span>\n        </ng-container>\n\n        <div class=\"p-select-dropdown\" 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-select-loading-icon pi-spin ' + loadingIcon\" aria-hidden=\"true\"></span>\n                    <span *ngIf=\"!loadingIcon\" [class]=\"'p-select-loading-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-select-dropdown-icon\" *ngIf=\"dropdownIcon\" [ngClass]=\"dropdownIcon\"></span>\n                    <ChevronDownIcon *ngIf=\"!dropdownIcon\" [styleClass]=\"'p-select-dropdown-icon'\" />\n                </ng-container>\n                <span *ngIf=\"dropdownIconTemplate\" class=\"p-select-dropdown-icon\">\n                    <ng-template *ngTemplateOutlet=\"dropdownIconTemplate; context: { class: 'p-select-dropdown-icon' }\"></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 #content>\n                <div [ngClass]=\"'p-select-overlay 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-select-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                            <p-iconfield>\n                                <input\n                                    #filter\n                                    pInputText\n                                    type=\"text\"\n                                    role=\"searchbox\"\n                                    autocomplete=\"off\"\n                                    [value]=\"_filterValue() || ''\"\n                                    class=\"p-select-filter\"\n                                    [variant]=\"variant\"\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                                <p-inputicon>\n                                    <SearchIcon *ngIf=\"!filterIconTemplate\" />\n                                    <span *ngIf=\"filterIconTemplate\">\n                                        <ng-template *ngTemplateOutlet=\"filterIconTemplate\"></ng-template>\n                                    </span>\n                                </p-inputicon>\n                            </p-iconfield>\n                        </ng-template>\n                    </div>\n                    <div class=\"p-select-list-container\" [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 #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 #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-select-list\" [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-select-option-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-select-empty-message\" [ngStyle]=\"{ height: scrollerOptions.itemSize + 'px' }\" role=\"option\">\n                                    @if (!emptyFilterTemplate && !emptyTemplate) {\n                                        {{ emptyFilterMessageLabel }}\n                                    } @else {\n                                        <ng-container #emptyFilter *ngTemplateOutlet=\"emptyFilterTemplate || emptyTemplate\"></ng-container>\n                                    }\n                                </li>\n                                <li *ngIf=\"!filterValue && isEmpty()\" class=\"p-select-empty-message\" [ngStyle]=\"{ height: scrollerOptions.itemSize + 'px' }\" role=\"option\">\n                                    @if (!emptyTemplate) {\n                                        {{ emptyMessageLabel }}\n                                    } @else {\n                                        <ng-container *ngTemplateOutlet=\"emptyTemplate\"></ng-container>\n                                    }\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    `,\n    host: {\n        '[attr.id]': 'id',\n        '(click)': 'onContainerClick($event)'\n    },\n    providers: [DROPDOWN_VALUE_ACCESSOR, DropdownStyle],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None\n})\nexport class Dropdown extends BaseComponent 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';\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     * Whether the component should span the full width of its parent.\n     * @group Props\n     */\n    @Input({ transform: booleanAttribute }) fluid: boolean | undefined;\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.log('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.log('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.log('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.log('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.log('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 (!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    _componentStyle = inject(DropdownStyle);\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    // @todo to be refactored\n    @HostBinding('class') get hostClass() {\n        const classes = this._componentStyle.classes\n            .root({ instance: this })\n            .map((cls) => {\n                if (typeof cls === 'string') {\n                    return cls;\n                } else {\n                    return Object.keys(cls)\n                        .filter((key) => cls[key])\n                        .join(' ');\n                }\n            })\n            .join(' ');\n\n        return classes + ' ' + this.styleClass;\n    }\n\n    @HostBinding('style') get hostStyle() {\n        return this.style;\n    }\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    selectedOptionUpdated: Nullable<boolean>;\n\n    _filterValue = signal<any>(null);\n\n    searchValue: Nullable<string>;\n\n    searchTimeout: any;\n\n    preventModelTouched: Nullable<boolean>;\n\n    focusedOptionIndex = signal<number>(-1);\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 hasFluid() {\n        const nativeElement = this.el.nativeElement;\n        const fluidComponent = nativeElement.closest('p-fluid');\n        return this.fluid || !!fluidComponent;\n    }\n\n    get inputClass() {\n        const label = this.label();\n        return {\n            'p-select-label': true,\n            'p-placeholder': this.placeholder() && label === this.placeholder(),\n            'p-select-label-empty': !this.editable && !this.selectedItemTemplate && (label === undefined || label === null || label === 'p-emptylabel' || label.length === 0)\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)\n                        filtered.push({\n                            ...group,\n                            [typeof this.optionGroupChildren === 'string' ? this.optionGroupChildren : 'items']: [...filteredItems]\n                        });\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        /