cax-design-system 2.4.1 → 2.6.0

package/esm2022/tabview/tabview.module.mjs

@@ -7,18 +7,19 @@ import { TimesIcon } from 'cax-design-system/icons/times';
 import { RippleModule } from 'cax-design-system/ripple';
 import { TooltipModule } from 'cax-design-system/tooltip';
 import { TabPanel, TabView } from './tabview';
+import { ButtonModule } from 'cax-design-system/button';
 import * as i0 from "@angular/core";
 export class TabViewModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: TabViewModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.9", ngImport: i0, type: TabViewModule, declarations: [TabView, TabPanel], imports: [CommonModule, SharedModule, TooltipModule, RippleModule, TimesIcon, ChevronLeftIcon, ChevronRightIcon], exports: [TabView, TabPanel, SharedModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: TabViewModule, imports: [CommonModule, SharedModule, TooltipModule, RippleModule, TimesIcon, ChevronLeftIcon, ChevronRightIcon, SharedModule] });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.9", ngImport: i0, type: TabViewModule, declarations: [TabView, TabPanel], imports: [CommonModule, SharedModule, TooltipModule, RippleModule, TimesIcon, ChevronLeftIcon, ChevronRightIcon, ButtonModule], exports: [TabView, TabPanel, SharedModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: TabViewModule, imports: [CommonModule, SharedModule, TooltipModule, RippleModule, TimesIcon, ChevronLeftIcon, ChevronRightIcon, ButtonModule, SharedModule] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: TabViewModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [CommonModule, SharedModule, TooltipModule, RippleModule, TimesIcon, ChevronLeftIcon, ChevronRightIcon],
+                    imports: [CommonModule, SharedModule, TooltipModule, RippleModule, TimesIcon, ChevronLeftIcon, ChevronRightIcon, ButtonModule],
                     exports: [TabView, TabPanel, SharedModule],
                     declarations: [TabView, TabPanel]
                 }]
         }] });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGFidmlldy5tb2R1bGUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9zcmMvYXBwL2NvbXBvbmVudHMvdGFidmlldy90YWJ2aWV3Lm1vZHVsZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDL0MsT0FBTyxFQUFFLFFBQVEsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUN6QyxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0sdUJBQXVCLENBQUM7QUFDckQsT0FBTyxFQUFFLGVBQWUsRUFBRSxNQUFNLHFDQUFxQyxDQUFDO0FBQ3RFLE9BQU8sRUFBRSxnQkFBZ0IsRUFBRSxNQUFNLHNDQUFzQyxDQUFDO0FBQ3hFLE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSwrQkFBK0IsQ0FBQztBQUMxRCxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0sMEJBQTBCLENBQUM7QUFDeEQsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLDJCQUEyQixDQUFDO0FBQzFELE9BQU8sRUFBRSxRQUFRLEVBQUUsT0FBTyxFQUFFLE1BQU0sV0FBVyxDQUFDOztBQU85QyxNQUFNLE9BQU8sYUFBYTt1R0FBYixhQUFhO3dHQUFiLGFBQWEsaUJBRlAsT0FBTyxFQUFFLFFBQVEsYUFGdEIsWUFBWSxFQUFFLFlBQVksRUFBRSxhQUFhLEVBQUUsWUFBWSxFQUFFLFNBQVMsRUFBRSxlQUFlLEVBQUUsZ0JBQWdCLGFBQ3JHLE9BQU8sRUFBRSxRQUFRLEVBQUUsWUFBWTt3R0FHaEMsYUFBYSxZQUpaLFlBQVksRUFBRSxZQUFZLEVBQUUsYUFBYSxFQUFFLFlBQVksRUFBRSxTQUFTLEVBQUUsZUFBZSxFQUFFLGdCQUFnQixFQUNsRixZQUFZOzsyRkFHaEMsYUFBYTtrQkFMekIsUUFBUTttQkFBQztvQkFDTixPQUFPLEVBQUUsQ0FBQyxZQUFZLEVBQUUsWUFBWSxFQUFFLGFBQWEsRUFBRSxZQUFZLEVBQUUsU0FBUyxFQUFFLGVBQWUsRUFBRSxnQkFBZ0IsQ0FBQztvQkFDaEgsT0FBTyxFQUFFLENBQUMsT0FBTyxFQUFFLFFBQVEsRUFBRSxZQUFZLENBQUM7b0JBQzFDLFlBQVksRUFBRSxDQUFDLE9BQU8sRUFBRSxRQUFRLENBQUM7aUJBQ3BDIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tbW9uTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcbmltcG9ydCB7IE5nTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBTaGFyZWRNb2R1bGUgfSBmcm9tICdjYXgtZGVzaWduLXN5c3RlbS9hcGknO1xuaW1wb3J0IHsgQ2hldnJvbkxlZnRJY29uIH0gZnJvbSAnY2F4LWRlc2lnbi1zeXN0ZW0vaWNvbnMvY2hldnJvbmxlZnQnO1xuaW1wb3J0IHsgQ2hldnJvblJpZ2h0SWNvbiB9IGZyb20gJ2NheC1kZXNpZ24tc3lzdGVtL2ljb25zL2NoZXZyb25yaWdodCc7XG5pbXBvcnQgeyBUaW1lc0ljb24gfSBmcm9tICdjYXgtZGVzaWduLXN5c3RlbS9pY29ucy90aW1lcyc7XG5pbXBvcnQgeyBSaXBwbGVNb2R1bGUgfSBmcm9tICdjYXgtZGVzaWduLXN5c3RlbS9yaXBwbGUnO1xuaW1wb3J0IHsgVG9vbHRpcE1vZHVsZSB9IGZyb20gJ2NheC1kZXNpZ24tc3lzdGVtL3Rvb2x0aXAnO1xuaW1wb3J0IHsgVGFiUGFuZWwsIFRhYlZpZXcgfSBmcm9tICcuL3RhYnZpZXcnO1xuXG5ATmdNb2R1bGUoe1xuICAgIGltcG9ydHM6IFtDb21tb25Nb2R1bGUsIFNoYXJlZE1vZHVsZSwgVG9vbHRpcE1vZHVsZSwgUmlwcGxlTW9kdWxlLCBUaW1lc0ljb24sIENoZXZyb25MZWZ0SWNvbiwgQ2hldnJvblJpZ2h0SWNvbl0sXG4gICAgZXhwb3J0czogW1RhYlZpZXcsIFRhYlBhbmVsLCBTaGFyZWRNb2R1bGVdLFxuICAgIGRlY2xhcmF0aW9uczogW1RhYlZpZXcsIFRhYlBhbmVsXVxufSlcbmV4cG9ydCBjbGFzcyBUYWJWaWV3TW9kdWxlIHt9XG4iXX0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGFidmlldy5tb2R1bGUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9zcmMvYXBwL2NvbXBvbmVudHMvdGFidmlldy90YWJ2aWV3Lm1vZHVsZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDL0MsT0FBTyxFQUFFLFFBQVEsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUN6QyxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0sdUJBQXVCLENBQUM7QUFDckQsT0FBTyxFQUFFLGVBQWUsRUFBRSxNQUFNLHFDQUFxQyxDQUFDO0FBQ3RFLE9BQU8sRUFBRSxnQkFBZ0IsRUFBRSxNQUFNLHNDQUFzQyxDQUFDO0FBQ3hFLE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSwrQkFBK0IsQ0FBQztBQUMxRCxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0sMEJBQTBCLENBQUM7QUFDeEQsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLDJCQUEyQixDQUFDO0FBQzFELE9BQU8sRUFBRSxRQUFRLEVBQUUsT0FBTyxFQUFFLE1BQU0sV0FBVyxDQUFDO0FBQzlDLE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSwwQkFBMEIsQ0FBQzs7QUFPeEQsTUFBTSxPQUFPLGFBQWE7dUdBQWIsYUFBYTt3R0FBYixhQUFhLGlCQUZQLE9BQU8sRUFBRSxRQUFRLGFBRnRCLFlBQVksRUFBRSxZQUFZLEVBQUUsYUFBYSxFQUFFLFlBQVksRUFBRSxTQUFTLEVBQUUsZUFBZSxFQUFFLGdCQUFnQixFQUFFLFlBQVksYUFDbkgsT0FBTyxFQUFFLFFBQVEsRUFBRSxZQUFZO3dHQUdoQyxhQUFhLFlBSlosWUFBWSxFQUFFLFlBQVksRUFBRSxhQUFhLEVBQUUsWUFBWSxFQUFFLFNBQVMsRUFBRSxlQUFlLEVBQUUsZ0JBQWdCLEVBQUUsWUFBWSxFQUNoRyxZQUFZOzsyRkFHaEMsYUFBYTtrQkFMekIsUUFBUTttQkFBQztvQkFDTixPQUFPLEVBQUUsQ0FBQyxZQUFZLEVBQUUsWUFBWSxFQUFFLGFBQWEsRUFBRSxZQUFZLEVBQUUsU0FBUyxFQUFFLGVBQWUsRUFBRSxnQkFBZ0IsRUFBRSxZQUFZLENBQUM7b0JBQzlILE9BQU8sRUFBRSxDQUFDLE9BQU8sRUFBRSxRQUFRLEVBQUUsWUFBWSxDQUFDO29CQUMxQyxZQUFZLEVBQUUsQ0FBQyxPQUFPLEVBQUUsUUFBUSxDQUFDO2lCQUNwQyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbW1vbk1vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XG5pbXBvcnQgeyBOZ01vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgU2hhcmVkTW9kdWxlIH0gZnJvbSAnY2F4LWRlc2lnbi1zeXN0ZW0vYXBpJztcbmltcG9ydCB7IENoZXZyb25MZWZ0SWNvbiB9IGZyb20gJ2NheC1kZXNpZ24tc3lzdGVtL2ljb25zL2NoZXZyb25sZWZ0JztcbmltcG9ydCB7IENoZXZyb25SaWdodEljb24gfSBmcm9tICdjYXgtZGVzaWduLXN5c3RlbS9pY29ucy9jaGV2cm9ucmlnaHQnO1xuaW1wb3J0IHsgVGltZXNJY29uIH0gZnJvbSAnY2F4LWRlc2lnbi1zeXN0ZW0vaWNvbnMvdGltZXMnO1xuaW1wb3J0IHsgUmlwcGxlTW9kdWxlIH0gZnJvbSAnY2F4LWRlc2lnbi1zeXN0ZW0vcmlwcGxlJztcbmltcG9ydCB7IFRvb2x0aXBNb2R1bGUgfSBmcm9tICdjYXgtZGVzaWduLXN5c3RlbS90b29sdGlwJztcbmltcG9ydCB7IFRhYlBhbmVsLCBUYWJWaWV3IH0gZnJvbSAnLi90YWJ2aWV3JztcbmltcG9ydCB7IEJ1dHRvbk1vZHVsZSB9IGZyb20gJ2NheC1kZXNpZ24tc3lzdGVtL2J1dHRvbic7XG5cbkBOZ01vZHVsZSh7XG4gICAgaW1wb3J0czogW0NvbW1vbk1vZHVsZSwgU2hhcmVkTW9kdWxlLCBUb29sdGlwTW9kdWxlLCBSaXBwbGVNb2R1bGUsIFRpbWVzSWNvbiwgQ2hldnJvbkxlZnRJY29uLCBDaGV2cm9uUmlnaHRJY29uLCBCdXR0b25Nb2R1bGVdLFxuICAgIGV4cG9ydHM6IFtUYWJWaWV3LCBUYWJQYW5lbCwgU2hhcmVkTW9kdWxlXSxcbiAgICBkZWNsYXJhdGlvbnM6IFtUYWJWaWV3LCBUYWJQYW5lbF1cbn0pXG5leHBvcnQgY2xhc3MgVGFiVmlld01vZHVsZSB7fVxuIl19

