primeng 16.7.2 → 16.9.0

package/fesm2022/primeng-messages.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"primeng-messages.mjs","sources":["../../src/app/components/messages/messages.ts","../../src/app/components/messages/primeng-messages.ts"],"sourcesContent":["import { animate, style, transition, trigger } from '@angular/animations';\nimport { CommonModule } from '@angular/common';\nimport { AfterContentInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChildren, ElementRef, EventEmitter, Input, NgModule, OnDestroy, Optional, Output, QueryList, TemplateRef, ViewEncapsulation } from '@angular/core';\nimport { Message, MessageService, PrimeTemplate } from 'primeng/api';\nimport { CheckIcon } from 'primeng/icons/check';\nimport { ExclamationTriangleIcon } from 'primeng/icons/exclamationtriangle';\nimport { InfoCircleIcon } from 'primeng/icons/infocircle';\nimport { TimesIcon } from 'primeng/icons/times';\nimport { TimesCircleIcon } from 'primeng/icons/timescircle';\nimport { RippleModule } from 'primeng/ripple';\nimport { Subscription, timer } from 'rxjs';\n/**\n * Messages is used to display alerts inline.\n * @group Components\n */\n@Component({\n    selector: 'p-messages',\n    template: `\n        <div class=\"p-messages p-component\" role=\"alert\" [ngStyle]=\"style\" [class]=\"styleClass\" [attr.aria-atomic]=\"true\" [attr.aria-live]=\"'assertive'\" [attr.data-pc-name]=\"'message'\">\n            <ng-container *ngIf=\"!contentTemplate; else staticMessage\">\n                <div\n                    *ngFor=\"let msg of messages; let i = index\"\n                    [class]=\"'p-message p-message-' + msg.severity\"\n                    role=\"alert\"\n                    [@messageAnimation]=\"{ value: 'visible', params: { showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions } }\"\n                >\n                    <div class=\"p-message-wrapper\" [attr.data-pc-section]=\"'wrapper'\">\n                        <span *ngIf=\"msg.icon\" [class]=\"'p-message-icon pi ' + msg.icon\" [attr.data-pc-section]=\"'icon'\"> </span>\n                        <span class=\"p-message-icon\" *ngIf=\"!msg.icon\">\n                            <ng-container>\n                                <CheckIcon *ngIf=\"msg.severity === 'success'\" [attr.data-pc-section]=\"'icon'\" />\n                                <InfoCircleIcon *ngIf=\"msg.severity === 'info'\" [attr.data-pc-section]=\"'icon'\" />\n                                <TimesCircleIcon *ngIf=\"msg.severity === 'error'\" [attr.data-pc-section]=\"'icon'\" />\n                                <ExclamationTriangleIcon *ngIf=\"msg.severity === 'warn'\" [attr.data-pc-section]=\"'icon'\" />\n                            </ng-container>\n                        </span>\n                        <ng-container *ngIf=\"!escape; else escapeOut\">\n                            <span *ngIf=\"msg.summary\" class=\"p-message-summary\" [innerHTML]=\"msg.summary\" [attr.data-pc-section]=\"'summary'\"></span>\n                            <span *ngIf=\"msg.detail\" class=\"p-message-detail\" [innerHTML]=\"msg.detail\" [attr.data-pc-section]=\"'detail'\"></span>\n                        </ng-container>\n                        <ng-template #escapeOut>\n                            <span *ngIf=\"msg.summary\" class=\"p-message-summary\" [attr.data-pc-section]=\"'summary'\">{{ msg.summary }}</span>\n                            <span *ngIf=\"msg.detail\" class=\"p-message-detail\" [attr.data-pc-section]=\"'detail'\">{{ msg.detail }}</span>\n                        </ng-template>\n                        <button class=\"p-message-close p-link\" (click)=\"removeMessage(i)\" *ngIf=\"closable\" type=\"button\" pRipple [attr.aria-label]=\"'Close'\" [attr.data-pc-section]=\"'closebutton'\">\n                            <TimesIcon [styleClass]=\"'p-message-close-icon'\" [attr.data-pc-section]=\"'closeicon'\" />\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', [style({ opacity: 0, transform: 'translateY(-25%)' }), animate('{{showTransitionParams}}')]),\n            transition(':leave', [animate('{{hideTransitionParams}}', style({ height: 0, marginTop: 0, marginBottom: 0, marginLeft: 0, marginRight: 0, opacity: 0 }))])\n        ])\n    ],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n    styleUrls: ['./messages.css'],\n    host: {\n        class: 'p-element'\n    }\n})\nexport class Messages implements AfterContentInit, OnDestroy {\n    /**\n     * An array of messages to display.\n     * @group Props\n     */\n    @Input() set value(messages: Message[]) {\n        this.messages = messages;\n        this.startMessageLifes(this.messages);\n    }\n    /**\n     * Defines if message box can be closed by the click icon.\n     * @group Props\n     */\n    @Input() closable: boolean = true;\n    /**\n     * Inline style of the component.\n     * @group Props\n     */\n    @Input() style: { [klass: string]: any } | null | undefined;\n    /**\n     * Style class of the component.\n     * @group Props\n     */\n    @Input() styleClass: string | undefined;\n    /**\n     * Whether displaying services messages are enabled.\n     * @group Props\n     */\n    @Input() enableService: boolean = true;\n    /**\n     * Id to match the key of the message to enable scoping in service based messaging.\n     * @group Props\n     */\n    @Input() key: string | undefined;\n    /**\n     * Whether displaying messages would be escaped or not.\n     * @group Props\n     */\n    @Input() escape: boolean = true;\n    /**\n     * Severity level of the message.\n     * @group Props\n     */\n    @Input() severity: string | undefined;\n    /**\n     * Transition options of the show animation.\n     * @group Props\n     */\n    @Input() showTransitionOptions: string = '300ms ease-out';\n    /**\n     * Transition options of the hide animation.\n     * @group Props\n     */\n    @Input() hideTransitionOptions: string = '200ms cubic-bezier(0.86, 0, 0.07, 1)';\n    /**\n     * This function is executed when the value changes.\n     * @param {Message[]} value - messages value.\n     * @group Emits\n     */\n    @Output() valueChange: EventEmitter<Message[]> = new EventEmitter<Message[]>();\n\n    @ContentChildren(PrimeTemplate) templates: QueryList<PrimeTemplate> | undefined;\n\n    messages: Message[] | null | undefined;\n\n    messageSubscription: Subscription | undefined;\n\n    clearSubscription: Subscription | undefined;\n\n    timerSubscriptions: Subscription[] = [];\n\n    contentTemplate: TemplateRef<any> | undefined;\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: Message | Message[]) => {\n                if (messages) {\n                    if (!Array.isArray(messages)) {\n                        messages = [messages];\n                    }\n\n                    const filteredMessages = messages.filter((m) => this.key === m.key);\n                    this.messages = this.messages ? [...this.messages, ...filteredMessages] : [...filteredMessages];\n                    this.startMessageLifes(filteredMessages);\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.messages = null;\n                    }\n                } else {\n                    this.messages = 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.messages && this.messages.length > 0);\n        }\n\n        return false;\n    }\n\n    clear() {\n        this.messages = [];\n        this.valueChange.emit(this.messages);\n    }\n\n    removeMessage(i: number) {\n        this.messages = this.messages?.filter((msg, index) => index !== i);\n        this.valueChange.emit(this.messages);\n    }\n\n    get icon(): string | null {\n        const severity = this.severity || (this.hasMessages() ? this.messages![0].severity : null);\n\n        if (this.hasMessages()) {\n            switch (severity) {\n                case 'success':\n                    return 'pi-check';\n\n                case 'info':\n                    return 'pi-info-circle';\n\n                case 'error':\n                    return 'pi-times';\n\n                case 'warn':\n                    return 'pi-exclamation-triangle';\n\n                default:\n                    return 'pi-info-circle';\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        this.timerSubscriptions?.forEach((subscription) => subscription.unsubscribe());\n    }\n\n    private startMessageLifes(messages: Message[]): void {\n        messages?.forEach((message) => message.life && this.startMessageLife(message));\n    }\n\n    private startMessageLife(message: Message): void {\n        const timerSubsctiption = timer(message.life!).subscribe(() => {\n            this.messages = this.messages?.filter((msgEl) => msgEl !== message);\n            this.timerSubscriptions = this.timerSubscriptions?.filter((timerEl) => timerEl !== timerSubsctiption);\n            this.valueChange.emit(this.messages);\n            this.cd.markForCheck();\n        });\n        this.timerSubscriptions.push(timerSubsctiption);\n    }\n}\n\n@NgModule({\n    imports: [CommonModule, RippleModule, CheckIcon, InfoCircleIcon, TimesCircleIcon, ExclamationTriangleIcon, TimesIcon],\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.mjs","sources":["../../src/app/components/messages/messages.ts","../../src/app/components/messages/primeng-messages.ts"],"sourcesContent":["import { animate, style, transition, trigger } from '@angular/animations';\nimport { CommonModule } from '@angular/common';\nimport { AfterContentInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChildren, ElementRef, EventEmitter, Input, NgModule, OnDestroy, Optional, Output, QueryList, TemplateRef, ViewEncapsulation } from '@angular/core';\nimport { Message, MessageService, PrimeTemplate } from 'primeng/api';\nimport { CheckIcon } from 'primeng/icons/check';\nimport { ExclamationTriangleIcon } from 'primeng/icons/exclamationtriangle';\nimport { InfoCircleIcon } from 'primeng/icons/infocircle';\nimport { TimesIcon } from 'primeng/icons/times';\nimport { TimesCircleIcon } from 'primeng/icons/timescircle';\nimport { RippleModule } from 'primeng/ripple';\nimport { Subscription, timer } from 'rxjs';\n/**\n * Messages is used to display alerts inline.\n * @group Components\n */\n@Component({\n    selector: 'p-messages',\n    template: `\n        <div class=\"p-messages p-component\" role=\"alert\" [ngStyle]=\"style\" [class]=\"styleClass\" [attr.aria-atomic]=\"true\" [attr.aria-live]=\"'assertive'\" [attr.data-pc-name]=\"'message'\">\n            <ng-container *ngIf=\"!contentTemplate; else staticMessage\">\n                <div\n                    *ngFor=\"let msg of messages; let i = index\"\n                    [class]=\"'p-message p-message-' + msg.severity\"\n                    role=\"alert\"\n                    [@messageAnimation]=\"{ value: 'visible', params: { showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions } }\"\n                >\n                    <div class=\"p-message-wrapper\" [attr.data-pc-section]=\"'wrapper'\">\n                        <span *ngIf=\"msg.icon\" [class]=\"'p-message-icon pi ' + msg.icon\" [attr.data-pc-section]=\"'icon'\"> </span>\n                        <span class=\"p-message-icon\" *ngIf=\"!msg.icon\">\n                            <ng-container>\n                                <CheckIcon *ngIf=\"msg.severity === 'success'\" [attr.data-pc-section]=\"'icon'\" />\n                                <InfoCircleIcon *ngIf=\"msg.severity === 'info'\" [attr.data-pc-section]=\"'icon'\" />\n                                <TimesCircleIcon *ngIf=\"msg.severity === 'error'\" [attr.data-pc-section]=\"'icon'\" />\n                                <ExclamationTriangleIcon *ngIf=\"msg.severity === 'warn'\" [attr.data-pc-section]=\"'icon'\" />\n                            </ng-container>\n                        </span>\n                        <ng-container *ngIf=\"!escape; else escapeOut\">\n                            <span *ngIf=\"msg.summary\" class=\"p-message-summary\" [innerHTML]=\"msg.summary\" [attr.data-pc-section]=\"'summary'\"></span>\n                            <span *ngIf=\"msg.detail\" class=\"p-message-detail\" [innerHTML]=\"msg.detail\" [attr.data-pc-section]=\"'detail'\"></span>\n                        </ng-container>\n                        <ng-template #escapeOut>\n                            <span *ngIf=\"msg.summary\" class=\"p-message-summary\" [attr.data-pc-section]=\"'summary'\">{{ msg.summary }}</span>\n                            <span *ngIf=\"msg.detail\" class=\"p-message-detail\" [attr.data-pc-section]=\"'detail'\">{{ msg.detail }}</span>\n                        </ng-template>\n                        <button class=\"p-message-close p-link\" (click)=\"removeMessage(i)\" *ngIf=\"closable\" type=\"button\" pRipple [attr.aria-label]=\"'Close'\" [attr.data-pc-section]=\"'closebutton'\">\n                            <TimesIcon [styleClass]=\"'p-message-close-icon'\" [attr.data-pc-section]=\"'closeicon'\" />\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', [style({ opacity: 0, transform: 'translateY(-25%)' }), animate('{{showTransitionParams}}')]),\n            transition(':leave', [animate('{{hideTransitionParams}}', style({ height: 0, marginTop: 0, marginBottom: 0, marginLeft: 0, marginRight: 0, opacity: 0 }))])\n        ])\n    ],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n    styleUrls: ['./messages.css'],\n    host: {\n        class: 'p-element'\n    }\n})\nexport class Messages implements AfterContentInit, OnDestroy {\n    /**\n     * An array of messages to display.\n     * @group Props\n     */\n    @Input() set value(messages: Message[]) {\n        this.messages = messages;\n        this.startMessageLifes(this.messages);\n    }\n    /**\n     * Defines if message box can be closed by the click icon.\n     * @group Props\n     */\n    @Input() closable: boolean = true;\n    /**\n     * Inline style of the component.\n     * @group Props\n     */\n    @Input() style: { [klass: string]: any } | null | undefined;\n    /**\n     * Style class of the component.\n     * @group Props\n     */\n    @Input() styleClass: string | undefined;\n    /**\n     * Whether displaying services messages are enabled.\n     * @group Props\n     */\n    @Input() enableService: boolean = true;\n    /**\n     * Id to match the key of the message to enable scoping in service based messaging.\n     * @group Props\n     */\n    @Input() key: string | undefined;\n    /**\n     * Whether displaying messages would be escaped or not.\n     * @group Props\n     */\n    @Input() escape: boolean = true;\n    /**\n     * Severity level of the message.\n     * @group Props\n     */\n    @Input() severity: string | undefined;\n    /**\n     * Transition options of the show animation.\n     * @group Props\n     */\n    @Input() showTransitionOptions: string = '300ms ease-out';\n    /**\n     * Transition options of the hide animation.\n     * @group Props\n     */\n    @Input() hideTransitionOptions: string = '200ms cubic-bezier(0.86, 0, 0.07, 1)';\n    /**\n     * This function is executed when the value changes.\n     * @param {Message[]} value - messages value.\n     * @group Emits\n     */\n    @Output() valueChange: EventEmitter<Message[]> = new EventEmitter<Message[]>();\n\n    @ContentChildren(PrimeTemplate) templates: QueryList<PrimeTemplate> | undefined;\n\n    messages: Message[] | null | undefined;\n\n    messageSubscription: Subscription | undefined;\n\n    clearSubscription: Subscription | undefined;\n\n    timerSubscriptions: Subscription[] = [];\n\n    contentTemplate: TemplateRef<any> | undefined;\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: Message | Message[]) => {\n                if (messages) {\n                    if (!Array.isArray(messages)) {\n                        messages = [messages];\n                    }\n\n                    const filteredMessages = messages.filter((m) => this.key === m.key);\n                    this.messages = this.messages ? [...this.messages, ...filteredMessages] : [...filteredMessages];\n                    this.startMessageLifes(filteredMessages);\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.messages = null;\n                    }\n                } else {\n                    this.messages = 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.messages && this.messages.length > 0);\n        }\n\n        return false;\n    }\n\n    clear() {\n        this.messages = [];\n        this.valueChange.emit(this.messages);\n    }\n\n    removeMessage(i: number) {\n        this.messages = this.messages?.filter((msg, index) => index !== i);\n        this.valueChange.emit(this.messages);\n    }\n\n    get icon(): string | null {\n        const severity = this.severity || (this.hasMessages() ? this.messages![0].severity : null);\n\n        if (this.hasMessages()) {\n            switch (severity) {\n                case 'success':\n                    return 'pi-check';\n\n                case 'info':\n                    return 'pi-info-circle';\n\n                case 'error':\n                    return 'pi-times';\n\n                case 'warn':\n                    return 'pi-exclamation-triangle';\n\n                default:\n                    return 'pi-info-circle';\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        this.timerSubscriptions?.forEach((subscription) => subscription.unsubscribe());\n    }\n\n    private startMessageLifes(messages: Message[]): void {\n        messages?.forEach((message) => message.life && this.startMessageLife(message));\n    }\n\n    private startMessageLife(message: Message): void {\n        const timerSubsctiption = timer(message.life!).subscribe(() => {\n            this.messages = this.messages?.filter((msgEl) => msgEl !== message);\n            this.timerSubscriptions = this.timerSubscriptions?.filter((timerEl) => timerEl !== timerSubsctiption);\n            this.valueChange.emit(this.messages);\n            this.cd.markForCheck();\n        });\n        this.timerSubscriptions.push(timerSubsctiption);\n    }\n}\n\n@NgModule({\n    imports: [CommonModule, RippleModule, CheckIcon, InfoCircleIcon, TimesCircleIcon, ExclamationTriangleIcon, TimesIcon],\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/fesm2022/primeng-multiselect.mjs

@@ -1,7 +1,7 @@
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { forwardRef, EventEmitter, Component, ViewEncapsulation, Input, Output, signal, computed, ChangeDetectionStrategy, ViewChild, ContentChild, ContentChildren, NgModule } from '@angular/core';
+import { forwardRef, EventEmitter, Component, ViewEncapsulation, Input, Output, signal, computed, effect, ChangeDetectionStrategy, ViewChild, ContentChild, ContentChildren, NgModule } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import * as i3 from 'primeng/api';
 import { TranslationKeys, Footer, Header, PrimeTemplate, SharedModule } from 'primeng/api';
@@ -54,8 +54,8 @@ class MultiSelectItem {
             selected: this.selected
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: MultiSelectItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.2", type: MultiSelectItem, selector: "p-multiSelectItem", inputs: { id: "id", option: "option", selected: "selected", label: "label", disabled: "disabled", itemSize: "itemSize", focused: "focused", ariaPosInset: "ariaPosInset", ariaSetSize: "ariaSetSize", template: "template", checkIconTemplate: "checkIconTemplate" }, outputs: { onClick: "onClick", onMouseEnter: "onMouseEnter" }, host: { classAttribute: "p-element" }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: MultiSelectItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.0", type: MultiSelectItem, selector: "p-multiSelectItem", inputs: { id: "id", option: "option", selected: "selected", label: "label", disabled: "disabled", itemSize: "itemSize", focused: "focused", ariaPosInset: "ariaPosInset", ariaSetSize: "ariaSetSize", template: "template", checkIconTemplate: "checkIconTemplate" }, outputs: { onClick: "onClick", onMouseEnter: "onMouseEnter" }, host: { classAttribute: "p-element" }, ngImport: i0, template: `
         <li
             pRipple
             [ngStyle]="{ height: itemSize + 'px' }"
@@ -87,7 +87,7 @@ class MultiSelectItem {
         </li>
     `, isInline: true, dependencies: [{ kind: "directive", type: i0.forwardRef(function () { return i1.NgClass; }), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(function () { return i1.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(function () { return i1.NgTemplateOutlet; }), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i0.forwardRef(function () { return i1.NgStyle; }), selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i0.forwardRef(function () { return i2.Ripple; }), selector: "[pRipple]" }, { kind: "component", type: i0.forwardRef(function () { return CheckIcon; }), selector: "CheckIcon" }], encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: MultiSelectItem, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: MultiSelectItem, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-multiSelectItem',
@@ -264,13 +264,25 @@ class MultiSelect {
     /**
      * Whether to show labels of selected item labels or use default label.
      * @group Props
+     * @defaultValue true
      */
-    displaySelectedLabel = true;
+    set displaySelectedLabel(val) {
+        this._displaySelectedLabel = val;
+    }
+    get displaySelectedLabel() {
+        return this._displaySelectedLabel;
+    }
     /**
      * Decides how many selected item labels to show at most.
      * @group Props
+     * @defaultValue 3
      */
-    maxSelectedLabels = 3;
+    set maxSelectedLabels(val) {
+        this._maxSelectedLabels = val;
+    }
+    get maxSelectedLabels() {
+        return this._maxSelectedLabels;
+    }
     /**
      * Decides how many selected item labels to show at most.
      * @group Props
@@ -524,6 +536,16 @@ class MultiSelect {
         this._itemSize = val;
         console.warn('The itemSize property is deprecated, use virtualScrollItemSize property instead.');
     }
+    /**
+     * Whether all data is selected.
+     * @group Props
+     */
+    get selectAll() {
+        return this._selectAll;
+    }
+    set selectAll(value) {
+        this._selectAll = value;
+    }
     /**
      * Fields used when filtering the options, defaults to optionLabel.
      * @group Props
@@ -601,6 +623,12 @@ class MultiSelect {
      * @group Emits
      */
     onRemove = new EventEmitter();
+    /**
+     * Callback to invoke when all data is selected.
+     * @param {MultiSelectSelectAllChangeEvent} event - Custom select event.
+     * @group Emits
+     */
+    onSelectAllChange = new EventEmitter();
     containerViewChild;
     overlayViewChild;
     filterInputChild;
@@ -615,6 +643,7 @@ class MultiSelect {
     templates;
     searchValue;
     searchTimeout;
+    _selectAll = null;
     _autoZIndex;
     _baseZIndex;
     _showTransitionOptions;
@@ -652,11 +681,14 @@ class MultiSelect {
     preventDocumentDefault;
     focused = false;
     itemsWrapper;
+    _displaySelectedLabel = true;
+    _maxSelectedLabels = 3;
     modelValue = signal(null);
     _filterValue = signal(null);
     _options = signal(null);
     startRangeIndex = signal(-1);
     focusedOptionIndex = signal(-1);
+    selectedOptions;
     get containerClass() {
         return {
             'p-multiselect p-component p-inputwrapper': true,
@@ -701,7 +733,7 @@ class MultiSelect {
         return this.modelValue() || this.modelValue() != null || this.modelValue() != undefined;
     }
     get isVisibleClearIcon() {
-        return this.modelValue() != null && this.modelValue() !== '' && this.showClear && !this.disabled;
+        return this.modelValue() != null && this.modelValue() !== '' && ObjectUtils.isNotEmpty(this.modelValue()) && this.showClear && !this.disabled && this.filled;
     }
     get toggleAllAriaLabel() {
         return this.config.translation.aria ? this.config.translation.aria[this.allSelected() ? 'selectAll' : 'unselectAll'] : undefined;
@@ -731,7 +763,7 @@ class MultiSelect {
     label = computed(() => {
         let label;
         const modelValue = this.modelValue();
-        if (modelValue && modelValue.length) {
+        if (modelValue && modelValue.length && this.displaySelectedLabel) {
             if (ObjectUtils.isNotEmpty(this.maxSelectedLabels) && modelValue.length > this.maxSelectedLabels) {
                 return this.getSelectedItemsLabel();
             }
@@ -761,6 +793,13 @@ class MultiSelect {
         this.filterService = filterService;
         this.config = config;
         this.overlayService = overlayService;
+        effect(() => {
+            const modelValue = this.modelValue();
+            const visibleOptions = this.visibleOptions();
+            if (visibleOptions && ObjectUtils.isNotEmpty(visibleOptions) && modelValue) {
+                this.selectedOptions = visibleOptions.filter((option) => modelValue.includes(option[this.optionLabel]) || modelValue.includes(option[this.optionValue]));
+            }
+        });
     }
     ngOnInit() {
         this.id = this.id || UniqueComponentId();
@@ -856,14 +895,19 @@ class MultiSelect {
             this.onOptionSelect({ originalEvent: null, option: [value] });
         }
     }
+    /**
+     * Updates the model value.
+     * @group Method
+     */
     updateModel(value, event) {
         this.value = value;
         this.onModelChange(value);
         this.modelValue.set(value);
-        this.onChange.emit({
-            originalEvent: event,
-            value: value
-        });
+    }
+    onInputClick(event) {
+        event.stopPropagation();
+        event.preventDefault();
+        this.focusedOptionIndex.set(-1);
     }
     onOptionSelect(event, isFocus = false, index = -1) {
         const { originalEvent, option } = event;
@@ -881,6 +925,14 @@ class MultiSelect {
         this.updateModel(value, originalEvent);
         index !== -1 && this.focusedOptionIndex.set(index);
         isFocus && DomHandler.focus(this.focusInputViewChild?.nativeElement);
+        this.onChange.emit({
+            originalEvent: event,
+            value: value,
+            itemValue: option
+        });
+    }
+    findSelectedOptionIndex() {
+        return this.hasSelectedOption() ? this.visibleOptions().findIndex((option) => this.isValidSelectedOption(option)) : -1;
     }
     onOptionSelectRange(event, start = -1, end = -1) {
         start === -1 && (start = this.findNearestSelectedOptionIndex(end, true));
@@ -961,7 +1013,7 @@ class MultiSelect {
         return this.isValidOption(option) && this.getOptionLabel(option).toLocaleLowerCase(this.filterLocale).startsWith(this.searchValue.toLocaleLowerCase(this.filterLocale));
     }
     isEmpty() {
-        return !this._options() || (this._options() && this._options().length === 0);
+        return !this._options() || (this.visibleOptions() && this.visibleOptions().length === 0);
     }
     getOptionIndex(index, scrollerOptions) {
         return this.virtualScrollerDisabled ? index : scrollerOptions && scrollerOptions.getItemOptions(index)['index'];
@@ -1099,6 +1151,7 @@ class MultiSelect {
         this.changeFocusedOptionIndex(event, optionIndex);
         !this.overlayVisible && this.show();
         event.preventDefault();
+        event.stopPropagation();
     }
     onArrowUpKey(event, pressedInInputText = false) {
         if (event.altKey && !pressedInInputText) {
@@ -1117,6 +1170,7 @@ class MultiSelect {
             !this.overlayVisible && this.show();
             event.preventDefault();
         }
+        event.stopPropagation();
     }
     onHomeKey(event, pressedInInputText = false) {
         const { currentTarget } = event;
@@ -1288,14 +1342,21 @@ class MultiSelect {
         if (this.disabled || this.readonly) {
             return;
         }
+        if (this.selectAll !== null) {
+            this.onSelectAllChange.emit({
+                originalEvent: event,
+                checked: !this.allSelected()
+            });
+        }
+        else {
+            const value = this.allSelected()
+                ? []
+                : this.visibleOptions()
+                    .filter((option) => this.isValidOption(option))
+                    .map((option) => this.getOptionValue(option));
+            this.updateModel(value, event);
+        }
         DomHandler.focus(this.headerCheckboxViewChild.nativeElement);
-        const value = this.allSelected()
-            ? []
-            : this.visibleOptions()
-                .filter((option) => this.isValidOption(option))
-                .map((option) => this.getOptionValue(option));
-        this.updateModel(value, event);
-        this.onChange.emit({ originalEvent: event, value: this.value });
         this.headerCheckboxFocus = true;
         event.preventDefault();
         event.stopPropagation();
@@ -1337,7 +1398,6 @@ class MultiSelect {
     writeValue(value) {
         this.value = value;
         this.modelValue.set(this.value);
-        this.updateModel(this.value);
         this.checkSelectionLimit();
         this.cd.markForCheck();
     }
@@ -1352,8 +1412,7 @@ class MultiSelect {
         this.cd.markForCheck();
     }
     allSelected() {
-        const allSelected = this.visibleOptions().length > 0 && this.visibleOptions().every((option) => this.isOptionGroup(option) || this.isOptionDisabled(option) || this.isSelected(option));
-        return ObjectUtils.isNotEmpty(this.visibleOptions()) && allSelected;
+        return this.selectAll !== null ? this.selectAll : ObjectUtils.isNotEmpty(this.visibleOptions()) && this.visibleOptions().every((option) => this.isOptionGroup(option) || this.isOptionDisabled(option) || this.isSelected(option));
     }
     /**
      * Displays the panel.
@@ -1391,7 +1450,7 @@ class MultiSelect {
                     if (this.virtualScroll) {
                         const selectedIndex = ObjectUtils.isNotEmpty(this.modelValue()) ? this.focusedOptionIndex() : -1;
                         if (selectedIndex !== -1) {
-                            this.scroller?.scrollToIndex(0);
+                            this.scroller?.scrollToIndex(selectedIndex);
                         }
                     }
                     else {
@@ -1400,8 +1459,8 @@ class MultiSelect {
                             selectedListItem.scrollIntoView({ block: 'nearest', inline: 'center' });
                         }
                     }
-                    this.onPanelShow.emit();
                 }
+                this.onPanelShow.emit();
             case 'void':
                 this.itemsWrapper = null;
                 this.onModelTouched();
@@ -1412,7 +1471,7 @@ class MultiSelect {
         if (this.filterInputChild && this.filterInputChild.nativeElement) {
             this.filterInputChild.nativeElement.value = '';
         }
-        this._filterValue = null;
+        this._filterValue.set(null);
         this._filteredOptions = null;
     }
     close(event) {
@@ -1424,6 +1483,7 @@ class MultiSelect {
         this.value = null;
         this.checkSelectionLimit();
         this.updateModel(null, event);
+        this.selectedOptions = null;
         this.onClear.emit();
         event.stopPropagation();
     }
@@ -1531,8 +1591,8 @@ class MultiSelect {
     hasFilter() {
         return this._filterValue() && this._filterValue().trim().length > 0;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: MultiSelect, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i3.FilterService }, { token: i3.PrimeNGConfig }, { token: i3.OverlayService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.2", type: MultiSelect, selector: "p-multiSelect", inputs: { id: "id", ariaLabel: "ariaLabel", 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", filterBy: "filterBy", scrollHeight: "scrollHeight", lazy: "lazy", virtualScroll: "virtualScroll", virtualScrollItemSize: "virtualScrollItemSize", virtualScrollOptions: "virtualScrollOptions", overlayOptions: "overlayOptions", ariaFilterLabel: "ariaFilterLabel", filterMatchMode: "filterMatchMode", tooltip: "tooltip", tooltipPosition: "tooltipPosition", tooltipPositionStyle: "tooltipPositionStyle", tooltipStyleClass: "tooltipStyleClass", autofocusFilter: "autofocusFilter", display: "display", autocomplete: "autocomplete", showClear: "showClear", autoZIndex: "autoZIndex", baseZIndex: "baseZIndex", showTransitionOptions: "showTransitionOptions", hideTransitionOptions: "hideTransitionOptions", defaultLabel: "defaultLabel", placeholder: "placeholder", options: "options", filterValue: "filterValue", itemSize: "itemSize", focusOnHover: "focusOnHover", filterFields: "filterFields", selectOnFocus: "selectOnFocus", autoOptionFocus: "autoOptionFocus" }, outputs: { onChange: "onChange", onFilter: "onFilter", onFocus: "onFocus", onBlur: "onBlur", onClick: "onClick", onClear: "onClear", onPanelShow: "onPanelShow", onPanelHide: "onPanelHide", onLazyLoad: "onLazyLoad", onRemove: "onRemove" }, host: { properties: { "class.p-inputwrapper-filled": "filled", "class.p-inputwrapper-focus": "focused || overlayVisible" }, classAttribute: "p-element p-inputwrapper" }, 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: "overlayViewChild", first: true, predicate: ["overlay"], descendants: true }, { propertyName: "filterInputChild", first: true, predicate: ["filterInput"], descendants: true }, { propertyName: "focusInputViewChild", first: true, predicate: ["focusInput"], descendants: true }, { propertyName: "itemsViewChild", first: true, predicate: ["items"], descendants: true }, { propertyName: "scroller", first: true, predicate: ["scroller"], descendants: true }, { propertyName: "lastHiddenFocusableElementOnOverlay", first: true, predicate: ["lastHiddenFocusableEl"], descendants: true }, { propertyName: "firstHiddenFocusableElementOnOverlay", first: true, predicate: ["firstHiddenFocusableEl"], descendants: true }, { propertyName: "headerCheckboxViewChild", first: true, predicate: ["headerCheckbox"], descendants: true }], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: MultiSelect, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i3.FilterService }, { token: i3.PrimeNGConfig }, { token: i3.OverlayService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.0", type: MultiSelect, selector: "p-multiSelect", inputs: { id: "id", ariaLabel: "ariaLabel", 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", filterBy: "filterBy", scrollHeight: "scrollHeight", lazy: "lazy", virtualScroll: "virtualScroll", virtualScrollItemSize: "virtualScrollItemSize", virtualScrollOptions: "virtualScrollOptions", overlayOptions: "overlayOptions", ariaFilterLabel: "ariaFilterLabel", filterMatchMode: "filterMatchMode", tooltip: "tooltip", tooltipPosition: "tooltipPosition", tooltipPositionStyle: "tooltipPositionStyle", tooltipStyleClass: "tooltipStyleClass", autofocusFilter: "autofocusFilter", display: "display", autocomplete: "autocomplete", showClear: "showClear", autoZIndex: "autoZIndex", baseZIndex: "baseZIndex", showTransitionOptions: "showTransitionOptions", hideTransitionOptions: "hideTransitionOptions", defaultLabel: "defaultLabel", placeholder: "placeholder", options: "options", filterValue: "filterValue", itemSize: "itemSize", selectAll: "selectAll", focusOnHover: "focusOnHover", filterFields: "filterFields", selectOnFocus: "selectOnFocus", autoOptionFocus: "autoOptionFocus" }, outputs: { onChange: "onChange", onFilter: "onFilter", onFocus: "onFocus", onBlur: "onBlur", onClick: "onClick", onClear: "onClear", onPanelShow: "onPanelShow", onPanelHide: "onPanelHide", onLazyLoad: "onLazyLoad", onRemove: "onRemove", onSelectAllChange: "onSelectAllChange" }, host: { properties: { "class.p-inputwrapper-filled": "filled", "class.p-inputwrapper-focus": "focused || overlayVisible" }, classAttribute: "p-element p-inputwrapper" }, 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: "overlayViewChild", first: true, predicate: ["overlay"], descendants: true }, { propertyName: "filterInputChild", first: true, predicate: ["filterInput"], descendants: true }, { propertyName: "focusInputViewChild", first: true, predicate: ["focusInput"], descendants: true }, { propertyName: "itemsViewChild", first: true, predicate: ["items"], descendants: true }, { propertyName: "scroller", first: true, predicate: ["scroller"], descendants: true }, { propertyName: "lastHiddenFocusableElementOnOverlay", first: true, predicate: ["lastHiddenFocusableEl"], descendants: true }, { propertyName: "firstHiddenFocusableElementOnOverlay", first: true, predicate: ["firstHiddenFocusableEl"], descendants: true }, { propertyName: "headerCheckboxViewChild", first: true, predicate: ["headerCheckbox"], descendants: true }], ngImport: i0, template: `
         <div #container [attr.id]="id" [ngClass]="containerClass" [ngStyle]="style" [class]="styleClass" (click)="onContainerClick($event)">
             <div class="p-hidden-accessible" [attr.data-p-hidden-accessible]="true">
                 <input
@@ -1573,9 +1633,9 @@ class MultiSelect {
                             <ng-container *ngIf="!modelValue() || modelValue().length === 0">{{ placeholder || defaultLabel || 'empty' }}</ng-container>
                         </ng-container>
                     </ng-container>
-                    <ng-container *ngTemplateOutlet="selectedItemsTemplate; context: { $implicit: modelValue(), removeChip: removeOption.bind(this) }"></ng-container>
+                    <ng-container *ngTemplateOutlet="selectedItemsTemplate; context: { $implicit: selectedOptions, removeChip: removeOption.bind(this) }"></ng-container>
                 </div>
-                <ng-container *ngIf="modelValue() != null && filled && !disabled && showClear">
+                <ng-container *ngIf="isVisibleClearIcon">
                     <TimesIcon *ngIf="!clearIconTemplate" [styleClass]="'p-multiselect-clear-icon'" (click)="clear($event)" [attr.data-pc-section]="'clearicon'" [attr.aria-hidden]="true" />
                     <span *ngIf="clearIconTemplate" class="p-multiselect-clear-icon" (click)="clear($event)" [attr.data-pc-section]="'clearicon'" [attr.aria-hidden]="true">
                         <ng-template *ngTemplateOutlet="clearIconTemplate"></ng-template>
@@ -1647,7 +1707,7 @@ class MultiSelect {
                                         <ng-container *ngIf="allSelected()">
                                             <CheckIcon [styleClass]="'p-checkbox-icon'" *ngIf="!checkIconTemplate" [attr.aria-hidden]="true" />
                                             <span *ngIf="checkIconTemplate" class="p-checkbox-icon" [attr.aria-hidden]="true">
-                                                <ng-template *ngTemplateOutlet="checkIconTemplate"></ng-template>
+                                                <ng-template *ngTemplateOutlet="checkIconTemplate; context: { $implicit: allSelected() }"></ng-template>
                                             </span>
                                         </ng-container>
                                     </div>
@@ -1664,6 +1724,7 @@ class MultiSelect {
                                         [value]="_filterValue() || ''"
                                         (input)="onFilterInputChange($event)"
                                         (keydown)="onFilterKeyDown($event)"
+                                        (click)="onInputClick($event)"
                                         (blur)="onFilterBlur($event)"
                                         class="p-multiselect-filter p-inputtext p-component"
                                         [disabled]="disabled"
@@ -1713,13 +1774,13 @@ class MultiSelect {
                             <ng-template #buildInItems let-items let-scrollerOptions="options">
                                 <ul #items class="p-multiselect-items p-component" [ngClass]="scrollerOptions.contentStyleClass" [style]="scrollerOptions.contentStyle" role="listbox" aria-multiselectable="true">
                                     <ng-template ngFor let-option [ngForOf]="items" let-i="index">
-                                        <ng-container *ngIf="option.group">
+                                        <ng-container *ngIf="isOptionGroup(option)">
                                             <li [attr.id]="id + '_' + getOptionIndex(i, scrollerOptions)" class="p-multiselect-item-group" [ngStyle]="{ height: scrollerOptions.itemSize + 'px' }" role="option">
                                                 <span *ngIf="!groupTemplate">{{ getOptionGroupLabel(option.optionGroup) }}</span>
                                                 <ng-container *ngTemplateOutlet="groupTemplate; context: { $implicit: option.optionGroup }"></ng-container>
                                             </li>
                                         </ng-container>
-                                        <ng-container *ngIf="!option.group">
+                                        <ng-container *ngIf="!isOptionGroup(option)">
                                             <p-multiSelectItem
                                                 [id]="id + '_' + getOptionIndex(i, scrollerOptions)"
                                                 [option]="option"
@@ -1774,7 +1835,7 @@ class MultiSelect {
         </div>
     `, isInline: true, styles: ["@layer primeng{.p-multiselect{display:inline-flex;cursor:pointer;position:relative;-webkit-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;display:flex}.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-token-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100px}.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}.p-multiselect-clear-icon{position:absolute;top:50%;margin-top:-.5rem;cursor:pointer}.p-multiselect-clearable{position:relative}}\n"], dependencies: [{ kind: "directive", type: i0.forwardRef(function () { return i1.NgClass; }), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(function () { return i1.NgForOf; }), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(function () { return i1.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(function () { return i1.NgTemplateOutlet; }), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i0.forwardRef(function () { return i1.NgStyle; }), selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i0.forwardRef(function () { return i4.Overlay; }), selector: "p-overlay", inputs: ["visible", "mode", "style", "styleClass", "contentStyle", "contentStyleClass", "target", "appendTo", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "listener", "responsive", "options"], outputs: ["visibleChange", "onBeforeShow", "onShow", "onBeforeHide", "onHide", "onAnimationStart", "onAnimationDone"] }, { kind: "directive", type: i0.forwardRef(function () { return i3.PrimeTemplate; }), selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i0.forwardRef(function () { return i5.Tooltip; }), selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "directive", type: i0.forwardRef(function () { return i2.Ripple; }), selector: "[pRipple]" }, { kind: "component", type: i0.forwardRef(function () { return i6.Scroller; }), selector: "p-scroller", inputs: ["id", "style", "styleClass", "tabindex", "items", "itemSize", "scrollHeight", "scrollWidth", "orientation", "step", "delay", "resizeDelay", "appendOnly", "inline", "lazy", "disabled", "loaderDisabled", "columns", "showSpacer", "showLoader", "numToleratedItems", "loading", "autoSize", "trackBy", "options"], outputs: ["onLazyLoad", "onScroll", "onScrollIndexChange"] }, { kind: "component", type: i0.forwardRef(function () { return CheckIcon; }), selector: "CheckIcon" }, { kind: "component", type: i0.forwardRef(function () { return SearchIcon; }), selector: "SearchIcon" }, { kind: "component", type: i0.forwardRef(function () { return TimesCircleIcon; }), selector: "TimesCircleIcon" }, { kind: "component", type: i0.forwardRef(function () { return TimesIcon; }), selector: "TimesIcon" }, { kind: "component", type: i0.forwardRef(function () { return ChevronDownIcon; }), selector: "ChevronDownIcon" }, { kind: "component", type: i0.forwardRef(function () { return MultiSelectItem; }), selector: "p-multiSelectItem", inputs: ["id", "option", "selected", "label", "disabled", "itemSize", "focused", "ariaPosInset", "ariaSetSize", "template", "checkIconTemplate"], outputs: ["onClick", "onMouseEnter"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: MultiSelect, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: MultiSelect, decorators: [{
             type: Component,
             args: [{ selector: 'p-multiSelect', template: `
         <div #container [attr.id]="id" [ngClass]="containerClass" [ngStyle]="style" [class]="styleClass" (click)="onContainerClick($event)">
@@ -1817,9 +1878,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImpor
                             <ng-container *ngIf="!modelValue() || modelValue().length === 0">{{ placeholder || defaultLabel || 'empty' }}</ng-container>
                         </ng-container>
                     </ng-container>
-                    <ng-container *ngTemplateOutlet="selectedItemsTemplate; context: { $implicit: modelValue(), removeChip: removeOption.bind(this) }"></ng-container>
+                    <ng-container *ngTemplateOutlet="selectedItemsTemplate; context: { $implicit: selectedOptions, removeChip: removeOption.bind(this) }"></ng-container>
                 </div>
-                <ng-container *ngIf="modelValue() != null && filled && !disabled && showClear">
+                <ng-container *ngIf="isVisibleClearIcon">
                     <TimesIcon *ngIf="!clearIconTemplate" [styleClass]="'p-multiselect-clear-icon'" (click)="clear($event)" [attr.data-pc-section]="'clearicon'" [attr.aria-hidden]="true" />
                     <span *ngIf="clearIconTemplate" class="p-multiselect-clear-icon" (click)="clear($event)" [attr.data-pc-section]="'clearicon'" [attr.aria-hidden]="true">
                         <ng-template *ngTemplateOutlet="clearIconTemplate"></ng-template>
@@ -1891,7 +1952,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImpor
                                         <ng-container *ngIf="allSelected()">
                                             <CheckIcon [styleClass]="'p-checkbox-icon'" *ngIf="!checkIconTemplate" [attr.aria-hidden]="true" />
                                             <span *ngIf="checkIconTemplate" class="p-checkbox-icon" [attr.aria-hidden]="true">
-                                                <ng-template *ngTemplateOutlet="checkIconTemplate"></ng-template>
+                                                <ng-template *ngTemplateOutlet="checkIconTemplate; context: { $implicit: allSelected() }"></ng-template>
                                             </span>
                                         </ng-container>
                                     </div>
@@ -1908,6 +1969,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImpor
                                         [value]="_filterValue() || ''"
                                         (input)="onFilterInputChange($event)"
                                         (keydown)="onFilterKeyDown($event)"
+                                        (click)="onInputClick($event)"
                                         (blur)="onFilterBlur($event)"
                                         class="p-multiselect-filter p-inputtext p-component"
                                         [disabled]="disabled"
@@ -1957,13 +2019,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImpor
                             <ng-template #buildInItems let-items let-scrollerOptions="options">
                                 <ul #items class="p-multiselect-items p-component" [ngClass]="scrollerOptions.contentStyleClass" [style]="scrollerOptions.contentStyle" role="listbox" aria-multiselectable="true">
                                     <ng-template ngFor let-option [ngForOf]="items" let-i="index">
-                                        <ng-container *ngIf="option.group">
+                                        <ng-container *ngIf="isOptionGroup(option)">
                                             <li [attr.id]="id + '_' + getOptionIndex(i, scrollerOptions)" class="p-multiselect-item-group" [ngStyle]="{ height: scrollerOptions.itemSize + 'px' }" role="option">
                                                 <span *ngIf="!groupTemplate">{{ getOptionGroupLabel(option.optionGroup) }}</span>
                                                 <ng-container *ngTemplateOutlet="groupTemplate; context: { $implicit: option.optionGroup }"></ng-container>
                                             </li>
                                         </ng-container>
-                                        <ng-container *ngIf="!option.group">
+                                        <ng-container *ngIf="!isOptionGroup(option)">
                                             <p-multiSelectItem
                                                 [id]="id + '_' + getOptionIndex(i, scrollerOptions)"
                                                 [option]="option"
@@ -2141,6 +2203,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImpor
                 type: Input
             }], itemSize: [{
                 type: Input
+            }], selectAll: [{
+                type: Input
             }], focusOnHover: [{
                 type: Input
             }], filterFields: [{
@@ -2169,6 +2233,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImpor
                 type: Output
             }], onRemove: [{
                 type: Output
+            }], onSelectAllChange: [{
+                type: Output
             }], containerViewChild: [{
                 type: ViewChild,
                 args: ['container']
@@ -2207,11 +2273,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImpor
                 args: [PrimeTemplate]
             }] } });
 class MultiSelectModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: MultiSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.0.2", ngImport: i0, type: MultiSelectModule, declarations: [MultiSelect, MultiSelectItem], imports: [CommonModule, OverlayModule, SharedModule, TooltipModule, RippleModule, ScrollerModule, CheckIcon, SearchIcon, TimesCircleIcon, TimesIcon, ChevronDownIcon, CheckIcon], exports: [MultiSelect, OverlayModule, SharedModule, ScrollerModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: MultiSelectModule, imports: [CommonModule, OverlayModule, SharedModule, TooltipModule, RippleModule, ScrollerModule, CheckIcon, SearchIcon, TimesCircleIcon, TimesIcon, ChevronDownIcon, CheckIcon, OverlayModule, SharedModule, ScrollerModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: MultiSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.0", ngImport: i0, type: MultiSelectModule, declarations: [MultiSelect, MultiSelectItem], imports: [CommonModule, OverlayModule, SharedModule, TooltipModule, RippleModule, ScrollerModule, CheckIcon, SearchIcon, TimesCircleIcon, TimesIcon, ChevronDownIcon, CheckIcon], exports: [MultiSelect, OverlayModule, SharedModule, ScrollerModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: MultiSelectModule, imports: [CommonModule, OverlayModule, SharedModule, TooltipModule, RippleModule, ScrollerModule, CheckIcon, SearchIcon, TimesCircleIcon, TimesIcon, ChevronDownIcon, CheckIcon, OverlayModule, SharedModule, ScrollerModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: MultiSelectModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: MultiSelectModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, OverlayModule, SharedModule, TooltipModule, RippleModule, ScrollerModule, CheckIcon, SearchIcon, TimesCircleIcon, TimesIcon, ChevronDownIcon, CheckIcon],