primeng 11.4.4 → 12.0.1

package/fesm2015/primeng-messages.js.map

@@ -1 +1 @@
-{"version":3,"file":"primeng-messages.js","sources":["../../src/app/components/messages/messages.ts","../../src/app/components/messages/primeng-messages.ts"],"sourcesContent":["import {NgModule,Component,OnDestroy,Input,Output,EventEmitter,AfterContentInit,Optional,ElementRef,ChangeDetectionStrategy,ContentChildren,QueryList,TemplateRef, ViewEncapsulation, ChangeDetectorRef} from '@angular/core';\nimport {CommonModule} from '@angular/common';\nimport {trigger,state,style,transition,animate} from '@angular/animations';\nimport {Message,PrimeTemplate,MessageService} from 'primeng/api';\nimport {Subscription} from 'rxjs';\nimport {RippleModule} from 'primeng/ripple';\n\n@Component({\n    selector: 'p-messages',\n    template: `\n        <div class=\"p-messages p-component\" role=\"alert\" [ngStyle]=\"style\" [class]=\"styleClass\">\n            <ng-container *ngIf=\"!contentTemplate; else staticMessage\">\n                <div *ngFor=\"let msg of value; let i=index\" [ngClass]=\"'p-message p-message-' + msg.severity\" role=\"alert\" \n                    [@messageAnimation]=\"{value: 'visible', params: {showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions}}\">\n                    <div class=\"p-message-wrapper\">\n                       <span [class]=\"'p-message-icon pi' + (msg.icon ? ' ' + msg.icon : '')\" [ngClass]=\"{'pi-info-circle': msg.severity === 'info', \n                            'pi-check': msg.severity === 'success',\n                            'pi-exclamation-triangle': msg.severity === 'warn',\n                            'pi-times-circle': msg.severity === 'error'}\"></span>\n                        <ng-container *ngIf=\"!escape; else escapeOut\">\n                            <span *ngIf=\"msg.summary\" class=\"p-message-summary\" [innerHTML]=\"msg.summary\"></span>\n                            <span *ngIf=\"msg.detail\" class=\"p-message-detail\" [innerHTML]=\"msg.detail\"></span>\n                        </ng-container>\n                        <ng-template #escapeOut>\n                            <span *ngIf=\"msg.summary\" class=\"p-message-summary\">{{msg.summary}}</span>\n                            <span *ngIf=\"msg.detail\" class=\"p-message-detail\">{{msg.detail}}</span>\n                        </ng-template>\n                        <button class=\"p-message-close p-link\" (click)=\"removeMessage(i)\" *ngIf=\"closable\" type=\"button\" pRipple>\n                            <i class=\"p-message-close-icon pi pi-times\"></i>\n                        </button>\n                    </div>\n                </div>\n            </ng-container>\n            <ng-template #staticMessage>\n                <div [ngClass]=\"'p-message p-message-' + severity\" role=\"alert\">\n                    <div class=\"p-message-wrapper\">\n                        <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n                    </div>\n                </div>\n            </ng-template>\n            </div>\n    `,\n    animations: [\n        trigger('messageAnimation', [\n            transition(':enter', [\n                style({opacity: 0, transform: 'translateY(-25%)'}),\n                animate('{{showTransitionParams}}')\n            ]),\n            transition(':leave', [\n                animate('{{hideTransitionParams}}', style({ height: 0, marginTop: 0, marginBottom: 0, marginLeft: 0, marginRight: 0, overflow: 'hidden', opacity: 0 }))\n            ])\n        ])\n    ],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n    styleUrls: ['./messages.css']\n})\nexport class Messages implements AfterContentInit, OnDestroy {\n\n    @Input() value: Message[];\n\n    @Input() closable: boolean = true;\n\n    @Input() style: any;\n\n    @Input() styleClass: string;\n\n    @Input() enableService: boolean = true;\n\n    @Input() key: string;\n\n    @Input() escape: boolean = true;\n\n    @Input() severity: string;\n\n    @Input() showTransitionOptions: string = '300ms ease-out';\n\n    @Input() hideTransitionOptions: string = '200ms cubic-bezier(0.86, 0, 0.07, 1)';\n\n    @ContentChildren(PrimeTemplate) templates: QueryList<any>;\n\n    @Output() valueChange: EventEmitter<Message[]> = new EventEmitter<Message[]>();\n\n    messageSubscription: Subscription;\n\n    clearSubscription: Subscription;\n\n    contentTemplate: TemplateRef<any>;\n\n    constructor(@Optional() public messageService: MessageService, public el: ElementRef, public cd: ChangeDetectorRef) {}\n\n    ngAfterContentInit() {\n        this.templates.forEach((item) => {\n            switch(item.getType()) {\n                case 'content':\n                    this.contentTemplate = item.template;\n                break;\n\n                default:\n                    this.contentTemplate = item.template;\n                break;\n            }\n        });\n\n        if (this.messageService && this.enableService && !this.contentTemplate) {\n            this.messageSubscription = this.messageService.messageObserver.subscribe((messages: any) => {\n                if (messages) {\n                    if (messages instanceof Array) {\n                        let filteredMessages = messages.filter(m => this.key === m.key);\n                        this.value = this.value ? [...this.value, ...filteredMessages] : [...filteredMessages];\n                    }\n                    else if (this.key === messages.key) {\n                        this.value = this.value ? [...this.value, ...[messages]] : [messages];\n                    }\n\n                    this.cd.markForCheck();\n                }\n            });\n\n            this.clearSubscription = this.messageService.clearObserver.subscribe(key => {\n                if (key) {\n                    if (this.key === key) {\n                        this.value = null;\n                    }\n                }\n                else {\n                    this.value = null;\n                }\n\n                this.cd.markForCheck();\n            });\n        }\n    }\n\n    hasMessages() {\n        let parentEl = this.el.nativeElement.parentElement;\n        if (parentEl && parentEl.offsetParent) {\n            return this.contentTemplate != null || this.value && this.value.length > 0;\n        }\n\n        return false;\n    }\n\n    clear() {\n        this.value = [];\n        this.valueChange.emit(this.value);\n    }\n\n    removeMessage(i: number) {\n        this.value = this.value.filter((msg, index) => index !== i);\n        this.valueChange.emit(this.value);\n    }\n\n    get icon(): string {\n        const severity = this.severity || (this.hasMessages() ? this.value[0].severity : null);\n\n        if (this.hasMessages()) {\n            switch(severity) {\n                case 'success':\n                    return 'pi-check';\n                break;\n\n                case 'info':\n                    return 'pi-info-circle';\n                break;\n\n                case 'error':\n                    return 'pi-times';\n                break;\n\n                case 'warn':\n                    return 'pi-exclamation-triangle';\n                break;\n\n                default:\n                    return 'pi-info-circle';\n                break;\n            }\n        }\n\n        return null;\n    }\n\n    ngOnDestroy() {\n        if (this.messageSubscription) {\n            this.messageSubscription.unsubscribe();\n        }\n\n        if (this.clearSubscription) {\n            this.clearSubscription.unsubscribe();\n        }\n    }\n}\n\n@NgModule({\n    imports: [CommonModule,RippleModule],\n    exports: [Messages],\n    declarations: [Messages]\n})\nexport class MessagesModule { }\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"primeng-messages.js","sources":["../../src/app/components/messages/messages.ts","../../src/app/components/messages/primeng-messages.ts"],"sourcesContent":["import {NgModule,Component,OnDestroy,Input,Output,EventEmitter,AfterContentInit,Optional,ElementRef,ChangeDetectionStrategy,ContentChildren,QueryList,TemplateRef, ViewEncapsulation, ChangeDetectorRef} from '@angular/core';\nimport {CommonModule} from '@angular/common';\nimport {trigger,state,style,transition,animate} from '@angular/animations';\nimport {Message,PrimeTemplate,MessageService} from 'primeng/api';\nimport {Subscription} from 'rxjs';\nimport {RippleModule} from 'primeng/ripple';\n\n@Component({\n    selector: 'p-messages',\n    template: `\n        <div class=\"p-messages p-component\" role=\"alert\" [ngStyle]=\"style\" [class]=\"styleClass\">\n            <ng-container *ngIf=\"!contentTemplate; else staticMessage\">\n                <div *ngFor=\"let msg of value; let i=index\" [ngClass]=\"'p-message p-message-' + msg.severity\" role=\"alert\" \n                    [@messageAnimation]=\"{value: 'visible', params: {showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions}}\">\n                    <div class=\"p-message-wrapper\">\n                       <span [class]=\"'p-message-icon pi' + (msg.icon ? ' ' + msg.icon : '')\" [ngClass]=\"{'pi-info-circle': msg.severity === 'info', \n                            'pi-check': msg.severity === 'success',\n                            'pi-exclamation-triangle': msg.severity === 'warn',\n                            'pi-times-circle': msg.severity === 'error'}\"></span>\n                        <ng-container *ngIf=\"!escape; else escapeOut\">\n                            <span *ngIf=\"msg.summary\" class=\"p-message-summary\" [innerHTML]=\"msg.summary\"></span>\n                            <span *ngIf=\"msg.detail\" class=\"p-message-detail\" [innerHTML]=\"msg.detail\"></span>\n                        </ng-container>\n                        <ng-template #escapeOut>\n                            <span *ngIf=\"msg.summary\" class=\"p-message-summary\">{{msg.summary}}</span>\n                            <span *ngIf=\"msg.detail\" class=\"p-message-detail\">{{msg.detail}}</span>\n                        </ng-template>\n                        <button class=\"p-message-close p-link\" (click)=\"removeMessage(i)\" *ngIf=\"closable\" type=\"button\" pRipple>\n                            <i class=\"p-message-close-icon pi pi-times\"></i>\n                        </button>\n                    </div>\n                </div>\n            </ng-container>\n            <ng-template #staticMessage>\n                <div [ngClass]=\"'p-message p-message-' + severity\" role=\"alert\">\n                    <div class=\"p-message-wrapper\">\n                        <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n                    </div>\n                </div>\n            </ng-template>\n            </div>\n    `,\n    animations: [\n        trigger('messageAnimation', [\n            transition(':enter', [\n                style({opacity: 0, transform: 'translateY(-25%)'}),\n                animate('{{showTransitionParams}}')\n            ]),\n            transition(':leave', [\n                animate('{{hideTransitionParams}}', style({ height: 0, marginTop: 0, marginBottom: 0, marginLeft: 0, marginRight: 0, overflow: 'hidden', opacity: 0 }))\n            ])\n        ])\n    ],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n    styleUrls: ['./messages.css']\n})\nexport class Messages implements AfterContentInit, OnDestroy {\n\n    @Input() value: Message[];\n\n    @Input() closable: boolean = true;\n\n    @Input() style: any;\n\n    @Input() styleClass: string;\n\n    @Input() enableService: boolean = true;\n\n    @Input() key: string;\n\n    @Input() escape: boolean = true;\n\n    @Input() severity: string;\n\n    @Input() showTransitionOptions: string = '300ms ease-out';\n\n    @Input() hideTransitionOptions: string = '200ms cubic-bezier(0.86, 0, 0.07, 1)';\n\n    @ContentChildren(PrimeTemplate) templates: QueryList<any>;\n\n    @Output() valueChange: EventEmitter<Message[]> = new EventEmitter<Message[]>();\n\n    messageSubscription: Subscription;\n\n    clearSubscription: Subscription;\n\n    contentTemplate: TemplateRef<any>;\n\n    constructor(@Optional() public messageService: MessageService, public el: ElementRef, public cd: ChangeDetectorRef) {}\n\n    ngAfterContentInit() {\n        this.templates.forEach((item) => {\n            switch(item.getType()) {\n                case 'content':\n                    this.contentTemplate = item.template;\n                break;\n\n                default:\n                    this.contentTemplate = item.template;\n                break;\n            }\n        });\n\n        if (this.messageService && this.enableService && !this.contentTemplate) {\n            this.messageSubscription = this.messageService.messageObserver.subscribe((messages: any) => {\n                if (messages) {\n                    if (messages instanceof Array) {\n                        let filteredMessages = messages.filter(m => this.key === m.key);\n                        this.value = this.value ? [...this.value, ...filteredMessages] : [...filteredMessages];\n                    }\n                    else if (this.key === messages.key) {\n                        this.value = this.value ? [...this.value, ...[messages]] : [messages];\n                    }\n\n                    this.cd.markForCheck();\n                }\n            });\n\n            this.clearSubscription = this.messageService.clearObserver.subscribe(key => {\n                if (key) {\n                    if (this.key === key) {\n                        this.value = null;\n                    }\n                }\n                else {\n                    this.value = null;\n                }\n\n                this.cd.markForCheck();\n            });\n        }\n    }\n\n    hasMessages() {\n        let parentEl = this.el.nativeElement.parentElement;\n        if (parentEl && parentEl.offsetParent) {\n            return this.contentTemplate != null || this.value && this.value.length > 0;\n        }\n\n        return false;\n    }\n\n    clear() {\n        this.value = [];\n        this.valueChange.emit(this.value);\n    }\n\n    removeMessage(i: number) {\n        this.value = this.value.filter((msg, index) => index !== i);\n        this.valueChange.emit(this.value);\n    }\n\n    get icon(): string {\n        const severity = this.severity || (this.hasMessages() ? this.value[0].severity : null);\n\n        if (this.hasMessages()) {\n            switch(severity) {\n                case 'success':\n                    return 'pi-check';\n                break;\n\n                case 'info':\n                    return 'pi-info-circle';\n                break;\n\n                case 'error':\n                    return 'pi-times';\n                break;\n\n                case 'warn':\n                    return 'pi-exclamation-triangle';\n                break;\n\n                default:\n                    return 'pi-info-circle';\n                break;\n            }\n        }\n\n        return null;\n    }\n\n    ngOnDestroy() {\n        if (this.messageSubscription) {\n            this.messageSubscription.unsubscribe();\n        }\n\n        if (this.clearSubscription) {\n            this.clearSubscription.unsubscribe();\n        }\n    }\n}\n\n@NgModule({\n    imports: [CommonModule,RippleModule],\n    exports: [Messages],\n    declarations: [Messages]\n})\nexport class MessagesModule { }\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}

package/fesm2015/primeng-multiselect.js

@@ -1,12 +1,18 @@
-import { forwardRef, EventEmitter, Component, ViewEncapsulation, Input, Output, ChangeDetectionStrategy, ElementRef, Renderer2, ChangeDetectorRef, ViewChild, ContentChild, ContentChildren, NgModule } from '@angular/core';
+import * as i0 from '@angular/core';
+import { forwardRef, EventEmitter, Component, ViewEncapsulation, Input, Output, ChangeDetectionStrategy, ViewChild, ContentChild, ContentChildren, NgModule } from '@angular/core';
 import { trigger, transition, style, animate } from '@angular/animations';
+import * as i2 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import { DomHandler, ConnectedOverlayScrollHandler } from 'primeng/dom';
 import { ObjectUtils } from 'primeng/utils';
-import { TranslationKeys, FilterService, PrimeNGConfig, Footer, Header, PrimeTemplate, SharedModule } from 'primeng/api';
+import * as i3 from 'primeng/api';
+import { TranslationKeys, Footer, Header, PrimeTemplate, SharedModule } from 'primeng/api';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import * as i4 from '@angular/cdk/scrolling';
 import { ScrollingModule } from '@angular/cdk/scrolling';
+import * as i5 from 'primeng/tooltip';
 import { TooltipModule } from 'primeng/tooltip';
+import * as i1 from 'primeng/ripple';
 import { RippleModule } from 'primeng/ripple';
 
 const MULTISELECT_VALUE_ACCESSOR = {
@@ -32,10 +38,25 @@ class MultiSelectItem {
         });
     }
 }
