primeng 11.4.4 → 12.0.1

package/bundles/primeng-multiselect.umd.js

@@ -2,7 +2,34 @@
     typeof exports === 'object' && typeof module !== 'undefined' ? factory(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')) :
     typeof define === 'function' && 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'], factory) :
     (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.primeng = global.primeng || {}, global.primeng.multiselect = {}), global.ng.core, global.ng.animations, global.ng.common, global.primeng.dom, global.primeng.utils, global.primeng.api, global.ng.forms, global.ng.cdk.scrolling, global.primeng.tooltip, global.primeng.ripple));
-}(this, (function (exports, core, animations, common, dom, utils, api, forms, scrolling, tooltip, ripple) { 'use strict';
+}(this, (function (exports, i0, animations, i2, dom, utils, i3, forms, i4, i5, i1) { 'use strict';
+
+    function _interopNamespace(e) {
+        if (e && e.__esModule) return e;
+        var n = Object.create(null);
+        if (e) {
+            Object.keys(e).forEach(function (k) {
+                if (k !== 'default') {
+                    var d = Object.getOwnPropertyDescriptor(e, k);
+                    Object.defineProperty(n, k, d.get ? d : {
+                        enumerable: true,
+                        get: function () {
+                            return e[k];
+                        }
+                    });
+                }
+            });
+        }
+        n['default'] = e;
+        return Object.freeze(n);
+    }
+
+    var i0__namespace = /*#__PURE__*/_interopNamespace(i0);
+    var i2__namespace = /*#__PURE__*/_interopNamespace(i2);
+    var i3__namespace = /*#__PURE__*/_interopNamespace(i3);
+    var i4__namespace = /*#__PURE__*/_interopNamespace(i4);
+    var i5__namespace = /*#__PURE__*/_interopNamespace(i5);
+    var i1__namespace = /*#__PURE__*/_interopNamespace(i1);
 
     /*! *****************************************************************************
     Copyright (c) Microsoft Corporation.
@@ -324,13 +351,13 @@
 
     var MULTISELECT_VALUE_ACCESSOR = {
         provide: forms.NG_VALUE_ACCESSOR,
-        useExisting: core.forwardRef(function () { return MultiSelect; }),
+        useExisting: i0.forwardRef(function () { return MultiSelect; }),
         multi: true
     };
     var MultiSelectItem = /** @class */ (function () {
         function MultiSelectItem() {
-            this.onClick = new core.EventEmitter();
-            this.onKeydown = new core.EventEmitter();
+            this.onClick = new i0.EventEmitter();
+            this.onKeydown = new i0.EventEmitter();
         }
         MultiSelectItem.prototype.onOptionClick = function (event) {
             this.onClick.emit({
@@ -346,23 +373,32 @@
         };
         return MultiSelectItem;
     }());
-    MultiSelectItem.decorators = [
-        { type: core.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: core.ViewEncapsulation.None
-                },] }
-    ];
-    MultiSelectItem.propDecorators = {
-        option: [{ type: core.Input }],
-        selected: [{ type: core.Input }],
-        label: [{ type: core.Input }],
-        disabled: [{ type: core.Input }],
-        itemSize: [{ type: core.Input }],
-        template: [{ type: core.Input }],
-        onClick: [{ type: core.Output }],
-        onKeydown: [{ type: core.Output }]
-    };
+    MultiSelectItem.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: MultiSelectItem, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    MultiSelectItem.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.5", type: MultiSelectItem, selector: "p-multiSelectItem", inputs: { option: "option", selected: "selected", label: "label", disabled: "disabled", itemSize: "itemSize", template: "template" }, outputs: { onClick: "onClick", onKeydown: "onKeydown" }, ngImport: i0__namespace, 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    ", isInline: true, directives: [{ type: i1__namespace.Ripple, selector: "[pRipple]" }, { type: i2__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i2__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], encapsulation: i0__namespace.ViewEncapsulation.None });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: MultiSelectItem, decorators: [{
+                type: i0.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: i0.ViewEncapsulation.None
+                    }]
+            }], propDecorators: { option: [{
+                    type: i0.Input
+                }], selected: [{
+                    type: i0.Input
+                }], label: [{
+                    type: i0.Input
+                }], disabled: [{
+                    type: i0.Input
+                }], itemSize: [{
+                    type: i0.Input
+                }], template: [{
+                    type: i0.Input
+                }], onClick: [{
+                    type: i0.Output
+                }], onKeydown: [{
+                    type: i0.Output
+                }] } });
     var MultiSelect = /** @class */ (function () {
         function MultiSelect(el, renderer, cd, filterService, config) {
             this.el = el;
@@ -391,13 +427,13 @@
             this.tooltipPositionStyle = 'absolute';
             this.autofocusFilter = true;
             this.display = 'comma';
-            this.onChange = new core.EventEmitter();
-            this.onFilter = new core.EventEmitter();
-            this.onFocus = new core.EventEmitter();
-            this.onBlur = new core.EventEmitter();
-            this.onClick = new core.EventEmitter();
-            this.onPanelShow = new core.EventEmitter();
-            this.onPanelHide = new core.EventEmitter();
+            this.onChange = new i0.EventEmitter();
+            this.onFilter = new i0.EventEmitter();
+            this.onFocus = new i0.EventEmitter();
+            this.onBlur = new i0.EventEmitter();
+            this.onClick = new i0.EventEmitter();
+            this.onPanelShow = new i0.EventEmitter();
+            this.onPanelHide = new i0.EventEmitter();
             this.scrollHeight = '200px';
             this.onModelChange = function () { };
             this.onModelTouched = function () { };
@@ -550,7 +586,7 @@
             }
             else {
                 if (!this.selectionLimit || (!this.value || this.value.length < this.selectionLimit)) {
-                    this.value = __spread(this.value || [], [optionValue]);
+                    this.value = __spreadArray(__spreadArray([], __read(this.value || [])), [optionValue]);
                 }
                 this.checkSelectionLimit();
             }
@@ -996,14 +1032,14 @@
         });
         Object.defineProperty(MultiSelect.prototype, "emptyMessageLabel", {
             get: function () {
-                return this.emptyMessage || this.config.getTranslation(api.TranslationKeys.EMPTY_MESSAGE);
+                return this.emptyMessage || this.config.getTranslation(i3.TranslationKeys.EMPTY_MESSAGE);
             },
             enumerable: false,
             configurable: true
         });
         Object.defineProperty(MultiSelect.prototype, "emptyFilterMessageLabel", {
             get: function () {
-                return this.emptyFilterMessage || this.config.getTranslation(api.TranslationKeys.EMPTY_FILTER_MESSAGE);
+                return this.emptyFilterMessage || this.config.getTranslation(i3.TranslationKeys.EMPTY_FILTER_MESSAGE);
             },
             enumerable: false,
             configurable: true
@@ -1120,117 +1156,196 @@
         };
         return MultiSelect;
     }());
