cax-design-system 2.8.0 → 2.8.2

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

@@ -1,10 +1,10 @@
 import * as i2 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { EventEmitter, booleanAttribute, numberAttribute, Component, Input, Output, forwardRef, signal, computed, effect, ChangeDetectionStrategy, ViewEncapsulation, ViewChild, ContentChildren, NgModule } from '@angular/core';
+import { EventEmitter, booleanAttribute, numberAttribute, Output, Input, Component, forwardRef, signal, computed, effect, ContentChildren, ViewChild, ViewEncapsulation, ChangeDetectionStrategy, NgModule } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import * as i1 from 'cax-design-system/api';
-import { TranslationKeys, CaxTemplate, SharedModule } from 'cax-design-system/api';
+import { TranslationKeys, SharedModule, CaxTemplate } from 'cax-design-system/api';
 import * as i6 from 'cax-design-system/autofocus';
 import { AutoFocusModule } from 'cax-design-system/autofocus';
 import { DomHandler } from 'cax-design-system/dom';
@@ -45,13 +45,13 @@ class DropdownItem {
         this.onMouseEnter.emit(event);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: DropdownItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.2.9", type: DropdownItem, isStandalone: true, selector: "cax-dropdownItem", inputs: { id: "id", option: "option", selected: ["selected", "selected", booleanAttribute], focused: ["focused", "focused", booleanAttribute], label: "label", disabled: ["disabled", "disabled", booleanAttribute], visible: ["visible", "visible", booleanAttribute], itemSize: ["itemSize", "itemSize", numberAttribute], ariaPosInset: "ariaPosInset", ariaSetSize: "ariaSetSize", template: "template", checkmark: ["checkmark", "checkmark", booleanAttribute] }, outputs: { onClick: "onClick", onMouseEnter: "onMouseEnter" }, host: { classAttribute: "cax-element" }, ngImport: i0, template: "<li\n    [id]=\"id\"\n    (click)=\"onOptionClick($event)\"\n    (mouseenter)=\"onOptionMouseEnter($event)\"\n    role=\"option\"\n    caxRipple\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    [ngStyle]=\"{ height: itemSize + 'px' }\"\n    [ngClass]=\"{ 'cax-dropdown-item': true, 'cax-highlight': selected, 'cax-disabled': disabled, 'cax-focus': focused }\"\n>\n    <ng-container *ngIf=\"checkmark\">\n        <CheckIcon *ngIf=\"selected\" [styleClass]=\"'cax-dropdown-check-icon'\" />\n        <BlankIcon *ngIf=\"!selected\" [styleClass]=\"'cax-dropdown-blank-icon'\" />\n    </ng-container>\n    <span *ngIf=\"!template\">{{ label ?? 'empty' }}</span>\n    <ng-container *ngTemplateOutlet=\"template; context: { $implicit: option }\"></ng-container>\n</li>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: "component", type: BlankIcon, selector: "BlankIcon" }, { kind: "component", type: CheckIcon, selector: "CheckIcon" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.2.9", type: DropdownItem, isStandalone: true, selector: "cax-dropdownItem", inputs: { id: "id", option: "option", selected: ["selected", "selected", booleanAttribute], focused: ["focused", "focused", booleanAttribute], label: "label", disabled: ["disabled", "disabled", booleanAttribute], visible: ["visible", "visible", booleanAttribute], itemSize: ["itemSize", "itemSize", numberAttribute], ariaPosInset: "ariaPosInset", ariaSetSize: "ariaSetSize", template: "template", checkmark: ["checkmark", "checkmark", booleanAttribute] }, outputs: { onClick: "onClick", onMouseEnter: "onMouseEnter" }, host: { classAttribute: "cax-element" }, ngImport: i0, template: "<li\r\n    [id]=\"id\"\r\n    (click)=\"onOptionClick($event)\"\r\n    (mouseenter)=\"onOptionMouseEnter($event)\"\r\n    role=\"option\"\r\n    caxRipple\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    [ngStyle]=\"{ height: itemSize + 'px' }\"\r\n    [ngClass]=\"{ 'cax-dropdown-item': true, 'cax-highlight': selected, 'cax-disabled': disabled, 'cax-focus': focused }\"\r\n>\r\n    <ng-container *ngIf=\"checkmark\">\r\n        <CheckIcon *ngIf=\"selected\" [styleClass]=\"'cax-dropdown-check-icon'\" />\r\n        <BlankIcon *ngIf=\"!selected\" [styleClass]=\"'cax-dropdown-blank-icon'\" />\r\n    </ng-container>\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: "ngmodule", type: CommonModule }, { 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: "component", type: BlankIcon, selector: "BlankIcon" }, { kind: "component", type: CheckIcon, selector: "CheckIcon" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: DropdownItem, decorators: [{
             type: Component,
             args: [{ selector: 'cax-dropdownItem', standalone: true, imports: [CommonModule, BlankIcon, CheckIcon], host: {
                         class: 'cax-element'
-                    }, template: "<li\n    [id]=\"id\"\n    (click)=\"onOptionClick($event)\"\n    (mouseenter)=\"onOptionMouseEnter($event)\"\n    role=\"option\"\n    caxRipple\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    [ngStyle]=\"{ height: itemSize + 'px' }\"\n    [ngClass]=\"{ 'cax-dropdown-item': true, 'cax-highlight': selected, 'cax-disabled': disabled, 'cax-focus': focused }\"\n>\n    <ng-container *ngIf=\"checkmark\">\n        <CheckIcon *ngIf=\"selected\" [styleClass]=\"'cax-dropdown-check-icon'\" />\n        <BlankIcon *ngIf=\"!selected\" [styleClass]=\"'cax-dropdown-blank-icon'\" />\n    </ng-container>\n    <span *ngIf=\"!template\">{{ label ?? 'empty' }}</span>\n    <ng-container *ngTemplateOutlet=\"template; context: { $implicit: option }\"></ng-container>\n</li>\n" }]
+                    }, template: "<li\r\n    [id]=\"id\"\r\n    (click)=\"onOptionClick($event)\"\r\n    (mouseenter)=\"onOptionMouseEnter($event)\"\r\n    role=\"option\"\r\n    caxRipple\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    [ngStyle]=\"{ height: itemSize + 'px' }\"\r\n    [ngClass]=\"{ 'cax-dropdown-item': true, 'cax-highlight': selected, 'cax-disabled': disabled, 'cax-focus': focused }\"\r\n>\r\n    <ng-container *ngIf=\"checkmark\">\r\n        <CheckIcon *ngIf=\"selected\" [styleClass]=\"'cax-dropdown-check-icon'\" />\r\n        <BlankIcon *ngIf=\"!selected\" [styleClass]=\"'cax-dropdown-blank-icon'\" />\r\n    </ng-container>\r\n    <span *ngIf=\"!template\">{{ label ?? 'empty' }}</span>\r\n    <ng-container *ngTemplateOutlet=\"template; context: { $implicit: option }\"></ng-container>\r\n</li>\r\n" }]
         }], propDecorators: { id: [{
                 type: Input
             }], option: [{
@@ -1455,7 +1455,7 @@ class Dropdown {
         this.resetFilter();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: Dropdown, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i1.FilterService }, { token: i1.caxConfig }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.2.9", type: Dropdown, isStandalone: true, selector: "cax-dropdown", inputs: { id: "id", scrollHeight: "scrollHeight", filter: ["filter", "filter", booleanAttribute], name: "name", style: "style", panelStyle: "panelStyle", styleClass: "styleClass", panelStyleClass: "panelStyleClass", readonly: ["readonly", "readonly", booleanAttribute], required: ["required", "required", booleanAttribute], editable: ["editable", "editable", booleanAttribute], appendTo: "appendTo", tabindex: ["tabindex", "tabindex", numberAttribute], placeholder: "placeholder", loadingIcon: "loadingIcon", filterPlaceholder: "filterPlaceholder", filterLocale: "filterLocale", variant: "variant", inputId: "inputId", dataKey: "dataKey", filterBy: "filterBy", filterFields: "filterFields", autofocus: ["autofocus", "autofocus", booleanAttribute], resetFilterOnHide: ["resetFilterOnHide", "resetFilterOnHide", booleanAttribute], checkmark: ["checkmark", "checkmark", booleanAttribute], dropdownIcon: "dropdownIcon", loading: ["loading", "loading", booleanAttribute], optionLabel: "optionLabel", optionValue: "optionValue", optionDisabled: "optionDisabled", optionGroupLabel: "optionGroupLabel", optionGroupChildren: "optionGroupChildren", autoDisplayFirst: ["autoDisplayFirst", "autoDisplayFirst", booleanAttribute], group: ["group", "group", booleanAttribute], showClear: ["showClear", "showClear", booleanAttribute], emptyFilterMessage: "emptyFilterMessage", emptyMessage: "emptyMessage", lazy: ["lazy", "lazy", booleanAttribute], virtualScroll: ["virtualScroll", "virtualScroll", booleanAttribute], virtualScrollItemSize: ["virtualScrollItemSize", "virtualScrollItemSize", numberAttribute], virtualScrollOptions: "virtualScrollOptions", overlayOptions: "overlayOptions", ariaFilterLabel: "ariaFilterLabel", ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy", filterMatchMode: "filterMatchMode", maxlength: ["maxlength", "maxlength", numberAttribute], tooltip: "tooltip", tooltipPosition: "tooltipPosition", tooltipPositionStyle: "tooltipPositionStyle", tooltipStyleClass: "tooltipStyleClass", focusOnHover: ["focusOnHover", "focusOnHover", booleanAttribute], selectOnFocus: ["selectOnFocus", "selectOnFocus", booleanAttribute], autoOptionFocus: ["autoOptionFocus", "autoOptionFocus", booleanAttribute], autofocusFilter: ["autofocusFilter", "autofocusFilter", booleanAttribute], autoShowPanelOnPrintableCharacterKeyDown: ["autoShowPanelOnPrintableCharacterKeyDown", "autoShowPanelOnPrintableCharacterKeyDown", booleanAttribute], labelText: "labelText", disabled: "disabled", itemSize: "itemSize", autoZIndex: "autoZIndex", baseZIndex: "baseZIndex", showTransitionOptions: "showTransitionOptions", hideTransitionOptions: "hideTransitionOptions", filterValue: "filterValue", options: "options" }, outputs: { onChange: "onChange", onFilter: "onFilter", onFocus: "onFocus", onBlur: "onBlur", onClick: "onClick", onShow: "onShow", onHide: "onHide", onClear: "onClear", onLazyLoad: "onLazyLoad" }, host: { properties: { "class.cax-inputwrapper-filled": "filled()", "class.cax-inputwrapper-focus": "focused || overlayVisible" }, classAttribute: "cax-element cax-inputwrapper" }, providers: [DROPDOWN_VALUE_ACCESSOR], queries: [{ propertyName: "templates", predicate: CaxTemplate }], viewQueries: [{ propertyName: "containerViewChild", first: true, predicate: ["container"], descendants: true }, { propertyName: "filterViewChild", first: true, predicate: ["filter"], descendants: true }, { propertyName: "focusInputViewChild", first: true, predicate: ["focusInput"], descendants: true }, { propertyName: "editableInputViewChild", first: true, predicate: ["editableInput"], descendants: true }, { propertyName: "itemsViewChild", first: true, predicate: ["items"], descendants: true }, { propertyName: "scroller", first: true, predicate: ["scroller"], descendants: true }, { propertyName: "overlayViewChild", first: true, predicate: ["overlay"], descendants: true }, { propertyName: "firstHiddenFocusableElementOnOverlay", first: true, predicate: ["firstHiddenFocusableEl"], descendants: true }, { propertyName: "lastHiddenFocusableElementOnOverlay", first: true, predicate: ["lastHiddenFocusableEl"], descendants: true }], ngImport: i0, template: "<div [ngClass]=\"{'cax-dropdown-main-label': labelText}\">\n    <label *ngIf=\"labelText\" [ngClass]=\"labelTextClass\">{{ labelText }}</label>\n</div>\n<div #container [attr.id]=\"id\" [ngClass]=\"containerClass\" (click)=\"onContainerClick($event)\" [ngStyle]=\"style\" [class]=\"styleClass\">\n    <span\n        #focusInput\n        [ngClass]=\"inputClass\"\n        *ngIf=\"!editable\"\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 || (label() === 'cax-emptylabel' ? undefined : label())\"\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        caxAutoFocus\n        [autofocus]=\"autofocus\"\n        [attr.aria-activedescendant]=\"focused ? focusedOptionId : undefined\"\n        (focus)=\"onInputFocus($event)\"\n        (blur)=\"onInputBlur($event)\"\n        (keydown)=\"onKeyDown($event)\"\n        [attr.aria-required]=\"required\"\n        [attr.required]=\"required\"\n    >\n        <ng-container *ngIf=\"!selectedItemTemplate; else defaultPlaceholder\">{{ label() === 'cax-emptylabel' ? '&nbsp;' : label() }}</ng-container>\n        <ng-container *ngIf=\"selectedItemTemplate && !isSelectedOptionEmpty()\" [ngTemplateOutlet]=\"selectedItemTemplate\" [ngTemplateOutletContext]=\"{ $implicit: selectedOption }\"></ng-container>\n        <ng-template #defaultPlaceholder>\n            <span *ngIf=\"isSelectedOptionEmpty()\">{{ label() === 'cax-emptylabel' ? '&nbsp;' : label() }}</span>\n        </ng-template>\n    </span>\n    <input\n        *ngIf=\"editable\"\n        #editableInput\n        type=\"text\"\n        [attr.id]=\"inputId\"\n        [attr.maxlength]=\"maxlength\"\n        [ngClass]=\"inputClass\"\n        [disabled]=\"disabled\"\n        aria-haspopup=\"listbox\"\n        [attr.placeholder]=\"modelValue() === undefined || modelValue() === null ? placeholder() : undefined\"\n        [attr.aria-label]=\"ariaLabel || (label() === 'cax-emptylabel' ? undefined : label())\"\n        (input)=\"onEditableInput($event)\"\n        (keydown)=\"onKeyDown($event)\"\n        caxAutoFocus\n        [autofocus]=\"autofocus\"\n        [attr.aria-activedescendant]=\"focused ? focusedOptionId : undefined\"\n        (focus)=\"onInputFocus($event)\"\n        (blur)=\"onInputBlur($event)\"\n    />\n    <ng-container *ngIf=\"isVisibleClearIcon\">\n        <TimesIcon [styleClass]=\"'cax-dropdown-clear-icon'\" (click)=\"clear($event)\" *ngIf=\"!clearIconTemplate\" [attr.data-pc-section]=\"'clearicon'\" />\n        <span class=\"cax-dropdown-clear-icon\" (click)=\"clear($event)\" *ngIf=\"clearIconTemplate\" [attr.data-pc-section]=\"'clearicon'\">\n            <ng-template *ngTemplateOutlet=\"clearIconTemplate\"></ng-template>\n        </span>\n    </ng-container>\n\n    <div class=\"cax-dropdown-trigger\" role=\"button\" aria-label=\"dropdown trigger\" (mousedown)=\"onMouseDown($event)\" aria-haspopup=\"listbox\" [attr.aria-expanded]=\"overlayVisible ?? false\" [attr.data-pc-section]=\"'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-dropdown-trigger-icon pi-spin ' + loadingIcon\" aria-hidden=\"true\"></span>\n                <span *ngIf=\"!loadingIcon\" [class]=\"'cax-dropdown-trigger-icon pi pi-spinner pi-spin'\" aria-hidden=\"true\"></span>\n            </ng-container>\n        </ng-container>\n\n        <ng-template #elseBlock>\n            <ng-container *ngIf=\"!dropdownIconTemplate\">\n                <span class=\"cax-dropdown-trigger-icon\" *ngIf=\"dropdownIcon\" [ngClass]=\"dropdownIcon\"></span>\n                <!-- <ChevronDownIcon *ngIf=\"!dropdownIcon\" [styleClass]=\"'cax-dropdown-trigger-icon'\" /> -->\n                <i *ngIf=\"!dropdownIcon\" class=\"cax cax-alt-arrow-down\"></i>\n            </ng-container>\n            <span *ngIf=\"dropdownIconTemplate\" class=\"cax-dropdown-trigger-icon\">\n                <ng-template *ngTemplateOutlet=\"dropdownIconTemplate\"></ng-template>\n            </span>\n        </ng-template>\n    </div>\n\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 [ngClass]=\"'cax-dropdown-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                <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\n                <div class=\"cax-dropdown-header\" *ngIf=\"filter\" (click)=\"$event.stopPropagation()\">\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-dropdown-filter-container\">\n                            <input\n                                #filter\n                                type=\"text\"\n                                role=\"searchbox\"\n                                autocomplete=\"off\"\n                                [attr.placeholder]=\"filterPlaceholder || 'Search...'\"\n                                [value]=\"_filterValue() || ''\"\n                                class=\"cax-dropdown-filter cax-inputtext cax-component\"\n                                [ngClass]=\"{ 'cax-variant-filled': variant === 'filled' || config.inputStyle() === 'filled' }\"\n                                [attr.placeholder]=\"filterPlaceholder\"\n                                [attr.aria-owns]=\"id + '_list'\"\n                                (input)=\"onFilterInputChange($event)\"\n                                [attr.aria-label]=\"ariaFilterLabel\"\n                                [attr.aria-activedescendant]=\"focusedOptionId\"\n                                (keydown)=\"onFilterKeyDown($event)\"\n                                (blur)=\"onFilterBlur($event)\"\n                            />\n                            <SearchIcon *ngIf=\"!filterIconTemplate\" [styleClass]=\"'cax-dropdown-filter-icon'\" />\n                            <span *ngIf=\"filterIconTemplate\" class=\"cax-dropdown-filter-icon\">\n                                <ng-template *ngTemplateOutlet=\"filterIconTemplate\"></ng-template>\n                            </span>\n                            <i *ngIf=\"_filterValue()\" class=\"cax cax-close-circle cax-dropdown-filter-clear-icon\" (click)=\"resetFilter()\"></i>\n                        </div>\n                    </ng-template>\n                </div>\n                <div\n                    class=\"cax-dropdown-items-wrapper\"\n                    [ngStyle]=\"{\n                        'max-height': virtualScroll ? 'auto' : scrollHeight || 'auto'\n                    }\"\n                    tabindex=\"0\"\n                >\n                    <cax-scroller\n                        *ngIf=\"virtualScroll\"\n                        #scroller\n                        [items]=\"visibleOptions()\"\n                        [style]=\"{ height: scrollHeight }\"\n                        [itemSize]=\"virtualScrollItemSize || _itemSize\"\n                        [autoSize]=\"true\"\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 [attr.id]=\"id + '_list'\" [attr.aria-label]=\"listLabel\" class=\"cax-dropdown-items\" [ngClass]=\"scrollerOptions.contentStyleClass\" [ngStyle]=\"scrollerOptions.contentStyle\" role=\"listbox\">\n                            <ng-template ngFor let-option [ngForOf]=\"items\" let-i=\"index\">\n                                <ng-container *ngIf=\"isOptionGroup(option)\">\n                                    <li class=\"cax-dropdown-item-group\" [attr.id]=\"id + '_' + getOptionIndex(i, scrollerOptions)\" [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-dropdownItem\n                                        [id]=\"id + '_' + getOptionIndex(i, scrollerOptions)\"\n                                        [option]=\"option\"\n                                        [checkmark]=\"checkmark\"\n                                        [selected]=\"isSelected(option)\"\n                                        [label]=\"getOptionLabel(option)\"\n                                        [disabled]=\"isOptionDisabled(option)\"\n                                        [template]=\"itemTemplate\"\n                                        [focused]=\"focusedOptionIndex() === getOptionIndex(i, scrollerOptions)\"\n                                        [ariaPosInset]=\"getAriaPosInset(getOptionIndex(i, scrollerOptions))\"\n                                        [ariaSetSize]=\"ariaSetSize\"\n                                        (onClick)=\"onOptionSelect($event, option)\"\n                                        (onMouseEnter)=\"onOptionMouseEnter($event, getOptionIndex(i, scrollerOptions))\"\n                                    ></cax-dropdownItem>\n                                </ng-container>\n                            </ng-template>\n                            <li *ngIf=\"filterValue && isEmpty()\" class=\"cax-dropdown-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=\"!filterValue && isEmpty()\" class=\"cax-dropdown-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                <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\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", styles: ["@layer cax{.cax-dropdown{display:inline-flex;cursor:pointer;position:relative;-webkit-user-select:none;user-select:none;width:100%;height:40px}.cax-dropdown-clear-icon{position:absolute;top:50%;margin-top:-.5rem}.cax-dropdown-main-label{font-weight:500;font-size:14px;line-height:20px;margin-bottom:8px}.cax-dropdown-trigger{display:flex;align-items:center;justify-content:center;flex-shrink:0}.cax-dropdown-trigger-icon{transition:transform .3s ease}.cax-dropdown-open .cax-dropdown-trigger-icon{transform:rotate(180deg)}.cax-dropdown-label{display:block;white-space:nowrap;overflow:hidden;flex:1 1 auto;width:1%;text-overflow:ellipsis;cursor:pointer}.cax-dropdown-label-empty{overflow:hidden;opacity:0}input.cax-dropdown-label{cursor:default}.cax-dropdown-items-wrapper{overflow:auto}.cax-dropdown-item{cursor:pointer;font-weight:400;white-space:nowrap;position:relative;overflow:hidden;font-weight:500}.cax-dropdown-item-group{cursor:auto}.cax-dropdown-items{margin:0;padding:0;list-style-type:none}.cax-fluid .cax-dropdown{display:flex}.cax-fluid .cax-dropdown .cax-dropdown-label{width:1%}.cax-float-label .cax-dropdown .cax-placeholder{opacity:0}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: "ngmodule", type: OverlayModule }, { kind: "component", type: i3.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: "ngmodule", type: SharedModule }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i4.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: "ngmodule", type: RippleModule }, { kind: "ngmodule", type: ScrollerModule }, { kind: "component", type: i5.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: "ngmodule", type: AutoFocusModule }, { kind: "directive", type: i6.AutoFocus, selector: "[caxAutoFocus]", inputs: ["autofocus"] }, { kind: "component", type: TimesIcon, selector: "TimesIcon" }, { kind: "component", type: SearchIcon, selector: "SearchIcon" }, { kind: "component", type: DropdownItem, selector: "cax-dropdownItem", inputs: ["id", "option", "selected", "focused", "label", "disabled", "visible", "itemSize", "ariaPosInset", "ariaSetSize", "template", "checkmark"], outputs: ["onClick", "onMouseEnter"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.2.9", type: Dropdown, isStandalone: true, selector: "cax-dropdown", inputs: { id: "id", scrollHeight: "scrollHeight", filter: ["filter", "filter", booleanAttribute], name: "name", style: "style", panelStyle: "panelStyle", styleClass: "styleClass", panelStyleClass: "panelStyleClass", readonly: ["readonly", "readonly", booleanAttribute], required: ["required", "required", booleanAttribute], editable: ["editable", "editable", booleanAttribute], appendTo: "appendTo", tabindex: ["tabindex", "tabindex", numberAttribute], placeholder: "placeholder", loadingIcon: "loadingIcon", filterPlaceholder: "filterPlaceholder", filterLocale: "filterLocale", variant: "variant", inputId: "inputId", dataKey: "dataKey", filterBy: "filterBy", filterFields: "filterFields", autofocus: ["autofocus", "autofocus", booleanAttribute], resetFilterOnHide: ["resetFilterOnHide", "resetFilterOnHide", booleanAttribute], checkmark: ["checkmark", "checkmark", booleanAttribute], dropdownIcon: "dropdownIcon", loading: ["loading", "loading", booleanAttribute], optionLabel: "optionLabel", optionValue: "optionValue", optionDisabled: "optionDisabled", optionGroupLabel: "optionGroupLabel", optionGroupChildren: "optionGroupChildren", autoDisplayFirst: ["autoDisplayFirst", "autoDisplayFirst", booleanAttribute], group: ["group", "group", booleanAttribute], showClear: ["showClear", "showClear", booleanAttribute], emptyFilterMessage: "emptyFilterMessage", emptyMessage: "emptyMessage", lazy: ["lazy", "lazy", booleanAttribute], virtualScroll: ["virtualScroll", "virtualScroll", booleanAttribute], virtualScrollItemSize: ["virtualScrollItemSize", "virtualScrollItemSize", numberAttribute], virtualScrollOptions: "virtualScrollOptions", overlayOptions: "overlayOptions", ariaFilterLabel: "ariaFilterLabel", ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy", filterMatchMode: "filterMatchMode", maxlength: ["maxlength", "maxlength", numberAttribute], tooltip: "tooltip", tooltipPosition: "tooltipPosition", tooltipPositionStyle: "tooltipPositionStyle", tooltipStyleClass: "tooltipStyleClass", focusOnHover: ["focusOnHover", "focusOnHover", booleanAttribute], selectOnFocus: ["selectOnFocus", "selectOnFocus", booleanAttribute], autoOptionFocus: ["autoOptionFocus", "autoOptionFocus", booleanAttribute], autofocusFilter: ["autofocusFilter", "autofocusFilter", booleanAttribute], autoShowPanelOnPrintableCharacterKeyDown: ["autoShowPanelOnPrintableCharacterKeyDown", "autoShowPanelOnPrintableCharacterKeyDown", booleanAttribute], labelText: "labelText", disabled: "disabled", itemSize: "itemSize", autoZIndex: "autoZIndex", baseZIndex: "baseZIndex", showTransitionOptions: "showTransitionOptions", hideTransitionOptions: "hideTransitionOptions", filterValue: "filterValue", options: "options" }, outputs: { onChange: "onChange", onFilter: "onFilter", onFocus: "onFocus", onBlur: "onBlur", onClick: "onClick", onShow: "onShow", onHide: "onHide", onClear: "onClear", onLazyLoad: "onLazyLoad" }, host: { properties: { "class.cax-inputwrapper-filled": "filled()", "class.cax-inputwrapper-focus": "focused || overlayVisible" }, classAttribute: "cax-element cax-inputwrapper" }, providers: [DROPDOWN_VALUE_ACCESSOR], queries: [{ propertyName: "templates", predicate: CaxTemplate }], viewQueries: [{ propertyName: "containerViewChild", first: true, predicate: ["container"], descendants: true }, { propertyName: "filterViewChild", first: true, predicate: ["filter"], descendants: true }, { propertyName: "focusInputViewChild", first: true, predicate: ["focusInput"], descendants: true }, { propertyName: "editableInputViewChild", first: true, predicate: ["editableInput"], descendants: true }, { propertyName: "itemsViewChild", first: true, predicate: ["items"], descendants: true }, { propertyName: "scroller", first: true, predicate: ["scroller"], descendants: true }, { propertyName: "overlayViewChild", first: true, predicate: ["overlay"], descendants: true }, { propertyName: "firstHiddenFocusableElementOnOverlay", first: true, predicate: ["firstHiddenFocusableEl"], descendants: true }, { propertyName: "lastHiddenFocusableElementOnOverlay", first: true, predicate: ["lastHiddenFocusableEl"], descendants: true }], ngImport: i0, template: "<div [ngClass]=\"{'cax-dropdown-main-label': labelText}\">\r\n    <label *ngIf=\"labelText\" [ngClass]=\"labelTextClass\">{{ labelText }}</label>\r\n</div>\r\n<div #container [attr.id]=\"id\" [ngClass]=\"containerClass\" (click)=\"onContainerClick($event)\" [ngStyle]=\"style\" [class]=\"styleClass\">\r\n    <span\r\n        #focusInput\r\n        [ngClass]=\"inputClass\"\r\n        *ngIf=\"!editable\"\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 || (label() === 'cax-emptylabel' ? undefined : label())\"\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        caxAutoFocus\r\n        [autofocus]=\"autofocus\"\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        [attr.aria-required]=\"required\"\r\n        [attr.required]=\"required\"\r\n    >\r\n        <ng-container *ngIf=\"!selectedItemTemplate; else defaultPlaceholder\">{{ label() === 'cax-emptylabel' ? '&nbsp;' : label() }}</ng-container>\r\n        <ng-container *ngIf=\"selectedItemTemplate && !isSelectedOptionEmpty()\" [ngTemplateOutlet]=\"selectedItemTemplate\" [ngTemplateOutletContext]=\"{ $implicit: selectedOption }\"></ng-container>\r\n        <ng-template #defaultPlaceholder>\r\n            <span *ngIf=\"isSelectedOptionEmpty()\">{{ label() === 'cax-emptylabel' ? '&nbsp;' : label() }}</span>\r\n        </ng-template>\r\n    </span>\r\n    <input\r\n        *ngIf=\"editable\"\r\n        #editableInput\r\n        type=\"text\"\r\n        [attr.id]=\"inputId\"\r\n        [attr.maxlength]=\"maxlength\"\r\n        [ngClass]=\"inputClass\"\r\n        [disabled]=\"disabled\"\r\n        aria-haspopup=\"listbox\"\r\n        [attr.placeholder]=\"modelValue() === undefined || modelValue() === null ? placeholder() : undefined\"\r\n        [attr.aria-label]=\"ariaLabel || (label() === 'cax-emptylabel' ? undefined : label())\"\r\n        (input)=\"onEditableInput($event)\"\r\n        (keydown)=\"onKeyDown($event)\"\r\n        caxAutoFocus\r\n        [autofocus]=\"autofocus\"\r\n        [attr.aria-activedescendant]=\"focused ? focusedOptionId : undefined\"\r\n        (focus)=\"onInputFocus($event)\"\r\n        (blur)=\"onInputBlur($event)\"\r\n    />\r\n    <ng-container *ngIf=\"isVisibleClearIcon\">\r\n        <TimesIcon [styleClass]=\"'cax-dropdown-clear-icon'\" (click)=\"clear($event)\" *ngIf=\"!clearIconTemplate\" [attr.data-pc-section]=\"'clearicon'\" />\r\n        <span class=\"cax-dropdown-clear-icon\" (click)=\"clear($event)\" *ngIf=\"clearIconTemplate\" [attr.data-pc-section]=\"'clearicon'\">\r\n            <ng-template *ngTemplateOutlet=\"clearIconTemplate\"></ng-template>\r\n        </span>\r\n    </ng-container>\r\n\r\n    <div class=\"cax-dropdown-trigger\" role=\"button\" aria-label=\"dropdown trigger\" (mousedown)=\"onMouseDown($event)\" aria-haspopup=\"listbox\" [attr.aria-expanded]=\"overlayVisible ?? false\" [attr.data-pc-section]=\"'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-dropdown-trigger-icon pi-spin ' + loadingIcon\" aria-hidden=\"true\"></span>\r\n                <span *ngIf=\"!loadingIcon\" [class]=\"'cax-dropdown-trigger-icon pi pi-spinner pi-spin'\" aria-hidden=\"true\"></span>\r\n            </ng-container>\r\n        </ng-container>\r\n\r\n        <ng-template #elseBlock>\r\n            <ng-container *ngIf=\"!dropdownIconTemplate\">\r\n                <span class=\"cax-dropdown-trigger-icon\" *ngIf=\"dropdownIcon\" [ngClass]=\"dropdownIcon\"></span>\r\n                <!-- <ChevronDownIcon *ngIf=\"!dropdownIcon\" [styleClass]=\"'cax-dropdown-trigger-icon'\" /> -->\r\n                <i *ngIf=\"!dropdownIcon && !overlayVisible\" class=\"cax cax-alt-arrow-down\"></i>\r\n                <i *ngIf=\"!dropdownIcon && overlayVisible\" class=\"cax cax-alt-arrow-up\"></i>\r\n            </ng-container>\r\n            <span *ngIf=\"dropdownIconTemplate\" class=\"cax-dropdown-trigger-icon\">\r\n                <ng-template *ngTemplateOutlet=\"dropdownIconTemplate\"></ng-template>\r\n            </span>\r\n        </ng-template>\r\n    </div>\r\n\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 [ngClass]=\"'cax-dropdown-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                <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\r\n                <div class=\"cax-dropdown-header\" *ngIf=\"filter\" (click)=\"$event.stopPropagation()\">\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-dropdown-filter-container\">\r\n                            <input\r\n                                #filter\r\n                                type=\"text\"\r\n                                role=\"searchbox\"\r\n                                autocomplete=\"off\"\r\n                                [attr.placeholder]=\"filterPlaceholder || 'Search...'\"\r\n                                [value]=\"_filterValue() || ''\"\r\n                                class=\"cax-dropdown-filter cax-inputtext cax-component\"\r\n                                [ngClass]=\"{ 'cax-variant-filled': variant === 'filled' || config.inputStyle() === 'filled' }\"\r\n                                [attr.placeholder]=\"filterPlaceholder\"\r\n                                [attr.aria-owns]=\"id + '_list'\"\r\n                                (input)=\"onFilterInputChange($event)\"\r\n                                [attr.aria-label]=\"ariaFilterLabel\"\r\n                                [attr.aria-activedescendant]=\"focusedOptionId\"\r\n                                (keydown)=\"onFilterKeyDown($event)\"\r\n                                (blur)=\"onFilterBlur($event)\"\r\n                            />\r\n                            <SearchIcon *ngIf=\"!filterIconTemplate\" [styleClass]=\"'cax-dropdown-filter-icon'\" />\r\n                            <span *ngIf=\"filterIconTemplate\" class=\"cax-dropdown-filter-icon\">\r\n                                <ng-template *ngTemplateOutlet=\"filterIconTemplate\"></ng-template>\r\n                            </span>\r\n                            <i *ngIf=\"_filterValue()\" class=\"cax cax-close-circle cax-dropdown-filter-clear-icon\" (click)=\"resetFilter()\"></i>\r\n                        </div>\r\n                    </ng-template>\r\n                </div>\r\n                <div\r\n                    class=\"cax-dropdown-items-wrapper\"\r\n                    [ngStyle]=\"{\r\n                        'max-height': virtualScroll ? 'auto' : scrollHeight || 'auto'\r\n                    }\"\r\n                    tabindex=\"0\"\r\n                >\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                        [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 [attr.id]=\"id + '_list'\" [attr.aria-label]=\"listLabel\" class=\"cax-dropdown-items\" [ngClass]=\"scrollerOptions.contentStyleClass\" [ngStyle]=\"scrollerOptions.contentStyle\" role=\"listbox\">\r\n                            <ng-template ngFor let-option [ngForOf]=\"items\" let-i=\"index\">\r\n                                <ng-container *ngIf=\"isOptionGroup(option)\">\r\n                                    <li class=\"cax-dropdown-item-group\" [attr.id]=\"id + '_' + getOptionIndex(i, scrollerOptions)\" [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-dropdownItem\r\n                                        [id]=\"id + '_' + getOptionIndex(i, scrollerOptions)\"\r\n                                        [option]=\"option\"\r\n                                        [checkmark]=\"checkmark\"\r\n                                        [selected]=\"isSelected(option)\"\r\n                                        [label]=\"getOptionLabel(option)\"\r\n                                        [disabled]=\"isOptionDisabled(option)\"\r\n                                        [template]=\"itemTemplate\"\r\n                                        [focused]=\"focusedOptionIndex() === getOptionIndex(i, scrollerOptions)\"\r\n                                        [ariaPosInset]=\"getAriaPosInset(getOptionIndex(i, scrollerOptions))\"\r\n                                        [ariaSetSize]=\"ariaSetSize\"\r\n                                        (onClick)=\"onOptionSelect($event, option)\"\r\n                                        (onMouseEnter)=\"onOptionMouseEnter($event, getOptionIndex(i, scrollerOptions))\"\r\n                                    ></cax-dropdownItem>\r\n                                </ng-container>\r\n                            </ng-template>\r\n                            <li *ngIf=\"filterValue && isEmpty()\" class=\"cax-dropdown-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=\"!filterValue && isEmpty()\" class=\"cax-dropdown-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                <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\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", styles: ["@layer cax{.cax-dropdown{display:inline-flex;cursor:pointer;position:relative;-webkit-user-select:none;user-select:none;width:100%;height:40px}.cax-dropdown-clear-icon{position:absolute;top:50%;margin-top:-.5rem}.cax-dropdown-main-label{font-weight:500;font-size:14px;line-height:20px;margin-bottom:8px}.cax-dropdown-trigger{display:flex;align-items:center;justify-content:center;flex-shrink:0}.cax-dropdown-trigger-icon{transition:transform .3s ease}.cax-dropdown-open .cax-dropdown-trigger-icon{transform:rotate(180deg)}.cax-dropdown-label{display:block;white-space:nowrap;overflow:hidden;flex:1 1 auto;width:1%;text-overflow:ellipsis;cursor:pointer}.cax-dropdown-label-empty{overflow:hidden;opacity:0}input.cax-dropdown-label{cursor:default}.cax-dropdown-items-wrapper{overflow:auto}.cax-dropdown-item{cursor:pointer;font-weight:400;white-space:nowrap;position:relative;overflow:hidden;font-weight:500}.cax-dropdown-item-group{cursor:auto}.cax-dropdown-items{margin:0;padding:0;list-style-type:none}.cax-fluid .cax-dropdown{display:flex}.cax-fluid .cax-dropdown .cax-dropdown-label{width:1%}.cax-float-label .cax-dropdown .cax-placeholder{opacity:0}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: "ngmodule", type: OverlayModule }, { kind: "component", type: i3.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: "ngmodule", type: SharedModule }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i4.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: "ngmodule", type: RippleModule }, { kind: "ngmodule", type: ScrollerModule }, { kind: "component", type: i5.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: "ngmodule", type: AutoFocusModule }, { kind: "directive", type: i6.AutoFocus, selector: "[caxAutoFocus]", inputs: ["autofocus"] }, { kind: "component", type: TimesIcon, selector: "TimesIcon" }, { kind: "component", type: SearchIcon, selector: "SearchIcon" }, { kind: "component", type: DropdownItem, selector: "cax-dropdownItem", inputs: ["id", "option", "selected", "focused", "label", "disabled", "visible", "itemSize", "ariaPosInset", "ariaSetSize", "template", "checkmark"], outputs: ["onClick", "onMouseEnter"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: Dropdown, decorators: [{
             type: Component,
@@ -1463,7 +1463,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
                         class: 'cax-element cax-inputwrapper',
                         '[class.cax-inputwrapper-filled]': 'filled()',
                         '[class.cax-inputwrapper-focus]': 'focused || overlayVisible'
-                    }, providers: [DROPDOWN_VALUE_ACCESSOR], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div [ngClass]=\"{'cax-dropdown-main-label': labelText}\">\n    <label *ngIf=\"labelText\" [ngClass]=\"labelTextClass\">{{ labelText }}</label>\n</div>\n<div #container [attr.id]=\"id\" [ngClass]=\"containerClass\" (click)=\"onContainerClick($event)\" [ngStyle]=\"style\" [class]=\"styleClass\">\n    <span\n        #focusInput\n        [ngClass]=\"inputClass\"\n        *ngIf=\"!editable\"\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 || (label() === 'cax-emptylabel' ? undefined : label())\"\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        caxAutoFocus\n        [autofocus]=\"autofocus\"\n        [attr.aria-activedescendant]=\"focused ? focusedOptionId : undefined\"\n        (focus)=\"onInputFocus($event)\"\n        (blur)=\"onInputBlur($event)\"\n        (keydown)=\"onKeyDown($event)\"\n        [attr.aria-required]=\"required\"\n        [attr.required]=\"required\"\n    >\n        <ng-container *ngIf=\"!selectedItemTemplate; else defaultPlaceholder\">{{ label() === 'cax-emptylabel' ? '&nbsp;' : label() }}</ng-container>\n        <ng-container *ngIf=\"selectedItemTemplate && !isSelectedOptionEmpty()\" [ngTemplateOutlet]=\"selectedItemTemplate\" [ngTemplateOutletContext]=\"{ $implicit: selectedOption }\"></ng-container>\n        <ng-template #defaultPlaceholder>\n            <span *ngIf=\"isSelectedOptionEmpty()\">{{ label() === 'cax-emptylabel' ? '&nbsp;' : label() }}</span>\n        </ng-template>\n    </span>\n    <input\n        *ngIf=\"editable\"\n        #editableInput\n        type=\"text\"\n        [attr.id]=\"inputId\"\n        [attr.maxlength]=\"maxlength\"\n        [ngClass]=\"inputClass\"\n        [disabled]=\"disabled\"\n        aria-haspopup=\"listbox\"\n        [attr.placeholder]=\"modelValue() === undefined || modelValue() === null ? placeholder() : undefined\"\n        [attr.aria-label]=\"ariaLabel || (label() === 'cax-emptylabel' ? undefined : label())\"\n        (input)=\"onEditableInput($event)\"\n        (keydown)=\"onKeyDown($event)\"\n        caxAutoFocus\n        [autofocus]=\"autofocus\"\n        [attr.aria-activedescendant]=\"focused ? focusedOptionId : undefined\"\n        (focus)=\"onInputFocus($event)\"\n        (blur)=\"onInputBlur($event)\"\n    />\n    <ng-container *ngIf=\"isVisibleClearIcon\">\n        <TimesIcon [styleClass]=\"'cax-dropdown-clear-icon'\" (click)=\"clear($event)\" *ngIf=\"!clearIconTemplate\" [attr.data-pc-section]=\"'clearicon'\" />\n        <span class=\"cax-dropdown-clear-icon\" (click)=\"clear($event)\" *ngIf=\"clearIconTemplate\" [attr.data-pc-section]=\"'clearicon'\">\n            <ng-template *ngTemplateOutlet=\"clearIconTemplate\"></ng-template>\n        </span>\n    </ng-container>\n\n    <div class=\"cax-dropdown-trigger\" role=\"button\" aria-label=\"dropdown trigger\" (mousedown)=\"onMouseDown($event)\" aria-haspopup=\"listbox\" [attr.aria-expanded]=\"overlayVisible ?? false\" [attr.data-pc-section]=\"'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-dropdown-trigger-icon pi-spin ' + loadingIcon\" aria-hidden=\"true\"></span>\n                <span *ngIf=\"!loadingIcon\" [class]=\"'cax-dropdown-trigger-icon pi pi-spinner pi-spin'\" aria-hidden=\"true\"></span>\n            </ng-container>\n        </ng-container>\n\n        <ng-template #elseBlock>\n            <ng-container *ngIf=\"!dropdownIconTemplate\">\n                <span class=\"cax-dropdown-trigger-icon\" *ngIf=\"dropdownIcon\" [ngClass]=\"dropdownIcon\"></span>\n                <!-- <ChevronDownIcon *ngIf=\"!dropdownIcon\" [styleClass]=\"'cax-dropdown-trigger-icon'\" /> -->\n                <i *ngIf=\"!dropdownIcon\" class=\"cax cax-alt-arrow-down\"></i>\n            </ng-container>\n            <span *ngIf=\"dropdownIconTemplate\" class=\"cax-dropdown-trigger-icon\">\n                <ng-template *ngTemplateOutlet=\"dropdownIconTemplate\"></ng-template>\n            </span>\n        </ng-template>\n    </div>\n\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 [ngClass]=\"'cax-dropdown-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                <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\n                <div class=\"cax-dropdown-header\" *ngIf=\"filter\" (click)=\"$event.stopPropagation()\">\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-dropdown-filter-container\">\n                            <input\n                                #filter\n                                type=\"text\"\n                                role=\"searchbox\"\n                                autocomplete=\"off\"\n                                [attr.placeholder]=\"filterPlaceholder || 'Search...'\"\n                                [value]=\"_filterValue() || ''\"\n                                class=\"cax-dropdown-filter cax-inputtext cax-component\"\n                                [ngClass]=\"{ 'cax-variant-filled': variant === 'filled' || config.inputStyle() === 'filled' }\"\n                                [attr.placeholder]=\"filterPlaceholder\"\n                                [attr.aria-owns]=\"id + '_list'\"\n                                (input)=\"onFilterInputChange($event)\"\n                                [attr.aria-label]=\"ariaFilterLabel\"\n                                [attr.aria-activedescendant]=\"focusedOptionId\"\n                                (keydown)=\"onFilterKeyDown($event)\"\n                                (blur)=\"onFilterBlur($event)\"\n                            />\n                            <SearchIcon *ngIf=\"!filterIconTemplate\" [styleClass]=\"'cax-dropdown-filter-icon'\" />\n                            <span *ngIf=\"filterIconTemplate\" class=\"cax-dropdown-filter-icon\">\n                                <ng-template *ngTemplateOutlet=\"filterIconTemplate\"></ng-template>\n                            </span>\n                            <i *ngIf=\"_filterValue()\" class=\"cax cax-close-circle cax-dropdown-filter-clear-icon\" (click)=\"resetFilter()\"></i>\n                        </div>\n                    </ng-template>\n                </div>\n                <div\n                    class=\"cax-dropdown-items-wrapper\"\n                    [ngStyle]=\"{\n                        'max-height': virtualScroll ? 'auto' : scrollHeight || 'auto'\n                    }\"\n                    tabindex=\"0\"\n                >\n                    <cax-scroller\n                        *ngIf=\"virtualScroll\"\n                        #scroller\n                        [items]=\"visibleOptions()\"\n                        [style]=\"{ height: scrollHeight }\"\n                        [itemSize]=\"virtualScrollItemSize || _itemSize\"\n                        [autoSize]=\"true\"\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 [attr.id]=\"id + '_list'\" [attr.aria-label]=\"listLabel\" class=\"cax-dropdown-items\" [ngClass]=\"scrollerOptions.contentStyleClass\" [ngStyle]=\"scrollerOptions.contentStyle\" role=\"listbox\">\n                            <ng-template ngFor let-option [ngForOf]=\"items\" let-i=\"index\">\n                                <ng-container *ngIf=\"isOptionGroup(option)\">\n                                    <li class=\"cax-dropdown-item-group\" [attr.id]=\"id + '_' + getOptionIndex(i, scrollerOptions)\" [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-dropdownItem\n                                        [id]=\"id + '_' + getOptionIndex(i, scrollerOptions)\"\n                                        [option]=\"option\"\n                                        [checkmark]=\"checkmark\"\n                                        [selected]=\"isSelected(option)\"\n                                        [label]=\"getOptionLabel(option)\"\n                                        [disabled]=\"isOptionDisabled(option)\"\n                                        [template]=\"itemTemplate\"\n                                        [focused]=\"focusedOptionIndex() === getOptionIndex(i, scrollerOptions)\"\n                                        [ariaPosInset]=\"getAriaPosInset(getOptionIndex(i, scrollerOptions))\"\n                                        [ariaSetSize]=\"ariaSetSize\"\n                                        (onClick)=\"onOptionSelect($event, option)\"\n                                        (onMouseEnter)=\"onOptionMouseEnter($event, getOptionIndex(i, scrollerOptions))\"\n                                    ></cax-dropdownItem>\n                                </ng-container>\n                            </ng-template>\n                            <li *ngIf=\"filterValue && isEmpty()\" class=\"cax-dropdown-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=\"!filterValue && isEmpty()\" class=\"cax-dropdown-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                <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\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", styles: ["@layer cax{.cax-dropdown{display:inline-flex;cursor:pointer;position:relative;-webkit-user-select:none;user-select:none;width:100%;height:40px}.cax-dropdown-clear-icon{position:absolute;top:50%;margin-top:-.5rem}.cax-dropdown-main-label{font-weight:500;font-size:14px;line-height:20px;margin-bottom:8px}.cax-dropdown-trigger{display:flex;align-items:center;justify-content:center;flex-shrink:0}.cax-dropdown-trigger-icon{transition:transform .3s ease}.cax-dropdown-open .cax-dropdown-trigger-icon{transform:rotate(180deg)}.cax-dropdown-label{display:block;white-space:nowrap;overflow:hidden;flex:1 1 auto;width:1%;text-overflow:ellipsis;cursor:pointer}.cax-dropdown-label-empty{overflow:hidden;opacity:0}input.cax-dropdown-label{cursor:default}.cax-dropdown-items-wrapper{overflow:auto}.cax-dropdown-item{cursor:pointer;font-weight:400;white-space:nowrap;position:relative;overflow:hidden;font-weight:500}.cax-dropdown-item-group{cursor:auto}.cax-dropdown-items{margin:0;padding:0;list-style-type:none}.cax-fluid .cax-dropdown{display:flex}.cax-fluid .cax-dropdown .cax-dropdown-label{width:1%}.cax-float-label .cax-dropdown .cax-placeholder{opacity:0}}\n"] }]
+                    }, providers: [DROPDOWN_VALUE_ACCESSOR], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div [ngClass]=\"{'cax-dropdown-main-label': labelText}\">\r\n    <label *ngIf=\"labelText\" [ngClass]=\"labelTextClass\">{{ labelText }}</label>\r\n</div>\r\n<div #container [attr.id]=\"id\" [ngClass]=\"containerClass\" (click)=\"onContainerClick($event)\" [ngStyle]=\"style\" [class]=\"styleClass\">\r\n    <span\r\n        #focusInput\r\n        [ngClass]=\"inputClass\"\r\n        *ngIf=\"!editable\"\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 || (label() === 'cax-emptylabel' ? undefined : label())\"\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        caxAutoFocus\r\n        [autofocus]=\"autofocus\"\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        [attr.aria-required]=\"required\"\r\n        [attr.required]=\"required\"\r\n    >\r\n        <ng-container *ngIf=\"!selectedItemTemplate; else defaultPlaceholder\">{{ label() === 'cax-emptylabel' ? '&nbsp;' : label() }}</ng-container>\r\n        <ng-container *ngIf=\"selectedItemTemplate && !isSelectedOptionEmpty()\" [ngTemplateOutlet]=\"selectedItemTemplate\" [ngTemplateOutletContext]=\"{ $implicit: selectedOption }\"></ng-container>\r\n        <ng-template #defaultPlaceholder>\r\n            <span *ngIf=\"isSelectedOptionEmpty()\">{{ label() === 'cax-emptylabel' ? '&nbsp;' : label() }}</span>\r\n        </ng-template>\r\n    </span>\r\n    <input\r\n        *ngIf=\"editable\"\r\n        #editableInput\r\n        type=\"text\"\r\n        [attr.id]=\"inputId\"\r\n        [attr.maxlength]=\"maxlength\"\r\n        [ngClass]=\"inputClass\"\r\n        [disabled]=\"disabled\"\r\n        aria-haspopup=\"listbox\"\r\n        [attr.placeholder]=\"modelValue() === undefined || modelValue() === null ? placeholder() : undefined\"\r\n        [attr.aria-label]=\"ariaLabel || (label() === 'cax-emptylabel' ? undefined : label())\"\r\n        (input)=\"onEditableInput($event)\"\r\n        (keydown)=\"onKeyDown($event)\"\r\n        caxAutoFocus\r\n        [autofocus]=\"autofocus\"\r\n        [attr.aria-activedescendant]=\"focused ? focusedOptionId : undefined\"\r\n        (focus)=\"onInputFocus($event)\"\r\n        (blur)=\"onInputBlur($event)\"\r\n    />\r\n    <ng-container *ngIf=\"isVisibleClearIcon\">\r\n        <TimesIcon [styleClass]=\"'cax-dropdown-clear-icon'\" (click)=\"clear($event)\" *ngIf=\"!clearIconTemplate\" [attr.data-pc-section]=\"'clearicon'\" />\r\n        <span class=\"cax-dropdown-clear-icon\" (click)=\"clear($event)\" *ngIf=\"clearIconTemplate\" [attr.data-pc-section]=\"'clearicon'\">\r\n            <ng-template *ngTemplateOutlet=\"clearIconTemplate\"></ng-template>\r\n        </span>\r\n    </ng-container>\r\n\r\n    <div class=\"cax-dropdown-trigger\" role=\"button\" aria-label=\"dropdown trigger\" (mousedown)=\"onMouseDown($event)\" aria-haspopup=\"listbox\" [attr.aria-expanded]=\"overlayVisible ?? false\" [attr.data-pc-section]=\"'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-dropdown-trigger-icon pi-spin ' + loadingIcon\" aria-hidden=\"true\"></span>\r\n                <span *ngIf=\"!loadingIcon\" [class]=\"'cax-dropdown-trigger-icon pi pi-spinner pi-spin'\" aria-hidden=\"true\"></span>\r\n            </ng-container>\r\n        </ng-container>\r\n\r\n        <ng-template #elseBlock>\r\n            <ng-container *ngIf=\"!dropdownIconTemplate\">\r\n                <span class=\"cax-dropdown-trigger-icon\" *ngIf=\"dropdownIcon\" [ngClass]=\"dropdownIcon\"></span>\r\n                <!-- <ChevronDownIcon *ngIf=\"!dropdownIcon\" [styleClass]=\"'cax-dropdown-trigger-icon'\" /> -->\r\n                <i *ngIf=\"!dropdownIcon && !overlayVisible\" class=\"cax cax-alt-arrow-down\"></i>\r\n                <i *ngIf=\"!dropdownIcon && overlayVisible\" class=\"cax cax-alt-arrow-up\"></i>\r\n            </ng-container>\r\n            <span *ngIf=\"dropdownIconTemplate\" class=\"cax-dropdown-trigger-icon\">\r\n                <ng-template *ngTemplateOutlet=\"dropdownIconTemplate\"></ng-template>\r\n            </span>\r\n        </ng-template>\r\n    </div>\r\n\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 [ngClass]=\"'cax-dropdown-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                <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\r\n                <div class=\"cax-dropdown-header\" *ngIf=\"filter\" (click)=\"$event.stopPropagation()\">\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-dropdown-filter-container\">\r\n                            <input\r\n                                #filter\r\n                                type=\"text\"\r\n                                role=\"searchbox\"\r\n                                autocomplete=\"off\"\r\n                                [attr.placeholder]=\"filterPlaceholder || 'Search...'\"\r\n                                [value]=\"_filterValue() || ''\"\r\n                                class=\"cax-dropdown-filter cax-inputtext cax-component\"\r\n                                [ngClass]=\"{ 'cax-variant-filled': variant === 'filled' || config.inputStyle() === 'filled' }\"\r\n                                [attr.placeholder]=\"filterPlaceholder\"\r\n                                [attr.aria-owns]=\"id + '_list'\"\r\n                                (input)=\"onFilterInputChange($event)\"\r\n                                [attr.aria-label]=\"ariaFilterLabel\"\r\n                                [attr.aria-activedescendant]=\"focusedOptionId\"\r\n                                (keydown)=\"onFilterKeyDown($event)\"\r\n                                (blur)=\"onFilterBlur($event)\"\r\n                            />\r\n                            <SearchIcon *ngIf=\"!filterIconTemplate\" [styleClass]=\"'cax-dropdown-filter-icon'\" />\r\n                            <span *ngIf=\"filterIconTemplate\" class=\"cax-dropdown-filter-icon\">\r\n                                <ng-template *ngTemplateOutlet=\"filterIconTemplate\"></ng-template>\r\n                            </span>\r\n                            <i *ngIf=\"_filterValue()\" class=\"cax cax-close-circle cax-dropdown-filter-clear-icon\" (click)=\"resetFilter()\"></i>\r\n                        </div>\r\n                    </ng-template>\r\n                </div>\r\n                <div\r\n                    class=\"cax-dropdown-items-wrapper\"\r\n                    [ngStyle]=\"{\r\n                        'max-height': virtualScroll ? 'auto' : scrollHeight || 'auto'\r\n                    }\"\r\n                    tabindex=\"0\"\r\n                >\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                        [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 [attr.id]=\"id + '_list'\" [attr.aria-label]=\"listLabel\" class=\"cax-dropdown-items\" [ngClass]=\"scrollerOptions.contentStyleClass\" [ngStyle]=\"scrollerOptions.contentStyle\" role=\"listbox\">\r\n                            <ng-template ngFor let-option [ngForOf]=\"items\" let-i=\"index\">\r\n                                <ng-container *ngIf=\"isOptionGroup(option)\">\r\n                                    <li class=\"cax-dropdown-item-group\" [attr.id]=\"id + '_' + getOptionIndex(i, scrollerOptions)\" [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-dropdownItem\r\n                                        [id]=\"id + '_' + getOptionIndex(i, scrollerOptions)\"\r\n                                        [option]=\"option\"\r\n                                        [checkmark]=\"checkmark\"\r\n                                        [selected]=\"isSelected(option)\"\r\n                                        [label]=\"getOptionLabel(option)\"\r\n                                        [disabled]=\"isOptionDisabled(option)\"\r\n                                        [template]=\"itemTemplate\"\r\n                                        [focused]=\"focusedOptionIndex() === getOptionIndex(i, scrollerOptions)\"\r\n                                        [ariaPosInset]=\"getAriaPosInset(getOptionIndex(i, scrollerOptions))\"\r\n                                        [ariaSetSize]=\"ariaSetSize\"\r\n                                        (onClick)=\"onOptionSelect($event, option)\"\r\n                                        (onMouseEnter)=\"onOptionMouseEnter($event, getOptionIndex(i, scrollerOptions))\"\r\n                                    ></cax-dropdownItem>\r\n                                </ng-container>\r\n                            </ng-template>\r\n                            <li *ngIf=\"filterValue && isEmpty()\" class=\"cax-dropdown-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=\"!filterValue && isEmpty()\" class=\"cax-dropdown-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                <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\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", styles: ["@layer cax{.cax-dropdown{display:inline-flex;cursor:pointer;position:relative;-webkit-user-select:none;user-select:none;width:100%;height:40px}.cax-dropdown-clear-icon{position:absolute;top:50%;margin-top:-.5rem}.cax-dropdown-main-label{font-weight:500;font-size:14px;line-height:20px;margin-bottom:8px}.cax-dropdown-trigger{display:flex;align-items:center;justify-content:center;flex-shrink:0}.cax-dropdown-trigger-icon{transition:transform .3s ease}.cax-dropdown-open .cax-dropdown-trigger-icon{transform:rotate(180deg)}.cax-dropdown-label{display:block;white-space:nowrap;overflow:hidden;flex:1 1 auto;width:1%;text-overflow:ellipsis;cursor:pointer}.cax-dropdown-label-empty{overflow:hidden;opacity:0}input.cax-dropdown-label{cursor:default}.cax-dropdown-items-wrapper{overflow:auto}.cax-dropdown-item{cursor:pointer;font-weight:400;white-space:nowrap;position:relative;overflow:hidden;font-weight:500}.cax-dropdown-item-group{cursor:auto}.cax-dropdown-items{margin:0;padding:0;list-style-type:none}.cax-fluid .cax-dropdown{display:flex}.cax-fluid .cax-dropdown .cax-dropdown-label{width:1%}.cax-float-label .cax-dropdown .cax-placeholder{opacity:0}}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i1.FilterService }, { type: i1.caxConfig }], propDecorators: { id: [{
                 type: Input
             }], scrollHeight: [{