-MultiSelectItem.decorators = [
-    { type: Component, args: [{
-                selector: 'p-multiSelectItem',
-                template: `
+MultiSelectItem.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: MultiSelectItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
+MultiSelectItem.ɵcmp = i0.ɵɵ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, template: `
+        <li class="p-multiselect-item" (click)="onOptionClick($event)" (keydown)="onOptionKeydown($event)" [attr.aria-label]="label" 
+            [attr.tabindex]="disabled ? null : '0'" [ngStyle]="{'height': itemSize + 'px'}"
+            [ngClass]="{'p-highlight': selected, 'p-disabled': disabled}" pRipple>
+            <div class="p-checkbox p-component">
+                <div class="p-checkbox-box" [ngClass]="{'p-highlight': selected}">
+                    <span class="p-checkbox-icon" [ngClass]="{'pi pi-check': selected}"></span>
+                </div>
+            </div>
+            <span *ngIf="!template">{{label}}</span>
+            <ng-container *ngTemplateOutlet="template; context: {$implicit: option}"></ng-container>
+        </li>
+    `, isInline: true, directives: [{ type: i1.Ripple, selector: "[pRipple]" }, { type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: MultiSelectItem, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'p-multiSelectItem',
+                    template: `
         <li class="p-multiselect-item" (click)="onOptionClick($event)" (keydown)="onOptionKeydown($event)" [attr.aria-label]="label" 
             [attr.tabindex]="disabled ? null : '0'" [ngStyle]="{'height': itemSize + 'px'}"
             [ngClass]="{'p-highlight': selected, 'p-disabled': disabled}" pRipple>
@@ -48,19 +69,25 @@ MultiSelectItem.decorators = [
             <ng-container *ngTemplateOutlet="template; context: {$implicit: option}"></ng-container>
         </li>
     `,
-                encapsulation: ViewEncapsulation.None
-            },] }
-];
-MultiSelectItem.propDecorators = {
-    option: [{ type: Input }],
-    selected: [{ type: Input }],
-    label: [{ type: Input }],
-    disabled: [{ type: Input }],
-    itemSize: [{ type: Input }],
-    template: [{ type: Input }],
-    onClick: [{ type: Output }],
-    onKeydown: [{ type: Output }]
-};
+                    encapsulation: ViewEncapsulation.None
+                }]
+        }], propDecorators: { option: [{
+                type: Input
+            }], selected: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], itemSize: [{
+                type: Input
+            }], template: [{
+                type: Input
+            }], onClick: [{
+                type: Output
+            }], onKeydown: [{
+                type: Output
+            }] } });
 class MultiSelect {
     constructor(el, renderer, cd, filterService, config) {
         this.el = el;
@@ -728,10 +755,124 @@ class MultiSelect {
         this.onOverlayHide();
     }
 }
-MultiSelect.decorators = [
-    { type: Component, args: [{
-                selector: 'p-multiSelect',
-                template: `
+MultiSelect.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: MultiSelect, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i3.FilterService }, { token: i3.PrimeNGConfig }], target: i0.ɵɵFactoryTarget.Component });
+MultiSelect.ɵcmp = i0.ɵɵ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: Footer, descendants: true }, { propertyName: "headerFacet", first: true, predicate: Header, descendants: true }, { propertyName: "templates", predicate: 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, template: `
+        <div #container [ngClass]="{'p-multiselect p-component':true,
+            'p-multiselect-open':overlayVisible,
+            'p-multiselect-chip': display === 'chip',
+            'p-focus':focus,
+            'p-disabled': disabled}" [ngStyle]="style" [class]="styleClass"
+            (click)="onMouseclick($event,in)">
+            <div class="p-hidden-accessible">
+                <input #in type="text" readonly="readonly" [attr.id]="inputId" [attr.name]="name" (focus)="onInputFocus($event)" (blur)="onInputBlur($event)"
+                       [disabled]="disabled" [attr.tabindex]="tabindex" (keydown)="onKeydown($event)" aria-haspopup="listbox" [attr.aria-expanded]="overlayVisible"
+                       [attr.aria-labelledby]="ariaLabelledBy" role="listbox">
+            </div>
+            <div class="p-multiselect-label-container" [pTooltip]="tooltip" [tooltipPosition]="tooltipPosition" [positionStyle]="tooltipPositionStyle" [tooltipStyleClass]="tooltipStyleClass">
+                <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))}">
+                    <ng-container *ngIf="!selectedItemsTemplate">
+                        <ng-container *ngIf="display === 'comma'">{{valuesAsString || 'empty'}}</ng-container>
+                        <ng-container *ngIf="display === 'chip'">
+                            <div #token *ngFor="let item of value; let i = index;" class="p-multiselect-token">
+                                <span class="p-multiselect-token-label">{{findLabelByValue(item)}}</span>
+                                <span *ngIf="!disabled" class="p-multiselect-token-icon pi pi-times-circle" (click)="removeChip(item, $event)"></span>
+                            </div>
+                            <ng-container *ngIf="!value || value.length === 0">{{placeholder || defaultLabel || 'empty'}}</ng-container>
+                        </ng-container>
+                    </ng-container>
+                    <ng-container *ngTemplateOutlet="selectedItemsTemplate; context: {$implicit: value}"></ng-container>
+                </div>
+            </div>
+            <div [ngClass]="{'p-multiselect-trigger':true}">
+                <span class="p-multiselect-trigger-icon" [ngClass]="dropdownIcon"></span>
+            </div>
+            <div *ngIf="overlayVisible" [ngClass]="['p-multiselect-panel p-component']" [@overlayAnimation]="{value: 'visible', params: {showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions}}" (@overlayAnimation.start)="onOverlayAnimationStart($event)"
+                [ngStyle]="panelStyle" [class]="panelStyleClass" (keydown)="onKeydown($event)">
+                <div class="p-multiselect-header" *ngIf="showHeader">
+                    <ng-content select="p-header"></ng-content>
+                    <ng-container *ngTemplateOutlet="headerTemplate"></ng-container>
+                    <div class="p-checkbox p-component" *ngIf="showToggleAll && !selectionLimit" [ngClass]="{'p-checkbox-disabled': disabled || toggleAllDisabled}">
+                        <div class="p-hidden-accessible">
+                            <input type="checkbox" readonly="readonly" [checked]="allChecked" (focus)="onHeaderCheckboxFocus()" (blur)="onHeaderCheckboxBlur()" (keydown.space)="toggleAll($event)" [attr.disabled]="disabled || toggleAllDisabled">
+                        </div>
+                        <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)">
+                            <span class="p-checkbox-icon" [ngClass]="{'pi pi-check':allChecked}"></span>
+                        </div>
+                    </div>
+                    <div class="p-multiselect-filter-container" *ngIf="filter">
+                        <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">
+                        <span class="p-multiselect-filter-icon pi pi-search"></span>
+                    </div>
+                    <button class="p-multiselect-close p-link" type="button" (click)="close($event)" pRipple>
+                        <span class="p-multiselect-close-icon pi pi-times"></span>
+                    </button>
+                </div>
+                <div class="p-multiselect-items-wrapper" [style.max-height]="virtualScroll ? 'auto' : (scrollHeight||'auto')">
+                    <ul class="p-multiselect-items p-component" [ngClass]="{'p-multiselect-virtualscroll': virtualScroll}" role="listbox" aria-multiselectable="true">
+                        <ng-container *ngIf="group">
+                            <ng-template ngFor let-optgroup [ngForOf]="optionsToRender">
+                                <li class="p-multiselect-item-group">
+                                    <span *ngIf="!groupTemplate">{{getOptionGroupLabel(optgroup)||'empty'}}</span>
+                                    <ng-container *ngTemplateOutlet="groupTemplate; context: {$implicit: optgroup}"></ng-container>
+                                </li>
+                                <ng-container *ngTemplateOutlet="itemslist; context: {$implicit: getOptionGroupChildren(optgroup)}"></ng-container>
+                            </ng-template>
+                        </ng-container>
+                        <ng-container *ngIf="!group">
+                            <ng-container *ngTemplateOutlet="itemslist; context: {$implicit: optionsToRender}"></ng-container>
+                        </ng-container>
+                        <ng-template #itemslist let-optionsToDisplay let-selectedOption="selectedOption">
+                            <ng-container *ngIf="!virtualScroll; else virtualScrollList">
+                                <ng-template ngFor let-option let-i="index" [ngForOf]="optionsToDisplay">
+                                    <p-multiSelectItem [option]="option" [selected]="isSelected(option)" [label]="getOptionLabel(option)" [disabled]="isOptionDisabled(option)" (onClick)="onOptionClick($event)" (onKeydown)="onOptionKeydown($event)"
+                                            [template]="itemTemplate"></p-multiSelectItem>
+                                </ng-template>
+                            </ng-container>
+                            <ng-template #virtualScrollList>
+                                <cdk-virtual-scroll-viewport #viewport [ngStyle]="{'height': scrollHeight}" [itemSize]="itemSize" *ngIf="virtualScroll && !emptyOptions">
+                                    <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">
+                                        <p-multiSelectItem [option]="option" [selected]="isSelected(option)" [label]="getOptionLabel(option)" [disabled]="isOptionDisabled(option)" (onClick)="onOptionClick($event)" (onKeydown)="onOptionKeydown($event)"
+                                            [template]="itemTemplate" [itemSize]="itemSize"></p-multiSelectItem>
+                                    </ng-container>
+                                </cdk-virtual-scroll-viewport>
+                            </ng-template>
+                            <li *ngIf="hasFilter() && emptyOptions" class="p-multiselect-empty-message">
+                                <ng-container *ngIf="!emptyFilterTemplate && !emptyTemplate; else emptyFilter">
+                                    {{emptyFilterMessageLabel}}
+                                </ng-container>
+                                <ng-container #emptyFilter *ngTemplateOutlet="emptyFilterTemplate || emptyTemplate"></ng-container>
+                            </li>
+                            <li *ngIf="!hasFilter() && emptyOptions" class="p-multiselect-empty-message">
+                                <ng-container *ngIf="!emptyTemplate; else empty">
+                                    {{emptyMessageLabel}}
+                                </ng-container>
+                                <ng-container #empty *ngTemplateOutlet="emptyTemplate"></ng-container>
+                            </li>
+                        </ng-template>
+                    </ul>
+                </div>
+                <div class="p-multiselect-footer" *ngIf="footerFacet || footerTemplate">
+                    <ng-content select="p-footer"></ng-content>
+                    <ng-container *ngTemplateOutlet="footerTemplate"></ng-container>
+                </div>
+            </div>
+        </div>
+    `, 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.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation"], outputs: ["scrolledIndexChange"] }], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i5.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "tooltipDisabled", "pTooltip"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i1.Ripple, selector: "[pRipple]" }, { type: i4.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { type: i4.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }], animations: [
+        trigger('overlayAnimation', [
+            transition(':enter', [
+                style({ opacity: 0, transform: 'scaleY(0.8)' }),
+                animate('{{showTransitionParams}}')
+            ]),
+            transition(':leave', [
+                animate('{{hideTransitionParams}}', style({ opacity: 0 }))
+            ])
+        ])
+    ], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: MultiSelect, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'p-multiSelect',
+                    template: `
         <div #container [ngClass]="{'p-multiselect p-component':true,
             'p-multiselect-open':overlayVisible,
             'p-multiselect-chip': display === 'chip',
@@ -833,110 +974,176 @@ MultiSelect.decorators = [
             </div>
         </div>
     `,