-    MultiSelect.decorators = [
-        { type: core.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)=\"onFilterInputChange($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\" [ngClass]=\"{'p-multiselect-virtualscroll': virtualScroll}\" 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=\"hasFilter() && emptyOptions\" class=\"p-multiselect-empty-message\">\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() && emptyOptions\" class=\"p-multiselect-empty-message\">\n                                <ng-container *ngIf=\"!emptyTemplate; else empty\">\n                                    {{emptyMessageLabel}}\n                                </ng-container>\n                                <ng-container #empty *ngTemplateOutlet=\"emptyTemplate\"></ng-container>\n                            </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: [
-                        animations.trigger('overlayAnimation', [
-                            animations.transition(':enter', [
-                                animations.style({ opacity: 0, transform: 'scaleY(0.8)' }),
-                                animations.animate('{{showTransitionParams}}')
-                            ]),
-                            animations.transition(':leave', [
-                                animations.animate('{{hideTransitionParams}}', animations.style({ opacity: 0 }))
+    MultiSelect.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: MultiSelect, deps: [{ token: i0__namespace.ElementRef }, { token: i0__namespace.Renderer2 }, { token: i0__namespace.ChangeDetectorRef }, { token: i3__namespace.FilterService }, { token: i3__namespace.PrimeNGConfig }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    MultiSelect.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.5", type: MultiSelect, selector: "p-multiSelect", inputs: { style: "style", styleClass: "styleClass", panelStyle: "panelStyle", panelStyleClass: "panelStyleClass", inputId: "inputId", disabled: "disabled", readonly: "readonly", group: "group", filter: "filter", filterPlaceHolder: "filterPlaceHolder", filterLocale: "filterLocale", overlayVisible: "overlayVisible", tabindex: "tabindex", appendTo: "appendTo", dataKey: "dataKey", name: "name", ariaLabelledBy: "ariaLabelledBy", displaySelectedLabel: "displaySelectedLabel", maxSelectedLabels: "maxSelectedLabels", selectionLimit: "selectionLimit", selectedItemsLabel: "selectedItemsLabel", showToggleAll: "showToggleAll", emptyFilterMessage: "emptyFilterMessage", emptyMessage: "emptyMessage", resetFilterOnHide: "resetFilterOnHide", dropdownIcon: "dropdownIcon", optionLabel: "optionLabel", optionValue: "optionValue", optionDisabled: "optionDisabled", optionGroupLabel: "optionGroupLabel", optionGroupChildren: "optionGroupChildren", showHeader: "showHeader", autoZIndex: "autoZIndex", baseZIndex: "baseZIndex", filterBy: "filterBy", virtualScroll: "virtualScroll", itemSize: "itemSize", showTransitionOptions: "showTransitionOptions", hideTransitionOptions: "hideTransitionOptions", ariaFilterLabel: "ariaFilterLabel", filterMatchMode: "filterMatchMode", tooltip: "tooltip", tooltipPosition: "tooltipPosition", tooltipPositionStyle: "tooltipPositionStyle", tooltipStyleClass: "tooltipStyleClass", autofocusFilter: "autofocusFilter", display: "display", scrollHeight: "scrollHeight", defaultLabel: "defaultLabel", placeholder: "placeholder", options: "options", filterValue: "filterValue" }, outputs: { onChange: "onChange", onFilter: "onFilter", onFocus: "onFocus", onBlur: "onBlur", onClick: "onClick", onPanelShow: "onPanelShow", onPanelHide: "onPanelHide" }, host: { properties: { "class.p-inputwrapper-filled": "filled", "class.p-inputwrapper-focus": "focus || overlayVisible" } }, providers: [MULTISELECT_VALUE_ACCESSOR], queries: [{ propertyName: "footerFacet", first: true, predicate: i3.Footer, descendants: true }, { propertyName: "headerFacet", first: true, predicate: i3.Header, descendants: true }, { propertyName: "templates", predicate: i3.PrimeTemplate }], viewQueries: [{ propertyName: "containerViewChild", first: true, predicate: ["container"], descendants: true }, { propertyName: "filterInputChild", first: true, predicate: ["filterInput"], descendants: true }, { propertyName: "accessibleViewChild", first: true, predicate: ["in"], descendants: true }], ngImport: i0__namespace, 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)=\"onFilterInputChange($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\" [ngClass]=\"{'p-multiselect-virtualscroll': virtualScroll}\" 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=\"hasFilter() && emptyOptions\" class=\"p-multiselect-empty-message\">\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() && emptyOptions\" class=\"p-multiselect-empty-message\">\n                                <ng-container *ngIf=\"!emptyTemplate; else empty\">\n                                    {{emptyMessageLabel}}\n                                </ng-container>\n                                <ng-container #empty *ngTemplateOutlet=\"emptyTemplate\"></ng-container>\n                            </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    ", isInline: true, styles: [".p-multiselect{display:inline-flex;cursor:pointer;position:relative;-webkit-user-select:none;-ms-user-select:none;user-select:none}.p-multiselect-trigger{display:flex;align-items:center;justify-content:center;flex-shrink:0}.p-multiselect-label-container{overflow:hidden;flex:1 1 auto;cursor:pointer}.p-multiselect-label{display:block;white-space:nowrap;cursor:pointer;overflow:hidden;text-overflow:ellipsis}.p-multiselect-label-empty{overflow:hidden;visibility:hidden}.p-multiselect-token{cursor:default;display:inline-flex;align-items:center;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{margin:0;padding:0;list-style-type:none}.p-multiselect-item{cursor:pointer;display:flex;align-items:center;font-weight:400;white-space:nowrap;position:relative;overflow:hidden}.p-multiselect-header{display:flex;align-items:center;justify-content:space-between}.p-multiselect-filter-container{position:relative;flex:1 1 auto}.p-multiselect-filter-icon{position:absolute;top:50%;margin-top:-.5rem}.p-multiselect-filter-container .p-inputtext{width:100%}.p-multiselect-close{display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden;position:relative}.p-fluid .p-multiselect{display:flex}"], components: [{ type: MultiSelectItem, selector: "p-multiSelectItem", inputs: ["option", "selected", "label", "disabled", "itemSize", "template"], outputs: ["onClick", "onKeydown"] }, { type: i4__namespace.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation"], outputs: ["scrolledIndexChange"] }], directives: [{ type: i2__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i5__namespace.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "tooltipDisabled", "pTooltip"] }, { type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i1__namespace.Ripple, selector: "[pRipple]" }, { type: i4__namespace.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { type: i4__namespace.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }], animations: [
+            animations.trigger('overlayAnimation', [
+                animations.transition(':enter', [
+                    animations.style({ opacity: 0, transform: 'scaleY(0.8)' }),
+                    animations.animate('{{showTransitionParams}}')
+                ]),
+                animations.transition(':leave', [
+                    animations.animate('{{hideTransitionParams}}', animations.style({ opacity: 0 }))
+                ])
+            ])
+        ], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: MultiSelect, decorators: [{
+                type: i0.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)=\"onFilterInputChange($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\" [ngClass]=\"{'p-multiselect-virtualscroll': virtualScroll}\" 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=\"hasFilter() && emptyOptions\" class=\"p-multiselect-empty-message\">\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() && emptyOptions\" class=\"p-multiselect-empty-message\">\n                                <ng-container *ngIf=\"!emptyTemplate; else empty\">\n                                    {{emptyMessageLabel}}\n                                </ng-container>\n                                <ng-container #empty *ngTemplateOutlet=\"emptyTemplate\"></ng-container>\n                            </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: [
+                            animations.trigger('overlayAnimation', [
+                                animations.transition(':enter', [
+                                    animations.style({ opacity: 0, transform: 'scaleY(0.8)' }),
+                                    animations.animate('{{showTransitionParams}}')
+                                ]),
+                                animations.transition(':leave', [
+                                    animations.animate('{{hideTransitionParams}}', animations.style({ opacity: 0 }))
+                                ])
                             ])
-                        ])
-                    ],
-                    host: {
-                        '[class.p-inputwrapper-filled]': 'filled',
-                        '[class.p-inputwrapper-focus]': 'focus || overlayVisible'
-                    },
-                    providers: [MULTISELECT_VALUE_ACCESSOR],
-                    changeDetection: core.ChangeDetectionStrategy.OnPush,
-                    encapsulation: core.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}"]
-                },] }
-    ];
-    MultiSelect.ctorParameters = function () { return [
-        { type: core.ElementRef },
-        { type: core.Renderer2 },
-        { type: core.ChangeDetectorRef },
-        { type: api.FilterService },
-        { type: api.PrimeNGConfig }
-    ]; };
-    MultiSelect.propDecorators = {
-        style: [{ type: core.Input }],
-        styleClass: [{ type: core.Input }],
-        panelStyle: [{ type: core.Input }],
-        panelStyleClass: [{ type: core.Input }],
-        inputId: [{ type: core.Input }],
-        disabled: [{ type: core.Input }],
-        readonly: [{ type: core.Input }],
-        group: [{ type: core.Input }],
-        filter: [{ type: core.Input }],
-        filterPlaceHolder: [{ type: core.Input }],
-        filterLocale: [{ type: core.Input }],
-        overlayVisible: [{ type: core.Input }],
-        tabindex: [{ type: core.Input }],
-        appendTo: [{ type: core.Input }],
-        dataKey: [{ type: core.Input }],
-        name: [{ type: core.Input }],
-        ariaLabelledBy: [{ type: core.Input }],
-        displaySelectedLabel: [{ type: core.Input }],
-        maxSelectedLabels: [{ type: core.Input }],
-        selectionLimit: [{ type: core.Input }],
-        selectedItemsLabel: [{ type: core.Input }],
-        showToggleAll: [{ type: core.Input }],
-        emptyFilterMessage: [{ type: core.Input }],
-        emptyMessage: [{ type: core.Input }],
-        resetFilterOnHide: [{ type: core.Input }],
-        dropdownIcon: [{ type: core.Input }],
-        optionLabel: [{ type: core.Input }],
-        optionValue: [{ type: core.Input }],
-        optionDisabled: [{ type: core.Input }],
-        optionGroupLabel: [{ type: core.Input }],
-        optionGroupChildren: [{ type: core.Input }],
-        showHeader: [{ type: core.Input }],
-        autoZIndex: [{ type: core.Input }],
-        baseZIndex: [{ type: core.Input }],
-        filterBy: [{ type: core.Input }],
-        virtualScroll: [{ type: core.Input }],
-        itemSize: [{ type: core.Input }],
-        showTransitionOptions: [{ type: core.Input }],
-        hideTransitionOptions: [{ type: core.Input }],
-        ariaFilterLabel: [{ type: core.Input }],
-        filterMatchMode: [{ type: core.Input }],
-        tooltip: [{ type: core.Input }],
-        tooltipPosition: [{ type: core.Input }],
-        tooltipPositionStyle: [{ type: core.Input }],
-        tooltipStyleClass: [{ type: core.Input }],
-        autofocusFilter: [{ type: core.Input }],
-        display: [{ type: core.Input }],
-        containerViewChild: [{ type: core.ViewChild, args: ['container',] }],
-        filterInputChild: [{ type: core.ViewChild, args: ['filterInput',] }],
-        accessibleViewChild: [{ type: core.ViewChild, args: ['in',] }],
-        footerFacet: [{ type: core.ContentChild, args: [api.Footer,] }],
-        headerFacet: [{ type: core.ContentChild, args: [api.Header,] }],
-        templates: [{ type: core.ContentChildren, args: [api.PrimeTemplate,] }],
-        onChange: [{ type: core.Output }],
-        onFilter: [{ type: core.Output }],
-        onFocus: [{ type: core.Output }],
-        onBlur: [{ type: core.Output }],
-        onClick: [{ type: core.Output }],
-        onPanelShow: [{ type: core.Output }],
-        onPanelHide: [{ type: core.Output }],
-        scrollHeight: [{ type: core.Input }],
-        defaultLabel: [{ type: core.Input }],
-        placeholder: [{ type: core.Input }],
-        options: [{ type: core.Input }],
-        filterValue: [{ type: core.Input }]
-    };
+                        ],
+                        host: {
+                            '[class.p-inputwrapper-filled]': 'filled',
+                            '[class.p-inputwrapper-focus]': 'focus || overlayVisible'
+                        },
+                        providers: [MULTISELECT_VALUE_ACCESSOR],
+                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                        encapsulation: i0.ViewEncapsulation.None,
+                        styleUrls: ['./multiselect.css']
+                    }]
+            }], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }, { type: i0__namespace.Renderer2 }, { type: i0__namespace.ChangeDetectorRef }, { type: i3__namespace.FilterService }, { type: i3__namespace.PrimeNGConfig }]; }, propDecorators: { style: [{
+                    type: i0.Input
+                }], styleClass: [{
+                    type: i0.Input
+                }], panelStyle: [{
+                    type: i0.Input
+                }], panelStyleClass: [{
+                    type: i0.Input
+                }], inputId: [{
+                    type: i0.Input
+                }], disabled: [{
+                    type: i0.Input
+                }], readonly: [{
+                    type: i0.Input
+                }], group: [{
+                    type: i0.Input
+                }], filter: [{
+                    type: i0.Input
+                }], filterPlaceHolder: [{
+                    type: i0.Input
+                }], filterLocale: [{
+                    type: i0.Input
+                }], overlayVisible: [{
+                    type: i0.Input
+                }], tabindex: [{
+                    type: i0.Input
+                }], appendTo: [{
+                    type: i0.Input
+                }], dataKey: [{
+                    type: i0.Input
+                }], name: [{
+                    type: i0.Input
+                }], ariaLabelledBy: [{
+                    type: i0.Input
+                }], displaySelectedLabel: [{
+                    type: i0.Input
+                }], maxSelectedLabels: [{
+                    type: i0.Input
+                }], selectionLimit: [{
+                    type: i0.Input
+                }], selectedItemsLabel: [{
+                    type: i0.Input
+                }], showToggleAll: [{
+                    type: i0.Input
+                }], emptyFilterMessage: [{
+                    type: i0.Input
+                }], emptyMessage: [{
+                    type: i0.Input
+                }], resetFilterOnHide: [{
+                    type: i0.Input
+                }], dropdownIcon: [{
+                    type: i0.Input
+                }], optionLabel: [{
+                    type: i0.Input
+                }], optionValue: [{
+                    type: i0.Input
+                }], optionDisabled: [{
+                    type: i0.Input
+                }], optionGroupLabel: [{
+                    type: i0.Input
+                }], optionGroupChildren: [{
+                    type: i0.Input
+                }], showHeader: [{
+                    type: i0.Input
+                }], autoZIndex: [{
+                    type: i0.Input
+                }], baseZIndex: [{
+                    type: i0.Input
+                }], filterBy: [{
+                    type: i0.Input
+                }], virtualScroll: [{
+                    type: i0.Input
+                }], itemSize: [{
+                    type: i0.Input
+                }], showTransitionOptions: [{
+                    type: i0.Input
+                }], hideTransitionOptions: [{
+                    type: i0.Input
+                }], ariaFilterLabel: [{
+                    type: i0.Input
+                }], filterMatchMode: [{
+                    type: i0.Input
+                }], tooltip: [{
+                    type: i0.Input
+                }], tooltipPosition: [{
+                    type: i0.Input
+                }], tooltipPositionStyle: [{
+                    type: i0.Input
+                }], tooltipStyleClass: [{
+                    type: i0.Input
+                }], autofocusFilter: [{
+                    type: i0.Input
+                }], display: [{
+                    type: i0.Input
+                }], containerViewChild: [{
+                    type: i0.ViewChild,
+                    args: ['container']
+                }], filterInputChild: [{
+                    type: i0.ViewChild,
+                    args: ['filterInput']
+                }], accessibleViewChild: [{
+                    type: i0.ViewChild,
+                    args: ['in']
+                }], footerFacet: [{
+                    type: i0.ContentChild,
+                    args: [i3.Footer]
+                }], headerFacet: [{
+                    type: i0.ContentChild,
+                    args: [i3.Header]
+                }], templates: [{
+                    type: i0.ContentChildren,
+                    args: [i3.PrimeTemplate]
+                }], onChange: [{
+                    type: i0.Output
+                }], onFilter: [{
+                    type: i0.Output
+                }], onFocus: [{
+                    type: i0.Output
+                }], onBlur: [{
+                    type: i0.Output
+                }], onClick: [{
+                    type: i0.Output
+                }], onPanelShow: [{
+                    type: i0.Output
+                }], onPanelHide: [{
+                    type: i0.Output
+                }], scrollHeight: [{
+                    type: i0.Input
+                }], defaultLabel: [{
+                    type: i0.Input
+                }], placeholder: [{
+                    type: i0.Input
+                }], options: [{
+                    type: i0.Input
+                }], filterValue: [{
+                    type: i0.Input
+                }] } });
     var MultiSelectModule = /** @class */ (function () {
         function MultiSelectModule() {
         }
         return MultiSelectModule;
     }());
