cax-design-system 2.8.4 → 2.8.5

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

@@ -823,10 +823,10 @@ class Dialog {
         }
         this.destroyStyle();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: Dialog, deps: [{ token: DOCUMENT }, { token: PLATFORM_ID }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i1.caxConfig }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.16", type: Dialog, isStandalone: false, selector: "cax-dialog", inputs: { header: "header", draggable: ["draggable", "draggable", booleanAttribute], resizable: ["resizable", "resizable", booleanAttribute], positionLeft: "positionLeft", positionTop: "positionTop", contentStyle: "contentStyle", contentStyleClass: "contentStyleClass", modal: ["modal", "modal", booleanAttribute], closeOnEscape: ["closeOnEscape", "closeOnEscape", booleanAttribute], dismissableMask: ["dismissableMask", "dismissableMask", booleanAttribute], rtl: ["rtl", "rtl", booleanAttribute], closable: ["closable", "closable", booleanAttribute], responsive: "responsive", appendTo: "appendTo", breakpoints: "breakpoints", styleClass: "styleClass", maskStyleClass: "maskStyleClass", maskStyle: "maskStyle", showHeader: ["showHeader", "showHeader", booleanAttribute], breakpoint: "breakpoint", blockScroll: ["blockScroll", "blockScroll", booleanAttribute], autoZIndex: ["autoZIndex", "autoZIndex", booleanAttribute], baseZIndex: ["baseZIndex", "baseZIndex", numberAttribute], minX: ["minX", "minX", numberAttribute], minY: ["minY", "minY", numberAttribute], focusOnShow: ["focusOnShow", "focusOnShow", booleanAttribute], maximizable: ["maximizable", "maximizable", booleanAttribute], keepInViewport: ["keepInViewport", "keepInViewport", booleanAttribute], focusTrap: ["focusTrap", "focusTrap", booleanAttribute], transitionOptions: "transitionOptions", closeIcon: "closeIcon", closeAriaLabel: "closeAriaLabel", closeTabindex: "closeTabindex", minimizeIcon: "minimizeIcon", maximizeIcon: "maximizeIcon", visible: "visible", style: "style", position: "position" }, outputs: { onShow: "onShow", onHide: "onHide", visibleChange: "visibleChange", onResizeInit: "onResizeInit", onResizeEnd: "onResizeEnd", onDragEnd: "onDragEnd", onMaximize: "onMaximize" }, host: { classAttribute: "cax-element" }, queries: [{ propertyName: "headerFacet", first: true, predicate: Header, descendants: true }, { propertyName: "footerFacet", first: true, predicate: Footer, descendants: true }, { propertyName: "templates", predicate: CaxTemplate }], viewQueries: [{ propertyName: "headerViewChild", first: true, predicate: ["titlebar"], descendants: true }, { propertyName: "contentViewChild", first: true, predicate: ["content"], descendants: true }, { propertyName: "footerViewChild", first: true, predicate: ["footer"], descendants: true }], ngImport: i0, template: "<div\r\n    *ngIf=\"maskVisible\"\r\n    [class]=\"maskStyleClass\"\r\n    [ngStyle]=\"maskStyle\"\r\n    [ngClass]=\"{\r\n                'cax-dialog-mask': true,\r\n                'cax-component-overlay cax-component-overlay-enter': this.modal,\r\n                'cax-dialog-mask-scrollblocker': this.modal || this.blockScroll,\r\n                'cax-dialog-left': position === 'left',\r\n                'cax-dialog-right': position === 'right',\r\n                'cax-dialog-top': position === 'top',\r\n                'cax-dialog-top-left': position === 'topleft' || position === 'top-left',\r\n                'cax-dialog-top-right': position === 'topright' || position === 'top-right',\r\n                'cax-dialog-bottom': position === 'bottom',\r\n                'cax-dialog-bottom-left': position === 'bottomleft' || position === 'bottom-left',\r\n                'cax-dialog-bottom-right': position === 'bottomright' || position === 'bottom-right'\r\n            }\"\r\n>\r\n    <div\r\n        #container\r\n        [ngClass]=\"{ 'cax-dialog cax-component': true, 'cax-dialog-rtl': rtl, 'cax-dialog-draggable': draggable, 'cax-dialog-resizable': resizable, 'cax-dialog-maximized': maximized }\"\r\n        [ngStyle]=\"style\"\r\n        [class]=\"styleClass\"\r\n        *ngIf=\"visible\"\r\n        caxFocusTrap\r\n        [caxFocusTrapDisabled]=\"focusTrap === false\"\r\n        [@animation]=\"{ value: 'visible', params: { transform: transformOptions, transition: transitionOptions } }\"\r\n        (@animation.start)=\"onAnimationStart($event)\"\r\n        (@animation.done)=\"onAnimationEnd($event)\"\r\n        role=\"dialog\"\r\n        [attr.aria-labelledby]=\"ariaLabelledBy\"\r\n        [attr.aria-modal]=\"true\"\r\n    >\r\n        <ng-container *ngIf=\"headlessTemplate; else notHeadless\">\r\n            <ng-container *ngTemplateOutlet=\"headlessTemplate\"></ng-container>\r\n        </ng-container>\r\n\r\n        <ng-template #notHeadless>\r\n            <div *ngIf=\"resizable\" class=\"cax-resizable-handle\" (mousedown)=\"initResize($event)\"></div>\r\n            <div #titlebar class=\"cax-dialog-header\" (mousedown)=\"initDrag($event)\" *ngIf=\"isHeaderVisible\">\r\n                <span [id]=\"ariaLabelledBy\" class=\"cax-dialog-title\" *ngIf=\"!headerFacet && !headerTemplate\">{{ header }}</span>\r\n                <span [id]=\"ariaLabelledBy\" class=\"cax-dialog-title\" *ngIf=\"headerFacet\">\r\n                    <ng-content select=\"cax-header\"></ng-content>\r\n                </span>\r\n                <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\r\n                <div class=\"cax-dialog-header-icons\">\r\n                    <button\r\n                        *ngIf=\"maximizable\"\r\n                        role=\"button\"\r\n                        type=\"button\"\r\n                        [ngClass]=\"{ 'cax-dialog-header-icon cax-dialog-header-maximize cax-link': true }\"\r\n                        (click)=\"maximize()\"\r\n                        (keydown.enter)=\"maximize()\"\r\n                        [attr.tabindex]=\"maximizable ? '0' : '-1'\"\r\n                        [attr.aria-label]=\"maximizeLabel\"\r\n                        pRipple\r\n                        pButton\r\n                    >\r\n                        <span *ngIf=\"maximizeIcon && !maximizeIconTemplate && !minimizeIconTemplate\" class=\"cax-dialog-header-maximize-icon\" [ngClass]=\"maximized ? minimizeIcon : maximizeIcon\"></span>\r\n                        <ng-container *ngIf=\"!maximizeIcon\">\r\n                            <WindowMaximizeIcon *ngIf=\"!maximized && !maximizeIconTemplate\" [styleClass]=\"'cax-dialog-header-maximize-icon'\" />\r\n                            <WindowMinimizeIcon *ngIf=\"maximized && !minimizeIconTemplate\" [styleClass]=\"'cax-dialog-header-maximize-icon'\" />\r\n                        </ng-container>\r\n                        <ng-container *ngIf=\"!maximized\">\r\n                            <ng-template *ngTemplateOutlet=\"maximizeIconTemplate\"></ng-template>\r\n                        </ng-container>\r\n                        <ng-container *ngIf=\"maximized\">\r\n                            <ng-template *ngTemplateOutlet=\"minimizeIconTemplate\"></ng-template>\r\n                        </ng-container>\r\n                    </button>\r\n                    <button\r\n                        *ngIf=\"closable\"\r\n                        type=\"button\"\r\n                        [ngClass]=\"{ 'cax-dialog-header-icon cax-dialog-header-close cax-link': true }\"\r\n                        [attr.aria-label]=\"closeAriaLabel\"\r\n                        (click)=\"close($event)\"\r\n                        (keydown.enter)=\"close($event)\"\r\n                        pRipple\r\n                        pButton\r\n                        [attr.tabindex]=\"closeTabindex\"\r\n                        [ngStyle]=\"{ 'min-width': 0 }\"\r\n                    >\r\n                        <ng-container *ngIf=\"!closeIconTemplate\">\r\n                            <span *ngIf=\"closeIcon\" class=\"cax-dialog-header-close-icon\" [ngClass]=\"closeIcon\"></span>\r\n                            <TimesIcon *ngIf=\"!closeIcon\" [styleClass]=\"'cax-dialog-header-close-icon'\" />\r\n                        </ng-container>\r\n                        <span *ngIf=\"closeIconTemplate\">\r\n                            <ng-template *ngTemplateOutlet=\"closeIconTemplate\"></ng-template>\r\n                        </span>\r\n                    </button>\r\n                </div>\r\n            </div>\r\n            <div #content [ngClass]=\"'cax-dialog-content'\" [ngStyle]=\"computedContentStyle\" [class]=\"contentStyleClass\">\r\n                <ng-content></ng-content>\r\n                <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\r\n            </div>\r\n            <div #footer class=\"cax-dialog-footer\" *ngIf=\"footerFacet || footerTemplate\">\r\n                <ng-content select=\"cax-footer\"></ng-content>\r\n                <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\r\n            </div>\r\n        </ng-template>\r\n    </div>\r\n</div>\r\n", styles: ["@layer cax{.cax-dialog-mask{position:fixed;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;pointer-events:none}.cax-dialog-mask.cax-component-overlay{pointer-events:auto}.cax-dialog{display:flex;flex-direction:column;pointer-events:auto;max-height:90%;transform:scale(1);position:relative}.cax-dialog-content{overflow-y:auto;flex-grow:1}.cax-dialog-header{display:flex;align-items:flex-start;justify-content:space-between;flex-shrink:0}.cax-dialog-draggable .cax-dialog-header{cursor:move}.cax-dialog-footer{display:flex;justify-content:flex-end;gap:8px;flex-shrink:0}.cax-button-container{display:inline-flex;align-items:center}.cax-dialog .cax-dialog-header-icons{display:flex;align-items:center}.cax-dialog .cax-dialog-header-icon{display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}.cax-fluid .cax-dialog-footer .cax-button{width:auto}.cax-dialog-top .cax-dialog,.cax-dialog-bottom .cax-dialog,.cax-dialog-left .cax-dialog,.cax-dialog-right .cax-dialog,.cax-dialog-top-left .cax-dialog,.cax-dialog-top-right .cax-dialog,.cax-dialog-bottom-left .cax-dialog,.cax-dialog-bottom-right .cax-dialog{margin:.75rem;transform:translateZ(0)}.cax-dialog-maximized{-webkit-transition:none;transition:none;transform:none;width:100vw!important;height:100vh!important;top:0!important;left:0!important;max-height:100%;height:100%}.cax-dialog-maximized .cax-dialog-content{flex-grow:1}.cax-dialog-left{justify-content:flex-start}.cax-dialog-right{justify-content:flex-end}.cax-dialog-top{align-items:flex-start}.cax-dialog-top-left{justify-content:flex-start;align-items:flex-start}.cax-dialog-top-right{justify-content:flex-end;align-items:flex-start}.cax-dialog-bottom{align-items:flex-end}.cax-dialog-bottom-left{justify-content:flex-start;align-items:flex-end}.cax-dialog-bottom-right{justify-content:flex-end;align-items:flex-end}.cax-dialog .cax-resizable-handle{position:absolute;font-size:.1px;display:block;cursor:se-resize;width:12px;height:12px;right:1px;bottom:1px}.cax-header-allign{display:flex;align-items:center}.cax-dialog-header-icon{font-size:1.25rem}.cax-confirm-dialog .cax-dialog-content{display:flex;align-items:center}.cax-dialog-content .cax-dialog-checkbox{display:block;margin-top:1rem}.cax-dialog-checkbox input[type=checkbox]{margin-right:.5rem}.cax-header-align{display:flex;align-items:center}.cax-dialog-title{margin-left:10px}}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i3.FocusTrap, selector: "[caxFocusTrap]", inputs: ["caxFocusTrapDisabled"] }, { kind: "component", type: i4.TimesIcon, selector: "TimesIcon" }, { kind: "component", type: i5.WindowMaximizeIcon, selector: "WindowMaximizeIcon" }, { kind: "component", type: i6.WindowMinimizeIcon, selector: "WindowMinimizeIcon" }], animations: [trigger('animation', [transition('void => visible', [useAnimation(showAnimation)]), transition('visible => void', [useAnimation(hideAnimation)])])], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: Dialog, deps: [{ token: DOCUMENT }, { token: PLATFORM_ID }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i1.caxConfig }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.17", type: Dialog, isStandalone: false, selector: "cax-dialog", inputs: { header: "header", draggable: ["draggable", "draggable", booleanAttribute], resizable: ["resizable", "resizable", booleanAttribute], positionLeft: "positionLeft", positionTop: "positionTop", contentStyle: "contentStyle", contentStyleClass: "contentStyleClass", modal: ["modal", "modal", booleanAttribute], closeOnEscape: ["closeOnEscape", "closeOnEscape", booleanAttribute], dismissableMask: ["dismissableMask", "dismissableMask", booleanAttribute], rtl: ["rtl", "rtl", booleanAttribute], closable: ["closable", "closable", booleanAttribute], responsive: "responsive", appendTo: "appendTo", breakpoints: "breakpoints", styleClass: "styleClass", maskStyleClass: "maskStyleClass", maskStyle: "maskStyle", showHeader: ["showHeader", "showHeader", booleanAttribute], breakpoint: "breakpoint", blockScroll: ["blockScroll", "blockScroll", booleanAttribute], autoZIndex: ["autoZIndex", "autoZIndex", booleanAttribute], baseZIndex: ["baseZIndex", "baseZIndex", numberAttribute], minX: ["minX", "minX", numberAttribute], minY: ["minY", "minY", numberAttribute], focusOnShow: ["focusOnShow", "focusOnShow", booleanAttribute], maximizable: ["maximizable", "maximizable", booleanAttribute], keepInViewport: ["keepInViewport", "keepInViewport", booleanAttribute], focusTrap: ["focusTrap", "focusTrap", booleanAttribute], transitionOptions: "transitionOptions", closeIcon: "closeIcon", closeAriaLabel: "closeAriaLabel", closeTabindex: "closeTabindex", minimizeIcon: "minimizeIcon", maximizeIcon: "maximizeIcon", visible: "visible", style: "style", position: "position" }, outputs: { onShow: "onShow", onHide: "onHide", visibleChange: "visibleChange", onResizeInit: "onResizeInit", onResizeEnd: "onResizeEnd", onDragEnd: "onDragEnd", onMaximize: "onMaximize" }, host: { classAttribute: "cax-element" }, queries: [{ propertyName: "headerFacet", first: true, predicate: Header, descendants: true }, { propertyName: "footerFacet", first: true, predicate: Footer, descendants: true }, { propertyName: "templates", predicate: CaxTemplate }], viewQueries: [{ propertyName: "headerViewChild", first: true, predicate: ["titlebar"], descendants: true }, { propertyName: "contentViewChild", first: true, predicate: ["content"], descendants: true }, { propertyName: "footerViewChild", first: true, predicate: ["footer"], descendants: true }], ngImport: i0, template: "<div\r\n    *ngIf=\"maskVisible\"\r\n    [class]=\"maskStyleClass\"\r\n    [ngStyle]=\"maskStyle\"\r\n    [ngClass]=\"{\r\n                'cax-dialog-mask': true,\r\n                'cax-component-overlay cax-component-overlay-enter': this.modal,\r\n                'cax-dialog-mask-scrollblocker': this.modal || this.blockScroll,\r\n                'cax-dialog-left': position === 'left',\r\n                'cax-dialog-right': position === 'right',\r\n                'cax-dialog-top': position === 'top',\r\n                'cax-dialog-top-left': position === 'topleft' || position === 'top-left',\r\n                'cax-dialog-top-right': position === 'topright' || position === 'top-right',\r\n                'cax-dialog-bottom': position === 'bottom',\r\n                'cax-dialog-bottom-left': position === 'bottomleft' || position === 'bottom-left',\r\n                'cax-dialog-bottom-right': position === 'bottomright' || position === 'bottom-right'\r\n            }\"\r\n>\r\n    <div\r\n        #container\r\n        [ngClass]=\"{ 'cax-dialog cax-component': true, 'cax-dialog-rtl': rtl, 'cax-dialog-draggable': draggable, 'cax-dialog-resizable': resizable, 'cax-dialog-maximized': maximized }\"\r\n        [ngStyle]=\"style\"\r\n        [class]=\"styleClass\"\r\n        *ngIf=\"visible\"\r\n        caxFocusTrap\r\n        [caxFocusTrapDisabled]=\"focusTrap === false\"\r\n        [@animation]=\"{ value: 'visible', params: { transform: transformOptions, transition: transitionOptions } }\"\r\n        (@animation.start)=\"onAnimationStart($event)\"\r\n        (@animation.done)=\"onAnimationEnd($event)\"\r\n        role=\"dialog\"\r\n        [attr.aria-labelledby]=\"ariaLabelledBy\"\r\n        [attr.aria-modal]=\"true\"\r\n    >\r\n        <ng-container *ngIf=\"headlessTemplate; else notHeadless\">\r\n            <ng-container *ngTemplateOutlet=\"headlessTemplate\"></ng-container>\r\n        </ng-container>\r\n\r\n        <ng-template #notHeadless>\r\n            <div *ngIf=\"resizable\" class=\"cax-resizable-handle\" (mousedown)=\"initResize($event)\"></div>\r\n            <div #titlebar class=\"cax-dialog-header\" (mousedown)=\"initDrag($event)\" *ngIf=\"isHeaderVisible\">\r\n                <span [id]=\"ariaLabelledBy\" class=\"cax-dialog-title\" *ngIf=\"!headerFacet && !headerTemplate\">{{ header }}</span>\r\n                <span [id]=\"ariaLabelledBy\" class=\"cax-dialog-title\" *ngIf=\"headerFacet\">\r\n                    <ng-content select=\"cax-header\"></ng-content>\r\n                </span>\r\n                <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\r\n                <div class=\"cax-dialog-header-icons\">\r\n                    <button\r\n                        *ngIf=\"maximizable\"\r\n                        role=\"button\"\r\n                        type=\"button\"\r\n                        [ngClass]=\"{ 'cax-dialog-header-icon cax-dialog-header-maximize cax-link': true }\"\r\n                        (click)=\"maximize()\"\r\n                        (keydown.enter)=\"maximize()\"\r\n                        [attr.tabindex]=\"maximizable ? '0' : '-1'\"\r\n                        [attr.aria-label]=\"maximizeLabel\"\r\n                        pRipple\r\n                        pButton\r\n                    >\r\n                        <span *ngIf=\"maximizeIcon && !maximizeIconTemplate && !minimizeIconTemplate\" class=\"cax-dialog-header-maximize-icon\" [ngClass]=\"maximized ? minimizeIcon : maximizeIcon\"></span>\r\n                        <ng-container *ngIf=\"!maximizeIcon\">\r\n                            <WindowMaximizeIcon *ngIf=\"!maximized && !maximizeIconTemplate\" [styleClass]=\"'cax-dialog-header-maximize-icon'\" />\r\n                            <WindowMinimizeIcon *ngIf=\"maximized && !minimizeIconTemplate\" [styleClass]=\"'cax-dialog-header-maximize-icon'\" />\r\n                        </ng-container>\r\n                        <ng-container *ngIf=\"!maximized\">\r\n                            <ng-template *ngTemplateOutlet=\"maximizeIconTemplate\"></ng-template>\r\n                        </ng-container>\r\n                        <ng-container *ngIf=\"maximized\">\r\n                            <ng-template *ngTemplateOutlet=\"minimizeIconTemplate\"></ng-template>\r\n                        </ng-container>\r\n                    </button>\r\n                    <button\r\n                        *ngIf=\"closable\"\r\n                        type=\"button\"\r\n                        [ngClass]=\"{ 'cax-dialog-header-icon cax-dialog-header-close cax-link': true }\"\r\n                        [attr.aria-label]=\"closeAriaLabel\"\r\n                        (click)=\"close($event)\"\r\n                        (keydown.enter)=\"close($event)\"\r\n                        pRipple\r\n                        pButton\r\n                        [attr.tabindex]=\"closeTabindex\"\r\n                        [ngStyle]=\"{ 'min-width': 0 }\"\r\n                    >\r\n                        <ng-container *ngIf=\"!closeIconTemplate\">\r\n                            <span *ngIf=\"closeIcon\" class=\"cax-dialog-header-close-icon\" [ngClass]=\"closeIcon\"></span>\r\n                            <TimesIcon *ngIf=\"!closeIcon\" [styleClass]=\"'cax-dialog-header-close-icon'\" />\r\n                        </ng-container>\r\n                        <span *ngIf=\"closeIconTemplate\">\r\n                            <ng-template *ngTemplateOutlet=\"closeIconTemplate\"></ng-template>\r\n                        </span>\r\n                    </button>\r\n                </div>\r\n            </div>\r\n            <div #content [ngClass]=\"'cax-dialog-content'\" [ngStyle]=\"computedContentStyle\" [class]=\"contentStyleClass\">\r\n                <ng-content></ng-content>\r\n                <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\r\n            </div>\r\n            <div #footer class=\"cax-dialog-footer\" *ngIf=\"footerFacet || footerTemplate\">\r\n                <ng-content select=\"cax-footer\"></ng-content>\r\n                <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\r\n            </div>\r\n        </ng-template>\r\n    </div>\r\n</div>\r\n", styles: ["@layer cax{.cax-dialog-mask{position:fixed;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;pointer-events:none}.cax-dialog-mask.cax-component-overlay{pointer-events:auto}.cax-dialog{display:flex;flex-direction:column;pointer-events:auto;max-height:90%;transform:scale(1);position:relative}.cax-dialog-content{overflow-y:auto;flex-grow:1}.cax-dialog-header{display:flex;align-items:flex-start;justify-content:space-between;flex-shrink:0}.cax-dialog-draggable .cax-dialog-header{cursor:move}.cax-dialog-footer{display:flex;justify-content:flex-end;gap:8px;flex-shrink:0}.cax-button-container{display:inline-flex;align-items:center}.cax-dialog .cax-dialog-header-icons{display:flex;align-items:center}.cax-dialog .cax-dialog-header-icon{display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}.cax-fluid .cax-dialog-footer .cax-button{width:auto}.cax-dialog-top .cax-dialog,.cax-dialog-bottom .cax-dialog,.cax-dialog-left .cax-dialog,.cax-dialog-right .cax-dialog,.cax-dialog-top-left .cax-dialog,.cax-dialog-top-right .cax-dialog,.cax-dialog-bottom-left .cax-dialog,.cax-dialog-bottom-right .cax-dialog{margin:.75rem;transform:translateZ(0)}.cax-dialog-maximized{-webkit-transition:none;transition:none;transform:none;width:100vw!important;height:100vh!important;top:0!important;left:0!important;max-height:100%;height:100%}.cax-dialog-maximized .cax-dialog-content{flex-grow:1}.cax-dialog-left{justify-content:flex-start}.cax-dialog-right{justify-content:flex-end}.cax-dialog-top{align-items:flex-start}.cax-dialog-top-left{justify-content:flex-start;align-items:flex-start}.cax-dialog-top-right{justify-content:flex-end;align-items:flex-start}.cax-dialog-bottom{align-items:flex-end}.cax-dialog-bottom-left{justify-content:flex-start;align-items:flex-end}.cax-dialog-bottom-right{justify-content:flex-end;align-items:flex-end}.cax-dialog .cax-resizable-handle{position:absolute;font-size:.1px;display:block;cursor:se-resize;width:12px;height:12px;right:1px;bottom:1px}.cax-header-allign{display:flex;align-items:center}.cax-dialog-header-icon{font-size:1.25rem}.cax-confirm-dialog .cax-dialog-content{display:flex;align-items:center}.cax-dialog-content .cax-dialog-checkbox{display:block;margin-top:1rem}.cax-dialog-checkbox input[type=checkbox]{margin-right:.5rem}.cax-header-align{display:flex;align-items:center}.cax-dialog-title{margin-left:10px}}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i3.FocusTrap, selector: "[caxFocusTrap]", inputs: ["caxFocusTrapDisabled"] }, { kind: "component", type: i4.TimesIcon, selector: "TimesIcon" }, { kind: "component", type: i5.WindowMaximizeIcon, selector: "WindowMaximizeIcon" }, { kind: "component", type: i6.WindowMinimizeIcon, selector: "WindowMinimizeIcon" }], animations: [trigger('animation', [transition('void => visible', [useAnimation(showAnimation)]), transition('visible => void', [useAnimation(hideAnimation)])])], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: Dialog, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: Dialog, decorators: [{
             type: Component,
             args: [{ selector: 'cax-dialog', animations: [trigger('animation', [transition('void => visible', [useAnimation(showAnimation)]), transition('visible => void', [useAnimation(hideAnimation)])])], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: false, host: {
                         class: 'cax-element'
@@ -965,11 +965,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImpo
             }] } });
 
 class DialogModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: DialogModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.16", ngImport: i0, type: DialogModule, declarations: [Dialog], imports: [CommonModule, FocusTrapModule, ButtonModule, RippleModule, TimesIcon, WindowMaximizeIcon, WindowMinimizeIcon], exports: [Dialog, SharedModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: DialogModule, imports: [CommonModule, FocusTrapModule, ButtonModule, RippleModule, TimesIcon, WindowMaximizeIcon, WindowMinimizeIcon, SharedModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: DialogModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.17", ngImport: i0, type: DialogModule, declarations: [Dialog], imports: [CommonModule, FocusTrapModule, ButtonModule, RippleModule, TimesIcon, WindowMaximizeIcon, WindowMinimizeIcon], exports: [Dialog, SharedModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: DialogModule, imports: [CommonModule, FocusTrapModule, ButtonModule, RippleModule, TimesIcon, WindowMaximizeIcon, WindowMinimizeIcon, SharedModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: DialogModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: DialogModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, FocusTrapModule, ButtonModule, RippleModule, TimesIcon, WindowMaximizeIcon, WindowMinimizeIcon],

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

@@ -48,10 +48,10 @@ class Divider {
             'cax-divider-bottom': this.layout === 'vertical' && this.align === 'bottom'
         };
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: Divider, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.16", type: Divider, isStandalone: true, selector: "cax-divider", inputs: { style: "style", styleClass: "styleClass", layout: "layout", type: "type", align: "align" }, host: { classAttribute: "cax-element" }, ngImport: i0, template: "<div [ngClass]=\"containerClass()\" [class]=\"styleClass\" [ngStyle]=\"style\" role=\"separator\" [attr.aria-orientation]=\"layout\" [attr.data-pc-name]=\"'divider'\">\r\n    <div class=\"cax-divider-content\">\r\n        <ng-content></ng-content>\r\n    </div>\r\n</div>\r\n", styles: ["@layer cax{.cax-divider-horizontal{display:flex;width:100%;position:relative;align-items:center}.cax-divider-horizontal:before{position:absolute;display:block;top:50%;left:0;width:100%;content:\"\"}.cax-divider-horizontal.cax-divider-left{justify-content:flex-start}.cax-divider-horizontal.cax-divider-right{justify-content:flex-end}.cax-divider-horizontal.cax-divider-center{justify-content:center}.cax-divider-content{z-index:1}.cax-divider-vertical{min-height:100%;margin:0 1rem;display:flex;position:relative;justify-content:center}.cax-divider-vertical:before{position:absolute;display:block;top:0;left:50%;height:100%;content:\"\"}.cax-divider-vertical.cax-divider-top{align-items:flex-start}.cax-divider-vertical.cax-divider-center{align-items:center}.cax-divider-vertical.cax-divider-bottom{align-items:flex-end}.cax-divider-solid.cax-divider-horizontal:before{border-top-style:solid}.cax-divider-solid.cax-divider-vertical:before{border-left-style:solid}.cax-divider-dashed.cax-divider-horizontal:before{border-top-style:dashed}.cax-divider-dashed.cax-divider-vertical:before{border-left-style:dashed}.cax-divider-dotted.cax-divider-horizontal:before{border-top-style:dotted}.cax-divider-dotted.cax-divider-vertical:before{border-left-style:dotted}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: Divider, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: Divider, isStandalone: true, selector: "cax-divider", inputs: { style: "style", styleClass: "styleClass", layout: "layout", type: "type", align: "align" }, host: { classAttribute: "cax-element" }, ngImport: i0, template: "<div [ngClass]=\"containerClass()\" [class]=\"styleClass\" [ngStyle]=\"style\" role=\"separator\" [attr.aria-orientation]=\"layout\" [attr.data-pc-name]=\"'divider'\">\r\n    <div class=\"cax-divider-content\">\r\n        <ng-content></ng-content>\r\n    </div>\r\n</div>\r\n", styles: ["@layer cax{.cax-divider-horizontal{display:flex;width:100%;position:relative;align-items:center}.cax-divider-horizontal:before{position:absolute;display:block;top:50%;left:0;width:100%;content:\"\"}.cax-divider-horizontal.cax-divider-left{justify-content:flex-start}.cax-divider-horizontal.cax-divider-right{justify-content:flex-end}.cax-divider-horizontal.cax-divider-center{justify-content:center}.cax-divider-content{z-index:1}.cax-divider-vertical{min-height:100%;margin:0 1rem;display:flex;position:relative;justify-content:center}.cax-divider-vertical:before{position:absolute;display:block;top:0;left:50%;height:100%;content:\"\"}.cax-divider-vertical.cax-divider-top{align-items:flex-start}.cax-divider-vertical.cax-divider-center{align-items:center}.cax-divider-vertical.cax-divider-bottom{align-items:flex-end}.cax-divider-solid.cax-divider-horizontal:before{border-top-style:solid}.cax-divider-solid.cax-divider-vertical:before{border-left-style:solid}.cax-divider-dashed.cax-divider-horizontal:before{border-top-style:dashed}.cax-divider-dashed.cax-divider-vertical:before{border-left-style:dashed}.cax-divider-dotted.cax-divider-horizontal:before{border-top-style:dotted}.cax-divider-dotted.cax-divider-vertical:before{border-left-style:dotted}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: Divider, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: Divider, decorators: [{
             type: Component,
             args: [{ selector: 'cax-divider', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: true, imports: [CommonModule], host: {
                         class: 'cax-element'
@@ -69,11 +69,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImpo
             }] } });
 
 class DividerModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: DividerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.16", ngImport: i0, type: DividerModule, imports: [Divider], exports: [Divider] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: DividerModule, imports: [Divider] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: DividerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.17", ngImport: i0, type: DividerModule, imports: [Divider], exports: [Divider] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: DividerModule, imports: [Divider] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: DividerModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: DividerModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [Divider],

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

@@ -231,8 +231,8 @@ class Dock {
             'p-focus': this.isItemActive(this.getItemId(item, index))
         };
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: Dock, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.16", type: Dock, isStandalone: false, selector: "p-dock", inputs: { id: "id", style: "style", styleClass: "styleClass", model: "model", position: "position", ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy" }, outputs: { onFocus: "onFocus", onBlur: "onBlur" }, host: { classAttribute: "cax-element" }, queries: [{ propertyName: "templates", predicate: CaxTemplate }], viewQueries: [{ propertyName: "listViewChild", first: true, predicate: ["list"], descendants: true }], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: Dock, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: Dock, isStandalone: false, selector: "p-dock", inputs: { id: "id", style: "style", styleClass: "styleClass", model: "model", position: "position", ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy" }, outputs: { onFocus: "onFocus", onBlur: "onBlur" }, host: { classAttribute: "cax-element" }, queries: [{ propertyName: "templates", predicate: CaxTemplate }], viewQueries: [{ propertyName: "listViewChild", first: true, predicate: ["list"], descendants: true }], ngImport: i0, template: `
         <div [ngClass]="containerClass" [ngStyle]="style" [class]="styleClass" [attr.data-pc-name]="'dock'">
             <div class="p-dock-list-container">
                 <ul
@@ -310,7 +310,7 @@ class Dock {
         </div>
     `, isInline: true, styles: ["@layer cax{.p-dock{position:absolute;z-index:1;display:flex;justify-content:center;align-items:center;pointer-events:none}.p-dock-list-container{display:flex;pointer-events:auto}.p-dock-list{margin:0;padding:0;list-style:none;display:flex;align-items:center;justify-content:center}.p-dock-item{transition:all .2s cubic-bezier(.4,0,.2,1);will-change:transform}.p-dock-link{display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;overflow:hidden;cursor:default}.p-dock-item-second-prev,.p-dock-item-second-next{transform:scale(1.2)}.p-dock-item-prev,.p-dock-item-next{transform:scale(1.4)}.p-dock-item-current{transform:scale(1.6);z-index:1}.p-dock-top{left:0;top:0;width:100%}.p-dock-top .p-dock-item{transform-origin:center top}.p-dock-bottom{left:0;bottom:0;width:100%}.p-dock-bottom .p-dock-item{transform-origin:center bottom}.p-dock-right{right:0;top:0;height:100%}.p-dock-right .p-dock-item{transform-origin:center right}.p-dock-right .p-dock-list{flex-direction:column}.p-dock-left{left:0;top:0;height:100%}.p-dock-left .p-dock-item{transform-origin:center left}.p-dock-left .p-dock-list{flex-direction:column}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i3.Tooltip, selector: "[caxTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "caxTooltip", "tooltipDisabled", "tooltipOptions", "linkUrl", "linkText"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: Dock, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: Dock, decorators: [{
             type: Component,
             args: [{ selector: 'p-dock', template: `
         <div [ngClass]="containerClass" [ngStyle]="style" [class]="styleClass" [attr.data-pc-name]="'dock'">
@@ -417,11 +417,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImpo
                 args: ['list', { static: false }]
             }] } });
 class DockModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: DockModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.16", ngImport: i0, type: DockModule, declarations: [Dock], imports: [CommonModule, RouterModule, RippleModule, TooltipModule], exports: [Dock, SharedModule, TooltipModule, RouterModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: DockModule, imports: [CommonModule, RouterModule, RippleModule, TooltipModule, SharedModule, TooltipModule, RouterModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: DockModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.17", ngImport: i0, type: DockModule, declarations: [Dock], imports: [CommonModule, RouterModule, RippleModule, TooltipModule], exports: [Dock, SharedModule, TooltipModule, RouterModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: DockModule, imports: [CommonModule, RouterModule, RippleModule, TooltipModule, SharedModule, TooltipModule, RouterModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: DockModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: DockModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, RouterModule, RippleModule, TooltipModule],

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

@@ -138,10 +138,10 @@ class Draggable {
         this.unbindDragListener();
         this.unbindMouseListeners();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: Draggable, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.16", type: Draggable, isStandalone: false, selector: "[caxDraggable]", inputs: { scope: ["caxDraggable", "scope"], dragEffect: "dragEffect", dragHandle: "dragHandle", caxDraggableDisabled: "caxDraggableDisabled" }, outputs: { onDragStart: "onDragStart", onDragEnd: "onDragEnd", onDrag: "onDrag" }, host: { listeners: { "dragstart": "dragStart($event)", "dragend": "dragEnd($event)" }, classAttribute: "cax-element" }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: Draggable, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.17", type: Draggable, isStandalone: false, selector: "[caxDraggable]", inputs: { scope: ["caxDraggable", "scope"], dragEffect: "dragEffect", dragHandle: "dragHandle", caxDraggableDisabled: "caxDraggableDisabled" }, outputs: { onDragStart: "onDragStart", onDragEnd: "onDragEnd", onDrag: "onDrag" }, host: { listeners: { "dragstart": "dragStart($event)", "dragend": "dragEnd($event)" }, classAttribute: "cax-element" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: Draggable, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: Draggable, decorators: [{
             type: Directive,
             args: [{
                     selector: '[caxDraggable]',
@@ -274,10 +274,10 @@ class Droppable {
     ngOnDestroy() {
         this.unbindDragOverListener();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: Droppable, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.2.16", type: Droppable, isStandalone: false, selector: "[caxDroppable]", inputs: { scope: ["caxDroppable", "scope"], caxDroppableDisabled: ["caxDroppableDisabled", "caxDroppableDisabled", booleanAttribute], dropEffect: "dropEffect" }, outputs: { onDragEnter: "onDragEnter", onDragLeave: "onDragLeave", onDrop: "onDrop" }, host: { listeners: { "drop": "drop($event)", "dragenter": "dragEnter($event)", "dragleave": "dragLeave($event)" }, classAttribute: "cax-element" }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: Droppable, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.2.17", type: Droppable, isStandalone: false, selector: "[caxDroppable]", inputs: { scope: ["caxDroppable", "scope"], caxDroppableDisabled: ["caxDroppableDisabled", "caxDroppableDisabled", booleanAttribute], dropEffect: "dropEffect" }, outputs: { onDragEnter: "onDragEnter", onDragLeave: "onDragLeave", onDrop: "onDrop" }, host: { listeners: { "drop": "drop($event)", "dragenter": "dragEnter($event)", "dragleave": "dragLeave($event)" }, classAttribute: "cax-element" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: Droppable, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: Droppable, decorators: [{
             type: Directive,
             args: [{
                     selector: '[caxDroppable]',
@@ -312,11 +312,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImpo
             }] } });
 
 class DragDropModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: DragDropModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.16", ngImport: i0, type: DragDropModule, declarations: [Draggable, Droppable], imports: [CommonModule], exports: [Draggable, Droppable] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: DragDropModule, imports: [CommonModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: DragDropModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.17", ngImport: i0, type: DragDropModule, declarations: [Draggable, Droppable], imports: [CommonModule], exports: [Draggable, Droppable] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: DragDropModule, imports: [CommonModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: DragDropModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: DragDropModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule],

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

@@ -44,10 +44,10 @@ class DropdownItem {
     onOptionMouseEnter(event) {
         this.onMouseEnter.emit(event);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: DropdownItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.16", 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: "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" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: DropdownItem, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: DropdownItem, decorators: [{
             type: Component,
             args: [{ selector: 'cax-dropdownItem', standalone: true, imports: [CommonModule, BlankIcon, CheckIcon], host: {
                         class: 'cax-element'
@@ -1454,10 +1454,10 @@ class Dropdown {
         this.onClear.emit(event);
         this.resetFilter();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.16", 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.16", 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: "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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: Dropdown, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", 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: {
                         class: 'cax-element cax-inputwrapper',
@@ -1666,11 +1666,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImpo
             }] } });
 
 class DropdownModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: DropdownModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.16", 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.16", ngImport: i0, type: DropdownModule, imports: [Dropdown, DropdownItem, OverlayModule, SharedModule, ScrollerModule, OverlayModule, SharedModule, ScrollerModule] });
+    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] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: DropdownModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: DropdownModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [Dropdown, DropdownItem, OverlayModule, SharedModule, ScrollerModule],

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

@@ -19,10 +19,10 @@ class DynamicDialogContent {
     constructor(viewContainerRef) {
         this.viewContainerRef = viewContainerRef;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: DynamicDialogContent, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.16", type: DynamicDialogContent, isStandalone: false, selector: "[pDynamicDialogContent]", host: { classAttribute: "cax-element" }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: DynamicDialogContent, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.17", type: DynamicDialogContent, isStandalone: false, selector: "[pDynamicDialogContent]", host: { classAttribute: "cax-element" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: DynamicDialogContent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: DynamicDialogContent, decorators: [{
             type: Directive,
             args: [{
                     selector: '[pDynamicDialogContent]',
@@ -841,8 +841,8 @@ class DynamicDialogComponent {
         }
         this.destroyStyle();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: DynamicDialogComponent, deps: [{ token: DOCUMENT }, { token: PLATFORM_ID }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: DynamicDialogConfig }, { token: DynamicDialogRef }, { token: i0.NgZone }, { token: i3.caxConfig }, { token: DynamicDialogComponent, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.16", type: DynamicDialogComponent, isStandalone: false, selector: "p-dynamicDialog", host: { classAttribute: "cax-element" }, viewQueries: [{ propertyName: "insertionPoint", first: true, predicate: DynamicDialogContent, descendants: true }, { propertyName: "maskViewChild", first: true, predicate: ["mask"], descendants: true }, { propertyName: "contentViewChild", first: true, predicate: ["content"], descendants: true }, { propertyName: "footerViewChild", first: true, predicate: ["footer"], descendants: true }, { propertyName: "headerViewChild", first: true, predicate: ["titlebar"], descendants: true }], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: DynamicDialogComponent, deps: [{ token: DOCUMENT }, { token: PLATFORM_ID }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: DynamicDialogConfig }, { token: DynamicDialogRef }, { token: i0.NgZone }, { token: i3.caxConfig }, { token: DynamicDialogComponent, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: DynamicDialogComponent, isStandalone: false, selector: "p-dynamicDialog", host: { classAttribute: "cax-element" }, viewQueries: [{ propertyName: "insertionPoint", first: true, predicate: DynamicDialogContent, descendants: true }, { propertyName: "maskViewChild", first: true, predicate: ["mask"], descendants: true }, { propertyName: "contentViewChild", first: true, predicate: ["content"], descendants: true }, { propertyName: "footerViewChild", first: true, predicate: ["footer"], descendants: true }, { propertyName: "headerViewChild", first: true, predicate: ["titlebar"], descendants: true }], ngImport: i0, template: `
         <div
             #mask
             [ngClass]="{
@@ -908,7 +908,7 @@ class DynamicDialogComponent {
         </div>
     `, isInline: true, styles: ["@layer cax{.cax-dialog-mask{position:fixed;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;pointer-events:none}.cax-dialog-mask.cax-component-overlay{pointer-events:auto}.cax-dialog{display:flex;flex-direction:column;pointer-events:auto;max-height:90%;transform:scale(1);position:relative}.cax-dialog-content{overflow-y:auto;flex-grow:1}.cax-dialog-header{display:flex;align-items:flex-start;justify-content:space-between;flex-shrink:0}.cax-dialog-draggable .cax-dialog-header{cursor:move}.cax-dialog-footer{display:flex;justify-content:flex-end;gap:8px;flex-shrink:0}.cax-button-container{display:inline-flex;align-items:center}.cax-dialog .cax-dialog-header-icons{display:flex;align-items:center}.cax-dialog .cax-dialog-header-icon{display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}.cax-fluid .cax-dialog-footer .cax-button{width:auto}.cax-dialog-top .cax-dialog,.cax-dialog-bottom .cax-dialog,.cax-dialog-left .cax-dialog,.cax-dialog-right .cax-dialog,.cax-dialog-top-left .cax-dialog,.cax-dialog-top-right .cax-dialog,.cax-dialog-bottom-left .cax-dialog,.cax-dialog-bottom-right .cax-dialog{margin:.75rem;transform:translateZ(0)}.cax-dialog-maximized{-webkit-transition:none;transition:none;transform:none;width:100vw!important;height:100vh!important;top:0!important;left:0!important;max-height:100%;height:100%}.cax-dialog-maximized .cax-dialog-content{flex-grow:1}.cax-dialog-left{justify-content:flex-start}.cax-dialog-right{justify-content:flex-end}.cax-dialog-top{align-items:flex-start}.cax-dialog-top-left{justify-content:flex-start;align-items:flex-start}.cax-dialog-top-right{justify-content:flex-end;align-items:flex-start}.cax-dialog-bottom{align-items:flex-end}.cax-dialog-bottom-left{justify-content:flex-start;align-items:flex-end}.cax-dialog-bottom-right{justify-content:flex-end;align-items:flex-end}.cax-dialog .cax-resizable-handle{position:absolute;font-size:.1px;display:block;cursor:se-resize;width:12px;height:12px;right:1px;bottom:1px}.cax-header-allign{display:flex;align-items:center}.cax-dialog-header-icon{font-size:1.25rem}.cax-confirm-dialog .cax-dialog-content{display:flex;align-items:center}.cax-dialog-content .cax-dialog-checkbox{display:block;margin-top:1rem}.cax-dialog-checkbox input[type=checkbox]{margin-right:.5rem}.cax-header-align{display:flex;align-items:center}.cax-dialog-title{margin-left:10px}}\n"], dependencies: [{ kind: "directive", type: i0.forwardRef(() => i4.NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(() => i4.NgComponentOutlet), selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: i0.forwardRef(() => i4.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(() => i4.NgStyle), selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i0.forwardRef(() => WindowMaximizeIcon), selector: "WindowMaximizeIcon" }, { kind: "component", type: i0.forwardRef(() => WindowMinimizeIcon), selector: "WindowMinimizeIcon" }, { kind: "component", type: i0.forwardRef(() => TimesIcon), selector: "TimesIcon" }, { kind: "directive", type: i0.forwardRef(() => i5.FocusTrap), selector: "[caxFocusTrap]", inputs: ["caxFocusTrapDisabled"] }, { kind: "directive", type: i0.forwardRef(() => DynamicDialogContent), selector: "[pDynamicDialogContent]" }], animations: [trigger('animation', [transition('void => visible', [useAnimation(showAnimation)]), transition('visible => void', [useAnimation(hideAnimation)])])], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: DynamicDialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: DynamicDialogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'p-dynamicDialog', template: `
         <div
@@ -1004,11 +1004,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImpo
                 args: ['titlebar']
             }] } });
 class DynamicDialogModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: DynamicDialogModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.16", ngImport: i0, type: DynamicDialogModule, declarations: [DynamicDialogComponent, DynamicDialogContent], imports: [CommonModule, WindowMaximizeIcon, WindowMinimizeIcon, TimesIcon, SharedModule, FocusTrapModule], exports: [SharedModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: DynamicDialogModule, imports: [CommonModule, WindowMaximizeIcon, WindowMinimizeIcon, TimesIcon, SharedModule, FocusTrapModule, SharedModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: DynamicDialogModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.17", ngImport: i0, type: DynamicDialogModule, declarations: [DynamicDialogComponent, DynamicDialogContent], imports: [CommonModule, WindowMaximizeIcon, WindowMinimizeIcon, TimesIcon, SharedModule, FocusTrapModule], exports: [SharedModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: DynamicDialogModule, imports: [CommonModule, WindowMaximizeIcon, WindowMinimizeIcon, TimesIcon, SharedModule, FocusTrapModule, SharedModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: DynamicDialogModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: DynamicDialogModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, WindowMaximizeIcon, WindowMinimizeIcon, TimesIcon, SharedModule, FocusTrapModule],
@@ -1116,10 +1116,10 @@ class DialogService {
         }
         return permission;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: DialogService, deps: [{ token: i0.ApplicationRef }, { token: i0.Injector }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: DialogService });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: DialogService, deps: [{ token: i0.ApplicationRef }, { token: i0.Injector }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: DialogService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: DialogService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: DialogService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: i0.ApplicationRef }, { type: i0.Injector }, { type: Document, decorators: [{
                     type: Inject,

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

@@ -237,10 +237,10 @@ class Editor {
             };
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: Editor, deps: [{ token: i0.ElementRef }, { token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.16", type: Editor, isStandalone: false, selector: "cax-editor", inputs: { style: "style", styleClass: "styleClass", placeholder: "placeholder", formats: "formats", modules: "modules", bounds: "bounds", scrollingContainer: "scrollingContainer", debug: "debug", readonly: "readonly" }, outputs: { onInit: "onInit", onTextChange: "onTextChange", onSelectionChange: "onSelectionChange" }, host: { classAttribute: "cax-element" }, providers: [EDITOR_VALUE_ACCESSOR], queries: [{ propertyName: "toolbar", first: true, predicate: Header, descendants: true }, { propertyName: "templates", predicate: CaxTemplate }], ngImport: i0, template: "<div [ngClass]=\"'cax-editor-container'\" [class]=\"styleClass\">\r\n    <div class=\"cax-editor-toolbar\" *ngIf=\"toolbar || headerTemplate\">\r\n        <ng-content select=\"cax-header\"></ng-content>\r\n        <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\r\n    </div>\r\n    <div class=\"cax-editor-toolbar\" *ngIf=\"!modules && !toolbar && !headerTemplate\">\r\n        <span class=\"ql-formats\">\r\n            <select class=\"ql-header\">\r\n                <option value=\"1\">Heading</option>\r\n                <option value=\"2\">Subheading</option>\r\n                <option selected>Normal</option>\r\n            </select>\r\n            <select class=\"ql-font\">\r\n                <option selected>Sans Serif</option>\r\n                <option value=\"serif\">Serif</option>\r\n                <option value=\"monospace\">Monospace</option>\r\n            </select>\r\n        </span>\r\n        <span class=\"ql-formats\">\r\n            <button class=\"ql-bold\" aria-label=\"Bold\" type=\"button\"></button>\r\n            <button class=\"ql-italic\" aria-label=\"Italic\" type=\"button\"></button>\r\n            <button class=\"ql-underline\" aria-label=\"Underline\" type=\"button\"></button>\r\n        </span>\r\n        <span class=\"ql-formats\">\r\n            <select class=\"ql-color\"></select>\r\n            <select class=\"ql-background\"></select>\r\n        </span>\r\n        <span class=\"ql-formats\">\r\n            <button class=\"ql-list\" value=\"ordered\" aria-label=\"Ordered List\" type=\"button\"></button>\r\n            <button class=\"ql-list\" value=\"bullet\" aria-label=\"Unordered List\" type=\"button\"></button>\r\n            <select class=\"ql-align\">\r\n                <option selected></option>\r\n                <option value=\"center\">center</option>\r\n                <option value=\"right\">right</option>\r\n                <option value=\"justify\">justify</option>\r\n            </select>\r\n        </span>\r\n        <span class=\"ql-formats\">\r\n            <button class=\"ql-link\" aria-label=\"Insert Link\" type=\"button\"></button>\r\n            <button class=\"ql-image\" aria-label=\"Insert Image\" type=\"button\"></button>\r\n            <button class=\"ql-code-block\" aria-label=\"Insert Code Block\" type=\"button\"></button>\r\n        </span>\r\n        <span class=\"ql-formats\">\r\n            <button class=\"ql-clean\" aria-label=\"Remove Styles\" type=\"button\"></button>\r\n        </span>\r\n    </div>\r\n    <div class=\"cax-editor-content\" [ngStyle]=\"style\"></div>\r\n</div>", styles: [".cax-editor-container .cax-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item{width:auto;height:auto}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: Editor, deps: [{ token: i0.ElementRef }, { token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: Editor, isStandalone: false, selector: "cax-editor", inputs: { style: "style", styleClass: "styleClass", placeholder: "placeholder", formats: "formats", modules: "modules", bounds: "bounds", scrollingContainer: "scrollingContainer", debug: "debug", readonly: "readonly" }, outputs: { onInit: "onInit", onTextChange: "onTextChange", onSelectionChange: "onSelectionChange" }, host: { classAttribute: "cax-element" }, providers: [EDITOR_VALUE_ACCESSOR], queries: [{ propertyName: "toolbar", first: true, predicate: Header, descendants: true }, { propertyName: "templates", predicate: CaxTemplate }], ngImport: i0, template: "<div [ngClass]=\"'cax-editor-container'\" [class]=\"styleClass\">\r\n    <div class=\"cax-editor-toolbar\" *ngIf=\"toolbar || headerTemplate\">\r\n        <ng-content select=\"cax-header\"></ng-content>\r\n        <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\r\n    </div>\r\n    <div class=\"cax-editor-toolbar\" *ngIf=\"!modules && !toolbar && !headerTemplate\">\r\n        <span class=\"ql-formats\">\r\n            <select class=\"ql-header\">\r\n                <option value=\"1\">Heading</option>\r\n                <option value=\"2\">Subheading</option>\r\n                <option selected>Normal</option>\r\n            </select>\r\n            <select class=\"ql-font\">\r\n                <option selected>Sans Serif</option>\r\n                <option value=\"serif\">Serif</option>\r\n                <option value=\"monospace\">Monospace</option>\r\n            </select>\r\n        </span>\r\n        <span class=\"ql-formats\">\r\n            <button class=\"ql-bold\" aria-label=\"Bold\" type=\"button\"></button>\r\n            <button class=\"ql-italic\" aria-label=\"Italic\" type=\"button\"></button>\r\n            <button class=\"ql-underline\" aria-label=\"Underline\" type=\"button\"></button>\r\n        </span>\r\n        <span class=\"ql-formats\">\r\n            <select class=\"ql-color\"></select>\r\n            <select class=\"ql-background\"></select>\r\n        </span>\r\n        <span class=\"ql-formats\">\r\n            <button class=\"ql-list\" value=\"ordered\" aria-label=\"Ordered List\" type=\"button\"></button>\r\n            <button class=\"ql-list\" value=\"bullet\" aria-label=\"Unordered List\" type=\"button\"></button>\r\n            <select class=\"ql-align\">\r\n                <option selected></option>\r\n                <option value=\"center\">center</option>\r\n                <option value=\"right\">right</option>\r\n                <option value=\"justify\">justify</option>\r\n            </select>\r\n        </span>\r\n        <span class=\"ql-formats\">\r\n            <button class=\"ql-link\" aria-label=\"Insert Link\" type=\"button\"></button>\r\n            <button class=\"ql-image\" aria-label=\"Insert Image\" type=\"button\"></button>\r\n            <button class=\"ql-code-block\" aria-label=\"Insert Code Block\" type=\"button\"></button>\r\n        </span>\r\n        <span class=\"ql-formats\">\r\n            <button class=\"ql-clean\" aria-label=\"Remove Styles\" type=\"button\"></button>\r\n        </span>\r\n    </div>\r\n    <div class=\"cax-editor-content\" [ngStyle]=\"style\"></div>\r\n</div>", styles: [".cax-editor-container .cax-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item{width:auto;height:auto}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: Editor, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: Editor, decorators: [{
             type: Component,
             args: [{ selector: 'cax-editor', providers: [EDITOR_VALUE_ACCESSOR], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: false, host: {
                         class: 'cax-element'
@@ -281,11 +281,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImpo
             }] } });
 
 class EditorModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: EditorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.16", ngImport: i0, type: EditorModule, declarations: [Editor], imports: [CommonModule, SharedModule], exports: [Editor, SharedModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: EditorModule, imports: [CommonModule, SharedModule, SharedModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EditorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.17", ngImport: i0, type: EditorModule, declarations: [Editor], imports: [CommonModule, SharedModule], exports: [Editor, SharedModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EditorModule, imports: [CommonModule, SharedModule, SharedModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: EditorModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EditorModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, SharedModule],