primeng/fesm2022/primeng-multiselect.mjs.map

[](https://badge.fury.io/js/primeng) [](https://www.npmjs.com/package/primeng) [![Actions CI](https://github.com/primefaces/primeng/workflows/No

{"version":3,"file":"primeng-multiselect.mjs","sources":["../../src/app/components/multiselect/multiselect.ts","../../src/app/components/multiselect/primeng-multiselect.ts"],"sourcesContent":["import { AnimationEvent } from '@angular/animations';\nimport { CommonModule } from '@angular/common';\nimport {\n    AfterContentInit,\n    AfterViewChecked,\n    AfterViewInit,\n    ChangeDetectionStrategy,\n    ChangeDetectorRef,\n    Component,\n    ContentChild,\n    ContentChildren,\n    ElementRef,\n    EventEmitter,\n    forwardRef,\n    Input,\n    NgModule,\n    NgZone,\n    OnInit,\n    Output,\n    QueryList,\n    Renderer2,\n    TemplateRef,\n    ViewChild,\n    ViewEncapsulation\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { FilterService, Footer, Header, OverlayOptions, OverlayService, PrimeNGConfig, PrimeTemplate, SharedModule, TranslationKeys } from 'primeng/api';\nimport { DomHandler } from 'primeng/dom';\nimport { Overlay, OverlayModule } from 'primeng/overlay';\nimport { RippleModule } from 'primeng/ripple';\nimport { Scroller, ScrollerModule } from 'primeng/scroller';\nimport { ScrollerOptions } from 'primeng/api';\nimport { TooltipModule } from 'primeng/tooltip';\nimport { ObjectUtils } from 'primeng/utils';\nimport { CheckIcon } from 'primeng/icons/check';\nimport { SearchIcon } from 'primeng/icons/search';\nimport { TimesCircleIcon } from 'primeng/icons/timescircle';\nimport { TimesIcon } from 'primeng/icons/times';\nimport { ChevronDownIcon } from 'primeng/icons/chevrondown';\nimport { Nullable } from 'primeng/ts-helpers';\nimport { MultiSelectRemoveEvent, MultiSelectFilterOptions, MultiSelectFilterEvent, MultiSelectBlurEvent, MultiSelectChangeEvent, MultiSelectFocusEvent, MultiSelectLazyLoadEvent } from './multiselect.interface';\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',\n    template: `\n        <li\n            class=\"p-multiselect-item\"\n            (click)=\"onOptionClick($event)\"\n            (keydown)=\"onOptionKeydown($event)\"\n            [attr.aria-label]=\"label\"\n            [attr.tabindex]=\"disabled ? null : '0'\"\n            [ngStyle]=\"{ height: itemSize + 'px' }\"\n            [ngClass]=\"{ 'p-highlight': selected, 'p-disabled': disabled }\"\n            pRipple\n        >\n            <div class=\"p-checkbox p-component\">\n                <div class=\"p-checkbox-box\" [ngClass]=\"{ 'p-highlight': selected }\">\n                    <ng-container *ngIf=\"selected\">\n                        <CheckIcon *ngIf=\"!checkIconTemplate\" [styleClass]=\"'p-checkbox-icon'\" />\n                        <span *ngIf=\"checkIconTemplate\" class=\"p-checkbox-icon\">\n                            <ng-template *ngTemplateOutlet=\"checkIconTemplate\"></ng-template>\n                        </span>\n                    </ng-container>\n                </div>\n            </div>\n            <span *ngIf=\"!template\">{{ label }}</span>\n            <ng-container *ngTemplateOutlet=\"template; context: { $implicit: option }\"></ng-container>\n        </li>\n    `,\n    encapsulation: ViewEncapsulation.None,\n    host: {\n        class: 'p-element'\n    }\n})\nexport class MultiSelectItem {\n    @Input() option: any;\n\n    @Input() selected: boolean | undefined;\n\n    @Input() label: string | undefined;\n\n    @Input() disabled: boolean | undefined;\n\n    @Input() itemSize: number | undefined;\n\n    @Input() template: TemplateRef<any> | undefined;\n\n    @Input() checkIconTemplate: TemplateRef<any> | undefined;\n\n    @Output() onClick: EventEmitter<any> = new EventEmitter();\n\n    @Output() onKeydown: EventEmitter<any> = new EventEmitter();\n\n    onOptionClick(event: Event) {\n        this.onClick.emit({\n            originalEvent: event,\n            option: this.option,\n            selected: this.selected\n        });\n    }\n\n    onOptionKeydown(event: Event) {\n        this.onKeydown.emit({\n            originalEvent: event,\n            option: this.option\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',\n    template: `\n        <div\n            #container\n            [ngClass]=\"{ 'p-multiselect p-component': true, 'p-multiselect-open': overlayVisible, 'p-multiselect-chip': display === 'chip', 'p-focus': focus, 'p-disabled': disabled }\"\n            [ngStyle]=\"style\"\n            [class]=\"styleClass\"\n            (click)=\"onMouseclick($event, in)\"\n        >\n            <div class=\"p-hidden-accessible\">\n                <input\n                    #in\n                    type=\"text\"\n                    [attr.label]=\"label\"\n                    readonly=\"readonly\"\n                    [attr.id]=\"inputId\"\n                    [attr.name]=\"name\"\n                    (focus)=\"onInputFocus($event)\"\n                    (blur)=\"onInputBlur($event)\"\n                    [disabled]=\"disabled\"\n                    [attr.tabindex]=\"tabindex\"\n                    (keydown)=\"onKeydown($event)\"\n                    aria-haspopup=\"listbox\"\n                    [attr.aria-expanded]=\"overlayVisible\"\n                    [attr.aria-labelledby]=\"ariaLabelledBy\"\n                    role=\"listbox\"\n                />\n            </div>\n            <div class=\"p-multiselect-label-container\" [pTooltip]=\"tooltip\" [tooltipPosition]=\"tooltipPosition\" [positionStyle]=\"tooltipPositionStyle\" [tooltipStyleClass]=\"tooltipStyleClass\">\n                <div\n                    class=\"p-multiselect-label\"\n                    [ngClass]=\"{ 'p-placeholder': valuesAsString === (defaultLabel || placeholder), 'p-multiselect-label-empty': (valuesAsString == null || valuesAsString.length === 0) && (placeholder == null || placeholder.length === 0) }\"\n                >\n                    <ng-container *ngIf=\"!selectedItemsTemplate\">\n                        <ng-container *ngIf=\"display === 'comma'\">{{ valuesAsString || 'empty' }}</ng-container>\n                        <ng-container *ngIf=\"display === 'chip'\">\n                            <div #token *ngFor=\"let item of value; let i = index\" class=\"p-multiselect-token\">\n                                <span class=\"p-multiselect-token-label\">{{ findLabelByValue(item) }}</span>\n                                <ng-container *ngIf=\"!disabled\">\n                                    <TimesCircleIcon *ngIf=\"!removeTokenIconTemplate\" [styleClass]=\"'p-multiselect-token-icon'\" (click)=\"removeChip(item, event)\" />\n                                    <span *ngIf=\"removeTokenIconTemplate\" class=\"p-multiselect-token-icon\" (click)=\"removeChip(item, event)\">\n                                        <ng-container *ngTemplateOutlet=\"removeTokenIconTemplate\"></ng-container>\n                                    </span>\n                                </ng-container>\n                            </div>\n                            <ng-container *ngIf=\"!value || value.length === 0\">{{ placeholder || defaultLabel || 'empty' }}</ng-container>\n                        </ng-container>\n                    </ng-container>\n                    <ng-container *ngTemplateOutlet=\"selectedItemsTemplate; context: { $implicit: value, removeChip: removeChip.bind(this) }\"></ng-container>\n                </div>\n                <ng-container *ngIf=\"value != null && filled && !disabled && showClear\">\n                    <TimesIcon *ngIf=\"!clearIconTemplate\" [styleClass]=\"'p-multiselect-clear-icon'\" (click)=\"clear($event)\" />\n                    <span *ngIf=\"clearIconTemplate\" class=\"p-multiselect-clear-icon\" (click)=\"clear($event)\">\n                        <ng-template *ngTemplateOutlet=\"clearIconTemplate\"></ng-template>\n                    </span>\n                </ng-container>\n            </div>\n            <div [ngClass]=\"{ 'p-multiselect-trigger': true }\">\n                <ng-container *ngIf=\"!dropdownIconTemplate\">\n                    <span *ngIf=\"dropdownIcon\" class=\"p-multiselect-trigger-icon\" [ngClass]=\"dropdownIcon\"></span>\n                    <ChevronDownIcon *ngIf=\"!dropdownIcon\" [styleClass]=\"'p-multiselect-trigger-icon'\" />\n                </ng-container>\n                <span *ngIf=\"dropdownIconTemplate\" class=\"p-multiselect-trigger-icon\">\n                    <ng-template *ngTemplateOutlet=\"dropdownIconTemplate\"></ng-template>\n                </span>\n            </div>\n            <p-overlay\n                #overlay\n                [(visible)]=\"overlayVisible\"\n                [options]=\"overlayOptions\"\n                [target]=\"'@parent'\"\n                [appendTo]=\"appendTo\"\n                [autoZIndex]=\"autoZIndex\"\n                [baseZIndex]=\"baseZIndex\"\n                [showTransitionOptions]=\"showTransitionOptions\"\n                [hideTransitionOptions]=\"hideTransitionOptions\"\n                (onAnimationStart)=\"onOverlayAnimationStart($event)\"\n                (onHide)=\"hide()\"\n            >\n                <ng-template pTemplate=\"content\">\n                    <div [ngClass]=\"['p-multiselect-panel p-component']\" [ngStyle]=\"panelStyle\" [class]=\"panelStyleClass\" (keydown)=\"onKeydown($event)\">\n                        <div class=\"p-multiselect-header\" *ngIf=\"showHeader\">\n                            <ng-content select=\"p-header\"></ng-content>\n                            <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\n                            <ng-container *ngIf=\"filterTemplate; else builtInFilterElement\">\n                                <ng-container *ngTemplateOutlet=\"filterTemplate; context: { options: filterOptions }\"></ng-container>\n                            </ng-container>\n                            <ng-template #builtInFilterElement>\n                                <div class=\"p-checkbox p-component\" *ngIf=\"showToggleAll && !selectionLimit\" [ngClass]=\"{ 'p-checkbox-disabled': disabled || toggleAllDisabled }\">\n                                    <div class=\"p-hidden-accessible\">\n                                        <input\n                                            type=\"checkbox\"\n                                            readonly=\"readonly\"\n                                            [checked]=\"allChecked\"\n                                            (focus)=\"onHeaderCheckboxFocus()\"\n                                            (blur)=\"onHeaderCheckboxBlur()\"\n                                            (keydown.space)=\"toggleAll($event)\"\n                                            [disabled]=\"disabled || toggleAllDisabled\"\n                                        />\n                                    </div>\n                                    <div\n                                        class=\"p-checkbox-box\"\n                                        role=\"checkbox\"\n                                        [attr.aria-checked]=\"allChecked\"\n                                        [ngClass]=\"{ 'p-highlight': allChecked, 'p-focus': headerCheckboxFocus, 'p-disabled': disabled || toggleAllDisabled }\"\n                                        (click)=\"toggleAll($event)\"\n                                    >\n                                        <ng-container *ngIf=\"allChecked\">\n                                            <CheckIcon [styleClass]=\"'p-checkbox-icon'\" *ngIf=\"!checkIconTemplate\" />\n                                            <span *ngIf=\"checkIconTemplate\" class=\"p-checkbox-icon\">\n                                                <ng-template *ngTemplateOutlet=\"checkIconTemplate\"></ng-template>\n                                            </span>\n                                        </ng-container>\n                                    </div>\n                                </div>\n                                <div class=\"p-multiselect-filter-container\" *ngIf=\"filter\">\n                                    <input\n                                        #filterInput\n                                        type=\"text\"\n                                        [attr.autocomplete]=\"autocomplete\"\n                                        role=\"textbox\"\n                                        [value]=\"filterValue || ''\"\n                                        (input)=\"onFilterInputChange($event)\"\n                                        class=\"p-multiselect-filter p-inputtext p-component\"\n                                        [disabled]=\"disabled\"\n                                        [attr.placeholder]=\"filterPlaceHolder\"\n                                        [attr.aria-label]=\"ariaFilterLabel\"\n                                    />\n                                    <SearchIcon [styleClass]=\"'p-multiselect-filter-icon'\" *ngIf=\"!filterIconTemplate\" />\n                                    <span *ngIf=\"filterIconTemplate\" class=\"p-multiselect-filter-icon\">\n                                        <ng-template *ngTemplateOutlet=\"filterIconTemplate\"></ng-template>\n                                    </span>\n                                </div>\n\n                                <button class=\"p-multiselect-close p-link p-button-icon-only\" type=\"button\" (click)=\"close($event)\" pRipple>\n                                    <TimesIcon [styleClass]=\"'p-multiselect-close-icon'\" *ngIf=\"!closeIconTemplate\" />\n                                    <span *ngIf=\"closeIconTemplate\" class=\"p-multiselect-close-icon\">\n                                        <ng-template *ngTemplateOutlet=\"closeIconTemplate\"></ng-template>\n                                    </span>\n                                </button>\n                            </ng-template>\n                        </div>\n                        <div class=\"p-multiselect-items-wrapper\" [style.max-height]=\"virtualScroll ? 'auto' : scrollHeight || 'auto'\">\n                            <p-scroller\n                                *ngIf=\"virtualScroll\"\n                                #scroller\n                                [items]=\"optionsToRender\"\n                                [style]=\"{ height: scrollHeight }\"\n                                [itemSize]=\"virtualScrollItemSize || _itemSize\"\n                                [autoSize]=\"true\"\n                                [tabindex]=\"-1\"\n                                [lazy]=\"lazy\"\n                                (onLazyLoad)=\"onLazyLoad.emit($event)\"\n                                [options]=\"virtualScrollOptions\"\n                            >\n                                <ng-template pTemplate=\"content\" let-items let-scrollerOptions=\"options\">\n                                    <ng-container *ngTemplateOutlet=\"buildInItems; context: { $implicit: items, options: scrollerOptions }\"></ng-container>\n                                </ng-template>\n                                <ng-container *ngIf=\"loaderTemplate\">\n                                    <ng-template pTemplate=\"loader\" let-scrollerOptions=\"options\">\n                                        <ng-container *ngTemplateOutlet=\"loaderTemplate; context: { options: scrollerOptions }\"></ng-container>\n                                    </ng-template>\n                                </ng-container>\n                            </p-scroller>\n                            <ng-container *ngIf=\"!virtualScroll\">\n                                <ng-container *ngTemplateOutlet=\"buildInItems; context: { $implicit: optionsToRender, options: {} }\"></ng-container>\n                            </ng-container>\n\n                            <ng-template #buildInItems let-items let-scrollerOptions=\"options\">\n                                <ul #items class=\"p-multiselect-items p-component\" [ngClass]=\"scrollerOptions.contentStyleClass\" [style]=\"scrollerOptions.contentStyle\" role=\"listbox\" aria-multiselectable=\"true\">\n                                    <ng-container *ngIf=\"group\">\n                                        <ng-template ngFor let-optgroup [ngForOf]=\"items\">\n                                            <li class=\"p-multiselect-item-group\" [ngStyle]=\"{ height: scrollerOptions.itemSize + 'px' }\">\n                                                <span *ngIf=\"!groupTemplate\">{{ getOptionGroupLabel(optgroup) || 'empty' }}</span>\n                                                <ng-container *ngTemplateOutlet=\"groupTemplate; context: { $implicit: optgroup }\"></ng-container>\n                                            </li>\n                                            <ng-container *ngTemplateOutlet=\"itemslist; context: { $implicit: getOptionGroupChildren(optgroup) }\"></ng-container>\n                                        </ng-template>\n                                    </ng-container>\n                                    <ng-container *ngIf=\"!group\">\n                                        <ng-container *ngTemplateOutlet=\"itemslist; context: { $implicit: items }\"></ng-container>\n                                    </ng-container>\n                                    <ng-template #itemslist let-optionsToDisplay let-selectedOption=\"selectedOption\">\n                                        <ng-template ngFor let-option let-i=\"index\" [ngForOf]=\"optionsToDisplay\">\n                                            <p-multiSelectItem\n                                                [option]=\"option\"\n                                                [selected]=\"isSelected(option)\"\n                                                [label]=\"getOptionLabel(option)\"\n                                                [disabled]=\"isOptionDisabled(option)\"\n                                                (onClick)=\"onOptionClick($event)\"\n                                                (onKeydown)=\"onOptionKeydown($event)\"\n                                                [template]=\"itemTemplate\"\n                                                [checkIconTemplate]=\"checkIconTemplate\"\n                                                [itemSize]=\"scrollerOptions.itemSize\"\n                                            ></p-multiSelectItem>\n                                        </ng-template>\n                                    </ng-template>\n                                    <li *ngIf=\"hasFilter() && isEmpty()\" class=\"p-multiselect-empty-message\" [ngStyle]=\"{ height: scrollerOptions.itemSize + 'px' }\">\n                                        <ng-container *ngIf=\"!emptyFilterTemplate && !emptyTemplate; else emptyFilter\">\n                                            {{ emptyFilterMessageLabel }}\n                                        </ng-container>\n                                        <ng-container #emptyFilter *ngTemplateOutlet=\"emptyFilterTemplate || emptyTemplate\"></ng-container>\n                                    </li>\n                                    <li *ngIf=\"!hasFilter() && isEmpty()\" class=\"p-multiselect-empty-message\" [ngStyle]=\"{ height: scrollerOptions.itemSize + 'px' }\">\n                                        <ng-container *ngIf=\"!emptyTemplate; else empty\">\n                                            {{ emptyMessageLabel }}\n                                        </ng-container>\n                                        <ng-container #empty *ngTemplateOutlet=\"emptyTemplate\"></ng-container>\n                                    </li>\n                                </ul>\n                            </ng-template>\n                        </div>\n                        <div class=\"p-multiselect-footer\" *ngIf=\"footerFacet || footerTemplate\">\n                            <ng-content select=\"p-footer\"></ng-content>\n                            <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\n                        </div>\n                    </div>\n                </ng-template>\n            </p-overlay>\n        </div>\n    `,\n    host: {\n        class: 'p-element p-inputwrapper',\n        '[class.p-inputwrapper-filled]': 'filled',\n        '[class.p-inputwrapper-focus]': 'focus || overlayVisible',\n        '[class.p-multiselect-clearable]': 'showClear && !disabled'\n    },\n    providers: [MULTISELECT_VALUE_ACCESSOR],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n    styleUrls: ['./multiselect.css']\n})\nexport class MultiSelect implements OnInit, AfterViewInit, AfterContentInit, AfterViewChecked, ControlValueAccessor {\n    /**\n     * Inline style of the element.\n     * @group Props\n     */\n    @Input() style: { [klass: string]: any } | null | undefined;\n    /**\n     * Style class of the element.\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 element should be disabled.\n     * @group Props\n     */\n    @Input() disabled: boolean | undefined;\n    /**\n     * When present, it specifies that the component cannot be edited.\n     * @group Props\n     */\n    @Input() readonly: boolean | undefined;\n    /**\n     * Whether to display options as grouped when nested options are provided.\n     * @group Props\n     */\n    @Input() group: boolean | undefined;\n    /**\n     * When specified, displays an input field to filter the items on keyup.\n     * @group Props\n     */\n    @Input() 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() overlayVisible: boolean | undefined;\n    /**\n     * Index of the element in tabbing order.\n     * @group Props\n     */\n    @Input() tabindex: number | 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     * A property to uniquely identify a value in options.\n     * @group Props\n     */\n    @Input() dataKey: string | undefined;\n    /**\n     * Name of the input element.\n     * @group Props\n     */\n    @Input() name: string | undefined;\n    /**\n     * Label of the input for accessibility.\n     * @group Props\n     */\n    @Input() label: 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     */\n    @Input() displaySelectedLabel: boolean = true;\n    /**\n     * Decides how many selected item labels to show at most.\n     * @group Props\n     */\n    @Input() maxSelectedLabels: number = 3;\n    /**\n     * Number of maximum options that can be selected.\n     * @group Props\n     */\n    @Input() 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 = 'ellipsis';\n    /**\n     * Whether to show the checkbox at header to toggle all items at once.\n     * @group Props\n     */\n    @Input() 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() resetFilterOnHide: boolean = false;\n    /**\n     * Icon class of the dropdown icon.\n     * @group Props\n     */\n    @Input() dropdownIcon: string | undefined;\n    /**\n     * Name of the label field of an option.\n     * @group Props\n     */\n    @Input() optionLabel: string | undefined;\n    /**\n     * Name of the value field of an option.\n     * @group Props\n     */\n    @Input() optionValue: string | undefined;\n    /**\n     * Name of the disabled field of an option.\n     * @group Props\n     */\n    @Input() optionDisabled: string | undefined;\n    /**\n     * Name of the label field of an option group.\n     * @group Props\n     */\n    @Input() optionGroupLabel: string | undefined;\n    /**\n     * Name of the options field of an option group.\n     * @group Props\n     */\n    @Input() optionGroupChildren: string = 'items';\n    /**\n     * Whether to show the header.\n     * @group Props\n     */\n    @Input() 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() lazy: boolean = false;\n    /**\n     * Whether the data should be loaded on demand during scroll.\n     * @group Props\n     */\n    @Input() virtualScroll: boolean | undefined;\n    /**\n     * Height of an item in the list for VirtualScrolling.\n     * @group Props\n     */\n    @Input() virtualScrollItemSize: number | undefined;\n    /**\n     * Whether to use the scroller feature. The properties of scroller component can be used like an object in it.\n     * @group Props\n     */\n    @Input() virtualScrollOptions: ScrollerOptions | undefined;\n    /**\n     * Whether to use overlay API feature. The properties of overlay API can be used like an object in it.\n     * @group Props\n     */\n    @Input() overlayOptions: OverlayOptions | undefined;\n    /**\n     * Defines a string that labels the filter input.\n     * @group Props\n     */\n    @Input() ariaFilterLabel: string | undefined;\n    /**\n     * 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() autofocusFilter: boolean = true;\n    /**\n     * No description available.\n     * @group Props\n     */\n    @Input() display: string = 'comma';\n    /**\n     * No description available.\n     * @group Props\n     */\n    @Input() autocomplete: string = 'on';\n    /**\n     * When enabled, a clear icon is displayed to clear the value.\n     * @group Props\n     */\n    @Input() showClear: boolean = false;\n    /**\n     * @deprecated since v14.2.0, use overlayOptions property instead.\n     * Whether to automatically manage layering.\n     * @group Props\n     */\n    @Input() get autoZIndex(): boolean | undefined {\n        return this._autoZIndex;\n    }\n    set autoZIndex(val: boolean | undefined) {\n        this._autoZIndex = val;\n        console.warn('The autoZIndex property is deprecated since v14.2.0, use overlayOptions property instead.');\n    }\n    /**\n     * @deprecated since v14.2.0, use overlayOptions property instead.\n     * Base zIndex value to use in layering.\n     * @group Props\n     */\n    @Input() get baseZIndex(): number | undefined {\n        return this._baseZIndex;\n    }\n    set baseZIndex(val: number | undefined) {\n        this._baseZIndex = val;\n        console.warn('The baseZIndex property is deprecated since v14.2.0, use overlayOptions property instead.');\n    }\n    /**\n     * Transition options of the show animation.\n     * @group Props\n     * @deprecated since v14.2.0, use overlayOptions property instead.\n     */\n    @Input() get showTransitionOptions(): string | undefined {\n        return this._showTransitionOptions;\n    }\n    set showTransitionOptions(val: string | undefined) {\n        this._showTransitionOptions = val;\n        console.warn('The showTransitionOptions property is deprecated since v14.2.0, use overlayOptions property instead.');\n    }\n    /**\n     * Transition options of the hide animation.\n     * @group Props\n     * @deprecated since v14.2.0, use overlayOptions property instead.\n     */\n    @Input() get hideTransitionOptions(): string | undefined {\n        return this._hideTransitionOptions;\n    }\n    set hideTransitionOptions(val: string | undefined) {\n        this._hideTransitionOptions = val;\n        console.warn('The hideTransitionOptions property is deprecated since v14.2.0, use overlayOptions property instead.');\n    }\n    /**\n     * Label to display when there are no selections.\n     * @group Props\n     * @deprecated Use placeholder instead.\n     */\n    @Input() set defaultLabel(val: string | undefined) {\n        this._defaultLabel = val;\n        this.updateLabel();\n    }\n    get defaultLabel(): string | undefined {\n        return this._defaultLabel;\n    }\n    /**\n     * Label to display when there are no selections.\n     * @group Props\n     */\n    @Input() set placeholder(val: string | undefined) {\n        this._placeholder = val;\n        this.updateLabel();\n    }\n    get placeholder(): string | undefined {\n        return this._placeholder;\n    }\n    /**\n     * An array of objects to display as the available options.\n     * @group Props\n     */\n    @Input() get options(): any[] | undefined {\n        return this._options;\n    }\n    set options(val: any[] | undefined) {\n        this._options = val;\n        this.updateLabel();\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 = val;\n        this.activateFilter();\n    }\n    /**\n     * Item size of item to be virtual scrolled.\n     * @group Props\n     * @deprecated use virtualScrollItemSize property instead.\n     */\n    @Input() get itemSize(): number | undefined {\n        return this._itemSize;\n    }\n    set itemSize(val: number | undefined) {\n        this._itemSize = val;\n        console.warn('The itemSize property is deprecated, use virtualScrollItemSize property instead.');\n    }\n\n    @ViewChild('container') containerViewChild: Nullable<ElementRef>;\n\n    @ViewChild('overlay') overlayViewChild: Nullable<Overlay>;\n\n    @ViewChild('filterInput') filterInputChild: Nullable<ElementRef>;\n\n    @ViewChild('in') accessibleViewChild: Nullable<ElementRef>;\n\n    @ViewChild('items') itemsViewChild: Nullable<ElementRef>;\n\n    @ViewChild('scroller') scroller: Nullable<Scroller>;\n\n    @ContentChild(Footer) footerFacet: any;\n\n    @ContentChild(Header) headerFacet: any;\n\n    @ContentChildren(PrimeTemplate) templates: Nullable<QueryList<PrimeTemplate>>;\n\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     * @group Emits\n     */\n    @Output() onPanelShow: EventEmitter<void> = new EventEmitter<void>();\n    /**\n     * Callback to invoke when overlay panel becomes hidden.\n     * @group Emits\n     */\n    @Output() onPanelHide: EventEmitter<void> = new EventEmitter<void>();\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    _autoZIndex: boolean | undefined;\n\n    _baseZIndex: number | undefined;\n\n    _showTransitionOptions: string | undefined;\n\n    _hideTransitionOptions: string | undefined;\n\n    _defaultLabel: string | undefined;\n\n    _placeholder: string | undefined;\n\n    _itemSize: number | undefined;\n\n    public value: any[] | undefined | null;\n\n    public _filteredOptions: any[] | undefined | null;\n\n    public onModelChange: Function = () => {};\n\n    public onModelTouched: Function = () => {};\n\n    public valuesAsString: string | undefined;\n\n    public focus: boolean | undefined;\n\n    filled: boolean | undefined | null;\n\n    public _filterValue: string | undefined | null;\n\n    public filtered: boolean | undefined;\n\n    public itemTemplate: TemplateRef<any> | undefined;\n\n    public groupTemplate: TemplateRef<any> | undefined;\n\n    public loaderTemplate: TemplateRef<any> | undefined;\n\n    public headerTemplate: TemplateRef<any> | undefined;\n\n    public filterTemplate: TemplateRef<any> | undefined;\n\n    public footerTemplate: TemplateRef<any> | undefined;\n\n    public emptyFilterTemplate: TemplateRef<any> | undefined;\n\n    public emptyTemplate: TemplateRef<any> | undefined;\n\n    public selectedItemsTemplate: TemplateRef<any> | undefined;\n\n    checkIconTemplate: TemplateRef<any> | undefined;\n\n    filterIconTemplate: TemplateRef<any> | undefined;\n\n    removeTokenIconTemplate: TemplateRef<any> | undefined;\n\n    closeIconTemplate: TemplateRef<any> | undefined;\n\n    clearIconTemplate: TemplateRef<any> | undefined;\n\n    dropdownIconTemplate: TemplateRef<any> | undefined;\n\n    public headerCheckboxFocus: boolean | undefined;\n\n    filterOptions: MultiSelectFilterOptions | undefined;\n\n    _options: any[] | undefined;\n\n    maxSelectionLimitReached: boolean | undefined;\n\n    preventModelTouched: boolean | undefined;\n\n    preventDocumentDefault: boolean | undefined;\n\n    constructor(public el: ElementRef, public renderer: Renderer2, public cd: ChangeDetectorRef, public zone: NgZone, public filterService: FilterService, public config: PrimeNGConfig, public overlayService: OverlayService) {}\n\n    ngOnInit() {\n        this.updateLabel();\n\n        if (this.filterBy) {\n            this.filterOptions = {\n                filter: (value) => this.onFilterInputChange(value),\n                reset: () => this.resetFilter()\n            };\n        }\n    }\n\n    ngAfterContentInit() {\n        (this.templates as QueryList<PrimeTemplate>).forEach((item) => {\n            switch (item.getType()) {\n                case 'item':\n                    this.itemTemplate = item.template;\n                    break;\n\n                case 'group':\n                    this.groupTemplate = item.template;\n                    break;\n\n                case 'selectedItems':\n                    this.selectedItemsTemplate = item.template;\n                    break;\n\n                case 'header':\n                    this.headerTemplate = item.template;\n                    break;\n\n                case 'filter':\n                    this.filterTemplate = item.template;\n                    break;\n\n                case 'emptyfilter':\n                    this.emptyFilterTemplate = item.template;\n                    break;\n\n                case 'empty':\n                    this.emptyTemplate = item.template;\n                    break;\n\n                case 'footer':\n                    this.footerTemplate = item.template;\n                    break;\n\n                case 'loader':\n                    this.loaderTemplate = item.template;\n                    break;\n\n                case 'checkicon':\n                    this.checkIconTemplate = item.template;\n                    break;\n\n                case 'filtericon':\n                    this.filterIconTemplate = item.template;\n                    break;\n\n                case 'removetokenicon':\n                    this.removeTokenIconTemplate = item.template;\n                    break;\n\n                case 'closeicon':\n                    this.closeIconTemplate = item.template;\n                    break;\n\n                case 'clearicon':\n                    this.clearIconTemplate = item.template;\n                    break;\n\n                case 'dropdownicon':\n                    this.dropdownIconTemplate = item.template;\n                    break;\n\n                default:\n                    this.itemTemplate = item.template;\n                    break;\n            }\n        });\n    }\n\n    ngAfterViewInit() {\n        if (this.overlayVisible) {\n            this.show();\n        }\n    }\n\n    ngAfterViewChecked() {\n        if (this.filtered) {\n            this.zone.runOutsideAngular(() => {\n                setTimeout(() => {\n                    this.overlayViewChild?.alignOverlay();\n                }, 1);\n            });\n\n            this.filtered = false;\n        }\n    }\n\n    getOptionLabel(option: any) {\n        return this.optionLabel ? ObjectUtils.resolveFieldData(option, this.optionLabel) : option && option.label != undefined ? option.label : option;\n    }\n\n    getOptionValue(option: any) {\n        return this.optionValue ? ObjectUtils.resolveFieldData(option, this.optionValue) : !this.optionLabel && option && option.value !== undefined ? option.value : option;\n    }\n\n    getOptionGroupLabel(optionGroup: any) {\n        return this.optionGroupLabel ? ObjectUtils.resolveFieldData(optionGroup, this.optionGroupLabel) : optionGroup && optionGroup.label != undefined ? optionGroup.label : optionGroup;\n    }\n\n    getOptionGroupChildren(optionGroup: any) {\n        return this.optionGroupChildren ? ObjectUtils.resolveFieldData(optionGroup, this.optionGroupChildren) : optionGroup.items;\n    }\n\n    isOptionDisabled(option: any) {\n        let disabled = this.optionDisabled ? ObjectUtils.resolveFieldData(option, this.optionDisabled) : option && option.disabled !== undefined ? option.disabled : false;\n        return disabled || (this.maxSelectionLimitReached && !this.isSelected(option));\n    }\n\n    writeValue(value: any): void {\n        this.value = value;\n        this.updateLabel();\n        this.updateFilledState();\n        this.checkSelectionLimit();\n\n        this.cd.markForCheck();\n    }\n\n    checkSelectionLimit() {\n        if (this.selectionLimit && this.value && this.value.length === this.selectionLimit) {\n            this.maxSelectionLimitReached = true;\n        } else {\n            this.maxSelectionLimitReached = false;\n        }\n    }\n\n    updateFilledState() {\n        this.filled = this.value && this.value.length > 0;\n    }\n\n    registerOnChange(fn: Function): void {\n        this.onModelChange = fn;\n    }\n\n    registerOnTouched(fn: Function): void {\n        this.onModelTouched = fn;\n    }\n\n    setDisabledState(val: boolean): void {\n        this.disabled = val;\n        this.cd.markForCheck();\n    }\n\n    onOptionClick(event: { originalEvent: Event; option: any }) {\n        let option = event.option;\n        if (this.isOptionDisabled(option)) {\n            return;\n        }\n\n        let optionValue = this.getOptionValue(option);\n        let selectionIndex = this.findSelectionIndex(optionValue);\n        if (selectionIndex != -1) {\n            this.value = (this.value as any[]).filter((val, i) => i != selectionIndex);\n            this.onRemove.emit({ newValue: this.value, removed: optionValue });\n\n            if (this.selectionLimit) {\n                this.maxSelectionLimitReached = false;\n            }\n        } else {\n            if (!this.selectionLimit || !this.value || this.value.length < this.selectionLimit) {\n                this.value = [...(this.value || []), optionValue];\n            }\n\n            this.checkSelectionLimit();\n        }\n\n        this.onModelChange(this.value);\n        this.onChange.emit({ originalEvent: event.originalEvent, value: this.value, itemValue: optionValue });\n        this.updateLabel();\n        this.updateFilledState();\n    }\n\n    isSelected(option: any) {\n        return this.findSelectionIndex(this.getOptionValue(option)) != -1;\n    }\n\n    findSelectionIndex(val: any): number {\n        let index = -1;\n\n        if (this.value) {\n            for (let i = 0; i < this.value.length; i++) {\n                if (ObjectUtils.equals(this.value[i], val, this.dataKey)) {\n                    index = i;\n                    break;\n                }\n            }\n        }\n\n        return index;\n    }\n\n    get toggleAllDisabled(): boolean {\n        let optionsToRender = this.optionsToRender;\n        if (!optionsToRender || optionsToRender.length === 0) {\n            return true;\n        } else {\n            for (let option of optionsToRender) {\n                if (!this.isOptionDisabled(option)) return false;\n            }\n\n            return true;\n        }\n    }\n\n    toggleAll(event: Event) {\n        if (this.disabled || this.toggleAllDisabled || this.readonly) {\n            return;\n        }\n\n        let allChecked = this.allChecked;\n\n        if (allChecked) this.uncheckAll();\n        else this.checkAll();\n\n        this.onModelChange(this.value);\n        this.onChange.emit({ originalEvent: event, value: this.value });\n        this.updateFilledState();\n        this.updateLabel();\n        event.preventDefault();\n    }\n\n    checkAll() {\n        let optionsToRender = this.optionsToRender;\n        let val: any[] = [];\n\n        optionsToRender.forEach((opt) => {\n            if (!this.group) {\n                let optionDisabled = this.isOptionDisabled(opt);\n                if (!optionDisabled || (optionDisabled && this.isSelected(opt))) {\n                    val.push(this.getOptionValue(opt));\n                }\n            } else {\n                let subOptions = this.getOptionGroupChildren(opt);\n\n                if (subOptions) {\n                    subOptions.forEach((option: any) => {\n                        let optionDisabled = this.isOptionDisabled(option);\n                        if (!optionDisabled || (optionDisabled && this.isSelected(option))) {\n                            val.push(this.getOptionValue(option));\n                        }\n                    });\n                }\n            }\n        });\n\n        this.value = val;\n    }\n\n    uncheckAll() {\n        let optionsToRender = this.optionsToRender;\n        let val: any[] = [];\n\n        optionsToRender.forEach((opt) => {\n            if (!this.group) {\n                let optionDisabled = this.isOptionDisabled(opt);\n                if (optionDisabled && this.isSelected(opt)) {\n                    val.push(this.getOptionValue(opt));\n                }\n            } else {\n                if (opt.items) {\n                    opt.items.forEach((option: any) => {\n                        let optionDisabled = this.isOptionDisabled(option);\n                        if (optionDisabled && this.isSelected(option)) {\n                            val.push(this.getOptionValue(option));\n                        }\n                    });\n                }\n            }\n        });\n\n        this.value = val;\n    }\n\n    show() {\n        if (!this.overlayVisible) {\n            this.overlayVisible = true;\n            this.preventDocumentDefault = true;\n            this.cd.markForCheck();\n        }\n    }\n\n    onOverlayAnimationStart(event: AnimationEvent) {\n        switch (event.toState) {\n            case 'visible':\n                this.virtualScroll && this.scroller?.setContentEl(this.itemsViewChild?.nativeElement);\n\n                if (this.filterInputChild && this.filterInputChild.nativeElement) {\n                    this.preventModelTouched = true;\n\n                    if (this.autofocusFilter) {\n                        this.filterInputChild.nativeElement.focus();\n                    }\n                }\n\n                this.onPanelShow.emit();\n                break;\n\n            case 'void':\n                this.onModelTouched();\n                break;\n        }\n    }\n\n    hide() {\n        this.overlayVisible = false;\n        if (this.resetFilterOnHide) {\n            this.resetFilter();\n        }\n        this.onPanelHide.emit();\n        this.cd.markForCheck();\n    }\n\n    resetFilter() {\n        if (this.filterInputChild && this.filterInputChild.nativeElement) {\n            this.filterInputChild.nativeElement.value = '';\n        }\n\n        this._filterValue = null;\n        this._filteredOptions = null;\n    }\n\n    close(event: Event) {\n        this.hide();\n        event.preventDefault();\n        event.stopPropagation();\n    }\n\n    clear(event: Event) {\n        this.value = null;\n        this.updateLabel();\n        this.updateFilledState();\n        this.checkSelectionLimit();\n        this.onClear.emit();\n        this.onModelChange(this.value);\n        event.stopPropagation();\n    }\n\n    onMouseclick(event: MouseEvent, input: HTMLInputElement) {\n        if (this.disabled || this.readonly || (<Node>event.target).isSameNode(this.accessibleViewChild?.nativeElement)) {\n            return;\n        }\n\n        this.onClick.emit(event);\n\n        if (!this.overlayViewChild?.el?.nativeElement?.contains(event.target) && !DomHandler.hasClass(event.target, 'p-multiselect-token-icon')) {\n            if (this.overlayVisible) {\n                this.hide();\n            } else {\n                this.show();\n            }\n\n            input.focus();\n        }\n    }\n\n    removeChip(chip: MultiSelectItem, event: MouseEvent) {\n        this.value = (<any[]>this.value).filter((val) => !ObjectUtils.equals(val, chip, this.dataKey));\n        this.onModelChange(this.value);\n        this.checkSelectionLimit();\n        this.onChange.emit({ originalEvent: event, value: this.value, itemValue: chip });\n        this.updateLabel();\n        this.updateFilledState();\n    }\n\n    onInputFocus(event: Event) {\n        this.focus = true;\n        this.onFocus.emit({ originalEvent: event });\n    }\n\n    onInputBlur(event: Event) {\n        this.focus = false;\n        this.onBlur.emit({ originalEvent: event });\n\n        if (!this.preventModelTouched) {\n            this.onModelTouched();\n        }\n        this.preventModelTouched = false;\n    }\n\n    onOptionKeydown(