primeng/bundles/primeng-multiselect.umd.min.js

[](https://opensource.org/licenses/MIT) [](https://badge.fury.io/js/primeng) [![Discord](https://img.shields.io/discord/557940238991753

!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("@angular/animations"),require("@angular/common"),require("primeng/dom"),require("primeng/utils"),require("primeng/api"),require("@angular/forms"),require("@angular/cdk/scrolling"),require("primeng/tooltip"),require("primeng/ripple")):"function"==typeof define&&define.amd?define("primeng/multiselect",["exports","@angular/core","@angular/animations","@angular/common","primeng/dom","primeng/utils","primeng/api","@angular/forms","@angular/cdk/scrolling","primeng/tooltip","primeng/ripple"],t):t(((e="undefined"!=typeof globalThis?globalThis:e||self).primeng=e.primeng||{},e.primeng.multiselect={}),e.ng.core,e.ng.animations,e.ng.common,e.primeng.dom,e.primeng.utils,e.primeng.api,e.ng.forms,e.ng.cdk.scrolling,e.primeng.tooltip,e.primeng.ripple)}(this,(function(e,t,i,n,l,o,s,r,a,p,c){"use strict";
/*! *****************************************************************************
    Copyright (c) Microsoft Corporation.

    Permission to use, copy, modify, and/or distribute this software for any
    purpose with or without fee is hereby granted.

    THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
    REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
    AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
    INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
    LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
    OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
    PERFORMANCE OF THIS SOFTWARE.
    ***************************************************************************** */Object.create;function u(e){var t="function"==typeof Symbol&&Symbol.iterator,i=t&&e[t],n=0;if(i)return i.call(e);if(e&&"number"==typeof e.length)return{next:function(){return e&&n>=e.length&&(e=void 0),{value:e&&e[n++],done:!e}}};throw new TypeError(t?"Object is not iterable.":"Symbol.iterator is not defined.")}function h(e,t){var i="function"==typeof Symbol&&e[Symbol.iterator];if(!i)return e;var n,l,o=i.call(e),s=[];try{for(;(void 0===t||t-- >0)&&!(n=o.next()).done;)s.push(n.value)}catch(e){l={error:e}}finally{try{n&&!n.done&&(i=o.return)&&i.call(o)}finally{if(l)throw l.error}}return s}Object.create;var d={provide:r.NG_VALUE_ACCESSOR,useExisting:t.forwardRef((function(){return y})),multi:!0},m=function(){function e(){this.onClick=new t.EventEmitter,this.onKeydown=new t.EventEmitter}return e.prototype.onOptionClick=function(e){this.onClick.emit({originalEvent:e,option:this.option})},e.prototype.onOptionKeydown=function(e){this.onKeydown.emit({originalEvent:e,option:this.option})},e}();m.decorators=[{type:t.Component,args:[{selector:"p-multiSelectItem",template:'\n        <li class="p-multiselect-item" (click)="onOptionClick($event)" (keydown)="onOptionKeydown($event)" [attr.aria-label]="label" \n            [attr.tabindex]="disabled ? null : \'0\'" [ngStyle]="{\'height\': itemSize + \'px\'}"\n            [ngClass]="{\'p-highlight\': selected, \'p-disabled\': disabled}" pRipple>\n            <div class="p-checkbox p-component">\n                <div class="p-checkbox-box" [ngClass]="{\'p-highlight\': selected}">\n                    <span class="p-checkbox-icon" [ngClass]="{\'pi pi-check\': selected}"></span>\n                </div>\n            </div>\n            <span *ngIf="!template">{{label}}</span>\n            <ng-container *ngTemplateOutlet="template; context: {$implicit: option}"></ng-container>\n        </li>\n    ',encapsulation:t.ViewEncapsulation.None}]}],m.propDecorators={option:[{type:t.Input}],selected:[{type:t.Input}],label:[{type:t.Input}],disabled:[{type:t.Input}],itemSize:[{type:t.Input}],template:[{type:t.Input}],onClick:[{type:t.Output}],onKeydown:[{type:t.Output}]};var y=function(){function e(e,i,n,l){this.el=e,this.renderer=i,this.cd=n,this.filterService=l,this.filter=!0,this.displaySelectedLabel=!0,this.maxSelectedLabels=3,this.selectedItemsLabel="{0} items selected",this.showToggleAll=!0,this.emptyFilterMessage="No results found",this.resetFilterOnHide=!1,this.dropdownIcon="pi pi-chevron-down",this.showHeader=!0,this.autoZIndex=!0,this.baseZIndex=0,this.showTransitionOptions=".12s cubic-bezier(0, 0, 0.2, 1)",this.hideTransitionOptions=".1s linear",this.filterMatchMode="contains",this.tooltip="",this.tooltipPosition="right",this.tooltipPositionStyle="absolute",this.autofocusFilter=!0,this.display="comma",this.onChange=new t.EventEmitter,this.onFocus=new t.EventEmitter,this.onBlur=new t.EventEmitter,this.onClick=new t.EventEmitter,this.onPanelShow=new t.EventEmitter,this.onPanelHide=new t.EventEmitter,this.scrollHeight="200px",this.onModelChange=function(){},this.onModelTouched=function(){}}return Object.defineProperty(e.prototype,"defaultLabel",{get:function(){return this._defaultLabel},set:function(e){this._defaultLabel=e,this.updateLabel()},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"placeholder",{get:function(){return this._placeholder},set:function(e){this._placeholder=e,this.updateLabel()},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"options",{get:function(){return this._options},set:function(e){this._options=e},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"filterValue",{get:function(){return this._filterValue},set:function(e){this._filterValue=e,this.activateFilter()},enumerable:!1,configurable:!0}),e.prototype.ngOnInit=function(){this.updateLabel()},e.prototype.ngAfterContentInit=function(){var e=this;this.templates.forEach((function(t){switch(t.getType()){case"item":e.itemTemplate=t.template;break;case"group":e.groupTemplate=t.template;break;case"selectedItems":e.selectedItemsTemplate=t.template;break;case"header":e.headerTemplate=t.template;break;case"footer":e.footerTemplate=t.template;break;default:e.itemTemplate=t.template}}))},e.prototype.ngAfterViewInit=function(){this.overlayVisible&&this.show()},e.prototype.ngAfterViewChecked=function(){this.filtered&&(this.alignOverlay(),this.filtered=!1)},e.prototype.getOptionLabel=function(e){return this.optionLabel?o.ObjectUtils.resolveFieldData(e,this.optionLabel):null!=e.label?e.label:e},e.prototype.getOptionValue=function(e){return this.optionValue?o.ObjectUtils.resolveFieldData(e,this.optionValue):this.optionLabel?e:e.value},e.prototype.getOptionGroupLabel=function(e){return this.optionGroupLabel?o.ObjectUtils.resolveFieldData(e,this.optionGroupLabel):null!=e.label?e.label:e},e.prototype.getOptionGroupChildren=function(e){return this.optionGroupChildren?o.ObjectUtils.resolveFieldData(e,this.optionGroupChildren):e.items},e.prototype.isOptionDisabled=function(e){return(this.optionDisabled?o.ObjectUtils.resolveFieldData(e,this.optionDisabled):void 0!==e.disabled&&e.disabled)||this.maxSelectionLimitReached&&!this.isSelected(e)},e.prototype.writeValue=function(e){this.value=e,this.updateLabel(),this.updateFilledState(),this.checkSelectionLimit(),this.cd.markForCheck()},e.prototype.checkSelectionLimit=function(){this.selectionLimit&&this.value&&this.value.length===this.selectionLimit?this.maxSelectionLimitReached=!0:this.maxSelectionLimitReached=!1},e.prototype.updateFilledState=function(){this.filled=this.value&&this.value.length>0},e.prototype.registerOnChange=function(e){this.onModelChange=e},e.prototype.registerOnTouched=function(e){this.onModelTouched=e},e.prototype.setDisabledState=function(e){this.disabled=e,this.cd.markForCheck()},e.prototype.onOptionClick=function(e){var t=e.option;if(!this.isOptionDisabled(t)){var i=this.getOptionValue(t),n=this.findSelectionIndex(i);-1!=n?(this.value=this.value.filter((function(e,t){return t!=n})),this.selectionLimit&&(this.maxSelectionLimitReached=!1)):((!this.selectionLimit||!this.value||this.value.length<this.selectionLimit)&&(this.value=function(){for(var e=[],t=0;t<arguments.length;t++)e=e.concat(h(arguments[t]));return e}(this.value||[],[i])),this.checkSelectionLimit()),this.onModelChange(this.value),this.onChange.emit({originalEvent:e.originalEvent,value:this.value,itemValue:i}),this.updateLabel(),this.updateFilledState()}},e.prototype.isSelected=function(e){return-1!=this.findSelectionIndex(this.getOptionValue(e))},e.prototype.findSelectionIndex=function(e){var t=-1;if(this.value)for(var i=0;i<this.value.length;i++)if(o.ObjectUtils.equals(this.value[i],e,this.dataKey)){t=i;break}return t},Object.defineProperty(e.prototype,"toggleAllDisabled",{get:function(){var e,t,i=this.optionsToRender;if(i&&0!==i.length){try{for(var n=u(i),l=n.next();!l.done;l=n.next()){var o=l.value;if(!this.isOptionDisabled(o))return!1}}catch(t){e={error:t}}finally{try{l&&!l.done&&(t=n.return)&&t.call(n)}finally{if(e)throw e.error}}return!0}return!0},enumerable:!1,configurable:!0}),e.prototype.toggleAll=function(e){this.disabled||this.toggleAllDisabled||this.readonly||(this.allChecked?this.uncheckAll():this.checkAll(),this.onModelChange(this.value),this.onChange.emit({originalEvent:e,value:this.value}),this.updateFilledState(),this.updateLabel(),e.preventDefault())},e.prototype.checkAll=function(){var e=this,t=this.optionsToRender,i=[];t.forEach((function(t){if(e.group)t.items&&t.items.forEach((function(t){var n=e.isOptionDisabled(t);(!n||n&&e.isSelected(t))&&i.push(e.getOptionValue(t))}));else{var n=e.isOptionDisabled(t);(!n||n&&e.isSelected(t))&&i.push(e.getOptionValue(t))}})),this.value=i},e.prototype.uncheckAll=function(){var e=this,t=this.optionsToRender,i=[];t.forEach((function(t){e.group?t.items&&t.items.forEach((function(t){e.isOptionDisabled(t)&&e.isSelected(t)&&i.push(e.getOptionValue(t))})):e.isOptionDisabled(t)&&e.isSelected(t)&&i.push(e.getOptionValue(t))})),this.value=i},e.prototype.show=function(){this.overlayVisible||(this.overlayVisible=!0)},e.prototype.onOverlayAnimationStart=function(e){switch(e.toState){case"visible":this.overlay=e.element,this.appendOverlay(),this.autoZIndex&&(this.overlay.style.zIndex=String(this.baseZIndex+ ++l.DomHandler.zindex)),this.alignOverlay(),this.bindDocumentClickListener(),this.bindDocumentResizeListener(),this.bindScrollListener(),this.filterInputChild&&this.filterInputChild.nativeElement&&(this.preventModelTouched=!0,this.autofocusFilter&&this.filterInputChild.nativeElement.focus()),this.onPanelShow.emit();break;case"void":this.onOverlayHide()}},e.prototype.appendOverlay=function(){this.appendTo&&("body"===this.appendTo?document.body.appendChild(this.overlay):l.DomHandler.appendChild(this.overlay,this.appendTo),this.overlay.style.minWidth||(this.overlay.style.minWidth=l.DomHandler.getWidth(this.containerViewChild.nativeElement)+"px"))},e.prototype.restoreOverlayAppend=function(){this.overlay&&this.appendTo&&this.el.nativeElement.appendChild(this.overlay)},e.prototype.alignOverlay=function(){this.overlay&&(this.appendTo?l.DomHandler.absolutePosition(this.overlay,this.containerViewChild.nativeElement):l.DomHandler.relativePosition(this.overlay,this.containerViewChild.nativeElement))},e.prototype.hide=function(){this.overlayVisible=!1,this.unbindDocumentClickListener(),this.resetFilterOnHide&&(this.filterInputChild.nativeElement.value="",this._filterValue=null,this._filteredOptions=null),this.onPanelHide.emit(),this.cd.markForCheck()},e.prototype.close=function(e){this.hide(),e.preventDefault(),e.stopPropagation()},e.prototype.onMouseclick=function(e,t){this.disabled||this.readonly||e.target.isSameNode(this.accessibleViewChild.nativeElement)||(this.onClick.emit(e),this.isOverlayClick(e)||l.DomHandler.hasClass(e.target,"p-multiselect-token-icon")||(this.overlayVisible?this.hide():(t.focus(),this.show())))},e.prototype.removeChip=function(e,t){var i=this;this.value=this.value.filter((function(t){return!o.ObjectUtils.equals(t,e,i.dataKey)})),this.onModelChange(this.value),this.onChange.emit({originalEvent:t,value:this.value}),this.updateLabel(),this.updateFilledState()},e.prototype.isOverlayClick=function(e){var t=e.target;return!!this.overlay&&(this.overlay.isSameNode(t)||this.overlay.contains(t))},e.prototype.isOutsideClicked=function(e){return!(this.el.nativeElement.isSameNode(e.target)||this.el.nativeElement.contains(e.target)||this.isOverlayClick(e))},e.prototype.onInputFocus=function(e){this.focus=!0,this.onFocus.emit({originalEvent:e})},e.prototype.onInputBlur=function(e){this.focus=!1,this.onBlur.emit({originalEvent:e}),this.preventModelTouched||this.onModelTouched(),this.preventModelTouched=!1},e.prototype.onOptionKeydown=function(e){if(!this.readonly)switch(e.originalEvent.which){case 40:var t=this.findNextItem(e.originalEvent.target.parentElement);t&&t.focus(),e.originalEvent.preventDefault();break;case 38:var i=this.findPrevItem(e.originalEvent.target.parentElement);i&&i.focus(),e.originalEvent.preventDefault();break;case 13:this.onOptionClick(e),e.originalEvent.preventDefault()}},e.prototype.findNextItem=function(e){var t=e.nextElementSibling;return t?l.DomHandler.hasClass(t.children[0],"p-disabled")||l.DomHandler.isHidden(t.children[0])||l.DomHandler.hasClass(t,"p-multiselect-item-group")?this.findNextItem(t):t.children[0]:null},e.prototype.findPrevItem=function(e){var t=e.previousElementSibling;return t?l.DomHandler.hasClass(t.children[0],"p-disabled")||l.DomHandler.isHidden(t.children[0])||l.DomHandler.hasClass(t,"p-multiselect-item-group")?this.findPrevItem(t):t.children[0]:null},e.prototype.onKeydown=function(e){switch(e.which){case 40:!this.overlayVisible&&e.altKey&&(this.show(),e.preventDefault());break;case 32:this.overlayVisible||(this.show(),e.preventDefault());break;case 27:this.hide()}},e.prototype.updateLabel=function(){if(this.value&&this.options&&this.value.length&&this.displaySelectedLabel){for(var e="",t=0;t<this.value.length;t++){var i=this.findLabelByValue(this.value[t]);i&&(e.length>0&&(e+=", "),e+=i)}if(this.value.length<=this.maxSelectedLabels)this.valuesAsString=e;else{var n=/{(.*?)}/;n.test(this.selectedItemsLabel)?this.valuesAsString=this.selectedItemsLabel.replace(this.selectedItemsLabel.match(n)[0],this.value.length+""):this.valuesAsString=this.selectedItemsLabel}}else this.valuesAsString=this.placeholder||this.defaultLabel},e.prototype.findLabelByValue=function(e){if(this.group){for(var t=null,i=0;i<this.options.length&&(!this.options[i].items||!(t=this.searchLabelByValue(e,this.options[i].items)));i++);return t}return this.searchLabelByValue(e,this.options)},e.prototype.searchLabelByValue=function(e,t){for(var i=null,n=0;n<t.length;n++){var l=t[n],s=this.getOptionValue(l);if(null==e&&null==s||o.ObjectUtils.equals(e,s,this.dataKey)){i=this.getOptionLabel(l);break}}return i},Object.defineProperty(e.prototype,"allChecked",{get:function(){var e,t,i,n,l=this.optionsToRender;if(l&&0!==l.length){var o=0,s=0,r=0,a=this.group?0:this.optionsToRender.length;try{for(var p=u(l),c=p.next();!c.done;c=p.next()){var h=c.value;if(this.group){if(h.items)try{for(var d=(i=void 0,u(h.items)),m=d.next();!m.done;m=d.next()){var y=m.value;f=this.isOptionDisabled(y),g=this.isSelected(y);if(f)g?o++:s++;else{if(!g)return!1;r++}a++}}catch(e){i={error:e}}finally{try{m&&!m.done&&(n=d.return)&&n.call(d)}finally{if(i)throw i.error}}}else{var f=this.isOptionDisabled(h),g=this.isSelected(h);if(f)g?o++:s++;else{if(!g)return!1;r++}}}}catch(t){e={error:t}}finally{try{c&&!c.done&&(t=p.return)&&t.call(p)}finally{if(e)throw e.error}}return a===o||a===r||r&&a===r+s+o}return!1},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"optionsToRender",{get:function(){return this._filteredOptions||this.options},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"emptyOptions",{get:function(){var e=this.optionsToRender;return!e||0===e.length},enumerable:!1,configurable:!0}),e.prototype.hasFilter=function(){return this._filterValue&&this._filterValue.trim().length>0},e.prototype.onFilter=function(e){this._filterValue=e.target.value,this.activateFilter()},e.prototype.activateFilter=function(){var e,t;if(this.hasFilter()&&this._options){var i=(this.filterBy||this.optionLabel||"label").split(",");if(this.group){var n=(this.optionLabel||"label").split(","),l=[];try{for(var o=u(this.options),s=o.next();!s.done;s=o.next()){var r=s.value,a=this.filterService.filter(this.getOptionGroupChildren(r),n,this.filterValue,this.filterMatchMode,this.filterLocale);a&&a.length&&l.push({label:r.label,value:r.value,items:a})}}catch(t){e={error:t}}finally{try{s&&!s.done&&(t=o.return)&&t.call(o)}finally{if(e)throw e.error}}this._filteredOptions=l}else this._filteredOptions=this.filterService.filter(this.options,i,this._filterValue,this.filterMatchMode,this.filterLocale)}else this._filteredOptions=null},e.prototype.onHeaderCheckboxFocus=function(){this.headerCheckboxFocus=!0},e.prototype.onHeaderCheckboxBlur=function(){this.headerCheckboxFocus=!1},e.prototype.bindDocumentClickListener=function(){var e=this;if(!this.documentClickListener){var t=this.el?this.el.nativeElement.ownerDocument:"document";this.documentClickListener=this.renderer.listen(t,"click",(function(t){e.isOutsideClicked(t)&&e.hide()}))}},e.prototype.unbindDocumentClickListener=function(){this.documentClickListener&&(this.documentClickListener(),this.documentClickListener=null)},e.prototype.bindDocumentResizeListener=function(){this.documentResizeListener=this.onWindowResize.bind(this),window.addEventListener("resize",this.documentResizeListener)},e.prototype.unbindDocumentResizeListener=function(){this.documentResizeListener&&(window.removeEventListener("resize",this.documentResizeListener),this.documentResizeListener=null)},e.prototype.onWindowResize=function(){l.DomHandler.isAndroid()||this.hide()},e.prototype.bindScrollListener=function(){var e=this;this.scrollHandler||(this.scrollHandler=new l.ConnectedOverlayScrollHandler(this.containerViewChild.nativeElement,(function(){e.overlayVisible&&e.hide()}))),this.scrollHandler.bindScrollListener()},e.prototype.unbindScrollListener=function(){this.scrollHandler&&this.scrollHandler.unbindScrollListener()},e.prototype.onOverlayHide=function(){this.unbindDocumentClickListener(),this.unbindDocumentResizeListener(),this.unbindScrollListener(),this.overlay=null,this.onModelTouched()},e.prototype.ngOnDestroy=function(){this.scrollHandler&&(this.scrollHandler.destroy(),this.scrollHandler=null),this.restoreOverlayAppend(),this.onOverlayHide()},e}();y.decorators=[{type:t.Component,args:[{selector:"p-multiSelect",template:'\n        <div #container [ngClass]="{\'p-multiselect p-component\':true,\n            \'p-multiselect-open\':overlayVisible,\n            \'p-multiselect-chip\': display === \'chip\',\n            \'p-focus\':focus,\n            \'p-disabled\': disabled}" [ngStyle]="style" [class]="styleClass"\n            (click)="onMouseclick($event,in)">\n            <div class="p-hidden-accessible">\n                <input #in type="text" readonly="readonly" [attr.id]="inputId" [attr.name]="name" (focus)="onInputFocus($event)" (blur)="onInputBlur($event)"\n                       [disabled]="disabled" [attr.tabindex]="tabindex" (keydown)="onKeydown($event)" aria-haspopup="listbox" [attr.aria-expanded]="overlayVisible"\n                       [attr.aria-labelledby]="ariaLabelledBy" role="listbox">\n            </div>\n            <div class="p-multiselect-label-container" [pTooltip]="tooltip" [tooltipPosition]="tooltipPosition" [positionStyle]="tooltipPositionStyle" [tooltipStyleClass]="tooltipStyleClass">\n                <div class="p-multiselect-label" [ngClass]="{\'p-placeholder\': valuesAsString === (defaultLabel || placeholder), \'p-multiselect-label-empty\': ((valuesAsString == null || valuesAsString.length === 0) && (placeholder == null || placeholder.length === 0))}">\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                                <span *ngIf="!disabled" class="p-multiselect-token-icon pi pi-times-circle" (click)="removeChip(item, $event)"></span>\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}"></ng-container>\n                </div>\n            </div>\n            <div [ngClass]="{\'p-multiselect-trigger\':true}">\n                <span class="p-multiselect-trigger-icon" [ngClass]="dropdownIcon"></span>\n            </div>\n            <div *ngIf="overlayVisible" [ngClass]="[\'p-multiselect-panel p-component\']" [@overlayAnimation]="{value: \'visible\', params: {showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions}}" (@overlayAnimation.start)="onOverlayAnimationStart($event)"\n                [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                    <div class="p-checkbox p-component" *ngIf="showToggleAll && !selectionLimit" [ngClass]="{\'p-checkbox-disabled\': disabled || toggleAllDisabled}">\n                        <div class="p-hidden-accessible">\n                            <input type="checkbox" readonly="readonly" [checked]="allChecked" (focus)="onHeaderCheckboxFocus()" (blur)="onHeaderCheckboxBlur()" (keydown.space)="toggleAll($event)" [attr.disabled]="disabled || toggleAllDisabled">\n                        </div>\n                        <div class="p-checkbox-box" role="checkbox" [attr.aria-checked]="allChecked" [ngClass]="{\'p-highlight\':allChecked, \'p-focus\': headerCheckboxFocus, \'p-disabled\': disabled || toggleAllDisabled}" (click)="toggleAll($event)">\n                            <span class="p-checkbox-icon" [ngClass]="{\'pi pi-check\':allChecked}"></span>\n                        </div>\n                    </div>\n                    <div class="p-multiselect-filter-container" *ngIf="filter">\n                        <input #filterInput type="text" role="textbox" [value]="filterValue||\'\'" (input)="onFilter($event)" class="p-multiselect-filter p-inputtext p-component" [disabled]="disabled" [attr.placeholder]="filterPlaceHolder" [attr.aria-label]="ariaFilterLabel">\n                        <span class="p-multiselect-filter-icon pi pi-search"></span>\n                    </div>\n                    <button class="p-multiselect-close p-link" type="button" (click)="close($event)" pRipple>\n                        <span class="p-multiselect-close-icon pi pi-times"></span>\n                    </button>\n                </div>\n                <div class="p-multiselect-items-wrapper" [style.max-height]="virtualScroll ? \'auto\' : (scrollHeight||\'auto\')">\n                    <ul class="p-multiselect-items p-component" role="listbox" aria-multiselectable="true">\n                        <ng-container *ngIf="group">\n                            <ng-template ngFor let-optgroup [ngForOf]="optionsToRender">\n                                <li class="p-multiselect-item-group">\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: optionsToRender}"></ng-container>\n                        </ng-container>\n                        <ng-template #itemslist let-optionsToDisplay let-selectedOption="selectedOption">\n                            <ng-container *ngIf="!virtualScroll; else virtualScrollList">\n                                <ng-template ngFor let-option let-i="index" [ngForOf]="optionsToDisplay">\n                                    <p-multiSelectItem [option]="option" [selected]="isSelected(option)" [label]="getOptionLabel(option)" [disabled]="isOptionDisabled(option)" (onClick)="onOptionClick($event)" (onKeydown)="onOptionKeydown($event)"\n                                            [template]="itemTemplate"></p-multiSelectItem>\n                                </ng-template>\n                            </ng-container>\n                            <ng-template #virtualScrollList>\n                                <cdk-virtual-scroll-viewport #viewport [ngStyle]="{\'height\': scrollHeight}" [itemSize]="itemSize" *ngIf="virtualScroll && !emptyOptions">\n                                    <ng-container *cdkVirtualFor="let option of optionsToDisplay; let i = index; let c = count; let f = first; let l = last; let e = even; let o = odd">\n                                        <p-multiSelectItem [option]="option" [selected]="isSelected(option)" [label]="getOptionLabel(option)" [disabled]="isOptionDisabled(option)" (onClick)="onOptionClick($event)" (onKeydown)="onOptionKeydown($event)"\n                                            [template]="itemTemplate" [itemSize]="itemSize"></p-multiSelectItem>\n                                    </ng-container>\n                                </cdk-virtual-scroll-viewport>\n                            </ng-template>\n                            <li *ngIf="emptyOptions" class="p-multiselect-empty-message">{{emptyFilterMessage}}</li>\n                        </ng-template>\n                    </ul>\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        </div>\n    ',animations:[i.trigger("overlayAnimation",[i.transition(":enter",[i.style({opacity:0,transform:"scaleY(0.8)"}),i.animate("{{showTransitionParams}}")]),i.transition(":leave",[i.animate("{{hideTransitionParams}}",i.style({opacity:0}))])])],host:{"[class.p-inputwrapper-filled]":"filled","[class.p-inputwrapper-focus]":"focus || overlayVisible"},providers:[d],changeDetection:t.ChangeDetectionStrategy.OnPush,encapsulation:t.ViewEncapsulation.None,styles:[".p-multiselect{-ms-user-select:none;-webkit-user-select:none;cursor:pointer;display:inline-flex;position:relative;user-select:none}.p-multiselect-trigger{align-items:center;display:flex;flex-shrink:0;justify-content:center}.p-multiselect-label-container{cursor:pointer;flex:1 1 auto;overflow:hidden}.p-multiselect-label{cursor:pointer;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.p-multiselect-label-empty{overflow:hidden;visibility:hidden}.p-multiselect-token{align-items:center;cursor:default;display:inline-flex;flex:0 0 auto}.p-multiselect-token-icon{cursor:pointer}.p-multiselect .p-multiselect-panel{min-width:100%}.p-multiselect-panel{position:absolute}.p-multiselect-items-wrapper{overflow:auto}.p-multiselect-items{list-style-type:none;margin:0;padding:0}.p-multiselect-item{align-items:center;cursor:pointer;display:flex;font-weight:400;overflow:hidden;position:relative;white-space:nowrap}.p-multiselect-header{align-items:center;display:flex;justify-content:space-between}.p-multiselect-filter-container{flex:1 1 auto;position:relative}.p-multiselect-filter-icon{margin-top:-.5rem;position:absolute;top:50%}.p-multiselect-filter-container .p-inputtext{width:100%}.p-multiselect-close{align-items:center;display:flex;flex-shrink:0;justify-content:center;overflow:hidden;position:relative}.p-fluid .p-multiselect{display:flex}"]}]}],y.ctorParameters=function(){return[{type:t.ElementRef},{type:t.Renderer2},{type:t.ChangeDetectorRef},{type:s.FilterService}]},y.propDecorators={style:[{type:t.Input}],styleClass:[{type:t.Input}],panelStyle:[{type:t.Input}],panelStyleClass:[{type:t.Input}],inputId:[{type:t.Input}],disabled:[{type:t.Input}],readonly:[{type:t.Input}],group:[{type:t.Input}],filter:[{type:t.Input}],filterPlaceHolder:[{type:t.Input}],filterLocale:[{type:t.Input}],overlayVisible:[{type:t.Input}],tabindex:[{type:t.Input}],appendTo:[{type:t.Input}],dataKey:[{type:t.Input}],name:[{type:t.Input}],ariaLabelledBy:[{type:t.Input}],displaySelectedLabel:[{type:t.Input}],maxSelectedLabels:[{type:t.Input}],selectionLimit:[{type:t.Input}],selectedItemsLabel:[{type:t.Input}],showToggleAll:[{type:t.Input}],emptyFilterMessage:[{type:t.Input}],resetFilterOnHide:[{type:t.Input}],dropdownIcon:[{type:t.Input}],optionLabel:[{type:t.Input}],optionValue:[{type:t.Input}],optionDisabled:[{type:t.Input}],optionGroupLabel:[{type:t.Input}],optionGroupChildren:[{type:t.Input}],showHeader:[{type:t.Input}],autoZIndex:[{type:t.Input}],baseZIndex:[{type:t.Input}],filterBy:[{type:t.Input}],virtualScroll:[{type:t.Input}],itemSize:[{type:t.Input}],showTransitionOptions:[{type:t.Input}],hideTransitionOptions:[{type:t.Input}],ariaFilterLabel:[{type:t.Input}],filterMatchMode:[{type:t.Input}],tooltip:[{type:t.Input}],tooltipPosition:[{type:t.Input}],tooltipPositionStyle:[{type:t.Input}],tooltipStyleClass:[{type:t.Input}],autofocusFilter:[{type:t.Input}],display:[{type:t.Input}],containerViewChild:[{type:t.ViewChild,args:["container"]}],filterInputChild:[{type:t.ViewChild,args:["filterInput"]}],accessibleViewChild:[{type:t.ViewChild,args:["in"]}],footerFacet:[{type:t.ContentChild,args:[s.Footer]}],headerFacet:[{type:t.ContentChild,args:[s.Header]}],templates:[{type:t.ContentChildren,args:[s.PrimeTemplate]}],onChange:[{type:t.Output}],onFocus:[{type:t.Output}],onBlur:[{type:t.Output}],onClick:[{type:t.Output}],onPanelShow:[{type:t.Output}],onPanelHide:[{type:t.Output}],scrollHeight:[{type:t.Input}],defaultLabel:[{type:t.Input}],placeholder:[{type:t.Input}],options:[{type:t.Input}],filterValue:[{type:t.Input}]};var f=function(){};f.decorators=[{type:t.NgModule,args:[{imports:[n.CommonModule,s.SharedModule,a.ScrollingModule,p.TooltipModule,c.RippleModule],exports:[y,s.SharedModule,a.ScrollingModule],declarations:[y,m]}]}],e.MULTISELECT_VALUE_ACCESSOR=d,e.MultiSelect=y,e.MultiSelectItem=m,e.MultiSelectModule=f,Object.defineProperty(e,"__esModule",{value:!0})}));
//# sourceMappingURL=primeng-multiselect.umd.min.js.map