cax-design-system 2.8.5 → 3.0.1

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

@@ -1 +1 @@
-{"version":3,"file":"cax-design-system-dragdrop.mjs","sources":["../../src/app/components/dragdrop/dragdrop.ts","../../src/app/components/dragdrop/dragdrop.module.ts","../../src/app/components/dragdrop/cax-design-system-dragdrop.ts"],"sourcesContent":["import { AfterViewInit, Directive, ElementRef, EventEmitter, HostListener, Input, NgZone, OnDestroy, Output, Renderer2, booleanAttribute } from '@angular/core';\nimport { DomHandler } from 'cax-design-system/dom';\nimport { VoidListener } from 'cax-design-system/ts-helpers';\n/**\n * caxDraggable directive apply draggable behavior to any element.\n * @group Components\n */\n@Directive({\n    selector: '[caxDraggable]',\n    standalone: false,\n    host: {\n        class: 'cax-element'\n    }\n})\nexport class Draggable implements AfterViewInit, OnDestroy {\n    @Input('caxDraggable') scope: string | undefined;\n    /**\n     * Defines the cursor style.\n     * @group Props\n     */\n    @Input() dragEffect: 'none' | 'copy' | 'copyLink' | 'copyMove' | 'link' | 'linkMove' | 'move' | 'all' | 'uninitialized' | undefined;\n    /**\n     * Selector to define the drag handle, by default anywhere on the target element is a drag handle to start dragging.\n     * @group Props\n     */\n    @Input() dragHandle: string | undefined;\n    /**\n     * Callback to invoke when drag begins.\n     * @param {DragEvent} event - Drag event.\n     * @group Emits\n     */\n    @Output() onDragStart: EventEmitter<DragEvent> = new EventEmitter();\n    /**\n     * Callback to invoke when drag ends.\n     * @param {DragEvent} event - Drag event.\n     * @group Emits\n     */\n    @Output() onDragEnd: EventEmitter<DragEvent> = new EventEmitter();\n    /**\n     * Callback to invoke on dragging.\n     * @param {DragEvent} event - Drag event.\n     * @group Emits\n     */\n    @Output() onDrag: EventEmitter<DragEvent> = new EventEmitter();\n\n    handle: any;\n\n    dragListener: VoidListener;\n\n    mouseDownListener: VoidListener;\n\n    mouseUpListener: VoidListener;\n\n    _caxDraggableDisabled: boolean = false;\n\n    constructor(\n        public el: ElementRef,\n        public zone: NgZone,\n        private renderer: Renderer2\n    ) {}\n\n    @Input() get caxDraggableDisabled(): boolean {\n        return this._caxDraggableDisabled;\n    }\n    set caxDraggableDisabled(_caxDraggableDisabled: boolean) {\n        this._caxDraggableDisabled = _caxDraggableDisabled;\n\n        if (this._caxDraggableDisabled) {\n            this.unbindMouseListeners();\n        } else {\n            this.el.nativeElement.draggable = true;\n            this.bindMouseListeners();\n        }\n    }\n\n    ngAfterViewInit() {\n        if (!this.caxDraggableDisabled) {\n            this.el.nativeElement.draggable = true;\n            this.bindMouseListeners();\n        }\n    }\n\n    bindDragListener() {\n        if (!this.dragListener) {\n            this.zone.runOutsideAngular(() => {\n                this.dragListener = this.renderer.listen(this.el.nativeElement, 'drag', this.drag.bind(this));\n            });\n        }\n    }\n\n    unbindDragListener() {\n        if (this.dragListener) {\n            this.zone.runOutsideAngular(() => {\n                this.dragListener && this.dragListener();\n                this.dragListener = null;\n            });\n        }\n    }\n\n    bindMouseListeners() {\n        if (!this.mouseDownListener && !this.mouseUpListener) {\n            this.zone.runOutsideAngular(() => {\n                this.mouseDownListener = this.renderer.listen(this.el.nativeElement, 'mousedown', this.mousedown.bind(this));\n                this.mouseUpListener = this.renderer.listen(this.el.nativeElement, 'mouseup', this.mouseup.bind(this));\n            });\n        }\n    }\n\n    unbindMouseListeners() {\n        if (this.mouseDownListener && this.mouseUpListener) {\n            this.zone.runOutsideAngular(() => {\n                this.mouseDownListener && this.mouseDownListener();\n                this.mouseUpListener && this.mouseUpListener();\n                this.mouseDownListener = null;\n                this.mouseUpListener = null;\n            });\n        }\n    }\n\n    drag(event: DragEvent) {\n        this.onDrag.emit(event);\n    }\n\n    @HostListener('dragstart', ['$event'])\n    dragStart(event: DragEvent) {\n        if (this.allowDrag() && !this.caxDraggableDisabled) {\n            if (this.dragEffect) {\n                (event.dataTransfer as DataTransfer).effectAllowed = this.dragEffect;\n            }\n            (event.dataTransfer as DataTransfer).setData('text', this.scope!);\n\n            this.onDragStart.emit(event);\n\n            this.bindDragListener();\n        } else {\n            event.preventDefault();\n        }\n    }\n\n    @HostListener('dragend', ['$event'])\n    dragEnd(event: DragEvent) {\n        this.onDragEnd.emit(event);\n        this.unbindDragListener();\n    }\n\n    mousedown(event: MouseEvent) {\n        this.handle = event.target;\n    }\n\n    mouseup(event: MouseEvent) {\n        this.handle = null;\n    }\n\n    allowDrag(): boolean {\n        if (this.dragHandle && this.handle) return DomHandler.matches(this.handle, this.dragHandle);\n        else return true;\n    }\n\n    ngOnDestroy() {\n        this.unbindDragListener();\n        this.unbindMouseListeners();\n    }\n}\n/**\n * caxDroppable directive apply droppable behavior to any element.\n * @group Components\n */\n@Directive({\n    selector: '[caxDroppable]',\n    standalone: false,\n    host: {\n        class: 'cax-element'\n    }\n})\nexport class Droppable implements AfterViewInit, OnDestroy {\n    @Input('caxDroppable') scope: string | string[] | undefined;\n    /**\n     * Whether the element is droppable, useful for conditional cases.\n     * @group Props\n     */\n    @Input({ transform: booleanAttribute }) caxDroppableDisabled: boolean = false;\n    /**\n     * Defines the cursor style, valid values are none, copy, move, link, copyMove, copyLink, linkMove and all.\n     * @group Props\n     */\n    @Input() dropEffect: 'none' | 'copy' | 'link' | 'move' | undefined;\n    /**\n     * Callback to invoke when a draggable enters drop area.\n     * @group Emits\n     */\n    @Output() onDragEnter: EventEmitter<DragEvent> = new EventEmitter();\n    /**\n     * Callback to invoke when a draggable leave drop area.\n     * @group Emits\n     */\n    @Output() onDragLeave: EventEmitter<DragEvent> = new EventEmitter();\n    /**\n     * Callback to invoke when a draggable is dropped onto drop area.\n     * @group Emits\n     */\n    @Output() onDrop: EventEmitter<DragEvent> = new EventEmitter();\n\n    constructor(\n        public el: ElementRef,\n        public zone: NgZone,\n        private renderer: Renderer2\n    ) {}\n\n    dragOverListener: VoidListener;\n\n    ngAfterViewInit() {\n        if (!this.caxDroppableDisabled) {\n            this.bindDragOverListener();\n        }\n    }\n\n    bindDragOverListener() {\n        if (!this.dragOverListener) {\n            this.zone.runOutsideAngular(() => {\n                this.dragOverListener = this.renderer.listen(this.el.nativeElement, 'dragover', this.dragOver.bind(this));\n            });\n        }\n    }\n\n    unbindDragOverListener() {\n        if (this.dragOverListener) {\n            this.zone.runOutsideAngular(() => {\n                this.dragOverListener && this.dragOverListener();\n                this.dragOverListener = null;\n            });\n        }\n    }\n\n    dragOver(event: DragEvent) {\n        event.preventDefault();\n    }\n\n    @HostListener('drop', ['$event'])\n    drop(event: DragEvent) {\n        if (this.allowDrop(event)) {\n            DomHandler.removeClass(this.el.nativeElement, 'cax-draggable-enter');\n            event.preventDefault();\n            this.onDrop.emit(event);\n        }\n    }\n\n    @HostListener('dragenter', ['$event'])\n    dragEnter(event: DragEvent) {\n        event.preventDefault();\n\n        if (this.dropEffect) {\n            (event.dataTransfer as DataTransfer).dropEffect = this.dropEffect;\n        }\n\n        DomHandler.addClass(this.el.nativeElement, 'cax-draggable-enter');\n        this.onDragEnter.emit(event);\n    }\n\n    @HostListener('dragleave', ['$event'])\n    dragLeave(event: DragEvent) {\n        event.preventDefault();\n\n        if (!this.el.nativeElement.contains(event.relatedTarget)) {\n            DomHandler.removeClass(this.el.nativeElement, 'cax-draggable-enter');\n            this.onDragLeave.emit(event);\n        }\n    }\n\n    allowDrop(event: DragEvent): boolean {\n        let dragScope = (event.dataTransfer as DataTransfer).getData('text');\n        if (typeof this.scope == 'string' && dragScope == this.scope) {\n            return true;\n        } else if (Array.isArray(this.scope)) {\n            for (let j = 0; j < this.scope.length; j++) {\n                if (dragScope == this.scope[j]) {\n                    return true;\n                }\n            }\n        }\n        return false;\n    }\n\n    ngOnDestroy() {\n        this.unbindDragOverListener();\n    }\n}\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { Draggable, Droppable } from './dragdrop';\n\n@NgModule({\n    imports: [CommonModule],\n    exports: [Draggable, Droppable],\n    declarations: [Draggable, Droppable]\n})\nexport class DragDropModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"cax-design-system-dragdrop.mjs","sources":["../../src/app/components/dragdrop/dragdrop.ts","../../src/app/components/dragdrop/dragdrop.module.ts","../../src/app/components/dragdrop/cax-design-system-dragdrop.ts"],"sourcesContent":["import { AfterViewInit, Directive, ElementRef, EventEmitter, HostListener, Input, NgZone, OnDestroy, Output, Renderer2, booleanAttribute } from '@angular/core';\nimport { DomHandler } from 'cax-design-system/dom';\nimport { VoidListener } from 'cax-design-system/ts-helpers';\n/**\n * caxDraggable directive apply draggable behavior to any element.\n * @group Components\n */\n@Directive({\n    selector: '[caxDraggable]',\n    standalone: false,\n    host: {\n        class: 'cax-element'\n    }\n})\nexport class Draggable implements AfterViewInit, OnDestroy {\n    @Input('caxDraggable') scope: string | undefined;\n    /**\n     * Defines the cursor style.\n     * @group Props\n     */\n    @Input() dragEffect: 'none' | 'copy' | 'copyLink' | 'copyMove' | 'link' | 'linkMove' | 'move' | 'all' | 'uninitialized' | undefined;\n    /**\n     * Selector to define the drag handle, by default anywhere on the target element is a drag handle to start dragging.\n     * @group Props\n     */\n    @Input() dragHandle: string | undefined;\n    /**\n     * Callback to invoke when drag begins.\n     * @param {DragEvent} event - Drag event.\n     * @group Emits\n     */\n    @Output() onDragStart: EventEmitter<DragEvent> = new EventEmitter();\n    /**\n     * Callback to invoke when drag ends.\n     * @param {DragEvent} event - Drag event.\n     * @group Emits\n     */\n    @Output() onDragEnd: EventEmitter<DragEvent> = new EventEmitter();\n    /**\n     * Callback to invoke on dragging.\n     * @param {DragEvent} event - Drag event.\n     * @group Emits\n     */\n    @Output() onDrag: EventEmitter<DragEvent> = new EventEmitter();\n\n    handle: any;\n\n    dragListener: VoidListener;\n\n    mouseDownListener: VoidListener;\n\n    mouseUpListener: VoidListener;\n\n    _caxDraggableDisabled: boolean = false;\n\n    constructor(\n        public el: ElementRef,\n        public zone: NgZone,\n        private renderer: Renderer2\n    ) {}\n\n    @Input() get caxDraggableDisabled(): boolean {\n        return this._caxDraggableDisabled;\n    }\n    set caxDraggableDisabled(_caxDraggableDisabled: boolean) {\n        this._caxDraggableDisabled = _caxDraggableDisabled;\n\n        if (this._caxDraggableDisabled) {\n            this.unbindMouseListeners();\n        } else {\n            this.el.nativeElement.draggable = true;\n            this.bindMouseListeners();\n        }\n    }\n\n    ngAfterViewInit() {\n        if (!this.caxDraggableDisabled) {\n            this.el.nativeElement.draggable = true;\n            this.bindMouseListeners();\n        }\n    }\n\n    bindDragListener() {\n        if (!this.dragListener) {\n            this.zone.runOutsideAngular(() => {\n                this.dragListener = this.renderer.listen(this.el.nativeElement, 'drag', this.drag.bind(this));\n            });\n        }\n    }\n\n    unbindDragListener() {\n        if (this.dragListener) {\n            this.zone.runOutsideAngular(() => {\n                this.dragListener && this.dragListener();\n                this.dragListener = null;\n            });\n        }\n    }\n\n    bindMouseListeners() {\n        if (!this.mouseDownListener && !this.mouseUpListener) {\n            this.zone.runOutsideAngular(() => {\n                this.mouseDownListener = this.renderer.listen(this.el.nativeElement, 'mousedown', this.mousedown.bind(this));\n                this.mouseUpListener = this.renderer.listen(this.el.nativeElement, 'mouseup', this.mouseup.bind(this));\n            });\n        }\n    }\n\n    unbindMouseListeners() {\n        if (this.mouseDownListener && this.mouseUpListener) {\n            this.zone.runOutsideAngular(() => {\n                this.mouseDownListener && this.mouseDownListener();\n                this.mouseUpListener && this.mouseUpListener();\n                this.mouseDownListener = null;\n                this.mouseUpListener = null;\n            });\n        }\n    }\n\n    drag(event: DragEvent) {\n        this.onDrag.emit(event);\n    }\n\n    @HostListener('dragstart', ['$event'])\n    dragStart(event: DragEvent) {\n        if (this.allowDrag() && !this.caxDraggableDisabled) {\n            if (this.dragEffect) {\n                (event.dataTransfer as DataTransfer).effectAllowed = this.dragEffect;\n            }\n            (event.dataTransfer as DataTransfer).setData('text', this.scope!);\n\n            this.onDragStart.emit(event);\n\n            this.bindDragListener();\n        } else {\n            event.preventDefault();\n        }\n    }\n\n    @HostListener('dragend', ['$event'])\n    dragEnd(event: DragEvent) {\n        this.onDragEnd.emit(event);\n        this.unbindDragListener();\n    }\n\n    mousedown(event: MouseEvent) {\n        this.handle = event.target;\n    }\n\n    mouseup(event: MouseEvent) {\n        this.handle = null;\n    }\n\n    allowDrag(): boolean {\n        if (this.dragHandle && this.handle) return DomHandler.matches(this.handle, this.dragHandle);\n        else return true;\n    }\n\n    ngOnDestroy() {\n        this.unbindDragListener();\n        this.unbindMouseListeners();\n    }\n}\n/**\n * caxDroppable directive apply droppable behavior to any element.\n * @group Components\n */\n@Directive({\n    selector: '[caxDroppable]',\n    standalone: false,\n    host: {\n        class: 'cax-element'\n    }\n})\nexport class Droppable implements AfterViewInit, OnDestroy {\n    @Input('caxDroppable') scope: string | string[] | undefined;\n    /**\n     * Whether the element is droppable, useful for conditional cases.\n     * @group Props\n     */\n    @Input({ transform: booleanAttribute }) caxDroppableDisabled: boolean = false;\n    /**\n     * Defines the cursor style, valid values are none, copy, move, link, copyMove, copyLink, linkMove and all.\n     * @group Props\n     */\n    @Input() dropEffect: 'none' | 'copy' | 'link' | 'move' | undefined;\n    /**\n     * Callback to invoke when a draggable enters drop area.\n     * @group Emits\n     */\n    @Output() onDragEnter: EventEmitter<DragEvent> = new EventEmitter();\n    /**\n     * Callback to invoke when a draggable leave drop area.\n     * @group Emits\n     */\n    @Output() onDragLeave: EventEmitter<DragEvent> = new EventEmitter();\n    /**\n     * Callback to invoke when a draggable is dropped onto drop area.\n     * @group Emits\n     */\n    @Output() onDrop: EventEmitter<DragEvent> = new EventEmitter();\n\n    constructor(\n        public el: ElementRef,\n        public zone: NgZone,\n        private renderer: Renderer2\n    ) {}\n\n    dragOverListener: VoidListener;\n\n    ngAfterViewInit() {\n        if (!this.caxDroppableDisabled) {\n            this.bindDragOverListener();\n        }\n    }\n\n    bindDragOverListener() {\n        if (!this.dragOverListener) {\n            this.zone.runOutsideAngular(() => {\n                this.dragOverListener = this.renderer.listen(this.el.nativeElement, 'dragover', this.dragOver.bind(this));\n            });\n        }\n    }\n\n    unbindDragOverListener() {\n        if (this.dragOverListener) {\n            this.zone.runOutsideAngular(() => {\n                this.dragOverListener && this.dragOverListener();\n                this.dragOverListener = null;\n            });\n        }\n    }\n\n    dragOver(event: DragEvent) {\n        event.preventDefault();\n    }\n\n    @HostListener('drop', ['$event'])\n    drop(event: DragEvent) {\n        if (this.allowDrop(event)) {\n            DomHandler.removeClass(this.el.nativeElement, 'cax-draggable-enter');\n            event.preventDefault();\n            this.onDrop.emit(event);\n        }\n    }\n\n    @HostListener('dragenter', ['$event'])\n    dragEnter(event: DragEvent) {\n        event.preventDefault();\n\n        if (this.dropEffect) {\n            (event.dataTransfer as DataTransfer).dropEffect = this.dropEffect;\n        }\n\n        DomHandler.addClass(this.el.nativeElement, 'cax-draggable-enter');\n        this.onDragEnter.emit(event);\n    }\n\n    @HostListener('dragleave', ['$event'])\n    dragLeave(event: DragEvent) {\n        event.preventDefault();\n\n        if (!this.el.nativeElement.contains(event.relatedTarget)) {\n            DomHandler.removeClass(this.el.nativeElement, 'cax-draggable-enter');\n            this.onDragLeave.emit(event);\n        }\n    }\n\n    allowDrop(event: DragEvent): boolean {\n        let dragScope = (event.dataTransfer as DataTransfer).getData('text');\n        if (typeof this.scope == 'string' && dragScope == this.scope) {\n            return true;\n        } else if (Array.isArray(this.scope)) {\n            for (let j = 0; j < this.scope.length; j++) {\n                if (dragScope == this.scope[j]) {\n                    return true;\n                }\n            }\n        }\n        return false;\n    }\n\n    ngOnDestroy() {\n        this.unbindDragOverListener();\n    }\n}\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { Draggable, Droppable } from './dragdrop';\n\n@NgModule({\n    imports: [CommonModule],\n    exports: [Draggable, Droppable],\n    declarations: [Draggable, Droppable]\n})\nexport class DragDropModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}

package/fesm2022/cax-design-system-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, Output, Input, Component, forwardRef, signal, computed, effect, ContentChildren, ViewChild, ViewEncapsulation, ChangeDetectionStrategy, NgModule } from '@angular/core';
+import { EventEmitter, booleanAttribute, numberAttribute, Output, Input, Component, forwardRef, signal, computed, effect, ContentChildren, ContentChild, ViewChild, ViewEncapsulation, ChangeDetectionStrategy, NgModule } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import * as i1 from 'cax-design-system/api';
-import { TranslationKeys, SharedModule, CaxTemplate } from 'cax-design-system/api';
+import { TranslationKeys, SharedModule, Footer, 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';
@@ -17,10 +17,9 @@ import * as i4 from 'cax-design-system/tooltip';
 import { TooltipModule } from 'cax-design-system/tooltip';
 import { ObjectUtils, UniqueComponentId } from 'cax-design-system/utils';
 import { TimesIcon } from 'cax-design-system/icons/times';
-import { ChevronDownIcon } from 'cax-design-system/icons/chevrondown';
-import { SearchIcon } from 'cax-design-system/icons/search';
 import { BlankIcon } from 'cax-design-system/icons/blank';
 import { CheckIcon } from 'cax-design-system/icons/check';
+import { Divider } from 'cax-design-system/divider';
 
 class DropdownItem {
     id;
@@ -35,6 +34,7 @@ class DropdownItem {
     ariaSetSize;
     template;
     checkmark;
+    size = 'md';
     onClick = new EventEmitter();
     onMouseEnter = new EventEmitter();
     ngOnInit() { }
@@ -44,14 +44,14 @@ class DropdownItem {
     onOptionMouseEnter(event) {
         this.onMouseEnter.emit(event);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: DropdownItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.17", 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" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: DropdownItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.3.25", 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], size: "size" }, 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\" [ngClass]=\"{'cax-text-action-sm-medium': size === 'sm', 'cax-text-action-md-regular': size === 'md', 'cax-text-action-lg-regular': size === 'lg'}\">{{ 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" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: DropdownItem, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: DropdownItem, decorators: [{
             type: Component,
             args: [{ selector: 'cax-dropdownItem', standalone: true, imports: [CommonModule, BlankIcon, CheckIcon], host: {
                         class: 'cax-element'
-                    }, 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" }]
+                    }, 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\" [ngClass]=\"{'cax-text-action-sm-medium': size === 'sm', 'cax-text-action-md-regular': size === 'md', 'cax-text-action-lg-regular': size === 'lg'}\">{{ label ?? 'empty' }}</span>\n    <ng-container *ngTemplateOutlet=\"template; context: { $implicit: option }\"></ng-container>\n</li>\n" }]
         }], propDecorators: { id: [{
                 type: Input
             }], option: [{
@@ -82,6 +82,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
             }], checkmark: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
+            }], size: [{
+                type: Input
             }], onClick: [{
                 type: Output
             }], onMouseEnter: [{
@@ -177,7 +179,7 @@ class Dropdown {
         this._placeholder.set(val);
     }
     get placeholder() {
-        return this._placeholder.asReadonly();
+        return this._placeholder();
     }
     /**
      * Icon to display in loading state.
@@ -199,6 +201,11 @@ class Dropdown {
      * @group Props
      */
     variant = 'outlined';
+    /**
+     * Size of the component.
+     * @group Props
+     */
+    size = 'md';
     /**
      * Identifier of the accessible input element.
      * @group Props
@@ -395,6 +402,21 @@ class Dropdown {
      * @group Props
      */
     labelText;
+    /**
+     * When present, it specifies that the component is invalid.
+     * @group Props
+     */
+    invalid = false;
+    /**
+     * Text to display when validation fails.
+     * @group Props
+     */
+    errorText;
+    /**
+     * Helper text to display below the input.
+     * @group Props
+     */
+    successText;
     get disabled() {
         return this._disabled;
     }
@@ -562,6 +584,7 @@ class Dropdown {
     overlayViewChild;
     firstHiddenFocusableElementOnOverlay;
     lastHiddenFocusableElementOnOverlay;
+    footerFacet;
     templates;
     _disabled;
     itemsWrapper;
@@ -579,9 +602,9 @@ class Dropdown {
     clearIconTemplate;
     filterIconTemplate;
     filterOptions;
-    _options = signal(null);
-    _placeholder = signal(undefined);
-    modelValue = signal(null);
+    _options = signal(null, ...(ngDevMode ? [{ debugName: "_options" }] : []));
+    _placeholder = signal(undefined, ...(ngDevMode ? [{ debugName: "_placeholder" }] : []));
+    modelValue = signal(null, ...(ngDevMode ? [{ debugName: "modelValue" }] : []));
     value;
     onModelChange = () => { };
     onModelTouched = () => { };
@@ -593,17 +616,17 @@ class Dropdown {
     dimensionsUpdated;
     hoveredItem;
     selectedOptionUpdated;
-    _filterValue = signal(null);
+    _filterValue = signal(null, ...(ngDevMode ? [{ debugName: "_filterValue" }] : []));
     searchValue;
     searchIndex;
     searchTimeout;
     previousSearchChar;
     currentSearchChar;
     preventModelTouched;
-    focusedOptionIndex = signal(-1);
+    focusedOptionIndex = signal(-1, ...(ngDevMode ? [{ debugName: "focusedOptionIndex" }] : []));
     labelId;
     listId;
-    clicked = signal(false);
+    clicked = signal(false, ...(ngDevMode ? [{ debugName: "clicked" }] : []));
     get emptyMessageLabel() {
         return this.emptyMessage || this.config.getTranslation(TranslationKeys.EMPTY_MESSAGE);
     }
@@ -632,7 +655,7 @@ class Dropdown {
         const label = this.label();
         return {
             'cax-dropdown-label cax-inputtext': true,
-            'cax-placeholder': this.placeholder() && label === this.placeholder(),
+            'cax-placeholder': this.placeholder && label === this.placeholder,
             'cax-dropdown-label-empty': !this.editable && !this.selectedItemTemplate && (label === undefined || label === null || label === 'cax-emptylabel' || label.length === 0)
         };
     }
@@ -672,22 +695,22 @@ class Dropdown {
             return filteredOptions;
         }
         return options;
-    });
+    }, ...(ngDevMode ? [{ debugName: "visibleOptions" }] : []));
     label = computed(() => {
         // use  getAllVisibleAndNonVisibleOptions verses just visible options
         // this will find the selected option whether or not the user is currently filtering  because the filtered (i.e. visible) options, are a subset of all the options
         const options = this.getAllVisibleAndNonVisibleOptions();
         // use isOptionEqualsModelValue for the use case where the dropdown is initalized with a disabled option
         const selectedOptionIndex = options.findIndex((option) => this.isOptionValueEqualsModelValue(option));
-        return selectedOptionIndex !== -1 ? this.getOptionLabel(options[selectedOptionIndex]) : this.placeholder() || 'cax-emptylabel';
-    });
+        return selectedOptionIndex !== -1 ? this.getOptionLabel(options[selectedOptionIndex]) : this.placeholder || 'cax-emptylabel';
+    }, ...(ngDevMode ? [{ debugName: "label" }] : []));
     filled = computed(() => {
         if (typeof this.modelValue() === 'string')
             return !!this.modelValue();
         return this.label() !== 'cax-emptylabel' && this.modelValue() !== undefined && this.modelValue() !== null;
-    });
+    }, ...(ngDevMode ? [{ debugName: "filled" }] : []));
     selectedOption;
