cax-design-system 2.8.4 → 3.0.0

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

@@ -1,17 +1,21 @@
 import * as i0 from '@angular/core';
 import { forwardRef, EventEmitter, signal, computed, booleanAttribute, numberAttribute, ContentChildren, ContentChild, ViewChild, Output, Input, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
-import * as i2 from '@angular/common';
-import { CommonModule } from '@angular/common';
 import * as i1 from 'cax-design-system/api';
 import { Header, Footer, CaxTemplate, SharedModule } from 'cax-design-system/api';
 import { DomHandler } from 'cax-design-system/dom';
 import { ObjectUtils, UniqueComponentId } from 'cax-design-system/utils';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import * as i2 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i3 from 'cax-design-system/ripple';
 import { RippleModule } from 'cax-design-system/ripple';
-import { SearchIcon } from 'cax-design-system/icons/search';
-import { CheckIcon } from 'cax-design-system/icons/check';
-import * as i3 from 'cax-design-system/scroller';
+import * as i4 from 'cax-design-system/scroller';
 import { ScrollerModule } from 'cax-design-system/scroller';
+import * as i5 from 'cax-design-system/icons/check';
+import { CheckIcon } from 'cax-design-system/icons/check';
+import * as i6 from 'cax-design-system/divider';
+import { DividerModule } from 'cax-design-system/divider';
+import { SearchIcon } from 'cax-design-system/icons/search';
 
 const LISTBOX_VALUE_ACCESSOR = {
     provide: NG_VALUE_ACCESSOR,
@@ -60,7 +64,12 @@ class Listbox {
      * Defines a string that labels the input for accessibility.
      * @group Props
      */
-    ariaLabel;
+    variant = 'outlined';
+    /**
+     * Size of the component.
+     * @group Props
+     */
+    size = 'md';
     /**
      * When enabled, the focused option is selected.
      * @group Props
@@ -225,7 +234,7 @@ class Listbox {
      * Defines placeholder of the filter input.
      * @group Props
      */
-    filterPlaceHolder;
+    placeholder;
     /**
      * Text to display when filtering does not return any results.
      * @group Props
@@ -347,8 +356,12 @@ class Listbox {
     scrollerTabIndex = '0';
     get containerClass() {
         return {
-            'p-listbox p-component': true,
-            'p-disabled': this.disabled
+            'cax-listbox cax-component': true,
+            'cax-disabled': this.disabled,
+            'cax-variant-filled': this.variant === 'filled' || this.config.inputStyle() === 'filled',
+            'cax-listbox-sm': this.size === 'sm',
+            'cax-listbox-md': this.size === 'md',
+            'cax-listbox-lg': this.size === 'lg'
         };
     }
     get focusedOptionId() {
@@ -620,14 +633,14 @@ class Listbox {
     }
     onFirstHiddenFocus(event) {
         DomHandler.focus(this.listViewChild.nativeElement);
-        const firstFocusableEl = DomHandler.getFirstFocusableElement(this.el.nativeElement, ':not([data-p-hidden-focusable="true"])');
+        const firstFocusableEl = DomHandler.getFirstFocusableElement(this.el.nativeElement, ':not([data-cax-hidden-focusable="true"])');
         this.lastHiddenFocusableElement.nativeElement.tabIndex = ObjectUtils.isEmpty(firstFocusableEl) ? '-1' : undefined;
         this.firstHiddenFocusableElement.nativeElement.tabIndex = -1;
     }
     onLastHiddenFocus(event) {
         const relatedTarget = event.relatedTarget;
         if (relatedTarget === this.listViewChild.nativeElement) {
-            const firstFocusableEl = DomHandler.getFirstFocusableElement(this.el.nativeElement, ':not(.p-hidden-focusable)');
+            const firstFocusableEl = DomHandler.getFirstFocusableElement(this.el.nativeElement, ':not(.cax-hidden-focusable)');
             DomHandler.focus(firstFocusableEl);
             this.firstHiddenFocusableElement.nativeElement.tabIndex = undefined;
         }
@@ -1035,360 +1048,14 @@ class Listbox {
             this.translationSubscription.unsubscribe();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: Listbox, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1.FilterService }, { token: i1.caxConfig }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.16", type: Listbox, isStandalone: false, selector: "p-listbox", inputs: { id: "id", searchMessage: "searchMessage", emptySelectionMessage: "emptySelectionMessage", selectionMessage: "selectionMessage", autoOptionFocus: ["autoOptionFocus", "autoOptionFocus", booleanAttribute], ariaLabel: "ariaLabel", selectOnFocus: ["selectOnFocus", "selectOnFocus", booleanAttribute], searchLocale: ["searchLocale", "searchLocale", booleanAttribute], focusOnHover: ["focusOnHover", "focusOnHover", booleanAttribute], filterMessage: "filterMessage", filterFields: "filterFields", lazy: ["lazy", "lazy", booleanAttribute], virtualScroll: ["virtualScroll", "virtualScroll", booleanAttribute], virtualScrollItemSize: ["virtualScrollItemSize", "virtualScrollItemSize", numberAttribute], virtualScrollOptions: "virtualScrollOptions", scrollHeight: "scrollHeight", tabindex: ["tabindex", "tabindex", numberAttribute], multiple: ["multiple", "multiple", booleanAttribute], style: "style", styleClass: "styleClass", listStyle: "listStyle", listStyleClass: "listStyleClass", readonly: ["readonly", "readonly", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], checkbox: ["checkbox", "checkbox", booleanAttribute], filter: ["filter", "filter", booleanAttribute], filterBy: "filterBy", filterMatchMode: "filterMatchMode", filterLocale: "filterLocale", metaKeySelection: ["metaKeySelection", "metaKeySelection", booleanAttribute], dataKey: "dataKey", showToggleAll: ["showToggleAll", "showToggleAll", booleanAttribute], optionLabel: "optionLabel", optionValue: "optionValue", optionGroupChildren: "optionGroupChildren", optionGroupLabel: "optionGroupLabel", optionDisabled: "optionDisabled", ariaFilterLabel: "ariaFilterLabel", filterPlaceHolder: "filterPlaceHolder", emptyFilterMessage: "emptyFilterMessage", emptyMessage: "emptyMessage", group: ["group", "group", booleanAttribute], options: "options", filterValue: "filterValue", selectAll: "selectAll" }, outputs: { onChange: "onChange", onClick: "onClick", onDblClick: "onDblClick", onFilter: "onFilter", onFocus: "onFocus", onBlur: "onBlur", onSelectAllChange: "onSelectAllChange" }, host: { classAttribute: "cax-element" }, providers: [LISTBOX_VALUE_ACCESSOR], queries: [{ propertyName: "headerFacet", first: true, predicate: Header, descendants: true }, { propertyName: "footerFacet", first: true, predicate: Footer, descendants: true }, { propertyName: "templates", predicate: CaxTemplate }], viewQueries: [{ propertyName: "headerCheckboxViewChild", first: true, predicate: ["headerchkbox"], descendants: true }, { propertyName: "filterViewChild", first: true, predicate: ["filter"], descendants: true }, { propertyName: "lastHiddenFocusableElement", first: true, predicate: ["lastHiddenFocusableElement"], descendants: true }, { propertyName: "firstHiddenFocusableElement", first: true, predicate: ["firstHiddenFocusableElement"], descendants: true }, { propertyName: "scroller", first: true, predicate: ["scroller"], descendants: true }, { propertyName: "listViewChild", first: true, predicate: ["list"], descendants: true }, { propertyName: "wrapperViewChild", first: true, predicate: ["wrapper"], descendants: true }], ngImport: i0, template: `
-        <div [attr.id]="id" [ngClass]="containerClass" [ngStyle]="style" [class]="styleClass" (focusout)="onFocusout($event)">
-            <span #firstHiddenFocusableElement role="presentation" class="p-hidden-accessible p-hidden-focusable" [tabindex]="!disabled ? tabindex : -1" (focus)="onFirstHiddenFocus($event)" [attr.data-p-hidden-focusable]="true"> </span>
-            <div class="p-listbox-header" *ngIf="headerFacet || headerTemplate">
-                <ng-content select="cax-header"></ng-content>
-                <ng-container *ngTemplateOutlet="headerTemplate; context: { $implicit: modelValue(), options: visibleOptions() }"></ng-container>
-            </div>
-            <div class="p-listbox-header" *ngIf="(checkbox && multiple && showToggleAll) || filter">
-                <div *ngIf="checkbox && multiple && showToggleAll" class="p-checkbox p-component" [ngClass]="{ 'p-checkbox-disabled': disabled || toggleAllDisabled }" (click)="onToggleAll($event)" (keydown)="onHeaderCheckboxKeyDown($event)">
-                    <div class="p-hidden-accessible" [attr.data-p-hidden-accessible]="true">
-                        <input
-                            #headerchkbox
-                            type="checkbox"
-                            readonly="readonly"
-                            [attr.checked]="allSelected()"
-                            [disabled]="disabled || toggleAllDisabled"
-                            (focus)="onHeaderCheckboxFocus($event)"
-                            (blur)="onHeaderCheckboxBlur($event)"
-                            [attr.aria-label]="toggleAllAriaLabel"
-                        />
-                    </div>
-                    <div class="p-checkbox-box" role="checkbox" [attr.aria-checked]="allSelected()" [ngClass]="{ 'p-highlight': allSelected(), 'p-focus': headerCheckboxFocus, 'p-disabled': disabled || toggleAllDisabled }">
-                        <ng-container *ngIf="allSelected()">
-                            <CheckIcon [styleClass]="'p-checkbox-icon'" *ngIf="!checkIconTemplate" [attr.aria-hidden]="true" />
-                            <span *ngIf="checkIconTemplate" class="p-checkbox-icon" [attr.aria-hidden]="true">
-                                <ng-template *ngTemplateOutlet="checkIconTemplate"></ng-template>
-                            </span>
-                        </ng-container>
-                    </div>
-                </div>
-                <ng-container *ngIf="filterTemplate; else builtInFilterElement">
-                    <ng-container *ngTemplateOutlet="filterTemplate; context: { options: filterOptions }"></ng-container>
-                </ng-container>
-                <ng-template #builtInFilterElement>
-                    <div class="p-listbox-filter-container" *ngIf="filter">
-                        <input
-                            #filterInput
-                            type="text"
-                            class="p-listbox-filter p-inputtext p-component"
-                            role="searchbox"
-                            [value]="_filterValue() || ''"
-                            [disabled]="disabled"
-                            [attr.aria-owns]="id + '_list'"
-                            [attr.aria-activedescendant]="focusedOptionId"
-                            [attr.placeholder]="filterPlaceHolder"
-                            [attr.aria-label]="ariaFilterLabel"
-                            [tabindex]="!disabled && !focused ? tabindex : -1"
-                            (input)="onFilterChange($event)"
-                            (keydown)="onFilterKeyDown($event)"
-                            (focus)="onFilterFocus($event)"
-                            (blur)="onFilterBlur($event)"
-                        />
-                        <SearchIcon *ngIf="!filterIconTemplate" [styleClass]="'p-listbox-filter-icon'" [attr.aria-hidden]="true" />
-                        <span *ngIf="filterIconTemplate" class="p-listbox-filter-icon" [attr.aria-hidden]="true">
-                            <ng-template *ngTemplateOutlet="filterIconTemplate"></ng-template>
-                        </span>
-                    </div>
-                    <span role="status" attr.aria-live="polite" class="p-hidden-accessible" [attr.data-p-hidden-accessible]="true">
-                        {{ filterResultMessageText }}
-                    </span>
-                </ng-template>
-            </div>
-            <div #wrapper [ngClass]="'p-listbox-list-wrapper'" [ngStyle]="listStyle" [class]="listStyleClass" [style.max-height]="virtualScroll ? 'auto' : scrollHeight || 'auto'" [attr.tabindex]="!disabled && '0'">
-                <cax-scroller
-                    #scroller
-                    *ngIf="virtualScroll"
-                    [items]="visibleOptions()"
-                    [style]="{ height: scrollHeight }"
-                    [itemSize]="virtualScrollItemSize"
-                    [autoSize]="true"
-                    [lazy]="lazy"
-                    [options]="virtualScrollOptions"
-                    (onLazyLoad)="onLazyLoad.emit($event)"
-                    [tabindex]="scrollerTabIndex"
-                >
-                    <ng-template caxTemplate="content" let-items let-scrollerOptions="options">
-                        <ng-container *ngTemplateOutlet="buildInItems; context: { $implicit: items, options: scrollerOptions }"></ng-container>
-                    </ng-template>
-                    <ng-container *ngIf="loaderTemplate">
-                        <ng-template caxTemplate="loader" let-scrollerOptions="options">
-                            <ng-container *ngTemplateOutlet="loaderTemplate; context: { options: scrollerOptions }"></ng-container>
-                        </ng-template>
-                    </ng-container>
-                </cax-scroller>
-                <ng-container *ngIf="!virtualScroll">
-                    <ng-container *ngTemplateOutlet="buildInItems; context: { $implicit: visibleOptions(), options: {} }"></ng-container>
-                </ng-container>
-
-                <ng-template #buildInItems let-items let-scrollerOptions="options">
-                    <ul
-                        #list
-                        class="p-listbox-list"
-                        role="listbox"
-                        [tabindex]="-1"
-                        [attr.aria-multiselectable]="true"
-                        [ngClass]="scrollerOptions.contentStyleClass"
-                        [ngStyle]="scrollerOptions.contentStyle"
-                        [attr.aria-activedescendant]="focused ? focusedOptionId : undefined"
-                        [attr.aria-label]="ariaLabel"
-                        [attr.aria-multiselectable]="multiple"
-                        [attr.aria-disabled]="disabled"
-                        (focus)="onListFocus($event)"
-                        (blur)="onListBlur($event)"
-                        (keydown)="onListKeyDown($event)"
-                    >
-                        <ng-template ngFor let-option [ngForOf]="items" let-i="index">
-                            <ng-container *ngIf="isOptionGroup(option)">
-                                <li [attr.id]="id + '_' + getOptionIndex(i, scrollerOptions)" class="p-listbox-item-group" [ngStyle]="{ height: scrollerOptions.itemSize + 'px' }" role="option">
-                                    <span *ngIf="!groupTemplate">{{ getOptionGroupLabel(option.optionGroup) }}</span>
-                                    <ng-container *ngTemplateOutlet="groupTemplate; context: { $implicit: option.optionGroup }"></ng-container>
-                                </li>
-                            </ng-container>
-                            <ng-container *ngIf="!isOptionGroup(option)">
-                                <li
-                                    pRipple
-                                    class="p-listbox-item"
-                                    role="option"
-                                    [attr.id]="id + '_' + getOptionIndex(i, scrollerOptions)"
-                                    [ngStyle]="{ height: scrollerOptions.itemSize + 'px' }"
-                                    [ngClass]="{ 'p-listbox-item': true, 'p-highlight': isSelected(option), 'p-focus': focusedOptionIndex() === getOptionIndex(i, scrollerOptions), 'p-disabled': isOptionDisabled(option) }"
-                                    [attr.aria-label]="getOptionLabel(option)"
-                                    [attr.aria-selected]="isSelected(option)"
-                                    [attr.aria-disabled]="isOptionDisabled(option)"
-                                    [attr.aria-setsize]="ariaSetSize"
-                                    [attr.ariaPosInset]="getAriaPosInset(getOptionIndex(i, scrollerOptions))"
-                                    (click)="onOptionSelect($event, option, getOptionIndex(i, scrollerOptions))"
-                                    (dblclick)="onOptionDoubleClick($event, option)"
-                                    (mousedown)="onOptionMouseDown($event, getOptionIndex(i, scrollerOptions))"
-                                    (mouseenter)="onOptionMouseEnter($event, getOptionIndex(i, scrollerOptions))"
-                                    (touchend)="onOptionTouchEnd()"
-                                >
-                                    <div class="p-checkbox p-component" *ngIf="checkbox && multiple" [ngClass]="{ 'p-checkbox-disabled': disabled || isOptionDisabled(option) }">
-                                        <div class="p-checkbox-box" [ngClass]="{ 'p-highlight': isSelected(option) }">
-                                            <ng-container *ngIf="isSelected(option)">
-                                                <CheckIcon [styleClass]="'p-checkbox-icon'" *ngIf="!checkIconTemplate" [attr.aria-hidden]="true" />
-                                                <span *ngIf="checkIconTemplate" class="p-checkbox-icon" [attr.aria-hidden]="true">
-                                                    <ng-template *ngTemplateOutlet="checkIconTemplate"></ng-template>
-                                                </span>
-                                            </ng-container>
-                                        </div>
-                                    </div>
-                                    <span *ngIf="!itemTemplate">{{ getOptionLabel(option) }}</span>
-                                    <ng-container *ngTemplateOutlet="itemTemplate; context: { $implicit: option, index: getOptionIndex(i, scrollerOptions) }"></ng-container>
-                                </li>
-                            </ng-container>
-                        </ng-template>
-                        <li *ngIf="hasFilter() && isEmpty()" class="p-listbox-empty-message" role="option">
-                            <ng-container *ngIf="!emptyFilterTemplate && !emptyTemplate; else emptyFilter">
-                                {{ emptyFilterMessageText }}
-                            </ng-container>
-                            <ng-container #emptyFilter *ngTemplateOutlet="emptyFilterTemplate || emptyTemplate"></ng-container>
-                        </li>
-                        <li *ngIf="!hasFilter() && isEmpty()" class="p-listbox-empty-message" role="option">
-                            <ng-container *ngIf="!emptyTemplate; else empty">
-                                {{ emptyMessage }}
-                            </ng-container>
-                            <ng-container #empty *ngTemplateOutlet="emptyTemplate"></ng-container>
-                        </li>
-                    </ul>
-                </ng-template>
-            </div>
-            <div class="p-listbox-footer" *ngIf="footerFacet || footerTemplate">
-                <ng-content select="cax-footer"></ng-content>
-                <ng-container *ngTemplateOutlet="footerTemplate; context: { $implicit: modelValue(), options: visibleOptions() }"></ng-container>
-            </div>
-            <span *ngIf="isEmpty()" role="status" aria-live="polite" class="p-hidden-accessible">
-                {{ emptyMessage }}
-            </span>
-            <span role="status" aria-live="polite" class="p-hidden-accessible">
-                {{ selectedMessageText }}
-            </span>
-            <span #lastHiddenFocusableElement role="presentation" class="p-hidden-accessible p-hidden-focusable" [tabindex]="!disabled ? tabindex : -1" (focus)="onLastHiddenFocus($event)" [attr.data-p-hidden-focusable]="true"> </span>
-        </div>
-    `, isInline: true, styles: ["@layer cax{.p-listbox-list-wrapper{overflow:auto}.p-listbox-list{list-style-type:none;margin:0;padding:0}.p-listbox-item{cursor:pointer;position:relative;overflow:hidden;display:flex;align-items:center;-webkit-user-select:none;user-select:none}.p-listbox-header{display:flex;align-items:center}.p-listbox-filter-container{position:relative;flex:1 1 auto}.p-listbox-filter-icon{position:absolute;top:50%;margin-top:-.5rem}.p-listbox-filter{width:100%}}\n"], dependencies: [{ kind: "directive", type: i0.forwardRef(() => i2.NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(() => i2.NgForOf), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(() => i2.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(() => i2.NgTemplateOutlet), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i0.forwardRef(() => i2.NgStyle), selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i0.forwardRef(() => i1.CaxTemplate), selector: "[caxTemplate]", inputs: ["type", "caxTemplate"] }, { kind: "component", type: i0.forwardRef(() => i3.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: "component", type: i0.forwardRef(() => SearchIcon), selector: "SearchIcon" }, { kind: "component", type: i0.forwardRef(() => CheckIcon), selector: "CheckIcon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: Listbox, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1.FilterService }, { token: i1.caxConfig }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.21", type: Listbox, isStandalone: false, selector: "cax-listbox", inputs: { id: "id", searchMessage: "searchMessage", emptySelectionMessage: "emptySelectionMessage", selectionMessage: "selectionMessage", autoOptionFocus: ["autoOptionFocus", "autoOptionFocus", booleanAttribute], variant: "variant", size: "size", selectOnFocus: ["selectOnFocus", "selectOnFocus", booleanAttribute], searchLocale: ["searchLocale", "searchLocale", booleanAttribute], focusOnHover: ["focusOnHover", "focusOnHover", booleanAttribute], filterMessage: "filterMessage", filterFields: "filterFields", lazy: ["lazy", "lazy", booleanAttribute], virtualScroll: ["virtualScroll", "virtualScroll", booleanAttribute], virtualScrollItemSize: ["virtualScrollItemSize", "virtualScrollItemSize", numberAttribute], virtualScrollOptions: "virtualScrollOptions", scrollHeight: "scrollHeight", tabindex: ["tabindex", "tabindex", numberAttribute], multiple: ["multiple", "multiple", booleanAttribute], style: "style", styleClass: "styleClass", listStyle: "listStyle", listStyleClass: "listStyleClass", readonly: ["readonly", "readonly", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], checkbox: ["checkbox", "checkbox", booleanAttribute], filter: ["filter", "filter", booleanAttribute], filterBy: "filterBy", filterMatchMode: "filterMatchMode", filterLocale: "filterLocale", metaKeySelection: ["metaKeySelection", "metaKeySelection", booleanAttribute], dataKey: "dataKey", showToggleAll: ["showToggleAll", "showToggleAll", booleanAttribute], optionLabel: "optionLabel", optionValue: "optionValue", optionGroupChildren: "optionGroupChildren", optionGroupLabel: "optionGroupLabel", optionDisabled: "optionDisabled", ariaFilterLabel: "ariaFilterLabel", placeholder: "placeholder", emptyFilterMessage: "emptyFilterMessage", emptyMessage: "emptyMessage", group: ["group", "group", booleanAttribute], options: "options", filterValue: "filterValue", selectAll: "selectAll" }, outputs: { onChange: "onChange", onClick: "onClick", onDblClick: "onDblClick", onFilter: "onFilter", onFocus: "onFocus", onBlur: "onBlur", onSelectAllChange: "onSelectAllChange" }, host: { classAttribute: "cax-element" }, providers: [LISTBOX_VALUE_ACCESSOR], queries: [{ propertyName: "headerFacet", first: true, predicate: Header, descendants: true }, { propertyName: "footerFacet", first: true, predicate: Footer, descendants: true }, { propertyName: "templates", predicate: CaxTemplate }], viewQueries: [{ propertyName: "headerCheckboxViewChild", first: true, predicate: ["headerchkbox"], descendants: true }, { propertyName: "filterViewChild", first: true, predicate: ["filter"], descendants: true }, { propertyName: "lastHiddenFocusableElement", first: true, predicate: ["lastHiddenFocusableElement"], descendants: true }, { propertyName: "firstHiddenFocusableElement", first: true, predicate: ["firstHiddenFocusableElement"], descendants: true }, { propertyName: "scroller", first: true, predicate: ["scroller"], descendants: true }, { propertyName: "listViewChild", first: true, predicate: ["list"], descendants: true }, { propertyName: "wrapperViewChild", first: true, predicate: ["wrapper"], descendants: true }], ngImport: i0, template: "<div [attr.id]=\"id\" [ngClass]=\"containerClass\" [ngStyle]=\"style\" [class]=\"styleClass\" (focusout)=\"onFocusout($event)\">\n    <span #firstHiddenFocusableElement role=\"presentation\" class=\"cax-hidden-accessible cax-hidden-focusable\" [tabindex]=\"!disabled ? tabindex : -1\" (focus)=\"onFirstHiddenFocus($event)\" [attr.data-p-hidden-focusable]=\"true\"> </span>\n    <div class=\"cax-listbox-header\" *ngIf=\"headerFacet || headerTemplate\">\n        <ng-content select=\"cax-header\"></ng-content>\n        <ng-container *ngTemplateOutlet=\"headerTemplate; context: { $implicit: modelValue(), options: visibleOptions() }\"></ng-container>\n    </div>\n    <div class=\"cax-listbox-header\" *ngIf=\"(checkbox && multiple && showToggleAll) || filter\">\n        <div *ngIf=\"checkbox && multiple && showToggleAll\" class=\"cax-checkbox cax-component\" [ngClass]=\"{ 'cax-checkbox-disabled': disabled || toggleAllDisabled }\" (click)=\"onToggleAll($event)\" (keydown)=\"onHeaderCheckboxKeyDown($event)\">\n            <div class=\"cax-hidden-accessible\" [attr.data-cax-hidden-accessible]=\"true\">\n                <input\n                    #headerchkbox\n                    type=\"checkbox\"\n                    readonly=\"readonly\"\n                    [attr.checked]=\"allSelected()\"\n                    [disabled]=\"disabled || toggleAllDisabled\"\n                    (focus)=\"onHeaderCheckboxFocus($event)\"\n                    (blur)=\"onHeaderCheckboxBlur($event)\"\n                    [attr.aria-label]=\"toggleAllAriaLabel\"\n                />\n            </div>\n            <div class=\"cax-checkbox-box\" role=\"checkbox\" [attr.aria-checked]=\"allSelected()\" [ngClass]=\"{ 'cax-highlight': allSelected(), 'cax-focus': headerCheckboxFocus, 'cax-disabled': disabled || toggleAllDisabled }\">\n                <ng-container *ngIf=\"allSelected()\">\n                    <CheckIcon [styleClass]=\"'cax-checkbox-icon'\" *ngIf=\"!checkIconTemplate\" [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                </ng-container>\n            </div>\n        </div>\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-listbox-filter-container\" *ngIf=\"filter\">\n                <!-- <SearchIcon *ngIf=\"!filterIconTemplate\" [styleClass]=\"'cax-listbox-filter-icon'\" [attr.aria-hidden]=\"true\" /> -->\n                <i class=\"cax cax-magnifier cax-listbox-filter-icon\"></i>\n                <span *ngIf=\"filterIconTemplate\" class=\"cax-listbox-filter-icon\" [attr.aria-hidden]=\"true\">\n                    <ng-template *ngTemplateOutlet=\"filterIconTemplate\"></ng-template>\n                </span>\n                <input\n                    #filterInput\n                    type=\"text\"\n                    class=\"cax-listbox-filter cax-inputtext\"\n                    role=\"searchbox\"\n                    [value]=\"_filterValue() || ''\"\n                    [disabled]=\"disabled\"\n                    [attr.aria-owns]=\"id + '_list'\"\n                    [attr.aria-activedescendant]=\"focusedOptionId\"\n                    [attr.placeholder]=\"placeholder\"\n                    [attr.aria-label]=\"ariaFilterLabel\"\n                    [tabindex]=\"!disabled && !focused ? tabindex : -1\"\n                    (input)=\"onFilterChange($event)\"\n                    (keydown)=\"onFilterKeyDown($event)\"\n                    (focus)=\"onFilterFocus($event)\"\n                    (blur)=\"onFilterBlur($event)\"\n                    [ngClass]=\"{ 'cax-text-action-md-regular': size === 'md', 'cax-text-action-sm-medium': size === 'sm', 'cax-text-action-lg-regular': size === 'lg' }\"\n                />\n            </div>\n            <span role=\"status\" attr.aria-live=\"polite\" class=\"cax-hidden-accessible\" [attr.data-p-hidden-accessible]=\"true\"> {{ filterResultMessageText }} </span>\n        </ng-template>\n    </div>\n    <div #wrapper [ngClass]=\"'cax-listbox-list-wrapper'\" [ngStyle]=\"listStyle\" [class]=\"listStyleClass\" [style.max-height]=\"virtualScroll ? 'auto' : scrollHeight || 'auto'\" [attr.tabindex]=\"!disabled && '0'\">\n        <cax-scroller\n            #scroller\n            *ngIf=\"virtualScroll\"\n            [items]=\"visibleOptions()\"\n            [style]=\"{ height: scrollHeight }\"\n            [itemSize]=\"virtualScrollItemSize\"\n            [autoSize]=\"true\"\n            [lazy]=\"lazy\"\n            [options]=\"virtualScrollOptions\"\n            (onLazyLoad)=\"onLazyLoad.emit($event)\"\n            [tabindex]=\"scrollerTabIndex\"\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\n                #list\n                class=\"cax-listbox-list\"\n                role=\"listbox\"\n                [tabindex]=\"-1\"\n                [attr.aria-multiselectable]=\"true\"\n                [ngClass]=\"scrollerOptions.contentStyleClass\"\n                [ngStyle]=\"scrollerOptions.contentStyle\"\n                [attr.aria-activedescendant]=\"focused ? focusedOptionId : undefined\"\n                [attr.aria-label]=\"ariaLabel\"\n                [attr.aria-multiselectable]=\"multiple\"\n                [attr.aria-disabled]=\"disabled\"\n                (focus)=\"onListFocus($event)\"\n                (blur)=\"onListBlur($event)\"\n                (keydown)=\"onListKeyDown($event)\"\n            >\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-listbox-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                        <li\n                            caxRipple\n                            class=\"cax-listbox-item\"\n                            role=\"option\"\n                            [attr.id]=\"id + '_' + getOptionIndex(i, scrollerOptions)\"\n                            [ngStyle]=\"{ height: scrollerOptions.itemSize + 'px' }\"\n                            [ngClass]=\"{ 'cax-listbox-item': true, 'cax-highlight': isSelected(option), 'cax-focus': focusedOptionIndex() === getOptionIndex(i, scrollerOptions), 'cax-disabled': isOptionDisabled(option), 'cax-text-action-md-regular': size === 'md', 'cax-text-action-sm-medium': size === 'sm', 'cax-text-action-lg-regular': size === 'lg' }\"\n                            [attr.aria-label]=\"getOptionLabel(option)\"\n                            [attr.aria-selected]=\"isSelected(option)\"\n                            [attr.aria-disabled]=\"isOptionDisabled(option)\"\n                            [attr.aria-setsize]=\"ariaSetSize\"\n                            [attr.ariaPosInset]=\"getAriaPosInset(getOptionIndex(i, scrollerOptions))\"\n                            (click)=\"onOptionSelect($event, option, getOptionIndex(i, scrollerOptions))\"\n                            (dblclick)=\"onOptionDoubleClick($event, option)\"\n                            (mousedown)=\"onOptionMouseDown($event, getOptionIndex(i, scrollerOptions))\"\n                            (mouseenter)=\"onOptionMouseEnter($event, getOptionIndex(i, scrollerOptions))\"\n                            (touchend)=\"onOptionTouchEnd()\"\n                        >\n                            <div class=\"cax-checkbox cax-component\" *ngIf=\"checkbox && multiple\" [ngClass]=\"{ 'cax-checkbox-disabled': disabled || isOptionDisabled(option) }\">\n                                <div class=\"cax-checkbox-box\" [ngClass]=\"{ 'cax-highlight': isSelected(option) }\">\n                                    <ng-container *ngIf=\"isSelected(option)\">\n                                        <CheckIcon [styleClass]=\"'cax-checkbox-icon'\" *ngIf=\"!checkIconTemplate\" [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                                    </ng-container>\n                                </div>\n                            </div>\n                            <span *ngIf=\"!itemTemplate\">{{ getOptionLabel(option) }}</span>\n                            <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: option, index: getOptionIndex(i, scrollerOptions) }\"></ng-container>\n                        </li>\n                    </ng-container>\n                </ng-template>\n                <li *ngIf=\"hasFilter() && isEmpty()\" class=\"cax-listbox-empty-message\" role=\"option\">\n                    <ng-container *ngIf=\"!emptyFilterTemplate && !emptyTemplate; else emptyFilter\"> {{ emptyFilterMessageText }} </ng-container>\n                    <ng-container #emptyFilter *ngTemplateOutlet=\"emptyFilterTemplate || emptyTemplate\"></ng-container>\n                </li>\n                <li *ngIf=\"!hasFilter() && isEmpty()\" class=\"cax-listbox-empty-message\" role=\"option\">\n                    <ng-container *ngIf=\"!emptyTemplate; else empty\"> {{ emptyMessage }} </ng-container>\n                    <ng-container #empty *ngTemplateOutlet=\"emptyTemplate\"></ng-container>\n                </li>\n            </ul>\n        </ng-template>\n    </div>\n    <div *ngIf=\"footerFacet || footerTemplate\" style=\"padding: 0 12px\">\n        <cax-divider [style]=\"{margin: '0px'}\" type=\"solid\" />\n    </div>\n    <div class=\"cax-listbox-footer\" *ngIf=\"footerFacet || footerTemplate\">\n        <ng-content select=\"cax-footer\"></ng-content>\n        <ng-container *ngTemplateOutlet=\"footerTemplate; context: { $implicit: modelValue(), options: visibleOptions() }\"></ng-container>\n    </div>\n    <span *ngIf=\"isEmpty()\" role=\"status\" aria-live=\"polite\" class=\"cax-hidden-accessible\"> {{ emptyMessage }} </span>\n    <span role=\"status\" aria-live=\"polite\" class=\"cax-hidden-accessible\"> {{ selectedMessageText }} </span>\n    <span #lastHiddenFocusableElement role=\"presentation\" class=\"cax-hidden-accessible cax-hidden-focusable\" [tabindex]=\"!disabled ? tabindex : -1\" (focus)=\"onLastHiddenFocus($event)\" [attr.data-cax-hidden-focusable]=\"true\"> </span>\n</div>\n", styles: ["@layer cax{.cax-listbox-list-wrapper{overflow:auto}.cax-listbox{width:216px}.cax-listbox-list{list-style-type:none;margin:0;padding:0}.cax-listbox-item{cursor:pointer;position:relative;overflow:hidden;display:flex;align-items:center;-webkit-user-select:none;user-select:none}.cax-listbox-header{display:flex;align-items:center}.cax-listbox-filter-container{position:relative;flex:1 1 auto;display:flex;justify-content:space-between}.cax-listbox-filter-icon{position:absolute;left:.45rem;top:50%;transform:translateY(-50%);color:var(--neutral-900);font-size:16px;pointer-events:none}.cax-listbox-filter{height:32px}}\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: "directive", type: i1.CaxTemplate, selector: "[caxTemplate]", inputs: ["type", "caxTemplate"] }, { kind: "directive", type: i3.Ripple, selector: "[caxRipple]" }, { kind: "component", type: i4.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: "component", type: i5.CheckIcon, selector: "CheckIcon" }, { kind: "component", type: i6.Divider, selector: "cax-divider", inputs: ["style", "styleClass", "layout", "type", "align", "variant"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: Listbox, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: Listbox, decorators: [{
             type: Component,
-            args: [{ selector: 'p-listbox', template: `
-        <div [attr.id]="id" [ngClass]="containerClass" [ngStyle]="style" [class]="styleClass" (focusout)="onFocusout($event)">
-            <span #firstHiddenFocusableElement role="presentation" class="p-hidden-accessible p-hidden-focusable" [tabindex]="!disabled ? tabindex : -1" (focus)="onFirstHiddenFocus($event)" [attr.data-p-hidden-focusable]="true"> </span>
-            <div class="p-listbox-header" *ngIf="headerFacet || headerTemplate">
-                <ng-content select="cax-header"></ng-content>
-                <ng-container *ngTemplateOutlet="headerTemplate; context: { $implicit: modelValue(), options: visibleOptions() }"></ng-container>
-            </div>
-            <div class="p-listbox-header" *ngIf="(checkbox && multiple && showToggleAll) || filter">
-                <div *ngIf="checkbox && multiple && showToggleAll" class="p-checkbox p-component" [ngClass]="{ 'p-checkbox-disabled': disabled || toggleAllDisabled }" (click)="onToggleAll($event)" (keydown)="onHeaderCheckboxKeyDown($event)">
-                    <div class="p-hidden-accessible" [attr.data-p-hidden-accessible]="true">
-                        <input
-                            #headerchkbox
-                            type="checkbox"
-                            readonly="readonly"
-                            [attr.checked]="allSelected()"
-                            [disabled]="disabled || toggleAllDisabled"
-                            (focus)="onHeaderCheckboxFocus($event)"
-                            (blur)="onHeaderCheckboxBlur($event)"
-                            [attr.aria-label]="toggleAllAriaLabel"
-                        />
-                    </div>
-                    <div class="p-checkbox-box" role="checkbox" [attr.aria-checked]="allSelected()" [ngClass]="{ 'p-highlight': allSelected(), 'p-focus': headerCheckboxFocus, 'p-disabled': disabled || toggleAllDisabled }">
-                        <ng-container *ngIf="allSelected()">
-                            <CheckIcon [styleClass]="'p-checkbox-icon'" *ngIf="!checkIconTemplate" [attr.aria-hidden]="true" />
-                            <span *ngIf="checkIconTemplate" class="p-checkbox-icon" [attr.aria-hidden]="true">
-                                <ng-template *ngTemplateOutlet="checkIconTemplate"></ng-template>
-                            </span>
-                        </ng-container>
-                    </div>
-                </div>
-                <ng-container *ngIf="filterTemplate; else builtInFilterElement">
-                    <ng-container *ngTemplateOutlet="filterTemplate; context: { options: filterOptions }"></ng-container>
-                </ng-container>
-                <ng-template #builtInFilterElement>
-                    <div class="p-listbox-filter-container" *ngIf="filter">
-                        <input
-                            #filterInput
-                            type="text"
-                            class="p-listbox-filter p-inputtext p-component"
-                            role="searchbox"
-                            [value]="_filterValue() || ''"
-                            [disabled]="disabled"
-                            [attr.aria-owns]="id + '_list'"
-                            [attr.aria-activedescendant]="focusedOptionId"
-                            [attr.placeholder]="filterPlaceHolder"
-                            [attr.aria-label]="ariaFilterLabel"
-                            [tabindex]="!disabled && !focused ? tabindex : -1"
-                            (input)="onFilterChange($event)"
-                            (keydown)="onFilterKeyDown($event)"
-                            (focus)="onFilterFocus($event)"
-                            (blur)="onFilterBlur($event)"
-                        />
-                        <SearchIcon *ngIf="!filterIconTemplate" [styleClass]="'p-listbox-filter-icon'" [attr.aria-hidden]="true" />
-                        <span *ngIf="filterIconTemplate" class="p-listbox-filter-icon" [attr.aria-hidden]="true">
-                            <ng-template *ngTemplateOutlet="filterIconTemplate"></ng-template>
-                        </span>
-                    </div>
-                    <span role="status" attr.aria-live="polite" class="p-hidden-accessible" [attr.data-p-hidden-accessible]="true">
-                        {{ filterResultMessageText }}
-                    </span>
-                </ng-template>
-            </div>
-            <div #wrapper [ngClass]="'p-listbox-list-wrapper'" [ngStyle]="listStyle" [class]="listStyleClass" [style.max-height]="virtualScroll ? 'auto' : scrollHeight || 'auto'" [attr.tabindex]="!disabled && '0'">
-                <cax-scroller
-                    #scroller
-                    *ngIf="virtualScroll"
-                    [items]="visibleOptions()"
-                    [style]="{ height: scrollHeight }"
-                    [itemSize]="virtualScrollItemSize"
-                    [autoSize]="true"
-                    [lazy]="lazy"
-                    [options]="virtualScrollOptions"
-                    (onLazyLoad)="onLazyLoad.emit($event)"
-                    [tabindex]="scrollerTabIndex"
-                >
-                    <ng-template caxTemplate="content" let-items let-scrollerOptions="options">
-                        <ng-container *ngTemplateOutlet="buildInItems; context: { $implicit: items, options: scrollerOptions }"></ng-container>
-                    </ng-template>
-                    <ng-container *ngIf="loaderTemplate">
-                        <ng-template caxTemplate="loader" let-scrollerOptions="options">
-                            <ng-container *ngTemplateOutlet="loaderTemplate; context: { options: scrollerOptions }"></ng-container>
-                        </ng-template>
-                    </ng-container>
-                </cax-scroller>
-                <ng-container *ngIf="!virtualScroll">
-                    <ng-container *ngTemplateOutlet="buildInItems; context: { $implicit: visibleOptions(), options: {} }"></ng-container>
-                </ng-container>
-
-                <ng-template #buildInItems let-items let-scrollerOptions="options">
-                    <ul
-                        #list
-                        class="p-listbox-list"
-                        role="listbox"
-                        [tabindex]="-1"
-                        [attr.aria-multiselectable]="true"
-                        [ngClass]="scrollerOptions.contentStyleClass"
-                        [ngStyle]="scrollerOptions.contentStyle"
-                        [attr.aria-activedescendant]="focused ? focusedOptionId : undefined"
-                        [attr.aria-label]="ariaLabel"
-                        [attr.aria-multiselectable]="multiple"
-                        [attr.aria-disabled]="disabled"
-                        (focus)="onListFocus($event)"
-                        (blur)="onListBlur($event)"
-                        (keydown)="onListKeyDown($event)"
-                    >
-                        <ng-template ngFor let-option [ngForOf]="items" let-i="index">
-                            <ng-container *ngIf="isOptionGroup(option)">
-                                <li [attr.id]="id + '_' + getOptionIndex(i, scrollerOptions)" class="p-listbox-item-group" [ngStyle]="{ height: scrollerOptions.itemSize + 'px' }" role="option">
-                                    <span *ngIf="!groupTemplate">{{ getOptionGroupLabel(option.optionGroup) }}</span>
-                                    <ng-container *ngTemplateOutlet="groupTemplate; context: { $implicit: option.optionGroup }"></ng-container>
-                                </li>
-                            </ng-container>
-                            <ng-container *ngIf="!isOptionGroup(option)">
-                                <li
-                                    pRipple
-                                    class="p-listbox-item"
-                                    role="option"
-                                    [attr.id]="id + '_' + getOptionIndex(i, scrollerOptions)"
-                                    [ngStyle]="{ height: scrollerOptions.itemSize + 'px' }"
-                                    [ngClass]="{ 'p-listbox-item': true, 'p-highlight': isSelected(option), 'p-focus': focusedOptionIndex() === getOptionIndex(i, scrollerOptions), 'p-disabled': isOptionDisabled(option) }"
-                                    [attr.aria-label]="getOptionLabel(option)"
-                                    [attr.aria-selected]="isSelected(option)"
-                                    [attr.aria-disabled]="isOptionDisabled(option)"
-                                    [attr.aria-setsize]="ariaSetSize"
-                                    [attr.ariaPosInset]="getAriaPosInset(getOptionIndex(i, scrollerOptions))"
-                                    (click)="onOptionSelect($event, option, getOptionIndex(i, scrollerOptions))"
-                                    (dblclick)="onOptionDoubleClick($event, option)"
-                                    (mousedown)="onOptionMouseDown($event, getOptionIndex(i, scrollerOptions))"
-                                    (mouseenter)="onOptionMouseEnter($event, getOptionIndex(i, scrollerOptions))"
-                                    (touchend)="onOptionTouchEnd()"
-                                >
-                                    <div class="p-checkbox p-component" *ngIf="checkbox && multiple" [ngClass]="{ 'p-checkbox-disabled': disabled || isOptionDisabled(option) }">
-                                        <div class="p-checkbox-box" [ngClass]="{ 'p-highlight': isSelected(option) }">
-                                            <ng-container *ngIf="isSelected(option)">
-                                                <CheckIcon [styleClass]="'p-checkbox-icon'" *ngIf="!checkIconTemplate" [attr.aria-hidden]="true" />
-                                                <span *ngIf="checkIconTemplate" class="p-checkbox-icon" [attr.aria-hidden]="true">
-                                                    <ng-template *ngTemplateOutlet="checkIconTemplate"></ng-template>
-                                                </span>
-                                            </ng-container>
-                                        </div>
-                                    </div>
-                                    <span *ngIf="!itemTemplate">{{ getOptionLabel(option) }}</span>
-                                    <ng-container *ngTemplateOutlet="itemTemplate; context: { $implicit: option, index: getOptionIndex(i, scrollerOptions) }"></ng-container>
-                                </li>
-                            </ng-container>
-                        </ng-template>
-                        <li *ngIf="hasFilter() && isEmpty()" class="p-listbox-empty-message" role="option">
-                            <ng-container *ngIf="!emptyFilterTemplate && !emptyTemplate; else emptyFilter">
-                                {{ emptyFilterMessageText }}
-                            </ng-container>
-                            <ng-container #emptyFilter *ngTemplateOutlet="emptyFilterTemplate || emptyTemplate"></ng-container>
-                        </li>
-                        <li *ngIf="!hasFilter() && isEmpty()" class="p-listbox-empty-message" role="option">
-                            <ng-container *ngIf="!emptyTemplate; else empty">
-                                {{ emptyMessage }}
-                            </ng-container>
-                            <ng-container #empty *ngTemplateOutlet="emptyTemplate"></ng-container>
-                        </li>
-                    </ul>
-                </ng-template>
-            </div>
-            <div class="p-listbox-footer" *ngIf="footerFacet || footerTemplate">
-                <ng-content select="cax-footer"></ng-content>
-                <ng-container *ngTemplateOutlet="footerTemplate; context: { $implicit: modelValue(), options: visibleOptions() }"></ng-container>
-            </div>
-            <span *ngIf="isEmpty()" role="status" aria-live="polite" class="p-hidden-accessible">
-                {{ emptyMessage }}
-            </span>
-            <span role="status" aria-live="polite" class="p-hidden-accessible">
-                {{ selectedMessageText }}
-            </span>
-            <span #lastHiddenFocusableElement role="presentation" class="p-hidden-accessible p-hidden-focusable" [tabindex]="!disabled ? tabindex : -1" (focus)="onLastHiddenFocus($event)" [attr.data-p-hidden-focusable]="true"> </span>
-        </div>
-    `, providers: [LISTBOX_VALUE_ACCESSOR], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: false, host: {
+            args: [{ selector: 'cax-listbox', providers: [LISTBOX_VALUE_ACCESSOR], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: false, host: {
                         class: 'cax-element'
-                    }, styles: ["@layer cax{.p-listbox-list-wrapper{overflow:auto}.p-listbox-list{list-style-type:none;margin:0;padding:0}.p-listbox-item{cursor:pointer;position:relative;overflow:hidden;display:flex;align-items:center;-webkit-user-select:none;user-select:none}.p-listbox-header{display:flex;align-items:center}.p-listbox-filter-container{position:relative;flex:1 1 auto}.p-listbox-filter-icon{position:absolute;top:50%;margin-top:-.5rem}.p-listbox-filter{width:100%}}\n"] }]
+                    }, template: "<div [attr.id]=\"id\" [ngClass]=\"containerClass\" [ngStyle]=\"style\" [class]=\"styleClass\" (focusout)=\"onFocusout($event)\">\n    <span #firstHiddenFocusableElement role=\"presentation\" class=\"cax-hidden-accessible cax-hidden-focusable\" [tabindex]=\"!disabled ? tabindex : -1\" (focus)=\"onFirstHiddenFocus($event)\" [attr.data-p-hidden-focusable]=\"true\"> </span>\n    <div class=\"cax-listbox-header\" *ngIf=\"headerFacet || headerTemplate\">\n        <ng-content select=\"cax-header\"></ng-content>\n        <ng-container *ngTemplateOutlet=\"headerTemplate; context: { $implicit: modelValue(), options: visibleOptions() }\"></ng-container>\n    </div>\n    <div class=\"cax-listbox-header\" *ngIf=\"(checkbox && multiple && showToggleAll) || filter\">\n        <div *ngIf=\"checkbox && multiple && showToggleAll\" class=\"cax-checkbox cax-component\" [ngClass]=\"{ 'cax-checkbox-disabled': disabled || toggleAllDisabled }\" (click)=\"onToggleAll($event)\" (keydown)=\"onHeaderCheckboxKeyDown($event)\">\n            <div class=\"cax-hidden-accessible\" [attr.data-cax-hidden-accessible]=\"true\">\n                <input\n                    #headerchkbox\n                    type=\"checkbox\"\n                    readonly=\"readonly\"\n                    [attr.checked]=\"allSelected()\"\n                    [disabled]=\"disabled || toggleAllDisabled\"\n                    (focus)=\"onHeaderCheckboxFocus($event)\"\n                    (blur)=\"onHeaderCheckboxBlur($event)\"\n                    [attr.aria-label]=\"toggleAllAriaLabel\"\n                />\n            </div>\n            <div class=\"cax-checkbox-box\" role=\"checkbox\" [attr.aria-checked]=\"allSelected()\" [ngClass]=\"{ 'cax-highlight': allSelected(), 'cax-focus': headerCheckboxFocus, 'cax-disabled': disabled || toggleAllDisabled }\">\n                <ng-container *ngIf=\"allSelected()\">\n                    <CheckIcon [styleClass]=\"'cax-checkbox-icon'\" *ngIf=\"!checkIconTemplate\" [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                </ng-container>\n            </div>\n        </div>\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-listbox-filter-container\" *ngIf=\"filter\">\n                <!-- <SearchIcon *ngIf=\"!filterIconTemplate\" [styleClass]=\"'cax-listbox-filter-icon'\" [attr.aria-hidden]=\"true\" /> -->\n                <i class=\"cax cax-magnifier cax-listbox-filter-icon\"></i>\n                <span *ngIf=\"filterIconTemplate\" class=\"cax-listbox-filter-icon\" [attr.aria-hidden]=\"true\">\n                    <ng-template *ngTemplateOutlet=\"filterIconTemplate\"></ng-template>\n                </span>\n                <input\n                    #filterInput\n                    type=\"text\"\n                    class=\"cax-listbox-filter cax-inputtext\"\n                    role=\"searchbox\"\n                    [value]=\"_filterValue() || ''\"\n                    [disabled]=\"disabled\"\n                    [attr.aria-owns]=\"id + '_list'\"\n                    [attr.aria-activedescendant]=\"focusedOptionId\"\n                    [attr.placeholder]=\"placeholder\"\n                    [attr.aria-label]=\"ariaFilterLabel\"\n                    [tabindex]=\"!disabled && !focused ? tabindex : -1\"\n                    (input)=\"onFilterChange($event)\"\n                    (keydown)=\"onFilterKeyDown($event)\"\n                    (focus)=\"onFilterFocus($event)\"\n                    (blur)=\"onFilterBlur($event)\"\n                    [ngClass]=\"{ 'cax-text-action-md-regular': size === 'md', 'cax-text-action-sm-medium': size === 'sm', 'cax-text-action-lg-regular': size === 'lg' }\"\n                />\n            </div>\n            <span role=\"status\" attr.aria-live=\"polite\" class=\"cax-hidden-accessible\" [attr.data-p-hidden-accessible]=\"true\"> {{ filterResultMessageText }} </span>\n        </ng-template>\n    </div>\n    <div #wrapper [ngClass]=\"'cax-listbox-list-wrapper'\" [ngStyle]=\"listStyle\" [class]=\"listStyleClass\" [style.max-height]=\"virtualScroll ? 'auto' : scrollHeight || 'auto'\" [attr.tabindex]=\"!disabled && '0'\">\n        <cax-scroller\n            #scroller\n            *ngIf=\"virtualScroll\"\n            [items]=\"visibleOptions()\"\n            [style]=\"{ height: scrollHeight }\"\n            [itemSize]=\"virtualScrollItemSize\"\n            [autoSize]=\"true\"\n            [lazy]=\"lazy\"\n            [options]=\"virtualScrollOptions\"\n            (onLazyLoad)=\"onLazyLoad.emit($event)\"\n            [tabindex]=\"scrollerTabIndex\"\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\n                #list\n                class=\"cax-listbox-list\"\n                role=\"listbox\"\n                [tabindex]=\"-1\"\n                [attr.aria-multiselectable]=\"true\"\n                [ngClass]=\"scrollerOptions.contentStyleClass\"\n                [ngStyle]=\"scrollerOptions.contentStyle\"\n                [attr.aria-activedescendant]=\"focused ? focusedOptionId : undefined\"\n                [attr.aria-label]=\"ariaLabel\"\n                [attr.aria-multiselectable]=\"multiple\"\n                [attr.aria-disabled]=\"disabled\"\n                (focus)=\"onListFocus($event)\"\n                (blur)=\"onListBlur($event)\"\n                (keydown)=\"onListKeyDown($event)\"\n            >\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-listbox-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                        <li\n                            caxRipple\n                            class=\"cax-listbox-item\"\n                            role=\"option\"\n                            [attr.id]=\"id + '_' + getOptionIndex(i, scrollerOptions)\"\n                            [ngStyle]=\"{ height: scrollerOptions.itemSize + 'px' }\"\n                            [ngClass]=\"{ 'cax-listbox-item': true, 'cax-highlight': isSelected(option), 'cax-focus': focusedOptionIndex() === getOptionIndex(i, scrollerOptions), 'cax-disabled': isOptionDisabled(option), 'cax-text-action-md-regular': size === 'md', 'cax-text-action-sm-medium': size === 'sm', 'cax-text-action-lg-regular': size === 'lg' }\"\n                            [attr.aria-label]=\"getOptionLabel(option)\"\n                            [attr.aria-selected]=\"isSelected(option)\"\n                            [attr.aria-disabled]=\"isOptionDisabled(option)\"\n                            [attr.aria-setsize]=\"ariaSetSize\"\n                            [attr.ariaPosInset]=\"getAriaPosInset(getOptionIndex(i, scrollerOptions))\"\n                            (click)=\"onOptionSelect($event, option, getOptionIndex(i, scrollerOptions))\"\n                            (dblclick)=\"onOptionDoubleClick($event, option)\"\n                            (mousedown)=\"onOptionMouseDown($event, getOptionIndex(i, scrollerOptions))\"\n                            (mouseenter)=\"onOptionMouseEnter($event, getOptionIndex(i, scrollerOptions))\"\n                            (touchend)=\"onOptionTouchEnd()\"\n                        >\n                            <div class=\"cax-checkbox cax-component\" *ngIf=\"checkbox && multiple\" [ngClass]=\"{ 'cax-checkbox-disabled': disabled || isOptionDisabled(option) }\">\n                                <div class=\"cax-checkbox-box\" [ngClass]=\"{ 'cax-highlight': isSelected(option) }\">\n                                    <ng-container *ngIf=\"isSelected(option)\">\n                                        <CheckIcon [styleClass]=\"'cax-checkbox-icon'\" *ngIf=\"!checkIconTemplate\" [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                                    </ng-container>\n                                </div>\n                            </div>\n                            <span *ngIf=\"!itemTemplate\">{{ getOptionLabel(option) }}</span>\n                            <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: option, index: getOptionIndex(i, scrollerOptions) }\"></ng-container>\n                        </li>\n                    </ng-container>\n                </ng-template>\n                <li *ngIf=\"hasFilter() && isEmpty()\" class=\"cax-listbox-empty-message\" role=\"option\">\n                    <ng-container *ngIf=\"!emptyFilterTemplate && !emptyTemplate; else emptyFilter\"> {{ emptyFilterMessageText }} </ng-container>\n                    <ng-container #emptyFilter *ngTemplateOutlet=\"emptyFilterTemplate || emptyTemplate\"></ng-container>\n                </li>\n                <li *ngIf=\"!hasFilter() && isEmpty()\" class=\"cax-listbox-empty-message\" role=\"option\">\n                    <ng-container *ngIf=\"!emptyTemplate; else empty\"> {{ emptyMessage }} </ng-container>\n                    <ng-container #empty *ngTemplateOutlet=\"emptyTemplate\"></ng-container>\n                </li>\n            </ul>\n        </ng-template>\n    </div>\n    <div *ngIf=\"footerFacet || footerTemplate\" style=\"padding: 0 12px\">\n        <cax-divider [style]=\"{margin: '0px'}\" type=\"solid\" />\n    </div>\n    <div class=\"cax-listbox-footer\" *ngIf=\"footerFacet || footerTemplate\">\n        <ng-content select=\"cax-footer\"></ng-content>\n        <ng-container *ngTemplateOutlet=\"footerTemplate; context: { $implicit: modelValue(), options: visibleOptions() }\"></ng-container>\n    </div>\n    <span *ngIf=\"isEmpty()\" role=\"status\" aria-live=\"polite\" class=\"cax-hidden-accessible\"> {{ emptyMessage }} </span>\n    <span role=\"status\" aria-live=\"polite\" class=\"cax-hidden-accessible\"> {{ selectedMessageText }} </span>\n    <span #lastHiddenFocusableElement role=\"presentation\" class=\"cax-hidden-accessible cax-hidden-focusable\" [tabindex]=\"!disabled ? tabindex : -1\" (focus)=\"onLastHiddenFocus($event)\" [attr.data-cax-hidden-focusable]=\"true\"> </span>\n</div>\n", styles: ["@layer cax{.cax-listbox-list-wrapper{overflow:auto}.cax-listbox{width:216px}.cax-listbox-list{list-style-type:none;margin:0;padding:0}.cax-listbox-item{cursor:pointer;position:relative;overflow:hidden;display:flex;align-items:center;-webkit-user-select:none;user-select:none}.cax-listbox-header{display:flex;align-items:center}.cax-listbox-filter-container{position:relative;flex:1 1 auto;display:flex;justify-content:space-between}.cax-listbox-filter-icon{position:absolute;left:.45rem;top:50%;transform:translateY(-50%);color:var(--neutral-900);font-size:16px;pointer-events:none}.cax-listbox-filter{height:32px}}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1.FilterService }, { type: i1.caxConfig }, { type: i0.Renderer2 }], propDecorators: { id: [{
                 type: Input
             }], searchMessage: [{
@@ -1400,7 +1067,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImpo
             }], autoOptionFocus: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
-            }], ariaLabel: [{
+            }], variant: [{
+                type: Input
+            }], size: [{
                 type: Input
             }], selectOnFocus: [{
                 type: Input,
@@ -1480,7 +1149,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImpo
                 type: Input
             }], ariaFilterLabel: [{
                 type: Input
-            }], filterPlaceHolder: [{
+            }], placeholder: [{
                 type: Input
             }], emptyFilterMessage: [{
                 type: Input
@@ -1540,15 +1209,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImpo
                 type: ContentChildren,
                 args: [CaxTemplate]
             }] } });
+
 class ListboxModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: ListboxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.16", ngImport: i0, type: ListboxModule, declarations: [Listbox], imports: [CommonModule, SharedModule, RippleModule, ScrollerModule, SearchIcon, CheckIcon], exports: [Listbox, SharedModule, ScrollerModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: ListboxModule, imports: [CommonModule, SharedModule, RippleModule, ScrollerModule, SearchIcon, CheckIcon, SharedModule, ScrollerModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: ListboxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.21", ngImport: i0, type: ListboxModule, declarations: [Listbox], imports: [CommonModule, SharedModule, RippleModule, ScrollerModule, SearchIcon, CheckIcon, DividerModule], exports: [Listbox, SharedModule, ScrollerModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: ListboxModule, imports: [CommonModule, SharedModule, RippleModule, ScrollerModule, SearchIcon, CheckIcon, DividerModule, SharedModule, ScrollerModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: ListboxModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: ListboxModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [CommonModule, SharedModule, RippleModule, ScrollerModule, SearchIcon, CheckIcon],
+                    imports: [CommonModule, SharedModule, RippleModule, ScrollerModule, SearchIcon, CheckIcon, DividerModule],
                     exports: [Listbox, SharedModule, ScrollerModule],
                     declarations: [Listbox]
                 }]