cax-design-system 3.0.0 → 3.0.2

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

@@ -475,7 +475,7 @@ class AutoComplete {
     dropdownIconTemplate;
     actionTemplate;
     value;
-    _suggestions = signal(null);
+    _suggestions = signal(null, ...(ngDevMode ? [{ debugName: "_suggestions" }] : []));
     onModelChange = () => { };
     onModelTouched = () => { };
     timeout;
@@ -491,8 +491,8 @@ class AutoComplete {
     set filled(value) {
         this._filled = value;
     }
-    _loading = signal(false);
-    _searching = signal(false);
+    _loading = signal(false, ...(ngDevMode ? [{ debugName: "_loading" }] : []));
+    _searching = signal(false, ...(ngDevMode ? [{ debugName: "_searching" }] : []));
     get loading() {
         return this._loading();
     }
@@ -503,7 +503,7 @@ class AutoComplete {
     get isLoading() {
         return this._loading() || this._searching();
     }
-    _skeletonCount = signal(3);
+    _skeletonCount = signal(3, ...(ngDevMode ? [{ debugName: "_skeletonCount" }] : []));
     get skeletonCount() {
         return this._skeletonCount();
     }
@@ -518,13 +518,13 @@ class AutoComplete {
     listId;
     searchTimeout;
     dirty = false;
-    modelValue = signal(null);
-    query = signal(null);
-    focusedMultipleOptionIndex = signal(-1);
-    focusedOptionIndex = signal(-1);
+    modelValue = signal(null, ...(ngDevMode ? [{ debugName: "modelValue" }] : []));
+    query = signal(null, ...(ngDevMode ? [{ debugName: "query" }] : []));
+    focusedMultipleOptionIndex = signal(-1, ...(ngDevMode ? [{ debugName: "focusedMultipleOptionIndex" }] : []));
+    focusedOptionIndex = signal(-1, ...(ngDevMode ? [{ debugName: "focusedOptionIndex" }] : []));
     visibleOptions = computed(() => {
         return this.group ? this.flatOptions(this._suggestions()) : this._suggestions() || [];
-    });
+    }, ...(ngDevMode ? [{ debugName: "visibleOptions" }] : []));
     inputValue = computed(() => {
         const modelValue = this.modelValue();
         const selectedOption = this.getSelectedOption(modelValue);
@@ -540,7 +540,7 @@ class AutoComplete {
         else {
             return '';
         }
-    });
+    }, ...(ngDevMode ? [{ debugName: "inputValue" }] : []));
     get focusedMultipleOptionId() {
         return this.focusedMultipleOptionIndex() !== -1 ? `${this.id}_multiple_option_${this.focusedMultipleOptionIndex()}` : null;
     }
@@ -1301,10 +1301,10 @@ class AutoComplete {
             this.scrollHandler = null;
         }
     }
-    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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", 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: "20.3.25", 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.21", ngImport: i0, type: AutoComplete, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: AutoComplete, decorators: [{
             type: Component,
             args: [{ selector: 'cax-autoComplete', host: {
                         class: 'cax-element cax-inputwrapper',
@@ -1527,11 +1527,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
             }] } });
 
 class AutoCompleteModule {
-    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] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: AutoCompleteModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.25", 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: "20.3.25", 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.21", ngImport: i0, type: AutoCompleteModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: AutoCompleteModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, OverlayModule, InputTextModule, ButtonModule, SharedModule, RippleModule, ScrollerModule, SkeletonModule, AutoFocusModule, TimesCircleIcon, SpinnerIcon, TimesIcon, ChevronDownIcon, SearchIcon],