-    editableInputValue = computed(() => this.getOptionLabel(this.selectedOption) || this.modelValue() || '');
+    editableInputValue = computed(() => this.getOptionLabel(this.selectedOption) || this.modelValue() || '', ...(ngDevMode ? [{ debugName: "editableInputValue" }] : []));
     constructor(el, renderer, cd, zone, filterService, config) {
         this.el = el;
         this.renderer = renderer;
@@ -810,7 +833,7 @@ class Dropdown {
             this.onOptionSelect(null, this.visibleOptions()[this.focusedOptionIndex()], false);
         }
         if (this.autoDisplayFirst && (this.modelValue() === null || this.modelValue() === undefined)) {
-            if (!this.placeholder()) {
+            if (!this.placeholder) {
                 const ind = this.findFirstOptionIndex();
                 this.onOptionSelect(null, this.visibleOptions()[ind], false, true);
             }
@@ -849,7 +872,7 @@ class Dropdown {
         this.cd.markForCheck();
     }
     allowModelChange() {
-        return this.autoDisplayFirst && !this.placeholder() && (this.modelValue() === undefined || this.modelValue() === null) && !this.editable && this.options && this.options.length;
+        return this.autoDisplayFirst && !this.placeholder && (this.modelValue() === undefined || this.modelValue() === null) && !this.editable && this.options && this.options.length;
     }
     isSelectedOptionEmpty() {
         return ObjectUtils.isEmpty(this.selectedOption);
@@ -1454,16 +1477,16 @@ class Dropdown {
         this.onClear.emit(event);
         this.resetFilter();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", 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: "19.2.17", 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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", 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: "20.3.25", 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", size: "size", 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", invalid: ["invalid", "invalid", booleanAttribute], errorText: "errorText", successText: "successText", 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: "footerFacet", first: true, predicate: Footer, descendants: true }, { 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 class=\"cax-input-container\" [class]=\"styleClass\" [ngClass]=\"['cax-dropdown-' + size]\" [ngStyle]=\"style\" [class.cax-disabled]=\"disabled\">\n    <div *ngIf=\"labelText\" [ngClass]=\"{'cax-dropdown-main-label': labelText}\">\n        <label *ngIf=\"labelText\" [ngClass]=\"{'cax-text-action-sm-semibold': size === 'sm', 'cax-text-action-md-semibold': size === 'md', 'cax-text-action-lg-semibold': size === 'lg'}\">{{ labelText }}</label>\n    </div>\n    <div #container [attr.id]=\"id\" [ngClass]=\"containerClass\" (click)=\"onContainerClick($event)\">\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            [class.cax-text-action-sm-medium]=\"size === 'sm'\"\n            [class.cax-text-action-md-regular]=\"size === 'md'\"\n            [class.cax-text-action-lg-regular]=\"size === 'lg'\"\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            [class.cax-text-action-sm-medium]=\"size === 'sm'\"\n            [class.cax-text-action-md-regular]=\"size === 'md'\"\n            [class.cax-text-action-lg-regular]=\"size === 'lg'\"\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 && !overlayVisible\" class=\"cax cax-alt-arrow-down\"></i>\n                    <i *ngIf=\"!dropdownIcon && overlayVisible\" class=\"cax cax-alt-arrow-up\"></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 class=\"cax cax-magnifier cax-dropdown-filter-icon\" *ngIf=\"!filterIconTemplate\"></span>\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                                            [size]=\"size\"\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                    <div *ngIf=\"footerFacet || footerTemplate\" style=\"padding: 0 12px\">\n                        <cax-divider [style]=\"{margin: '0px'}\" type=\"solid\" />\n                    </div>\n                    <div class=\"cax-dropdown-footer\" *ngIf=\"footerFacet || footerTemplate\">\n                        <ng-content select=\"cax-footer\"></ng-content>\n                        <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\n                    </div>\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    <!-- Error Message with conditional opacity -->\n    <small *ngIf=\"invalid\" class=\"cax-error\" [ngClass]=\"{'cax-text-action-sm-medium': size === 'sm', 'cax-text-action-md-regular': size === 'md', 'cax-text-action-lg-regular': size === 'lg'}\"> {{ errorText }} </small>\n\n    <!-- Helper Text with conditional opacity -->\n    <small *ngIf=\"successText && !invalid\" class=\"cax-helper-text\" [ngClass]=\"{'cax-text-action-sm-medium': size === 'sm', 'cax-text-action-md-regular': size === 'md', 'cax-text-action-lg-regular': size === 'lg'}\"> {{ successText }} </small>\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:600;font-size:14px;line-height:20px}.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: DropdownItem, selector: "cax-dropdownItem", inputs: ["id", "option", "selected", "focused", "label", "disabled", "visible", "itemSize", "ariaPosInset", "ariaSetSize", "template", "checkmark", "size"], outputs: ["onClick", "onMouseEnter"] }, { kind: "component", type: 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.17", ngImport: i0, type: Dropdown, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: Dropdown, decorators: [{
             type: Component,
-            args: [{ selector: 'cax-dropdown', standalone: true, imports: [CommonModule, OverlayModule, SharedModule, TooltipModule, RippleModule, ScrollerModule, AutoFocusModule, TimesIcon, ChevronDownIcon, SearchIcon, DropdownItem], host: {
+            args: [{ selector: 'cax-dropdown', standalone: true, imports: [CommonModule, OverlayModule, SharedModule, TooltipModule, RippleModule, ScrollerModule, AutoFocusModule, TimesIcon, DropdownItem, Divider], host: {
                         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}\">\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"] }]
+                    }, providers: [DROPDOWN_VALUE_ACCESSOR], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"cax-input-container\" [class]=\"styleClass\" [ngClass]=\"['cax-dropdown-' + size]\" [ngStyle]=\"style\" [class.cax-disabled]=\"disabled\">\n    <div *ngIf=\"labelText\" [ngClass]=\"{'cax-dropdown-main-label': labelText}\">\n        <label *ngIf=\"labelText\" [ngClass]=\"{'cax-text-action-sm-semibold': size === 'sm', 'cax-text-action-md-semibold': size === 'md', 'cax-text-action-lg-semibold': size === 'lg'}\">{{ labelText }}</label>\n    </div>\n    <div #container [attr.id]=\"id\" [ngClass]=\"containerClass\" (click)=\"onContainerClick($event)\">\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            [class.cax-text-action-sm-medium]=\"size === 'sm'\"\n            [class.cax-text-action-md-regular]=\"size === 'md'\"\n            [class.cax-text-action-lg-regular]=\"size === 'lg'\"\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            [class.cax-text-action-sm-medium]=\"size === 'sm'\"\n            [class.cax-text-action-md-regular]=\"size === 'md'\"\n            [class.cax-text-action-lg-regular]=\"size === 'lg'\"\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 && !overlayVisible\" class=\"cax cax-alt-arrow-down\"></i>\n                    <i *ngIf=\"!dropdownIcon && overlayVisible\" class=\"cax cax-alt-arrow-up\"></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 class=\"cax cax-magnifier cax-dropdown-filter-icon\" *ngIf=\"!filterIconTemplate\"></span>\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                                            [size]=\"size\"\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                    <div *ngIf=\"footerFacet || footerTemplate\" style=\"padding: 0 12px\">\n                        <cax-divider [style]=\"{margin: '0px'}\" type=\"solid\" />\n                    </div>\n                    <div class=\"cax-dropdown-footer\" *ngIf=\"footerFacet || footerTemplate\">\n                        <ng-content select=\"cax-footer\"></ng-content>\n                        <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\n                    </div>\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    <!-- Error Message with conditional opacity -->\n    <small *ngIf=\"invalid\" class=\"cax-error\" [ngClass]=\"{'cax-text-action-sm-medium': size === 'sm', 'cax-text-action-md-regular': size === 'md', 'cax-text-action-lg-regular': size === 'lg'}\"> {{ errorText }} </small>\n\n    <!-- Helper Text with conditional opacity -->\n    <small *ngIf=\"successText && !invalid\" class=\"cax-helper-text\" [ngClass]=\"{'cax-text-action-sm-medium': size === 'sm', 'cax-text-action-md-regular': size === 'md', 'cax-text-action-lg-regular': size === 'lg'}\"> {{ successText }} </small>\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:600;font-size:14px;line-height:20px}.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: [{
@@ -1505,6 +1528,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
                 type: Input
             }], variant: [{
                 type: Input
+            }], size: [{
+                type: Input
             }], inputId: [{
                 type: Input
             }], dataKey: [{
@@ -1599,6 +1624,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
                 args: [{ transform: booleanAttribute }]
             }], labelText: [{
                 type: Input
+            }], invalid: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], errorText: [{
+                type: Input
+            }], successText: [{
+                type: Input
             }], disabled: [{
                 type: Input
             }], itemSize: [{
@@ -1660,17 +1692,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
             }], lastHiddenFocusableElementOnOverlay: [{
                 type: ViewChild,
                 args: ['lastHiddenFocusableEl']
+            }], footerFacet: [{
+                type: ContentChild,
+                args: [Footer]
             }], templates: [{
                 type: ContentChildren,
                 args: [CaxTemplate]
             }] } });
 
 class DropdownModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: DropdownModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.17", ngImport: i0, type: DropdownModule, imports: [Dropdown, DropdownItem, OverlayModule, SharedModule, ScrollerModule], exports: [Dropdown, DropdownItem, OverlayModule, SharedModule, ScrollerModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: DropdownModule, imports: [Dropdown, DropdownItem, OverlayModule, SharedModule, ScrollerModule, OverlayModule, SharedModule, ScrollerModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: DropdownModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: DropdownModule, imports: [Dropdown, DropdownItem, OverlayModule, SharedModule, ScrollerModule], exports: [Dropdown, DropdownItem, OverlayModule, SharedModule, ScrollerModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: DropdownModule, imports: [Dropdown, DropdownItem, OverlayModule, SharedModule, ScrollerModule, OverlayModule, SharedModule, ScrollerModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: DropdownModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: DropdownModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [Dropdown, DropdownItem, OverlayModule, SharedModule, ScrollerModule],