package/esm2022/timeline/timeline.mjs

@@ -59,13 +59,13 @@ export class Timeline {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: Timeline, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: Timeline, selector: "cax-timeline", inputs: { value: "value", style: "style", styleClass: "styleClass", align: "align", layout: "layout" }, host: { classAttribute: "cax-element" }, queries: [{ propertyName: "templates", predicate: CaxTemplate }], ngImport: i0, template: "<div\r\n  [class]=\"styleClass\"\r\n  [ngStyle]=\"style\"\r\n  [ngClass]=\"{\r\n    'cax-timeline cax-component': true,\r\n    'cax-timeline-left': align === 'left',\r\n    'cax-timeline-right': align === 'right',\r\n    'cax-timeline-top': align === 'top',\r\n    'cax-timeline-bottom': align === 'bottom',\r\n    'cax-timeline-alternate': align === 'alternate',\r\n    'cax-timeline-vertical': layout === 'vertical',\r\n    'cax-timeline-horizontal': layout === 'horizontal'\r\n  }\"\r\n  [attr.data-pc-name]=\"'timeline'\"\r\n  [attr.data-pc-section]=\"'root'\"\r\n>\r\n  <div *ngFor=\"let event of value; let last = last; let i = index\" class=\"cax-timeline-event\" [attr.data-pc-section]=\"'event'\">\r\n    <div class=\"cax-timeline-event-opposite\" [attr.data-pc-section]=\"'opposite'\">\r\n      <ng-container *ngTemplateOutlet=\"oppositeTemplate; context: { $implicit: event }\"></ng-container>\r\n    </div>\r\n    <div class=\"cax-timeline-event-separator\" [attr.data-pc-section]=\"'separator'\">\r\n      <ng-container *ngIf=\"markerTemplate; else marker\">\r\n        <ng-container *ngTemplateOutlet=\"markerTemplate; context: { $implicit: event, index: i }\"></ng-container>\r\n      </ng-container>\r\n      <ng-template #marker>\r\n        <div class=\"cax-timeline-event-marker\" [attr.data-pc-section]=\"'marker'\">\r\n          {{ i + 1 }}\r\n        </div>\r\n      </ng-template>\r\n      <div *ngIf=\"!last\" class=\"cax-timeline-event-connector\"></div>\r\n    </div>\r\n    <div class=\"cax-timeline-event-content\" [attr.data-pc-section]=\"'content'\">\r\n      <ng-container *ngTemplateOutlet=\"contentTemplate; context: { $implicit: event }\"></ng-container>\r\n    </div>\r\n  </div>\r\n</div>", styles: ["@layer cax{.cax-timeline{display:flex;flex-grow:1;flex-direction:column}.cax-timeline-left .cax-timeline-event-opposite{text-align:right}.cax-timeline-left .cax-timeline-event-content{text-align:left}.cax-timeline-right .cax-timeline-event{flex-direction:row-reverse}.cax-timeline-right .cax-timeline-event-opposite{text-align:left}.cax-timeline-right .cax-timeline-event-content{text-align:right}.cax-timeline-vertical.cax-timeline-alternate .cax-timeline-event:nth-child(2n){flex-direction:row-reverse!important}.cax-timeline-vertical.cax-timeline-alternate .cax-timeline-event:nth-child(odd) .cax-timeline-event-opposite{text-align:right}.cax-timeline-vertical.cax-timeline-alternate .cax-timeline-event:nth-child(odd) .cax-timeline-event-content{text-align:left}.cax-timeline-vertical.cax-timeline-alternate .cax-timeline-event:nth-child(2n) .cax-timeline-event-opposite{text-align:left}.cax-timeline-vertical.cax-timeline-alternate .cax-timeline-event:nth-child(2n) .cax-timeline-event-content{text-align:right}.cax-timeline-event{display:flex;position:relative;min-height:70px}.cax-timeline-event:last-child{min-height:0}.cax-timeline-event-opposite{flex:1;padding:0 1rem;min-width:100px}.cax-timeline-event-content{flex:1;padding:0 1rem;min-width:100px;border-radius:8px}.cax-timeline-event-separator{flex:0;display:flex;align-items:center;flex-direction:column}.cax-timeline-event-marker{display:flex;align-self:baseline}.cax-timeline-event-connector{flex-grow:1}.cax-timeline-horizontal{flex-direction:row}.cax-timeline-horizontal.cax-timeline-bottom{align-items:end!important}.cax-timeline-horizontal.cax-timeline-top{align-items:start!important}.cax-timeline-horizontal .cax-timeline-event{flex-direction:column;flex:1}.cax-timeline-horizontal .cax-timeline-event:last-child{flex:0}.cax-timeline-horizontal .cax-timeline-event-separator{flex-direction:row}.cax-timeline-horizontal .cax-timeline-event-connector{width:100%}.cax-timeline-bottom .cax-timeline-event{flex-direction:column-reverse}.cax-timeline-horizontal.cax-timeline-alternate .cax-timeline-event:nth-child(2n){flex-direction:column-reverse}.cax-timeline-event-marker{display:flex;justify-content:center;align-items:center;width:24px;height:24px;border-radius:50%}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: Timeline, selector: "cax-timeline", inputs: { value: "value", style: "style", styleClass: "styleClass", align: "align", layout: "layout" }, host: { classAttribute: "cax-element" }, queries: [{ propertyName: "templates", predicate: CaxTemplate }], ngImport: i0, template: "<div\r\n  [class]=\"styleClass\"\r\n  [ngStyle]=\"style\"\r\n  [ngClass]=\"{\r\n    'cax-timeline cax-component': true,\r\n    'cax-timeline-left': align === 'left',\r\n    'cax-timeline-right': align === 'right',\r\n    'cax-timeline-top': align === 'top',\r\n    'cax-timeline-bottom': align === 'bottom',\r\n    'cax-timeline-alternate': align === 'alternate',\r\n    'cax-timeline-vertical': layout === 'vertical',\r\n    'cax-timeline-horizontal': layout === 'horizontal'\r\n  }\"\r\n  [attr.data-pc-name]=\"'timeline'\"\r\n  [attr.data-pc-section]=\"'root'\"\r\n>\r\n  <div *ngFor=\"let event of value; let last = last; let i = index\" class=\"cax-timeline-event\" [attr.data-pc-section]=\"'event'\">\r\n    <div class=\"cax-timeline-event-opposite\" [attr.data-pc-section]=\"'opposite'\">\r\n      <ng-container *ngTemplateOutlet=\"oppositeTemplate; context: { $implicit: event }\"></ng-container>\r\n    </div>\r\n    <div class=\"cax-timeline-event-separator\" [attr.data-pc-section]=\"'separator'\">\r\n      <ng-container *ngIf=\"markerTemplate; else marker\">\r\n        <ng-container *ngTemplateOutlet=\"markerTemplate; context: { $implicit: event, index: i }\"></ng-container>\r\n      </ng-container>\r\n      <ng-template #marker>\r\n        <div class=\"cax-timeline-event-marker\" [attr.data-pc-section]=\"'marker'\">\r\n          {{ i + 1 }}\r\n        </div>\r\n      </ng-template>\r\n      <div *ngIf=\"!last\" class=\"cax-timeline-event-connector\"></div>\r\n    </div>\r\n    <div class=\"cax-timeline-event-content\" [attr.data-pc-section]=\"'content'\">\r\n      <ng-container *ngTemplateOutlet=\"contentTemplate; context: { $implicit: event }\"></ng-container>\r\n    </div>\r\n  </div>\r\n</div>", styles: ["@layer cax{.cax-timeline{display:flex;flex-grow:1;flex-direction:column}.cax-timeline-left .cax-timeline-event-opposite{text-align:right}.cax-timeline-left .cax-timeline-event-content{text-align:left}.cax-timeline-right .cax-timeline-event{flex-direction:row-reverse}.cax-timeline-right .cax-timeline-event-opposite{text-align:left}.cax-timeline-right .cax-timeline-event-content{text-align:right}.cax-timeline-vertical.cax-timeline-alternate .cax-timeline-event:nth-child(2n){flex-direction:row-reverse!important}.cax-timeline-vertical.cax-timeline-alternate .cax-timeline-event:nth-child(odd) .cax-timeline-event-opposite{text-align:right}.cax-timeline-vertical.cax-timeline-alternate .cax-timeline-event:nth-child(odd) .cax-timeline-event-content{text-align:left}.cax-timeline-vertical.cax-timeline-alternate .cax-timeline-event:nth-child(2n) .cax-timeline-event-opposite{text-align:left}.cax-timeline-vertical.cax-timeline-alternate .cax-timeline-event:nth-child(2n) .cax-timeline-event-content{text-align:right}.cax-timeline-event{display:flex;position:relative}.cax-timeline-event:last-child{min-height:0}.cax-timeline-event-content{padding:0 1rem;min-width:100px;border-radius:8px}.cax-timeline-event-opposite:empty{display:none}.cax-timeline-event-separator{flex:0;display:flex;align-items:center;flex-direction:column}.cax-timeline-event-marker{display:flex;align-self:baseline}.cax-timeline-event-connector{flex-grow:1}.cax-timeline-horizontal{flex-direction:row}.cax-timeline-horizontal.cax-timeline-bottom{align-items:end!important}.cax-timeline-horizontal.cax-timeline-top{align-items:start!important}.cax-timeline-horizontal .cax-timeline-event{flex-direction:column;flex:1}.cax-timeline-horizontal .cax-timeline-event:last-child{flex:0}.cax-timeline-horizontal .cax-timeline-event-separator{flex-direction:row}.cax-timeline-horizontal .cax-timeline-event-connector{width:100%}.cax-timeline-bottom .cax-timeline-event{flex-direction:column-reverse}.cax-timeline-horizontal.cax-timeline-alternate .cax-timeline-event:nth-child(2n){flex-direction:column-reverse}.cax-timeline-event-marker{display:flex;justify-content:center;align-items:center;width:24px;height:24px;border-radius:50%}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: Timeline, decorators: [{
             type: Component,
             args: [{ selector: 'cax-timeline', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         class: 'cax-element'
-                    }, template: "<div\r\n  [class]=\"styleClass\"\r\n  [ngStyle]=\"style\"\r\n  [ngClass]=\"{\r\n    'cax-timeline cax-component': true,\r\n    'cax-timeline-left': align === 'left',\r\n    'cax-timeline-right': align === 'right',\r\n    'cax-timeline-top': align === 'top',\r\n    'cax-timeline-bottom': align === 'bottom',\r\n    'cax-timeline-alternate': align === 'alternate',\r\n    'cax-timeline-vertical': layout === 'vertical',\r\n    'cax-timeline-horizontal': layout === 'horizontal'\r\n  }\"\r\n  [attr.data-pc-name]=\"'timeline'\"\r\n  [attr.data-pc-section]=\"'root'\"\r\n>\r\n  <div *ngFor=\"let event of value; let last = last; let i = index\" class=\"cax-timeline-event\" [attr.data-pc-section]=\"'event'\">\r\n    <div class=\"cax-timeline-event-opposite\" [attr.data-pc-section]=\"'opposite'\">\r\n      <ng-container *ngTemplateOutlet=\"oppositeTemplate; context: { $implicit: event }\"></ng-container>\r\n    </div>\r\n    <div class=\"cax-timeline-event-separator\" [attr.data-pc-section]=\"'separator'\">\r\n      <ng-container *ngIf=\"markerTemplate; else marker\">\r\n        <ng-container *ngTemplateOutlet=\"markerTemplate; context: { $implicit: event, index: i }\"></ng-container>\r\n      </ng-container>\r\n      <ng-template #marker>\r\n        <div class=\"cax-timeline-event-marker\" [attr.data-pc-section]=\"'marker'\">\r\n          {{ i + 1 }}\r\n        </div>\r\n      </ng-template>\r\n      <div *ngIf=\"!last\" class=\"cax-timeline-event-connector\"></div>\r\n    </div>\r\n    <div class=\"cax-timeline-event-content\" [attr.data-pc-section]=\"'content'\">\r\n      <ng-container *ngTemplateOutlet=\"contentTemplate; context: { $implicit: event }\"></ng-container>\r\n    </div>\r\n  </div>\r\n</div>", styles: ["@layer cax{.cax-timeline{display:flex;flex-grow:1;flex-direction:column}.cax-timeline-left .cax-timeline-event-opposite{text-align:right}.cax-timeline-left .cax-timeline-event-content{text-align:left}.cax-timeline-right .cax-timeline-event{flex-direction:row-reverse}.cax-timeline-right .cax-timeline-event-opposite{text-align:left}.cax-timeline-right .cax-timeline-event-content{text-align:right}.cax-timeline-vertical.cax-timeline-alternate .cax-timeline-event:nth-child(2n){flex-direction:row-reverse!important}.cax-timeline-vertical.cax-timeline-alternate .cax-timeline-event:nth-child(odd) .cax-timeline-event-opposite{text-align:right}.cax-timeline-vertical.cax-timeline-alternate .cax-timeline-event:nth-child(odd) .cax-timeline-event-content{text-align:left}.cax-timeline-vertical.cax-timeline-alternate .cax-timeline-event:nth-child(2n) .cax-timeline-event-opposite{text-align:left}.cax-timeline-vertical.cax-timeline-alternate .cax-timeline-event:nth-child(2n) .cax-timeline-event-content{text-align:right}.cax-timeline-event{display:flex;position:relative;min-height:70px}.cax-timeline-event:last-child{min-height:0}.cax-timeline-event-opposite{flex:1;padding:0 1rem;min-width:100px}.cax-timeline-event-content{flex:1;padding:0 1rem;min-width:100px;border-radius:8px}.cax-timeline-event-separator{flex:0;display:flex;align-items:center;flex-direction:column}.cax-timeline-event-marker{display:flex;align-self:baseline}.cax-timeline-event-connector{flex-grow:1}.cax-timeline-horizontal{flex-direction:row}.cax-timeline-horizontal.cax-timeline-bottom{align-items:end!important}.cax-timeline-horizontal.cax-timeline-top{align-items:start!important}.cax-timeline-horizontal .cax-timeline-event{flex-direction:column;flex:1}.cax-timeline-horizontal .cax-timeline-event:last-child{flex:0}.cax-timeline-horizontal .cax-timeline-event-separator{flex-direction:row}.cax-timeline-horizontal .cax-timeline-event-connector{width:100%}.cax-timeline-bottom .cax-timeline-event{flex-direction:column-reverse}.cax-timeline-horizontal.cax-timeline-alternate .cax-timeline-event:nth-child(2n){flex-direction:column-reverse}.cax-timeline-event-marker{display:flex;justify-content:center;align-items:center;width:24px;height:24px;border-radius:50%}}\n"] }]
+                    }, template: "<div\r\n  [class]=\"styleClass\"\r\n  [ngStyle]=\"style\"\r\n  [ngClass]=\"{\r\n    'cax-timeline cax-component': true,\r\n    'cax-timeline-left': align === 'left',\r\n    'cax-timeline-right': align === 'right',\r\n    'cax-timeline-top': align === 'top',\r\n    'cax-timeline-bottom': align === 'bottom',\r\n    'cax-timeline-alternate': align === 'alternate',\r\n    'cax-timeline-vertical': layout === 'vertical',\r\n    'cax-timeline-horizontal': layout === 'horizontal'\r\n  }\"\r\n  [attr.data-pc-name]=\"'timeline'\"\r\n  [attr.data-pc-section]=\"'root'\"\r\n>\r\n  <div *ngFor=\"let event of value; let last = last; let i = index\" class=\"cax-timeline-event\" [attr.data-pc-section]=\"'event'\">\r\n    <div class=\"cax-timeline-event-opposite\" [attr.data-pc-section]=\"'opposite'\">\r\n      <ng-container *ngTemplateOutlet=\"oppositeTemplate; context: { $implicit: event }\"></ng-container>\r\n    </div>\r\n    <div class=\"cax-timeline-event-separator\" [attr.data-pc-section]=\"'separator'\">\r\n      <ng-container *ngIf=\"markerTemplate; else marker\">\r\n        <ng-container *ngTemplateOutlet=\"markerTemplate; context: { $implicit: event, index: i }\"></ng-container>\r\n      </ng-container>\r\n      <ng-template #marker>\r\n        <div class=\"cax-timeline-event-marker\" [attr.data-pc-section]=\"'marker'\">\r\n          {{ i + 1 }}\r\n        </div>\r\n      </ng-template>\r\n      <div *ngIf=\"!last\" class=\"cax-timeline-event-connector\"></div>\r\n    </div>\r\n    <div class=\"cax-timeline-event-content\" [attr.data-pc-section]=\"'content'\">\r\n      <ng-container *ngTemplateOutlet=\"contentTemplate; context: { $implicit: event }\"></ng-container>\r\n    </div>\r\n  </div>\r\n</div>", styles: ["@layer cax{.cax-timeline{display:flex;flex-grow:1;flex-direction:column}.cax-timeline-left .cax-timeline-event-opposite{text-align:right}.cax-timeline-left .cax-timeline-event-content{text-align:left}.cax-timeline-right .cax-timeline-event{flex-direction:row-reverse}.cax-timeline-right .cax-timeline-event-opposite{text-align:left}.cax-timeline-right .cax-timeline-event-content{text-align:right}.cax-timeline-vertical.cax-timeline-alternate .cax-timeline-event:nth-child(2n){flex-direction:row-reverse!important}.cax-timeline-vertical.cax-timeline-alternate .cax-timeline-event:nth-child(odd) .cax-timeline-event-opposite{text-align:right}.cax-timeline-vertical.cax-timeline-alternate .cax-timeline-event:nth-child(odd) .cax-timeline-event-content{text-align:left}.cax-timeline-vertical.cax-timeline-alternate .cax-timeline-event:nth-child(2n) .cax-timeline-event-opposite{text-align:left}.cax-timeline-vertical.cax-timeline-alternate .cax-timeline-event:nth-child(2n) .cax-timeline-event-content{text-align:right}.cax-timeline-event{display:flex;position:relative}.cax-timeline-event:last-child{min-height:0}.cax-timeline-event-content{padding:0 1rem;min-width:100px;border-radius:8px}.cax-timeline-event-opposite:empty{display:none}.cax-timeline-event-separator{flex:0;display:flex;align-items:center;flex-direction:column}.cax-timeline-event-marker{display:flex;align-self:baseline}.cax-timeline-event-connector{flex-grow:1}.cax-timeline-horizontal{flex-direction:row}.cax-timeline-horizontal.cax-timeline-bottom{align-items:end!important}.cax-timeline-horizontal.cax-timeline-top{align-items:start!important}.cax-timeline-horizontal .cax-timeline-event{flex-direction:column;flex:1}.cax-timeline-horizontal .cax-timeline-event:last-child{flex:0}.cax-timeline-horizontal .cax-timeline-event-separator{flex-direction:row}.cax-timeline-horizontal .cax-timeline-event-connector{width:100%}.cax-timeline-bottom .cax-timeline-event{flex-direction:column-reverse}.cax-timeline-horizontal.cax-timeline-alternate .cax-timeline-event:nth-child(2n){flex-direction:column-reverse}.cax-timeline-event-marker{display:flex;justify-content:center;align-items:center;width:24px;height:24px;border-radius:50%}}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { value: [{
                 type: Input
             }], style: [{

package/esm2022/tooltip/tooltip.module.mjs

@@ -1,18 +1,20 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { Tooltip } from './tooltip';
+import { InputTextModule } from 'cax-design-system/inputtext';
+import { ButtonModule } from 'cax-design-system/button';
 import * as i0 from "@angular/core";
 export class TooltipModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: TooltipModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.9", ngImport: i0, type: TooltipModule, declarations: [Tooltip], imports: [CommonModule], exports: [Tooltip] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: TooltipModule, imports: [CommonModule] });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.9", ngImport: i0, type: TooltipModule, declarations: [Tooltip], imports: [CommonModule, InputTextModule, ButtonModule], exports: [Tooltip] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: TooltipModule, imports: [CommonModule, InputTextModule, ButtonModule] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: TooltipModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [CommonModule],
+                    imports: [CommonModule, InputTextModule, ButtonModule],
                     exports: [Tooltip],
                     declarations: [Tooltip]
                 }]
         }] });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidG9vbHRpcC5tb2R1bGUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9zcmMvYXBwL2NvbXBvbmVudHMvdG9vbHRpcC90b29sdGlwLm1vZHVsZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDL0MsT0FBTyxFQUFFLFFBQVEsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUN6QyxPQUFPLEVBQUUsT0FBTyxFQUFFLE1BQU0sV0FBVyxDQUFDOztBQU9wQyxNQUFNLE9BQU8sYUFBYTt1R0FBYixhQUFhO3dHQUFiLGFBQWEsaUJBRlAsT0FBTyxhQUZaLFlBQVksYUFDWixPQUFPO3dHQUdSLGFBQWEsWUFKWixZQUFZOzsyRkFJYixhQUFhO2tCQUx6QixRQUFRO21CQUFDO29CQUNOLE9BQU8sRUFBRSxDQUFDLFlBQVksQ0FBQztvQkFDdkIsT0FBTyxFQUFFLENBQUMsT0FBTyxDQUFDO29CQUNsQixZQUFZLEVBQUUsQ0FBQyxPQUFPLENBQUM7aUJBQzFCIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tbW9uTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcbmltcG9ydCB7IE5nTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBUb29sdGlwIH0gZnJvbSAnLi90b29sdGlwJztcblxuQE5nTW9kdWxlKHtcbiAgICBpbXBvcnRzOiBbQ29tbW9uTW9kdWxlXSxcbiAgICBleHBvcnRzOiBbVG9vbHRpcF0sXG4gICAgZGVjbGFyYXRpb25zOiBbVG9vbHRpcF1cbn0pXG5leHBvcnQgY2xhc3MgVG9vbHRpcE1vZHVsZSB7fVxuIl19
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidG9vbHRpcC5tb2R1bGUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9zcmMvYXBwL2NvbXBvbmVudHMvdG9vbHRpcC90b29sdGlwLm1vZHVsZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDL0MsT0FBTyxFQUFFLFFBQVEsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUN6QyxPQUFPLEVBQUUsT0FBTyxFQUFFLE1BQU0sV0FBVyxDQUFDO0FBQ3BDLE9BQU8sRUFBRSxlQUFlLEVBQUUsTUFBTSw2QkFBNkIsQ0FBQztBQUM5RCxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0sMEJBQTBCLENBQUM7O0FBT3hELE1BQU0sT0FBTyxhQUFhO3VHQUFiLGFBQWE7d0dBQWIsYUFBYSxpQkFGUCxPQUFPLGFBRlosWUFBWSxFQUFFLGVBQWUsRUFBRSxZQUFZLGFBQzNDLE9BQU87d0dBR1IsYUFBYSxZQUpaLFlBQVksRUFBRSxlQUFlLEVBQUUsWUFBWTs7MkZBSTVDLGFBQWE7a0JBTHpCLFFBQVE7bUJBQUM7b0JBQ04sT0FBTyxFQUFFLENBQUMsWUFBWSxFQUFFLGVBQWUsRUFBRSxZQUFZLENBQUM7b0JBQ3RELE9BQU8sRUFBRSxDQUFDLE9BQU8sQ0FBQztvQkFDbEIsWUFBWSxFQUFFLENBQUMsT0FBTyxDQUFDO2lCQUMxQiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbW1vbk1vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XG5pbXBvcnQgeyBOZ01vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgVG9vbHRpcCB9IGZyb20gJy4vdG9vbHRpcCc7XG5pbXBvcnQgeyBJbnB1dFRleHRNb2R1bGUgfSBmcm9tICdjYXgtZGVzaWduLXN5c3RlbS9pbnB1dHRleHQnO1xuaW1wb3J0IHsgQnV0dG9uTW9kdWxlIH0gZnJvbSAnY2F4LWRlc2lnbi1zeXN0ZW0vYnV0dG9uJztcblxuQE5nTW9kdWxlKHtcbiAgICBpbXBvcnRzOiBbQ29tbW9uTW9kdWxlLCBJbnB1dFRleHRNb2R1bGUsIEJ1dHRvbk1vZHVsZV0sXG4gICAgZXhwb3J0czogW1Rvb2x0aXBdLFxuICAgIGRlY2xhcmF0aW9uczogW1Rvb2x0aXBdXG59KVxuZXhwb3J0IGNsYXNzIFRvb2x0aXBNb2R1bGUge31cbiJdfQ==

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