-                animations: [
-                    trigger('overlayAnimation', [
-                        transition(':enter', [
-                            style({ opacity: 0, transform: 'scaleY(0.8)' }),
-                            animate('{{showTransitionParams}}')
-                        ]),
-                        transition(':leave', [
-                            animate('{{hideTransitionParams}}', style({ opacity: 0 }))
+                    animations: [
+                        trigger('overlayAnimation', [
+                            transition(':enter', [
+                                style({ opacity: 0, transform: 'scaleY(0.8)' }),
+                                animate('{{showTransitionParams}}')
+                            ]),
+                            transition(':leave', [
+                                animate('{{hideTransitionParams}}', style({ opacity: 0 }))
+                            ])
                         ])
-                    ])
-                ],
-                host: {
-                    '[class.p-inputwrapper-filled]': 'filled',
-                    '[class.p-inputwrapper-focus]': 'focus || overlayVisible'
-                },
-                providers: [MULTISELECT_VALUE_ACCESSOR],
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                encapsulation: 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 = () => [
-    { type: ElementRef },
-    { type: Renderer2 },
-    { type: ChangeDetectorRef },
-    { type: FilterService },
-    { type: PrimeNGConfig }
-];
-MultiSelect.propDecorators = {
-    style: [{ type: Input }],
-    styleClass: [{ type: Input }],
-    panelStyle: [{ type: Input }],
-    panelStyleClass: [{ type: Input }],
-    inputId: [{ type: Input }],
-    disabled: [{ type: Input }],
-    readonly: [{ type: Input }],
-    group: [{ type: Input }],
-    filter: [{ type: Input }],
-    filterPlaceHolder: [{ type: Input }],
-    filterLocale: [{ type: Input }],
-    overlayVisible: [{ type: Input }],
-    tabindex: [{ type: Input }],
-    appendTo: [{ type: Input }],
-    dataKey: [{ type: Input }],
-    name: [{ type: Input }],
-    ariaLabelledBy: [{ type: Input }],
-    displaySelectedLabel: [{ type: Input }],
-    maxSelectedLabels: [{ type: Input }],
-    selectionLimit: [{ type: Input }],
-    selectedItemsLabel: [{ type: Input }],
-    showToggleAll: [{ type: Input }],
-    emptyFilterMessage: [{ type: Input }],
-    emptyMessage: [{ type: Input }],
-    resetFilterOnHide: [{ type: Input }],
-    dropdownIcon: [{ type: Input }],
-    optionLabel: [{ type: Input }],
-    optionValue: [{ type: Input }],
-    optionDisabled: [{ type: Input }],
-    optionGroupLabel: [{ type: Input }],
-    optionGroupChildren: [{ type: Input }],
-    showHeader: [{ type: Input }],
-    autoZIndex: [{ type: Input }],
-    baseZIndex: [{ type: Input }],
-    filterBy: [{ type: Input }],
-    virtualScroll: [{ type: Input }],
-    itemSize: [{ type: Input }],
-    showTransitionOptions: [{ type: Input }],
-    hideTransitionOptions: [{ type: Input }],
-    ariaFilterLabel: [{ type: Input }],
-    filterMatchMode: [{ type: Input }],
-    tooltip: [{ type: Input }],
-    tooltipPosition: [{ type: Input }],
-    tooltipPositionStyle: [{ type: Input }],
-    tooltipStyleClass: [{ type: Input }],
-    autofocusFilter: [{ type: Input }],
-    display: [{ type: Input }],
-    containerViewChild: [{ type: ViewChild, args: ['container',] }],
-    filterInputChild: [{ type: ViewChild, args: ['filterInput',] }],
-    accessibleViewChild: [{ type: ViewChild, args: ['in',] }],
-    footerFacet: [{ type: ContentChild, args: [Footer,] }],
-    headerFacet: [{ type: ContentChild, args: [Header,] }],
-    templates: [{ type: ContentChildren, args: [PrimeTemplate,] }],
-    onChange: [{ type: Output }],
-    onFilter: [{ type: Output }],
-    onFocus: [{ type: Output }],
-    onBlur: [{ type: Output }],
-    onClick: [{ type: Output }],
-    onPanelShow: [{ type: Output }],
-    onPanelHide: [{ type: Output }],
-    scrollHeight: [{ type: Input }],
-    defaultLabel: [{ type: Input }],
-    placeholder: [{ type: Input }],
-    options: [{ type: Input }],
-    filterValue: [{ type: Input }]
-};
+                    ],
+                    host: {
+                        '[class.p-inputwrapper-filled]': 'filled',
+                        '[class.p-inputwrapper-focus]': 'focus || overlayVisible'
+                    },
+                    providers: [MULTISELECT_VALUE_ACCESSOR],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    styleUrls: ['./multiselect.css']
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: i3.FilterService }, { type: i3.PrimeNGConfig }]; }, propDecorators: { style: [{
+                type: Input
+            }], styleClass: [{
+                type: Input
+            }], panelStyle: [{
+                type: Input
+            }], panelStyleClass: [{
+                type: Input
+            }], inputId: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }], group: [{
+                type: Input
+            }], filter: [{
+                type: Input
+            }], filterPlaceHolder: [{
+                type: Input
+            }], filterLocale: [{
+                type: Input
+            }], overlayVisible: [{
+                type: Input
+            }], tabindex: [{
+                type: Input
+            }], appendTo: [{
+                type: Input
+            }], dataKey: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }], ariaLabelledBy: [{
+                type: Input
+            }], displaySelectedLabel: [{
+                type: Input
+            }], maxSelectedLabels: [{
+                type: Input
+            }], selectionLimit: [{
+                type: Input
+            }], selectedItemsLabel: [{
+                type: Input
+            }], showToggleAll: [{
+                type: Input
+            }], emptyFilterMessage: [{
+                type: Input
+            }], emptyMessage: [{
+                type: Input
+            }], resetFilterOnHide: [{
+                type: Input
+            }], dropdownIcon: [{
+                type: Input
+            }], optionLabel: [{
+                type: Input
+            }], optionValue: [{
+                type: Input
+            }], optionDisabled: [{
+                type: Input
+            }], optionGroupLabel: [{
+                type: Input
+            }], optionGroupChildren: [{
+                type: Input
+            }], showHeader: [{
+                type: Input
+            }], autoZIndex: [{
+                type: Input
+            }], baseZIndex: [{
+                type: Input
+            }], filterBy: [{
+                type: Input
+            }], virtualScroll: [{
+                type: Input
+            }], itemSize: [{
+                type: Input
+            }], showTransitionOptions: [{
+                type: Input
+            }], hideTransitionOptions: [{
+                type: Input
+            }], ariaFilterLabel: [{
+                type: Input
+            }], filterMatchMode: [{
+                type: Input
+            }], tooltip: [{
+                type: Input
+            }], tooltipPosition: [{
+                type: Input
+            }], tooltipPositionStyle: [{
+                type: Input
+            }], tooltipStyleClass: [{
+                type: Input
+            }], autofocusFilter: [{
+                type: Input
+            }], display: [{
+                type: Input
+            }], containerViewChild: [{
+                type: ViewChild,
+                args: ['container']
+            }], filterInputChild: [{
+                type: ViewChild,
+                args: ['filterInput']
+            }], accessibleViewChild: [{
+                type: ViewChild,
+                args: ['in']
+            }], footerFacet: [{
+                type: ContentChild,
+                args: [Footer]
+            }], headerFacet: [{
+                type: ContentChild,
+                args: [Header]
+            }], templates: [{
+                type: ContentChildren,
+                args: [PrimeTemplate]
+            }], onChange: [{
+                type: Output
+            }], onFilter: [{
+                type: Output
+            }], onFocus: [{
+                type: Output
+            }], onBlur: [{
+                type: Output
+            }], onClick: [{
+                type: Output
+            }], onPanelShow: [{
+                type: Output
+            }], onPanelHide: [{
+                type: Output
+            }], scrollHeight: [{
+                type: Input
+            }], defaultLabel: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], options: [{
+                type: Input
+            }], filterValue: [{
+                type: Input
+            }] } });
 class MultiSelectModule {
 }
-MultiSelectModule.decorators = [
-    { type: NgModule, args: [{
-                imports: [CommonModule, SharedModule, ScrollingModule, TooltipModule, RippleModule],
-                exports: [MultiSelect, SharedModule, ScrollingModule],
-                declarations: [MultiSelect, MultiSelectItem]
-            },] }
-];
+MultiSelectModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: MultiSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+MultiSelectModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: MultiSelectModule, declarations: [MultiSelect, MultiSelectItem], imports: [CommonModule, SharedModule, ScrollingModule, TooltipModule, RippleModule], exports: [MultiSelect, SharedModule, ScrollingModule] });
+MultiSelectModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: MultiSelectModule, imports: [[CommonModule, SharedModule, ScrollingModule, TooltipModule, RippleModule], SharedModule, ScrollingModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: MultiSelectModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule, SharedModule, ScrollingModule, TooltipModule, RippleModule],
+                    exports: [MultiSelect, SharedModule, ScrollingModule],
+                    declarations: [MultiSelect, MultiSelectItem]
+                }]
+        }] });
 
 /**
  * Generated bundle index. Do not edit.