cax-design-system 2.8.4 → 3.0.0

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

@@ -1,7 +1,7 @@
 import * as i2 from '@angular/common';
 import { DOCUMENT, CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { forwardRef, EventEmitter, signal, computed, effect, booleanAttribute, numberAttribute, Input, ContentChildren, ViewChild, Output, Inject, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
+import { forwardRef, EventEmitter, signal, computed, effect, numberAttribute, booleanAttribute, Input, ContentChildren, ViewChild, Output, Inject, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import * as i1 from 'cax-design-system/api';
 import { TranslationKeys, CaxTemplate, SharedModule } from 'cax-design-system/api';
@@ -15,16 +15,16 @@ import * as i5 from 'cax-design-system/ripple';
 import { RippleModule } from 'cax-design-system/ripple';
 import * as i6 from 'cax-design-system/scroller';
 import { ScrollerModule } from 'cax-design-system/scroller';
-import * as i7 from 'cax-design-system/autofocus';
+import * as i7 from 'cax-design-system/skeleton';
+import { SkeletonModule } from 'cax-design-system/skeleton';
+import * as i8 from 'cax-design-system/autofocus';
 import { AutoFocusModule } from 'cax-design-system/autofocus';
-import * as i8 from 'cax-design-system/icons/timescircle';
+import * as i9 from 'cax-design-system/icons/timescircle';
 import { TimesCircleIcon } from 'cax-design-system/icons/timescircle';
-import * as i9 from 'cax-design-system/icons/spinner';
-import { SpinnerIcon } from 'cax-design-system/icons/spinner';
 import * as i10 from 'cax-design-system/icons/chevrondown';
 import { ChevronDownIcon } from 'cax-design-system/icons/chevrondown';
-import * as i11 from 'cax-design-system/icons/search';
 import { SearchIcon } from 'cax-design-system/icons/search';
+import { SpinnerIcon } from 'cax-design-system/icons/spinner';
 import { TimesIcon } from 'cax-design-system/icons/times';
 import { InputTextModule } from 'cax-design-system/inputtext';
 
@@ -45,13 +45,13 @@ class AutoComplete {
     config;
     overlayService;
     zone;
+    configService;
     /**
      * Minimum number of characters to initiate a search.
      * @group Props
      */
     minLength = 1;
-    //@Input() size: 'sm' | 'md' | 'lg' = 'md';
-    size = 'medium';
+    size = 'md';
     /**
      * Delay between keystrokes to wait before sending a query.
      * @group Props
@@ -473,12 +473,13 @@ class AutoComplete {
     loadingIconTemplate;
     clearIconTemplate;
     dropdownIconTemplate;
+    actionTemplate;
     value;
     _suggestions = signal(null);
     onModelChange = () => { };
     onModelTouched = () => { };
     timeout;
-    overlayVisible;
+    overlayVisible = false;
     suggestionsUpdated;
     highlightOption;
     highlightOptionChanged;
@@ -490,13 +491,35 @@ class AutoComplete {
     set filled(value) {
         this._filled = value;
     }
-    loading;
-    isloading = false;
+    _loading = signal(false);
+    _searching = signal(false);
+    get loading() {
+        return this._loading();
+    }
+    set loading(value) {
+        this._loading.set(value);
+        this.cd.markForCheck();
+    }
+    get isLoading() {
+        return this._loading() || this._searching();
+    }
+    _skeletonCount = signal(3);
+    get skeletonCount() {
+        return this._skeletonCount();
+    }
+    set skeletonCount(value) {
+        this._skeletonCount.set(value);
+        this.cd.markForCheck();
+    }
+    get skeletonItems() {
+        return Array.from({ length: this.skeletonCount }, (_, i) => i);
+    }
     scrollHandler;
     listId;
     searchTimeout;
     dirty = false;
     modelValue = signal(null);
+    query = signal(null);
     focusedMultipleOptionIndex = signal(-1);
     focusedOptionIndex = signal(-1);
     visibleOptions = computed(() => {
@@ -533,9 +556,10 @@ class AutoComplete {
             'cax-autocomplete-multiple': this.multiple,
             'cax-inputwrapper-focus': this.focused,
             'cax-overlay-open': this.overlayVisible,
-            'cax-autocomplete-sm': this.size === 'small',
-            'cax-autocomplete-md': this.size === 'medium',
-            'cax-autocomplete-lg': this.size === 'large'
+            'cax-autocomplete-sm': this.size === 'sm',
+            'cax-autocomplete-md': this.size === 'md',
+            'cax-autocomplete-lg': this.size === 'lg',
+            'cax-autocomplete-with-actions': !!this.actionTemplate
         };
     }
     get multiContainerClass() {
@@ -558,7 +582,10 @@ class AutoComplete {
         return {
             'cax-autocomplete-input cax-inputtext cax-component': !this.multiple,
             'cax-autocomplete-dd-input': this.dropdown,
-            'cax-variant-filled': this.variant === 'filled' || this.config.inputStyle() === 'filled'
+            'cax-variant-filled': this.variant === 'filled' || this.config.inputStyle() === 'filled',
+            'cax-text-action-sm-medium': this.size === 'sm',
+            'cax-text-action-md-medium': this.size === 'md',
+            'cax-text-action-lg-medium': this.size === 'lg'
         };
     }
     get searchResultMessageText() {
@@ -592,9 +619,9 @@ class AutoComplete {
         return typeof this.modelValue() === 'string' && this.optionValue;
     }
     get isVisibleClearIcon() {
-        return this.modelValue() != null && this.hasSelectedOption() && this.showClear && !this.disabled && !this.loading && !this.isloading;
+        return this.modelValue() != null && this.hasSelectedOption() && this.showClear && !this.disabled && !this.isLoading;
     }
-    constructor(document, el, renderer, cd, config, overlayService, zone) {
+    constructor(document, el, renderer, cd, config, overlayService, zone, configService) {
         this.document = document;
         this.el = el;
         this.renderer = renderer;
@@ -602,6 +629,13 @@ class AutoComplete {
         this.config = config;
         this.overlayService = overlayService;
         this.zone = zone;
+        this.configService = configService;
+        effect(() => {
+            const loading = this._loading();
+            if (loading && !this.overlayVisible) {
+                this.show();
+            }
+        });
         effect(() => {
             this.filled = ObjectUtils.isNotEmpty(this.modelValue());
         });
@@ -659,6 +693,9 @@ class AutoComplete {
                 case 'dropdownicon':
                     this.dropdownIconTemplate = item.template;
                     break;
+                case 'action':
+                    this.actionTemplate = item.template;
+                    break;
                 default:
                     this.itemTemplate = item.template;
                     break;
@@ -666,24 +703,24 @@ class AutoComplete {
         });
     }
     handleSuggestionsChange() {
-        if (this.loading) {
-            this._suggestions().length > 0 || this.showEmptyMessage ? this.show() : !!this.emptyTemplate ? this.show() : this.hide();
-            const focusedOptionIndex = this.overlayVisible && this.autoOptionFocus ? this.findFirstFocusedOptionIndex() : -1;
-            this.focusedOptionIndex.set(focusedOptionIndex);
-            this.suggestionsUpdated = true;
-            this.loading = false;
-            this.cd.markForCheck();
+        if (this.dirty) {
+            this.isLoading || this._suggestions().length > 0 || this.showEmptyMessage ? this.show() : !!this.emptyTemplate ? this.show() : this.hide();
         }
+        const focusedOptionIndex = this.overlayVisible && this.autoOptionFocus ? this.findFirstFocusedOptionIndex() : -1;
+        this.focusedOptionIndex.set(focusedOptionIndex);
+        this.suggestionsUpdated = true;
+        this._searching.set(false);
+        this.cd.markForCheck();
     }
     handleSuggestionsChange2() {
-        if (this.isloading) {
-            this._suggestions().length > 0 || this.showEmptyMessage ? this.show() : !!this.emptyTemplate ? this.show() : this.hide();
-            const focusedOptionIndex = this.overlayVisible && this.autoOptionFocus ? this.findFirstFocusedOptionIndex() : -1;
-            this.focusedOptionIndex.set(focusedOptionIndex);
-            this.suggestionsUpdated = true;
-            //this.isloading = false;
-            this.cd.markForCheck();
+        if (this.dirty) {
+            this.isLoading || this._suggestions().length > 0 || this.showEmptyMessage ? this.show() : !!this.emptyTemplate ? this.show() : this.hide();
         }
+        const focusedOptionIndex = this.overlayVisible && this.autoOptionFocus ? this.findFirstFocusedOptionIndex() : -1;
+        this.focusedOptionIndex.set(focusedOptionIndex);
+        this.suggestionsUpdated = true;
+        this._searching.set(false);
+        this.cd.markForCheck();
     }
     flatOptions(options) {
         return (options || []).reduce((result, option, index) => {
@@ -753,7 +790,7 @@ class AutoComplete {
         return this.dataKey; // TODO: The 'optionValue' properties can be added.
     }
     onContainerClick(event) {
-        if (this.disabled || this.loading || this.isInputClicked(event) || this.isDropdownClicked(event)) {
+        if (this.disabled || this.isLoading || this.isInputClicked(event) || this.isDropdownClicked(event)) {
             return;
         }
         if (!this.overlayViewChild || !this.overlayViewChild.overlayViewChild?.nativeElement.contains(event.target)) {
@@ -1076,7 +1113,11 @@ class AutoComplete {
         if (source === 'input' && query.trim().length < this.minLength) {
             return;
         }
-        this.loading = true;
+        this.query.set(query);
+        this._searching.set(true);
+        if (!this.overlayVisible) {
+            this.show();
+        }
         this.completeMethod.emit({ originalEvent: event, query });
     }
     removeOption(event, index) {
@@ -1187,8 +1228,17 @@ class AutoComplete {
                     .filter((option) => this.isOptionGroup(option)).length
             : index) + 1);
     }
+    highlightText(text) {
+        const query = this.query();
+        if (!query || !text) {
+            return text;
+        }
+        const escapedQuery = query.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+        const regex = new RegExp(`(${escapedQuery})`, 'gi');
+        return text.replace(regex, '<span class="cax-autocomplete-highlight">$1</span>');
+    }
     getOptionLabel(option) {
-        return this.field || this.optionLabel ? ObjectUtils.resolveFieldData(option, this.field || this.optionLabel) : option && option.label != undefined ? option.label : option;
+        return this.field || this.optionLabel ? (typeof option === 'object' ? ObjectUtils.resolveFieldData(option, this.field || this.optionLabel) : option) : option && option.label != undefined ? option.label : option;
     }
     getOptionValue(option) {
         return this.optionValue ? ObjectUtils.resolveFieldData(option, this.optionValue) : option;
@@ -1251,21 +1301,21 @@ class AutoComplete {
             this.scrollHandler = null;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: AutoComplete, deps: [{ token: DOCUMENT }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i1.caxConfig }, { token: i1.OverlayService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.16", type: AutoComplete, isStandalone: false, selector: "cax-autoComplete", inputs: { minLength: ["minLength", "minLength", numberAttribute], size: "size", delay: ["delay", "delay", numberAttribute], style: "style", panelStyle: "panelStyle", styleClass: "styleClass", panelStyleClass: "panelStyleClass", inputStyle: "inputStyle", inputId: "inputId", inputStyleClass: "inputStyleClass", placeholder: "placeholder", readonly: ["readonly", "readonly", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], scrollHeight: "scrollHeight", lazy: ["lazy", "lazy", booleanAttribute], virtualScroll: ["virtualScroll", "virtualScroll", booleanAttribute], virtualScrollItemSize: ["virtualScrollItemSize", "virtualScrollItemSize", numberAttribute], virtualScrollOptions: "virtualScrollOptions", maxlength: ["maxlength", "maxlength", (value) => numberAttribute(value, null)], name: "name", required: ["required", "required", booleanAttribute], appendTo: "appendTo", autoHighlight: ["autoHighlight", "autoHighlight", booleanAttribute], forceSelection: ["forceSelection", "forceSelection", booleanAttribute], type: "type", autoZIndex: ["autoZIndex", "autoZIndex", booleanAttribute], baseZIndex: ["baseZIndex", "baseZIndex", numberAttribute], ariaLabel: "ariaLabel", dropdownAriaLabel: "dropdownAriaLabel", ariaLabelledBy: "ariaLabelledBy", dropdownIcon: "dropdownIcon", unique: ["unique", "unique", booleanAttribute], group: ["group", "group", booleanAttribute], completeOnFocus: ["completeOnFocus", "completeOnFocus", booleanAttribute], showClear: ["showClear", "showClear", booleanAttribute], field: "field", dropdown: ["dropdown", "dropdown", booleanAttribute], showEmptyMessage: ["showEmptyMessage", "showEmptyMessage", booleanAttribute], dropdownMode: "dropdownMode", multiple: ["multiple", "multiple", booleanAttribute], tabindex: ["tabindex", "tabindex", numberAttribute], dataKey: "dataKey", emptyMessage: "emptyMessage", showTransitionOptions: "showTransitionOptions", hideTransitionOptions: "hideTransitionOptions", autofocus: ["autofocus", "autofocus", booleanAttribute], autocomplete: "autocomplete", optionGroupChildren: "optionGroupChildren", optionGroupLabel: "optionGroupLabel", overlayOptions: "overlayOptions", suggestions: "suggestions", itemSize: "itemSize", optionLabel: "optionLabel", optionValue: "optionValue", id: "id", searchMessage: "searchMessage", emptySelectionMessage: "emptySelectionMessage", selectionMessage: "selectionMessage", autoOptionFocus: ["autoOptionFocus", "autoOptionFocus", booleanAttribute], selectOnFocus: ["selectOnFocus", "selectOnFocus", booleanAttribute], searchLocale: ["searchLocale", "searchLocale", booleanAttribute], optionDisabled: "optionDisabled", focusOnHover: ["focusOnHover", "focusOnHover", booleanAttribute], variant: "variant", isloading: "isloading" }, outputs: { completeMethod: "completeMethod", onSelect: "onSelect", onUnselect: "onUnselect", onFocus: "onFocus", onBlur: "onBlur", onDropdownClick: "onDropdownClick", onClear: "onClear", onKeyUp: "onKeyUp", onShow: "onShow", onHide: "onHide", onLazyLoad: "onLazyLoad" }, host: { properties: { "class.cax-inputwrapper-filled": "filled", "class.cax-inputwrapper-focus": "((focused && !disabled) || autofocus) || overlayVisible", "class.cax-autocomplete-clearable": "showClear && !disabled" }, classAttribute: "cax-element cax-inputwrapper" }, providers: [AUTOCOMPLETE_VALUE_ACCESSOR], queries: [{ propertyName: "templates", predicate: CaxTemplate }], viewQueries: [{ propertyName: "containerEL", first: true, predicate: ["container"], descendants: true }, { propertyName: "inputEL", first: true, predicate: ["focusInput"], descendants: true }, { propertyName: "multiInputEl", first: true, predicate: ["multiIn"], descendants: true }, { propertyName: "multiContainerEL", first: true, predicate: ["multiContainer"], descendants: true }, { propertyName: "dropdownButton", first: true, predicate: ["ddBtn"], descendants: true }, { propertyName: "itemsViewChild", first: true, predicate: ["items"], descendants: true }, { propertyName: "scroller", first: true, predicate: ["scroller"], descendants: true }, { propertyName: "overlayViewChild", first: true, predicate: ["overlay"], descendants: true }], ngImport: i0, template: "<div #container [ngClass]=\"containerClass\"   [ngStyle]=\"style\" [class]=\"styleClass\" (click)=\"onContainerClick($event)\">\r\n    <input\r\n        *ngIf=\"!multiple\"\r\n        #focusInput\r\n        caxAutoFocus\r\n        [autofocus]=\"autofocus\"\r\n        [ngClass]=\"inputClass\"\r\n        [ngStyle]=\"inputStyle\"\r\n        [class]=\"inputStyleClass\"\r\n        [type]=\"type\"\r\n        [attr.value]=\"inputValue()\"\r\n        [attr.id]=\"inputId\"\r\n        [autocomplete]=\"autocomplete\"\r\n        [required]=\"required\"\r\n        [name]=\"name\"\r\n        aria-autocomplete=\"list\"\r\n        role=\"combobox\"\r\n        [attr.placeholder]=\"placeholder\"\r\n        [attr.size]=\"size\"\r\n        [attr.maxlength]=\"maxlength\"\r\n        [tabindex]=\"!disabled ? tabindex : -1\"\r\n        [readonly]=\"readonly\"\r\n        [disabled]=\"disabled\"\r\n        [attr.aria-label]=\"ariaLabel\"\r\n        [attr.aria-labelledby]=\"ariaLabelledBy\"\r\n        [attr.aria-required]=\"required\"\r\n        [attr.aria-expanded]=\"overlayVisible ?? false\"\r\n        [attr.aria-controls]=\"overlayVisible ? id + '_list' : null\"\r\n        [attr.aria-activedescendant]=\"focused ? focusedOptionId : undefined\"\r\n        (input)=\"onInput($event)\"\r\n        (keydown)=\"onKeyDown($event)\"\r\n        (change)=\"onInputChange($event)\"\r\n        (focus)=\"onInputFocus($event)\"\r\n        (blur)=\"onInputBlur($event)\"\r\n        (paste)=\"onInputPaste($event)\"\r\n        (keyup)=\"onInputKeyUp($event)\"\r\n    />  \r\n    <SearchIcon  [styleClass]=\"'cax-autocomplete-search-icon'\"  />\r\n\r\n    \r\n    <ng-container *ngIf=\"isVisibleClearIcon\">\r\n        <TimesCircleIcon  *ngIf=\"!clearIconTemplate\" [styleClass]=\"'cax-autocomplete-clear-icon cax-autoComplete-clear'\" (click)=\"clear()\" [attr.aria-hidden]=\"true\" />\r\n        <span *ngIf=\"clearIconTemplate\" class=\"cax-autocomplete-clear-icon\" (click)=\"clear()\" [attr.aria-hidden]=\"true\">\r\n            <ng-template *ngTemplateOutlet=\"clearIconTemplate\"></ng-template>\r\n        </span>\r\n    </ng-container>\r\n\r\n    <ul\r\n        *ngIf=\"multiple\"\r\n        #multiContainer\r\n        [ngClass]=\"multiContainerClass\"\r\n        [tabindex]=\"-1\"\r\n        role=\"listbox\"\r\n        [attr.aria-orientation]=\"'horizontal'\"\r\n        [attr.aria-activedescendant]=\"focused ? focusedMultipleOptionId : undefined\"\r\n        (focus)=\"onMultipleContainerFocus($event)\"\r\n        (blur)=\"onMultipleContainerBlur($event)\"\r\n        (keydown)=\"onMultipleContainerKeyDown($event)\"\r\n    >\r\n        <li\r\n            #token\r\n            *ngFor=\"let option of modelValue(); let i = index\"\r\n            [ngClass]=\"{ 'cax-autocomplete-token': true, 'cax-focus': focusedMultipleOptionIndex() === i }\"\r\n            [attr.id]=\"id + '_multiple_option_' + i\"\r\n            role=\"option\"\r\n            [attr.aria-label]=\"getOptionLabel(option)\"\r\n            [attr.aria-setsize]=\"modelValue().length\"\r\n            [attr.aria-posinset]=\"i + 1\"\r\n            [attr.aria-selected]=\"true\"\r\n        >\r\n            <ng-container *ngTemplateOutlet=\"selectedItemTemplate; context: { $implicit: option }\"></ng-container>\r\n            <span *ngIf=\"!selectedItemTemplate\" class=\"cax-autocomplete-token-label\">{{ getMultipleLabel(option) }}</span>\r\n            <span class=\"cax-autocomplete-token-icon\" (click)=\"!readonly ? removeOption($event, i) : ''\">\r\n                <TimesCircleIcon [styleClass]=\"'cax-autocomplete-token-icon'\" *ngIf=\"!removeIconTemplate\" [attr.aria-hidden]=\"true\" />\r\n                <span *ngIf=\"removeIconTemplate\" class=\"cax-autocomplete-token-icon\" [attr.aria-hidden]=\"true\">\r\n                    <ng-template *ngTemplateOutlet=\"removeIconTemplate\"></ng-template>\r\n                </span>\r\n            </span>\r\n        </li>\r\n        <li class=\"cax-autocomplete-input-token\" role=\"option\">\r\n            <input\r\n                #focusInput\r\n                caxAutoFocus\r\n                [autofocus]=\"autofocus\"\r\n                [ngClass]=\"inputClass\"\r\n                [ngStyle]=\"inputStyle\"\r\n                [class]=\"inputStyleClass\"\r\n                [attr.type]=\"type\"\r\n                [attr.id]=\"inputId\"\r\n                [autocomplete]=\"autocomplete\"\r\n                [required]=\"required\"\r\n                [attr.name]=\"name\"\r\n                role=\"combobox\"\r\n                [attr.placeholder]=\"!filled ? placeholder : null\"\r\n                [attr.size]=\"size\"\r\n                aria-autocomplete=\"list\"\r\n                [attr.maxlength]=\"maxlength\"\r\n                [tabindex]=\"!disabled ? tabindex : -1\"\r\n                [readonly]=\"readonly\"\r\n                [disabled]=\"disabled\"\r\n                [attr.aria-label]=\"ariaLabel\"\r\n                [attr.aria-labelledby]=\"ariaLabelledBy\"\r\n                [attr.aria-required]=\"required\"\r\n                [attr.aria-expanded]=\"overlayVisible ?? false\"\r\n                [attr.aria-controls]=\"overlayVisible ? id + '_list' : null\"\r\n                [attr.aria-activedescendant]=\"focused ? focusedOptionId : undefined\"\r\n                (input)=\"onInput($event)\"\r\n                (keydown)=\"onKeyDown($event)\"\r\n                (change)=\"onInputChange($event)\"\r\n                (focus)=\"onInputFocus($event)\"\r\n                (blur)=\"onInputBlur($event)\"\r\n                (paste)=\"onInputPaste($event)\"\r\n                (keyup)=\"onInputKeyUp($event)\"\r\n            />\r\n        </li>\r\n    </ul>\r\n    <ng-container *ngIf=\"loading\">\r\n        <SpinnerIcon *ngIf=\"!loadingIconTemplate\" [styleClass]=\"'cax-autocomplete-loader'\" [spin]=\"true\" [attr.aria-hidden]=\"true\" />\r\n        <span *ngIf=\"loadingIconTemplate\" class=\"cax-autocomplete-loader pi-spin \" [attr.aria-hidden]=\"true\">\r\n            <ng-template *ngTemplateOutlet=\"loadingIconTemplate\"></ng-template>\r\n        </span>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"isloading\">\r\n        <SpinnerIcon *ngIf=\"!loadingIconTemplate\" [styleClass]=\"'cax-autocomplete-loader'\" [spin]=\"true\" [attr.aria-hidden]=\"true\" />\r\n        <span *ngIf=\"loadingIconTemplate\" class=\"cax-autocomplete-loader pi-spin \" [attr.aria-hidden]=\"true\">\r\n            <ng-template *ngTemplateOutlet=\"loadingIconTemplate\"></ng-template>\r\n        </span>\r\n    </ng-container>\r\n    <button #ddBtn type=\"button\" caxButton [attr.aria-label]=\"dropdownAriaLabel\" class=\"cax-autocomplete-dropdown cax-button-icon-only\" [disabled]=\"disabled\" caxRipple (click)=\"handleDropdownClick($event)\" *ngIf=\"dropdown\" [attr.tabindex]=\"tabindex\">\r\n        <span *ngIf=\"dropdownIcon\" [ngClass]=\"dropdownIcon\" [attr.aria-hidden]=\"true\"></span>\r\n        <ng-container *ngIf=\"!dropdownIcon\">\r\n            <ChevronDownIcon *ngIf=\"!dropdownIconTemplate\" />\r\n            <ng-template *ngTemplateOutlet=\"dropdownIconTemplate\"></ng-template>\r\n        </ng-container>\r\n    </button>\r\n    <cax-overlay\r\n        #overlay\r\n        [(visible)]=\"overlayVisible\"\r\n        [options]=\"overlayOptions\"\r\n        [target]=\"'@parent'\"\r\n        [appendTo]=\"appendTo\"\r\n        [showTransitionOptions]=\"showTransitionOptions\"\r\n        [hideTransitionOptions]=\"hideTransitionOptions\"\r\n        (onAnimationStart)=\"onOverlayAnimationStart($event)\"\r\n        (onHide)=\"hide()\"\r\n    >\r\n        <div [ngClass]=\"panelClass\" [ngStyle]=\"panelStyles\" [class]=\"panelStyleClass\">\r\n            <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\r\n            <cax-scroller\r\n                *ngIf=\"virtualScroll\"\r\n                #scroller\r\n                [items]=\"visibleOptions()\"\r\n                [style]=\"{ height: scrollHeight }\"\r\n                [itemSize]=\"virtualScrollItemSize || _itemSize\"\r\n                [autoSize]=\"true\"\r\n                [lazy]=\"lazy\"\r\n                (onLazyLoad)=\"onLazyLoad.emit($event)\"\r\n                [options]=\"virtualScrollOptions\"\r\n            >\r\n                <ng-template caxTemplate=\"content\" let-items let-scrollerOptions=\"options\">\r\n                    <ng-container *ngTemplateOutlet=\"buildInItems; context: { $implicit: items, options: scrollerOptions }\"></ng-container>\r\n                </ng-template>\r\n                <ng-container *ngIf=\"loaderTemplate\">\r\n                    <ng-template caxTemplate=\"loader\" let-scrollerOptions=\"options\">\r\n                        <ng-container *ngTemplateOutlet=\"loaderTemplate; context: { options: scrollerOptions }\"></ng-container>\r\n                    </ng-template>\r\n                </ng-container>\r\n            </cax-scroller>\r\n            <ng-container *ngIf=\"!virtualScroll\">\r\n                <ng-container *ngTemplateOutlet=\"buildInItems; context: { $implicit: visibleOptions(), options: {} }\"></ng-container>\r\n            </ng-container>\r\n\r\n            <ng-template #buildInItems let-items let-scrollerOptions=\"options\">\r\n                <ul #items class=\"cax-autocomplete-items\" [ngClass]=\"scrollerOptions.contentStyleClass\" [style]=\"scrollerOptions.contentStyle\" role=\"listbox\" [attr.id]=\"id + '_list'\" [attr.aria-label]=\"listLabel\">\r\n                    <ng-template ngFor let-option [ngForOf]=\"items\" let-i=\"index\">\r\n                        <ng-container *ngIf=\"isOptionGroup(option)\">\r\n                            <li [attr.id]=\"id + '_' + getOptionIndex(i, scrollerOptions)\" class=\"cax-autocomplete-item-group\" [ngStyle]=\"{ height: scrollerOptions.itemSize + 'px' }\" role=\"option\">\r\n                                <span *ngIf=\"!groupTemplate\">{{ getOptionGroupLabel(option.optionGroup) }}</span>\r\n                                <ng-container *ngTemplateOutlet=\"groupTemplate; context: { $implicit: option.optionGroup }\"></ng-container>\r\n                            </li>\r\n                        </ng-container>\r\n                        <ng-container *ngIf=\"!isOptionGroup(option)\">\r\n                            <li\r\n                                class=\"cax-autocomplete-item\"\r\n                                caxRipple\r\n                                [ngStyle]=\"{ height: scrollerOptions.itemSize + 'px' }\"\r\n                                [ngClass]=\"{ 'cax-highlight': isSelected(option), 'cax-focus': focusedOptionIndex() === getOptionIndex(i, scrollerOptions), 'cax-disabled': isOptionDisabled(option) }\"\r\n                                [attr.id]=\"id + '_' + getOptionIndex(i, scrollerOptions)\"\r\n                                role=\"option\"\r\n                                [attr.aria-label]=\"getOptionLabel(option)\"\r\n                                [attr.aria-selected]=\"isSelected(option)\"\r\n                                [attr.aria-disabled]=\"isOptionDisabled(option)\"\r\n                                [attr.data-p-focused]=\"focusedOptionIndex() === getOptionIndex(i, scrollerOptions)\"\r\n                                [attr.aria-setsize]=\"ariaSetSize\"\r\n                                [attr.aria-posinset]=\"getAriaPosInset(getOptionIndex(i, scrollerOptions))\"\r\n                                (click)=\"onOptionSelect($event, option)\"\r\n                                (mouseenter)=\"onOptionMouseEnter($event, getOptionIndex(i, scrollerOptions))\"\r\n                            >\r\n                                <span *ngIf=\"!itemTemplate\">{{ getOptionLabel(option) }}</span>\r\n                                <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: option, index: scrollerOptions.getOptions ? scrollerOptions.getOptions(i) : i }\"></ng-container>\r\n                            </li>\r\n                        </ng-container>\r\n                    </ng-template>\r\n                    <li *ngIf=\"!items || (items && items.length === 0 && showEmptyMessage)\" class=\"cax-autocomplete-empty-message\" [ngStyle]=\"{ height: scrollerOptions.itemSize + 'px' }\" role=\"option\">\r\n                        <ng-container *ngIf=\"!emptyTemplate; else empty\">\r\n                            {{ searchResultMessageText }}\r\n                        </ng-container>\r\n                        <ng-container #empty *ngTemplateOutlet=\"emptyTemplate\"></ng-container>\r\n                    </li>\r\n                </ul>\r\n            </ng-template>\r\n            <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\r\n        </div>\r\n        <!-- <span role=\"status\" aria-live=\"polite\" class=\"p-hidden-accessible\">\r\n            {{ selectedMessageText }}\r\n        </span> -->\r\n    </cax-overlay>\r\n</div>\r\n", styles: ["@layer cax{.cax-autocomplete{display:flex;position:relative;height:40px}.cax-autocomplete-loader{position:absolute;top:50%;margin-top:-.5rem;right:7px}.cax-autocomplete-dd .cax-autocomplete-input{flex:1 1 auto;width:1%;padding-left:3rem}.cax-autocomplete-dd .cax-autocomplete-input,.cax-autocomplete-dd .cax-autocomplete-multiple-container{border-top-right-radius:0;border-bottom-right-radius:0}.cax-autocomplete-dd .cax-autocomplete-dropdown{border-top-left-radius:0;border-bottom-left-radius:0}.cax-autocomplete-panel{overflow:auto}.cax-autocomplete-items{margin:0;padding:0;list-style-type:none}.cax-autocomplete-item{cursor:pointer;white-space:nowrap;position:relative;overflow:hidden}.cax-autocomplete-multiple-container{margin:0;padding:0;list-style-type:none;cursor:text;overflow:hidden;display:flex;align-items:center;flex-wrap:wrap}.cax-autocomplete-token{width:fit-content;cursor:default;display:inline-flex;align-items:center;flex:0 0 auto}.cax-autocomplete-token-icon{display:flex;cursor:pointer}.cax-autocomplete-input-token{flex:1 1 auto;display:inline-flex}.cax-autocomplete-input-token input{border:0 none;outline:0 none;background-color:transparent;margin:0;padding:0;box-shadow:none;border-radius:0;width:100%}.cax-fluid .cax-autocomplete{display:flex}.cax-fluid .cax-autocomplete-dd .cax-autocomplete-input{width:1%}.cax-autocomplete-clear-icon{position:absolute;top:50%;margin-top:-.5rem;cursor:pointer;right:10px}.cax-autocomplete-search-icon{position:absolute;top:50%;margin-top:-.5rem;cursor:pointer;left:9px}.cax-autocomplete-sm{height:32px!important}.cax-autocomplete-sm .cax-inputtext{font-size:12px!important}.cax-autocomplete-sm .cax-autocomplete-clear-icon,.cax-autocomplete-sm .cax-autocomplete-search-icon{width:12px!important;height:12px!important;margin-top:-.3rem}.cax-autocomplete-md{height:40px!important}.cax-autocomplete-md .cax-inputtext{font-size:16px!important}.cax-autocomplete-md .cax-autocomplete-clear-icon,.cax-autocomplete-md .cax-autocomplete-search-icon{width:16px!important;height:16px!important}.cax-autocomplete-md .cax-inputtext{padding-left:2rem!important;padding-right:2rem!important}.cax-autocomplete-md .cax-autocomplete-loader{width:16px!important;height:16px!important}.cax-autocomplete-lg{height:48px!important}.cax-autocomplete-lg .cax-inputtext{font-size:18px!important}.cax-autocomplete-lg .cax-autocomplete-clear-icon,.cax-autocomplete-lg .cax-autocomplete-search-icon,.cax-autocomplete-lg .cax-autocomplete-loader{width:18px!important;height:18px!important;margin-top:-.6rem}.cax-autocomplete-lg .cax-inputtext{padding-left:2.4rem!important;padding-right:2.4rem!important}}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i3.Overlay, selector: "cax-overlay", inputs: ["visible", "mode", "style", "styleClass", "contentStyle", "contentStyleClass", "target", "appendTo", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "listener", "responsive", "options"], outputs: ["visibleChange", "onBeforeShow", "onShow", "onBeforeHide", "onHide", "onAnimationStart", "onAnimationDone"] }, { kind: "directive", type: i1.CaxTemplate, selector: "[caxTemplate]", inputs: ["type", "caxTemplate"] }, { kind: "directive", type: i4.ButtonDirective, selector: "[caxButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "link"] }, { kind: "directive", type: i5.Ripple, selector: "[caxRipple]" }, { kind: "component", type: i6.Scroller, selector: "cax-scroller", inputs: ["id", "style", "styleClass", "tabindex", "items", "itemSize", "scrollHeight", "scrollWidth", "orientation", "step", "delay", "resizeDelay", "appendOnly", "inline", "lazy", "disabled", "loaderDisabled", "columns", "showSpacer", "showLoader", "numToleratedItems", "loading", "autoSize", "trackBy", "options"], outputs: ["onLazyLoad", "onScroll", "onScrollIndexChange"] }, { kind: "directive", type: i7.AutoFocus, selector: "[caxAutoFocus]", inputs: ["autofocus"] }, { kind: "component", type: i8.TimesCircleIcon, selector: "TimesCircleIcon" }, { kind: "component", type: i9.SpinnerIcon, selector: "SpinnerIcon" }, { kind: "component", type: i10.ChevronDownIcon, selector: "ChevronDownIcon" }, { kind: "component", type: i11.SearchIcon, selector: "SearchIcon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", 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 }, { token: i1.OverlayService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.21", type: AutoComplete, isStandalone: false, selector: "cax-autoComplete", inputs: { minLength: ["minLength", "minLength", numberAttribute], size: "size", delay: ["delay", "delay", numberAttribute], style: "style", panelStyle: "panelStyle", styleClass: "styleClass", panelStyleClass: "panelStyleClass", inputStyle: "inputStyle", inputId: "inputId", inputStyleClass: "inputStyleClass", placeholder: "placeholder", readonly: ["readonly", "readonly", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], scrollHeight: "scrollHeight", lazy: ["lazy", "lazy", booleanAttribute], virtualScroll: ["virtualScroll", "virtualScroll", booleanAttribute], virtualScrollItemSize: ["virtualScrollItemSize", "virtualScrollItemSize", numberAttribute], virtualScrollOptions: "virtualScrollOptions", maxlength: ["maxlength", "maxlength", (value) => numberAttribute(value, null)], name: "name", required: ["required", "required", booleanAttribute], appendTo: "appendTo", autoHighlight: ["autoHighlight", "autoHighlight", booleanAttribute], forceSelection: ["forceSelection", "forceSelection", booleanAttribute], type: "type", autoZIndex: ["autoZIndex", "autoZIndex", booleanAttribute], baseZIndex: ["baseZIndex", "baseZIndex", numberAttribute], ariaLabel: "ariaLabel", dropdownAriaLabel: "dropdownAriaLabel", ariaLabelledBy: "ariaLabelledBy", dropdownIcon: "dropdownIcon", unique: ["unique", "unique", booleanAttribute], group: ["group", "group", booleanAttribute], completeOnFocus: ["completeOnFocus", "completeOnFocus", booleanAttribute], showClear: ["showClear", "showClear", booleanAttribute], field: "field", dropdown: ["dropdown", "dropdown", booleanAttribute], showEmptyMessage: ["showEmptyMessage", "showEmptyMessage", booleanAttribute], dropdownMode: "dropdownMode", multiple: ["multiple", "multiple", booleanAttribute], tabindex: ["tabindex", "tabindex", numberAttribute], dataKey: "dataKey", emptyMessage: "emptyMessage", showTransitionOptions: "showTransitionOptions", hideTransitionOptions: "hideTransitionOptions", autofocus: ["autofocus", "autofocus", booleanAttribute], autocomplete: "autocomplete", optionGroupChildren: "optionGroupChildren", optionGroupLabel: "optionGroupLabel", overlayOptions: "overlayOptions", suggestions: "suggestions", itemSize: "itemSize", optionLabel: "optionLabel", optionValue: "optionValue", id: "id", searchMessage: "searchMessage", emptySelectionMessage: "emptySelectionMessage", selectionMessage: "selectionMessage", autoOptionFocus: ["autoOptionFocus", "autoOptionFocus", booleanAttribute], selectOnFocus: ["selectOnFocus", "selectOnFocus", booleanAttribute], searchLocale: ["searchLocale", "searchLocale", booleanAttribute], optionDisabled: "optionDisabled", focusOnHover: ["focusOnHover", "focusOnHover", booleanAttribute], variant: "variant", loading: ["loading", "loading", booleanAttribute], skeletonCount: ["skeletonCount", "skeletonCount", numberAttribute] }, 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)\">\n    <input\n        *ngIf=\"!multiple\"\n        #focusInput\n        caxAutoFocus\n        [autofocus]=\"autofocus\"\n        [ngClass]=\"inputClass\"\n        [ngStyle]=\"inputStyle\"\n        [class]=\"inputStyleClass\"\n        [type]=\"type\"\n        [attr.id]=\"inputId\"\n        [autocomplete]=\"autocomplete\"\n        [required]=\"required\"\n        [name]=\"name\"\n        aria-autocomplete=\"list\"\n        role=\"combobox\"\n        [attr.placeholder]=\"placeholder\"\n        [attr.maxlength]=\"maxlength\"\n        [tabindex]=\"!disabled ? tabindex : -1\"\n        [readonly]=\"readonly\"\n        [disabled]=\"disabled\"\n        [attr.aria-label]=\"ariaLabel\"\n        [attr.aria-labelledby]=\"ariaLabelledBy\"\n        [attr.aria-required]=\"required\"\n        [attr.aria-expanded]=\"overlayVisible ?? false\"\n        [attr.aria-controls]=\"overlayVisible ? id + '_list' : null\"\n        [attr.aria-activedescendant]=\"focused ? focusedOptionId : undefined\"\n        (input)=\"onInput($event)\"\n        (keydown)=\"onKeyDown($event)\"\n        (change)=\"onInputChange($event)\"\n        (focus)=\"onInputFocus($event)\"\n        (blur)=\"onInputBlur($event)\"\n        (paste)=\"onInputPaste($event)\"\n        (keyup)=\"onInputKeyUp($event)\"\n    />\n    <!-- <SearchIcon [styleClass]=\"'cax-autocomplete-search-icon'\" /> -->\n    <i class=\"cax cax-magnifier cax-autocomplete-search-icon\"></i>\n\n    <div class=\"cax-autocomplete-trailing\">\n        <ng-container *ngIf=\"isVisibleClearIcon\">\n            <i *ngIf=\"!clearIconTemplate\" class=\"cax cax-close-circle cax-autocomplete-clear-icon cax-autoComplete-clear\" (click)=\"clear()\"></i>\n            <span *ngIf=\"clearIconTemplate\" class=\"cax-autocomplete-clear-icon\" (click)=\"clear()\" [attr.aria-hidden]=\"true\">\n                <ng-template *ngTemplateOutlet=\"clearIconTemplate\"></ng-template>\n            </span>\n        </ng-container>\n\n        <div class=\"cax-autocomplete-action-divider\" *ngIf=\"actionTemplate && overlayVisible\"></div>\n\n        <ng-container *ngIf=\"actionTemplate && overlayVisible\">\n            <div class=\"cax-autocomplete-action\">\n                <ng-container *ngTemplateOutlet=\"actionTemplate\"></ng-container>\n            </div>\n        </ng-container>\n    </div>\n\n    <ul\n        *ngIf=\"multiple\"\n        #multiContainer\n        [ngClass]=\"multiContainerClass\"\n        [tabindex]=\"-1\"\n        role=\"listbox\"\n        [attr.aria-orientation]=\"'horizontal'\"\n        [attr.aria-activedescendant]=\"focused ? focusedMultipleOptionId : undefined\"\n        (focus)=\"onMultipleContainerFocus($event)\"\n        (blur)=\"onMultipleContainerBlur($event)\"\n        (keydown)=\"onMultipleContainerKeyDown($event)\"\n    >\n        <li\n            #token\n            *ngFor=\"let option of modelValue(); let i = index\"\n            [ngClass]=\"{ 'cax-autocomplete-token': true, 'cax-focus': focusedMultipleOptionIndex() === i }\"\n            [attr.id]=\"id + '_multiple_option_' + i\"\n            role=\"option\"\n            [attr.aria-label]=\"getOptionLabel(option)\"\n            [attr.aria-setsize]=\"modelValue().length\"\n            [attr.aria-posinset]=\"i + 1\"\n            [attr.aria-selected]=\"true\"\n        >\n            <ng-container *ngTemplateOutlet=\"selectedItemTemplate; context: { $implicit: option }\"></ng-container>\n            <span *ngIf=\"!selectedItemTemplate\" class=\"cax-autocomplete-token-label\">{{ getMultipleLabel(option) }}</span>\n            <span class=\"cax-autocomplete-token-icon\" (click)=\"!readonly ? removeOption($event, i) : ''\">\n                <TimesCircleIcon [styleClass]=\"'cax-autocomplete-token-icon'\" *ngIf=\"!removeIconTemplate\" [attr.aria-hidden]=\"true\" />\n                <span *ngIf=\"removeIconTemplate\" class=\"cax-autocomplete-token-icon\" [attr.aria-hidden]=\"true\">\n                    <ng-template *ngTemplateOutlet=\"removeIconTemplate\"></ng-template>\n                </span>\n            </span>\n        </li>\n        <li class=\"cax-autocomplete-input-token\" role=\"option\">\n            <input\n                #focusInput\n                caxAutoFocus\n                [autofocus]=\"autofocus\"\n                [ngClass]=\"inputClass\"\n                [ngStyle]=\"inputStyle\"\n                [class]=\"inputStyleClass\"\n                [attr.type]=\"type\"\n                [attr.id]=\"inputId\"\n                [autocomplete]=\"autocomplete\"\n                [required]=\"required\"\n                [attr.name]=\"name\"\n                role=\"combobox\"\n                [attr.placeholder]=\"!filled ? placeholder : null\"\n                aria-autocomplete=\"list\"\n                [attr.maxlength]=\"maxlength\"\n                [tabindex]=\"!disabled ? tabindex : -1\"\n                [readonly]=\"readonly\"\n                [disabled]=\"disabled\"\n                [attr.aria-label]=\"ariaLabel\"\n                [attr.aria-labelledby]=\"ariaLabelledBy\"\n                [attr.aria-required]=\"required\"\n                [attr.aria-expanded]=\"overlayVisible ?? false\"\n                [attr.aria-controls]=\"overlayVisible ? id + '_list' : null\"\n                [attr.aria-activedescendant]=\"focused ? focusedOptionId : undefined\"\n                (input)=\"onInput($event)\"\n                (keydown)=\"onKeyDown($event)\"\n                (change)=\"onInputChange($event)\"\n                (focus)=\"onInputFocus($event)\"\n                (blur)=\"onInputBlur($event)\"\n                (paste)=\"onInputPaste($event)\"\n                (keyup)=\"onInputKeyUp($event)\"\n            />\n        </li>\n    </ul>\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\">\n        <span *ngIf=\"dropdownIcon\" [ngClass]=\"dropdownIcon\" [attr.aria-hidden]=\"true\"></span>\n        <ng-container *ngIf=\"!dropdownIcon\">\n            <ChevronDownIcon *ngIf=\"!dropdownIconTemplate\" />\n            <ng-template *ngTemplateOutlet=\"dropdownIconTemplate\"></ng-template>\n        </ng-container>\n    </button>\n    <cax-overlay\n        #overlay\n        [(visible)]=\"overlayVisible\"\n        [options]=\"overlayOptions\"\n        [target]=\"'@parent'\"\n        [appendTo]=\"appendTo\"\n        [styleClass]=\"'cax-autocomplete-overlay'\"\n        [showTransitionOptions]=\"showTransitionOptions\"\n        [hideTransitionOptions]=\"hideTransitionOptions\"\n        (onAnimationStart)=\"onOverlayAnimationStart($event)\"\n        (onHide)=\"hide()\"\n    >\n        <div [ngClass]=\"panelClass\" [ngStyle]=\"panelStyles\" [class]=\"panelStyleClass\">\n            <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\n\n            <ul *ngIf=\"isLoading\" class=\"cax-autocomplete-items\">\n                <li *ngFor=\"let item of skeletonItems\" class=\"cax-autocomplete-item cax-autocomplete-skeleton-item\">\n                    <cax-skeleton width=\"100%\" height=\"1.5rem\"></cax-skeleton>\n                </li>\n            </ul>\n\n            <ng-container *ngIf=\"!isLoading\">\n                <cax-scroller\n                    *ngIf=\"virtualScroll\"\n                    #scroller\n                    [items]=\"visibleOptions()\"\n                    [style]=\"{ height: scrollHeight }\"\n                    [itemSize]=\"virtualScrollItemSize || _itemSize\"\n                    [autoSize]=\"true\"\n                    [lazy]=\"lazy\"\n                    (onLazyLoad)=\"onLazyLoad.emit($event)\"\n                    [options]=\"virtualScrollOptions\"\n                >\n                    <ng-template caxTemplate=\"content\" let-items let-scrollerOptions=\"options\">\n                        <ng-container *ngTemplateOutlet=\"buildInItems; context: { $implicit: items, options: scrollerOptions }\"></ng-container>\n                    </ng-template>\n                    <ng-container *ngIf=\"loaderTemplate\">\n                        <ng-template caxTemplate=\"loader\" let-scrollerOptions=\"options\">\n                            <ng-container *ngTemplateOutlet=\"loaderTemplate; context: { options: scrollerOptions }\"></ng-container>\n                        </ng-template>\n                    </ng-container>\n                </cax-scroller>\n                <ng-container *ngIf=\"!virtualScroll\">\n                    <ng-container *ngTemplateOutlet=\"buildInItems; context: { $implicit: visibleOptions(), options: {} }\"></ng-container>\n                </ng-container>\n                <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\n            </ng-container>\n\n            <ng-template #buildInItems let-items let-scrollerOptions=\"options\">\n                <ul #items class=\"cax-autocomplete-items\" [ngClass]=\"scrollerOptions.contentStyleClass\" [style]=\"scrollerOptions.contentStyle\" role=\"listbox\" [attr.id]=\"id + '_list'\" [attr.aria-label]=\"listLabel\">\n                    <ng-template ngFor let-option [ngForOf]=\"items\" let-i=\"index\">\n                        <ng-container *ngIf=\"isOptionGroup(option)\">\n                            <li [attr.id]=\"id + '_' + getOptionIndex(i, scrollerOptions)\" class=\"cax-autocomplete-item-group\" [ngStyle]=\"{ height: scrollerOptions.itemSize + 'px' }\" role=\"option\">\n                                <span *ngIf=\"!groupTemplate\">{{ getOptionGroupLabel(option.optionGroup) }}</span>\n                                <ng-container *ngTemplateOutlet=\"groupTemplate; context: { $implicit: option.optionGroup }\"></ng-container>\n                            </li>\n                        </ng-container>\n                        <ng-container *ngIf=\"!isOptionGroup(option)\">\n                            <li\n                                class=\"cax-autocomplete-item\"\n                                caxRipple\n                                [ngStyle]=\"{ height: scrollerOptions.itemSize + 'px' }\"\n                                [ngClass]=\"{ 'cax-highlight': isSelected(option), 'cax-focus': focusedOptionIndex() === getOptionIndex(i, scrollerOptions), 'cax-disabled': isOptionDisabled(option), 'cax-text-body-sm-medium': size === 'sm', 'cax-text-body-md-medium': size === 'md', 'cax-text-body-lg-medium': size === 'lg' }\"\n                                [attr.id]=\"id + '_' + getOptionIndex(i, scrollerOptions)\"\n                                role=\"option\"\n                                [attr.aria-label]=\"getOptionLabel(option)\"\n                                [attr.aria-selected]=\"isSelected(option)\"\n                                [attr.aria-disabled]=\"isOptionDisabled(option)\"\n                                [attr.data-p-focused]=\"focusedOptionIndex() === getOptionIndex(i, scrollerOptions)\"\n                                [attr.aria-setsize]=\"ariaSetSize\"\n                                [attr.aria-posinset]=\"getAriaPosInset(getOptionIndex(i, scrollerOptions))\"\n                                (click)=\"onOptionSelect($event, option)\"\n                                (mouseenter)=\"onOptionMouseEnter($event, getOptionIndex(i, scrollerOptions))\"\n                            >\n                                <span *ngIf=\"!itemTemplate\" [innerHTML]=\"highlightText(getOptionLabel(option))\"></span>\n                                <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: option, index: scrollerOptions.getOptions ? scrollerOptions.getOptions(i) : i }\"></ng-container>\n                            </li>\n                        </ng-container>\n                    </ng-template>\n                    <li *ngIf=\"!items || (items && items.length === 0 && showEmptyMessage)\" class=\"cax-autocomplete-empty-message\" [ngStyle]=\"{ height: scrollerOptions.itemSize + 'px' }\" role=\"option\">\n                        <ng-container *ngIf=\"!emptyTemplate; else empty\"> {{ searchResultMessageText }} </ng-container>\n                        <ng-container #empty *ngTemplateOutlet=\"emptyTemplate\"></ng-container>\n                    </li>\n                </ul>\n            </ng-template>\n        </div>\n        <!-- <span role=\"status\" aria-live=\"polite\" class=\"p-hidden-accessible\">\n            {{ selectedMessageText }}\n        </span> -->\n    </cax-overlay>\n</div>\n", styles: ["@layer cax{.cax-autocomplete{display:flex;position:relative;height:40px}.cax-autocomplete-loader{display:block}.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-item.cax-autocomplete-skeleton-item{cursor:default}.cax-autocomplete-item.cax-autocomplete-skeleton-item:hover{background:transparent!important}.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{display:flex;align-items:center;cursor:pointer}.cax-autocomplete-trailing{position:absolute;right:8px;top:0;bottom:0;display:flex;align-items:center;gap:8px;z-index:1}.cax-autocomplete-action{display:flex;align-items:center}.cax-autocomplete-action-divider{width:1px;height:20px;background-color:var(--neutral-300);margin:0 4px}.cax-autocomplete-search-icon{position:absolute;left:8px;top:50%;transform:translateY(-50%);font-size:16px;pointer-events:none}.cax-autocomplete .cax-autocomplete-input,.cax-autocomplete .cax-autocomplete-multiple-container{transition:border-radius .2s,border-bottom-color .2s,border-color .2s,box-shadow .2s}.cax-autocomplete.cax-overlay-open .cax-autocomplete-input,.cax-autocomplete.cax-overlay-open .cax-autocomplete-multiple-container{border-bottom-left-radius:0;border-bottom-right-radius:0;border-bottom-color:transparent}.cax-autocomplete.cax-overlay-open .cax-autocomplete-input:hover,.cax-autocomplete.cax-overlay-open .cax-autocomplete-input:focus,.cax-autocomplete.cax-overlay-open .cax-autocomplete-multiple-container:hover,.cax-autocomplete.cax-overlay-open .cax-autocomplete-multiple-container:focus{border-color:var(--neutral-300)!important;border-bottom-color:transparent!important;box-shadow:none!important;outline:0 none!important}.cax-autocomplete-overlay{margin-top:0!important}.cax-autocomplete-overlay .cax-autocomplete-panel{border-top-left-radius:0;border-top-right-radius:0;transition:border-radius .2s}.cax-autocomplete-sm,.cax-autocomplete-sm .cax-autocomplete-dd .cax-autocomplete-dropdown{height:32px!important}.cax-autocomplete-sm .cax-inputtext{font-size:12px!important;padding:0 28px}.cax-autocomplete-sm.cax-autocomplete-with-actions.cax-overlay-open .cax-inputtext{padding-right:120px}.cax-autocomplete-sm .cax-autocomplete-item,.cax-autocomplete-sm .cax-autocomplete-empty-message{font-size:12px!important}.cax-autocomplete-sm .cax-autocomplete-search-icon,.cax-autocomplete-sm .cax-autocomplete-clear-icon{font-size:16px}.cax-autocomplete-md,.cax-autocomplete-md .cax-autocomplete-dd .cax-autocomplete-dropdown{height:40px!important}.cax-autocomplete-md .cax-inputtext{font-size:14px!important;padding:0 32px}.cax-autocomplete-md.cax-autocomplete-with-actions.cax-overlay-open .cax-inputtext{padding-right:140px}.cax-autocomplete-md .cax-autocomplete-item,.cax-autocomplete-md .cax-autocomplete-empty-message{font-size:14px!important}.cax-autocomplete-md .cax-autocomplete-search-icon,.cax-autocomplete-md .cax-autocomplete-clear-icon{font-size:20px}.cax-autocomplete-lg,.cax-autocomplete-lg .cax-autocomplete-dd .cax-autocomplete-dropdown{height:48px!important}.cax-autocomplete-lg .cax-inputtext{font-size:16px!important;padding:0 36px}.cax-autocomplete-lg.cax-autocomplete-with-actions.cax-overlay-open .cax-inputtext{padding-right:160px}.cax-autocomplete-lg .cax-autocomplete-item,.cax-autocomplete-lg .cax-autocomplete-empty-message{font-size:16px!important}.cax-autocomplete-lg .cax-autocomplete-search-icon,.cax-autocomplete-lg .cax-autocomplete-clear-icon{font-size:24px}}\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: "component", type: i7.Skeleton, selector: "cax-skeleton", inputs: ["styleClass", "style", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "directive", type: i8.AutoFocus, selector: "[caxAutoFocus]", inputs: ["autofocus"] }, { kind: "component", type: i9.TimesCircleIcon, selector: "TimesCircleIcon" }, { kind: "component", type: i10.ChevronDownIcon, selector: "ChevronDownIcon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: AutoComplete, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: AutoComplete, decorators: [{
             type: Component,
             args: [{ selector: 'cax-autoComplete', host: {
                         class: 'cax-element cax-inputwrapper',
                         '[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, standalone: false, 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"] }]
+                    }, providers: [AUTOCOMPLETE_VALUE_ACCESSOR], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: false, template: "<div #container [ngClass]=\"containerClass\" [ngStyle]=\"style\" [class]=\"styleClass\" (click)=\"onContainerClick($event)\">\n    <input\n        *ngIf=\"!multiple\"\n        #focusInput\n        caxAutoFocus\n        [autofocus]=\"autofocus\"\n        [ngClass]=\"inputClass\"\n        [ngStyle]=\"inputStyle\"\n        [class]=\"inputStyleClass\"\n        [type]=\"type\"\n        [attr.id]=\"inputId\"\n        [autocomplete]=\"autocomplete\"\n        [required]=\"required\"\n        [name]=\"name\"\n        aria-autocomplete=\"list\"\n        role=\"combobox\"\n        [attr.placeholder]=\"placeholder\"\n        [attr.maxlength]=\"maxlength\"\n        [tabindex]=\"!disabled ? tabindex : -1\"\n        [readonly]=\"readonly\"\n        [disabled]=\"disabled\"\n        [attr.aria-label]=\"ariaLabel\"\n        [attr.aria-labelledby]=\"ariaLabelledBy\"\n        [attr.aria-required]=\"required\"\n        [attr.aria-expanded]=\"overlayVisible ?? false\"\n        [attr.aria-controls]=\"overlayVisible ? id + '_list' : null\"\n        [attr.aria-activedescendant]=\"focused ? focusedOptionId : undefined\"\n        (input)=\"onInput($event)\"\n        (keydown)=\"onKeyDown($event)\"\n        (change)=\"onInputChange($event)\"\n        (focus)=\"onInputFocus($event)\"\n        (blur)=\"onInputBlur($event)\"\n        (paste)=\"onInputPaste($event)\"\n        (keyup)=\"onInputKeyUp($event)\"\n    />\n    <!-- <SearchIcon [styleClass]=\"'cax-autocomplete-search-icon'\" /> -->\n    <i class=\"cax cax-magnifier cax-autocomplete-search-icon\"></i>\n\n    <div class=\"cax-autocomplete-trailing\">\n        <ng-container *ngIf=\"isVisibleClearIcon\">\n            <i *ngIf=\"!clearIconTemplate\" class=\"cax cax-close-circle cax-autocomplete-clear-icon cax-autoComplete-clear\" (click)=\"clear()\"></i>\n            <span *ngIf=\"clearIconTemplate\" class=\"cax-autocomplete-clear-icon\" (click)=\"clear()\" [attr.aria-hidden]=\"true\">\n                <ng-template *ngTemplateOutlet=\"clearIconTemplate\"></ng-template>\n            </span>\n        </ng-container>\n\n        <div class=\"cax-autocomplete-action-divider\" *ngIf=\"actionTemplate && overlayVisible\"></div>\n\n        <ng-container *ngIf=\"actionTemplate && overlayVisible\">\n            <div class=\"cax-autocomplete-action\">\n                <ng-container *ngTemplateOutlet=\"actionTemplate\"></ng-container>\n            </div>\n        </ng-container>\n    </div>\n\n    <ul\n        *ngIf=\"multiple\"\n        #multiContainer\n        [ngClass]=\"multiContainerClass\"\n        [tabindex]=\"-1\"\n        role=\"listbox\"\n        [attr.aria-orientation]=\"'horizontal'\"\n        [attr.aria-activedescendant]=\"focused ? focusedMultipleOptionId : undefined\"\n        (focus)=\"onMultipleContainerFocus($event)\"\n        (blur)=\"onMultipleContainerBlur($event)\"\n        (keydown)=\"onMultipleContainerKeyDown($event)\"\n    >\n        <li\n            #token\n            *ngFor=\"let option of modelValue(); let i = index\"\n            [ngClass]=\"{ 'cax-autocomplete-token': true, 'cax-focus': focusedMultipleOptionIndex() === i }\"\n            [attr.id]=\"id + '_multiple_option_' + i\"\n            role=\"option\"\n            [attr.aria-label]=\"getOptionLabel(option)\"\n            [attr.aria-setsize]=\"modelValue().length\"\n            [attr.aria-posinset]=\"i + 1\"\n            [attr.aria-selected]=\"true\"\n        >\n            <ng-container *ngTemplateOutlet=\"selectedItemTemplate; context: { $implicit: option }\"></ng-container>\n            <span *ngIf=\"!selectedItemTemplate\" class=\"cax-autocomplete-token-label\">{{ getMultipleLabel(option) }}</span>\n            <span class=\"cax-autocomplete-token-icon\" (click)=\"!readonly ? removeOption($event, i) : ''\">\n                <TimesCircleIcon [styleClass]=\"'cax-autocomplete-token-icon'\" *ngIf=\"!removeIconTemplate\" [attr.aria-hidden]=\"true\" />\n                <span *ngIf=\"removeIconTemplate\" class=\"cax-autocomplete-token-icon\" [attr.aria-hidden]=\"true\">\n                    <ng-template *ngTemplateOutlet=\"removeIconTemplate\"></ng-template>\n                </span>\n            </span>\n        </li>\n        <li class=\"cax-autocomplete-input-token\" role=\"option\">\n            <input\n                #focusInput\n                caxAutoFocus\n                [autofocus]=\"autofocus\"\n                [ngClass]=\"inputClass\"\n                [ngStyle]=\"inputStyle\"\n                [class]=\"inputStyleClass\"\n                [attr.type]=\"type\"\n                [attr.id]=\"inputId\"\n                [autocomplete]=\"autocomplete\"\n                [required]=\"required\"\n                [attr.name]=\"name\"\n                role=\"combobox\"\n                [attr.placeholder]=\"!filled ? placeholder : null\"\n                aria-autocomplete=\"list\"\n                [attr.maxlength]=\"maxlength\"\n                [tabindex]=\"!disabled ? tabindex : -1\"\n                [readonly]=\"readonly\"\n                [disabled]=\"disabled\"\n                [attr.aria-label]=\"ariaLabel\"\n                [attr.aria-labelledby]=\"ariaLabelledBy\"\n                [attr.aria-required]=\"required\"\n                [attr.aria-expanded]=\"overlayVisible ?? false\"\n                [attr.aria-controls]=\"overlayVisible ? id + '_list' : null\"\n                [attr.aria-activedescendant]=\"focused ? focusedOptionId : undefined\"\n                (input)=\"onInput($event)\"\n                (keydown)=\"onKeyDown($event)\"\n                (change)=\"onInputChange($event)\"\n                (focus)=\"onInputFocus($event)\"\n                (blur)=\"onInputBlur($event)\"\n                (paste)=\"onInputPaste($event)\"\n                (keyup)=\"onInputKeyUp($event)\"\n            />\n        </li>\n    </ul>\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\">\n        <span *ngIf=\"dropdownIcon\" [ngClass]=\"dropdownIcon\" [attr.aria-hidden]=\"true\"></span>\n        <ng-container *ngIf=\"!dropdownIcon\">\n            <ChevronDownIcon *ngIf=\"!dropdownIconTemplate\" />\n            <ng-template *ngTemplateOutlet=\"dropdownIconTemplate\"></ng-template>\n        </ng-container>\n    </button>\n    <cax-overlay\n        #overlay\n        [(visible)]=\"overlayVisible\"\n        [options]=\"overlayOptions\"\n        [target]=\"'@parent'\"\n        [appendTo]=\"appendTo\"\n        [styleClass]=\"'cax-autocomplete-overlay'\"\n        [showTransitionOptions]=\"showTransitionOptions\"\n        [hideTransitionOptions]=\"hideTransitionOptions\"\n        (onAnimationStart)=\"onOverlayAnimationStart($event)\"\n        (onHide)=\"hide()\"\n    >\n        <div [ngClass]=\"panelClass\" [ngStyle]=\"panelStyles\" [class]=\"panelStyleClass\">\n            <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\n\n            <ul *ngIf=\"isLoading\" class=\"cax-autocomplete-items\">\n                <li *ngFor=\"let item of skeletonItems\" class=\"cax-autocomplete-item cax-autocomplete-skeleton-item\">\n                    <cax-skeleton width=\"100%\" height=\"1.5rem\"></cax-skeleton>\n                </li>\n            </ul>\n\n            <ng-container *ngIf=\"!isLoading\">\n                <cax-scroller\n                    *ngIf=\"virtualScroll\"\n                    #scroller\n                    [items]=\"visibleOptions()\"\n                    [style]=\"{ height: scrollHeight }\"\n                    [itemSize]=\"virtualScrollItemSize || _itemSize\"\n                    [autoSize]=\"true\"\n                    [lazy]=\"lazy\"\n                    (onLazyLoad)=\"onLazyLoad.emit($event)\"\n                    [options]=\"virtualScrollOptions\"\n                >\n                    <ng-template caxTemplate=\"content\" let-items let-scrollerOptions=\"options\">\n                        <ng-container *ngTemplateOutlet=\"buildInItems; context: { $implicit: items, options: scrollerOptions }\"></ng-container>\n                    </ng-template>\n                    <ng-container *ngIf=\"loaderTemplate\">\n                        <ng-template caxTemplate=\"loader\" let-scrollerOptions=\"options\">\n                            <ng-container *ngTemplateOutlet=\"loaderTemplate; context: { options: scrollerOptions }\"></ng-container>\n                        </ng-template>\n                    </ng-container>\n                </cax-scroller>\n                <ng-container *ngIf=\"!virtualScroll\">\n                    <ng-container *ngTemplateOutlet=\"buildInItems; context: { $implicit: visibleOptions(), options: {} }\"></ng-container>\n                </ng-container>\n                <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\n            </ng-container>\n\n            <ng-template #buildInItems let-items let-scrollerOptions=\"options\">\n                <ul #items class=\"cax-autocomplete-items\" [ngClass]=\"scrollerOptions.contentStyleClass\" [style]=\"scrollerOptions.contentStyle\" role=\"listbox\" [attr.id]=\"id + '_list'\" [attr.aria-label]=\"listLabel\">\n                    <ng-template ngFor let-option [ngForOf]=\"items\" let-i=\"index\">\n                        <ng-container *ngIf=\"isOptionGroup(option)\">\n                            <li [attr.id]=\"id + '_' + getOptionIndex(i, scrollerOptions)\" class=\"cax-autocomplete-item-group\" [ngStyle]=\"{ height: scrollerOptions.itemSize + 'px' }\" role=\"option\">\n                                <span *ngIf=\"!groupTemplate\">{{ getOptionGroupLabel(option.optionGroup) }}</span>\n                                <ng-container *ngTemplateOutlet=\"groupTemplate; context: { $implicit: option.optionGroup }\"></ng-container>\n                            </li>\n                        </ng-container>\n                        <ng-container *ngIf=\"!isOptionGroup(option)\">\n                            <li\n                                class=\"cax-autocomplete-item\"\n                                caxRipple\n                                [ngStyle]=\"{ height: scrollerOptions.itemSize + 'px' }\"\n                                [ngClass]=\"{ 'cax-highlight': isSelected(option), 'cax-focus': focusedOptionIndex() === getOptionIndex(i, scrollerOptions), 'cax-disabled': isOptionDisabled(option), 'cax-text-body-sm-medium': size === 'sm', 'cax-text-body-md-medium': size === 'md', 'cax-text-body-lg-medium': size === 'lg' }\"\n                                [attr.id]=\"id + '_' + getOptionIndex(i, scrollerOptions)\"\n                                role=\"option\"\n                                [attr.aria-label]=\"getOptionLabel(option)\"\n                                [attr.aria-selected]=\"isSelected(option)\"\n                                [attr.aria-disabled]=\"isOptionDisabled(option)\"\n                                [attr.data-p-focused]=\"focusedOptionIndex() === getOptionIndex(i, scrollerOptions)\"\n                                [attr.aria-setsize]=\"ariaSetSize\"\n                                [attr.aria-posinset]=\"getAriaPosInset(getOptionIndex(i, scrollerOptions))\"\n                                (click)=\"onOptionSelect($event, option)\"\n                                (mouseenter)=\"onOptionMouseEnter($event, getOptionIndex(i, scrollerOptions))\"\n                            >\n                                <span *ngIf=\"!itemTemplate\" [innerHTML]=\"highlightText(getOptionLabel(option))\"></span>\n                                <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: option, index: scrollerOptions.getOptions ? scrollerOptions.getOptions(i) : i }\"></ng-container>\n                            </li>\n                        </ng-container>\n                    </ng-template>\n                    <li *ngIf=\"!items || (items && items.length === 0 && showEmptyMessage)\" class=\"cax-autocomplete-empty-message\" [ngStyle]=\"{ height: scrollerOptions.itemSize + 'px' }\" role=\"option\">\n                        <ng-container *ngIf=\"!emptyTemplate; else empty\"> {{ searchResultMessageText }} </ng-container>\n                        <ng-container #empty *ngTemplateOutlet=\"emptyTemplate\"></ng-container>\n                    </li>\n                </ul>\n            </ng-template>\n        </div>\n        <!-- <span role=\"status\" aria-live=\"polite\" class=\"p-hidden-accessible\">\n            {{ selectedMessageText }}\n        </span> -->\n    </cax-overlay>\n</div>\n", styles: ["@layer cax{.cax-autocomplete{display:flex;position:relative;height:40px}.cax-autocomplete-loader{display:block}.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-item.cax-autocomplete-skeleton-item{cursor:default}.cax-autocomplete-item.cax-autocomplete-skeleton-item:hover{background:transparent!important}.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{display:flex;align-items:center;cursor:pointer}.cax-autocomplete-trailing{position:absolute;right:8px;top:0;bottom:0;display:flex;align-items:center;gap:8px;z-index:1}.cax-autocomplete-action{display:flex;align-items:center}.cax-autocomplete-action-divider{width:1px;height:20px;background-color:var(--neutral-300);margin:0 4px}.cax-autocomplete-search-icon{position:absolute;left:8px;top:50%;transform:translateY(-50%);font-size:16px;pointer-events:none}.cax-autocomplete .cax-autocomplete-input,.cax-autocomplete .cax-autocomplete-multiple-container{transition:border-radius .2s,border-bottom-color .2s,border-color .2s,box-shadow .2s}.cax-autocomplete.cax-overlay-open .cax-autocomplete-input,.cax-autocomplete.cax-overlay-open .cax-autocomplete-multiple-container{border-bottom-left-radius:0;border-bottom-right-radius:0;border-bottom-color:transparent}.cax-autocomplete.cax-overlay-open .cax-autocomplete-input:hover,.cax-autocomplete.cax-overlay-open .cax-autocomplete-input:focus,.cax-autocomplete.cax-overlay-open .cax-autocomplete-multiple-container:hover,.cax-autocomplete.cax-overlay-open .cax-autocomplete-multiple-container:focus{border-color:var(--neutral-300)!important;border-bottom-color:transparent!important;box-shadow:none!important;outline:0 none!important}.cax-autocomplete-overlay{margin-top:0!important}.cax-autocomplete-overlay .cax-autocomplete-panel{border-top-left-radius:0;border-top-right-radius:0;transition:border-radius .2s}.cax-autocomplete-sm,.cax-autocomplete-sm .cax-autocomplete-dd .cax-autocomplete-dropdown{height:32px!important}.cax-autocomplete-sm .cax-inputtext{font-size:12px!important;padding:0 28px}.cax-autocomplete-sm.cax-autocomplete-with-actions.cax-overlay-open .cax-inputtext{padding-right:120px}.cax-autocomplete-sm .cax-autocomplete-item,.cax-autocomplete-sm .cax-autocomplete-empty-message{font-size:12px!important}.cax-autocomplete-sm .cax-autocomplete-search-icon,.cax-autocomplete-sm .cax-autocomplete-clear-icon{font-size:16px}.cax-autocomplete-md,.cax-autocomplete-md .cax-autocomplete-dd .cax-autocomplete-dropdown{height:40px!important}.cax-autocomplete-md .cax-inputtext{font-size:14px!important;padding:0 32px}.cax-autocomplete-md.cax-autocomplete-with-actions.cax-overlay-open .cax-inputtext{padding-right:140px}.cax-autocomplete-md .cax-autocomplete-item,.cax-autocomplete-md .cax-autocomplete-empty-message{font-size:14px!important}.cax-autocomplete-md .cax-autocomplete-search-icon,.cax-autocomplete-md .cax-autocomplete-clear-icon{font-size:20px}.cax-autocomplete-lg,.cax-autocomplete-lg .cax-autocomplete-dd .cax-autocomplete-dropdown{height:48px!important}.cax-autocomplete-lg .cax-inputtext{font-size:16px!important;padding:0 36px}.cax-autocomplete-lg.cax-autocomplete-with-actions.cax-overlay-open .cax-inputtext{padding-right:160px}.cax-autocomplete-lg .cax-autocomplete-item,.cax-autocomplete-lg .cax-autocomplete-empty-message{font-size:16px!important}.cax-autocomplete-lg .cax-autocomplete-search-icon,.cax-autocomplete-lg .cax-autocomplete-clear-icon{font-size:24px}}\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: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: i1.caxConfig }, { type: i1.OverlayService }, { type: i0.NgZone }, { type: i1.OverlayService }], propDecorators: { minLength: [{
                 type: Input,
                 args: [{ transform: numberAttribute }]
             }], size: [{
@@ -1468,20 +1518,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImpo
             }], templates: [{
                 type: ContentChildren,
                 args: [CaxTemplate]
-            }], isloading: [{
-                type: Input
+            }], loading: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], skeletonCount: [{
+                type: Input,
+                args: [{ transform: numberAttribute }]
             }] } });
 
 class AutoCompleteModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: AutoCompleteModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.16", ngImport: i0, type: AutoCompleteModule, declarations: [AutoComplete], imports: [CommonModule, OverlayModule, InputTextModule, ButtonModule, SharedModule, RippleModule, ScrollerModule, AutoFocusModule, TimesCircleIcon, SpinnerIcon, TimesIcon, ChevronDownIcon, SearchIcon], exports: [AutoComplete, OverlayModule, SharedModule, ScrollerModule, AutoFocusModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: AutoCompleteModule, imports: [CommonModule, OverlayModule, InputTextModule, ButtonModule, SharedModule, RippleModule, ScrollerModule, AutoFocusModule, TimesCircleIcon, SpinnerIcon, TimesIcon, ChevronDownIcon, SearchIcon, OverlayModule, SharedModule, ScrollerModule, AutoFocusModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: AutoCompleteModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.21", ngImport: i0, type: AutoCompleteModule, declarations: [AutoComplete], imports: [CommonModule, OverlayModule, InputTextModule, ButtonModule, SharedModule, RippleModule, ScrollerModule, SkeletonModule, AutoFocusModule, TimesCircleIcon, SpinnerIcon, TimesIcon, ChevronDownIcon, SearchIcon], exports: [AutoComplete, OverlayModule, SharedModule, ScrollerModule, SkeletonModule, AutoFocusModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: AutoCompleteModule, imports: [CommonModule, OverlayModule, InputTextModule, ButtonModule, SharedModule, RippleModule, ScrollerModule, SkeletonModule, AutoFocusModule, TimesCircleIcon, SpinnerIcon, TimesIcon, ChevronDownIcon, SearchIcon, OverlayModule, SharedModule, ScrollerModule, SkeletonModule, AutoFocusModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: AutoCompleteModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: AutoCompleteModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [CommonModule, OverlayModule, InputTextModule, ButtonModule, SharedModule, RippleModule, ScrollerModule, AutoFocusModule, TimesCircleIcon, SpinnerIcon, TimesIcon, ChevronDownIcon, SearchIcon],
-                    exports: [AutoComplete, OverlayModule, SharedModule, ScrollerModule, AutoFocusModule],
+                    imports: [CommonModule, OverlayModule, InputTextModule, ButtonModule, SharedModule, RippleModule, ScrollerModule, SkeletonModule, AutoFocusModule, TimesCircleIcon, SpinnerIcon, TimesIcon, ChevronDownIcon, SearchIcon],
+                    exports: [AutoComplete, OverlayModule, SharedModule, ScrollerModule, SkeletonModule, AutoFocusModule],
                     declarations: [AutoComplete]
                 }]
         }] });