cax-design-system 2.8.4 → 2.8.5

package/README.md

@@ -1,6 +1,6 @@
 # Cax Design System
 
-You can access all the modules available in cax design system in the [storybook](https://673d43a5032fb6c56edd4107-brtdbxzhxe.chromatic.com/)
+You can access all the modules available in cax design system in the [storybook](https://673d43a5032fb6c56edd4107-dxipdbmqpt.chromatic.com/)
 
 ### Installation
 

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

@@ -211,8 +211,8 @@ class AccordionTab {
     ngOnDestroy() {
         this.accordion.tabs.splice(this.findTabIndex(), 1);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: AccordionTab, deps: [{ token: forwardRef(() => Accordion) }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.16", type: AccordionTab, isStandalone: false, selector: "cax-accordionTab", inputs: { extraLabel: "extraLabel", extraLabelStyle: "extraLabelStyle", id: "id", header: "header", headerStyle: "headerStyle", tabStyle: "tabStyle", contentStyle: "contentStyle", tabStyleClass: "tabStyleClass", headerStyleClass: "headerStyleClass", contentStyleClass: "contentStyleClass", disabled: ["disabled", "disabled", booleanAttribute], cache: ["cache", "cache", booleanAttribute], transitionOptions: "transitionOptions", iconPos: "iconPos", selected: "selected", accordionIconPosition: "accordionIconPosition", headerAriaLevel: ["headerAriaLevel", "headerAriaLevel", numberAttribute] }, outputs: { selectedChange: "selectedChange" }, host: { classAttribute: "cax-element" }, queries: [{ propertyName: "headerFacet", predicate: Header }, { propertyName: "templates", predicate: CaxTemplate }], ngImport: i0, template: "<div class=\"cax-accordion-tab\" [class.cax-accordion-tab-active]=\"selected\" [ngClass]=\"tabStyleClass\" [ngStyle]=\"tabStyle\" [attr.data-pc-name]=\"'accordiontab'\">\r\n    <div class=\"cax-accordion-header\" role=\"heading\" [attr.aria-level]=\"headerAriaLevel\" [class.cax-highlight]=\"selected\" [class.cax-disabled]=\"disabled\" [attr.data-cax-disabled]=\"disabled\" [attr.data-pc-section]=\"'header'\">\r\n        <a\r\n            [ngClass]=\"headerStyleClass\"\r\n            [ngStyle]=\"headerStyle\"\r\n            role=\"button\"\r\n            class=\"cax-accordion-header-link\"\r\n            (click)=\"toggle($event); $event.stopPropagation()\"\r\n            (keydown)=\"onKeydown($event)\"\r\n            [attr.tabindex]=\"disabled ? null : 0\"\r\n            [attr.id]=\"getTabHeaderActionId(id)\"\r\n            [attr.aria-controls]=\"getTabContentId(id)\"\r\n            [attr.aria-expanded]=\"selected\"\r\n            [attr.aria-disabled]=\"disabled\"\r\n            [attr.data-pc-section]=\"'headeraction'\"\r\n        >\r\n        \r\n        <span class=\"cax-accordion-icon\" *ngIf=\"accordionIconPosition === 'right'\">\r\n            <ng-container *ngIf=\"!iconTemplate\">\r\n                <ng-container *ngIf=\"selected\">\r\n                    <span *ngIf=\"accordion.collapseIcon\" [class]=\"accordion.collapseIcon\" [ngClass]=\"iconClass\" [attr.aria-hidden]=\"true\"></span>\r\n                    <ChevronUpIcon *ngIf=\"!accordion.collapseIcon\" [ngClass]=\"iconClass\" [attr.aria-hidden]=\"true\" />\r\n                </ng-container>\r\n                <ng-container *ngIf=\"!selected\">\r\n                    <span *ngIf=\"accordion.expandIcon\" [class]=\"accordion.expandIcon\" [ngClass]=\"iconClass\" [attr.aria-hidden]=\"true\"></span>\r\n                    <ChevronUpIcon *ngIf=\"!accordion.expandIcon\" [ngClass]=\"iconClass\" [attr.aria-hidden]=\"true\" />\r\n                </ng-container>\r\n            </ng-container>\r\n            <ng-template *ngTemplateOutlet=\"iconTemplate; context: { $implicit: selected }\"></ng-template>\r\n        </span>\r\n        <span class=\"extra-label\" *ngIf=\"extraLabel\" [ngStyle]=\"extraLabelStyle\" style=\"margin-left: auto; margin-right: 8px;\">\r\n            {{ extraLabel }}\r\n          </span>\r\n            <span class=\"cax-accordion-header-text\" *ngIf=\"!hasHeaderFacet\"> {{ header }} </span>\r\n            <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\r\n            <span class=\"cax-accordion-icon\" *ngIf=\"accordionIconPosition === 'left'\">\r\n                <ng-container *ngIf=\"!iconTemplate\">\r\n                    <ng-container *ngIf=\"selected\">\r\n                        <span *ngIf=\"accordion.collapseIcon\" [class]=\"accordion.collapseIcon\" [ngClass]=\"iconClass\" [attr.aria-hidden]=\"true\"></span>\r\n                        <ChevronUpIcon *ngIf=\"!accordion.collapseIcon\" [ngClass]=\"iconClass\" [attr.aria-hidden]=\"true\" />\r\n                    </ng-container>\r\n                    <ng-container *ngIf=\"!selected\">\r\n                        <span *ngIf=\"accordion.expandIcon\" [class]=\"accordion.expandIcon\" [ngClass]=\"iconClass\" [attr.aria-hidden]=\"true\"></span>\r\n                        <ChevronUpIcon *ngIf=\"!accordion.expandIcon\" [ngClass]=\"iconClass\" [attr.aria-hidden]=\"true\" />\r\n                    </ng-container>\r\n                </ng-container>\r\n                <ng-template *ngTemplateOutlet=\"iconTemplate; context: { $implicit: selected }\"></ng-template>\r\n            </span>\r\n            <ng-content select=\"cax-header\" *ngIf=\"hasHeaderFacet\"></ng-content>\r\n        </a>\r\n    </div>\r\n    <div\r\n        [attr.id]=\"getTabContentId(id)\"\r\n        class=\"cax-toggleable-content\"\r\n        [@tabContent]=\"selected ? { value: 'visible', params: { transitionParams: transitionOptions } } : { value: 'hidden', params: { transitionParams: transitionOptions } }\"\r\n        role=\"region\"\r\n        [attr.aria-hidden]=\"!selected\"\r\n        [attr.aria-labelledby]=\"getTabHeaderActionId(id)\"\r\n        [attr.data-pc-section]=\"'toggleablecontent'\"\r\n    >\r\n        <div class=\"cax-accordion-content\" [ngClass]=\"contentStyleClass\" [ngStyle]=\"contentStyle\">\r\n            <ng-content></ng-content>\r\n            <ng-container *ngIf=\"contentTemplate && (cache ? loaded : selected)\">\r\n                <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\r\n            </ng-container>\r\n        </div>\r\n    </div>\r\n</div>\r\n", styles: ["@layer cax{.cax-accordion-header-link{cursor:pointer;display:flex;align-items:center;-webkit-user-select:none;user-select:none;position:relative;text-decoration:none}.cax-accordion-icon{margin-right:8px;display:flex;align-items:center;width:18px;height:18px}.cax-accordion-header-link:focus{z-index:1}.cax-accordion-header-text{flex:1}.cax-accordion .cax-toggleable-content{overflow:hidden}.cax-accordion .cax-accordion-tab-active>.cax-toggleable-content:not(.ng-animating){overflow:inherit}.cax-accordion-toggle-icon-end{order:1;margin-left:auto}.cax-accordion-toggle-icon{order:0;width:16px;height:16px}}\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"] }, { kind: "component", type: i2.ChevronUpIcon, selector: "ChevronUpIcon" }], animations: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: AccordionTab, deps: [{ token: forwardRef(() => Accordion) }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.17", type: AccordionTab, isStandalone: false, selector: "cax-accordionTab", inputs: { extraLabel: "extraLabel", extraLabelStyle: "extraLabelStyle", id: "id", header: "header", headerStyle: "headerStyle", tabStyle: "tabStyle", contentStyle: "contentStyle", tabStyleClass: "tabStyleClass", headerStyleClass: "headerStyleClass", contentStyleClass: "contentStyleClass", disabled: ["disabled", "disabled", booleanAttribute], cache: ["cache", "cache", booleanAttribute], transitionOptions: "transitionOptions", iconPos: "iconPos", selected: "selected", accordionIconPosition: "accordionIconPosition", headerAriaLevel: ["headerAriaLevel", "headerAriaLevel", numberAttribute] }, outputs: { selectedChange: "selectedChange" }, host: { classAttribute: "cax-element" }, queries: [{ propertyName: "headerFacet", predicate: Header }, { propertyName: "templates", predicate: CaxTemplate }], ngImport: i0, template: "<div class=\"cax-accordion-tab\" [class.cax-accordion-tab-active]=\"selected\" [ngClass]=\"tabStyleClass\" [ngStyle]=\"tabStyle\" [attr.data-pc-name]=\"'accordiontab'\">\r\n    <div class=\"cax-accordion-header\" role=\"heading\" [attr.aria-level]=\"headerAriaLevel\" [class.cax-highlight]=\"selected\" [class.cax-disabled]=\"disabled\" [attr.data-cax-disabled]=\"disabled\" [attr.data-pc-section]=\"'header'\">\r\n        <a\r\n            [ngClass]=\"headerStyleClass\"\r\n            [ngStyle]=\"headerStyle\"\r\n            role=\"button\"\r\n            class=\"cax-accordion-header-link\"\r\n            (click)=\"toggle($event); $event.stopPropagation()\"\r\n            (keydown)=\"onKeydown($event)\"\r\n            [attr.tabindex]=\"disabled ? null : 0\"\r\n            [attr.id]=\"getTabHeaderActionId(id)\"\r\n            [attr.aria-controls]=\"getTabContentId(id)\"\r\n            [attr.aria-expanded]=\"selected\"\r\n            [attr.aria-disabled]=\"disabled\"\r\n            [attr.data-pc-section]=\"'headeraction'\"\r\n        >\r\n        \r\n        <span class=\"cax-accordion-icon\" *ngIf=\"accordionIconPosition === 'right'\">\r\n            <ng-container *ngIf=\"!iconTemplate\">\r\n                <ng-container *ngIf=\"selected\">\r\n                    <span *ngIf=\"accordion.collapseIcon\" [class]=\"accordion.collapseIcon\" [ngClass]=\"iconClass\" [attr.aria-hidden]=\"true\"></span>\r\n                    <ChevronUpIcon *ngIf=\"!accordion.collapseIcon\" [ngClass]=\"iconClass\" [attr.aria-hidden]=\"true\" />\r\n                </ng-container>\r\n                <ng-container *ngIf=\"!selected\">\r\n                    <span *ngIf=\"accordion.expandIcon\" [class]=\"accordion.expandIcon\" [ngClass]=\"iconClass\" [attr.aria-hidden]=\"true\"></span>\r\n                    <ChevronUpIcon *ngIf=\"!accordion.expandIcon\" [ngClass]=\"iconClass\" [attr.aria-hidden]=\"true\" />\r\n                </ng-container>\r\n            </ng-container>\r\n            <ng-template *ngTemplateOutlet=\"iconTemplate; context: { $implicit: selected }\"></ng-template>\r\n        </span>\r\n        <span class=\"extra-label\" *ngIf=\"extraLabel\" [ngStyle]=\"extraLabelStyle\" style=\"margin-left: auto; margin-right: 8px;\">\r\n            {{ extraLabel }}\r\n          </span>\r\n            <span class=\"cax-accordion-header-text\" *ngIf=\"!hasHeaderFacet\"> {{ header }} </span>\r\n            <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\r\n            <span class=\"cax-accordion-icon\" *ngIf=\"accordionIconPosition === 'left'\">\r\n                <ng-container *ngIf=\"!iconTemplate\">\r\n                    <ng-container *ngIf=\"selected\">\r\n                        <span *ngIf=\"accordion.collapseIcon\" [class]=\"accordion.collapseIcon\" [ngClass]=\"iconClass\" [attr.aria-hidden]=\"true\"></span>\r\n                        <ChevronUpIcon *ngIf=\"!accordion.collapseIcon\" [ngClass]=\"iconClass\" [attr.aria-hidden]=\"true\" />\r\n                    </ng-container>\r\n                    <ng-container *ngIf=\"!selected\">\r\n                        <span *ngIf=\"accordion.expandIcon\" [class]=\"accordion.expandIcon\" [ngClass]=\"iconClass\" [attr.aria-hidden]=\"true\"></span>\r\n                        <ChevronUpIcon *ngIf=\"!accordion.expandIcon\" [ngClass]=\"iconClass\" [attr.aria-hidden]=\"true\" />\r\n                    </ng-container>\r\n                </ng-container>\r\n                <ng-template *ngTemplateOutlet=\"iconTemplate; context: { $implicit: selected }\"></ng-template>\r\n            </span>\r\n            <ng-content select=\"cax-header\" *ngIf=\"hasHeaderFacet\"></ng-content>\r\n        </a>\r\n    </div>\r\n    <div\r\n        [attr.id]=\"getTabContentId(id)\"\r\n        class=\"cax-toggleable-content\"\r\n        [@tabContent]=\"selected ? { value: 'visible', params: { transitionParams: transitionOptions } } : { value: 'hidden', params: { transitionParams: transitionOptions } }\"\r\n        role=\"region\"\r\n        [attr.aria-hidden]=\"!selected\"\r\n        [attr.aria-labelledby]=\"getTabHeaderActionId(id)\"\r\n        [attr.data-pc-section]=\"'toggleablecontent'\"\r\n    >\r\n        <div class=\"cax-accordion-content\" [ngClass]=\"contentStyleClass\" [ngStyle]=\"contentStyle\">\r\n            <ng-content></ng-content>\r\n            <ng-container *ngIf=\"contentTemplate && (cache ? loaded : selected)\">\r\n                <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\r\n            </ng-container>\r\n        </div>\r\n    </div>\r\n</div>\r\n", styles: ["@layer cax{.cax-accordion-header-link{cursor:pointer;display:flex;align-items:center;-webkit-user-select:none;user-select:none;position:relative;text-decoration:none}.cax-accordion-icon{margin-right:8px;display:flex;align-items:center;width:18px;height:18px}.cax-accordion-header-link:focus{z-index:1}.cax-accordion-header-text{flex:1}.cax-accordion .cax-toggleable-content{overflow:hidden}.cax-accordion .cax-accordion-tab-active>.cax-toggleable-content:not(.ng-animating){overflow:inherit}.cax-accordion-toggle-icon-end{order:1;margin-left:auto}.cax-accordion-toggle-icon{order:0;width:16px;height:16px}}\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"] }, { kind: "component", type: i2.ChevronUpIcon, selector: "ChevronUpIcon" }], animations: [
             trigger('tabContent', [
                 state('hidden', style({
                     height: '0',
@@ -227,7 +227,7 @@ class AccordionTab {
             ])
         ], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: AccordionTab, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: AccordionTab, decorators: [{
             type: Component,
             args: [{ selector: 'cax-accordionTab', standalone: false, animations: [
                         trigger('tabContent', [
@@ -549,14 +549,14 @@ class Accordion {
             this.tabListSubscription.unsubscribe();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: Accordion, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.16", type: Accordion, isStandalone: false, selector: "cax-accordion", inputs: { multiple: ["multiple", "multiple", booleanAttribute], style: "style", styleClass: "styleClass", expandIcon: "expandIcon", collapseIcon: "collapseIcon", activeIndex: "activeIndex", selectOnFocus: ["selectOnFocus", "selectOnFocus", booleanAttribute], headerAriaLevel: "headerAriaLevel" }, outputs: { onClose: "onClose", onOpen: "onOpen", activeIndexChange: "activeIndexChange" }, host: { listeners: { "keydown": "onKeydown($event)" }, classAttribute: "cax-element" }, queries: [{ propertyName: "tabList", predicate: AccordionTab, descendants: true }], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: Accordion, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.17", type: Accordion, isStandalone: false, selector: "cax-accordion", inputs: { multiple: ["multiple", "multiple", booleanAttribute], style: "style", styleClass: "styleClass", expandIcon: "expandIcon", collapseIcon: "collapseIcon", activeIndex: "activeIndex", selectOnFocus: ["selectOnFocus", "selectOnFocus", booleanAttribute], headerAriaLevel: "headerAriaLevel" }, outputs: { onClose: "onClose", onOpen: "onOpen", activeIndexChange: "activeIndexChange" }, host: { listeners: { "keydown": "onKeydown($event)" }, classAttribute: "cax-element" }, queries: [{ propertyName: "tabList", predicate: AccordionTab, descendants: true }], ngImport: i0, template: `
         <div [ngClass]="'cax-accordion cax-component'" [ngStyle]="style" [class]="styleClass">
             <ng-content></ng-content>
         </div>
     `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: Accordion, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: Accordion, decorators: [{
             type: Component,
             args: [{
                     selector: 'cax-accordion',
@@ -604,11 +604,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImpo
             }] } });
 
 class AccordionModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: AccordionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.16", ngImport: i0, type: AccordionModule, declarations: [Accordion, AccordionTab], imports: [CommonModule, ChevronRightIcon, ChevronDownIcon, ChevronLeftIcon, ChevronUpIcon], exports: [Accordion, AccordionTab, SharedModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: AccordionModule, imports: [CommonModule, ChevronRightIcon, ChevronDownIcon, ChevronLeftIcon, ChevronUpIcon, SharedModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: AccordionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.17", ngImport: i0, type: AccordionModule, declarations: [Accordion, AccordionTab], imports: [CommonModule, ChevronRightIcon, ChevronDownIcon, ChevronLeftIcon, ChevronUpIcon], exports: [Accordion, AccordionTab, SharedModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: AccordionModule, imports: [CommonModule, ChevronRightIcon, ChevronDownIcon, ChevronLeftIcon, ChevronUpIcon, SharedModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: AccordionModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: AccordionModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, ChevronRightIcon, ChevronDownIcon, ChevronLeftIcon, ChevronUpIcon],

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

@@ -70,10 +70,10 @@ class Animate {
         this.unbindIntersectionObserver();
         clearTimeout(this.timeout);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: Animate, deps: [{ token: i0.ElementRef }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.16", type: Animate, isStandalone: false, selector: "[pAnimate]", inputs: { enterClass: "enterClass", leaveClass: "leaveClass" }, host: { properties: { "class.p-animate": "true" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: Animate, deps: [{ token: i0.ElementRef }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.17", type: Animate, isStandalone: false, selector: "[pAnimate]", inputs: { enterClass: "enterClass", leaveClass: "leaveClass" }, host: { properties: { "class.p-animate": "true" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: Animate, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: Animate, decorators: [{
             type: Directive,
             args: [{
                     selector: '[pAnimate]',
@@ -88,11 +88,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImpo
                 type: Input
             }] } });
 class AnimateModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: AnimateModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.16", ngImport: i0, type: AnimateModule, declarations: [Animate], imports: [CommonModule], exports: [Animate] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: AnimateModule, imports: [CommonModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: AnimateModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.17", ngImport: i0, type: AnimateModule, declarations: [Animate], imports: [CommonModule], exports: [Animate] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: AnimateModule, imports: [CommonModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: AnimateModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: AnimateModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule],

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

@@ -138,10 +138,10 @@ class AnimateOnScroll {
         this.unbindAnimationEvents();
         this.unbindIntersectionObserver();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: AnimateOnScroll, deps: [{ token: DOCUMENT }, { token: PLATFORM_ID }, { token: i0.ElementRef }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.2.16", type: AnimateOnScroll, isStandalone: false, selector: "[pAnimateOnScroll]", inputs: { enterClass: "enterClass", leaveClass: "leaveClass", root: "root", rootMargin: "rootMargin", threshold: ["threshold", "threshold", numberAttribute], once: ["once", "once", booleanAttribute] }, host: { properties: { "class.p-animateonscroll": "true" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: AnimateOnScroll, deps: [{ token: DOCUMENT }, { token: PLATFORM_ID }, { token: i0.ElementRef }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.2.17", type: AnimateOnScroll, isStandalone: false, selector: "[pAnimateOnScroll]", inputs: { enterClass: "enterClass", leaveClass: "leaveClass", root: "root", rootMargin: "rootMargin", threshold: ["threshold", "threshold", numberAttribute], once: ["once", "once", booleanAttribute] }, host: { properties: { "class.p-animateonscroll": "true" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: AnimateOnScroll, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: AnimateOnScroll, decorators: [{
             type: Directive,
             args: [{
                     selector: '[pAnimateOnScroll]',
@@ -172,11 +172,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImpo
                 args: [{ transform: booleanAttribute }]
             }] } });
 class AnimateOnScrollModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: AnimateOnScrollModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.16", ngImport: i0, type: AnimateOnScrollModule, declarations: [AnimateOnScroll], imports: [CommonModule], exports: [AnimateOnScroll] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: AnimateOnScrollModule, imports: [CommonModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: AnimateOnScrollModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.17", ngImport: i0, type: AnimateOnScrollModule, declarations: [AnimateOnScroll], imports: [CommonModule], exports: [AnimateOnScroll] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: AnimateOnScrollModule, imports: [CommonModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: AnimateOnScrollModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: AnimateOnScrollModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule],

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

@@ -46,10 +46,10 @@ class ConfirmationService {
     onAccept() {
         this.acceptConfirmationSource.next(null);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: ConfirmationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: ConfirmationService });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ConfirmationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ConfirmationService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: ConfirmationService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ConfirmationService, decorators: [{
             type: Injectable
         }] });
 
@@ -65,10 +65,10 @@ class ContextMenuService {
         this.activeItemKey = null;
         this.activeItemKeyChange.next(this.activeItemKey);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: ContextMenuService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: ContextMenuService });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ContextMenuService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ContextMenuService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: ContextMenuService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ContextMenuService, decorators: [{
             type: Injectable
         }] });
 
@@ -314,10 +314,10 @@ class FilterService {
     register(rule, fn) {
         this.filters[rule] = fn;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: FilterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: FilterService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: FilterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: FilterService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: FilterService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: FilterService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -359,10 +359,10 @@ class MessageService {
     clear(key) {
         this.clearSource.next(key || null);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: MessageService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: MessageService });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: MessageService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: MessageService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: MessageService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: MessageService, decorators: [{
             type: Injectable
         }] });
 
@@ -374,10 +374,10 @@ class OverlayService {
             this.clickSource.next(event);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: OverlayService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: OverlayService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: OverlayService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: OverlayService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: OverlayService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: OverlayService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -847,19 +847,19 @@ class caxConfig {
         this.translation = { ...this.translation, ...value };
         this.translationSource.next(this.translation);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: caxConfig, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: caxConfig, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: caxConfig, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: caxConfig, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: caxConfig, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: caxConfig, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
 
 class Header {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: Header, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.16", type: Header, isStandalone: true, selector: "cax-header", ngImport: i0, template: '<ng-content></ng-content>', isInline: true });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: Header, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: Header, isStandalone: true, selector: "cax-header", ngImport: i0, template: '<ng-content></ng-content>', isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: Header, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: Header, decorators: [{
             type: Component,
             args: [{
                     selector: 'cax-header',
@@ -868,10 +868,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImpo
                 }]
         }] });
 class Footer {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: Footer, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.16", type: Footer, isStandalone: true, selector: "cax-footer", ngImport: i0, template: '<ng-content></ng-content>', isInline: true });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: Footer, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: Footer, isStandalone: true, selector: "cax-footer", ngImport: i0, template: '<ng-content></ng-content>', isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: Footer, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: Footer, decorators: [{
             type: Component,
             args: [{
                     selector: 'cax-footer',
@@ -889,10 +889,10 @@ class CaxTemplate {
     getType() {
         return this.name;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: CaxTemplate, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.16", type: CaxTemplate, isStandalone: true, selector: "[caxTemplate]", inputs: { type: "type", name: ["caxTemplate", "name"] }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: CaxTemplate, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.17", type: CaxTemplate, isStandalone: true, selector: "[caxTemplate]", inputs: { type: "type", name: ["caxTemplate", "name"] }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: CaxTemplate, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: CaxTemplate, decorators: [{
             type: Directive,
             args: [{
                     selector: '[caxTemplate]',
@@ -906,11 +906,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImpo
                 args: ['caxTemplate']
             }] } });
 class SharedModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: SharedModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.16", ngImport: i0, type: SharedModule, imports: [Header, Footer, CaxTemplate], exports: [Header, Footer, CaxTemplate] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: SharedModule });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SharedModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.17", ngImport: i0, type: SharedModule, imports: [Header, Footer, CaxTemplate], exports: [Header, Footer, CaxTemplate] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SharedModule });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: SharedModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SharedModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [Header, Footer, CaxTemplate],
@@ -980,10 +980,10 @@ class TreeDragDropService {
     stopDrag(event) {
         this.dragStopSource.next(event);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: TreeDragDropService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: TreeDragDropService });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TreeDragDropService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TreeDragDropService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: TreeDragDropService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TreeDragDropService, decorators: [{
             type: Injectable
         }] });
 
@@ -1087,10 +1087,10 @@ class ThemeGeneratorService {
             .padStart(2, '0');
         return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: ThemeGeneratorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: ThemeGeneratorService });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ThemeGeneratorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ThemeGeneratorService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: ThemeGeneratorService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ThemeGeneratorService, decorators: [{
             type: Injectable
         }] });
 

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

@@ -1251,10 +1251,10 @@ class AutoComplete {
             this.scrollHandler = null;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: AutoComplete, deps: [{ token: DOCUMENT }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i1.caxConfig }, { token: i1.OverlayService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.16", type: AutoComplete, isStandalone: false, selector: "cax-autoComplete", inputs: { minLength: ["minLength", "minLength", numberAttribute], size: "size", delay: ["delay", "delay", numberAttribute], style: "style", panelStyle: "panelStyle", styleClass: "styleClass", panelStyleClass: "panelStyleClass", inputStyle: "inputStyle", inputId: "inputId", inputStyleClass: "inputStyleClass", placeholder: "placeholder", readonly: ["readonly", "readonly", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], scrollHeight: "scrollHeight", lazy: ["lazy", "lazy", booleanAttribute], virtualScroll: ["virtualScroll", "virtualScroll", booleanAttribute], virtualScrollItemSize: ["virtualScrollItemSize", "virtualScrollItemSize", numberAttribute], virtualScrollOptions: "virtualScrollOptions", maxlength: ["maxlength", "maxlength", (value) => numberAttribute(value, null)], name: "name", required: ["required", "required", booleanAttribute], appendTo: "appendTo", autoHighlight: ["autoHighlight", "autoHighlight", booleanAttribute], forceSelection: ["forceSelection", "forceSelection", booleanAttribute], type: "type", autoZIndex: ["autoZIndex", "autoZIndex", booleanAttribute], baseZIndex: ["baseZIndex", "baseZIndex", numberAttribute], ariaLabel: "ariaLabel", dropdownAriaLabel: "dropdownAriaLabel", ariaLabelledBy: "ariaLabelledBy", dropdownIcon: "dropdownIcon", unique: ["unique", "unique", booleanAttribute], group: ["group", "group", booleanAttribute], completeOnFocus: ["completeOnFocus", "completeOnFocus", booleanAttribute], showClear: ["showClear", "showClear", booleanAttribute], field: "field", dropdown: ["dropdown", "dropdown", booleanAttribute], showEmptyMessage: ["showEmptyMessage", "showEmptyMessage", booleanAttribute], dropdownMode: "dropdownMode", multiple: ["multiple", "multiple", booleanAttribute], tabindex: ["tabindex", "tabindex", numberAttribute], dataKey: "dataKey", emptyMessage: "emptyMessage", showTransitionOptions: "showTransitionOptions", hideTransitionOptions: "hideTransitionOptions", autofocus: ["autofocus", "autofocus", booleanAttribute], autocomplete: "autocomplete", optionGroupChildren: "optionGroupChildren", optionGroupLabel: "optionGroupLabel", overlayOptions: "overlayOptions", suggestions: "suggestions", itemSize: "itemSize", optionLabel: "optionLabel", optionValue: "optionValue", id: "id", searchMessage: "searchMessage", emptySelectionMessage: "emptySelectionMessage", selectionMessage: "selectionMessage", autoOptionFocus: ["autoOptionFocus", "autoOptionFocus", booleanAttribute], selectOnFocus: ["selectOnFocus", "selectOnFocus", booleanAttribute], searchLocale: ["searchLocale", "searchLocale", booleanAttribute], optionDisabled: "optionDisabled", focusOnHover: ["focusOnHover", "focusOnHover", booleanAttribute], variant: "variant", isloading: "isloading" }, outputs: { completeMethod: "completeMethod", onSelect: "onSelect", onUnselect: "onUnselect", onFocus: "onFocus", onBlur: "onBlur", onDropdownClick: "onDropdownClick", onClear: "onClear", onKeyUp: "onKeyUp", onShow: "onShow", onHide: "onHide", onLazyLoad: "onLazyLoad" }, host: { properties: { "class.cax-inputwrapper-filled": "filled", "class.cax-inputwrapper-focus": "((focused && !disabled) || autofocus) || overlayVisible", "class.cax-autocomplete-clearable": "showClear && !disabled" }, classAttribute: "cax-element cax-inputwrapper" }, providers: [AUTOCOMPLETE_VALUE_ACCESSOR], queries: [{ propertyName: "templates", predicate: CaxTemplate }], viewQueries: [{ propertyName: "containerEL", first: true, predicate: ["container"], descendants: true }, { propertyName: "inputEL", first: true, predicate: ["focusInput"], descendants: true }, { propertyName: "multiInputEl", first: true, predicate: ["multiIn"], descendants: true }, { propertyName: "multiContainerEL", first: true, predicate: ["multiContainer"], descendants: true }, { propertyName: "dropdownButton", first: true, predicate: ["ddBtn"], 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 }], ngImport: i0, template: "<div #container [ngClass]=\"containerClass\"   [ngStyle]=\"style\" [class]=\"styleClass\" (click)=\"onContainerClick($event)\">\r\n    <input\r\n        *ngIf=\"!multiple\"\r\n        #focusInput\r\n        caxAutoFocus\r\n        [autofocus]=\"autofocus\"\r\n        [ngClass]=\"inputClass\"\r\n        [ngStyle]=\"inputStyle\"\r\n        [class]=\"inputStyleClass\"\r\n        [type]=\"type\"\r\n        [attr.value]=\"inputValue()\"\r\n        [attr.id]=\"inputId\"\r\n        [autocomplete]=\"autocomplete\"\r\n        [required]=\"required\"\r\n        [name]=\"name\"\r\n        aria-autocomplete=\"list\"\r\n        role=\"combobox\"\r\n        [attr.placeholder]=\"placeholder\"\r\n        [attr.size]=\"size\"\r\n        [attr.maxlength]=\"maxlength\"\r\n        [tabindex]=\"!disabled ? tabindex : -1\"\r\n        [readonly]=\"readonly\"\r\n        [disabled]=\"disabled\"\r\n        [attr.aria-label]=\"ariaLabel\"\r\n        [attr.aria-labelledby]=\"ariaLabelledBy\"\r\n        [attr.aria-required]=\"required\"\r\n        [attr.aria-expanded]=\"overlayVisible ?? false\"\r\n        [attr.aria-controls]=\"overlayVisible ? id + '_list' : null\"\r\n        [attr.aria-activedescendant]=\"focused ? focusedOptionId : undefined\"\r\n        (input)=\"onInput($event)\"\r\n        (keydown)=\"onKeyDown($event)\"\r\n        (change)=\"onInputChange($event)\"\r\n        (focus)=\"onInputFocus($event)\"\r\n        (blur)=\"onInputBlur($event)\"\r\n        (paste)=\"onInputPaste($event)\"\r\n        (keyup)=\"onInputKeyUp($event)\"\r\n    />  \r\n    <SearchIcon  [styleClass]=\"'cax-autocomplete-search-icon'\"  />\r\n\r\n    \r\n    <ng-container *ngIf=\"isVisibleClearIcon\">\r\n        <TimesCircleIcon  *ngIf=\"!clearIconTemplate\" [styleClass]=\"'cax-autocomplete-clear-icon cax-autoComplete-clear'\" (click)=\"clear()\" [attr.aria-hidden]=\"true\" />\r\n        <span *ngIf=\"clearIconTemplate\" class=\"cax-autocomplete-clear-icon\" (click)=\"clear()\" [attr.aria-hidden]=\"true\">\r\n            <ng-template *ngTemplateOutlet=\"clearIconTemplate\"></ng-template>\r\n        </span>\r\n    </ng-container>\r\n\r\n    <ul\r\n        *ngIf=\"multiple\"\r\n        #multiContainer\r\n        [ngClass]=\"multiContainerClass\"\r\n        [tabindex]=\"-1\"\r\n        role=\"listbox\"\r\n        [attr.aria-orientation]=\"'horizontal'\"\r\n        [attr.aria-activedescendant]=\"focused ? focusedMultipleOptionId : undefined\"\r\n        (focus)=\"onMultipleContainerFocus($event)\"\r\n        (blur)=\"onMultipleContainerBlur($event)\"\r\n        (keydown)=\"onMultipleContainerKeyDown($event)\"\r\n    >\r\n        <li\r\n            #token\r\n            *ngFor=\"let option of modelValue(); let i = index\"\r\n            [ngClass]=\"{ 'cax-autocomplete-token': true, 'cax-focus': focusedMultipleOptionIndex() === i }\"\r\n            [attr.id]=\"id + '_multiple_option_' + i\"\r\n            role=\"option\"\r\n            [attr.aria-label]=\"getOptionLabel(option)\"\r\n            [attr.aria-setsize]=\"modelValue().length\"\r\n            [attr.aria-posinset]=\"i + 1\"\r\n            [attr.aria-selected]=\"true\"\r\n        >\r\n            <ng-container *ngTemplateOutlet=\"selectedItemTemplate; context: { $implicit: option }\"></ng-container>\r\n            <span *ngIf=\"!selectedItemTemplate\" class=\"cax-autocomplete-token-label\">{{ getMultipleLabel(option) }}</span>\r\n            <span class=\"cax-autocomplete-token-icon\" (click)=\"!readonly ? removeOption($event, i) : ''\">\r\n                <TimesCircleIcon [styleClass]=\"'cax-autocomplete-token-icon'\" *ngIf=\"!removeIconTemplate\" [attr.aria-hidden]=\"true\" />\r\n                <span *ngIf=\"removeIconTemplate\" class=\"cax-autocomplete-token-icon\" [attr.aria-hidden]=\"true\">\r\n                    <ng-template *ngTemplateOutlet=\"removeIconTemplate\"></ng-template>\r\n                </span>\r\n            </span>\r\n        </li>\r\n        <li class=\"cax-autocomplete-input-token\" role=\"option\">\r\n            <input\r\n                #focusInput\r\n                caxAutoFocus\r\n                [autofocus]=\"autofocus\"\r\n                [ngClass]=\"inputClass\"\r\n                [ngStyle]=\"inputStyle\"\r\n                [class]=\"inputStyleClass\"\r\n                [attr.type]=\"type\"\r\n                [attr.id]=\"inputId\"\r\n                [autocomplete]=\"autocomplete\"\r\n                [required]=\"required\"\r\n                [attr.name]=\"name\"\r\n                role=\"combobox\"\r\n                [attr.placeholder]=\"!filled ? placeholder : null\"\r\n                [attr.size]=\"size\"\r\n                aria-autocomplete=\"list\"\r\n                [attr.maxlength]=\"maxlength\"\r\n                [tabindex]=\"!disabled ? tabindex : -1\"\r\n                [readonly]=\"readonly\"\r\n                [disabled]=\"disabled\"\r\n                [attr.aria-label]=\"ariaLabel\"\r\n                [attr.aria-labelledby]=\"ariaLabelledBy\"\r\n                [attr.aria-required]=\"required\"\r\n                [attr.aria-expanded]=\"overlayVisible ?? false\"\r\n                [attr.aria-controls]=\"overlayVisible ? id + '_list' : null\"\r\n                [attr.aria-activedescendant]=\"focused ? focusedOptionId : undefined\"\r\n                (input)=\"onInput($event)\"\r\n                (keydown)=\"onKeyDown($event)\"\r\n                (change)=\"onInputChange($event)\"\r\n                (focus)=\"onInputFocus($event)\"\r\n                (blur)=\"onInputBlur($event)\"\r\n                (paste)=\"onInputPaste($event)\"\r\n                (keyup)=\"onInputKeyUp($event)\"\r\n            />\r\n        </li>\r\n    </ul>\r\n    <ng-container *ngIf=\"loading\">\r\n        <SpinnerIcon *ngIf=\"!loadingIconTemplate\" [styleClass]=\"'cax-autocomplete-loader'\" [spin]=\"true\" [attr.aria-hidden]=\"true\" />\r\n        <span *ngIf=\"loadingIconTemplate\" class=\"cax-autocomplete-loader pi-spin \" [attr.aria-hidden]=\"true\">\r\n            <ng-template *ngTemplateOutlet=\"loadingIconTemplate\"></ng-template>\r\n        </span>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"isloading\">\r\n        <SpinnerIcon *ngIf=\"!loadingIconTemplate\" [styleClass]=\"'cax-autocomplete-loader'\" [spin]=\"true\" [attr.aria-hidden]=\"true\" />\r\n        <span *ngIf=\"loadingIconTemplate\" class=\"cax-autocomplete-loader pi-spin \" [attr.aria-hidden]=\"true\">\r\n            <ng-template *ngTemplateOutlet=\"loadingIconTemplate\"></ng-template>\r\n        </span>\r\n    </ng-container>\r\n    <button #ddBtn type=\"button\" caxButton [attr.aria-label]=\"dropdownAriaLabel\" class=\"cax-autocomplete-dropdown cax-button-icon-only\" [disabled]=\"disabled\" caxRipple (click)=\"handleDropdownClick($event)\" *ngIf=\"dropdown\" [attr.tabindex]=\"tabindex\">\r\n        <span *ngIf=\"dropdownIcon\" [ngClass]=\"dropdownIcon\" [attr.aria-hidden]=\"true\"></span>\r\n        <ng-container *ngIf=\"!dropdownIcon\">\r\n            <ChevronDownIcon *ngIf=\"!dropdownIconTemplate\" />\r\n            <ng-template *ngTemplateOutlet=\"dropdownIconTemplate\"></ng-template>\r\n        </ng-container>\r\n    </button>\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        [showTransitionOptions]=\"showTransitionOptions\"\r\n        [hideTransitionOptions]=\"hideTransitionOptions\"\r\n        (onAnimationStart)=\"onOverlayAnimationStart($event)\"\r\n        (onHide)=\"hide()\"\r\n    >\r\n        <div [ngClass]=\"panelClass\" [ngStyle]=\"panelStyles\" [class]=\"panelStyleClass\">\r\n            <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\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 class=\"cax-autocomplete-items\" [ngClass]=\"scrollerOptions.contentStyleClass\" [style]=\"scrollerOptions.contentStyle\" role=\"listbox\" [attr.id]=\"id + '_list'\" [attr.aria-label]=\"listLabel\">\r\n                    <ng-template ngFor let-option [ngForOf]=\"items\" let-i=\"index\">\r\n                        <ng-container *ngIf=\"isOptionGroup(option)\">\r\n                            <li [attr.id]=\"id + '_' + getOptionIndex(i, scrollerOptions)\" class=\"cax-autocomplete-item-group\" [ngStyle]=\"{ height: scrollerOptions.itemSize + 'px' }\" role=\"option\">\r\n                                <span *ngIf=\"!groupTemplate\">{{ getOptionGroupLabel(option.optionGroup) }}</span>\r\n                                <ng-container *ngTemplateOutlet=\"groupTemplate; context: { $implicit: option.optionGroup }\"></ng-container>\r\n                            </li>\r\n                        </ng-container>\r\n                        <ng-container *ngIf=\"!isOptionGroup(option)\">\r\n                            <li\r\n                                class=\"cax-autocomplete-item\"\r\n                                caxRipple\r\n                                [ngStyle]=\"{ height: scrollerOptions.itemSize + 'px' }\"\r\n                                [ngClass]=\"{ 'cax-highlight': isSelected(option), 'cax-focus': focusedOptionIndex() === getOptionIndex(i, scrollerOptions), 'cax-disabled': isOptionDisabled(option) }\"\r\n                                [attr.id]=\"id + '_' + getOptionIndex(i, scrollerOptions)\"\r\n                                role=\"option\"\r\n                                [attr.aria-label]=\"getOptionLabel(option)\"\r\n                                [attr.aria-selected]=\"isSelected(option)\"\r\n                                [attr.aria-disabled]=\"isOptionDisabled(option)\"\r\n                                [attr.data-p-focused]=\"focusedOptionIndex() === getOptionIndex(i, scrollerOptions)\"\r\n                                [attr.aria-setsize]=\"ariaSetSize\"\r\n                                [attr.aria-posinset]=\"getAriaPosInset(getOptionIndex(i, scrollerOptions))\"\r\n                                (click)=\"onOptionSelect($event, option)\"\r\n                                (mouseenter)=\"onOptionMouseEnter($event, getOptionIndex(i, scrollerOptions))\"\r\n                            >\r\n                                <span *ngIf=\"!itemTemplate\">{{ getOptionLabel(option) }}</span>\r\n                                <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: option, index: scrollerOptions.getOptions ? scrollerOptions.getOptions(i) : i }\"></ng-container>\r\n                            </li>\r\n                        </ng-container>\r\n                    </ng-template>\r\n                    <li *ngIf=\"!items || (items && items.length === 0 && showEmptyMessage)\" class=\"cax-autocomplete-empty-message\" [ngStyle]=\"{ height: scrollerOptions.itemSize + 'px' }\" role=\"option\">\r\n                        <ng-container *ngIf=\"!emptyTemplate; else empty\">\r\n                            {{ searchResultMessageText }}\r\n                        </ng-container>\r\n                        <ng-container #empty *ngTemplateOutlet=\"emptyTemplate\"></ng-container>\r\n                    </li>\r\n                </ul>\r\n            </ng-template>\r\n            <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\r\n        </div>\r\n        <!-- <span role=\"status\" aria-live=\"polite\" class=\"p-hidden-accessible\">\r\n            {{ selectedMessageText }}\r\n        </span> -->\r\n    </cax-overlay>\r\n</div>\r\n", styles: ["@layer cax{.cax-autocomplete{display:flex;position:relative;height:40px}.cax-autocomplete-loader{position:absolute;top:50%;margin-top:-.5rem;right:7px}.cax-autocomplete-dd .cax-autocomplete-input{flex:1 1 auto;width:1%;padding-left:3rem}.cax-autocomplete-dd .cax-autocomplete-input,.cax-autocomplete-dd .cax-autocomplete-multiple-container{border-top-right-radius:0;border-bottom-right-radius:0}.cax-autocomplete-dd .cax-autocomplete-dropdown{border-top-left-radius:0;border-bottom-left-radius:0}.cax-autocomplete-panel{overflow:auto}.cax-autocomplete-items{margin:0;padding:0;list-style-type:none}.cax-autocomplete-item{cursor:pointer;white-space:nowrap;position:relative;overflow:hidden}.cax-autocomplete-multiple-container{margin:0;padding:0;list-style-type:none;cursor:text;overflow:hidden;display:flex;align-items:center;flex-wrap:wrap}.cax-autocomplete-token{width:fit-content;cursor:default;display:inline-flex;align-items:center;flex:0 0 auto}.cax-autocomplete-token-icon{display:flex;cursor:pointer}.cax-autocomplete-input-token{flex:1 1 auto;display:inline-flex}.cax-autocomplete-input-token input{border:0 none;outline:0 none;background-color:transparent;margin:0;padding:0;box-shadow:none;border-radius:0;width:100%}.cax-fluid .cax-autocomplete{display:flex}.cax-fluid .cax-autocomplete-dd .cax-autocomplete-input{width:1%}.cax-autocomplete-clear-icon{position:absolute;top:50%;margin-top:-.5rem;cursor:pointer;right:10px}.cax-autocomplete-search-icon{position:absolute;top:50%;margin-top:-.5rem;cursor:pointer;left:9px}.cax-autocomplete-sm{height:32px!important}.cax-autocomplete-sm .cax-inputtext{font-size:12px!important}.cax-autocomplete-sm .cax-autocomplete-clear-icon,.cax-autocomplete-sm .cax-autocomplete-search-icon{width:12px!important;height:12px!important;margin-top:-.3rem}.cax-autocomplete-md{height:40px!important}.cax-autocomplete-md .cax-inputtext{font-size:16px!important}.cax-autocomplete-md .cax-autocomplete-clear-icon,.cax-autocomplete-md .cax-autocomplete-search-icon{width:16px!important;height:16px!important}.cax-autocomplete-md .cax-inputtext{padding-left:2rem!important;padding-right:2rem!important}.cax-autocomplete-md .cax-autocomplete-loader{width:16px!important;height:16px!important}.cax-autocomplete-lg{height:48px!important}.cax-autocomplete-lg .cax-inputtext{font-size:18px!important}.cax-autocomplete-lg .cax-autocomplete-clear-icon,.cax-autocomplete-lg .cax-autocomplete-search-icon,.cax-autocomplete-lg .cax-autocomplete-loader{width:18px!important;height:18px!important;margin-top:-.6rem}.cax-autocomplete-lg .cax-inputtext{padding-left:2.4rem!important;padding-right:2.4rem!important}}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: 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: "directive", type: i4.ButtonDirective, selector: "[caxButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "link"] }, { kind: "directive", type: i5.Ripple, selector: "[caxRipple]" }, { kind: "component", type: i6.Scroller, selector: "cax-scroller", inputs: ["id", "style", "styleClass", "tabindex", "items", "itemSize", "scrollHeight", "scrollWidth", "orientation", "step", "delay", "resizeDelay", "appendOnly", "inline", "lazy", "disabled", "loaderDisabled", "columns", "showSpacer", "showLoader", "numToleratedItems", "loading", "autoSize", "trackBy", "options"], outputs: ["onLazyLoad", "onScroll", "onScrollIndexChange"] }, { kind: "directive", type: i7.AutoFocus, selector: "[caxAutoFocus]", inputs: ["autofocus"] }, { kind: "component", type: i8.TimesCircleIcon, selector: "TimesCircleIcon" }, { kind: "component", type: i9.SpinnerIcon, selector: "SpinnerIcon" }, { kind: "component", type: i10.ChevronDownIcon, selector: "ChevronDownIcon" }, { kind: "component", type: i11.SearchIcon, selector: "SearchIcon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: AutoComplete, deps: [{ token: DOCUMENT }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i1.caxConfig }, { token: i1.OverlayService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.17", type: AutoComplete, isStandalone: false, selector: "cax-autoComplete", inputs: { minLength: ["minLength", "minLength", numberAttribute], size: "size", delay: ["delay", "delay", numberAttribute], style: "style", panelStyle: "panelStyle", styleClass: "styleClass", panelStyleClass: "panelStyleClass", inputStyle: "inputStyle", inputId: "inputId", inputStyleClass: "inputStyleClass", placeholder: "placeholder", readonly: ["readonly", "readonly", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], scrollHeight: "scrollHeight", lazy: ["lazy", "lazy", booleanAttribute], virtualScroll: ["virtualScroll", "virtualScroll", booleanAttribute], virtualScrollItemSize: ["virtualScrollItemSize", "virtualScrollItemSize", numberAttribute], virtualScrollOptions: "virtualScrollOptions", maxlength: ["maxlength", "maxlength", (value) => numberAttribute(value, null)], name: "name", required: ["required", "required", booleanAttribute], appendTo: "appendTo", autoHighlight: ["autoHighlight", "autoHighlight", booleanAttribute], forceSelection: ["forceSelection", "forceSelection", booleanAttribute], type: "type", autoZIndex: ["autoZIndex", "autoZIndex", booleanAttribute], baseZIndex: ["baseZIndex", "baseZIndex", numberAttribute], ariaLabel: "ariaLabel", dropdownAriaLabel: "dropdownAriaLabel", ariaLabelledBy: "ariaLabelledBy", dropdownIcon: "dropdownIcon", unique: ["unique", "unique", booleanAttribute], group: ["group", "group", booleanAttribute], completeOnFocus: ["completeOnFocus", "completeOnFocus", booleanAttribute], showClear: ["showClear", "showClear", booleanAttribute], field: "field", dropdown: ["dropdown", "dropdown", booleanAttribute], showEmptyMessage: ["showEmptyMessage", "showEmptyMessage", booleanAttribute], dropdownMode: "dropdownMode", multiple: ["multiple", "multiple", booleanAttribute], tabindex: ["tabindex", "tabindex", numberAttribute], dataKey: "dataKey", emptyMessage: "emptyMessage", showTransitionOptions: "showTransitionOptions", hideTransitionOptions: "hideTransitionOptions", autofocus: ["autofocus", "autofocus", booleanAttribute], autocomplete: "autocomplete", optionGroupChildren: "optionGroupChildren", optionGroupLabel: "optionGroupLabel", overlayOptions: "overlayOptions", suggestions: "suggestions", itemSize: "itemSize", optionLabel: "optionLabel", optionValue: "optionValue", id: "id", searchMessage: "searchMessage", emptySelectionMessage: "emptySelectionMessage", selectionMessage: "selectionMessage", autoOptionFocus: ["autoOptionFocus", "autoOptionFocus", booleanAttribute], selectOnFocus: ["selectOnFocus", "selectOnFocus", booleanAttribute], searchLocale: ["searchLocale", "searchLocale", booleanAttribute], optionDisabled: "optionDisabled", focusOnHover: ["focusOnHover", "focusOnHover", booleanAttribute], variant: "variant", isloading: "isloading" }, outputs: { completeMethod: "completeMethod", onSelect: "onSelect", onUnselect: "onUnselect", onFocus: "onFocus", onBlur: "onBlur", onDropdownClick: "onDropdownClick", onClear: "onClear", onKeyUp: "onKeyUp", onShow: "onShow", onHide: "onHide", onLazyLoad: "onLazyLoad" }, host: { properties: { "class.cax-inputwrapper-filled": "filled", "class.cax-inputwrapper-focus": "((focused && !disabled) || autofocus) || overlayVisible", "class.cax-autocomplete-clearable": "showClear && !disabled" }, classAttribute: "cax-element cax-inputwrapper" }, providers: [AUTOCOMPLETE_VALUE_ACCESSOR], queries: [{ propertyName: "templates", predicate: CaxTemplate }], viewQueries: [{ propertyName: "containerEL", first: true, predicate: ["container"], descendants: true }, { propertyName: "inputEL", first: true, predicate: ["focusInput"], descendants: true }, { propertyName: "multiInputEl", first: true, predicate: ["multiIn"], descendants: true }, { propertyName: "multiContainerEL", first: true, predicate: ["multiContainer"], descendants: true }, { propertyName: "dropdownButton", first: true, predicate: ["ddBtn"], 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 }], ngImport: i0, template: "<div #container [ngClass]=\"containerClass\"   [ngStyle]=\"style\" [class]=\"styleClass\" (click)=\"onContainerClick($event)\">\r\n    <input\r\n        *ngIf=\"!multiple\"\r\n        #focusInput\r\n        caxAutoFocus\r\n        [autofocus]=\"autofocus\"\r\n        [ngClass]=\"inputClass\"\r\n        [ngStyle]=\"inputStyle\"\r\n        [class]=\"inputStyleClass\"\r\n        [type]=\"type\"\r\n        [attr.value]=\"inputValue()\"\r\n        [attr.id]=\"inputId\"\r\n        [autocomplete]=\"autocomplete\"\r\n        [required]=\"required\"\r\n        [name]=\"name\"\r\n        aria-autocomplete=\"list\"\r\n        role=\"combobox\"\r\n        [attr.placeholder]=\"placeholder\"\r\n        [attr.size]=\"size\"\r\n        [attr.maxlength]=\"maxlength\"\r\n        [tabindex]=\"!disabled ? tabindex : -1\"\r\n        [readonly]=\"readonly\"\r\n        [disabled]=\"disabled\"\r\n        [attr.aria-label]=\"ariaLabel\"\r\n        [attr.aria-labelledby]=\"ariaLabelledBy\"\r\n        [attr.aria-required]=\"required\"\r\n        [attr.aria-expanded]=\"overlayVisible ?? false\"\r\n        [attr.aria-controls]=\"overlayVisible ? id + '_list' : null\"\r\n        [attr.aria-activedescendant]=\"focused ? focusedOptionId : undefined\"\r\n        (input)=\"onInput($event)\"\r\n        (keydown)=\"onKeyDown($event)\"\r\n        (change)=\"onInputChange($event)\"\r\n        (focus)=\"onInputFocus($event)\"\r\n        (blur)=\"onInputBlur($event)\"\r\n        (paste)=\"onInputPaste($event)\"\r\n        (keyup)=\"onInputKeyUp($event)\"\r\n    />  \r\n    <SearchIcon  [styleClass]=\"'cax-autocomplete-search-icon'\"  />\r\n\r\n    \r\n    <ng-container *ngIf=\"isVisibleClearIcon\">\r\n        <TimesCircleIcon  *ngIf=\"!clearIconTemplate\" [styleClass]=\"'cax-autocomplete-clear-icon cax-autoComplete-clear'\" (click)=\"clear()\" [attr.aria-hidden]=\"true\" />\r\n        <span *ngIf=\"clearIconTemplate\" class=\"cax-autocomplete-clear-icon\" (click)=\"clear()\" [attr.aria-hidden]=\"true\">\r\n            <ng-template *ngTemplateOutlet=\"clearIconTemplate\"></ng-template>\r\n        </span>\r\n    </ng-container>\r\n\r\n    <ul\r\n        *ngIf=\"multiple\"\r\n        #multiContainer\r\n        [ngClass]=\"multiContainerClass\"\r\n        [tabindex]=\"-1\"\r\n        role=\"listbox\"\r\n        [attr.aria-orientation]=\"'horizontal'\"\r\n        [attr.aria-activedescendant]=\"focused ? focusedMultipleOptionId : undefined\"\r\n        (focus)=\"onMultipleContainerFocus($event)\"\r\n        (blur)=\"onMultipleContainerBlur($event)\"\r\n        (keydown)=\"onMultipleContainerKeyDown($event)\"\r\n    >\r\n        <li\r\n            #token\r\n            *ngFor=\"let option of modelValue(); let i = index\"\r\n            [ngClass]=\"{ 'cax-autocomplete-token': true, 'cax-focus': focusedMultipleOptionIndex() === i }\"\r\n            [attr.id]=\"id + '_multiple_option_' + i\"\r\n            role=\"option\"\r\n            [attr.aria-label]=\"getOptionLabel(option)\"\r\n            [attr.aria-setsize]=\"modelValue().length\"\r\n            [attr.aria-posinset]=\"i + 1\"\r\n            [attr.aria-selected]=\"true\"\r\n        >\r\n            <ng-container *ngTemplateOutlet=\"selectedItemTemplate; context: { $implicit: option }\"></ng-container>\r\n            <span *ngIf=\"!selectedItemTemplate\" class=\"cax-autocomplete-token-label\">{{ getMultipleLabel(option) }}</span>\r\n            <span class=\"cax-autocomplete-token-icon\" (click)=\"!readonly ? removeOption($event, i) : ''\">\r\n                <TimesCircleIcon [styleClass]=\"'cax-autocomplete-token-icon'\" *ngIf=\"!removeIconTemplate\" [attr.aria-hidden]=\"true\" />\r\n                <span *ngIf=\"removeIconTemplate\" class=\"cax-autocomplete-token-icon\" [attr.aria-hidden]=\"true\">\r\n                    <ng-template *ngTemplateOutlet=\"removeIconTemplate\"></ng-template>\r\n                </span>\r\n            </span>\r\n        </li>\r\n        <li class=\"cax-autocomplete-input-token\" role=\"option\">\r\n            <input\r\n                #focusInput\r\n                caxAutoFocus\r\n                [autofocus]=\"autofocus\"\r\n                [ngClass]=\"inputClass\"\r\n                [ngStyle]=\"inputStyle\"\r\n                [class]=\"inputStyleClass\"\r\n                [attr.type]=\"type\"\r\n                [attr.id]=\"inputId\"\r\n                [autocomplete]=\"autocomplete\"\r\n                [required]=\"required\"\r\n                [attr.name]=\"name\"\r\n                role=\"combobox\"\r\n                [attr.placeholder]=\"!filled ? placeholder : null\"\r\n                [attr.size]=\"size\"\r\n                aria-autocomplete=\"list\"\r\n                [attr.maxlength]=\"maxlength\"\r\n                [tabindex]=\"!disabled ? tabindex : -1\"\r\n                [readonly]=\"readonly\"\r\n                [disabled]=\"disabled\"\r\n                [attr.aria-label]=\"ariaLabel\"\r\n                [attr.aria-labelledby]=\"ariaLabelledBy\"\r\n                [attr.aria-required]=\"required\"\r\n                [attr.aria-expanded]=\"overlayVisible ?? false\"\r\n                [attr.aria-controls]=\"overlayVisible ? id + '_list' : null\"\r\n                [attr.aria-activedescendant]=\"focused ? focusedOptionId : undefined\"\r\n                (input)=\"onInput($event)\"\r\n                (keydown)=\"onKeyDown($event)\"\r\n                (change)=\"onInputChange($event)\"\r\n                (focus)=\"onInputFocus($event)\"\r\n                (blur)=\"onInputBlur($event)\"\r\n                (paste)=\"onInputPaste($event)\"\r\n                (keyup)=\"onInputKeyUp($event)\"\r\n            />\r\n        </li>\r\n    </ul>\r\n    <ng-container *ngIf=\"loading\">\r\n        <SpinnerIcon *ngIf=\"!loadingIconTemplate\" [styleClass]=\"'cax-autocomplete-loader'\" [spin]=\"true\" [attr.aria-hidden]=\"true\" />\r\n        <span *ngIf=\"loadingIconTemplate\" class=\"cax-autocomplete-loader pi-spin \" [attr.aria-hidden]=\"true\">\r\n            <ng-template *ngTemplateOutlet=\"loadingIconTemplate\"></ng-template>\r\n        </span>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"isloading\">\r\n        <SpinnerIcon *ngIf=\"!loadingIconTemplate\" [styleClass]=\"'cax-autocomplete-loader'\" [spin]=\"true\" [attr.aria-hidden]=\"true\" />\r\n        <span *ngIf=\"loadingIconTemplate\" class=\"cax-autocomplete-loader pi-spin \" [attr.aria-hidden]=\"true\">\r\n            <ng-template *ngTemplateOutlet=\"loadingIconTemplate\"></ng-template>\r\n        </span>\r\n    </ng-container>\r\n    <button #ddBtn type=\"button\" caxButton [attr.aria-label]=\"dropdownAriaLabel\" class=\"cax-autocomplete-dropdown cax-button-icon-only\" [disabled]=\"disabled\" caxRipple (click)=\"handleDropdownClick($event)\" *ngIf=\"dropdown\" [attr.tabindex]=\"tabindex\">\r\n        <span *ngIf=\"dropdownIcon\" [ngClass]=\"dropdownIcon\" [attr.aria-hidden]=\"true\"></span>\r\n        <ng-container *ngIf=\"!dropdownIcon\">\r\n            <ChevronDownIcon *ngIf=\"!dropdownIconTemplate\" />\r\n            <ng-template *ngTemplateOutlet=\"dropdownIconTemplate\"></ng-template>\r\n        </ng-container>\r\n    </button>\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        [showTransitionOptions]=\"showTransitionOptions\"\r\n        [hideTransitionOptions]=\"hideTransitionOptions\"\r\n        (onAnimationStart)=\"onOverlayAnimationStart($event)\"\r\n        (onHide)=\"hide()\"\r\n    >\r\n        <div [ngClass]=\"panelClass\" [ngStyle]=\"panelStyles\" [class]=\"panelStyleClass\">\r\n            <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\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 class=\"cax-autocomplete-items\" [ngClass]=\"scrollerOptions.contentStyleClass\" [style]=\"scrollerOptions.contentStyle\" role=\"listbox\" [attr.id]=\"id + '_list'\" [attr.aria-label]=\"listLabel\">\r\n                    <ng-template ngFor let-option [ngForOf]=\"items\" let-i=\"index\">\r\n                        <ng-container *ngIf=\"isOptionGroup(option)\">\r\n                            <li [attr.id]=\"id + '_' + getOptionIndex(i, scrollerOptions)\" class=\"cax-autocomplete-item-group\" [ngStyle]=\"{ height: scrollerOptions.itemSize + 'px' }\" role=\"option\">\r\n                                <span *ngIf=\"!groupTemplate\">{{ getOptionGroupLabel(option.optionGroup) }}</span>\r\n                                <ng-container *ngTemplateOutlet=\"groupTemplate; context: { $implicit: option.optionGroup }\"></ng-container>\r\n                            </li>\r\n                        </ng-container>\r\n                        <ng-container *ngIf=\"!isOptionGroup(option)\">\r\n                            <li\r\n                                class=\"cax-autocomplete-item\"\r\n                                caxRipple\r\n                                [ngStyle]=\"{ height: scrollerOptions.itemSize + 'px' }\"\r\n                                [ngClass]=\"{ 'cax-highlight': isSelected(option), 'cax-focus': focusedOptionIndex() === getOptionIndex(i, scrollerOptions), 'cax-disabled': isOptionDisabled(option) }\"\r\n                                [attr.id]=\"id + '_' + getOptionIndex(i, scrollerOptions)\"\r\n                                role=\"option\"\r\n                                [attr.aria-label]=\"getOptionLabel(option)\"\r\n                                [attr.aria-selected]=\"isSelected(option)\"\r\n                                [attr.aria-disabled]=\"isOptionDisabled(option)\"\r\n                                [attr.data-p-focused]=\"focusedOptionIndex() === getOptionIndex(i, scrollerOptions)\"\r\n                                [attr.aria-setsize]=\"ariaSetSize\"\r\n                                [attr.aria-posinset]=\"getAriaPosInset(getOptionIndex(i, scrollerOptions))\"\r\n                                (click)=\"onOptionSelect($event, option)\"\r\n                                (mouseenter)=\"onOptionMouseEnter($event, getOptionIndex(i, scrollerOptions))\"\r\n                            >\r\n                                <span *ngIf=\"!itemTemplate\">{{ getOptionLabel(option) }}</span>\r\n                                <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: option, index: scrollerOptions.getOptions ? scrollerOptions.getOptions(i) : i }\"></ng-container>\r\n                            </li>\r\n                        </ng-container>\r\n                    </ng-template>\r\n                    <li *ngIf=\"!items || (items && items.length === 0 && showEmptyMessage)\" class=\"cax-autocomplete-empty-message\" [ngStyle]=\"{ height: scrollerOptions.itemSize + 'px' }\" role=\"option\">\r\n                        <ng-container *ngIf=\"!emptyTemplate; else empty\">\r\n                            {{ searchResultMessageText }}\r\n                        </ng-container>\r\n                        <ng-container #empty *ngTemplateOutlet=\"emptyTemplate\"></ng-container>\r\n                    </li>\r\n                </ul>\r\n            </ng-template>\r\n            <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\r\n        </div>\r\n        <!-- <span role=\"status\" aria-live=\"polite\" class=\"p-hidden-accessible\">\r\n            {{ selectedMessageText }}\r\n        </span> -->\r\n    </cax-overlay>\r\n</div>\r\n", styles: ["@layer cax{.cax-autocomplete{display:flex;position:relative;height:40px}.cax-autocomplete-loader{position:absolute;top:50%;margin-top:-.5rem;right:7px}.cax-autocomplete-dd .cax-autocomplete-input{flex:1 1 auto;width:1%;padding-left:3rem}.cax-autocomplete-dd .cax-autocomplete-input,.cax-autocomplete-dd .cax-autocomplete-multiple-container{border-top-right-radius:0;border-bottom-right-radius:0}.cax-autocomplete-dd .cax-autocomplete-dropdown{border-top-left-radius:0;border-bottom-left-radius:0}.cax-autocomplete-panel{overflow:auto}.cax-autocomplete-items{margin:0;padding:0;list-style-type:none}.cax-autocomplete-item{cursor:pointer;white-space:nowrap;position:relative;overflow:hidden}.cax-autocomplete-multiple-container{margin:0;padding:0;list-style-type:none;cursor:text;overflow:hidden;display:flex;align-items:center;flex-wrap:wrap}.cax-autocomplete-token{width:fit-content;cursor:default;display:inline-flex;align-items:center;flex:0 0 auto}.cax-autocomplete-token-icon{display:flex;cursor:pointer}.cax-autocomplete-input-token{flex:1 1 auto;display:inline-flex}.cax-autocomplete-input-token input{border:0 none;outline:0 none;background-color:transparent;margin:0;padding:0;box-shadow:none;border-radius:0;width:100%}.cax-fluid .cax-autocomplete{display:flex}.cax-fluid .cax-autocomplete-dd .cax-autocomplete-input{width:1%}.cax-autocomplete-clear-icon{position:absolute;top:50%;margin-top:-.5rem;cursor:pointer;right:10px}.cax-autocomplete-search-icon{position:absolute;top:50%;margin-top:-.5rem;cursor:pointer;left:9px}.cax-autocomplete-sm{height:32px!important}.cax-autocomplete-sm .cax-inputtext{font-size:12px!important}.cax-autocomplete-sm .cax-autocomplete-clear-icon,.cax-autocomplete-sm .cax-autocomplete-search-icon{width:12px!important;height:12px!important;margin-top:-.3rem}.cax-autocomplete-md{height:40px!important}.cax-autocomplete-md .cax-inputtext{font-size:16px!important}.cax-autocomplete-md .cax-autocomplete-clear-icon,.cax-autocomplete-md .cax-autocomplete-search-icon{width:16px!important;height:16px!important}.cax-autocomplete-md .cax-inputtext{padding-left:2rem!important;padding-right:2rem!important}.cax-autocomplete-md .cax-autocomplete-loader{width:16px!important;height:16px!important}.cax-autocomplete-lg{height:48px!important}.cax-autocomplete-lg .cax-inputtext{font-size:18px!important}.cax-autocomplete-lg .cax-autocomplete-clear-icon,.cax-autocomplete-lg .cax-autocomplete-search-icon,.cax-autocomplete-lg .cax-autocomplete-loader{width:18px!important;height:18px!important;margin-top:-.6rem}.cax-autocomplete-lg .cax-inputtext{padding-left:2.4rem!important;padding-right:2.4rem!important}}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: 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: "directive", type: i4.ButtonDirective, selector: "[caxButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "link"] }, { kind: "directive", type: i5.Ripple, selector: "[caxRipple]" }, { kind: "component", type: i6.Scroller, selector: "cax-scroller", inputs: ["id", "style", "styleClass", "tabindex", "items", "itemSize", "scrollHeight", "scrollWidth", "orientation", "step", "delay", "resizeDelay", "appendOnly", "inline", "lazy", "disabled", "loaderDisabled", "columns", "showSpacer", "showLoader", "numToleratedItems", "loading", "autoSize", "trackBy", "options"], outputs: ["onLazyLoad", "onScroll", "onScrollIndexChange"] }, { kind: "directive", type: i7.AutoFocus, selector: "[caxAutoFocus]", inputs: ["autofocus"] }, { kind: "component", type: i8.TimesCircleIcon, selector: "TimesCircleIcon" }, { kind: "component", type: i9.SpinnerIcon, selector: "SpinnerIcon" }, { kind: "component", type: i10.ChevronDownIcon, selector: "ChevronDownIcon" }, { kind: "component", type: i11.SearchIcon, selector: "SearchIcon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: AutoComplete, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: AutoComplete, decorators: [{
             type: Component,
             args: [{ selector: 'cax-autoComplete', host: {
                         class: 'cax-element cax-inputwrapper',
@@ -1473,11 +1473,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImpo
             }] } });
 
 class AutoCompleteModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: AutoCompleteModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.16", ngImport: i0, type: AutoCompleteModule, declarations: [AutoComplete], imports: [CommonModule, OverlayModule, InputTextModule, ButtonModule, SharedModule, RippleModule, ScrollerModule, AutoFocusModule, TimesCircleIcon, SpinnerIcon, TimesIcon, ChevronDownIcon, SearchIcon], exports: [AutoComplete, OverlayModule, SharedModule, ScrollerModule, AutoFocusModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: AutoCompleteModule, imports: [CommonModule, OverlayModule, InputTextModule, ButtonModule, SharedModule, RippleModule, ScrollerModule, AutoFocusModule, TimesCircleIcon, SpinnerIcon, TimesIcon, ChevronDownIcon, SearchIcon, OverlayModule, SharedModule, ScrollerModule, AutoFocusModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: AutoCompleteModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.17", ngImport: i0, type: AutoCompleteModule, declarations: [AutoComplete], imports: [CommonModule, OverlayModule, InputTextModule, ButtonModule, SharedModule, RippleModule, ScrollerModule, AutoFocusModule, TimesCircleIcon, SpinnerIcon, TimesIcon, ChevronDownIcon, SearchIcon], exports: [AutoComplete, OverlayModule, SharedModule, ScrollerModule, AutoFocusModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: AutoCompleteModule, imports: [CommonModule, OverlayModule, InputTextModule, ButtonModule, SharedModule, RippleModule, ScrollerModule, AutoFocusModule, TimesCircleIcon, SpinnerIcon, TimesIcon, ChevronDownIcon, SearchIcon, OverlayModule, SharedModule, ScrollerModule, AutoFocusModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: AutoCompleteModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: AutoCompleteModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, OverlayModule, InputTextModule, ButtonModule, SharedModule, RippleModule, ScrollerModule, AutoFocusModule, TimesCircleIcon, SpinnerIcon, TimesIcon, ChevronDownIcon, SearchIcon],

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

@@ -48,10 +48,10 @@ class AutoFocus {
             });
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: AutoFocus, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.2.16", type: AutoFocus, isStandalone: true, selector: "[caxAutoFocus]", inputs: { autofocus: ["autofocus", "autofocus", booleanAttribute] }, host: { classAttribute: "cax-element" }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: AutoFocus, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.2.17", type: AutoFocus, isStandalone: true, selector: "[caxAutoFocus]", inputs: { autofocus: ["autofocus", "autofocus", booleanAttribute] }, host: { classAttribute: "cax-element" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: AutoFocus, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: AutoFocus, decorators: [{
             type: Directive,
             args: [{
                     selector: '[caxAutoFocus]',
@@ -65,11 +65,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImpo
                 args: [{ transform: booleanAttribute }]
             }] } });
 class AutoFocusModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: AutoFocusModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.16", ngImport: i0, type: AutoFocusModule, imports: [AutoFocus], exports: [AutoFocus] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: AutoFocusModule });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: AutoFocusModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.17", ngImport: i0, type: AutoFocusModule, imports: [AutoFocus], exports: [AutoFocus] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: AutoFocusModule });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: AutoFocusModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: AutoFocusModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [AutoFocus],

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

@@ -73,10 +73,10 @@ class Avatar {
     imageError(event) {
         this.onImageError.emit(event);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: Avatar, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.16", type: Avatar, isStandalone: true, selector: "cax-avatar", inputs: { label: "label", icon: "icon", image: "image", avatarSize: "avatarSize", shape: "shape", style: "style", styleClass: "styleClass", ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy" }, outputs: { onImageError: "onImageError" }, host: { classAttribute: "cax-element" }, ngImport: i0, template: "<div [ngClass]=\"containerClass()\" [class]=\"styleClass\" [ngStyle]=\"style\" [attr.aria-labelledby]=\"ariaLabelledBy\" [attr.aria-label]=\"ariaLabel\" [attr.data-pc-name]=\"'avatar'\">\r\n    <ng-content></ng-content>\r\n    <span class=\"cax-avatar-text\" *ngIf=\"label; else iconTemplate\">{{ label }}</span>\r\n    <ng-template #iconTemplate><span [class]=\"icon\" [ngClass]=\"'cax-avatar-icon'\" *ngIf=\"icon; else imageTemplate\"></span></ng-template>\r\n    <ng-template #imageTemplate><img [src]=\"image\" *ngIf=\"image\" (error)=\"imageError($event)\" [attr.aria-label]=\"ariaLabel\" /></ng-template>\r\n</div>\r\n", styles: ["@layer cax{.cax-avatar{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;font-size:14px;line-height:20px;font-weight:700}.cax-avatar.cax-avatar-image{background-color:transparent}.cax-avatar.cax-avatar-circle{border-radius:50%!important}.cax-avatar .cax-avatar-icon{font-size:14px}.cax-avatar img{width:100%;height:100%;border-radius:8px}.cax-avatar.cax-avatar-circle img{border-radius:50%!important}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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.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: Avatar, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: Avatar, isStandalone: true, selector: "cax-avatar", inputs: { label: "label", icon: "icon", image: "image", avatarSize: "avatarSize", shape: "shape", style: "style", styleClass: "styleClass", ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy" }, outputs: { onImageError: "onImageError" }, host: { classAttribute: "cax-element" }, ngImport: i0, template: "<div [ngClass]=\"containerClass()\" [class]=\"styleClass\" [ngStyle]=\"style\" [attr.aria-labelledby]=\"ariaLabelledBy\" [attr.aria-label]=\"ariaLabel\" [attr.data-pc-name]=\"'avatar'\">\r\n    <ng-content></ng-content>\r\n    <span class=\"cax-avatar-text\" *ngIf=\"label; else iconTemplate\">{{ label }}</span>\r\n    <ng-template #iconTemplate><span [class]=\"icon\" [ngClass]=\"'cax-avatar-icon'\" *ngIf=\"icon; else imageTemplate\"></span></ng-template>\r\n    <ng-template #imageTemplate><img [src]=\"image\" *ngIf=\"image\" (error)=\"imageError($event)\" [attr.aria-label]=\"ariaLabel\" /></ng-template>\r\n</div>\r\n", styles: ["@layer cax{.cax-avatar{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;font-size:14px;line-height:20px;font-weight:700}.cax-avatar.cax-avatar-image{background-color:transparent}.cax-avatar.cax-avatar-circle{border-radius:50%!important}.cax-avatar .cax-avatar-icon{font-size:14px}.cax-avatar img{width:100%;height:100%;border-radius:8px}.cax-avatar.cax-avatar-circle img{border-radius:50%!important}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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.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: Avatar, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: Avatar, decorators: [{
             type: Component,
             args: [{ selector: 'cax-avatar', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: true, imports: [CommonModule], host: {
                         class: 'cax-element'
@@ -104,11 +104,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImpo
             }] } });
 
 class AvatarModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: AvatarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.16", ngImport: i0, type: AvatarModule, imports: [Avatar], exports: [Avatar] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: AvatarModule, imports: [Avatar] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: AvatarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.17", ngImport: i0, type: AvatarModule, imports: [Avatar], exports: [Avatar] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: AvatarModule, imports: [Avatar] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: AvatarModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: AvatarModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [Avatar],