@@ -50,6 +50,8 @@ class AutoComplete {
      * @group Props
      */
     minLength = 1;
+    //@Input() size: 'sm' | 'md' | 'lg' = 'md';
+    size = 'medium';
     /**
      * Delay between keystrokes to wait before sending a query.
      * @group Props
@@ -149,7 +151,7 @@ class AutoComplete {
      * Size of the input field.
      * @group Props
      */
-    size;
+    //@Input({ transform: numberAttribute }) size: number | undefined;
     /**
      * Target element to attach the overlay, valid values are "body" or a local ng-template variable of another element (note: use binding with brackets for template variables, e.g. [appendTo]="mydiv" for a div element having #mydiv as variable name).
      * @group Props
@@ -530,7 +532,10 @@ class AutoComplete {
             'cax-autocomplete-dd': this.dropdown,
             'cax-autocomplete-multiple': this.multiple,
             'cax-inputwrapper-focus': this.focused,
-            'cax-overlay-open': this.overlayVisible
+            'cax-overlay-open': this.overlayVisible,
+            'cax-autocomplete-sm': this.size === 'small',
+            'cax-autocomplete-md': this.size === 'medium',
+            'cax-autocomplete-lg': this.size === 'large'
         };
     }
     get multiContainerClass() {
@@ -1247,7 +1252,7 @@ class AutoComplete {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", 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: "18.2.9", type: AutoComplete, selector: "cax-autoComplete", inputs: { minLength: ["minLength", "minLength", numberAttribute], 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], size: ["size", "size", numberAttribute], 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    \r\n    <SearchIcon  [styleClass]=\"'cax-autocomplete-search-icon'\" [attr.aria-hidden]=\"true\"  />\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    \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:inline-flex;position:relative}.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;margin-left:9px}}\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"] }, { 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 ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.2.9", type: AutoComplete, 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: "18.2.9", ngImport: i0, type: AutoComplete, decorators: [{
             type: Component,
@@ -1256,13 +1261,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
                         '[class.cax-inputwrapper-filled]': 'filled',
                         '[class.cax-inputwrapper-focus]': '((focused && !disabled) || autofocus) || overlayVisible',
                         '[class.cax-autocomplete-clearable]': 'showClear && !disabled'
-                    }, providers: [AUTOCOMPLETE_VALUE_ACCESSOR], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div #container [ngClass]=\"containerClass\" [ngStyle]=\"style\" [class]=\"styleClass\" (click)=\"onContainerClick($event)\">\r\n    \r\n    <SearchIcon  [styleClass]=\"'cax-autocomplete-search-icon'\" [attr.aria-hidden]=\"true\"  />\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    \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:inline-flex;position:relative}.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;margin-left:9px}}\n"] }]
+                    }, providers: [AUTOCOMPLETE_VALUE_ACCESSOR], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, 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"] }]
         }], ctorParameters: () => [{ type: Document, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]
                 }] }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: i1.caxConfig }, { type: i1.OverlayService }, { type: i0.NgZone }], propDecorators: { minLength: [{
                 type: Input,
                 args: [{ transform: numberAttribute }]
+            }], size: [{
+                type: Input
             }], delay: [{
                 type: Input,
                 args: [{ transform: numberAttribute }]
@@ -1309,9 +1316,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
             }], required: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
-            }], size: [{
-                type: Input,
-                args: [{ transform: numberAttribute }]
             }], appendTo: [{
                 type: Input
             }], autoHighlight: [{