primeng/fesm2022/primeng-multiselect.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-multiselect.mjs","sources":["../../src/multiselect/style/multiselectstyle.ts","../../src/multiselect/multiselect.ts","../../src/multiselect/primeng-multiselect.ts"],"sourcesContent":["import { Injectable } from '@angular/core';\nimport { style } from '@primeuix/styles/multiselect';\nimport { BaseStyle } from 'primeng/base';\n\nconst theme = /*css*/ `\n    ${style}\n\n    /* For PrimeNG */\n   .p-multiselect.ng-invalid.ng-dirty {\n        border-color: dt('multiselect.invalid.border.color');\n    }\n    p-multiSelect.ng-invalid.ng-dirty .p-multiselect-label.p-placeholder,\n    p-multi-select.ng-invalid.ng-dirty .p-multiselect-label.p-placeholder,\n    p-multiselect.ng-invalid.ng-dirty .p-multiselect-label.p-placeholder {\n        color: dt('multiselect.invalid.placeholder.color');\n    }\n`;\n\nconst inlineStyles = {\n    root: ({ instance }) => ({ position: instance.$appendTo() === 'self' ? 'relative' : undefined })\n};\n\nconst classes = {\n    root: ({ instance }) => [\n        'p-multiselect p-component p-inputwrapper',\n        {\n            'p-multiselect p-component p-inputwrapper': true,\n            'p-multiselect-display-chip': instance.display === 'chip',\n            'p-disabled': instance.$disabled(),\n            'p-invalid': instance.invalid(),\n            'p-variant-filled': instance.$variant(),\n            'p-focus': instance.focused,\n            'p-inputwrapper-filled': instance.$filled(),\n            'p-inputwrapper-focus': instance.focused || instance.overlayVisible,\n            'p-multiselect-open': instance.overlayVisible,\n            'p-multiselect-fluid': instance.hasFluid,\n            'p-multiselect-sm p-inputfield-sm': instance.size() === 'small',\n            'p-multiselect-lg p-inputfield-lg': instance.size() === 'large'\n        }\n    ],\n    labelContainer: 'p-multiselect-label-container',\n    label: ({ instance }) => ({\n        'p-multiselect-label': true,\n        'p-placeholder': instance.label() === instance.placeholder(),\n        'p-multiselect-label-empty': !instance.placeholder() && !instance.defaultLabel && (!instance.modelValue() || instance.modelValue().length === 0)\n    }),\n    chipItem: 'p-multiselect-chip-item',\n    pcChip: 'p-multiselect-chip',\n    chipIcon: 'p-multiselect-chip-icon',\n    dropdown: 'p-multiselect-dropdown',\n    loadingIcon: 'p-multiselect-loading-icon',\n    dropdownIcon: 'p-multiselect-dropdown-icon',\n    overlay: 'p-multiselect-overlay p-component-overlay p-component',\n    header: 'p-multiselect-header',\n    pcFilterContainer: 'p-multiselect-filter-container',\n    pcFilter: 'p-multiselect-filter',\n    listContainer: 'p-multiselect-list-container',\n    list: 'p-multiselect-list',\n    optionGroup: 'p-multiselect-option-group',\n    option: ({ instance }) => ({\n        'p-multiselect-option': true,\n        'p-multiselect-option-selected': instance.selected && instance.highlightOnSelect,\n        'p-disabled': instance.disabled,\n        'p-focus': instance.focused\n    }),\n    emptyMessage: 'p-multiselect-empty-message',\n    clearIcon: 'p-multiselect-clear-icon'\n};\n\n@Injectable()\nexport class MultiSelectStyle extends BaseStyle {\n    name = 'multiselect';\n\n    theme = theme;\n\n    classes = classes;\n\n    inlineStyles = inlineStyles;\n}\n\n/**\n *\n * MultiSelect is used to select multiple items from a collection.\n *\n * [Live Demo](https://www.primeng.org/multiselect/)\n *\n * @module multiselectstyle\n *\n */\nexport enum MultiSelectClasses {\n    /**\n     * Class name of the root element\n     */\n    root = 'p-multiselect',\n    /**\n     * Class name of the label container element\n     */\n    labelContainer = 'p-multiselect-label-container',\n    /**\n     * Class name of the label element\n     */\n    label = 'p-multiselect-label',\n    /**\n     * Class name of the chip item element\n     */\n    chipItem = 'p-multiselect-chip-item',\n    /**\n     * Class name of the chip element\n     */\n    pcChip = 'p-multiselect-chip',\n    /**\n     * Class name of the chip icon element\n     */\n    chipIcon = 'p-multiselect-chip-icon',\n    /**\n     * Class name of the dropdown element\n     */\n    dropdown = 'p-multiselect-dropdown',\n    /**\n     * Class name of the loading icon element\n     */\n    loadingIcon = 'p-multiselect-loading-icon',\n    /**\n     * Class name of the dropdown icon element\n     */\n    dropdownIcon = 'p-multiselect-dropdown-icon',\n    /**\n     * Class name of the overlay element\n     */\n    overlay = 'p-multiselect-overlay',\n    /**\n     * Class name of the header element\n     */\n    header = 'p-multiselect-header',\n    /**\n     * Class name of the filter container element\n     */\n    pcFilterContainer = 'p-multiselect-filter-container',\n    /**\n     * Class name of the filter element\n     */\n    pcFilter = 'p-multiselect-filter',\n    /**\n     * Class name of the list container element\n     */\n    listContainer = 'p-multiselect-list-container',\n    /**\n     * Class name of the list element\n     */\n    list = 'p-multiselect-list',\n    /**\n     * Class name of the option group element\n     */\n    optionGroup = 'p-multiselect-option-group',\n    /**\n     * Class name of the option element\n     */\n    option = 'p-multiselect-option',\n    /**\n     * Class name of the empty message element\n     */\n    emptyMessage = 'p-multiselect-empty-message',\n    /**\n     * Class name of the clear icon\n     */\n    clearIcon = 'p-autocomplete-clear-icon'\n}\n\nexport interface MultiSelectStyle extends BaseStyle {}\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    ContentChild,\n    ContentChildren,\n    effect,\n    ElementRef,\n    EventEmitter,\n    forwardRef,\n    inject,\n    input,\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} from '@angular/core';\nimport { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { deepEquals, equals, findLastIndex, findSingle, focus, getFirstFocusableElement, getFocusableElements, getLastFocusableElement, isArray, isNotEmpty, isPrintableCharacter, resolveFieldData, uuid } from '@primeuix/utils';\nimport { FilterService, Footer, Header, OverlayOptions, OverlayService, PrimeTemplate, ScrollerOptions, SharedModule, TranslationKeys } from 'primeng/api';\nimport { AutoFocus } from 'primeng/autofocus';\nimport { BaseComponent } from 'primeng/basecomponent';\nimport { BaseEditableHolder } from 'primeng/baseeditableholder';\nimport { Checkbox } from 'primeng/checkbox';\nimport { Chip } from 'primeng/chip';\nimport { DomHandler, unblockBodyScroll } from 'primeng/dom';\nimport { Fluid } from 'primeng/fluid';\nimport { IconField } from 'primeng/iconfield';\nimport { CheckIcon, ChevronDownIcon, SearchIcon, TimesIcon } from 'primeng/icons';\nimport { InputIcon } from 'primeng/inputicon';\nimport { InputText } from 'primeng/inputtext';\nimport { Overlay } from 'primeng/overlay';\nimport { Ripple } from 'primeng/ripple';\nimport { Scroller } from 'primeng/scroller';\nimport { Tooltip } from 'primeng/tooltip';\nimport { Nullable } from 'primeng/ts-helpers';\nimport { ObjectUtils } from 'primeng/utils';\nimport { MultiSelectBlurEvent, MultiSelectChangeEvent, MultiSelectFilterEvent, MultiSelectFilterOptions, MultiSelectFocusEvent, MultiSelectLazyLoadEvent, MultiSelectRemoveEvent, MultiSelectSelectAllChangeEvent } from './multiselect.interface';\nimport { MultiSelectStyle } from './style/multiselectstyle';\n\nexport const MULTISELECT_VALUE_ACCESSOR: any = {\n    provide: NG_VALUE_ACCESSOR,\n    useExisting: forwardRef(() => MultiSelect),\n    multi: true\n};\n\n@Component({\n    selector: 'p-multiSelectItem, p-multiselect-item',\n    standalone: true,\n    imports: [CommonModule, Checkbox, FormsModule, Ripple, SharedModule],\n    template: `\n        <li\n            pRipple\n            [class]=\"cx('option')\"\n            role=\"option\"\n            [ngStyle]=\"{ height: itemSize + 'px' }\"\n            [id]=\"id\"\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            [attr.aria-checked]=\"selected\"\n            (click)=\"onOptionClick($event)\"\n            (mouseenter)=\"onOptionMouseEnter($event)\"\n        >\n            <p-checkbox [ngModel]=\"selected\" [binary]=\"true\" [tabindex]=\"-1\" [variant]=\"variant\" [ariaLabel]=\"label\">\n                <ng-container *ngIf=\"itemCheckboxIconTemplate\">\n                    <ng-template #icon let-klass=\"class\">\n                        <ng-template *ngTemplateOutlet=\"itemCheckboxIconTemplate; context: { checked: selected, class: klass }\"></ng-template>\n                    </ng-template>\n                </ng-container>\n            </p-checkbox>\n            <span *ngIf=\"!template\">{{ label ?? 'empty' }}</span>\n            <ng-container *ngTemplateOutlet=\"template; context: { $implicit: option }\"></ng-container>\n        </li>\n    `,\n    encapsulation: ViewEncapsulation.None,\n    providers: [MultiSelectStyle]\n})\nexport class MultiSelectItem extends BaseComponent {\n    @Input() id: string | undefined;\n\n    @Input() option: any;\n\n    @Input({ transform: booleanAttribute }) selected: boolean | undefined;\n\n    @Input() label: string | undefined;\n\n    @Input({ transform: booleanAttribute }) disabled: boolean | undefined;\n\n    @Input({ transform: numberAttribute }) itemSize: number | undefined;\n\n    @Input({ transform: booleanAttribute }) focused: boolean | undefined;\n\n    @Input() ariaPosInset: string | undefined;\n\n    @Input() ariaSetSize: string | undefined;\n\n    @Input() variant: 'outlined' | 'filled';\n\n    @Input() template: TemplateRef<any> | undefined;\n\n    @Input() checkIconTemplate: TemplateRef<any> | undefined;\n\n    @Input() itemCheckboxIconTemplate: TemplateRef<any> | undefined;\n\n    @Input({ transform: booleanAttribute }) highlightOnSelect: boolean | undefined;\n\n    @Output() onClick: EventEmitter<any> = new EventEmitter();\n\n    @Output() onMouseEnter: EventEmitter<any> = new EventEmitter();\n\n    _componentStyle = inject(MultiSelectStyle);\n\n    onOptionClick(event: Event) {\n        this.onClick.emit({\n            originalEvent: event,\n            option: this.option,\n            selected: this.selected\n        });\n        event.stopPropagation();\n        event.preventDefault();\n    }\n\n    onOptionMouseEnter(event: Event) {\n        this.onMouseEnter.emit({\n            originalEvent: event,\n            option: this.option,\n            selected: this.selected\n        });\n    }\n}\n\n/**\n * MultiSelect is used to select multiple items from a collection.\n * @group Components\n */\n@Component({\n    selector: 'p-multiSelect, p-multiselect, p-multi-select',\n    standalone: true,\n    imports: [CommonModule, MultiSelectItem, Overlay, SharedModule, Tooltip, Scroller, AutoFocus, CheckIcon, SearchIcon, TimesIcon, ChevronDownIcon, IconField, InputIcon, InputText, Chip, Checkbox, FormsModule],\n    template: `\n        <div class=\"p-hidden-accessible\" [attr.data-p-hidden-accessible]=\"true\">\n            <input\n                #focusInput\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\"\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                [attr.aria-activedescendant]=\"focused ? focusedOptionId : undefined\"\n                (focus)=\"onInputFocus($event)\"\n                (blur)=\"onInputBlur($event)\"\n                (keydown)=\"onKeyDown($event)\"\n                [pAutoFocus]=\"autofocus\"\n                [attr.value]=\"modelValue()\"\n                [attr.name]=\"name()\"\n                [attr.required]=\"required() ? '' : undefined\"\n                [attr.disabled]=\"$disabled() ? '' : undefined\"\n            />\n        </div>\n        <div\n            [class]=\"cx('labelContainer')\"\n            [pTooltip]=\"tooltip\"\n            (mouseleave)=\"labelContainerMouseLeave()\"\n            [tooltipDisabled]=\"_disableTooltip\"\n            [tooltipPosition]=\"tooltipPosition\"\n            [positionStyle]=\"tooltipPositionStyle\"\n            [tooltipStyleClass]=\"tooltipStyleClass\"\n        >\n            <div [class]=\"cx('label')\">\n                <ng-container *ngIf=\"!selectedItemsTemplate && !_selectedItemsTemplate\">\n                    <ng-container *ngIf=\"display === 'comma'\">{{ label() || 'empty' }}</ng-container>\n                    <ng-container *ngIf=\"display === 'chip'\">\n                        @if (chipSelectedItems() && chipSelectedItems().length === maxSelectedLabels) {\n                            {{ getSelectedItemsLabel() }}\n                        } @else {\n                            <div #token *ngFor=\"let item of chipSelectedItems(); let i = index\" [class]=\"cx('chipItem')\">\n                                <p-chip [class]=\"cx('pcChip')\" [label]=\"getLabelByValue(item)\" [removable]=\"!$disabled() && !readonly\" (onRemove)=\"removeOption(item, $event)\" [removeIcon]=\"chipIcon\">\n                                    <ng-container *ngIf=\"chipIconTemplate || _chipIconTemplate || removeTokenIconTemplate || _removeTokenIconTemplate\">\n                                        <ng-template #removeicon>\n                                            <ng-container *ngIf=\"!$disabled() && !readonly\">\n                                                <span\n                                                    [class]=\"cx('chipIcon')\"\n                                                    *ngIf=\"chipIconTemplate || _chipIconTemplate || removeTokenIconTemplate || _removeTokenIconTemplate\"\n                                                    (click)=\"removeOption(item, $event)\"\n                                                    [attr.data-pc-section]=\"'clearicon'\"\n                                                    [attr.aria-hidden]=\"true\"\n                                                >\n                                                    <ng-container *ngTemplateOutlet=\"chipIconTemplate || _chipIconTemplate || removeTokenIconTemplate || _removeTokenIconTemplate; context: { class: 'p-multiselect-chip-icon' }\"></ng-container>\n                                                </span>\n                                            </ng-container>\n                                        </ng-template>\n                                    </ng-container>\n                                </p-chip>\n                            </div>\n                        }\n                        <ng-container *ngIf=\"!modelValue() || modelValue().length === 0\">{{ placeholder() || 'empty' }}</ng-container>\n                    </ng-container>\n                </ng-container>\n                <ng-container *ngIf=\"selectedItemsTemplate || _selectedItemsTemplate\">\n                    <ng-container *ngTemplateOutlet=\"selectedItemsTemplate || _selectedItemsTemplate; context: { $implicit: selectedOptions, removeChip: removeOption.bind(this) }\"></ng-container>\n                    <ng-container *ngIf=\"!modelValue() || modelValue().length === 0\">{{ placeholder() || 'empty' }}</ng-container>\n                </ng-container>\n            </div>\n        </div>\n        <ng-container *ngIf=\"isVisibleClearIcon\">\n            <svg data-p-icon=\"times\" *ngIf=\"!clearIconTemplate && !_clearIconTemplate\" [class]=\"cx('clearIcon')\" (click)=\"clear($event)\" [attr.data-pc-section]=\"'clearicon'\" [attr.aria-hidden]=\"true\" />\n            <span *ngIf=\"clearIconTemplate || _clearIconTemplate\" [class]=\"cx('clearIcon')\" (click)=\"clear($event)\" [attr.data-pc-section]=\"'clearicon'\" [attr.aria-hidden]=\"true\">\n                <ng-template *ngTemplateOutlet=\"clearIconTemplate || _clearIconTemplate\"></ng-template>\n            </span>\n        </ng-container>\n        <div [class]=\"cx('dropdown')\">\n            <ng-container *ngIf=\"loading; else elseBlock\">\n                <ng-container *ngIf=\"loadingIconTemplate || _loadingIconTemplate\">\n                    <ng-container *ngTemplateOutlet=\"loadingIconTemplate || _loadingIconTemplate\"></ng-container>\n                </ng-container>\n                <ng-container *ngIf=\"!loadingIconTemplate && !_loadingIconTemplate\">\n                    <span *ngIf=\"loadingIcon\" [class]=\"cn(cx('loadingIcon'), 'pi-spin ' + loadingIcon)\" [attr.aria-hidden]=\"true\"></span>\n                    <span *ngIf=\"!loadingIcon\" [class]=\"cn(cx('loadingIcon'), 'pi pi-spinner pi-spin')\" [attr.aria-hidden]=\"true\"></span>\n                </ng-container>\n            </ng-container>\n            <ng-template #elseBlock>\n                <ng-container *ngIf=\"!dropdownIconTemplate && !_dropdownIconTemplate\">\n                    <span *ngIf=\"dropdownIcon\" [class]=\"cx('dropdownIcon')\" [ngClass]=\"dropdownIcon\" [attr.data-pc-section]=\"'triggericon'\" [attr.aria-hidden]=\"true\"></span>\n                    <svg data-p-icon=\"chevron-down\" *ngIf=\"!dropdownIcon\" [class]=\"cx('dropdownIcon')\" [attr.data-pc-section]=\"'triggericon'\" [attr.aria-hidden]=\"true\" />\n                </ng-container>\n                <span *ngIf=\"dropdownIconTemplate || _dropdownIconTemplate\" [class]=\"cx('dropdownIcon')\" [attr.data-pc-section]=\"'triggericon'\" [attr.aria-hidden]=\"true\">\n                    <ng-template *ngTemplateOutlet=\"dropdownIconTemplate || _dropdownIconTemplate\"></ng-template>\n                </span>\n            </ng-template>\n        </div>\n        <p-overlay #overlay [hostAttrSelector]=\"attrSelector\" [(visible)]=\"overlayVisible\" [options]=\"overlayOptions\" [target]=\"'@parent'\" [appendTo]=\"$appendTo()\" (onAnimationStart)=\"onOverlayAnimationStart($event)\" (onHide)=\"hide()\">\n            <ng-template #content>\n                <div [attr.id]=\"id + '_list'\" [class]=\"cn(cx('overlay'), panelStyleClass)\" [ngStyle]=\"panelStyle\">\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 || _headerTemplate\"></ng-container>\n                    <div [class]=\"cx('header')\" *ngIf=\"showHeader\">\n                        <ng-content select=\"p-header\"></ng-content>\n                        <ng-container *ngIf=\"filterTemplate || _filterTemplate; else builtInFilterElement\">\n                            <ng-container *ngTemplateOutlet=\"filterTemplate || _filterTemplate; context: { options: filterOptions }\"></ng-container>\n                        </ng-container>\n                        <ng-template #builtInFilterElement>\n                            <p-checkbox\n                                [ngModel]=\"allSelected()\"\n                                [ariaLabel]=\"toggleAllAriaLabel\"\n                                [binary]=\"true\"\n                                (onChange)=\"onToggleAll($event)\"\n                                *ngIf=\"showToggleAll && !selectionLimit\"\n                                [variant]=\"$variant()\"\n                                [disabled]=\"$disabled()\"\n                                #headerCheckbox\n                            >\n                                <ng-template #icon let-klass=\"class\">\n                                    <svg data-p-icon=\"check\" *ngIf=\"!headerCheckboxIconTemplate && !_headerCheckboxIconTemplate && allSelected()\" [class]=\"klass\" [attr.data-pc-section]=\"'icon'\" />\n                                    <ng-template\n                                        *ngTemplateOutlet=\"\n                                            headerCheckboxIconTemplate || _headerCheckboxIconTemplate;\n                                            context: {\n                                                checked: allSelected(),\n                                                partialSelected: partialSelected(),\n                                                class: klass\n                                            }\n                                        \"\n                                    ></ng-template>\n                                </ng-template>\n                            </p-checkbox>\n\n                            <p-iconfield *ngIf=\"filter\" [class]=\"cx('pcFilterContainer')\">\n                                <input\n                                    #filterInput\n                                    pInputText\n                                    [variant]=\"$variant()\"\n                                    type=\"text\"\n                                    [attr.autocomplete]=\"autocomplete\"\n                                    role=\"searchbox\"\n                                    [attr.aria-owns]=\"id + '_list'\"\n                                    [attr.aria-activedescendant]=\"focusedOptionId\"\n                                    [value]=\"_filterValue() || ''\"\n                                    (input)=\"onFilterInputChange($event)\"\n                                    (keydown)=\"onFilterKeyDown($event)\"\n                                    (click)=\"onInputClick($event)\"\n                                    (blur)=\"onFilterBlur($event)\"\n                                    [class]=\"cx('pcFilter')\"\n                                    [attr.disabled]=\"$disabled() ? '' : undefined\"\n                                    [attr.placeholder]=\"filterPlaceHolder\"\n                                    [attr.aria-label]=\"ariaFilterLabel\"\n                                />\n                                <p-inputicon>\n                                    <svg data-p-icon=\"search\" *ngIf=\"!filterIconTemplate && !_filterIconTemplate\" />\n                                    <span *ngIf=\"filterIconTemplate || _filterIconTemplate\" class=\"p-multiselect-filter-icon\">\n                                        <ng-template *ngTemplateOutlet=\"filterIconTemplate || _filterIconTemplate\"></ng-template>\n                                    </span>\n                                </p-inputicon>\n                            </p-iconfield>\n                        </ng-template>\n                    </div>\n                    <div [class]=\"cx('listContainer')\" [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\"\n                            [autoSize]=\"true\"\n                            [tabindex]=\"-1\"\n                            [lazy]=\"lazy\"\n                            (onLazyLoad)=\"onLazyLoad.emit($event)\"\n                            [options]=\"virtualScrollOptions\"\n                        >\n                            <ng-template #content let-items let-scrollerOptions=\"options\">\n                                <ng-container *ngTemplateOutlet=\"buildInItems; context: { $implicit: items, options: scrollerOptions }\"></ng-container>\n                            </ng-template>\n                            <ng-container *ngIf=\"loaderTemplate || _loaderTemplate\">\n                                <ng-template #loader let-scrollerOptions=\"options\">\n                                    <ng-container *ngTemplateOutlet=\"loaderTemplate || _loaderTemplate; context: { options: scrollerOptions }\"></ng-container>\n                                </ng-template>\n                            </ng-container>\n                        </p-scroller>\n                        <ng-container *ngIf=\"!virtualScroll\">\n                            <ng-container *ngTemplateOutlet=\"buildInItems; context: { $implicit: visibleOptions(), options: {} }\"></ng-container>\n                        </ng-container>\n\n                        <ng-template #buildInItems let-items let-scrollerOptions=\"options\">\n                            <ul #items [class]=\"cn(cx('list'), scrollerOptions.contentStyleClass)\" [style]=\"scrollerOptions.contentStyle\" role=\"listbox\" aria-multiselectable=\"true\" [attr.aria-label]=\"listLabel\">\n                                <ng-template ngFor let-option [ngForOf]=\"items\" let-i=\"index\">\n                                    <ng-container *ngIf=\"isOptionGroup(option)\">\n                                        <li [attr.id]=\"id + '_' + getOptionIndex(i, scrollerOptions)\" [class]=\"cx('optionGroup')\" [ngStyle]=\"{ height: scrollerOptions.itemSize + 'px' }\" role=\"option\">\n                                            <span *ngIf=\"!groupTemplate\">{{ getOptionGroupLabel(option.optionGroup) }}</span>\n                                            <ng-container *ngTemplateOutlet=\"groupTemplate; context: { $implicit: option.optionGroup }\"></ng-container>\n                                        </li>\n                                    </ng-container>\n                                    <ng-container *ngIf=\"!isOptionGroup(option)\">\n                                        <p-multiselect-item\n                                            [id]=\"id + '_' + getOptionIndex(i, scrollerOptions)\"\n                                            [option]=\"option\"\n                                            [selected]=\"isSelected(option)\"\n                                            [label]=\"getOptionLabel(option)\"\n                                            [disabled]=\"isOptionDisabled(option)\"\n                                            [template]=\"itemTemplate || _itemTemplate\"\n                                            [itemCheckboxIconTemplate]=\"itemCheckboxIconTemplate || _itemCheckboxIconTemplate\"\n                                            [itemSize]=\"scrollerOptions.itemSize\"\n                                            [focused]=\"focusedOptionIndex() === getOptionIndex(i, scrollerOptions)\"\n                                            [ariaPosInset]=\"getAriaPosInset(getOptionIndex(i, scrollerOptions))\"\n                                            [ariaSetSize]=\"ariaSetSize\"\n                                            [variant]=\"$variant()\"\n                                            [highlightOnSelect]=\"highlightOnSelect\"\n                                            (onClick)=\"onOptionSelect($event, false, getOptionIndex(i, scrollerOptions))\"\n                                            (onMouseEnter)=\"onOptionMouseEnter($event, getOptionIndex(i, scrollerOptions))\"\n                                        ></p-multiselect-item>\n                                    </ng-container>\n                                </ng-template>\n\n                                <li *ngIf=\"hasFilter() && isEmpty()\" [class]=\"cx('emptyMessage')\" [ngStyle]=\"{ height: scrollerOptions.itemSize + 'px' }\" role=\"option\">\n                                    @if (!emptyFilterTemplate && !_emptyFilterTemplate && !emptyTemplate && !_emptyTemplate) {\n                                        {{ emptyFilterMessageLabel }}\n                                    } @else {\n                                        <ng-container *ngTemplateOutlet=\"emptyFilterTemplate || _emptyFilterTemplate || emptyTemplate || _emptyFilterTemplate\"></ng-container>\n                                    }\n                                </li>\n                                <li *ngIf=\"!hasFilter() && isEmpty()\" [class]=\"cx('emptyMessage')\" [ngStyle]=\"{ height: scrollerOptions.itemSize + 'px' }\" role=\"option\">\n                                    @if (!emptyTemplate && !_emptyTemplate) {\n                                        {{ emptyMessageLabel }}\n                                    } @else {\n                                        <ng-container *ngTemplateOutlet=\"emptyTemplate || _emptyTemplate\"></ng-container>\n                                    }\n                                </li>\n                            </ul>\n                        </ng-template>\n                    </div>\n                    <div *ngIf=\"footerFacet || footerTemplate || _footerTemplate\">\n                        <ng-content select=\"p-footer\"></ng-content>\n                        <ng-container *ngTemplateOutlet=\"footerTemplate || _footerTemplate\"></ng-container>\n                    </div>\n\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    providers: [MULTISELECT_VALUE_ACCESSOR, MultiSelectStyle],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n    host: {\n        '[attr.id]': 'id',\n        '(click)': 'onContainerClick($event)',\n        '[class]': \"cn(cx('root'), styleClass)\",\n        '[style]': \"sx('root')\"\n    }\n})\nexport class MultiSelect extends BaseEditableHolder implements OnInit, AfterViewInit, AfterContentInit, AfterViewChecked {\n    /**\n     * Unique identifier of the component\n     * @group Props\n     */\n    @Input() id: string | undefined;\n    /**\n     * Defines a string that labels the input for accessibility.\n     * @group Props\n     */\n    @Input() ariaLabel: string | undefined;\n    /**\n     * Style class of the element.\n     * @deprecated since v20.0.0, use `class` instead.\n     * @group Props\n     */\n    @Input() styleClass: string | undefined;\n    /**\n     * Inline style of the overlay panel.\n     * @group Props\n     */\n    @Input() panelStyle: any;\n    /**\n     * Style class of the overlay panel element.\n     * @group Props\n     */\n    @Input() panelStyleClass: string | undefined;\n    /**\n     * Identifier of the focus input to match a label defined for the component.\n     * @group Props\n     */\n    @Input() inputId: string | undefined;\n    /**\n     * When present, it specifies that the component cannot be edited.\n     * @group Props\n     */\n    @Input({ transform: booleanAttribute }) readonly: boolean | 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     * When specified, displays an input field to filter the items on keyup.\n     * @group Props\n     */\n    @Input({ transform: booleanAttribute }) filter: boolean = true;\n    /**\n     * Defines placeholder of the filter input.\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 visibility of the options panel.\n     * @group Props\n     */\n    @Input({ transform: booleanAttribute }) overlayVisible: boolean | undefined;\n    /**\n     * Index of the element in tabbing order.\n     * @group Props\n     */\n    @Input({ transform: numberAttribute }) tabindex: number | undefined = 0;\n    /**\n     * A property to uniquely identify a value in options.\n     * @group Props\n     */\n    @Input() dataKey: 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     * Whether to show labels of selected item labels or use default label.\n     * @group Props\n     * @defaultValue true\n     */\n    @Input() set displaySelectedLabel(val: boolean) {\n        this._displaySelectedLabel = val;\n    }\n    get displaySelectedLabel(): boolean {\n        return this._displaySelectedLabel;\n    }\n    /**\n     * Decides how many selected item labels to show at most.\n     * @group Props\n     * @defaultValue 3\n     */\n    @Input() set maxSelectedLabels(val: number | null | undefined) {\n        this._maxSelectedLabels = val;\n    }\n    get maxSelectedLabels(): number | null | undefined {\n        return this._maxSelectedLabels;\n    }\n    /**\n     * Maximum number of selectable items.\n     * @group Props\n     */\n    @Input({ transform: numberAttribute }) selectionLimit: number | undefined;\n    /**\n     * Label to display after exceeding max selected labels e.g. ({0} items selected), defaults \"ellipsis\" keyword to indicate a text-overflow.\n     * @group Props\n     */\n    @Input() selectedItemsLabel: string | undefined;\n    /**\n     * Whether to show the checkbox at header to toggle all items at once.\n     * @group Props\n     */\n    @Input({ transform: booleanAttribute }) showToggleAll: boolean = true;\n    /**\n     * Text to display when filtering does not return any results.\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     * Clears the filter value when hiding the dropdown.\n     * @group Props\n     */\n    @Input({ transform: booleanAttribute }) resetFilterOnHide: boolean = false;\n    /**\n     * Icon class of the dropdown icon.\n     * @group Props\n     */\n    @Input() dropdownIcon: string | undefined;\n    /**\n     * Icon class of the chip icon.\n     * @group Props\n     */\n    @Input() chipIcon: string | undefined;\n    /**\n     * Name of the label field of an option.\n     * @group Props\n     */\n    @Input() optionLabel: string | undefined;\n    /**\n     * Name of the value field of an option.\n     * @group Props\n     */\n    @Input() optionValue: string | undefined;\n    /**\n     * Name of the disabled field of an option.\n     * @group Props\n     */\n    @Input() optionDisabled: string | undefined;\n    /**\n     * Name of the label field of an option group.\n     * @group Props\n     */\n    @Input() optionGroupLabel: string | undefined = '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 show the header.\n     * @group Props\n     */\n    @Input({ transform: booleanAttribute }) showHeader: boolean = true;\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     * 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     * 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     * Whether the multiselect is in loading state.\n     * @group Props\n     */\n    @Input({ transform: booleanAttribute }) loading: boolean | undefined = false;\n    /**\n     * Height of an item in the list for VirtualScrolling.\n     * @group Props\n     */\n    @Input({ transform: numberAttribute }) virtualScrollItemSize: number | undefined;\n    /**\n     * Icon to display in loading state.\n     * @group Props\n     */\n    @Input() loadingIcon: string | 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     * 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     * Advisory information to display in a tooltip on hover.\n     * @group Props\n     */\n    @Input() tooltip: string = '';\n    /**\n     * Position of the tooltip.\n     * @group Props\n     */\n    @Input() tooltipPosition: 'top' | 'left' | 'right' | 'bottom' = 'right';\n    /**\n     * Type of CSS position.\n     * @group Props\n     */\n    @Input() tooltipPositionStyle: string = 'absolute';\n    /**\n     * Style class of the tooltip.\n     * @group Props\n     */\n    @Input() tooltipStyleClass: string | undefined;\n    /**\n     * Applies focus to the filter element when the overlay is shown.\n     * @group Props\n     */\n    @Input({ transform: booleanAttribute }) autofocusFilter: boolean = false;\n    /**\n     * Defines how the selected items are displayed.\n     * @group Props\n     */\n    @Input() display: string | 'comma' | 'chip' = 'comma';\n    /**\n     * Defines the autocomplete is active.\n     * @group Props\n     */\n    @Input() autocomplete: string = 'off';\n    /**\n     * When enabled, a clear icon is displayed to clear the value.\n     * @group Props\n     */\n    @Input({ transform: booleanAttribute }) showClear: boolean = false;\n    /**\n     * 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     * Label to display when there are no selections.\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     * An array of objects to display as the available options.\n     * @group Props\n     */\n    @Input() get options(): any[] | undefined {\n        return this._options();\n    }\n    set options(val: any[] | undefined) {\n        if (!deepEquals(this._options(), val)) {\n            this._options.set(val);\n        }\n    }\n    /**\n     * When specified, filter displays with this value.\n     * @group Props\n     */\n    @Input() get filterValue(): string | undefined | null {\n        return this._filterValue();\n    }\n    set filterValue(val: string | undefined | null) {\n        this._filterValue.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     * Indicates whether to focus on options when hovering over them, defaults to optionLabel.\n     * @group Props\n     */\n    @Input({ transform: booleanAttribute }) focusOnHover: boolean = true;\n    /**\n     * Fields used when filtering the options, defaults to optionLabel.\n     * @group Props\n     */\n    @Input() filterFields: any[] | undefined;\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 = false;\n    /**\n     * Whether the selected option will be add highlight class.\n     * @group Props\n     */\n    @Input({ transform: booleanAttribute }) highlightOnSelect: boolean = true;\n    /**\n     * Specifies the size of the component.\n     * @defaultValue undefined\n     * @group Props\n     */\n    size = input<'large' | 'small' | undefined>();\n    /**\n     * Specifies the input variant of the component.\n     * @defaultValue undefined\n     * @group Props\n     */\n    variant = input<'filled' | 'outlined' | undefined>();\n    /**\n     * Spans 100% width of the container when enabled.\n     * @defaultValue undefined\n     * @group Props\n     */\n    fluid = input(undefined, { transform: booleanAttribute });\n    /**\n     * Target element to attach the overlay, valid values are \"body\" or a local ng-template variable of another element (note: use binding with brackets for template variables, e.g. [appendTo]=\"mydiv\" for a div element having #mydiv as variable name).\n     * @defaultValue 'self'\n     * @group Props\n     */\n    appendTo = input<HTMLElement | ElementRef | TemplateRef<any> | 'self' | 'body' | null | undefined | any>(undefined);\n    /**\n     * Callback to invoke when value changes.\n     * @param {MultiSelectChangeEvent} event - Custom change event.\n     * @group Emits\n     */\n    @Output() onChange: EventEmitter<MultiSelectChangeEvent> = new EventEmitter<MultiSelectChangeEvent>();\n    /**\n     * Callback to invoke when data is filtered.\n     * @param {MultiSelectFilterEvent} event - Custom filter event.\n     * @group Emits\n     */\n    @Output() onFilter: EventEmitter<MultiSelectFilterEvent> = new EventEmitter<MultiSelectFilterEvent>();\n    /**\n     * Callback to invoke when multiselect receives focus.\n     * @param {MultiSelectFocusEvent} event - Custom focus event.\n     * @group Emits\n     */\n    @Output() onFocus: EventEmitter<MultiSelectFocusEvent> = new EventEmitter<MultiSelectFocusEvent>();\n    /**\n     * Callback to invoke when multiselect loses focus.\n     * @param {MultiSelectBlurEvent} event - Custom blur event.\n     * @group Emits\n     */\n    @Output() onBlur: EventEmitter<MultiSelectBlurEvent> = new EventEmitter<MultiSelectBlurEvent>();\n    /**\n     * Callback to invoke when component is clicked.\n     * @param {Event} event - Browser event.\n     * @group Emits\n     */\n    @Output() onClick: EventEmitter<Event> = new EventEmitter<Event>();\n    /**\n     * Callback to invoke when input field is cleared.\n     * @group Emits\n     */\n    @Output() onClear: EventEmitter<void> = new EventEmitter<void>();\n    /**\n     * Callback to invoke when overlay panel becomes visible.\n     * @param {AnimationEvent} event - Animation event.\n     * @group Emits\n     */\n    @Output() onPanelShow: EventEmitter<AnimationEvent> = new EventEmitter<AnimationEvent>();\n    /**\n     * Callback to invoke when overlay panel becomes hidden.\n     * @param {AnimationEvent} event - Animation event.\n     * @group Emits\n     */\n    @Output() onPanelHide: EventEmitter<AnimationEvent> = new EventEmitter<AnimationEvent>();\n    /**\n     * Callback to invoke in lazy mode to load new data.\n     * @param {MultiSelectLazyLoadEvent} event - Lazy load event.\n     * @group Emits\n     */\n    @Output() onLazyLoad: EventEmitter<MultiSelectLazyLoadEvent> = new EventEmitter<MultiSelectLazyLoadEvent>();\n    /**\n     * Callback to invoke in lazy mode to load new data.\n     * @param {MultiSelectRemoveEvent} event - Remove event.\n     * @group Emits\n     */\n    @Output() onRemove: EventEmitter<MultiSelectRemoveEvent> = new EventEmitter<MultiSelectRemoveEvent>();\n    /**\n     * Callback to invoke when all data is selected.\n     * @param {MultiSelectSelectAllChangeEvent} event - Custom select event.\n     * @group Emits\n     */\n    @Output() onSelectAllChange: EventEmitter<MultiSelectSelectAllChangeEvent> = new EventEmitter<MultiSelectSelectAllChangeEvent>();\n\n    @ViewChild('overlay') overlayViewChild: Nullable<Overlay>;\n\n    @ViewChild('filterInput') filterInputChild: Nullable<ElementRef>;\n\n    @ViewChild('focusInput') focusInputViewChild: Nullable<ElementRef>;\n\n    @ViewChild('items') itemsViewChild: Nullable<ElementRef>;\n\n    @ViewChild('scroller') scroller: Nullable<Scroller>;\n\n    @ViewChild('lastHiddenFocusableEl') lastHiddenFocusableElementOnOverlay: Nullable<ElementRef>;\n\n    @ViewChild('firstHiddenFocusableEl') firstHiddenFocusableElementOnOverlay: Nullable<ElementRef>;\n\n    @ViewChild('headerCheckbox') headerCheckboxViewChild: Nullable<Checkbox>;\n\n    @ContentChild(Footer) footerFacet: any;\n\n    @ContentChild(Header) headerFacet: any;\n\n    _componentStyle = inject(MultiSelectStyle);\n\n    searchValue: Nullable<string>;\n\n    searchTimeout: any;\n\n    _selectAll: boolean | undefined | null = null;\n\n    _placeholder = signal<string | undefined>(undefined);\n\n    _disableTooltip = false;\n\n    value: any[];\n\n    public _filteredOptions: any[] | undefined | null;\n\n    public focus: boolean | undefined;\n\n    public filtered: boolean | undefined;\n\n    @ContentChild('item', { descendants: false }) itemTemplate: TemplateRef<any> | undefined;\n\n    @ContentChild('group', { descendants: false }) groupTemplate: TemplateRef<any> | undefined;\n\n    @ContentChild('loader', { descendants: false }) loaderTemplate: TemplateRef<any> | undefined;\n\n    @ContentChild('header', { descendants: false }) headerTemplate: TemplateRef<any> | undefined;\n\n    @ContentChild('filter', { descendants: false }) filterTemplate: TemplateRef<any> | undefined;\n\n    @ContentChild('footer', { descendants: false }) footerTemplate: TemplateRef<any> | undefined;\n\n    @ContentChild('emptyfilter', { descendants: false }) emptyFilterTemplate: TemplateRef<any> | undefined;\n\n    @ContentChild('empty', { descendants: false }) emptyTemplate: TemplateRef<any> | undefined;\n\n    @ContentChild('selecteditems', { descendants: false }) selectedItemsTemplate: TemplateRef<any> | undefined;\n\n    @ContentChild('loadingicon', { descendants: false }) loadingIconTemplate: TemplateRef<any> | undefined;\n\n    @ContentChild('filtericon', { descendants: false }) filterIconTemplate: TemplateRef<any> | undefined;\n\n    @ContentChild('removetokenicon', { descendants: false }) removeTokenIconTemplate: TemplateRef<any> | undefined;\n\n    @ContentChild('chipicon', { descendants: false }) chipIconTemplate: TemplateRef<any> | undefined;\n\n    @ContentChild('clearicon', { descendants: false }) clearIconTemplate: TemplateRef<any> | undefined;\n\n    @ContentChild('dropdownicon', { descendants: false }) dropdownIconTemplate: TemplateRef<any> | undefined;\n\n    @ContentChild('itemcheckboxicon', { descendants: false }) itemCheckboxIconTemplate: TemplateRef<any> | undefined;\n\n    @ContentChild('headercheckboxicon', { descendants: false }) headerCheckboxIconTemplate: TemplateRef<any> | undefined;\n\n    @ContentChildren(PrimeTemplate) templates: Nullable<QueryList<PrimeTemplate>>;\n\n    _itemTemplate: TemplateRef<any> | undefined;\n\n    _groupTemplate: TemplateRef<any> | undefined;\n\n    _loaderTemplate: TemplateRef<any> | undefined;\n\n    _headerTemplate: TemplateRef<any> | undefined;\n\n    _filterTemplate: TemplateRef<any> | undefined;\n\n    _footerTemplate: TemplateRef<any> | undefined;\n\n    _emptyFilterTemplate: TemplateRef<any> | undefined;\n\n    _emptyTemplate: TemplateRef<any> | undefined;\n\n    _selectedItemsTemplate: TemplateRef<any> | undefined;\n\n    _loadingIconTemplate: TemplateRef<any> | undefined;\n\n    _filterIconTemplate: TemplateRef<any> | undefined;\n\n    _removeTokenIconTemplate: TemplateRef<any> | undefined;\n\n    _chipIconTemplate: TemplateRef<any> | undefined;\n\n    _clearIconTemplate: TemplateRef<any> | undefined;\n\n    _dropdownIconTemplate: TemplateRef<any> | undefined;\n\n    _itemCheckboxIconTemplate: TemplateRef<any> | undefined;\n\n    _headerCheckboxIconTemplate: TemplateRef<any> | undefined;\n\n    $variant = computed(() => this.variant() || this.config.inputStyle() || this.config.inputVariant());\n\n    $appendTo = computed(() => this.appendTo() || this.config.overlayAppend