cax-design-system 2.8.0 → 2.8.2

package/fesm2022/cax-design-system-messages.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"cax-design-system-messages.mjs","sources":["../../src/app/components/messages/messages.ts","../../src/app/components/messages/messages.html","../../src/app/components/messages/messages.module.ts","../../src/app/components/messages/cax-design-system-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, OnDestroy, Optional, Output, QueryList, TemplateRef, ViewEncapsulation, booleanAttribute } from '@angular/core';\nimport { Message, MessageService, CaxTemplate, SharedModule, caxConfig } from 'cax-design-system/api';\nimport { ButtonModule } from 'cax-design-system/button';\nimport { TimesIcon } from 'cax-design-system/icons/times';\nimport { RippleModule } from 'cax-design-system/ripple';\nimport { Subscription, timer } from 'rxjs';\nimport { ActionButtonItem } from './messages.interface';\n/**\n * Messages is used to display alerts inline.\n * @group Components\n */\n@Component({\n    selector: 'cax-messages',\n    templateUrl: './messages.html',\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.scss'],\n    standalone: true,\n    imports: [CommonModule, RippleModule, TimesIcon, SharedModule, ButtonModule],\n    host: {\n        class: 'cax-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({ transform: booleanAttribute }) 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({ transform: booleanAttribute }) 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({ transform: booleanAttribute }) escape: boolean = true;\n    /**\n     * Severity level of the message.\n     * @group Props\n     */\n    @Input() severity: 'success' | 'info' | 'error' | 'warn' | undefined;\n    /**\n     * Size of the message.\n     * @group Props\n     */\n    @Input() size: 'sm' | 'md' | 'lg' = 'md';\n    /**\n     * Display icon or not\n     * @group Props\n     */\n    @Input() displayIcon: boolean = true;\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     * This function is executed when a message is closed.\n     * @param {Message} value - Closed message.\n     * @group Emits\n     */\n    @Output() onClose: EventEmitter<Message> = new EventEmitter<Message>();\n\n    @ContentChildren(CaxTemplate) templates: QueryList<CaxTemplate> | 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(\n        @Optional() public messageService: MessageService,\n        public el: ElementRef,\n        public cd: ChangeDetectorRef,\n        private config: caxConfig\n    ) {}\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        const removedMessage = this.messages[i];\n        this.messages = this.messages?.filter((msg, index) => index !== i);\n        removedMessage && this.onClose.emit(removedMessage);\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 'cax-check-circle';\n\n                case 'info':\n                    return 'cax-info-circle';\n\n                case 'error':\n                    return 'cax-close-circle';\n\n                case 'warn':\n                    return 'cax-danger-triangle';\n\n                default:\n                    return 'cax-info-circle';\n            }\n        }\n\n        return null;\n    }\n    get closeAriaLabel() {\n        return this.config.translation.aria ? this.config.translation.aria.close : undefined;\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    //custom methods\n    sizeClass(size?: 'sm' | 'md' | 'lg') {\n        return size ? { [`cax-messages-${size}`]: size } : { [`cax-messages-${this.size}`]: this.size };\n    }\n\n    onItemClick(e: MouseEvent, item: ActionButtonItem) {\n        if (item.command) {\n            item.command({ originalEvent: e, item });\n        }\n    }\n\n    getButtonSeverity(severity: 'success' | 'info' | 'error' | 'warn' | undefined, outlined?: boolean) {\n        switch (severity) {\n            case 'success':\n                return 'success';\n            case 'info':\n                return outlined ? 'secondary' : 'primary';\n            case 'error':\n                return 'danger';\n            case 'warn':\n                return 'warning';\n            default:\n                return 'primary';\n        }\n    }\n}\n","<div class=\"cax-messages cax-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]=\"'cax-message cax-message-' + msg.severity\"\n            [ngClass]=\"sizeClass(msg.size)\"\n            role=\"alert\"\n            [@messageAnimation]=\"{ value: 'visible', params: { showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions } }\"\n        >\n            <div class=\"cax-message-wrapper\" [attr.data-pc-section]=\"'wrapper'\" [attr.id]=\"msg.id || null\">\n                <div class=\"cax-message-wrap\">\n                    <span *ngIf=\"(displayIcon && (msg.displayIcon ?? true)) && msg.icon\" [class]=\"'cax-message-icon cax pi ' + msg.icon\" [attr.data-pc-section]=\"'icon'\"> </span>\n                    <span class=\"cax-message-icon\" *ngIf=\"(displayIcon && (msg.displayIcon ?? true)) && !msg.icon\">\n                        <ng-container>\n                            <span class=\"cax cax-check-circle\" *ngIf=\"msg.severity === 'success'\" [attr.data-pc-section]=\"'icon'\"></span>\n                            <span class=\"cax cax-info-circle\" *ngIf=\"msg.severity === 'info'\" [attr.data-pc-section]=\"'icon'\"></span>\n                            <span class=\"cax cax-close-circle\" *ngIf=\"msg.severity === 'error'\" [attr.data-pc-section]=\"'icon'\"></span>\n                            <span class=\"cax cax-danger-triangle\" *ngIf=\"msg.severity === 'warn'\" [attr.data-pc-section]=\"'icon'\"></span>\n                        </ng-container>\n                    </span>\n                    <ng-container *ngIf=\"!escape; else escapeOut\">\n                        <div class=\"cax-message-box\">\n                            <span *ngIf=\"msg.summary\" class=\"cax-message-summary\" [innerHTML]=\"msg.summary\" [attr.data-pc-section]=\"'summary'\"></span>\n                            <span *ngIf=\"msg.detail\" class=\"cax-message-detail\" [innerHTML]=\"msg.detail\" [attr.data-pc-section]=\"'detail'\"></span>\n                        </div>\n                    </ng-container>\n                    <ng-template #escapeOut>\n                        <div class=\"cax-message-box\">\n                            <span *ngIf=\"msg.summary\" class=\"cax-message-summary\" [attr.data-pc-section]=\"'summary'\">{{ msg.summary }}</span>\n                            <span *ngIf=\"msg.detail\" class=\"cax-message-detail\" [attr.data-pc-section]=\"'detail'\">{{ msg.detail }}</span>\n                        </div>\n                    </ng-template>\n                </div>\n                <button class=\"cax-message-close cax-link\" (click)=\"removeMessage(i)\" *ngIf=\"closable && (msg.closable ?? true)\" type=\"button\" caxRipple [attr.aria-label]=\"closeAriaLabel\" [attr.data-pc-section]=\"'closebutton'\">\n                    <TimesIcon [styleClass]=\"'cax-message-close-icon'\" [attr.data-pc-section]=\"'closeicon'\" />\n                </button>\n            </div>\n            <div *ngIf=\"msg.actionButtons?.length\" class=\"cax-message-button-wrapper\">\n                <cax-button\n                    *ngFor=\"let item of msg.actionButtons; let i = index\"\n                    (click)=\"onItemClick($event, item)\"\n                    (keydown.enter)=\"onItemClick($event, item, i)\"\n                    [severity]=\"getButtonSeverity(msg.severity, item.outlined)\"\n                    [label]=\"item.label\"\n                    [outlined]=\"item.outlined\"\n                    [disabled]=\"item.disabled\"\n                />\n            </div>\n        </div>\n    </ng-container>\n    <ng-template #staticMessage>\n        <div [ngClass]=\"'cax-message cax-message-' + severity\" role=\"alert\">\n            <div class=\"cax-message-wrapper\">\n                <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n            </div>\n        </div>\n    </ng-template>\n</div>\n","import { NgModule } from '@angular/core';\nimport { Messages } from './messages';\nimport { SharedModule } from 'cax-design-system/api';\n\n@NgModule({\n    imports: [Messages, SharedModule],\n    exports: [Messages, SharedModule]\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":"cax-design-system-messages.mjs","sources":["../../src/app/components/messages/messages.ts","../../src/app/components/messages/messages.html","../../src/app/components/messages/messages.module.ts","../../src/app/components/messages/cax-design-system-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, OnDestroy, Optional, Output, QueryList, TemplateRef, ViewEncapsulation, booleanAttribute } from '@angular/core';\nimport { Message, MessageService, CaxTemplate, SharedModule, caxConfig } from 'cax-design-system/api';\nimport { ButtonModule } from 'cax-design-system/button';\nimport { TimesIcon } from 'cax-design-system/icons/times';\nimport { RippleModule } from 'cax-design-system/ripple';\nimport { Subscription, timer } from 'rxjs';\nimport { ActionButtonItem } from './messages.interface';\n/**\n * Messages is used to display alerts inline.\n * @group Components\n */\n@Component({\n    selector: 'cax-messages',\n    templateUrl: './messages.html',\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.scss'],\n    standalone: true,\n    imports: [CommonModule, RippleModule, TimesIcon, SharedModule, ButtonModule],\n    host: {\n        class: 'cax-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({ transform: booleanAttribute }) 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({ transform: booleanAttribute }) 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({ transform: booleanAttribute }) escape: boolean = true;\n    /**\n     * Severity level of the message.\n     * @group Props\n     */\n    @Input() severity: 'success' | 'info' | 'error' | 'warn' | undefined;\n    /**\n     * Size of the message.\n     * @group Props\n     */\n    @Input() size: 'sm' | 'md' | 'lg' = 'md';\n    /**\n     * Display icon or not\n     * @group Props\n     */\n    @Input() displayIcon: boolean = true;\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     * This function is executed when a message is closed.\n     * @param {Message} value - Closed message.\n     * @group Emits\n     */\n    @Output() onClose: EventEmitter<Message> = new EventEmitter<Message>();\n\n    @ContentChildren(CaxTemplate) templates: QueryList<CaxTemplate> | 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(\n        @Optional() public messageService: MessageService,\n        public el: ElementRef,\n        public cd: ChangeDetectorRef,\n        private config: caxConfig\n    ) {}\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        const removedMessage = this.messages[i];\n        this.messages = this.messages?.filter((msg, index) => index !== i);\n        removedMessage && this.onClose.emit(removedMessage);\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 'cax-check-circle';\n\n                case 'info':\n                    return 'cax-info-circle';\n\n                case 'error':\n                    return 'cax-close-circle';\n\n                case 'warn':\n                    return 'cax-danger-triangle';\n\n                default:\n                    return 'cax-info-circle';\n            }\n        }\n\n        return null;\n    }\n    get closeAriaLabel() {\n        return this.config.translation.aria ? this.config.translation.aria.close : undefined;\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    //custom methods\n    sizeClass(size?: 'sm' | 'md' | 'lg') {\n        return size ? { [`cax-messages-${size}`]: size } : { [`cax-messages-${this.size}`]: this.size };\n    }\n\n    onItemClick(e: MouseEvent, item: ActionButtonItem) {\n        if (item.command) {\n            item.command({ originalEvent: e, item });\n        }\n    }\n\n    getButtonSeverity(severity: 'success' | 'info' | 'error' | 'warn' | undefined, outlined?: boolean) {\n        switch (severity) {\n            case 'success':\n                return 'success';\n            case 'info':\n                return outlined ? 'secondary' : 'primary';\n            case 'error':\n                return 'danger';\n            case 'warn':\n                return 'warning';\n            default:\n                return 'primary';\n        }\n    }\n}\n","<div class=\"cax-messages cax-component\" role=\"alert\" [ngStyle]=\"style\" [class]=\"styleClass\" [attr.aria-atomic]=\"true\" [attr.aria-live]=\"'assertive'\" [attr.data-pc-name]=\"'message'\">\r\n    <ng-container *ngIf=\"!contentTemplate; else staticMessage\">\r\n        <div\r\n            *ngFor=\"let msg of messages; let i = index\"\r\n            [class]=\"'cax-message cax-message-' + msg.severity\"\r\n            [ngClass]=\"sizeClass(msg.size)\"\r\n            role=\"alert\"\r\n            [@messageAnimation]=\"{ value: 'visible', params: { showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions } }\"\r\n        >\r\n            <div class=\"cax-message-wrapper\" [attr.data-pc-section]=\"'wrapper'\" [attr.id]=\"msg.id || null\">\r\n                <div class=\"cax-message-wrap\">\r\n                    <span *ngIf=\"(displayIcon && (msg.displayIcon ?? true)) && msg.icon\" [class]=\"'cax-message-icon cax pi ' + msg.icon\" [attr.data-pc-section]=\"'icon'\"> </span>\r\n                    <span class=\"cax-message-icon\" *ngIf=\"(displayIcon && (msg.displayIcon ?? true)) && !msg.icon\">\r\n                        <ng-container>\r\n                            <span class=\"cax cax-check-circle\" *ngIf=\"msg.severity === 'success'\" [attr.data-pc-section]=\"'icon'\"></span>\r\n                            <span class=\"cax cax-info-circle\" *ngIf=\"msg.severity === 'info'\" [attr.data-pc-section]=\"'icon'\"></span>\r\n                            <span class=\"cax cax-close-circle\" *ngIf=\"msg.severity === 'error'\" [attr.data-pc-section]=\"'icon'\"></span>\r\n                            <span class=\"cax cax-danger-triangle\" *ngIf=\"msg.severity === 'warn'\" [attr.data-pc-section]=\"'icon'\"></span>\r\n                        </ng-container>\r\n                    </span>\r\n                    <ng-container *ngIf=\"!escape; else escapeOut\">\r\n                        <div class=\"cax-message-box\">\r\n                            <span *ngIf=\"msg.summary\" class=\"cax-message-summary\" [innerHTML]=\"msg.summary\" [attr.data-pc-section]=\"'summary'\"></span>\r\n                            <span *ngIf=\"msg.detail\" class=\"cax-message-detail\" [innerHTML]=\"msg.detail\" [attr.data-pc-section]=\"'detail'\"></span>\r\n                        </div>\r\n                    </ng-container>\r\n                    <ng-template #escapeOut>\r\n                        <div class=\"cax-message-box\">\r\n                            <span *ngIf=\"msg.summary\" class=\"cax-message-summary\" [attr.data-pc-section]=\"'summary'\">{{ msg.summary }}</span>\r\n                            <span *ngIf=\"msg.detail\" class=\"cax-message-detail\" [attr.data-pc-section]=\"'detail'\">{{ msg.detail }}</span>\r\n                        </div>\r\n                    </ng-template>\r\n                </div>\r\n                <button class=\"cax-message-close cax-link\" (click)=\"removeMessage(i)\" *ngIf=\"closable && (msg.closable ?? true)\" type=\"button\" caxRipple [attr.aria-label]=\"closeAriaLabel\" [attr.data-pc-section]=\"'closebutton'\">\r\n                    <TimesIcon [styleClass]=\"'cax-message-close-icon'\" [attr.data-pc-section]=\"'closeicon'\" />\r\n                </button>\r\n            </div>\r\n            <div *ngIf=\"msg.actionButtons?.length\" class=\"cax-message-button-wrapper\">\r\n                <cax-button\r\n                    *ngFor=\"let item of msg.actionButtons; let i = index\"\r\n                    (click)=\"onItemClick($event, item)\"\r\n                    (keydown.enter)=\"onItemClick($event, item, i)\"\r\n                    [severity]=\"getButtonSeverity(msg.severity, item.outlined)\"\r\n                    [label]=\"item.label\"\r\n                    [outlined]=\"item.outlined\"\r\n                    [disabled]=\"item.disabled\"\r\n                />\r\n            </div>\r\n        </div>\r\n    </ng-container>\r\n    <ng-template #staticMessage>\r\n        <div [ngClass]=\"'cax-message cax-message-' + severity\" role=\"alert\">\r\n            <div class=\"cax-message-wrapper\">\r\n                <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\r\n            </div>\r\n        </div>\r\n    </ng-template>\r\n</div>\r\n","import { NgModule } from '@angular/core';\nimport { Messages } from './messages';\nimport { SharedModule } from 'cax-design-system/api';\n\n@NgModule({\n    imports: [Messages, SharedModule],\n    exports: [Messages, SharedModule]\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/cax-design-system-metergroup.mjs

@@ -1,7 +1,7 @@
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { inject, forwardRef, Component, Input, ContentChildren, ElementRef, ChangeDetectionStrategy, ViewEncapsulation, ViewChild, NgModule } from '@angular/core';
+import { inject, forwardRef, ContentChildren, Input, Component, ElementRef, ViewChild, ViewEncapsulation, ChangeDetectionStrategy, NgModule } from '@angular/core';
 import { CaxTemplate, SharedModule } from 'cax-design-system/api';
 import { DomHandler } from 'cax-design-system/dom';
 

package/fesm2022/cax-design-system-metergroup.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"cax-design-system-metergroup.mjs","sources":["../../src/app/components/metergroup/metergroup.ts","../../src/app/components/metergroup/cax-design-system-metergroup.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport { AfterContentInit, ChangeDetectionStrategy, Component, ContentChildren, ElementRef, Input, NgModule, QueryList, TemplateRef, ViewEncapsulation, effect, forwardRef, inject, ViewChild } from '@angular/core';\nimport { CaxTemplate, SharedModule } from 'cax-design-system/api';\nimport { DomHandler } from 'cax-design-system/dom';\nimport { MeterItem } from './metergroup.interface';\n\n@Component({\n    selector: 'p-meterGroupLabel',\n    template: `\n        <ol [ngClass]=\"labelClass\">\n            <li *ngFor=\"let labelItem of value; let index = index; trackBy: parentInstance.trackByFn\" class=\"p-metergroup-label\">\n                <ng-container *ngIf=\"!iconTemplate\">\n                    <i *ngIf=\"labelItem.icon\" [class]=\"labelItem.icon\" [ngClass]=\"{ 'p-metergroup-label-icon': true }\" [ngStyle]=\"{ color: labelItem.color }\"></i>\n                    <span *ngIf=\"!labelItem.icon\" class=\"p-metergroup-label-marker\" [ngStyle]=\"{ backgroundColor: labelItem.color }\"></span>\n                </ng-container>\n                <ng-container *ngTemplateOutlet=\"iconTemplate; context: { $implicit: labelItem, icon: labelItem.icon }\"></ng-container>\n                <span class=\"p-metergroup-label-text\">{{ labelItem.label }} ({{ parentInstance?.percentValue(labelItem.value) }})</span>\n            </li>\n        </ol>\n    `\n})\nexport class MeterGroupLabel {\n    @Input() value: any[] = null;\n\n    @Input() labelPosition: 'start' | 'end' = 'end';\n\n    @Input() labelOrientation: 'horizontal' | 'vertical' = 'horizontal';\n\n    @Input() min: number;\n\n    @Input() max: number;\n\n    @Input() iconTemplate: TemplateRef<any> | undefined;\n\n    @ContentChildren(CaxTemplate) templates: QueryList<CaxTemplate> | undefined;\n\n    get labelClass(): { [key: string]: boolean } {\n        return {\n            'p-metergroup-labels p-component': true,\n            'p-metergroup-labels-vertical': this.labelOrientation === 'vertical',\n            'p-metergroup-labels-horizontal': this.labelOrientation === 'horizontal'\n        };\n    }\n\n    parentInstance: MeterGroup = inject(forwardRef(() => MeterGroup));\n}\n/**\n * MeterGroup displays scalar measurements within a known range.\n * @group Components\n */\n@Component({\n    selector: 'p-meterGroup',\n    template: `\n        <div #container [ngClass]=\"containerClass\" role=\"meter\" [attr.aria-valuemin]=\"min\" [attr.aria-valuemax]=\"max\" [attr.aria-valuenow]=\"totalPercent()\" [ngStyle]=\"style\" [class]=\"styleClass\">\n            @if (labelPosition === 'start') {\n                <p-meterGroupLabel *ngIf=\"!labelTemplate\" [value]=\"value\" [labelPosition]=\"labelPosition\" [labelOrientation]=\"labelOrientation\" [min]=\"min\" [max]=\"max\" [iconTemplate]=\"iconTemplate\" />\n                <ng-container *ngTemplateOutlet=\"labelTemplate; context: { $implicit: value, totalPercent: totalPercent(), percentages: percentages() }\"></ng-container>\n            }\n            <ng-container *ngTemplateOutlet=\"startTemplate; context: { $implicit: value, totalPercent: totalPercent(), percentages: percentages() }\"></ng-container>\n            <div class=\"p-metergroup-meters\">\n                <ng-container *ngFor=\"let meterItem of value; let index = index; trackBy: trackByFn\">\n                    <ng-container *ngTemplateOutlet=\"meterTemplate; context: { $implicit: meterItem, index: index, orientation: this.orientation, class: 'p-metergroup-meter', size: percentValue(meterItem.value), totalPercent: totalPercent() }\">\n                    </ng-container>\n                    <ng-container *ngIf=\"!meterTemplate && meterItem.value > 0\">\n                        <span class=\"p-metergroup-meter\" [ngStyle]=\"meterStyle(meterItem)\"></span>\n                    </ng-container>\n                </ng-container>\n            </div>\n            <ng-container *ngTemplateOutlet=\"endTemplate; context: { $implicit: value, totalPercent: totalPercent(), percentages: percentages() }\"></ng-container>\n            @if (labelPosition === 'end') {\n                <p-meterGroupLabel *ngIf=\"!labelTemplate\" [value]=\"value\" [labelPosition]=\"labelPosition\" [labelOrientation]=\"labelOrientation\" [min]=\"min\" [max]=\"max\" [iconTemplate]=\"iconTemplate\" />\n                <ng-container *ngTemplateOutlet=\"labelTemplate; context: { $implicit: value, totalPercent: totalPercent(), percentages: percentages() }\"></ng-container>\n            }\n        </div>\n    `,\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None\n})\nexport class MeterGroup implements AfterContentInit {\n    /**\n     * Current value of the metergroup.\n     * @group Props\n     */\n    @Input() value: MeterItem[] | undefined;\n    /**\n     * Mininum boundary value.\n     * @group Props\n     */\n    @Input() min: number = 0;\n    /**\n     * Maximum boundary value.\n     * @group Props\n     */\n    @Input() max: number = 100;\n    /**\n     * Specifies the layout of the component, valid values are 'horizontal' and 'vertical'.\n     * @group Props\n     */\n    @Input() orientation: 'horizontal' | 'vertical' = 'horizontal';\n    /**\n     * Specifies the label position of the component, valid values are 'start' and 'end'.\n     * @group Props\n     */\n    @Input() labelPosition: 'start' | 'end' = 'end';\n    /**\n     * Specifies the label orientation of the component, valid values are 'horizontal' and 'vertical'.\n     * @group Props\n     */\n    @Input() labelOrientation: string = 'horizontal';\n    /**\n     * Inline style of the element.\n     * @group Props\n     */\n    @Input() style: { [klass: string]: any } | null | undefined;\n    /**\n     * Style class of the element.\n     * @group Props\n     */\n    @Input() styleClass: string | undefined;\n\n    @ContentChildren(CaxTemplate) templates: QueryList<CaxTemplate> | undefined;\n\n    get vertical(): boolean {\n        return this.orientation === 'vertical';\n    }\n\n    get containerClass() {\n        return {\n            'p-metergroup p-component': true,\n            'p-metergroup-horizontal': this.orientation === 'horizontal',\n            'p-metergroup-vertical': this.orientation === 'vertical'\n        };\n    }\n\n    labelTemplate: TemplateRef<any> | undefined;\n\n    meterTemplate: TemplateRef<any> | undefined;\n\n    endTemplate: TemplateRef<any> | undefined;\n\n    startTemplate: TemplateRef<any> | undefined;\n\n    iconTemplate: TemplateRef<any> | undefined;\n\n    @ViewChild('container', { read: ElementRef }) container: ElementRef;\n\n    ngAfterViewInit() {\n        const _container = this.container.nativeElement;\n        const height = DomHandler.getOuterHeight(_container);\n        this.vertical && (_container.style.height = height + 'px');\n    }\n\n    ngAfterContentInit() {\n        this.templates?.forEach((item) => {\n            switch (item.getType()) {\n                case 'label':\n                    this.labelTemplate = item.template;\n                    break;\n                case 'meter':\n                    this.meterTemplate = item.template;\n                    break;\n                case 'icon':\n                    this.iconTemplate = item.template;\n                    break;\n                case 'start':\n                    this.startTemplate = item.template;\n                    break;\n                case 'end':\n                    this.endTemplate = item.template;\n                    break;\n                default:\n                    break;\n            }\n        });\n    }\n\n    percent(meter = 0) {\n        const percentOfItem = ((meter - this.min) / (this.max - this.min)) * 100;\n\n        return Math.round(Math.max(0, Math.min(100, percentOfItem)));\n    }\n\n    percentValue(meter) {\n        return this.percent(meter) + '%';\n    }\n\n    meterStyle(val) {\n        return {\n            backgroundColor: val.color,\n            width: this.orientation === 'horizontal' && this.percentValue(val.value),\n            height: this.orientation === 'vertical' && this.percentValue(val.value)\n        };\n    }\n\n    totalPercent() {\n        return this.percent(this.value.reduce((total, val) => total + val.value, 0));\n    }\n\n    percentages() {\n        let sum = 0;\n        const sumsArray = [];\n\n        this.value.forEach((item) => {\n            sum += item.value;\n            sumsArray.push(sum);\n        });\n\n        return sumsArray;\n    }\n\n    trackByFn(index: number): number {\n        return index;\n    }\n}\n\n@NgModule({\n    imports: [CommonModule, SharedModule],\n    exports: [MeterGroup, SharedModule],\n    declarations: [MeterGroup, MeterGroupLabel]\n})\nexport class MeterGroupModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"cax-design-system-metergroup.mjs","sources":["../../src/app/components/metergroup/metergroup.ts","../../src/app/components/metergroup/cax-design-system-metergroup.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport { AfterContentInit, ChangeDetectionStrategy, Component, ContentChildren, ElementRef, Input, NgModule, QueryList, TemplateRef, ViewEncapsulation, effect, forwardRef, inject, ViewChild } from '@angular/core';\nimport { CaxTemplate, SharedModule } from 'cax-design-system/api';\nimport { DomHandler } from 'cax-design-system/dom';\nimport { MeterItem } from './metergroup.interface';\n\n@Component({\n    selector: 'p-meterGroupLabel',\n    template: `\n        <ol [ngClass]=\"labelClass\">\n            <li *ngFor=\"let labelItem of value; let index = index; trackBy: parentInstance.trackByFn\" class=\"p-metergroup-label\">\n                <ng-container *ngIf=\"!iconTemplate\">\n                    <i *ngIf=\"labelItem.icon\" [class]=\"labelItem.icon\" [ngClass]=\"{ 'p-metergroup-label-icon': true }\" [ngStyle]=\"{ color: labelItem.color }\"></i>\n                    <span *ngIf=\"!labelItem.icon\" class=\"p-metergroup-label-marker\" [ngStyle]=\"{ backgroundColor: labelItem.color }\"></span>\n                </ng-container>\n                <ng-container *ngTemplateOutlet=\"iconTemplate; context: { $implicit: labelItem, icon: labelItem.icon }\"></ng-container>\n                <span class=\"p-metergroup-label-text\">{{ labelItem.label }} ({{ parentInstance?.percentValue(labelItem.value) }})</span>\n            </li>\n        </ol>\n    `\n})\nexport class MeterGroupLabel {\n    @Input() value: any[] = null;\n\n    @Input() labelPosition: 'start' | 'end' = 'end';\n\n    @Input() labelOrientation: 'horizontal' | 'vertical' = 'horizontal';\n\n    @Input() min: number;\n\n    @Input() max: number;\n\n    @Input() iconTemplate: TemplateRef<any> | undefined;\n\n    @ContentChildren(CaxTemplate) templates: QueryList<CaxTemplate> | undefined;\n\n    get labelClass(): { [key: string]: boolean } {\n        return {\n            'p-metergroup-labels p-component': true,\n            'p-metergroup-labels-vertical': this.labelOrientation === 'vertical',\n            'p-metergroup-labels-horizontal': this.labelOrientation === 'horizontal'\n        };\n    }\n\n    parentInstance: MeterGroup = inject(forwardRef(() => MeterGroup));\n}\n/**\n * MeterGroup displays scalar measurements within a known range.\n * @group Components\n */\n@Component({\n    selector: 'p-meterGroup',\n    template: `\n        <div #container [ngClass]=\"containerClass\" role=\"meter\" [attr.aria-valuemin]=\"min\" [attr.aria-valuemax]=\"max\" [attr.aria-valuenow]=\"totalPercent()\" [ngStyle]=\"style\" [class]=\"styleClass\">\n            @if (labelPosition === 'start') {\n                <p-meterGroupLabel *ngIf=\"!labelTemplate\" [value]=\"value\" [labelPosition]=\"labelPosition\" [labelOrientation]=\"labelOrientation\" [min]=\"min\" [max]=\"max\" [iconTemplate]=\"iconTemplate\" />\n                <ng-container *ngTemplateOutlet=\"labelTemplate; context: { $implicit: value, totalPercent: totalPercent(), percentages: percentages() }\"></ng-container>\n            }\n            <ng-container *ngTemplateOutlet=\"startTemplate; context: { $implicit: value, totalPercent: totalPercent(), percentages: percentages() }\"></ng-container>\n            <div class=\"p-metergroup-meters\">\n                <ng-container *ngFor=\"let meterItem of value; let index = index; trackBy: trackByFn\">\n                    <ng-container *ngTemplateOutlet=\"meterTemplate; context: { $implicit: meterItem, index: index, orientation: this.orientation, class: 'p-metergroup-meter', size: percentValue(meterItem.value), totalPercent: totalPercent() }\">\n                    </ng-container>\n                    <ng-container *ngIf=\"!meterTemplate && meterItem.value > 0\">\n                        <span class=\"p-metergroup-meter\" [ngStyle]=\"meterStyle(meterItem)\"></span>\n                    </ng-container>\n                </ng-container>\n            </div>\n            <ng-container *ngTemplateOutlet=\"endTemplate; context: { $implicit: value, totalPercent: totalPercent(), percentages: percentages() }\"></ng-container>\n            @if (labelPosition === 'end') {\n                <p-meterGroupLabel *ngIf=\"!labelTemplate\" [value]=\"value\" [labelPosition]=\"labelPosition\" [labelOrientation]=\"labelOrientation\" [min]=\"min\" [max]=\"max\" [iconTemplate]=\"iconTemplate\" />\n                <ng-container *ngTemplateOutlet=\"labelTemplate; context: { $implicit: value, totalPercent: totalPercent(), percentages: percentages() }\"></ng-container>\n            }\n        </div>\n    `,\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None\n})\nexport class MeterGroup implements AfterContentInit {\n    /**\n     * Current value of the metergroup.\n     * @group Props\n     */\n    @Input() value: MeterItem[] | undefined;\n    /**\n     * Mininum boundary value.\n     * @group Props\n     */\n    @Input() min: number = 0;\n    /**\n     * Maximum boundary value.\n     * @group Props\n     */\n    @Input() max: number = 100;\n    /**\n     * Specifies the layout of the component, valid values are 'horizontal' and 'vertical'.\n     * @group Props\n     */\n    @Input() orientation: 'horizontal' | 'vertical' = 'horizontal';\n    /**\n     * Specifies the label position of the component, valid values are 'start' and 'end'.\n     * @group Props\n     */\n    @Input() labelPosition: 'start' | 'end' = 'end';\n    /**\n     * Specifies the label orientation of the component, valid values are 'horizontal' and 'vertical'.\n     * @group Props\n     */\n    @Input() labelOrientation: string = 'horizontal';\n    /**\n     * Inline style of the element.\n     * @group Props\n     */\n    @Input() style: { [klass: string]: any } | null | undefined;\n    /**\n     * Style class of the element.\n     * @group Props\n     */\n    @Input() styleClass: string | undefined;\n\n    @ContentChildren(CaxTemplate) templates: QueryList<CaxTemplate> | undefined;\n\n    get vertical(): boolean {\n        return this.orientation === 'vertical';\n    }\n\n    get containerClass() {\n        return {\n            'p-metergroup p-component': true,\n            'p-metergroup-horizontal': this.orientation === 'horizontal',\n            'p-metergroup-vertical': this.orientation === 'vertical'\n        };\n    }\n\n    labelTemplate: TemplateRef<any> | undefined;\n\n    meterTemplate: TemplateRef<any> | undefined;\n\n    endTemplate: TemplateRef<any> | undefined;\n\n    startTemplate: TemplateRef<any> | undefined;\n\n    iconTemplate: TemplateRef<any> | undefined;\n\n    @ViewChild('container', { read: ElementRef }) container: ElementRef;\n\n    ngAfterViewInit() {\n        const _container = this.container.nativeElement;\n        const height = DomHandler.getOuterHeight(_container);\n        this.vertical && (_container.style.height = height + 'px');\n    }\n\n    ngAfterContentInit() {\n        this.templates?.forEach((item) => {\n            switch (item.getType()) {\n                case 'label':\n                    this.labelTemplate = item.template;\n                    break;\n                case 'meter':\n                    this.meterTemplate = item.template;\n                    break;\n                case 'icon':\n                    this.iconTemplate = item.template;\n                    break;\n                case 'start':\n                    this.startTemplate = item.template;\n                    break;\n                case 'end':\n                    this.endTemplate = item.template;\n                    break;\n                default:\n                    break;\n            }\n        });\n    }\n\n    percent(meter = 0) {\n        const percentOfItem = ((meter - this.min) / (this.max - this.min)) * 100;\n\n        return Math.round(Math.max(0, Math.min(100, percentOfItem)));\n    }\n\n    percentValue(meter) {\n        return this.percent(meter) + '%';\n    }\n\n    meterStyle(val) {\n        return {\n            backgroundColor: val.color,\n            width: this.orientation === 'horizontal' && this.percentValue(val.value),\n            height: this.orientation === 'vertical' && this.percentValue(val.value)\n        };\n    }\n\n    totalPercent() {\n        return this.percent(this.value.reduce((total, val) => total + val.value, 0));\n    }\n\n    percentages() {\n        let sum = 0;\n        const sumsArray = [];\n\n        this.value.forEach((item) => {\n            sum += item.value;\n            sumsArray.push(sum);\n        });\n\n        return sumsArray;\n    }\n\n    trackByFn(index: number): number {\n        return index;\n    }\n}\n\n@NgModule({\n    imports: [CommonModule, SharedModule],\n    exports: [MeterGroup, SharedModule],\n    declarations: [MeterGroup, MeterGroupLabel]\n})\nexport class MeterGroupModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}

package/fesm2022/cax-design-system-multiselect.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { forwardRef, EventEmitter, booleanAttribute, numberAttribute, Component, ViewEncapsulation, Input, Output, signal, computed, effect, ChangeDetectionStrategy, ViewChild, ContentChild, ContentChildren, NgModule } from '@angular/core';
+import { forwardRef, EventEmitter, booleanAttribute, numberAttribute, Output, Input, ViewEncapsulation, Component, signal, computed, effect, ContentChildren, ContentChild, ViewChild, ChangeDetectionStrategy, NgModule } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import * as i1 from 'cax-design-system/api';
 import { TranslationKeys, Footer, Header, CaxTemplate, SharedModule } from 'cax-design-system/api';
@@ -68,13 +68,13 @@ class MultiSelectItem {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: MultiSelectItem, deps: [{ token: i1.caxConfig }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.2.9", type: MultiSelectItem, selector: "cax-multiSelectItem", inputs: { id: "id", option: "option", selected: ["selected", "selected", booleanAttribute], label: "label", disabled: ["disabled", "disabled", booleanAttribute], itemSize: ["itemSize", "itemSize", numberAttribute], focused: ["focused", "focused", booleanAttribute], ariaPosInset: "ariaPosInset", ariaSetSize: "ariaSetSize", template: "template", checkIconTemplate: "checkIconTemplate", itemCheckboxIconTemplate: "itemCheckboxIconTemplate" }, outputs: { onClick: "onClick", onMouseEnter: "onMouseEnter" }, host: { classAttribute: "cax-element" }, ngImport: i0, template: "<li\n    caxRipple\n    role=\"option\"\n    [ngStyle]=\"{ height: itemSize + 'px' }\"\n    class=\"cax-multiselect-item\"\n    [ngClass]=\"{ 'cax-multiselect-item': true, 'cax-disabled': disabled, 'cax-focus': focused }\"\n    [id]=\"id\"\n    [attr.aria-label]=\"label\"\n    [attr.aria-setsize]=\"ariaSetSize\"\n    [attr.aria-posinset]=\"ariaPosInset\"\n    [attr.aria-selected]=\"selected\"\n    [attr.data-cax-focused]=\"focused\"\n    [attr.data-cax-highlight]=\"selected\"\n    [attr.data-cax-disabled]=\"disabled\"\n    [attr.aria-checked]=\"selected\"\n    (click)=\"onOptionClick($event)\"\n    (mouseenter)=\"onOptionMouseEnter($event)\"\n>\n    <div class=\"cax-checkbox cax-component\" [ngClass]=\"{ 'cax-variant-filled': config.inputStyle() === 'filled' }\">\n        <div class=\"cax-checkbox-box\" [ngClass]=\"{ 'cax-highlight': selected }\">\n            <ng-container *ngIf=\"selected\">\n                <CheckIcon *ngIf=\"!checkIconTemplate && !itemCheckboxIconTemplate\" [styleClass]=\"'cax-checkbox-icon'\" [attr.aria-hidden]=\"true\" />\n                <span *ngIf=\"checkIconTemplate\" class=\"cax-checkbox-icon\" [attr.aria-hidden]=\"true\">\n                    <ng-template *ngTemplateOutlet=\"checkIconTemplate\"></ng-template>\n                </span>\n                <span *ngIf=\"itemCheckboxIconTemplate\" class=\"cax-checkbox-icon\" [attr.aria-hidden]=\"true\">\n                    <ng-template *ngTemplateOutlet=\"itemCheckboxIconTemplate; context: { $implicit: selected }\"></ng-template>\n                </span>\n            </ng-container>\n        </div>\n    </div>\n    <span *ngIf=\"!template\">{{ label ?? 'empty' }}</span>\n    <ng-container *ngTemplateOutlet=\"template; context: { $implicit: option }\"></ng-container>\n</li>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i3.Ripple, selector: "[caxRipple]" }, { kind: "component", type: i4.CheckIcon, selector: "CheckIcon" }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.2.9", type: MultiSelectItem, selector: "cax-multiSelectItem", inputs: { id: "id", option: "option", selected: ["selected", "selected", booleanAttribute], label: "label", disabled: ["disabled", "disabled", booleanAttribute], itemSize: ["itemSize", "itemSize", numberAttribute], focused: ["focused", "focused", booleanAttribute], ariaPosInset: "ariaPosInset", ariaSetSize: "ariaSetSize", template: "template", checkIconTemplate: "checkIconTemplate", itemCheckboxIconTemplate: "itemCheckboxIconTemplate" }, outputs: { onClick: "onClick", onMouseEnter: "onMouseEnter" }, host: { classAttribute: "cax-element" }, ngImport: i0, template: "<li\r\n    caxRipple\r\n    role=\"option\"\r\n    [ngStyle]=\"{ height: itemSize + 'px' }\"\r\n    class=\"cax-multiselect-item\"\r\n    [ngClass]=\"{ 'cax-multiselect-item': true, 'cax-disabled': disabled, 'cax-focus': focused }\"\r\n    [id]=\"id\"\r\n    [attr.aria-label]=\"label\"\r\n    [attr.aria-setsize]=\"ariaSetSize\"\r\n    [attr.aria-posinset]=\"ariaPosInset\"\r\n    [attr.aria-selected]=\"selected\"\r\n    [attr.data-cax-focused]=\"focused\"\r\n    [attr.data-cax-highlight]=\"selected\"\r\n    [attr.data-cax-disabled]=\"disabled\"\r\n    [attr.aria-checked]=\"selected\"\r\n    (click)=\"onOptionClick($event)\"\r\n    (mouseenter)=\"onOptionMouseEnter($event)\"\r\n>\r\n    <div class=\"cax-checkbox cax-component\" [ngClass]=\"{ 'cax-variant-filled': config.inputStyle() === 'filled' }\">\r\n        <div class=\"cax-checkbox-box\" [ngClass]=\"{ 'cax-highlight': selected }\">\r\n            <ng-container *ngIf=\"selected\">\r\n                <CheckIcon *ngIf=\"!checkIconTemplate && !itemCheckboxIconTemplate\" [styleClass]=\"'cax-checkbox-icon'\" [attr.aria-hidden]=\"true\" />\r\n                <span *ngIf=\"checkIconTemplate\" class=\"cax-checkbox-icon\" [attr.aria-hidden]=\"true\">\r\n                    <ng-template *ngTemplateOutlet=\"checkIconTemplate\"></ng-template>\r\n                </span>\r\n                <span *ngIf=\"itemCheckboxIconTemplate\" class=\"cax-checkbox-icon\" [attr.aria-hidden]=\"true\">\r\n                    <ng-template *ngTemplateOutlet=\"itemCheckboxIconTemplate; context: { $implicit: selected }\"></ng-template>\r\n                </span>\r\n            </ng-container>\r\n        </div>\r\n    </div>\r\n    <span *ngIf=\"!template\">{{ label ?? 'empty' }}</span>\r\n    <ng-container *ngTemplateOutlet=\"template; context: { $implicit: option }\"></ng-container>\r\n</li>\r\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i3.Ripple, selector: "[caxRipple]" }, { kind: "component", type: i4.CheckIcon, selector: "CheckIcon" }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: MultiSelectItem, decorators: [{
             type: Component,
             args: [{ selector: 'cax-multiSelectItem', encapsulation: ViewEncapsulation.None, host: {
                         class: 'cax-element'
-                    }, template: "<li\n    caxRipple\n    role=\"option\"\n    [ngStyle]=\"{ height: itemSize + 'px' }\"\n    class=\"cax-multiselect-item\"\n    [ngClass]=\"{ 'cax-multiselect-item': true, 'cax-disabled': disabled, 'cax-focus': focused }\"\n    [id]=\"id\"\n    [attr.aria-label]=\"label\"\n    [attr.aria-setsize]=\"ariaSetSize\"\n    [attr.aria-posinset]=\"ariaPosInset\"\n    [attr.aria-selected]=\"selected\"\n    [attr.data-cax-focused]=\"focused\"\n    [attr.data-cax-highlight]=\"selected\"\n    [attr.data-cax-disabled]=\"disabled\"\n    [attr.aria-checked]=\"selected\"\n    (click)=\"onOptionClick($event)\"\n    (mouseenter)=\"onOptionMouseEnter($event)\"\n>\n    <div class=\"cax-checkbox cax-component\" [ngClass]=\"{ 'cax-variant-filled': config.inputStyle() === 'filled' }\">\n        <div class=\"cax-checkbox-box\" [ngClass]=\"{ 'cax-highlight': selected }\">\n            <ng-container *ngIf=\"selected\">\n                <CheckIcon *ngIf=\"!checkIconTemplate && !itemCheckboxIconTemplate\" [styleClass]=\"'cax-checkbox-icon'\" [attr.aria-hidden]=\"true\" />\n                <span *ngIf=\"checkIconTemplate\" class=\"cax-checkbox-icon\" [attr.aria-hidden]=\"true\">\n                    <ng-template *ngTemplateOutlet=\"checkIconTemplate\"></ng-template>\n                </span>\n                <span *ngIf=\"itemCheckboxIconTemplate\" class=\"cax-checkbox-icon\" [attr.aria-hidden]=\"true\">\n                    <ng-template *ngTemplateOutlet=\"itemCheckboxIconTemplate; context: { $implicit: selected }\"></ng-template>\n                </span>\n            </ng-container>\n        </div>\n    </div>\n    <span *ngIf=\"!template\">{{ label ?? 'empty' }}</span>\n    <ng-container *ngTemplateOutlet=\"template; context: { $implicit: option }\"></ng-container>\n</li>\n" }]
+                    }, template: "<li\r\n    caxRipple\r\n    role=\"option\"\r\n    [ngStyle]=\"{ height: itemSize + 'px' }\"\r\n    class=\"cax-multiselect-item\"\r\n    [ngClass]=\"{ 'cax-multiselect-item': true, 'cax-disabled': disabled, 'cax-focus': focused }\"\r\n    [id]=\"id\"\r\n    [attr.aria-label]=\"label\"\r\n    [attr.aria-setsize]=\"ariaSetSize\"\r\n    [attr.aria-posinset]=\"ariaPosInset\"\r\n    [attr.aria-selected]=\"selected\"\r\n    [attr.data-cax-focused]=\"focused\"\r\n    [attr.data-cax-highlight]=\"selected\"\r\n    [attr.data-cax-disabled]=\"disabled\"\r\n    [attr.aria-checked]=\"selected\"\r\n    (click)=\"onOptionClick($event)\"\r\n    (mouseenter)=\"onOptionMouseEnter($event)\"\r\n>\r\n    <div class=\"cax-checkbox cax-component\" [ngClass]=\"{ 'cax-variant-filled': config.inputStyle() === 'filled' }\">\r\n        <div class=\"cax-checkbox-box\" [ngClass]=\"{ 'cax-highlight': selected }\">\r\n            <ng-container *ngIf=\"selected\">\r\n                <CheckIcon *ngIf=\"!checkIconTemplate && !itemCheckboxIconTemplate\" [styleClass]=\"'cax-checkbox-icon'\" [attr.aria-hidden]=\"true\" />\r\n                <span *ngIf=\"checkIconTemplate\" class=\"cax-checkbox-icon\" [attr.aria-hidden]=\"true\">\r\n                    <ng-template *ngTemplateOutlet=\"checkIconTemplate\"></ng-template>\r\n                </span>\r\n                <span *ngIf=\"itemCheckboxIconTemplate\" class=\"cax-checkbox-icon\" [attr.aria-hidden]=\"true\">\r\n                    <ng-template *ngTemplateOutlet=\"itemCheckboxIconTemplate; context: { $implicit: selected }\"></ng-template>\r\n                </span>\r\n            </ng-container>\r\n        </div>\r\n    </div>\r\n    <span *ngIf=\"!template\">{{ label ?? 'empty' }}</span>\r\n    <ng-container *ngTemplateOutlet=\"template; context: { $implicit: option }\"></ng-container>\r\n</li>\r\n" }]
         }], ctorParameters: () => [{ type: i1.caxConfig }], propDecorators: { id: [{
                 type: Input
             }], option: [{
@@ -1657,7 +1657,7 @@ class MultiSelect {
         return this._filterValue() && this._filterValue().trim().length > 0;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: MultiSelect, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i1.FilterService }, { token: i1.caxConfig }, { token: i1.OverlayService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.2.9", type: MultiSelect, selector: "cax-multiSelect", inputs: { labelText: "labelText", id: "id", ariaLabel: "ariaLabel", style: "style", styleClass: "styleClass", panelStyle: "panelStyle", panelStyleClass: "panelStyleClass", inputId: "inputId", disabled: ["disabled", "disabled", booleanAttribute], readonly: ["readonly", "readonly", booleanAttribute], group: ["group", "group", booleanAttribute], filter: ["filter", "filter", booleanAttribute], filterPlaceHolder: "filterPlaceHolder", filterLocale: "filterLocale", overlayVisible: ["overlayVisible", "overlayVisible", booleanAttribute], tabindex: ["tabindex", "tabindex", numberAttribute], variant: "variant", appendTo: "appendTo", dataKey: "dataKey", name: "name", ariaLabelledBy: "ariaLabelledBy", displaySelectedLabel: "displaySelectedLabel", maxSelectedLabels: "maxSelectedLabels", selectionLimit: ["selectionLimit", "selectionLimit", (value) => numberAttribute(value, null)], selectedItemsLabel: "selectedItemsLabel", showToggleAll: ["showToggleAll", "showToggleAll", booleanAttribute], emptyFilterMessage: "emptyFilterMessage", emptyMessage: "emptyMessage", resetFilterOnHide: ["resetFilterOnHide", "resetFilterOnHide", booleanAttribute], dropdownIcon: "dropdownIcon", optionLabel: "optionLabel", optionValue: "optionValue", optionDisabled: "optionDisabled", optionGroupLabel: "optionGroupLabel", optionGroupChildren: "optionGroupChildren", showHeader: ["showHeader", "showHeader", booleanAttribute], filterBy: "filterBy", scrollHeight: "scrollHeight", lazy: ["lazy", "lazy", booleanAttribute], virtualScroll: ["virtualScroll", "virtualScroll", booleanAttribute], loading: ["loading", "loading", booleanAttribute], virtualScrollItemSize: ["virtualScrollItemSize", "virtualScrollItemSize", numberAttribute], loadingIcon: "loadingIcon", virtualScrollOptions: "virtualScrollOptions", overlayOptions: "overlayOptions", ariaFilterLabel: "ariaFilterLabel", filterMatchMode: "filterMatchMode", tooltip: "tooltip", tooltipPosition: "tooltipPosition", tooltipPositionStyle: "tooltipPositionStyle", tooltipStyleClass: "tooltipStyleClass", autofocusFilter: ["autofocusFilter", "autofocusFilter", booleanAttribute], display: "display", autocomplete: "autocomplete", showClear: ["showClear", "showClear", booleanAttribute], autofocus: ["autofocus", "autofocus", booleanAttribute], autoZIndex: "autoZIndex", baseZIndex: "baseZIndex", showTransitionOptions: "showTransitionOptions", hideTransitionOptions: "hideTransitionOptions", defaultLabel: "defaultLabel", placeholder: "placeholder", options: "options", filterValue: "filterValue", itemSize: "itemSize", selectAll: "selectAll", focusOnHover: ["focusOnHover", "focusOnHover", booleanAttribute], filterFields: "filterFields", selectOnFocus: ["selectOnFocus", "selectOnFocus", booleanAttribute], autoOptionFocus: ["autoOptionFocus", "autoOptionFocus", booleanAttribute] }, 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.cax-inputwrapper-focus": "focused || overlayVisible", "class.cax-inputwrapper-filled": "filled" }, classAttribute: "cax-element cax-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: CaxTemplate }], 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 class=\"cax-dropdown-container\">\n    <label *ngIf=\"labelText\" [ngClass]=\"labelTextClass\">{{ labelText }}</label>\n    <div #container [attr.id]=\"id\" [ngClass]=\"containerClass\" [ngStyle]=\"style\" [class]=\"styleClass\" (click)=\"onContainerClick($event)\">\n        <div class=\"cax-hidden-accessible\" [attr.data-cax-hidden-accessible]=\"true\">\n            <input\n                #focusInput\n                [caxTooltip]=\"tooltip\"\n                [tooltipPosition]=\"tooltipPosition\"\n                [positionStyle]=\"tooltipPositionStyle\"\n                [tooltipStyleClass]=\"tooltipStyleClass\"\n                [attr.aria-disabled]=\"disabled\"\n                [attr.id]=\"inputId\"\n                role=\"combobox\"\n                [attr.aria-label]=\"ariaLabel\"\n                [attr.aria-labelledby]=\"ariaLabelledBy\"\n                [attr.aria-haspopup]=\"'listbox'\"\n                [attr.aria-expanded]=\"overlayVisible ?? false\"\n                [attr.aria-controls]=\"overlayVisible ? id + '_list' : null\"\n                [attr.tabindex]=\"!disabled ? tabindex : -1\"\n                [attr.aria-activedescendant]=\"focused ? focusedOptionId : undefined\"\n                (focus)=\"onInputFocus($event)\"\n                (blur)=\"onInputBlur($event)\"\n                (keydown)=\"onKeyDown($event)\"\n                caxAutoFocus\n                [autofocus]=\"autofocus\"\n                [attr.value]=\"label() || 'empty'\"\n            />\n        </div>\n        <div\n            class=\"cax-multiselect-label-container\"\n            [caxTooltip]=\"tooltip\"\n            (mouseleave)=\"labelContainerMouseLeave()\"\n            [tooltipDisabled]=\"_disableTooltip\"\n            [tooltipPosition]=\"tooltipPosition\"\n            [positionStyle]=\"tooltipPositionStyle\"\n            [tooltipStyleClass]=\"tooltipStyleClass\"\n        >\n            <div [ngClass]=\"labelClass\">\n                <ng-container *ngIf=\"!selectedItemsTemplate\">\n                    <ng-container *ngIf=\"display === 'comma'\">{{ label() || 'empty' }}</ng-container>\n                    <ng-container *ngIf=\"display === 'chip'\">\n                        <div #token *ngFor=\"let item of chipSelectedItems(); let i = index\" class=\"cax-multiselect-token\">\n                            <span class=\"cax-multiselect-token-label\">{{ getLabelByValue(item) }}</span>\n                            <ng-container *ngIf=\"!disabled\">\n                                <TimesCircleIcon\n                                    *ngIf=\"!removeTokenIconTemplate\"\n                                    [ngClass]=\"{ 'cax-disabled': isOptionDisabled(item) }\"\n                                    [styleClass]=\"'cax-multiselect-token-icon'\"\n                                    (click)=\"removeOption(item, event)\"\n                                    [attr.data-pc-section]=\"'clearicon'\"\n                                    [attr.aria-hidden]=\"true\"\n                                />\n                                <span *ngIf=\"removeTokenIconTemplate\" class=\"cax-multiselect-token-icon\" (click)=\"removeOption(item, event)\" [attr.data-pc-section]=\"'clearicon'\" [attr.aria-hidden]=\"true\">\n                                    <ng-container *ngTemplateOutlet=\"removeTokenIconTemplate\"></ng-container>\n                                </span>\n                            </ng-container>\n                        </div>\n                        <ng-container *ngIf=\"!modelValue() || modelValue().length === 0\">{{ placeholder() || defaultLabel || 'empty' }}</ng-container>\n                    </ng-container>\n                </ng-container>\n                <ng-container *ngTemplateOutlet=\"selectedItemsTemplate; context: { $implicit: selectedOptions, removeChip: removeOption.bind(this) }\"></ng-container>\n            </div>\n            <ng-container *ngIf=\"isVisibleClearIcon\">\n                <TimesIcon *ngIf=\"!clearIconTemplate\" [styleClass]=\"'cax-multiselect-clear-icon'\" (click)=\"clear($event)\" [attr.data-pc-section]=\"'clearicon'\" [attr.aria-hidden]=\"true\" />\n                <span *ngIf=\"clearIconTemplate\" class=\"cax-multiselect-clear-icon\" (click)=\"clear($event)\" [attr.data-pc-section]=\"'clearicon'\" [attr.aria-hidden]=\"true\">\n                    <ng-template *ngTemplateOutlet=\"clearIconTemplate\"></ng-template>\n                </span>\n            </ng-container>\n        </div>\n        <div class=\"cax-multiselect-trigger\">\n            <ng-container *ngIf=\"loading; else elseBlock\">\n                <ng-container *ngIf=\"loadingIconTemplate\">\n                    <ng-container *ngTemplateOutlet=\"loadingIconTemplate\"></ng-container>\n                </ng-container>\n                <ng-container *ngIf=\"!loadingIconTemplate\">\n                    <span *ngIf=\"loadingIcon\" [ngClass]=\"'cax-multiselect-trigger-icon pi-spin ' + loadingIcon\" aria-hidden=\"true\"></span>\n                    <span *ngIf=\"!loadingIcon\" [class]=\"'cax-multiselect-trigger-icon pi pi-spinner pi-spin'\" aria-hidden=\"true\"></span>\n                </ng-container>\n            </ng-container>\n            <ng-template #elseBlock>\n                <ng-container *ngIf=\"!dropdownIconTemplate\">\n                    <span *ngIf=\"dropdownIcon\" class=\"cax-multiselect-trigger-icon\" [ngClass]=\"dropdownIcon\" [attr.data-pc-section]=\"'triggericon'\" [attr.aria-hidden]=\"true\"></span>\n                    <!-- <ChevronDownIcon *ngIf=\"!dropdownIcon\" [styleClass]=\"'cax-multiselect-trigger-icon'\" [attr.data-pc-section]=\"'triggericon'\" [attr.aria-hidden]=\"true\" /> -->\n                    <i *ngIf=\"!dropdownIcon\" class=\"cax cax-alt-arrow-down\"></i>\n                </ng-container>\n                <span *ngIf=\"dropdownIconTemplate\" class=\"cax-multiselect-trigger-icon\" [attr.data-pc-section]=\"'triggericon'\" [attr.aria-hidden]=\"true\">\n                    <ng-template *ngTemplateOutlet=\"dropdownIconTemplate\"></ng-template>\n                </span>\n            </ng-template>\n        </div>\n        <cax-overlay\n            #overlay\n            [(visible)]=\"overlayVisible\"\n            [options]=\"overlayOptions\"\n            [target]=\"'@parent'\"\n            [appendTo]=\"appendTo\"\n            [autoZIndex]=\"autoZIndex\"\n            [baseZIndex]=\"baseZIndex\"\n            [showTransitionOptions]=\"showTransitionOptions\"\n            [hideTransitionOptions]=\"hideTransitionOptions\"\n            (onAnimationStart)=\"onOverlayAnimationStart($event)\"\n            (onHide)=\"hide()\"\n        >\n            <ng-template caxTemplate=\"content\">\n                <div [attr.id]=\"id + '_list'\" [ngClass]=\"'cax-multiselect-panel cax-component'\" [ngStyle]=\"panelStyle\" [class]=\"panelStyleClass\">\n                    <span\n                        #firstHiddenFocusableEl\n                        role=\"presentation\"\n                        class=\"cax-hidden-accessible cax-hidden-focusable\"\n                        [attr.tabindex]=\"0\"\n                        (focus)=\"onFirstHiddenFocus($event)\"\n                        [attr.data-cax-hidden-accessible]=\"true\"\n                        [attr.data-cax-hidden-focusable]=\"true\"\n                    >\n                    </span>\n                    <div class=\"cax-multiselect-header\" *ngIf=\"showHeader\">\n                        <ng-content select=\"cax-header\"></ng-content>\n                        <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\n                        <ng-container *ngIf=\"filterTemplate; else builtInFilterElement\">\n                            <ng-container *ngTemplateOutlet=\"filterTemplate; context: { options: filterOptions }\"></ng-container>\n                        </ng-container>\n                        <ng-template #builtInFilterElement>\n                            <div class=\"cax-multiselect-filter-container\" *ngIf=\"filter\">\n                                <input\n                                    #filterInput\n                                    type=\"text\"\n                                    role=\"searchbox\"\n                                    [attr.autocomplete]=\"autocomplete\"\n                                    [attr.placeholder]=\"filterPlaceHolder\"\n                                    role=\"searchbox\"\n                                    [attr.aria-owns]=\"id + '_list'\"\n                                    [attr.aria-activedescendant]=\"focusedOptionId\"\n                                    [value]=\"_filterValue() || ''\"\n                                    (input)=\"onFilterInputChange($event)\"\n                                    (keydown)=\"onFilterKeyDown($event)\"\n                                    (click)=\"onInputClick($event)\"\n                                    (blur)=\"onFilterBlur($event)\"\n                                    class=\"cax-multiselect-filter cax-inputtext cax-component\"\n                                    [disabled]=\"disabled\"\n                                    [attr.placeholder]=\"filterPlaceHolder\"\n                                    [attr.aria-label]=\"ariaFilterLabel\"\n                                />\n                                <SearchIcon [styleClass]=\"'cax-multiselect-filter-icon'\" *ngIf=\"!filterIconTemplate\" />\n                                <span *ngIf=\"filterIconTemplate\" class=\"cax-multiselect-filter-icon\">\n                                    <ng-template *ngTemplateOutlet=\"filterIconTemplate\"></ng-template>\n                                </span>\n                            </div>\n                        </ng-template>\n                    </div>\n                    <div class=\"cax-multiselect-items-wrapper\" [ngStyle]=\"{ 'max-height': virtualScroll ? 'auto' : scrollHeight || 'auto' }\">\n                        <cax-scroller\n                            *ngIf=\"virtualScroll\"\n                            #scroller\n                            [items]=\"visibleOptions()\"\n                            [style]=\"{ height: scrollHeight }\"\n                            [itemSize]=\"virtualScrollItemSize || _itemSize\"\n                            [autoSize]=\"true\"\n                            [tabindex]=\"-1\"\n                            [lazy]=\"lazy\"\n                            (onLazyLoad)=\"onLazyLoad.emit($event)\"\n                            [options]=\"virtualScrollOptions\"\n                        >\n                            <ng-template caxTemplate=\"content\" let-items let-scrollerOptions=\"options\">\n                                <ng-container *ngTemplateOutlet=\"buildInItems; context: { $implicit: items, options: scrollerOptions }\"></ng-container>\n                            </ng-template>\n                            <ng-container *ngIf=\"loaderTemplate\">\n                                <ng-template caxTemplate=\"loader\" let-scrollerOptions=\"options\">\n                                    <ng-container *ngTemplateOutlet=\"loaderTemplate; context: { options: scrollerOptions }\"></ng-container>\n                                </ng-template>\n                            </ng-container>\n                        </cax-scroller>\n                        <ng-container *ngIf=\"!virtualScroll\">\n                            <ng-container *ngTemplateOutlet=\"buildInItems; context: { $implicit: visibleOptions(), options: {} }\"></ng-container>\n                        </ng-container>\n\n                        <ng-template #buildInItems let-items let-scrollerOptions=\"options\">\n                            <ul #items class=\"cax-multiselect-items cax-component\" [ngClass]=\"scrollerOptions.contentStyleClass\" [ngStyle]=\"scrollerOptions.contentStyle\" role=\"listbox\" aria-multiselectable=\"true\" [attr.aria-label]=\"listLabel\">\n                                <ng-template ngFor let-option [ngForOf]=\"items\" let-i=\"index\">\n                                    <ng-container *ngIf=\"isOptionGroup(option)\">\n                                        <li [attr.id]=\"id + '_' + getOptionIndex(i, scrollerOptions)\" class=\"cax-multiselect-item-group\" [ngStyle]=\"{ height: scrollerOptions.itemSize + 'px' }\" role=\"option\">\n                                            <span *ngIf=\"!groupTemplate\">{{ getOptionGroupLabel(option.optionGroup) }}</span>\n                                            <ng-container *ngTemplateOutlet=\"groupTemplate; context: { $implicit: option.optionGroup }\"></ng-container>\n                                        </li>\n                                    </ng-container>\n                                    <ng-container *ngIf=\"!isOptionGroup(option)\">\n                                        <cax-multiSelectItem\n                                            [id]=\"id + '_' + getOptionIndex(i, scrollerOptions)\"\n                                            [option]=\"option\"\n                                            [selected]=\"isSelected(option)\"\n                                            [label]=\"getOptionLabel(option)\"\n                                            [disabled]=\"isOptionDisabled(option)\"\n                                            [template]=\"itemTemplate\"\n                                            [checkIconTemplate]=\"checkIconTemplate\"\n                                            [itemCheckboxIconTemplate]=\"itemCheckboxIconTemplate\"\n                                            [itemSize]=\"scrollerOptions.itemSize\"\n                                            [focused]=\"focusedOptionIndex() === getOptionIndex(i, scrollerOptions)\"\n                                            [ariaPosInset]=\"getAriaPosInset(getOptionIndex(i, scrollerOptions))\"\n                                            [ariaSetSize]=\"ariaSetSize\"\n                                            (onClick)=\"onOptionSelect($event, false, getOptionIndex(i, scrollerOptions))\"\n                                            (onMouseEnter)=\"onOptionMouseEnter($event, getOptionIndex(i, scrollerOptions))\"\n                                        ></cax-multiSelectItem>\n                                    </ng-container>\n                                </ng-template>\n\n                                <li *ngIf=\"hasFilter() && isEmpty()\" class=\"cax-multiselect-empty-message\" [ngStyle]=\"{ height: scrollerOptions.itemSize + 'px' }\" role=\"option\">\n                                    <ng-container *ngIf=\"!emptyFilterTemplate && !emptyTemplate; else emptyFilter\"> {{ emptyFilterMessageLabel }} </ng-container>\n                                    <ng-container #emptyFilter *ngTemplateOutlet=\"emptyFilterTemplate || emptyTemplate\"></ng-container>\n                                </li>\n                                <li *ngIf=\"!hasFilter() && isEmpty()\" class=\"cax-multiselect-empty-message\" [ngStyle]=\"{ height: scrollerOptions.itemSize + 'px' }\" role=\"option\">\n                                    <ng-container *ngIf=\"!emptyTemplate; else empty\"> {{ emptyMessageLabel }} </ng-container>\n                                    <ng-container #empty *ngTemplateOutlet=\"emptyTemplate\"></ng-container>\n                                </li>\n                            </ul>\n                        </ng-template>\n                    </div>\n                    <div class=\"cax-multiselect-footer\" *ngIf=\"footerFacet || footerTemplate\">\n                        <ng-content select=\"cax-footer\"></ng-content>\n                        <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\n                    </div>\n\n                    <span\n                        #lastHiddenFocusableEl\n                        role=\"presentation\"\n                        class=\"cax-hidden-accessible cax-hidden-focusable\"\n                        [attr.tabindex]=\"0\"\n                        (focus)=\"onLastHiddenFocus($event)\"\n                        [attr.data-cax-hidden-accessible]=\"true\"\n                        [attr.data-cax-hidden-focusable]=\"true\"\n                    ></span>\n                </div>\n            </ng-template>\n        </cax-overlay>\n    </div>\n</div>\n", styles: ["@layer cax{.cax-dropdown-container{display:flex;flex-direction:column;align-items:flex-start}.cax-dropdown-container label{margin-bottom:8px;font-size:14px;font-weight:500;line-height:20px}.cax-dropdown-container label.left-aligned{text-align:left}.cax-multiselect{display:inline-flex;cursor:pointer;position:relative;-webkit-user-select:none;user-select:none}.cax-multiselect-trigger{display:flex;align-items:center;justify-content:center;flex-shrink:0}.cax-multiselect-label-container{overflow:hidden;flex:1 1 auto;cursor:pointer;display:flex}.cax-multiselect-label{display:block;white-space:nowrap;cursor:pointer;overflow:hidden;text-overflow:ellipsis}.cax-multiselect-label-empty{overflow:hidden;visibility:hidden}.cax-multiselect-token{cursor:default;display:inline-flex;align-items:center;flex:0 0 auto}.cax-multiselect-token-icon{cursor:pointer}.cax-multiselect-token-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100px}.cax-multiselect-items-wrapper{overflow:auto}.cax-multiselect-items{margin:0;padding:0;list-style-type:none}.cax-multiselect-item{cursor:pointer;display:flex;align-items:center;font-weight:400;white-space:nowrap;position:relative;overflow:hidden}.cax-multiselect-header{display:flex;align-items:center;justify-content:space-between}.cax-multiselect-filter-container{position:relative;flex:1 1 auto}.cax-multiselect-filter-icon{position:absolute;top:50%;margin-top:-.5rem}.cax-multiselect-filter-container .cax-inputtext{width:100%}.cax-multiselect-close{display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden;position:relative}.cax-fluid .cax-multiselect{display:flex}.cax-multiselect-clear-icon{position:absolute;top:50%;margin-top:-.5rem;cursor:pointer}.cax-multiselect-clearable{position:relative}}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i5.Overlay, selector: "cax-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: i1.CaxTemplate, selector: "[caxTemplate]", inputs: ["type", "caxTemplate"] }, { kind: "directive", type: i6.Tooltip, selector: "[caxTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "caxTooltip", "tooltipDisabled", "tooltipOptions", "linkUrl", "linkText"] }, { kind: "component", type: i7.Scroller, selector: "cax-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: "directive", type: i8.AutoFocus, selector: "[caxAutoFocus]", inputs: ["autofocus"] }, { kind: "component", type: i9.SearchIcon, selector: "SearchIcon" }, { kind: "component", type: i10.TimesCircleIcon, selector: "TimesCircleIcon" }, { kind: "component", type: i11.TimesIcon, selector: "TimesIcon" }, { kind: "component", type: MultiSelectItem, selector: "cax-multiSelectItem", inputs: ["id", "option", "selected", "label", "disabled", "itemSize", "focused", "ariaPosInset", "ariaSetSize", "template", "checkIconTemplate", "itemCheckboxIconTemplate"], outputs: ["onClick", "onMouseEnter"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.2.9", type: MultiSelect, selector: "cax-multiSelect", inputs: { labelText: "labelText", id: "id", ariaLabel: "ariaLabel", style: "style", styleClass: "styleClass", panelStyle: "panelStyle", panelStyleClass: "panelStyleClass", inputId: "inputId", disabled: ["disabled", "disabled", booleanAttribute], readonly: ["readonly", "readonly", booleanAttribute], group: ["group", "group", booleanAttribute], filter: ["filter", "filter", booleanAttribute], filterPlaceHolder: "filterPlaceHolder", filterLocale: "filterLocale", overlayVisible: ["overlayVisible", "overlayVisible", booleanAttribute], tabindex: ["tabindex", "tabindex", numberAttribute], variant: "variant", appendTo: "appendTo", dataKey: "dataKey", name: "name", ariaLabelledBy: "ariaLabelledBy", displaySelectedLabel: "displaySelectedLabel", maxSelectedLabels: "maxSelectedLabels", selectionLimit: ["selectionLimit", "selectionLimit", (value) => numberAttribute(value, null)], selectedItemsLabel: "selectedItemsLabel", showToggleAll: ["showToggleAll", "showToggleAll", booleanAttribute], emptyFilterMessage: "emptyFilterMessage", emptyMessage: "emptyMessage", resetFilterOnHide: ["resetFilterOnHide", "resetFilterOnHide", booleanAttribute], dropdownIcon: "dropdownIcon", optionLabel: "optionLabel", optionValue: "optionValue", optionDisabled: "optionDisabled", optionGroupLabel: "optionGroupLabel", optionGroupChildren: "optionGroupChildren", showHeader: ["showHeader", "showHeader", booleanAttribute], filterBy: "filterBy", scrollHeight: "scrollHeight", lazy: ["lazy", "lazy", booleanAttribute], virtualScroll: ["virtualScroll", "virtualScroll", booleanAttribute], loading: ["loading", "loading", booleanAttribute], virtualScrollItemSize: ["virtualScrollItemSize", "virtualScrollItemSize", numberAttribute], loadingIcon: "loadingIcon", virtualScrollOptions: "virtualScrollOptions", overlayOptions: "overlayOptions", ariaFilterLabel: "ariaFilterLabel", filterMatchMode: "filterMatchMode", tooltip: "tooltip", tooltipPosition: "tooltipPosition", tooltipPositionStyle: "tooltipPositionStyle", tooltipStyleClass: "tooltipStyleClass", autofocusFilter: ["autofocusFilter", "autofocusFilter", booleanAttribute], display: "display", autocomplete: "autocomplete", showClear: ["showClear", "showClear", booleanAttribute], autofocus: ["autofocus", "autofocus", booleanAttribute], autoZIndex: "autoZIndex", baseZIndex: "baseZIndex", showTransitionOptions: "showTransitionOptions", hideTransitionOptions: "hideTransitionOptions", defaultLabel: "defaultLabel", placeholder: "placeholder", options: "options", filterValue: "filterValue", itemSize: "itemSize", selectAll: "selectAll", focusOnHover: ["focusOnHover", "focusOnHover", booleanAttribute], filterFields: "filterFields", selectOnFocus: ["selectOnFocus", "selectOnFocus", booleanAttribute], autoOptionFocus: ["autoOptionFocus", "autoOptionFocus", booleanAttribute] }, 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.cax-inputwrapper-focus": "focused || overlayVisible", "class.cax-inputwrapper-filled": "filled" }, classAttribute: "cax-element cax-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: CaxTemplate }], 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 class=\"cax-dropdown-container\">\r\n    <label *ngIf=\"labelText\" [ngClass]=\"labelTextClass\">{{ labelText }}</label>\r\n    <div #container [attr.id]=\"id\" [ngClass]=\"containerClass\" [ngStyle]=\"style\" [class]=\"styleClass\" (click)=\"onContainerClick($event)\">\r\n        <div class=\"cax-hidden-accessible\" [attr.data-cax-hidden-accessible]=\"true\">\r\n            <input\r\n                #focusInput\r\n                [caxTooltip]=\"tooltip\"\r\n                [tooltipPosition]=\"tooltipPosition\"\r\n                [positionStyle]=\"tooltipPositionStyle\"\r\n                [tooltipStyleClass]=\"tooltipStyleClass\"\r\n                [attr.aria-disabled]=\"disabled\"\r\n                [attr.id]=\"inputId\"\r\n                role=\"combobox\"\r\n                [attr.aria-label]=\"ariaLabel\"\r\n                [attr.aria-labelledby]=\"ariaLabelledBy\"\r\n                [attr.aria-haspopup]=\"'listbox'\"\r\n                [attr.aria-expanded]=\"overlayVisible ?? false\"\r\n                [attr.aria-controls]=\"overlayVisible ? id + '_list' : null\"\r\n                [attr.tabindex]=\"!disabled ? tabindex : -1\"\r\n                [attr.aria-activedescendant]=\"focused ? focusedOptionId : undefined\"\r\n                (focus)=\"onInputFocus($event)\"\r\n                (blur)=\"onInputBlur($event)\"\r\n                (keydown)=\"onKeyDown($event)\"\r\n                caxAutoFocus\r\n                [autofocus]=\"autofocus\"\r\n                [attr.value]=\"label() || 'empty'\"\r\n            />\r\n        </div>\r\n        <div\r\n            class=\"cax-multiselect-label-container\"\r\n            [caxTooltip]=\"tooltip\"\r\n            (mouseleave)=\"labelContainerMouseLeave()\"\r\n            [tooltipDisabled]=\"_disableTooltip\"\r\n            [tooltipPosition]=\"tooltipPosition\"\r\n            [positionStyle]=\"tooltipPositionStyle\"\r\n            [tooltipStyleClass]=\"tooltipStyleClass\"\r\n        >\r\n            <div [ngClass]=\"labelClass\">\r\n                <ng-container *ngIf=\"!selectedItemsTemplate\">\r\n                    <ng-container *ngIf=\"display === 'comma'\">{{ label() || 'empty' }}</ng-container>\r\n                    <ng-container *ngIf=\"display === 'chip'\">\r\n                        <div #token *ngFor=\"let item of chipSelectedItems(); let i = index\" class=\"cax-multiselect-token\">\r\n                            <span class=\"cax-multiselect-token-label\">{{ getLabelByValue(item) }}</span>\r\n                            <ng-container *ngIf=\"!disabled\">\r\n                                <TimesCircleIcon\r\n                                    *ngIf=\"!removeTokenIconTemplate\"\r\n                                    [ngClass]=\"{ 'cax-disabled': isOptionDisabled(item) }\"\r\n                                    [styleClass]=\"'cax-multiselect-token-icon'\"\r\n                                    (click)=\"removeOption(item, event)\"\r\n                                    [attr.data-pc-section]=\"'clearicon'\"\r\n                                    [attr.aria-hidden]=\"true\"\r\n                                />\r\n                                <span *ngIf=\"removeTokenIconTemplate\" class=\"cax-multiselect-token-icon\" (click)=\"removeOption(item, event)\" [attr.data-pc-section]=\"'clearicon'\" [attr.aria-hidden]=\"true\">\r\n                                    <ng-container *ngTemplateOutlet=\"removeTokenIconTemplate\"></ng-container>\r\n                                </span>\r\n                            </ng-container>\r\n                        </div>\r\n                        <ng-container *ngIf=\"!modelValue() || modelValue().length === 0\">{{ placeholder() || defaultLabel || 'empty' }}</ng-container>\r\n                    </ng-container>\r\n                </ng-container>\r\n                <ng-container *ngTemplateOutlet=\"selectedItemsTemplate; context: { $implicit: selectedOptions, removeChip: removeOption.bind(this) }\"></ng-container>\r\n            </div>\r\n            <ng-container *ngIf=\"isVisibleClearIcon\">\r\n                <TimesIcon *ngIf=\"!clearIconTemplate\" [styleClass]=\"'cax-multiselect-clear-icon'\" (click)=\"clear($event)\" [attr.data-pc-section]=\"'clearicon'\" [attr.aria-hidden]=\"true\" />\r\n                <span *ngIf=\"clearIconTemplate\" class=\"cax-multiselect-clear-icon\" (click)=\"clear($event)\" [attr.data-pc-section]=\"'clearicon'\" [attr.aria-hidden]=\"true\">\r\n                    <ng-template *ngTemplateOutlet=\"clearIconTemplate\"></ng-template>\r\n                </span>\r\n            </ng-container>\r\n        </div>\r\n        <div class=\"cax-multiselect-trigger\">\r\n            <ng-container *ngIf=\"loading; else elseBlock\">\r\n                <ng-container *ngIf=\"loadingIconTemplate\">\r\n                    <ng-container *ngTemplateOutlet=\"loadingIconTemplate\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngIf=\"!loadingIconTemplate\">\r\n                    <span *ngIf=\"loadingIcon\" [ngClass]=\"'cax-multiselect-trigger-icon pi-spin ' + loadingIcon\" aria-hidden=\"true\"></span>\r\n                    <span *ngIf=\"!loadingIcon\" [class]=\"'cax-multiselect-trigger-icon pi pi-spinner pi-spin'\" aria-hidden=\"true\"></span>\r\n                </ng-container>\r\n            </ng-container>\r\n            <ng-template #elseBlock>\r\n                <ng-container *ngIf=\"!dropdownIconTemplate\">\r\n                    <span *ngIf=\"dropdownIcon\" class=\"cax-multiselect-trigger-icon\" [ngClass]=\"dropdownIcon\" [attr.data-pc-section]=\"'triggericon'\" [attr.aria-hidden]=\"true\"></span>\r\n                    <!-- <ChevronDownIcon *ngIf=\"!dropdownIcon\" [styleClass]=\"'cax-multiselect-trigger-icon'\" [attr.data-pc-section]=\"'triggericon'\" [attr.aria-hidden]=\"true\" /> -->\r\n                    <i *ngIf=\"!dropdownIcon\" class=\"cax cax-alt-arrow-down\"></i>\r\n                </ng-container>\r\n                <span *ngIf=\"dropdownIconTemplate\" class=\"cax-multiselect-trigger-icon\" [attr.data-pc-section]=\"'triggericon'\" [attr.aria-hidden]=\"true\">\r\n                    <ng-template *ngTemplateOutlet=\"dropdownIconTemplate\"></ng-template>\r\n                </span>\r\n            </ng-template>\r\n        </div>\r\n        <cax-overlay\r\n            #overlay\r\n            [(visible)]=\"overlayVisible\"\r\n            [options]=\"overlayOptions\"\r\n            [target]=\"'@parent'\"\r\n            [appendTo]=\"appendTo\"\r\n            [autoZIndex]=\"autoZIndex\"\r\n            [baseZIndex]=\"baseZIndex\"\r\n            [showTransitionOptions]=\"showTransitionOptions\"\r\n            [hideTransitionOptions]=\"hideTransitionOptions\"\r\n            (onAnimationStart)=\"onOverlayAnimationStart($event)\"\r\n            (onHide)=\"hide()\"\r\n        >\r\n            <ng-template caxTemplate=\"content\">\r\n                <div [attr.id]=\"id + '_list'\" [ngClass]=\"'cax-multiselect-panel cax-component'\" [ngStyle]=\"panelStyle\" [class]=\"panelStyleClass\">\r\n                    <span\r\n                        #firstHiddenFocusableEl\r\n                        role=\"presentation\"\r\n                        class=\"cax-hidden-accessible cax-hidden-focusable\"\r\n                        [attr.tabindex]=\"0\"\r\n                        (focus)=\"onFirstHiddenFocus($event)\"\r\n                        [attr.data-cax-hidden-accessible]=\"true\"\r\n                        [attr.data-cax-hidden-focusable]=\"true\"\r\n                    >\r\n                    </span>\r\n                    <div class=\"cax-multiselect-header\" *ngIf=\"showHeader\">\r\n                        <ng-content select=\"cax-header\"></ng-content>\r\n                        <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\r\n                        <ng-container *ngIf=\"filterTemplate; else builtInFilterElement\">\r\n                            <ng-container *ngTemplateOutlet=\"filterTemplate; context: { options: filterOptions }\"></ng-container>\r\n                        </ng-container>\r\n                        <ng-template #builtInFilterElement>\r\n                            <div class=\"cax-multiselect-filter-container\" *ngIf=\"filter\">\r\n                                <input\r\n                                    #filterInput\r\n                                    type=\"text\"\r\n                                    role=\"searchbox\"\r\n                                    [attr.autocomplete]=\"autocomplete\"\r\n                                    [attr.placeholder]=\"filterPlaceHolder\"\r\n                                    role=\"searchbox\"\r\n                                    [attr.aria-owns]=\"id + '_list'\"\r\n                                    [attr.aria-activedescendant]=\"focusedOptionId\"\r\n                                    [value]=\"_filterValue() || ''\"\r\n                                    (input)=\"onFilterInputChange($event)\"\r\n                                    (keydown)=\"onFilterKeyDown($event)\"\r\n                                    (click)=\"onInputClick($event)\"\r\n                                    (blur)=\"onFilterBlur($event)\"\r\n                                    class=\"cax-multiselect-filter cax-inputtext cax-component\"\r\n                                    [disabled]=\"disabled\"\r\n                                    [attr.placeholder]=\"filterPlaceHolder\"\r\n                                    [attr.aria-label]=\"ariaFilterLabel\"\r\n                                />\r\n                                <SearchIcon [styleClass]=\"'cax-multiselect-filter-icon'\" *ngIf=\"!filterIconTemplate\" />\r\n                                <span *ngIf=\"filterIconTemplate\" class=\"cax-multiselect-filter-icon\">\r\n                                    <ng-template *ngTemplateOutlet=\"filterIconTemplate\"></ng-template>\r\n                                </span>\r\n                            </div>\r\n                        </ng-template>\r\n                    </div>\r\n                    <div class=\"cax-multiselect-items-wrapper\" [ngStyle]=\"{ 'max-height': virtualScroll ? 'auto' : scrollHeight || 'auto' }\">\r\n                        <cax-scroller\r\n                            *ngIf=\"virtualScroll\"\r\n                            #scroller\r\n                            [items]=\"visibleOptions()\"\r\n                            [style]=\"{ height: scrollHeight }\"\r\n                            [itemSize]=\"virtualScrollItemSize || _itemSize\"\r\n                            [autoSize]=\"true\"\r\n                            [tabindex]=\"-1\"\r\n                            [lazy]=\"lazy\"\r\n                            (onLazyLoad)=\"onLazyLoad.emit($event)\"\r\n                            [options]=\"virtualScrollOptions\"\r\n                        >\r\n                            <ng-template caxTemplate=\"content\" let-items let-scrollerOptions=\"options\">\r\n                                <ng-container *ngTemplateOutlet=\"buildInItems; context: { $implicit: items, options: scrollerOptions }\"></ng-container>\r\n                            </ng-template>\r\n                            <ng-container *ngIf=\"loaderTemplate\">\r\n                                <ng-template caxTemplate=\"loader\" let-scrollerOptions=\"options\">\r\n                                    <ng-container *ngTemplateOutlet=\"loaderTemplate; context: { options: scrollerOptions }\"></ng-container>\r\n                                </ng-template>\r\n                            </ng-container>\r\n                        </cax-scroller>\r\n                        <ng-container *ngIf=\"!virtualScroll\">\r\n                            <ng-container *ngTemplateOutlet=\"buildInItems; context: { $implicit: visibleOptions(), options: {} }\"></ng-container>\r\n                        </ng-container>\r\n\r\n                        <ng-template #buildInItems let-items let-scrollerOptions=\"options\">\r\n                            <ul #items class=\"cax-multiselect-items cax-component\" [ngClass]=\"scrollerOptions.contentStyleClass\" [ngStyle]=\"scrollerOptions.contentStyle\" role=\"listbox\" aria-multiselectable=\"true\" [attr.aria-label]=\"listLabel\">\r\n                                <ng-template ngFor let-option [ngForOf]=\"items\" let-i=\"index\">\r\n                                    <ng-container *ngIf=\"isOptionGroup(option)\">\r\n                                        <li [attr.id]=\"id + '_' + getOptionIndex(i, scrollerOptions)\" class=\"cax-multiselect-item-group\" [ngStyle]=\"{ height: scrollerOptions.itemSize + 'px' }\" role=\"option\">\r\n                                            <span *ngIf=\"!groupTemplate\">{{ getOptionGroupLabel(option.optionGroup) }}</span>\r\n                                            <ng-container *ngTemplateOutlet=\"groupTemplate; context: { $implicit: option.optionGroup }\"></ng-container>\r\n                                        </li>\r\n                                    </ng-container>\r\n                                    <ng-container *ngIf=\"!isOptionGroup(option)\">\r\n                                        <cax-multiSelectItem\r\n                                            [id]=\"id + '_' + getOptionIndex(i, scrollerOptions)\"\r\n                                            [option]=\"option\"\r\n                                            [selected]=\"isSelected(option)\"\r\n                                            [label]=\"getOptionLabel(option)\"\r\n                                            [disabled]=\"isOptionDisabled(option)\"\r\n                                            [template]=\"itemTemplate\"\r\n                                            [checkIconTemplate]=\"checkIconTemplate\"\r\n                                            [itemCheckboxIconTemplate]=\"itemCheckboxIconTemplate\"\r\n                                            [itemSize]=\"scrollerOptions.itemSize\"\r\n                                            [focused]=\"focusedOptionIndex() === getOptionIndex(i, scrollerOptions)\"\r\n                                            [ariaPosInset]=\"getAriaPosInset(getOptionIndex(i, scrollerOptions))\"\r\n                                            [ariaSetSize]=\"ariaSetSize\"\r\n                                            (onClick)=\"onOptionSelect($event, false, getOptionIndex(i, scrollerOptions))\"\r\n                                            (onMouseEnter)=\"onOptionMouseEnter($event, getOptionIndex(i, scrollerOptions))\"\r\n                                        ></cax-multiSelectItem>\r\n                                    </ng-container>\r\n                                </ng-template>\r\n\r\n                                <li *ngIf=\"hasFilter() && isEmpty()\" class=\"cax-multiselect-empty-message\" [ngStyle]=\"{ height: scrollerOptions.itemSize + 'px' }\" role=\"option\">\r\n                                    <ng-container *ngIf=\"!emptyFilterTemplate && !emptyTemplate; else emptyFilter\"> {{ emptyFilterMessageLabel }} </ng-container>\r\n                                    <ng-container #emptyFilter *ngTemplateOutlet=\"emptyFilterTemplate || emptyTemplate\"></ng-container>\r\n                                </li>\r\n                                <li *ngIf=\"!hasFilter() && isEmpty()\" class=\"cax-multiselect-empty-message\" [ngStyle]=\"{ height: scrollerOptions.itemSize + 'px' }\" role=\"option\">\r\n                                    <ng-container *ngIf=\"!emptyTemplate; else empty\"> {{ emptyMessageLabel }} </ng-container>\r\n                                    <ng-container #empty *ngTemplateOutlet=\"emptyTemplate\"></ng-container>\r\n                                </li>\r\n                            </ul>\r\n                        </ng-template>\r\n                    </div>\r\n                    <div class=\"cax-multiselect-footer\" *ngIf=\"footerFacet || footerTemplate\">\r\n                        <ng-content select=\"cax-footer\"></ng-content>\r\n                        <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\r\n                    </div>\r\n\r\n                    <span\r\n                        #lastHiddenFocusableEl\r\n                        role=\"presentation\"\r\n                        class=\"cax-hidden-accessible cax-hidden-focusable\"\r\n                        [attr.tabindex]=\"0\"\r\n                        (focus)=\"onLastHiddenFocus($event)\"\r\n                        [attr.data-cax-hidden-accessible]=\"true\"\r\n                        [attr.data-cax-hidden-focusable]=\"true\"\r\n                    ></span>\r\n                </div>\r\n            </ng-template>\r\n        </cax-overlay>\r\n    </div>\r\n</div>\r\n", styles: ["@layer cax{.cax-dropdown-container{display:flex;flex-direction:column;align-items:flex-start}.cax-dropdown-container label{margin-bottom:8px;font-size:14px;font-weight:500;line-height:20px}.cax-dropdown-container label.left-aligned{text-align:left}.cax-multiselect{display:inline-flex;cursor:pointer;position:relative;-webkit-user-select:none;user-select:none}.cax-multiselect-trigger{display:flex;align-items:center;justify-content:center;flex-shrink:0}.cax-multiselect-label-container{overflow:hidden;flex:1 1 auto;cursor:pointer;display:flex}.cax-multiselect-label{display:block;white-space:nowrap;cursor:pointer;overflow:hidden;text-overflow:ellipsis}.cax-multiselect-label-empty{overflow:hidden;visibility:hidden}.cax-multiselect-token{cursor:default;display:inline-flex;align-items:center;flex:0 0 auto}.cax-multiselect-token-icon{cursor:pointer}.cax-multiselect-token-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100px}.cax-multiselect-items-wrapper{overflow:auto}.cax-multiselect-items{margin:0;padding:0;list-style-type:none}.cax-multiselect-item{cursor:pointer;display:flex;align-items:center;font-weight:400;white-space:nowrap;position:relative;overflow:hidden}.cax-multiselect-header{display:flex;align-items:center;justify-content:space-between}.cax-multiselect-filter-container{position:relative;flex:1 1 auto}.cax-multiselect-filter-icon{position:absolute;top:50%;margin-top:-.5rem}.cax-multiselect-filter-container .cax-inputtext{width:100%}.cax-multiselect-close{display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden;position:relative}.cax-fluid .cax-multiselect{display:flex}.cax-multiselect-clear-icon{position:absolute;top:50%;margin-top:-.5rem;cursor:pointer}.cax-multiselect-clearable{position:relative}}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i5.Overlay, selector: "cax-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: i1.CaxTemplate, selector: "[caxTemplate]", inputs: ["type", "caxTemplate"] }, { kind: "directive", type: i6.Tooltip, selector: "[caxTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "caxTooltip", "tooltipDisabled", "tooltipOptions", "linkUrl", "linkText"] }, { kind: "component", type: i7.Scroller, selector: "cax-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: "directive", type: i8.AutoFocus, selector: "[caxAutoFocus]", inputs: ["autofocus"] }, { kind: "component", type: i9.SearchIcon, selector: "SearchIcon" }, { kind: "component", type: i10.TimesCircleIcon, selector: "TimesCircleIcon" }, { kind: "component", type: i11.TimesIcon, selector: "TimesIcon" }, { kind: "component", type: MultiSelectItem, selector: "cax-multiSelectItem", inputs: ["id", "option", "selected", "label", "disabled", "itemSize", "focused", "ariaPosInset", "ariaSetSize", "template", "checkIconTemplate", "itemCheckboxIconTemplate"], outputs: ["onClick", "onMouseEnter"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: MultiSelect, decorators: [{
             type: Component,
@@ -1665,7 +1665,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
                         class: 'cax-element cax-inputwrapper',
                         '[class.cax-inputwrapper-focus]': 'focused || overlayVisible',
                         '[class.cax-inputwrapper-filled]': 'filled'
-                    }, providers: [MULTISELECT_VALUE_ACCESSOR], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"cax-dropdown-container\">\n    <label *ngIf=\"labelText\" [ngClass]=\"labelTextClass\">{{ labelText }}</label>\n    <div #container [attr.id]=\"id\" [ngClass]=\"containerClass\" [ngStyle]=\"style\" [class]=\"styleClass\" (click)=\"onContainerClick($event)\">\n        <div class=\"cax-hidden-accessible\" [attr.data-cax-hidden-accessible]=\"true\">\n            <input\n                #focusInput\n                [caxTooltip]=\"tooltip\"\n                [tooltipPosition]=\"tooltipPosition\"\n                [positionStyle]=\"tooltipPositionStyle\"\n                [tooltipStyleClass]=\"tooltipStyleClass\"\n                [attr.aria-disabled]=\"disabled\"\n                [attr.id]=\"inputId\"\n                role=\"combobox\"\n                [attr.aria-label]=\"ariaLabel\"\n                [attr.aria-labelledby]=\"ariaLabelledBy\"\n                [attr.aria-haspopup]=\"'listbox'\"\n                [attr.aria-expanded]=\"overlayVisible ?? false\"\n                [attr.aria-controls]=\"overlayVisible ? id + '_list' : null\"\n                [attr.tabindex]=\"!disabled ? tabindex : -1\"\n                [attr.aria-activedescendant]=\"focused ? focusedOptionId : undefined\"\n                (focus)=\"onInputFocus($event)\"\n                (blur)=\"onInputBlur($event)\"\n                (keydown)=\"onKeyDown($event)\"\n                caxAutoFocus\n                [autofocus]=\"autofocus\"\n                [attr.value]=\"label() || 'empty'\"\n            />\n        </div>\n        <div\n            class=\"cax-multiselect-label-container\"\n            [caxTooltip]=\"tooltip\"\n            (mouseleave)=\"labelContainerMouseLeave()\"\n            [tooltipDisabled]=\"_disableTooltip\"\n            [tooltipPosition]=\"tooltipPosition\"\n            [positionStyle]=\"tooltipPositionStyle\"\n            [tooltipStyleClass]=\"tooltipStyleClass\"\n        >\n            <div [ngClass]=\"labelClass\">\n                <ng-container *ngIf=\"!selectedItemsTemplate\">\n                    <ng-container *ngIf=\"display === 'comma'\">{{ label() || 'empty' }}</ng-container>\n                    <ng-container *ngIf=\"display === 'chip'\">\n                        <div #token *ngFor=\"let item of chipSelectedItems(); let i = index\" class=\"cax-multiselect-token\">\n                            <span class=\"cax-multiselect-token-label\">{{ getLabelByValue(item) }}</span>\n                            <ng-container *ngIf=\"!disabled\">\n                                <TimesCircleIcon\n                                    *ngIf=\"!removeTokenIconTemplate\"\n                                    [ngClass]=\"{ 'cax-disabled': isOptionDisabled(item) }\"\n                                    [styleClass]=\"'cax-multiselect-token-icon'\"\n                                    (click)=\"removeOption(item, event)\"\n                                    [attr.data-pc-section]=\"'clearicon'\"\n                                    [attr.aria-hidden]=\"true\"\n                                />\n                                <span *ngIf=\"removeTokenIconTemplate\" class=\"cax-multiselect-token-icon\" (click)=\"removeOption(item, event)\" [attr.data-pc-section]=\"'clearicon'\" [attr.aria-hidden]=\"true\">\n                                    <ng-container *ngTemplateOutlet=\"removeTokenIconTemplate\"></ng-container>\n                                </span>\n                            </ng-container>\n                        </div>\n                        <ng-container *ngIf=\"!modelValue() || modelValue().length === 0\">{{ placeholder() || defaultLabel || 'empty' }}</ng-container>\n                    </ng-container>\n                </ng-container>\n                <ng-container *ngTemplateOutlet=\"selectedItemsTemplate; context: { $implicit: selectedOptions, removeChip: removeOption.bind(this) }\"></ng-container>\n            </div>\n            <ng-container *ngIf=\"isVisibleClearIcon\">\n                <TimesIcon *ngIf=\"!clearIconTemplate\" [styleClass]=\"'cax-multiselect-clear-icon'\" (click)=\"clear($event)\" [attr.data-pc-section]=\"'clearicon'\" [attr.aria-hidden]=\"true\" />\n                <span *ngIf=\"clearIconTemplate\" class=\"cax-multiselect-clear-icon\" (click)=\"clear($event)\" [attr.data-pc-section]=\"'clearicon'\" [attr.aria-hidden]=\"true\">\n                    <ng-template *ngTemplateOutlet=\"clearIconTemplate\"></ng-template>\n                </span>\n            </ng-container>\n        </div>\n        <div class=\"cax-multiselect-trigger\">\n            <ng-container *ngIf=\"loading; else elseBlock\">\n                <ng-container *ngIf=\"loadingIconTemplate\">\n                    <ng-container *ngTemplateOutlet=\"loadingIconTemplate\"></ng-container>\n                </ng-container>\n                <ng-container *ngIf=\"!loadingIconTemplate\">\n                    <span *ngIf=\"loadingIcon\" [ngClass]=\"'cax-multiselect-trigger-icon pi-spin ' + loadingIcon\" aria-hidden=\"true\"></span>\n                    <span *ngIf=\"!loadingIcon\" [class]=\"'cax-multiselect-trigger-icon pi pi-spinner pi-spin'\" aria-hidden=\"true\"></span>\n                </ng-container>\n            </ng-container>\n            <ng-template #elseBlock>\n                <ng-container *ngIf=\"!dropdownIconTemplate\">\n                    <span *ngIf=\"dropdownIcon\" class=\"cax-multiselect-trigger-icon\" [ngClass]=\"dropdownIcon\" [attr.data-pc-section]=\"'triggericon'\" [attr.aria-hidden]=\"true\"></span>\n                    <!-- <ChevronDownIcon *ngIf=\"!dropdownIcon\" [styleClass]=\"'cax-multiselect-trigger-icon'\" [attr.data-pc-section]=\"'triggericon'\" [attr.aria-hidden]=\"true\" /> -->\n                    <i *ngIf=\"!dropdownIcon\" class=\"cax cax-alt-arrow-down\"></i>\n                </ng-container>\n                <span *ngIf=\"dropdownIconTemplate\" class=\"cax-multiselect-trigger-icon\" [attr.data-pc-section]=\"'triggericon'\" [attr.aria-hidden]=\"true\">\n                    <ng-template *ngTemplateOutlet=\"dropdownIconTemplate\"></ng-template>\n                </span>\n            </ng-template>\n        </div>\n        <cax-overlay\n            #overlay\n            [(visible)]=\"overlayVisible\"\n            [options]=\"overlayOptions\"\n            [target]=\"'@parent'\"\n            [appendTo]=\"appendTo\"\n            [autoZIndex]=\"autoZIndex\"\n            [baseZIndex]=\"baseZIndex\"\n            [showTransitionOptions]=\"showTransitionOptions\"\n            [hideTransitionOptions]=\"hideTransitionOptions\"\n            (onAnimationStart)=\"onOverlayAnimationStart($event)\"\n            (onHide)=\"hide()\"\n        >\n            <ng-template caxTemplate=\"content\">\n                <div [attr.id]=\"id + '_list'\" [ngClass]=\"'cax-multiselect-panel cax-component'\" [ngStyle]=\"panelStyle\" [class]=\"panelStyleClass\">\n                    <span\n                        #firstHiddenFocusableEl\n                        role=\"presentation\"\n                        class=\"cax-hidden-accessible cax-hidden-focusable\"\n                        [attr.tabindex]=\"0\"\n                        (focus)=\"onFirstHiddenFocus($event)\"\n                        [attr.data-cax-hidden-accessible]=\"true\"\n                        [attr.data-cax-hidden-focusable]=\"true\"\n                    >\n                    </span>\n                    <div class=\"cax-multiselect-header\" *ngIf=\"showHeader\">\n                        <ng-content select=\"cax-header\"></ng-content>\n                        <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\n                        <ng-container *ngIf=\"filterTemplate; else builtInFilterElement\">\n                            <ng-container *ngTemplateOutlet=\"filterTemplate; context: { options: filterOptions }\"></ng-container>\n                        </ng-container>\n                        <ng-template #builtInFilterElement>\n                            <div class=\"cax-multiselect-filter-container\" *ngIf=\"filter\">\n                                <input\n                                    #filterInput\n                                    type=\"text\"\n                                    role=\"searchbox\"\n                                    [attr.autocomplete]=\"autocomplete\"\n                                    [attr.placeholder]=\"filterPlaceHolder\"\n                                    role=\"searchbox\"\n                                    [attr.aria-owns]=\"id + '_list'\"\n                                    [attr.aria-activedescendant]=\"focusedOptionId\"\n                                    [value]=\"_filterValue() || ''\"\n                                    (input)=\"onFilterInputChange($event)\"\n                                    (keydown)=\"onFilterKeyDown($event)\"\n                                    (click)=\"onInputClick($event)\"\n                                    (blur)=\"onFilterBlur($event)\"\n                                    class=\"cax-multiselect-filter cax-inputtext cax-component\"\n                                    [disabled]=\"disabled\"\n                                    [attr.placeholder]=\"filterPlaceHolder\"\n                                    [attr.aria-label]=\"ariaFilterLabel\"\n                                />\n                                <SearchIcon [styleClass]=\"'cax-multiselect-filter-icon'\" *ngIf=\"!filterIconTemplate\" />\n                                <span *ngIf=\"filterIconTemplate\" class=\"cax-multiselect-filter-icon\">\n                                    <ng-template *ngTemplateOutlet=\"filterIconTemplate\"></ng-template>\n                                </span>\n                            </div>\n                        </ng-template>\n                    </div>\n                    <div class=\"cax-multiselect-items-wrapper\" [ngStyle]=\"{ 'max-height': virtualScroll ? 'auto' : scrollHeight || 'auto' }\">\n                        <cax-scroller\n                            *ngIf=\"virtualScroll\"\n                            #scroller\n                            [items]=\"visibleOptions()\"\n                            [style]=\"{ height: scrollHeight }\"\n                            [itemSize]=\"virtualScrollItemSize || _itemSize\"\n                            [autoSize]=\"true\"\n                            [tabindex]=\"-1\"\n                            [lazy]=\"lazy\"\n                            (onLazyLoad)=\"onLazyLoad.emit($event)\"\n                            [options]=\"virtualScrollOptions\"\n                        >\n                            <ng-template caxTemplate=\"content\" let-items let-scrollerOptions=\"options\">\n                                <ng-container *ngTemplateOutlet=\"buildInItems; context: { $implicit: items, options: scrollerOptions }\"></ng-container>\n                            </ng-template>\n                            <ng-container *ngIf=\"loaderTemplate\">\n                                <ng-template caxTemplate=\"loader\" let-scrollerOptions=\"options\">\n                                    <ng-container *ngTemplateOutlet=\"loaderTemplate; context: { options: scrollerOptions }\"></ng-container>\n                                </ng-template>\n                            </ng-container>\n                        </cax-scroller>\n                        <ng-container *ngIf=\"!virtualScroll\">\n                            <ng-container *ngTemplateOutlet=\"buildInItems; context: { $implicit: visibleOptions(), options: {} }\"></ng-container>\n                        </ng-container>\n\n                        <ng-template #buildInItems let-items let-scrollerOptions=\"options\">\n                            <ul #items class=\"cax-multiselect-items cax-component\" [ngClass]=\"scrollerOptions.contentStyleClass\" [ngStyle]=\"scrollerOptions.contentStyle\" role=\"listbox\" aria-multiselectable=\"true\" [attr.aria-label]=\"listLabel\">\n                                <ng-template ngFor let-option [ngForOf]=\"items\" let-i=\"index\">\n                                    <ng-container *ngIf=\"isOptionGroup(option)\">\n                                        <li [attr.id]=\"id + '_' + getOptionIndex(i, scrollerOptions)\" class=\"cax-multiselect-item-group\" [ngStyle]=\"{ height: scrollerOptions.itemSize + 'px' }\" role=\"option\">\n                                            <span *ngIf=\"!groupTemplate\">{{ getOptionGroupLabel(option.optionGroup) }}</span>\n                                            <ng-container *ngTemplateOutlet=\"groupTemplate; context: { $implicit: option.optionGroup }\"></ng-container>\n                                        </li>\n                                    </ng-container>\n                                    <ng-container *ngIf=\"!isOptionGroup(option)\">\n                                        <cax-multiSelectItem\n                                            [id]=\"id + '_' + getOptionIndex(i, scrollerOptions)\"\n                                            [option]=\"option\"\n                                            [selected]=\"isSelected(option)\"\n                                            [label]=\"getOptionLabel(option)\"\n                                            [disabled]=\"isOptionDisabled(option)\"\n                                            [template]=\"itemTemplate\"\n                                            [checkIconTemplate]=\"checkIconTemplate\"\n                                            [itemCheckboxIconTemplate]=\"itemCheckboxIconTemplate\"\n                                            [itemSize]=\"scrollerOptions.itemSize\"\n                                            [focused]=\"focusedOptionIndex() === getOptionIndex(i, scrollerOptions)\"\n                                            [ariaPosInset]=\"getAriaPosInset(getOptionIndex(i, scrollerOptions))\"\n                                            [ariaSetSize]=\"ariaSetSize\"\n                                            (onClick)=\"onOptionSelect($event, false, getOptionIndex(i, scrollerOptions))\"\n                                            (onMouseEnter)=\"onOptionMouseEnter($event, getOptionIndex(i, scrollerOptions))\"\n                                        ></cax-multiSelectItem>\n                                    </ng-container>\n                                </ng-template>\n\n                                <li *ngIf=\"hasFilter() && isEmpty()\" class=\"cax-multiselect-empty-message\" [ngStyle]=\"{ height: scrollerOptions.itemSize + 'px' }\" role=\"option\">\n                                    <ng-container *ngIf=\"!emptyFilterTemplate && !emptyTemplate; else emptyFilter\"> {{ emptyFilterMessageLabel }} </ng-container>\n                                    <ng-container #emptyFilter *ngTemplateOutlet=\"emptyFilterTemplate || emptyTemplate\"></ng-container>\n                                </li>\n                                <li *ngIf=\"!hasFilter() && isEmpty()\" class=\"cax-multiselect-empty-message\" [ngStyle]=\"{ height: scrollerOptions.itemSize + 'px' }\" role=\"option\">\n                                    <ng-container *ngIf=\"!emptyTemplate; else empty\"> {{ emptyMessageLabel }} </ng-container>\n                                    <ng-container #empty *ngTemplateOutlet=\"emptyTemplate\"></ng-container>\n                                </li>\n                            </ul>\n                        </ng-template>\n                    </div>\n                    <div class=\"cax-multiselect-footer\" *ngIf=\"footerFacet || footerTemplate\">\n                        <ng-content select=\"cax-footer\"></ng-content>\n                        <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\n                    </div>\n\n                    <span\n                        #lastHiddenFocusableEl\n                        role=\"presentation\"\n                        class=\"cax-hidden-accessible cax-hidden-focusable\"\n                        [attr.tabindex]=\"0\"\n                        (focus)=\"onLastHiddenFocus($event)\"\n                        [attr.data-cax-hidden-accessible]=\"true\"\n                        [attr.data-cax-hidden-focusable]=\"true\"\n                    ></span>\n                </div>\n            </ng-template>\n        </cax-overlay>\n    </div>\n</div>\n", styles: ["@layer cax{.cax-dropdown-container{display:flex;flex-direction:column;align-items:flex-start}.cax-dropdown-container label{margin-bottom:8px;font-size:14px;font-weight:500;line-height:20px}.cax-dropdown-container label.left-aligned{text-align:left}.cax-multiselect{display:inline-flex;cursor:pointer;position:relative;-webkit-user-select:none;user-select:none}.cax-multiselect-trigger{display:flex;align-items:center;justify-content:center;flex-shrink:0}.cax-multiselect-label-container{overflow:hidden;flex:1 1 auto;cursor:pointer;display:flex}.cax-multiselect-label{display:block;white-space:nowrap;cursor:pointer;overflow:hidden;text-overflow:ellipsis}.cax-multiselect-label-empty{overflow:hidden;visibility:hidden}.cax-multiselect-token{cursor:default;display:inline-flex;align-items:center;flex:0 0 auto}.cax-multiselect-token-icon{cursor:pointer}.cax-multiselect-token-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100px}.cax-multiselect-items-wrapper{overflow:auto}.cax-multiselect-items{margin:0;padding:0;list-style-type:none}.cax-multiselect-item{cursor:pointer;display:flex;align-items:center;font-weight:400;white-space:nowrap;position:relative;overflow:hidden}.cax-multiselect-header{display:flex;align-items:center;justify-content:space-between}.cax-multiselect-filter-container{position:relative;flex:1 1 auto}.cax-multiselect-filter-icon{position:absolute;top:50%;margin-top:-.5rem}.cax-multiselect-filter-container .cax-inputtext{width:100%}.cax-multiselect-close{display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden;position:relative}.cax-fluid .cax-multiselect{display:flex}.cax-multiselect-clear-icon{position:absolute;top:50%;margin-top:-.5rem;cursor:pointer}.cax-multiselect-clearable{position:relative}}\n"] }]
+                    }, providers: [MULTISELECT_VALUE_ACCESSOR], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"cax-dropdown-container\">\r\n    <label *ngIf=\"labelText\" [ngClass]=\"labelTextClass\">{{ labelText }}</label>\r\n    <div #container [attr.id]=\"id\" [ngClass]=\"containerClass\" [ngStyle]=\"style\" [class]=\"styleClass\" (click)=\"onContainerClick($event)\">\r\n        <div class=\"cax-hidden-accessible\" [attr.data-cax-hidden-accessible]=\"true\">\r\n            <input\r\n                #focusInput\r\n                [caxTooltip]=\"tooltip\"\r\n                [tooltipPosition]=\"tooltipPosition\"\r\n                [positionStyle]=\"tooltipPositionStyle\"\r\n                [tooltipStyleClass]=\"tooltipStyleClass\"\r\n                [attr.aria-disabled]=\"disabled\"\r\n                [attr.id]=\"inputId\"\r\n                role=\"combobox\"\r\n                [attr.aria-label]=\"ariaLabel\"\r\n                [attr.aria-labelledby]=\"ariaLabelledBy\"\r\n                [attr.aria-haspopup]=\"'listbox'\"\r\n                [attr.aria-expanded]=\"overlayVisible ?? false\"\r\n                [attr.aria-controls]=\"overlayVisible ? id + '_list' : null\"\r\n                [attr.tabindex]=\"!disabled ? tabindex : -1\"\r\n                [attr.aria-activedescendant]=\"focused ? focusedOptionId : undefined\"\r\n                (focus)=\"onInputFocus($event)\"\r\n                (blur)=\"onInputBlur($event)\"\r\n                (keydown)=\"onKeyDown($event)\"\r\n                caxAutoFocus\r\n                [autofocus]=\"autofocus\"\r\n                [attr.value]=\"label() || 'empty'\"\r\n            />\r\n        </div>\r\n        <div\r\n            class=\"cax-multiselect-label-container\"\r\n            [caxTooltip]=\"tooltip\"\r\n            (mouseleave)=\"labelContainerMouseLeave()\"\r\n            [tooltipDisabled]=\"_disableTooltip\"\r\n            [tooltipPosition]=\"tooltipPosition\"\r\n            [positionStyle]=\"tooltipPositionStyle\"\r\n            [tooltipStyleClass]=\"tooltipStyleClass\"\r\n        >\r\n            <div [ngClass]=\"labelClass\">\r\n                <ng-container *ngIf=\"!selectedItemsTemplate\">\r\n                    <ng-container *ngIf=\"display === 'comma'\">{{ label() || 'empty' }}</ng-container>\r\n                    <ng-container *ngIf=\"display === 'chip'\">\r\n                        <div #token *ngFor=\"let item of chipSelectedItems(); let i = index\" class=\"cax-multiselect-token\">\r\n                            <span class=\"cax-multiselect-token-label\">{{ getLabelByValue(item) }}</span>\r\n                            <ng-container *ngIf=\"!disabled\">\r\n                                <TimesCircleIcon\r\n                                    *ngIf=\"!removeTokenIconTemplate\"\r\n                                    [ngClass]=\"{ 'cax-disabled': isOptionDisabled(item) }\"\r\n                                    [styleClass]=\"'cax-multiselect-token-icon'\"\r\n                                    (click)=\"removeOption(item, event)\"\r\n                                    [attr.data-pc-section]=\"'clearicon'\"\r\n                                    [attr.aria-hidden]=\"true\"\r\n                                />\r\n                                <span *ngIf=\"removeTokenIconTemplate\" class=\"cax-multiselect-token-icon\" (click)=\"removeOption(item, event)\" [attr.data-pc-section]=\"'clearicon'\" [attr.aria-hidden]=\"true\">\r\n                                    <ng-container *ngTemplateOutlet=\"removeTokenIconTemplate\"></ng-container>\r\n                                </span>\r\n                            </ng-container>\r\n                        </div>\r\n                        <ng-container *ngIf=\"!modelValue() || modelValue().length === 0\">{{ placeholder() || defaultLabel || 'empty' }}</ng-container>\r\n                    </ng-container>\r\n                </ng-container>\r\n                <ng-container *ngTemplateOutlet=\"selectedItemsTemplate; context: { $implicit: selectedOptions, removeChip: removeOption.bind(this) }\"></ng-container>\r\n            </div>\r\n            <ng-container *ngIf=\"isVisibleClearIcon\">\r\n                <TimesIcon *ngIf=\"!clearIconTemplate\" [styleClass]=\"'cax-multiselect-clear-icon'\" (click)=\"clear($event)\" [attr.data-pc-section]=\"'clearicon'\" [attr.aria-hidden]=\"true\" />\r\n                <span *ngIf=\"clearIconTemplate\" class=\"cax-multiselect-clear-icon\" (click)=\"clear($event)\" [attr.data-pc-section]=\"'clearicon'\" [attr.aria-hidden]=\"true\">\r\n                    <ng-template *ngTemplateOutlet=\"clearIconTemplate\"></ng-template>\r\n                </span>\r\n            </ng-container>\r\n        </div>\r\n        <div class=\"cax-multiselect-trigger\">\r\n            <ng-container *ngIf=\"loading; else elseBlock\">\r\n                <ng-container *ngIf=\"loadingIconTemplate\">\r\n                    <ng-container *ngTemplateOutlet=\"loadingIconTemplate\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngIf=\"!loadingIconTemplate\">\r\n                    <span *ngIf=\"loadingIcon\" [ngClass]=\"'cax-multiselect-trigger-icon pi-spin ' + loadingIcon\" aria-hidden=\"true\"></span>\r\n                    <span *ngIf=\"!loadingIcon\" [class]=\"'cax-multiselect-trigger-icon pi pi-spinner pi-spin'\" aria-hidden=\"true\"></span>\r\n                </ng-container>\r\n            </ng-container>\r\n            <ng-template #elseBlock>\r\n                <ng-container *ngIf=\"!dropdownIconTemplate\">\r\n                    <span *ngIf=\"dropdownIcon\" class=\"cax-multiselect-trigger-icon\" [ngClass]=\"dropdownIcon\" [attr.data-pc-section]=\"'triggericon'\" [attr.aria-hidden]=\"true\"></span>\r\n                    <!-- <ChevronDownIcon *ngIf=\"!dropdownIcon\" [styleClass]=\"'cax-multiselect-trigger-icon'\" [attr.data-pc-section]=\"'triggericon'\" [attr.aria-hidden]=\"true\" /> -->\r\n                    <i *ngIf=\"!dropdownIcon\" class=\"cax cax-alt-arrow-down\"></i>\r\n                </ng-container>\r\n                <span *ngIf=\"dropdownIconTemplate\" class=\"cax-multiselect-trigger-icon\" [attr.data-pc-section]=\"'triggericon'\" [attr.aria-hidden]=\"true\">\r\n                    <ng-template *ngTemplateOutlet=\"dropdownIconTemplate\"></ng-template>\r\n                </span>\r\n            </ng-template>\r\n        </div>\r\n        <cax-overlay\r\n            #overlay\r\n            [(visible)]=\"overlayVisible\"\r\n            [options]=\"overlayOptions\"\r\n            [target]=\"'@parent'\"\r\n            [appendTo]=\"appendTo\"\r\n            [autoZIndex]=\"autoZIndex\"\r\n            [baseZIndex]=\"baseZIndex\"\r\n            [showTransitionOptions]=\"showTransitionOptions\"\r\n            [hideTransitionOptions]=\"hideTransitionOptions\"\r\n            (onAnimationStart)=\"onOverlayAnimationStart($event)\"\r\n            (onHide)=\"hide()\"\r\n        >\r\n            <ng-template caxTemplate=\"content\">\r\n                <div [attr.id]=\"id + '_list'\" [ngClass]=\"'cax-multiselect-panel cax-component'\" [ngStyle]=\"panelStyle\" [class]=\"panelStyleClass\">\r\n                    <span\r\n                        #firstHiddenFocusableEl\r\n                        role=\"presentation\"\r\n                        class=\"cax-hidden-accessible cax-hidden-focusable\"\r\n                        [attr.tabindex]=\"0\"\r\n                        (focus)=\"onFirstHiddenFocus($event)\"\r\n                        [attr.data-cax-hidden-accessible]=\"true\"\r\n                        [attr.data-cax-hidden-focusable]=\"true\"\r\n                    >\r\n                    </span>\r\n                    <div class=\"cax-multiselect-header\" *ngIf=\"showHeader\">\r\n                        <ng-content select=\"cax-header\"></ng-content>\r\n                        <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\r\n                        <ng-container *ngIf=\"filterTemplate; else builtInFilterElement\">\r\n                            <ng-container *ngTemplateOutlet=\"filterTemplate; context: { options: filterOptions }\"></ng-container>\r\n                        </ng-container>\r\n                        <ng-template #builtInFilterElement>\r\n                            <div class=\"cax-multiselect-filter-container\" *ngIf=\"filter\">\r\n                                <input\r\n                                    #filterInput\r\n                                    type=\"text\"\r\n                                    role=\"searchbox\"\r\n                                    [attr.autocomplete]=\"autocomplete\"\r\n                                    [attr.placeholder]=\"filterPlaceHolder\"\r\n                                    role=\"searchbox\"\r\n                                    [attr.aria-owns]=\"id + '_list'\"\r\n                                    [attr.aria-activedescendant]=\"focusedOptionId\"\r\n                                    [value]=\"_filterValue() || ''\"\r\n                                    (input)=\"onFilterInputChange($event)\"\r\n                                    (keydown)=\"onFilterKeyDown($event)\"\r\n                                    (click)=\"onInputClick($event)\"\r\n                                    (blur)=\"onFilterBlur($event)\"\r\n                                    class=\"cax-multiselect-filter cax-inputtext cax-component\"\r\n                                    [disabled]=\"disabled\"\r\n                                    [attr.placeholder]=\"filterPlaceHolder\"\r\n                                    [attr.aria-label]=\"ariaFilterLabel\"\r\n                                />\r\n                                <SearchIcon [styleClass]=\"'cax-multiselect-filter-icon'\" *ngIf=\"!filterIconTemplate\" />\r\n                                <span *ngIf=\"filterIconTemplate\" class=\"cax-multiselect-filter-icon\">\r\n                                    <ng-template *ngTemplateOutlet=\"filterIconTemplate\"></ng-template>\r\n                                </span>\r\n                            </div>\r\n                        </ng-template>\r\n                    </div>\r\n                    <div class=\"cax-multiselect-items-wrapper\" [ngStyle]=\"{ 'max-height': virtualScroll ? 'auto' : scrollHeight || 'auto' }\">\r\n                        <cax-scroller\r\n                            *ngIf=\"virtualScroll\"\r\n                            #scroller\r\n                            [items]=\"visibleOptions()\"\r\n                            [style]=\"{ height: scrollHeight }\"\r\n                            [itemSize]=\"virtualScrollItemSize || _itemSize\"\r\n                            [autoSize]=\"true\"\r\n                            [tabindex]=\"-1\"\r\n                            [lazy]=\"lazy\"\r\n                            (onLazyLoad)=\"onLazyLoad.emit($event)\"\r\n                            [options]=\"virtualScrollOptions\"\r\n                        >\r\n                            <ng-template caxTemplate=\"content\" let-items let-scrollerOptions=\"options\">\r\n                                <ng-container *ngTemplateOutlet=\"buildInItems; context: { $implicit: items, options: scrollerOptions }\"></ng-container>\r\n                            </ng-template>\r\n                            <ng-container *ngIf=\"loaderTemplate\">\r\n                                <ng-template caxTemplate=\"loader\" let-scrollerOptions=\"options\">\r\n                                    <ng-container *ngTemplateOutlet=\"loaderTemplate; context: { options: scrollerOptions }\"></ng-container>\r\n                                </ng-template>\r\n                            </ng-container>\r\n                        </cax-scroller>\r\n                        <ng-container *ngIf=\"!virtualScroll\">\r\n                            <ng-container *ngTemplateOutlet=\"buildInItems; context: { $implicit: visibleOptions(), options: {} }\"></ng-container>\r\n                        </ng-container>\r\n\r\n                        <ng-template #buildInItems let-items let-scrollerOptions=\"options\">\r\n                            <ul #items class=\"cax-multiselect-items cax-component\" [ngClass]=\"scrollerOptions.contentStyleClass\" [ngStyle]=\"scrollerOptions.contentStyle\" role=\"listbox\" aria-multiselectable=\"true\" [attr.aria-label]=\"listLabel\">\r\n                                <ng-template ngFor let-option [ngForOf]=\"items\" let-i=\"index\">\r\n                                    <ng-container *ngIf=\"isOptionGroup(option)\">\r\n                                        <li [attr.id]=\"id + '_' + getOptionIndex(i, scrollerOptions)\" class=\"cax-multiselect-item-group\" [ngStyle]=\"{ height: scrollerOptions.itemSize + 'px' }\" role=\"option\">\r\n                                            <span *ngIf=\"!groupTemplate\">{{ getOptionGroupLabel(option.optionGroup) }}</span>\r\n                                            <ng-container *ngTemplateOutlet=\"groupTemplate; context: { $implicit: option.optionGroup }\"></ng-container>\r\n                                        </li>\r\n                                    </ng-container>\r\n                                    <ng-container *ngIf=\"!isOptionGroup(option)\">\r\n                                        <cax-multiSelectItem\r\n                                            [id]=\"id + '_' + getOptionIndex(i, scrollerOptions)\"\r\n                                            [option]=\"option\"\r\n                                            [selected]=\"isSelected(option)\"\r\n                                            [label]=\"getOptionLabel(option)\"\r\n                                            [disabled]=\"isOptionDisabled(option)\"\r\n                                            [template]=\"itemTemplate\"\r\n                                            [checkIconTemplate]=\"checkIconTemplate\"\r\n                                            [itemCheckboxIconTemplate]=\"itemCheckboxIconTemplate\"\r\n                                            [itemSize]=\"scrollerOptions.itemSize\"\r\n                                            [focused]=\"focusedOptionIndex() === getOptionIndex(i, scrollerOptions)\"\r\n                                            [ariaPosInset]=\"getAriaPosInset(getOptionIndex(i, scrollerOptions))\"\r\n                                            [ariaSetSize]=\"ariaSetSize\"\r\n                                            (onClick)=\"onOptionSelect($event, false, getOptionIndex(i, scrollerOptions))\"\r\n                                            (onMouseEnter)=\"onOptionMouseEnter($event, getOptionIndex(i, scrollerOptions))\"\r\n                                        ></cax-multiSelectItem>\r\n                                    </ng-container>\r\n                                </ng-template>\r\n\r\n                                <li *ngIf=\"hasFilter() && isEmpty()\" class=\"cax-multiselect-empty-message\" [ngStyle]=\"{ height: scrollerOptions.itemSize + 'px' }\" role=\"option\">\r\n                                    <ng-container *ngIf=\"!emptyFilterTemplate && !emptyTemplate; else emptyFilter\"> {{ emptyFilterMessageLabel }} </ng-container>\r\n                                    <ng-container #emptyFilter *ngTemplateOutlet=\"emptyFilterTemplate || emptyTemplate\"></ng-container>\r\n                                </li>\r\n                                <li *ngIf=\"!hasFilter() && isEmpty()\" class=\"cax-multiselect-empty-message\" [ngStyle]=\"{ height: scrollerOptions.itemSize + 'px' }\" role=\"option\">\r\n                                    <ng-container *ngIf=\"!emptyTemplate; else empty\"> {{ emptyMessageLabel }} </ng-container>\r\n                                    <ng-container #empty *ngTemplateOutlet=\"emptyTemplate\"></ng-container>\r\n                                </li>\r\n                            </ul>\r\n                        </ng-template>\r\n                    </div>\r\n                    <div class=\"cax-multiselect-footer\" *ngIf=\"footerFacet || footerTemplate\">\r\n                        <ng-content select=\"cax-footer\"></ng-content>\r\n                        <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\r\n                    </div>\r\n\r\n                    <span\r\n                        #lastHiddenFocusableEl\r\n                        role=\"presentation\"\r\n                        class=\"cax-hidden-accessible cax-hidden-focusable\"\r\n                        [attr.tabindex]=\"0\"\r\n                        (focus)=\"onLastHiddenFocus($event)\"\r\n                        [attr.data-cax-hidden-accessible]=\"true\"\r\n                        [attr.data-cax-hidden-focusable]=\"true\"\r\n                    ></span>\r\n                </div>\r\n            </ng-template>\r\n        </cax-overlay>\r\n    </div>\r\n</div>\r\n", styles: ["@layer cax{.cax-dropdown-container{display:flex;flex-direction:column;align-items:flex-start}.cax-dropdown-container label{margin-bottom:8px;font-size:14px;font-weight:500;line-height:20px}.cax-dropdown-container label.left-aligned{text-align:left}.cax-multiselect{display:inline-flex;cursor:pointer;position:relative;-webkit-user-select:none;user-select:none}.cax-multiselect-trigger{display:flex;align-items:center;justify-content:center;flex-shrink:0}.cax-multiselect-label-container{overflow:hidden;flex:1 1 auto;cursor:pointer;display:flex}.cax-multiselect-label{display:block;white-space:nowrap;cursor:pointer;overflow:hidden;text-overflow:ellipsis}.cax-multiselect-label-empty{overflow:hidden;visibility:hidden}.cax-multiselect-token{cursor:default;display:inline-flex;align-items:center;flex:0 0 auto}.cax-multiselect-token-icon{cursor:pointer}.cax-multiselect-token-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100px}.cax-multiselect-items-wrapper{overflow:auto}.cax-multiselect-items{margin:0;padding:0;list-style-type:none}.cax-multiselect-item{cursor:pointer;display:flex;align-items:center;font-weight:400;white-space:nowrap;position:relative;overflow:hidden}.cax-multiselect-header{display:flex;align-items:center;justify-content:space-between}.cax-multiselect-filter-container{position:relative;flex:1 1 auto}.cax-multiselect-filter-icon{position:absolute;top:50%;margin-top:-.5rem}.cax-multiselect-filter-container .cax-inputtext{width:100%}.cax-multiselect-close{display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden;position:relative}.cax-fluid .cax-multiselect{display:flex}.cax-multiselect-clear-icon{position:absolute;top:50%;margin-top:-.5rem;cursor:pointer}.cax-multiselect-clearable{position:relative}}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i1.FilterService }, { type: i1.caxConfig }, { type: i1.OverlayService }], propDecorators: { labelText: [{
                 type: Input
             }], id: [{