-    MultiSelectModule.decorators = [
-        { type: core.NgModule, args: [{
-                    imports: [common.CommonModule, api.SharedModule, scrolling.ScrollingModule, tooltip.TooltipModule, ripple.RippleModule],
-                    exports: [MultiSelect, api.SharedModule, scrolling.ScrollingModule],
-                    declarations: [MultiSelect, MultiSelectItem]
-                },] }
-    ];
+    MultiSelectModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: MultiSelectModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+    MultiSelectModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: MultiSelectModule, declarations: [MultiSelect, MultiSelectItem], imports: [i2.CommonModule, i3.SharedModule, i4.ScrollingModule, i5.TooltipModule, i1.RippleModule], exports: [MultiSelect, i3.SharedModule, i4.ScrollingModule] });
+    MultiSelectModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: MultiSelectModule, imports: [[i2.CommonModule, i3.SharedModule, i4.ScrollingModule, i5.TooltipModule, i1.RippleModule], i3.SharedModule, i4.ScrollingModule] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: MultiSelectModule, decorators: [{
+                type: i0.NgModule,
+                args: [{
+                        imports: [i2.CommonModule, i3.SharedModule, i4.ScrollingModule, i5.TooltipModule, i1.RippleModule],
+                        exports: [MultiSelect, i3.SharedModule, i4.ScrollingModule],
+                        declarations: [MultiSelect, MultiSelectItem]
+                    }]
+            }] });
 
     /**
      * Generated bundle index. Do not edit.