cax-design-system 1.2.5 → 1.2.6

package/esm2022/autocomplete/autocomplete.mjs

@@ -1223,7 +1223,7 @@ export class AutoComplete {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: AutoComplete, deps: [{ token: DOCUMENT }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i1.caxConfig }, { token: i1.OverlayService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.2.9", type: AutoComplete, selector: "cax-autoComplete", inputs: { minLength: ["minLength", "minLength", numberAttribute], delay: ["delay", "delay", numberAttribute], style: "style", panelStyle: "panelStyle", styleClass: "styleClass", panelStyleClass: "panelStyleClass", inputStyle: "inputStyle", inputId: "inputId", inputStyleClass: "inputStyleClass", placeholder: "placeholder", readonly: ["readonly", "readonly", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], scrollHeight: "scrollHeight", lazy: ["lazy", "lazy", booleanAttribute], virtualScroll: ["virtualScroll", "virtualScroll", booleanAttribute], virtualScrollItemSize: ["virtualScrollItemSize", "virtualScrollItemSize", numberAttribute], virtualScrollOptions: "virtualScrollOptions", maxlength: ["maxlength", "maxlength", (value) => numberAttribute(value, null)], name: "name", required: ["required", "required", booleanAttribute], size: ["size", "size", numberAttribute], appendTo: "appendTo", autoHighlight: ["autoHighlight", "autoHighlight", booleanAttribute], forceSelection: ["forceSelection", "forceSelection", booleanAttribute], type: "type", autoZIndex: ["autoZIndex", "autoZIndex", booleanAttribute], baseZIndex: ["baseZIndex", "baseZIndex", numberAttribute], ariaLabel: "ariaLabel", dropdownAriaLabel: "dropdownAriaLabel", ariaLabelledBy: "ariaLabelledBy", dropdownIcon: "dropdownIcon", unique: ["unique", "unique", booleanAttribute], group: ["group", "group", booleanAttribute], completeOnFocus: ["completeOnFocus", "completeOnFocus", booleanAttribute], showClear: ["showClear", "showClear", booleanAttribute], field: "field", dropdown: ["dropdown", "dropdown", booleanAttribute], showEmptyMessage: ["showEmptyMessage", "showEmptyMessage", booleanAttribute], dropdownMode: "dropdownMode", multiple: ["multiple", "multiple", booleanAttribute], tabindex: ["tabindex", "tabindex", numberAttribute], dataKey: "dataKey", emptyMessage: "emptyMessage", showTransitionOptions: "showTransitionOptions", hideTransitionOptions: "hideTransitionOptions", autofocus: ["autofocus", "autofocus", booleanAttribute], autocomplete: "autocomplete", optionGroupChildren: "optionGroupChildren", optionGroupLabel: "optionGroupLabel", overlayOptions: "overlayOptions", suggestions: "suggestions", itemSize: "itemSize", optionLabel: "optionLabel", optionValue: "optionValue", id: "id", searchMessage: "searchMessage", emptySelectionMessage: "emptySelectionMessage", selectionMessage: "selectionMessage", autoOptionFocus: ["autoOptionFocus", "autoOptionFocus", booleanAttribute], selectOnFocus: ["selectOnFocus", "selectOnFocus", booleanAttribute], searchLocale: ["searchLocale", "searchLocale", booleanAttribute], optionDisabled: "optionDisabled", focusOnHover: ["focusOnHover", "focusOnHover", booleanAttribute], variant: "variant" }, outputs: { completeMethod: "completeMethod", onSelect: "onSelect", onUnselect: "onUnselect", onFocus: "onFocus", onBlur: "onBlur", onDropdownClick: "onDropdownClick", onClear: "onClear", onKeyUp: "onKeyUp", onShow: "onShow", onHide: "onHide", onLazyLoad: "onLazyLoad" }, host: { properties: { "class.cax-inputwrapper-filled": "filled", "class.cax-inputwrapper-focus": "((focused && !disabled) || autofocus) || overlayVisible", "class.cax-autocomplete-clearable": "showClear && !disabled" }, classAttribute: "cax-element cax-inputwrapper" }, providers: [AUTOCOMPLETE_VALUE_ACCESSOR], queries: [{ propertyName: "templates", predicate: CaxTemplate }], viewQueries: [{ propertyName: "containerEL", first: true, predicate: ["container"], descendants: true }, { propertyName: "inputEL", first: true, predicate: ["focusInput"], descendants: true }, { propertyName: "multiInputEl", first: true, predicate: ["multiIn"], descendants: true }, { propertyName: "multiContainerEL", first: true, predicate: ["multiContainer"], descendants: true }, { propertyName: "dropdownButton", first: true, predicate: ["ddBtn"], descendants: true }, { propertyName: "itemsViewChild", first: true, predicate: ["items"], descendants: true }, { propertyName: "scroller", first: true, predicate: ["scroller"], descendants: true }, { propertyName: "overlayViewChild", first: true, predicate: ["overlay"], descendants: true }], ngImport: i0, template: "<div #container [ngClass]=\"containerClass\" [ngStyle]=\"style\" [class]=\"styleClass\" (click)=\"onContainerClick($event)\">\r\n    \r\n    <SearchIcon  [styleClass]=\"'cax-autocomplete-search-icon'\" [attr.aria-hidden]=\"true\" />\r\n    <input\r\n        *ngIf=\"!multiple\"\r\n        #focusInput\r\n        caxAutoFocus\r\n        [autofocus]=\"autofocus\"\r\n        [ngClass]=\"inputClass\"\r\n        [ngStyle]=\"inputStyle\"\r\n        [class]=\"inputStyleClass\"\r\n        [type]=\"type\"\r\n        [attr.value]=\"inputValue()\"\r\n        [attr.id]=\"inputId\"\r\n        [autocomplete]=\"autocomplete\"\r\n        [required]=\"required\"\r\n        [name]=\"name\"\r\n        aria-autocomplete=\"list\"\r\n        role=\"combobox\"\r\n        [attr.placeholder]=\"placeholder\"\r\n        [attr.size]=\"size\"\r\n        [attr.maxlength]=\"maxlength\"\r\n        [tabindex]=\"!disabled ? tabindex : -1\"\r\n        [readonly]=\"readonly\"\r\n        [disabled]=\"disabled\"\r\n        [attr.aria-label]=\"ariaLabel\"\r\n        [attr.aria-labelledby]=\"ariaLabelledBy\"\r\n        [attr.aria-required]=\"required\"\r\n        [attr.aria-expanded]=\"overlayVisible ?? false\"\r\n        [attr.aria-controls]=\"overlayVisible ? id + '_list' : null\"\r\n        [attr.aria-activedescendant]=\"focused ? focusedOptionId : undefined\"\r\n        (input)=\"onInput($event)\"\r\n        (keydown)=\"onKeyDown($event)\"\r\n        (change)=\"onInputChange($event)\"\r\n        (focus)=\"onInputFocus($event)\"\r\n        (blur)=\"onInputBlur($event)\"\r\n        (paste)=\"onInputPaste($event)\"\r\n        (keyup)=\"onInputKeyUp($event)\"\r\n    />  \r\n    <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    <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>", styles: ["@layer cax{.cax-autocomplete{display:inline-flex;position:relative}.cax-autocomplete-loader{position:absolute;top:50%;margin-top:-.5rem}.cax-autocomplete-dd .cax-autocomplete-input{flex:1 1 auto;width:1%}.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}.cax-autocomplete-clearable{position:relative}.cax-autocomplete-search-icon{position:absolute;top:50%;margin-top:-.5rem;cursor:pointer;margin-left:9px}.cax-autoComplete-clear{right:20px}}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i3.Overlay, selector: "cax-overlay", inputs: ["visible", "mode", "style", "styleClass", "contentStyle", "contentStyleClass", "target", "appendTo", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "listener", "responsive", "options"], outputs: ["visibleChange", "onBeforeShow", "onShow", "onBeforeHide", "onHide", "onAnimationStart", "onAnimationDone"] }, { kind: "directive", type: i1.CaxTemplate, selector: "[caxTemplate]", inputs: ["type", "caxTemplate"] }, { kind: "directive", type: i4.ButtonDirective, selector: "[caxButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain"] }, { kind: "directive", type: i5.Ripple, selector: "[caxRipple]" }, { kind: "component", type: i6.Scroller, selector: "cax-scroller", inputs: ["id", "style", "styleClass", "tabindex", "items", "itemSize", "scrollHeight", "scrollWidth", "orientation", "step", "delay", "resizeDelay", "appendOnly", "inline", "lazy", "disabled", "loaderDisabled", "columns", "showSpacer", "showLoader", "numToleratedItems", "loading", "autoSize", "trackBy", "options"], outputs: ["onLazyLoad", "onScroll", "onScrollIndexChange"] }, { kind: "directive", type: i7.AutoFocus, selector: "[caxAutoFocus]", inputs: ["autofocus"] }, { kind: "component", type: i8.TimesCircleIcon, selector: "TimesCircleIcon" }, { kind: "component", type: i9.SpinnerIcon, selector: "SpinnerIcon" }, { kind: "component", type: i10.ChevronDownIcon, selector: "ChevronDownIcon" }, { kind: "component", type: i11.SearchIcon, selector: "SearchIcon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.2.9", type: AutoComplete, selector: "cax-autoComplete", inputs: { minLength: ["minLength", "minLength", numberAttribute], delay: ["delay", "delay", numberAttribute], style: "style", panelStyle: "panelStyle", styleClass: "styleClass", panelStyleClass: "panelStyleClass", inputStyle: "inputStyle", inputId: "inputId", inputStyleClass: "inputStyleClass", placeholder: "placeholder", readonly: ["readonly", "readonly", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], scrollHeight: "scrollHeight", lazy: ["lazy", "lazy", booleanAttribute], virtualScroll: ["virtualScroll", "virtualScroll", booleanAttribute], virtualScrollItemSize: ["virtualScrollItemSize", "virtualScrollItemSize", numberAttribute], virtualScrollOptions: "virtualScrollOptions", maxlength: ["maxlength", "maxlength", (value) => numberAttribute(value, null)], name: "name", required: ["required", "required", booleanAttribute], size: ["size", "size", numberAttribute], appendTo: "appendTo", autoHighlight: ["autoHighlight", "autoHighlight", booleanAttribute], forceSelection: ["forceSelection", "forceSelection", booleanAttribute], type: "type", autoZIndex: ["autoZIndex", "autoZIndex", booleanAttribute], baseZIndex: ["baseZIndex", "baseZIndex", numberAttribute], ariaLabel: "ariaLabel", dropdownAriaLabel: "dropdownAriaLabel", ariaLabelledBy: "ariaLabelledBy", dropdownIcon: "dropdownIcon", unique: ["unique", "unique", booleanAttribute], group: ["group", "group", booleanAttribute], completeOnFocus: ["completeOnFocus", "completeOnFocus", booleanAttribute], showClear: ["showClear", "showClear", booleanAttribute], field: "field", dropdown: ["dropdown", "dropdown", booleanAttribute], showEmptyMessage: ["showEmptyMessage", "showEmptyMessage", booleanAttribute], dropdownMode: "dropdownMode", multiple: ["multiple", "multiple", booleanAttribute], tabindex: ["tabindex", "tabindex", numberAttribute], dataKey: "dataKey", emptyMessage: "emptyMessage", showTransitionOptions: "showTransitionOptions", hideTransitionOptions: "hideTransitionOptions", autofocus: ["autofocus", "autofocus", booleanAttribute], autocomplete: "autocomplete", optionGroupChildren: "optionGroupChildren", optionGroupLabel: "optionGroupLabel", overlayOptions: "overlayOptions", suggestions: "suggestions", itemSize: "itemSize", optionLabel: "optionLabel", optionValue: "optionValue", id: "id", searchMessage: "searchMessage", emptySelectionMessage: "emptySelectionMessage", selectionMessage: "selectionMessage", autoOptionFocus: ["autoOptionFocus", "autoOptionFocus", booleanAttribute], selectOnFocus: ["selectOnFocus", "selectOnFocus", booleanAttribute], searchLocale: ["searchLocale", "searchLocale", booleanAttribute], optionDisabled: "optionDisabled", focusOnHover: ["focusOnHover", "focusOnHover", booleanAttribute], variant: "variant" }, outputs: { completeMethod: "completeMethod", onSelect: "onSelect", onUnselect: "onUnselect", onFocus: "onFocus", onBlur: "onBlur", onDropdownClick: "onDropdownClick", onClear: "onClear", onKeyUp: "onKeyUp", onShow: "onShow", onHide: "onHide", onLazyLoad: "onLazyLoad" }, host: { properties: { "class.cax-inputwrapper-filled": "filled", "class.cax-inputwrapper-focus": "((focused && !disabled) || autofocus) || overlayVisible", "class.cax-autocomplete-clearable": "showClear && !disabled" }, classAttribute: "cax-element cax-inputwrapper" }, providers: [AUTOCOMPLETE_VALUE_ACCESSOR], queries: [{ propertyName: "templates", predicate: CaxTemplate }], viewQueries: [{ propertyName: "containerEL", first: true, predicate: ["container"], descendants: true }, { propertyName: "inputEL", first: true, predicate: ["focusInput"], descendants: true }, { propertyName: "multiInputEl", first: true, predicate: ["multiIn"], descendants: true }, { propertyName: "multiContainerEL", first: true, predicate: ["multiContainer"], descendants: true }, { propertyName: "dropdownButton", first: true, predicate: ["ddBtn"], descendants: true }, { propertyName: "itemsViewChild", first: true, predicate: ["items"], descendants: true }, { propertyName: "scroller", first: true, predicate: ["scroller"], descendants: true }, { propertyName: "overlayViewChild", first: true, predicate: ["overlay"], descendants: true }], ngImport: i0, template: "<div #container [ngClass]=\"containerClass\" [ngStyle]=\"style\" [class]=\"styleClass\" (click)=\"onContainerClick($event)\">\r\n    \r\n    <SearchIcon  [styleClass]=\"'cax-autocomplete-search-icon'\" [attr.aria-hidden]=\"true\" />\r\n    <input\r\n        *ngIf=\"!multiple\"\r\n        #focusInput\r\n        caxAutoFocus\r\n        [autofocus]=\"autofocus\"\r\n        [ngClass]=\"inputClass\"\r\n        [ngStyle]=\"inputStyle\"\r\n        [class]=\"inputStyleClass\"\r\n        [type]=\"type\"\r\n        [attr.value]=\"inputValue()\"\r\n        [attr.id]=\"inputId\"\r\n        [autocomplete]=\"autocomplete\"\r\n        [required]=\"required\"\r\n        [name]=\"name\"\r\n        aria-autocomplete=\"list\"\r\n        role=\"combobox\"\r\n        [attr.placeholder]=\"placeholder\"\r\n        [attr.size]=\"size\"\r\n        [attr.maxlength]=\"maxlength\"\r\n        [tabindex]=\"!disabled ? tabindex : -1\"\r\n        [readonly]=\"readonly\"\r\n        [disabled]=\"disabled\"\r\n        [attr.aria-label]=\"ariaLabel\"\r\n        [attr.aria-labelledby]=\"ariaLabelledBy\"\r\n        [attr.aria-required]=\"required\"\r\n        [attr.aria-expanded]=\"overlayVisible ?? false\"\r\n        [attr.aria-controls]=\"overlayVisible ? id + '_list' : null\"\r\n        [attr.aria-activedescendant]=\"focused ? focusedOptionId : undefined\"\r\n        (input)=\"onInput($event)\"\r\n        (keydown)=\"onKeyDown($event)\"\r\n        (change)=\"onInputChange($event)\"\r\n        (focus)=\"onInputFocus($event)\"\r\n        (blur)=\"onInputBlur($event)\"\r\n        (paste)=\"onInputPaste($event)\"\r\n        (keyup)=\"onInputKeyUp($event)\"\r\n    />  \r\n    <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    <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>", styles: ["@layer cax{.cax-autocomplete{display:inline-flex;position:relative}.cax-autocomplete-loader{position:absolute;top:50%;margin-top:-.5rem}.cax-autocomplete-dd .cax-autocomplete-input{flex:1 1 auto;width:1%}.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}.cax-autocomplete-clearable{position:relative}.cax-autocomplete-search-icon{position:absolute;top:50%;margin-top:-.5rem;cursor:pointer;margin-left:9px}.cax-autoComplete-clear{right:12px}}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i3.Overlay, selector: "cax-overlay", inputs: ["visible", "mode", "style", "styleClass", "contentStyle", "contentStyleClass", "target", "appendTo", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "listener", "responsive", "options"], outputs: ["visibleChange", "onBeforeShow", "onShow", "onBeforeHide", "onHide", "onAnimationStart", "onAnimationDone"] }, { kind: "directive", type: i1.CaxTemplate, selector: "[caxTemplate]", inputs: ["type", "caxTemplate"] }, { kind: "directive", type: i4.ButtonDirective, selector: "[caxButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain"] }, { kind: "directive", type: i5.Ripple, selector: "[caxRipple]" }, { kind: "component", type: i6.Scroller, selector: "cax-scroller", inputs: ["id", "style", "styleClass", "tabindex", "items", "itemSize", "scrollHeight", "scrollWidth", "orientation", "step", "delay", "resizeDelay", "appendOnly", "inline", "lazy", "disabled", "loaderDisabled", "columns", "showSpacer", "showLoader", "numToleratedItems", "loading", "autoSize", "trackBy", "options"], outputs: ["onLazyLoad", "onScroll", "onScrollIndexChange"] }, { kind: "directive", type: i7.AutoFocus, selector: "[caxAutoFocus]", inputs: ["autofocus"] }, { kind: "component", type: i8.TimesCircleIcon, selector: "TimesCircleIcon" }, { kind: "component", type: i9.SpinnerIcon, selector: "SpinnerIcon" }, { kind: "component", type: i10.ChevronDownIcon, selector: "ChevronDownIcon" }, { kind: "component", type: i11.SearchIcon, selector: "SearchIcon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: AutoComplete, decorators: [{
             type: Component,
@@ -1232,7 +1232,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
                         '[class.cax-inputwrapper-filled]': 'filled',
                         '[class.cax-inputwrapper-focus]': '((focused && !disabled) || autofocus) || overlayVisible',
                         '[class.cax-autocomplete-clearable]': 'showClear && !disabled'
-                    }, providers: [AUTOCOMPLETE_VALUE_ACCESSOR], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div #container [ngClass]=\"containerClass\" [ngStyle]=\"style\" [class]=\"styleClass\" (click)=\"onContainerClick($event)\">\r\n    \r\n    <SearchIcon  [styleClass]=\"'cax-autocomplete-search-icon'\" [attr.aria-hidden]=\"true\" />\r\n    <input\r\n        *ngIf=\"!multiple\"\r\n        #focusInput\r\n        caxAutoFocus\r\n        [autofocus]=\"autofocus\"\r\n        [ngClass]=\"inputClass\"\r\n        [ngStyle]=\"inputStyle\"\r\n        [class]=\"inputStyleClass\"\r\n        [type]=\"type\"\r\n        [attr.value]=\"inputValue()\"\r\n        [attr.id]=\"inputId\"\r\n        [autocomplete]=\"autocomplete\"\r\n        [required]=\"required\"\r\n        [name]=\"name\"\r\n        aria-autocomplete=\"list\"\r\n        role=\"combobox\"\r\n        [attr.placeholder]=\"placeholder\"\r\n        [attr.size]=\"size\"\r\n        [attr.maxlength]=\"maxlength\"\r\n        [tabindex]=\"!disabled ? tabindex : -1\"\r\n        [readonly]=\"readonly\"\r\n        [disabled]=\"disabled\"\r\n        [attr.aria-label]=\"ariaLabel\"\r\n        [attr.aria-labelledby]=\"ariaLabelledBy\"\r\n        [attr.aria-required]=\"required\"\r\n        [attr.aria-expanded]=\"overlayVisible ?? false\"\r\n        [attr.aria-controls]=\"overlayVisible ? id + '_list' : null\"\r\n        [attr.aria-activedescendant]=\"focused ? focusedOptionId : undefined\"\r\n        (input)=\"onInput($event)\"\r\n        (keydown)=\"onKeyDown($event)\"\r\n        (change)=\"onInputChange($event)\"\r\n        (focus)=\"onInputFocus($event)\"\r\n        (blur)=\"onInputBlur($event)\"\r\n        (paste)=\"onInputPaste($event)\"\r\n        (keyup)=\"onInputKeyUp($event)\"\r\n    />  \r\n    <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    <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>", styles: ["@layer cax{.cax-autocomplete{display:inline-flex;position:relative}.cax-autocomplete-loader{position:absolute;top:50%;margin-top:-.5rem}.cax-autocomplete-dd .cax-autocomplete-input{flex:1 1 auto;width:1%}.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}.cax-autocomplete-clearable{position:relative}.cax-autocomplete-search-icon{position:absolute;top:50%;margin-top:-.5rem;cursor:pointer;margin-left:9px}.cax-autoComplete-clear{right:20px}}\n"] }]
+                    }, providers: [AUTOCOMPLETE_VALUE_ACCESSOR], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div #container [ngClass]=\"containerClass\" [ngStyle]=\"style\" [class]=\"styleClass\" (click)=\"onContainerClick($event)\">\r\n    \r\n    <SearchIcon  [styleClass]=\"'cax-autocomplete-search-icon'\" [attr.aria-hidden]=\"true\" />\r\n    <input\r\n        *ngIf=\"!multiple\"\r\n        #focusInput\r\n        caxAutoFocus\r\n        [autofocus]=\"autofocus\"\r\n        [ngClass]=\"inputClass\"\r\n        [ngStyle]=\"inputStyle\"\r\n        [class]=\"inputStyleClass\"\r\n        [type]=\"type\"\r\n        [attr.value]=\"inputValue()\"\r\n        [attr.id]=\"inputId\"\r\n        [autocomplete]=\"autocomplete\"\r\n        [required]=\"required\"\r\n        [name]=\"name\"\r\n        aria-autocomplete=\"list\"\r\n        role=\"combobox\"\r\n        [attr.placeholder]=\"placeholder\"\r\n        [attr.size]=\"size\"\r\n        [attr.maxlength]=\"maxlength\"\r\n        [tabindex]=\"!disabled ? tabindex : -1\"\r\n        [readonly]=\"readonly\"\r\n        [disabled]=\"disabled\"\r\n        [attr.aria-label]=\"ariaLabel\"\r\n        [attr.aria-labelledby]=\"ariaLabelledBy\"\r\n        [attr.aria-required]=\"required\"\r\n        [attr.aria-expanded]=\"overlayVisible ?? false\"\r\n        [attr.aria-controls]=\"overlayVisible ? id + '_list' : null\"\r\n        [attr.aria-activedescendant]=\"focused ? focusedOptionId : undefined\"\r\n        (input)=\"onInput($event)\"\r\n        (keydown)=\"onKeyDown($event)\"\r\n        (change)=\"onInputChange($event)\"\r\n        (focus)=\"onInputFocus($event)\"\r\n        (blur)=\"onInputBlur($event)\"\r\n        (paste)=\"onInputPaste($event)\"\r\n        (keyup)=\"onInputKeyUp($event)\"\r\n    />  \r\n    <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    <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>", styles: ["@layer cax{.cax-autocomplete{display:inline-flex;position:relative}.cax-autocomplete-loader{position:absolute;top:50%;margin-top:-.5rem}.cax-autocomplete-dd .cax-autocomplete-input{flex:1 1 auto;width:1%}.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}.cax-autocomplete-clearable{position:relative}.cax-autocomplete-search-icon{position:absolute;top:50%;margin-top:-.5rem;cursor:pointer;margin-left:9px}.cax-autoComplete-clear{right:12px}}\n"] }]
         }], ctorParameters: () => [{ type: Document, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]