cps-ui-kit 21.20.0 → 21.21.0

package/fesm2022/cps-ui-kit.mjs

@@ -2276,6 +2276,7 @@ class CpsAutocompleteComponent {
         this.cvtWidth = '';
         this.isOpened = false;
         this.isActive = false;
+        this.isKeyboardFocused = false;
         this.inputText = '';
         this.inputTextDebounced = '';
         this.filteredOptions = [];
@@ -2294,6 +2295,7 @@ class CpsAutocompleteComponent {
         this._cpsRootFontSizeService = inject(CPS_ROOT_FONT_SIZE_SERVICE);
         this._inputChangeSubject$ = new Subject();
         this._destroy$ = new Subject();
+        this._mouseActivated = false;
         this._options = [];
         this._optionIds = new WeakMap();
         // eslint-disable-next-line @typescript-eslint/no-empty-function
@@ -2410,6 +2412,8 @@ class CpsAutocompleteComponent {
         }
     }
     onOptionClick(option) {
+        this.isKeyboardFocused = false;
+        this._mouseActivated = true;
         this._clickOption(option);
     }
     toggleAll() {
@@ -2480,15 +2484,21 @@ class CpsAutocompleteComponent {
         this.clearInput();
         this._dehighlightOption();
         if (hadValue) {
+            this._mouseActivated = !(event instanceof KeyboardEvent);
             setTimeout(() => {
                 this.focusInput();
             }, 0);
         }
+        if (!(event instanceof KeyboardEvent)) {
+            this.isKeyboardFocused = false;
+        }
     }
     // eslint-disable-next-line @typescript-eslint/no-empty-function
     setDisabledState(_disabled) { }
     onBlur() {
         this.isActive = false;
+        this.isKeyboardFocused = false;
+        this._mouseActivated = false;
         this._confirmInput(this.inputText || '', false);
         if (this.isOpened) {
             this._toggleOptions(false);
@@ -2499,7 +2509,9 @@ class CpsAutocompleteComponent {
     onFocus() {
         if (!this.disabled) {
             this.isActive = true;
+            this.isKeyboardFocused = !this._mouseActivated;
         }
+        this._mouseActivated = false;
         if (!this.multiple) {
             this.activeSingle = true;
             if (!this.inputText)
@@ -2521,7 +2533,11 @@ class CpsAutocompleteComponent {
         this._confirmInput(this.inputText || '', false);
         this._closeAndClear();
     }
-    onBoxClick() {
+    onBoxClick(fromKeyboard = false) {
+        this._mouseActivated = !fromKeyboard;
+        if (!fromKeyboard) {
+            this.isKeyboardFocused = false;
+        }
         const wasOpened = this.isOpened;
         if (!this.multiple) {
             this.activeSingle = true;
@@ -2540,6 +2556,9 @@ class CpsAutocompleteComponent {
     }
     onContainerKeyDown(event) {
         const code = event.keyCode;
+        if ([13, 38, 40].includes(code)) {
+            this.isKeyboardFocused = true;
+        }
         // enter
         if (code === 13) {
             let idx = this.optionHighlightedIndex;
@@ -2601,7 +2620,7 @@ class CpsAutocompleteComponent {
             this._closeAndClear();
         }
         else {
-            this.onBoxClick();
+            this.onBoxClick(event instanceof KeyboardEvent);
         }
     }
     focusInput() {
@@ -2929,7 +2948,7 @@ class CpsAutocompleteComponent {
         }, 0);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: CpsAutocompleteComponent, deps: [{ token: i1$2.NgControl, optional: true, self: true }, { token: i0.ChangeDetectorRef }, { token: LabelByValuePipe }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: CpsAutocompleteComponent, isStandalone: true, selector: "cps-autocomplete", inputs: { label: "label", ariaLabel: "ariaLabel", placeholder: "placeholder", hint: "hint", returnObject: "returnObject", multiple: "multiple", disabled: "disabled", width: "width", selectAll: "selectAll", showChevron: "showChevron", withOptionsAliases: "withOptionsAliases", useOptionsAliasesWhenNoMatch: "useOptionsAliasesWhenNoMatch", optionAlias: "optionAlias", chips: "chips", closableChips: "closableChips", clearable: "clearable", openOnClear: "openOnClear", keepInitialOrder: "keepInitialOrder", optionLabel: "optionLabel", optionValue: "optionValue", optionInfo: "optionInfo", hideDetails: "hideDetails", persistentClear: "persistentClear", prefixIcon: "prefixIcon", prefixIconSize: "prefixIconSize", loading: "loading", loadingMessage: "loadingMessage", showLoadingMessage: "showLoadingMessage", emptyMessage: "emptyMessage", showEmptyMessage: "showEmptyMessage", virtualScroll: "virtualScroll", numToleratedItems: "numToleratedItems", externalError: "externalError", infoTooltip: "infoTooltip", infoTooltipClass: "infoTooltipClass", infoTooltipMaxWidth: "infoTooltipMaxWidth", infoTooltipPersistent: "infoTooltipPersistent", infoTooltipPosition: "infoTooltipPosition", appearance: "appearance", emptyOptionIndex: "emptyOptionIndex", inputChangeDebounceTime: "inputChangeDebounceTime", validating: "validating", _value: ["value", "_value"], options: "options" }, outputs: { valueChanged: "valueChanged", inputChanged: "inputChanged", focused: "focused", blurred: "blurred" }, providers: [LabelByValuePipe, CheckOptionSelectedPipe], viewQueries: [{ propertyName: "autocompleteBox", first: true, predicate: ["autocompleteBox"], descendants: true }, { propertyName: "autocompleteContainer", first: true, predicate: ["autocompleteContainer"], descendants: true }, { propertyName: "virtualList", first: true, predicate: ["virtualList"], descendants: true }, { propertyName: "optionsMenu", first: true, predicate: ["optionsMenu"], descendants: true }, { propertyName: "optionsList", first: true, predicate: ["optionsList"], descendants: true }, { propertyName: "autocompleteInput", first: true, predicate: ["autocompleteInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  [ngStyle]=\"{ width: cvtWidth }\"\n  class=\"cps-autocomplete\"\n  [ngClass]=\"{\n    disabled: disabled,\n    error: error || externalError,\n    active: isActive,\n    opened: isOpened\n  }\"\n  #autocompleteContainer>\n  @if (label) {\n    <div class=\"cps-autocomplete-label\">\n      <label>{{ label }}</label>\n      @if (infoTooltip) {\n        <cps-info-circle\n          class=\"cps-autocomplete-label-info-circle\"\n          size=\"xsmall\"\n          [tooltipPosition]=\"infoTooltipPosition\"\n          [tooltipContentClass]=\"infoTooltipClass\"\n          [tooltipMaxWidth]=\"infoTooltipMaxWidth\"\n          [tooltipPersistent]=\"infoTooltipPersistent\"\n          [tooltipText]=\"infoTooltip\">\n        </cps-info-circle>\n      }\n    </div>\n  }\n  <div\n    (keydown)=\"onContainerKeyDown($event)\"\n    class=\"cps-autocomplete-container\"\n    [class.active]=\"isActive\"\n    [ngClass]=\"{\n      'persistent-clear': persistentClear,\n      borderless: appearance === 'borderless',\n      underlined: appearance === 'underlined'\n    }\">\n    <div\n      class=\"cps-autocomplete-box\"\n      #autocompleteBox\n      (mousedown)=\"onBoxClick()\">\n      <div class=\"cps-autocomplete-box-area\">\n        @if (prefixIcon) {\n          <cps-icon\n            aria-hidden=\"true\"\n            [icon]=\"prefixIcon\"\n            [style.color]=\"disabled ? 'var(--cps-text-muted)' : null\"\n            [size]=\"prefixIconSize\"\n            class=\"prefix-icon\">\n          </cps-icon>\n        }\n        @if (hasSelectedValue()) {\n          <div class=\"cps-autocomplete-box-items\">\n            @if (!multiple) {\n              <span class=\"single-item\">\n                <div class=\"single-item-selection\">\n                  <span [style.opacity]=\"activeSingle ? 0 : 1\">{{\n                    returnObject\n                      ? value[optionLabel]\n                      : (value\n                        | labelByValue: options : optionValue : optionLabel)\n                  }}</span>\n                </div>\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    autocompleteInputTemplate;\n                    context: {\n                      inputClass: 'single-item-input',\n                      inputStyle: activeSingle ? { opacity: '1' } : null\n                    }\n                  \">\n                </ng-container>\n              </span>\n            }\n            @if (multiple && !chips) {\n              <div class=\"cps-autocomplete-multi-selection-wrapper\">\n                <div\n                  class=\"text-group\"\n                  role=\"list\"\n                  tabindex=\"-1\"\n                  aria-label=\"Selected options\">\n                  @for (val of value; track val; let last = $last) {\n                    <div\n                      class=\"text-group-item\"\n                      role=\"listitem\"\n                      [ngClass]=\"{\n                        'about-to-remove': last && backspaceClickedOnce\n                      }\">\n                      {{\n                        returnObject\n                          ? val[optionLabel]\n                          : (val\n                            | labelByValue\n                              : options\n                              : optionValue\n                              : optionLabel)\n                      }}{{ !last ? ',' : '' }}\n                    </div>\n                  }\n                </div>\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    autocompleteInputTemplate;\n                    context: {\n                      inputClass: 'multi-item-input'\n                    }\n                  \"></ng-container>\n              </div>\n            }\n            @if (multiple && chips) {\n              <div class=\"cps-autocomplete-multi-selection-wrapper\">\n                <div\n                  class=\"chips-group\"\n                  role=\"list\"\n                  tabindex=\"-1\"\n                  aria-label=\"Selected options\">\n                  @for (val of value; track val; let last = $last) {\n                    <cps-chip\n                      role=\"listitem\"\n                      closeButtonAriaLabel=\"Remove\"\n                      [disabled]=\"disabled\"\n                      [closable]=\"closableChips\"\n                      (closed)=\"select(val, true)\"\n                      [ngClass]=\"{\n                        'about-to-remove': last && backspaceClickedOnce\n                      }\"\n                      [label]=\"\n                        returnObject\n                          ? val[optionLabel]\n                          : (val\n                            | labelByValue: options : optionValue : optionLabel)\n                      \">\n                    </cps-chip>\n                  }\n                </div>\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    autocompleteInputTemplate;\n                    context: {\n                      inputClass: 'multi-chip-input'\n                    }\n                  \"></ng-container>\n              </div>\n            }\n          </div>\n        } @else {\n          <ng-container\n            *ngTemplateOutlet=\"autocompleteInputTemplate\"></ng-container>\n        }\n        <span class=\"cps-autocomplete-box-icons\">\n          @if (clearable && !disabled) {\n            <span\n              role=\"button\"\n              (click)=\"clear($event)\"\n              (mousedown)=\"$event.preventDefault()\"\n              (keydown.enter)=\"clear($event)\"\n              (keydown.space)=\"clear($event)\"\n              aria-label=\"Clear selection\"\n              [tabindex]=\"disabled ? -1 : 0\"\n              class=\"cps-autocomplete-box-clear-icon\"\n              [ngClass]=\"{\n                'cps-autocomplete-box-clear-icon-hidden':\n                  !persistentClear && !hasSelectedValue()\n              }\">\n              <cps-icon\n                icon=\"delete\"\n                size=\"small\"\n                aria-hidden=\"true\"></cps-icon>\n            </span>\n          }\n          @if (showChevron && options.length) {\n            <span\n              class=\"cps-autocomplete-box-chevron\"\n              role=\"button\"\n              (mousedown)=\"onChevronClick($event)\"\n              (keydown.enter)=\"onChevronClick($event)\"\n              (keydown.space)=\"onChevronClick($event)\"\n              [attr.aria-label]=\"\n                isOpened ? 'Collapse options' : 'Expand options'\n              \"\n              [tabindex]=\"disabled ? -1 : 0\">\n              <cps-icon\n                aria-hidden=\"true\"\n                icon=\"chevron-down\"\n                size=\"small\"\n                [color]=\"disabled ? 'text-light' : 'text-dark'\"></cps-icon>\n            </span>\n          }\n        </span>\n      </div>\n    </div>\n\n    <cps-menu\n      #optionsMenu\n      [withArrow]=\"false\"\n      (beforeMenuHidden)=\"onBeforeOptionsHidden($event)\"\n      hideTransitionOptions=\"0s linear\"\n      containerClass=\"cps-autocomplete-options-menu\">\n      <div\n        #optionsList\n        role=\"listbox\"\n        [id]=\"optionsListId\"\n        tabindex=\"-1\"\n        aria-readonly=\"false\"\n        aria-disabled=\"false\"\n        aria-orientation=\"vertical\"\n        [attr.aria-multiselectable]=\"!!multiple\"\n        class=\"cps-autocomplete-options\"\n        [style.width.px]=\"autocompleteBoxWidthPx\">\n        @if (loading && showLoadingMessage) {\n          <div\n            class=\"cps-autocomplete-options-loading\"\n            role=\"option\"\n            tabindex=\"-1\"\n            aria-disabled=\"true\"\n            aria-selected=\"false\">\n            {{ loadingMessage }}\n          </div>\n        }\n        @if (\n          showEmptyMessage &&\n          filteredOptions.length < 1 &&\n          !loading &&\n          inputTextDebounced\n        ) {\n          <div\n            class=\"cps-autocomplete-options-empty\"\n            role=\"option\"\n            tabindex=\"-1\"\n            aria-disabled=\"true\"\n            aria-selected=\"false\">\n            {{ emptyMessage }}\n          </div>\n        }\n        @if (isSelectAllVisible) {\n          <div\n            class=\"cps-autocomplete-options-option select-all-option\"\n            [id]=\"selectAllOptionId\"\n            role=\"option\"\n            tabindex=\"-1\"\n            aria-disabled=\"false\"\n            [attr.aria-setsize]=\"optionsAriaSetSize\"\n            [attr.aria-posinset]=\"1\"\n            [attr.aria-selected]=\"value?.length === options.length\"\n            [class.allselected]=\"value?.length === options.length\"\n            [class.highlighten]=\"\n              isArrowNavigating && optionHighlightedIndex === 0\n            \"\n            (mousedown)=\"$event.preventDefault()\"\n            (click)=\"toggleAll()\">\n            <span class=\"cps-autocomplete-options-option-left\">\n              @if (multiple) {\n                <span class=\"cps-autocomplete-options-option-check\"> </span>\n              }\n              <span class=\"cps-autocomplete-options-option-label\"\n                >Select all</span\n              >\n            </span>\n          </div>\n        }\n        @if (!loading) {\n          @if (virtualScroll) {\n            <p-virtualscroller\n              #virtualList\n              [tabindex]=\"-1\"\n              [items]=\"filteredOptions\"\n              [delay]=\"0\"\n              [scrollHeight]=\"virtualListHeightRem + 'rem'\"\n              [options]=\"{ numToleratedItems: numToleratedItems }\"\n              [itemSize]=\"virtualScrollItemSizePx()\">\n              <ng-template pTemplate=\"item\" let-item let-options=\"options\">\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    itemTemplate;\n                    context: {\n                      item: item,\n                      itemIndex: options.index\n                    }\n                  \"></ng-container>\n              </ng-template>\n            </p-virtualscroller>\n          } @else {\n            @for (item of filteredOptions; track item; let itemIndex = $index) {\n              <ng-container\n                *ngTemplateOutlet=\"\n                  itemTemplate;\n                  context: {\n                    item: item,\n                    itemIndex: itemIndex\n                  }\n                \"></ng-container>\n            }\n          }\n        }\n      </div>\n    </cps-menu>\n    @if (loading || validating) {\n      <cps-progress-linear\n        height=\"3\"\n        radius=\"4\"\n        opacity=\"0.3\"\n        class=\"autocomplete-progress-bar\"\n        bgColor=\"transparent\">\n      </cps-progress-linear>\n    }\n  </div>\n  @if (!error && !externalError && !hideDetails) {\n    <div class=\"cps-autocomplete-hint\">\n      {{ hint }}\n    </div>\n  }\n  @if ((error || externalError) && !hideDetails) {\n    <div class=\"cps-autocomplete-error\" role=\"alert\" aria-live=\"assertive\">\n      {{ error || externalError }}\n    </div>\n  }\n</div>\n\n<ng-template\n  #autocompleteInputTemplate\n  let-inputClass=\"inputClass\"\n  let-inputStyle=\"inputStyle\">\n  <input\n    #autocompleteInput\n    type=\"text\"\n    class=\"cps-autocomplete-box-input\"\n    spellcheck=\"false\"\n    [disabled]=\"disabled\"\n    role=\"combobox\"\n    aria-autocomplete=\"list\"\n    aria-haspopup=\"listbox\"\n    [attr.aria-invalid]=\"error || externalError ? 'true' : null\"\n    [attr.aria-controls]=\"optionsListId\"\n    [attr.aria-activedescendant]=\"activeDescendantId\"\n    [attr.aria-expanded]=\"isOpened\"\n    [attr.aria-required]=\"isRequired || null\"\n    [ngClass]=\"inputClass\"\n    [ngStyle]=\"inputStyle\"\n    [placeholder]=\"!hasSelectedValue() ? placeholder : ''\"\n    (input)=\"filterOptions($event)\"\n    (keydown)=\"onInputKeyDown($event)\"\n    [(ngModel)]=\"inputText\"\n    (focus)=\"onFocus()\"\n    (blur)=\"onBlur()\"\n    [attr.aria-label]=\"computedLabel\" />\n</ng-template>\n\n<ng-template #itemTemplate let-item=\"item\" let-itemIndex=\"itemIndex\">\n  <div\n    class=\"cps-autocomplete-options-option\"\n    [id]=\"getOptionId(item, itemIndex)\"\n    role=\"option\"\n    tabindex=\"-1\"\n    [attr.aria-setsize]=\"optionsAriaSetSize\"\n    [attr.aria-posinset]=\"getOptionAriaPosInSet(itemIndex)\"\n    (mousedown)=\"$event.preventDefault()\"\n    (click)=\"onOptionClick(item)\"\n    [class.highlighten]=\"\n      isArrowNavigating &&\n      itemIndex === optionHighlightedIndex - (isSelectAllVisible ? 1 : 0)\n    \"\n    [attr.aria-selected]=\"\n      item | checkOptionSelected: value : multiple : returnObject : optionValue\n    \"\n    [class.selected]=\"\n      item | checkOptionSelected: value : multiple : returnObject : optionValue\n    \">\n    <span class=\"cps-autocomplete-options-option-left\">\n      @if (multiple) {\n        <span class=\"cps-autocomplete-options-option-check\"> </span>\n      }\n      <span\n        data-testid=\"cps-autocomplete-options\"\n        class=\"cps-autocomplete-options-option-label\"\n        [class.virtual-row]=\"virtualScroll\"\n        >{{ item[optionLabel] }}</span\n      >\n    </span>\n\n    <span\n      class=\"cps-autocomplete-options-option-right\"\n      [class.virtual-row]=\"virtualScroll\"\n      >{{ item[optionInfo] }}</span\n    >\n  </div>\n</ng-template>\n", styles: [":host{display:flex}:host .cps-autocomplete{position:relative;width:100%;outline:none;font-family:inherit;font-weight:400;display:grid}:host .cps-autocomplete .cps-autocomplete-container{position:relative}:host .cps-autocomplete .cps-autocomplete-container .autocomplete-progress-bar{position:absolute;bottom:.0625rem;padding:0 .0625rem}:host .cps-autocomplete .cps-autocomplete-container.borderless .cps-autocomplete-box,:host .cps-autocomplete .cps-autocomplete-container.underlined .cps-autocomplete-box{line-height:1;border:none!important;border-radius:0}:host .cps-autocomplete .cps-autocomplete-container.underlined .cps-autocomplete-box{border-bottom:.0625rem solid var(--cps-color-line-light)!important}:host .cps-autocomplete.active .cps-autocomplete-box{border:.0625rem solid var(--cps-color-calm)}:host .cps-autocomplete.active .cps-autocomplete-box .cps-autocomplete-box-area .prefix-icon{color:var(--cps-color-calm)}:host .cps-autocomplete.opened .cps-autocomplete-box .cps-autocomplete-box-chevron{top:1.375rem;transform:rotate(180deg)}:host .cps-autocomplete .cps-autocomplete-label{align-items:center;display:inline-flex;margin-bottom:.2rem;color:var(--cps-color-text-dark);background-color:var(--cps-surface-body);font-size:.875rem;font-weight:600}:host .cps-autocomplete .cps-autocomplete-label .cps-autocomplete-label-info-circle{margin-left:.5rem;pointer-events:all}:host .cps-autocomplete .persistent-clear .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:not(:focus):not(:hover) cps-icon,:host .cps-autocomplete .cps-autocomplete-container.active .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:not(:focus):not(:hover) cps-icon,:host .cps-autocomplete .cps-autocomplete-container:hover .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:not(:focus):not(:hover) cps-icon{opacity:.5}:host .cps-autocomplete .cps-autocomplete-box{overflow:hidden;min-height:2.375rem;width:100%;cursor:text;background:var(--cps-input-background);font-size:1rem;outline:none;padding:0 .75rem;border-radius:.25rem;border:.0625rem solid var(--cps-color-line-light);transition-duration:.2s}:host .cps-autocomplete .cps-autocomplete-box-area{display:flex;min-height:2.25rem;align-items:center}:host .cps-autocomplete .cps-autocomplete-box-area .prefix-icon{margin-right:.5rem;color:var(--cps-color-text-dark)}:host .cps-autocomplete .cps-autocomplete-box-input{min-height:2.25rem;padding:0;background-color:transparent;width:0;min-width:1.875rem;flex-grow:1;font-size:1rem;color:var(--cps-color-text-dark);border-style:none;outline:none;font-family:inherit}:host .cps-autocomplete .cps-autocomplete-box-input::placeholder{-webkit-user-select:none;user-select:none;color:var(--cps-input-placeholder);font-style:italic;opacity:1}:host .cps-autocomplete .cps-autocomplete-box-items{display:inline-flex;flex-direction:column;width:100%;padding-top:.1875rem;padding-bottom:.1875rem;min-height:2.25rem;justify-content:center;position:relative}:host .cps-autocomplete .cps-autocomplete-box-items .single-item{color:var(--cps-color-text-dark);display:inline-flex}:host .cps-autocomplete .cps-autocomplete-box-items .single-item-selection{display:inline-flex;letter-spacing:inherit;line-height:inherit;max-width:100%}:host .cps-autocomplete .cps-autocomplete-box-items .single-item-input{opacity:0;min-width:0;align-self:flex-start;flex:1 1;transition:none;position:absolute;top:0;bottom:0;width:100%;padding-inline-start:inherit;padding-inline-end:inherit}:host .cps-autocomplete .cps-autocomplete-box-items .multi-chip-input{min-height:1.875rem}:host .cps-autocomplete .cps-autocomplete-box-items .multi-item-input{min-height:1.75rem}:host .cps-autocomplete .cps-autocomplete-box-items .cps-autocomplete-multi-selection-wrapper{display:inline-flex;flex-wrap:wrap;align-items:center}:host .cps-autocomplete .cps-autocomplete-box-items .cps-autocomplete-multi-selection-wrapper .chips-group{display:contents}:host .cps-autocomplete .cps-autocomplete-box-items .cps-autocomplete-multi-selection-wrapper .chips-group cps-chip{padding-bottom:.1875rem;padding-top:.1875rem;padding-right:.25rem}:host .cps-autocomplete .cps-autocomplete-box-items .cps-autocomplete-multi-selection-wrapper .text-group{display:contents;color:var(--cps-color-text-dark)}:host .cps-autocomplete .cps-autocomplete-box-items .cps-autocomplete-multi-selection-wrapper .text-group .text-group-item{padding-bottom:.1875rem;padding-top:.1875rem;padding-right:.25rem}:host .cps-autocomplete .cps-autocomplete-box:hover{border:.0625rem solid var(--cps-color-calm)}:host .cps-autocomplete .cps-autocomplete-box:hover .cps-autocomplete-box-area .prefix-icon{color:var(--cps-color-calm)}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons{display:flex}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon{cursor:pointer;display:flex;color:var(--cps-state-error);margin-left:.5rem}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:focus{outline:none}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:hover cps-icon,:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:focus cps-icon{opacity:1}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:focus-visible{outline:none;position:relative}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:focus-visible:before,:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:focus-visible:after{content:\"\";position:absolute;border-radius:50%}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:focus-visible:before{inset:-.125rem;border:.0625rem solid var(--cps-color-calm)}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:focus-visible:after{inset:-.25rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:focus-visible.suppress-focus-visible:before,:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:focus-visible.suppress-focus-visible:after{display:none}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon-hidden{visibility:hidden}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon cps-icon{opacity:0;transition-duration:.2s}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron{display:flex;margin-left:.5rem}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron:focus{outline:none}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron:focus-visible{outline:none;position:relative}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron:focus-visible:before,:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron:focus-visible:after{content:\"\";position:absolute;border-radius:.375rem}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron:focus-visible:before{inset:-.125rem;border:.0625rem solid var(--cps-color-calm)}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron:focus-visible:after{inset:-.25rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron:focus-visible.suppress-focus-visible:before,:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron:focus-visible.suppress-focus-visible:after{display:none}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron{transition-duration:.2s;cursor:pointer}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron:hover ::ng-deep cps-icon .cps-icon,:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron:focus ::ng-deep cps-icon .cps-icon{color:var(--cps-color-calm)!important}:host .cps-autocomplete .cps-autocomplete-hint{color:var(--cps-color-text-mild);background-color:var(--cps-surface-body);font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default;margin-top:.2rem}:host .cps-autocomplete .cps-autocomplete-error{color:var(--cps-state-error);font-weight:700;font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default;margin-top:.2rem}:host .cps-autocomplete.disabled{pointer-events:none}:host .cps-autocomplete.disabled .cps-autocomplete-box{background:var(--cps-color-bg-disabled)}:host .cps-autocomplete.disabled .cps-autocomplete-box-items{color:var(--cps-color-text-light)}:host .cps-autocomplete.disabled .cps-autocomplete-box-items .text-group,:host .cps-autocomplete.disabled .cps-autocomplete-box-items .single-item{color:var(--cps-color-text-light)}:host .cps-autocomplete.disabled .cps-autocomplete-label{color:var(--cps-color-text-mild)}:host .cps-autocomplete.error .cps-autocomplete-box{border-color:var(--cps-state-error)!important;background:#fef3f2}:host .about-to-remove{color:var(--cps-color-text-light)}:host .about-to-remove ::ng-deep .cps-chip{background-color:var(--cps-color-bg-mid)}.cps-autocomplete-options{font-family:inherit;background:var(--cps-popover-background);overflow-x:hidden;max-height:15.125rem;overflow-y:auto}.cps-autocomplete-options .cps-autocomplete-options-empty,.cps-autocomplete-options .cps-autocomplete-options-loading{padding:.6875rem;font-size:1rem;cursor:default;color:var(--cps-color-text-dark)}.cps-autocomplete-options .cps-autocomplete-options-option{padding:.75rem;justify-content:space-between;display:flex;cursor:pointer}.cps-autocomplete-options .cps-autocomplete-options-option:hover{background:var(--cps-color-highlight-hover)}.cps-autocomplete-options .cps-autocomplete-options-option-label{color:var(--cps-color-text-dark)}.cps-autocomplete-options .cps-autocomplete-options-option-left{display:flex;align-items:center;margin-right:.5rem}.cps-autocomplete-options .cps-autocomplete-options-option-right{color:var(--cps-color-text-medium);text-align:right}.cps-autocomplete-options .cps-autocomplete-options-option-check{background-color:transparent;border:0;width:1rem;height:1rem;cursor:pointer;display:inline-block;vertical-align:middle;box-sizing:border-box;position:relative;flex-shrink:0;transition:border-color 90ms cubic-bezier(0,0,.2,.1),background-color 90ms cubic-bezier(0,0,.2,.1);margin-right:.5rem;opacity:0}.cps-autocomplete-options .cps-autocomplete-options-option-check:after{color:var(--cps-color-calm);top:.25rem;left:.0625rem;width:.5rem;height:.1875rem;border-left:.125rem solid currentColor;transform:rotate(-45deg);opacity:1;box-sizing:content-box;position:absolute;content:\"\";border-bottom:.125rem solid currentColor;transition:opacity 90ms cubic-bezier(0,0,.2,.1)}.cps-autocomplete-options .cps-autocomplete-options-option.selected,.cps-autocomplete-options .cps-autocomplete-options-option.allselected{font-weight:600}.cps-autocomplete-options .cps-autocomplete-options-option.selected .cps-autocomplete-options-option-label,.cps-autocomplete-options .cps-autocomplete-options-option.allselected .cps-autocomplete-options-option-label{color:var(--cps-color-calm)}.cps-autocomplete-options .cps-autocomplete-options-option.selected .cps-autocomplete-options-option-check,.cps-autocomplete-options .cps-autocomplete-options-option.allselected .cps-autocomplete-options-option-check{opacity:1}.cps-autocomplete-options .cps-autocomplete-options-option.selected{background:var(--cps-color-highlight-selected)}.cps-autocomplete-options .cps-autocomplete-options-option.selected .cps-autocomplete-options-option-right{color:var(--cps-color-text-dark)}.cps-autocomplete-options .cps-autocomplete-options-option.highlighten{background:var(--cps-color-highlight-active)}.cps-autocomplete-options .cps-autocomplete-options-option.selected.highlighten{background:var(--cps-color-highlight-selected-dark)}.cps-autocomplete-options .select-all-option{border-bottom:.0625rem solid lightgrey;font-weight:600}.cps-autocomplete-options ::ng-deep .p-virtualscroller-list.p-scroller{overflow-anchor:none}.cps-autocomplete-options .virtual-row{white-space:nowrap}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }, { kind: "component", type: CpsChipComponent, selector: "cps-chip", inputs: ["label", "icon", "iconColor", "iconPosition", "closable", "disabled", "closeButtonAriaLabel"], outputs: ["closed"] }, { kind: "component", type: CpsProgressLinearComponent, selector: "cps-progress-linear", inputs: ["width", "height", "color", "bgColor", "opacity", "radius"] }, { kind: "component", type: CpsInfoCircleComponent, selector: "cps-info-circle", inputs: ["size", "tooltipText", "tooltipPosition", "tooltipContentClass", "tooltipMaxWidth", "tooltipPersistent"] }, { kind: "ngmodule", type: ScrollerModule }, { kind: "component", type: i4$1.Scroller, selector: "p-scroller, p-virtualscroller, p-virtual-scroller, p-virtualScroller", inputs: ["hostName", "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: i4.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: CpsMenuComponent, selector: "cps-menu", inputs: ["header", "ariaLabel", "items", "withArrow", "compressed", "focusOnShow", "persistent", "containerClass", "showTransitionOptions", "hideTransitionOptions"], outputs: ["menuShown", "menuHidden", "beforeMenuHidden", "contentClicked", "containerMouseLeave"] }, { kind: "pipe", type: LabelByValuePipe, name: "labelByValue" }, { kind: "pipe", type: CheckOptionSelectedPipe, name: "checkOptionSelected" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: CpsAutocompleteComponent, isStandalone: true, selector: "cps-autocomplete", inputs: { label: "label", ariaLabel: "ariaLabel", placeholder: "placeholder", hint: "hint", returnObject: "returnObject", multiple: "multiple", disabled: "disabled", width: "width", selectAll: "selectAll", showChevron: "showChevron", withOptionsAliases: "withOptionsAliases", useOptionsAliasesWhenNoMatch: "useOptionsAliasesWhenNoMatch", optionAlias: "optionAlias", chips: "chips", closableChips: "closableChips", clearable: "clearable", openOnClear: "openOnClear", keepInitialOrder: "keepInitialOrder", optionLabel: "optionLabel", optionValue: "optionValue", optionInfo: "optionInfo", hideDetails: "hideDetails", persistentClear: "persistentClear", prefixIcon: "prefixIcon", prefixIconSize: "prefixIconSize", loading: "loading", loadingMessage: "loadingMessage", showLoadingMessage: "showLoadingMessage", emptyMessage: "emptyMessage", showEmptyMessage: "showEmptyMessage", virtualScroll: "virtualScroll", numToleratedItems: "numToleratedItems", externalError: "externalError", infoTooltip: "infoTooltip", infoTooltipClass: "infoTooltipClass", infoTooltipMaxWidth: "infoTooltipMaxWidth", infoTooltipPersistent: "infoTooltipPersistent", infoTooltipPosition: "infoTooltipPosition", appearance: "appearance", emptyOptionIndex: "emptyOptionIndex", inputChangeDebounceTime: "inputChangeDebounceTime", validating: "validating", _value: ["value", "_value"], options: "options" }, outputs: { valueChanged: "valueChanged", inputChanged: "inputChanged", focused: "focused", blurred: "blurred" }, providers: [LabelByValuePipe, CheckOptionSelectedPipe], viewQueries: [{ propertyName: "autocompleteBox", first: true, predicate: ["autocompleteBox"], descendants: true }, { propertyName: "autocompleteContainer", first: true, predicate: ["autocompleteContainer"], descendants: true }, { propertyName: "virtualList", first: true, predicate: ["virtualList"], descendants: true }, { propertyName: "optionsMenu", first: true, predicate: ["optionsMenu"], descendants: true }, { propertyName: "optionsList", first: true, predicate: ["optionsList"], descendants: true }, { propertyName: "autocompleteInput", first: true, predicate: ["autocompleteInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  [ngStyle]=\"{ width: cvtWidth }\"\n  class=\"cps-autocomplete\"\n  [ngClass]=\"{\n    disabled: disabled,\n    error: error || externalError,\n    active: isActive,\n    opened: isOpened\n  }\"\n  #autocompleteContainer>\n  @if (label) {\n    <div class=\"cps-autocomplete-label\">\n      <label>{{ label }}</label>\n      @if (infoTooltip) {\n        <cps-info-circle\n          class=\"cps-autocomplete-label-info-circle\"\n          size=\"xsmall\"\n          [tooltipPosition]=\"infoTooltipPosition\"\n          [tooltipContentClass]=\"infoTooltipClass\"\n          [tooltipMaxWidth]=\"infoTooltipMaxWidth\"\n          [tooltipPersistent]=\"infoTooltipPersistent\"\n          [tooltipText]=\"infoTooltip\">\n        </cps-info-circle>\n      }\n    </div>\n  }\n  <div\n    (keydown)=\"onContainerKeyDown($event)\"\n    class=\"cps-autocomplete-container\"\n    [class.active]=\"isActive\"\n    [class.keyboard-focused]=\"isKeyboardFocused\"\n    [ngClass]=\"{\n      'persistent-clear': persistentClear,\n      borderless: appearance === 'borderless',\n      underlined: appearance === 'underlined'\n    }\">\n    <div\n      class=\"cps-autocomplete-box\"\n      #autocompleteBox\n      (mousedown)=\"onBoxClick()\">\n      <div class=\"cps-autocomplete-box-area\">\n        @if (prefixIcon) {\n          <cps-icon\n            aria-hidden=\"true\"\n            [icon]=\"prefixIcon\"\n            [style.color]=\"disabled ? 'var(--cps-text-muted)' : null\"\n            [size]=\"prefixIconSize\"\n            class=\"prefix-icon\">\n          </cps-icon>\n        }\n        @if (hasSelectedValue()) {\n          <div class=\"cps-autocomplete-box-items\">\n            @if (!multiple) {\n              <span class=\"single-item\">\n                <div class=\"single-item-selection\">\n                  <span [style.opacity]=\"activeSingle ? 0 : 1\">{{\n                    returnObject\n                      ? value[optionLabel]\n                      : (value\n                        | labelByValue: options : optionValue : optionLabel)\n                  }}</span>\n                </div>\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    autocompleteInputTemplate;\n                    context: {\n                      inputClass: 'single-item-input',\n                      inputStyle: activeSingle ? { opacity: '1' } : null\n                    }\n                  \">\n                </ng-container>\n              </span>\n            }\n            @if (multiple && !chips) {\n              <div class=\"cps-autocomplete-multi-selection-wrapper\">\n                <div\n                  class=\"text-group\"\n                  role=\"list\"\n                  tabindex=\"-1\"\n                  aria-label=\"Selected options\">\n                  @for (val of value; track val; let last = $last) {\n                    <div\n                      class=\"text-group-item\"\n                      role=\"listitem\"\n                      [ngClass]=\"{\n                        'about-to-remove': last && backspaceClickedOnce\n                      }\">\n                      {{\n                        returnObject\n                          ? val[optionLabel]\n                          : (val\n                            | labelByValue\n                              : options\n                              : optionValue\n                              : optionLabel)\n                      }}{{ !last ? ',' : '' }}\n                    </div>\n                  }\n                </div>\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    autocompleteInputTemplate;\n                    context: {\n                      inputClass: 'multi-item-input'\n                    }\n                  \"></ng-container>\n              </div>\n            }\n            @if (multiple && chips) {\n              <div class=\"cps-autocomplete-multi-selection-wrapper\">\n                <div\n                  class=\"chips-group\"\n                  role=\"list\"\n                  tabindex=\"-1\"\n                  aria-label=\"Selected options\">\n                  @for (val of value; track val; let last = $last) {\n                    <cps-chip\n                      role=\"listitem\"\n                      closeButtonAriaLabel=\"Remove\"\n                      [disabled]=\"disabled\"\n                      [closable]=\"closableChips\"\n                      (closed)=\"select(val, true)\"\n                      [ngClass]=\"{\n                        'about-to-remove': last && backspaceClickedOnce\n                      }\"\n                      [label]=\"\n                        returnObject\n                          ? val[optionLabel]\n                          : (val\n                            | labelByValue: options : optionValue : optionLabel)\n                      \">\n                    </cps-chip>\n                  }\n                </div>\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    autocompleteInputTemplate;\n                    context: {\n                      inputClass: 'multi-chip-input'\n                    }\n                  \"></ng-container>\n              </div>\n            }\n          </div>\n        } @else {\n          <ng-container\n            *ngTemplateOutlet=\"autocompleteInputTemplate\"></ng-container>\n        }\n        <span class=\"cps-autocomplete-box-icons\">\n          @if (clearable && !disabled) {\n            <span\n              role=\"button\"\n              (click)=\"clear($event)\"\n              (mousedown)=\"$event.preventDefault()\"\n              (keydown.enter)=\"clear($event)\"\n              (keydown.space)=\"clear($event)\"\n              aria-label=\"Clear selection\"\n              [tabindex]=\"disabled ? -1 : 0\"\n              class=\"cps-autocomplete-box-clear-icon\"\n              [ngClass]=\"{\n                'cps-autocomplete-box-clear-icon-hidden':\n                  !persistentClear && !hasSelectedValue()\n              }\">\n              <cps-icon\n                icon=\"delete\"\n                size=\"small\"\n                aria-hidden=\"true\"></cps-icon>\n            </span>\n          }\n          @if (showChevron && options.length) {\n            <span\n              class=\"cps-autocomplete-box-chevron\"\n              role=\"button\"\n              (mousedown)=\"onChevronClick($event)\"\n              (keydown.enter)=\"onChevronClick($event)\"\n              (keydown.space)=\"onChevronClick($event)\"\n              [attr.aria-label]=\"\n                isOpened ? 'Collapse options' : 'Expand options'\n              \"\n              [tabindex]=\"disabled ? -1 : 0\">\n              <cps-icon\n                aria-hidden=\"true\"\n                icon=\"chevron-down\"\n                size=\"small\"\n                [color]=\"disabled ? 'text-light' : 'text-dark'\"></cps-icon>\n            </span>\n          }\n        </span>\n      </div>\n    </div>\n\n    <cps-menu\n      #optionsMenu\n      [withArrow]=\"false\"\n      (beforeMenuHidden)=\"onBeforeOptionsHidden($event)\"\n      hideTransitionOptions=\"0s linear\"\n      containerClass=\"cps-autocomplete-options-menu\">\n      <div\n        #optionsList\n        role=\"listbox\"\n        [id]=\"optionsListId\"\n        tabindex=\"-1\"\n        aria-readonly=\"false\"\n        aria-disabled=\"false\"\n        aria-orientation=\"vertical\"\n        [attr.aria-multiselectable]=\"!!multiple\"\n        class=\"cps-autocomplete-options\"\n        [style.width.px]=\"autocompleteBoxWidthPx\">\n        @if (loading && showLoadingMessage) {\n          <div\n            class=\"cps-autocomplete-options-loading\"\n            role=\"option\"\n            tabindex=\"-1\"\n            aria-disabled=\"true\"\n            aria-selected=\"false\">\n            {{ loadingMessage }}\n          </div>\n        }\n        @if (\n          showEmptyMessage &&\n          filteredOptions.length < 1 &&\n          !loading &&\n          inputTextDebounced\n        ) {\n          <div\n            class=\"cps-autocomplete-options-empty\"\n            role=\"option\"\n            tabindex=\"-1\"\n            aria-disabled=\"true\"\n            aria-selected=\"false\">\n            {{ emptyMessage }}\n          </div>\n        }\n        @if (isSelectAllVisible) {\n          <div\n            class=\"cps-autocomplete-options-option select-all-option\"\n            [id]=\"selectAllOptionId\"\n            role=\"option\"\n            tabindex=\"-1\"\n            aria-disabled=\"false\"\n            [attr.aria-setsize]=\"optionsAriaSetSize\"\n            [attr.aria-posinset]=\"1\"\n            [attr.aria-selected]=\"value?.length === options.length\"\n            [class.allselected]=\"value?.length === options.length\"\n            [class.highlighten]=\"\n              isArrowNavigating && optionHighlightedIndex === 0\n            \"\n            (mousedown)=\"$event.preventDefault()\"\n            (click)=\"toggleAll()\">\n            <span class=\"cps-autocomplete-options-option-left\">\n              @if (multiple) {\n                <span class=\"cps-autocomplete-options-option-check\"> </span>\n              }\n              <span class=\"cps-autocomplete-options-option-label\"\n                >Select all</span\n              >\n            </span>\n          </div>\n        }\n        @if (!loading) {\n          @if (virtualScroll) {\n            <p-virtualscroller\n              #virtualList\n              [tabindex]=\"-1\"\n              [items]=\"filteredOptions\"\n              [delay]=\"0\"\n              [scrollHeight]=\"virtualListHeightRem + 'rem'\"\n              [options]=\"{ numToleratedItems: numToleratedItems }\"\n              [itemSize]=\"virtualScrollItemSizePx()\">\n              <ng-template pTemplate=\"item\" let-item let-options=\"options\">\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    itemTemplate;\n                    context: {\n                      item: item,\n                      itemIndex: options.index\n                    }\n                  \"></ng-container>\n              </ng-template>\n            </p-virtualscroller>\n          } @else {\n            @for (item of filteredOptions; track item; let itemIndex = $index) {\n              <ng-container\n                *ngTemplateOutlet=\"\n                  itemTemplate;\n                  context: {\n                    item: item,\n                    itemIndex: itemIndex\n                  }\n                \"></ng-container>\n            }\n          }\n        }\n      </div>\n    </cps-menu>\n    @if (loading || validating) {\n      <cps-progress-linear\n        height=\"3\"\n        radius=\"4\"\n        opacity=\"0.3\"\n        class=\"autocomplete-progress-bar\"\n        bgColor=\"transparent\">\n      </cps-progress-linear>\n    }\n  </div>\n  @if (!error && !externalError && !hideDetails) {\n    <div class=\"cps-autocomplete-hint\">\n      {{ hint }}\n    </div>\n  }\n  @if ((error || externalError) && !hideDetails) {\n    <div class=\"cps-autocomplete-error\" role=\"alert\" aria-live=\"assertive\">\n      {{ error || externalError }}\n    </div>\n  }\n</div>\n\n<ng-template\n  #autocompleteInputTemplate\n  let-inputClass=\"inputClass\"\n  let-inputStyle=\"inputStyle\">\n  <input\n    #autocompleteInput\n    type=\"text\"\n    class=\"cps-autocomplete-box-input\"\n    spellcheck=\"false\"\n    [disabled]=\"disabled\"\n    role=\"combobox\"\n    aria-autocomplete=\"list\"\n    aria-haspopup=\"listbox\"\n    [attr.aria-invalid]=\"error || externalError ? 'true' : null\"\n    [attr.aria-controls]=\"optionsListId\"\n    [attr.aria-activedescendant]=\"activeDescendantId\"\n    [attr.aria-expanded]=\"isOpened\"\n    [attr.aria-required]=\"isRequired || null\"\n    [ngClass]=\"inputClass\"\n    [ngStyle]=\"inputStyle\"\n    [placeholder]=\"!hasSelectedValue() ? placeholder : ''\"\n    (input)=\"filterOptions($event)\"\n    (keydown)=\"onInputKeyDown($event)\"\n    [(ngModel)]=\"inputText\"\n    (focus)=\"onFocus()\"\n    (blur)=\"onBlur()\"\n    [attr.aria-label]=\"computedLabel\" />\n</ng-template>\n\n<ng-template #itemTemplate let-item=\"item\" let-itemIndex=\"itemIndex\">\n  <div\n    class=\"cps-autocomplete-options-option\"\n    [id]=\"getOptionId(item, itemIndex)\"\n    role=\"option\"\n    tabindex=\"-1\"\n    [attr.aria-setsize]=\"optionsAriaSetSize\"\n    [attr.aria-posinset]=\"getOptionAriaPosInSet(itemIndex)\"\n    (mousedown)=\"$event.preventDefault()\"\n    (click)=\"onOptionClick(item)\"\n    [class.highlighten]=\"\n      isArrowNavigating &&\n      itemIndex === optionHighlightedIndex - (isSelectAllVisible ? 1 : 0)\n    \"\n    [attr.aria-selected]=\"\n      item | checkOptionSelected: value : multiple : returnObject : optionValue\n    \"\n    [class.selected]=\"\n      item | checkOptionSelected: value : multiple : returnObject : optionValue\n    \">\n    <span class=\"cps-autocomplete-options-option-left\">\n      @if (multiple) {\n        <span class=\"cps-autocomplete-options-option-check\"> </span>\n      }\n      <span\n        data-testid=\"cps-autocomplete-options\"\n        class=\"cps-autocomplete-options-option-label\"\n        [class.virtual-row]=\"virtualScroll\"\n        >{{ item[optionLabel] }}</span\n      >\n    </span>\n\n    <span\n      class=\"cps-autocomplete-options-option-right\"\n      [class.virtual-row]=\"virtualScroll\"\n      >{{ item[optionInfo] }}</span\n    >\n  </div>\n</ng-template>\n", styles: [":host{display:flex}:host .cps-autocomplete{position:relative;width:100%;outline:none;font-family:inherit;font-weight:400;display:grid}:host .cps-autocomplete .cps-autocomplete-container{position:relative}:host .cps-autocomplete .cps-autocomplete-container .autocomplete-progress-bar{position:absolute;bottom:.0625rem;padding:0 .0625rem}:host .cps-autocomplete .cps-autocomplete-container.borderless .cps-autocomplete-box,:host .cps-autocomplete .cps-autocomplete-container.underlined .cps-autocomplete-box{line-height:1;border:none!important;border-radius:0}:host .cps-autocomplete .cps-autocomplete-container.underlined .cps-autocomplete-box{border-bottom:.0625rem solid var(--cps-color-line-light)!important}:host .cps-autocomplete .cps-autocomplete-container.keyboard-focused{outline:none;position:relative}:host .cps-autocomplete .cps-autocomplete-container.keyboard-focused:before,:host .cps-autocomplete .cps-autocomplete-container.keyboard-focused:after{content:\"\";position:absolute;border-radius:.25rem}:host .cps-autocomplete .cps-autocomplete-container.keyboard-focused:before{inset:0;border:.0625rem solid var(--cps-color-calm)}:host .cps-autocomplete .cps-autocomplete-container.keyboard-focused:after{inset:.0625rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-autocomplete .cps-autocomplete-container.keyboard-focused.suppress-focus-visible:before,:host .cps-autocomplete .cps-autocomplete-container.keyboard-focused.suppress-focus-visible:after{display:none}:host .cps-autocomplete .cps-autocomplete-container.keyboard-focused:before,:host .cps-autocomplete .cps-autocomplete-container.keyboard-focused:after{pointer-events:none}:host .cps-autocomplete.active .cps-autocomplete-box{border:.0625rem solid var(--cps-color-calm)}:host .cps-autocomplete.active .cps-autocomplete-box .cps-autocomplete-box-area .prefix-icon{color:var(--cps-color-calm)}:host .cps-autocomplete.opened .cps-autocomplete-box .cps-autocomplete-box-chevron{top:1.375rem;transform:rotate(180deg)}:host .cps-autocomplete .cps-autocomplete-label{align-items:center;display:inline-flex;margin-bottom:.2rem;color:var(--cps-color-text-dark);background-color:var(--cps-surface-body);font-size:.875rem;font-weight:600}:host .cps-autocomplete .cps-autocomplete-label .cps-autocomplete-label-info-circle{margin-left:.5rem;pointer-events:all}:host .cps-autocomplete .persistent-clear .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:not(:focus):not(:hover) cps-icon,:host .cps-autocomplete .cps-autocomplete-container.active .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:not(:focus):not(:hover) cps-icon,:host .cps-autocomplete .cps-autocomplete-container:hover .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:not(:focus):not(:hover) cps-icon{opacity:.5}:host .cps-autocomplete .cps-autocomplete-box{overflow:hidden;min-height:2.375rem;width:100%;cursor:text;background:var(--cps-input-background);font-size:1rem;outline:none;padding:0 .75rem;border-radius:.25rem;border:.0625rem solid var(--cps-color-line-light);transition-duration:.2s}:host .cps-autocomplete .cps-autocomplete-box-area{display:flex;min-height:2.25rem;align-items:center}:host .cps-autocomplete .cps-autocomplete-box-area .prefix-icon{margin-right:.5rem;color:var(--cps-color-text-dark)}:host .cps-autocomplete .cps-autocomplete-box-input{min-height:2.25rem;padding:0;background-color:transparent;width:0;min-width:1.875rem;flex-grow:1;font-size:1rem;color:var(--cps-color-text-dark);border-style:none;outline:none;font-family:inherit}:host .cps-autocomplete .cps-autocomplete-box-input::placeholder{-webkit-user-select:none;user-select:none;color:var(--cps-input-placeholder);font-style:italic;opacity:1}:host .cps-autocomplete .cps-autocomplete-box-items{display:inline-flex;flex-direction:column;width:100%;padding-top:.1875rem;padding-bottom:.1875rem;min-height:2.25rem;justify-content:center;position:relative}:host .cps-autocomplete .cps-autocomplete-box-items .single-item{color:var(--cps-color-text-dark);display:inline-flex}:host .cps-autocomplete .cps-autocomplete-box-items .single-item-selection{display:inline-flex;letter-spacing:inherit;line-height:inherit;max-width:100%}:host .cps-autocomplete .cps-autocomplete-box-items .single-item-input{opacity:0;min-width:0;align-self:flex-start;flex:1 1;transition:none;position:absolute;top:0;bottom:0;width:100%;padding-inline-start:inherit;padding-inline-end:inherit}:host .cps-autocomplete .cps-autocomplete-box-items .multi-chip-input{min-height:1.875rem}:host .cps-autocomplete .cps-autocomplete-box-items .multi-item-input{min-height:1.75rem}:host .cps-autocomplete .cps-autocomplete-box-items .cps-autocomplete-multi-selection-wrapper{display:inline-flex;flex-wrap:wrap;align-items:center}:host .cps-autocomplete .cps-autocomplete-box-items .cps-autocomplete-multi-selection-wrapper .chips-group{display:contents}:host .cps-autocomplete .cps-autocomplete-box-items .cps-autocomplete-multi-selection-wrapper .chips-group cps-chip{padding-bottom:.1875rem;padding-top:.1875rem;padding-right:.25rem}:host .cps-autocomplete .cps-autocomplete-box-items .cps-autocomplete-multi-selection-wrapper .text-group{display:contents;color:var(--cps-color-text-dark)}:host .cps-autocomplete .cps-autocomplete-box-items .cps-autocomplete-multi-selection-wrapper .text-group .text-group-item{padding-bottom:.1875rem;padding-top:.1875rem;padding-right:.25rem}:host .cps-autocomplete .cps-autocomplete-box:hover{border:.0625rem solid var(--cps-color-calm)}:host .cps-autocomplete .cps-autocomplete-box:hover .cps-autocomplete-box-area .prefix-icon{color:var(--cps-color-calm)}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons{display:flex}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon{cursor:pointer;display:flex;color:var(--cps-state-error);margin-left:.5rem}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:focus{outline:none}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:hover cps-icon,:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:focus cps-icon{opacity:1}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:focus-visible{outline:none;position:relative}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:focus-visible:before,:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:focus-visible:after{content:\"\";position:absolute;border-radius:50%}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:focus-visible:before{inset:-.125rem;border:.0625rem solid var(--cps-color-calm)}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:focus-visible:after{inset:-.25rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:focus-visible.suppress-focus-visible:before,:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:focus-visible.suppress-focus-visible:after{display:none}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon-hidden{visibility:hidden}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon cps-icon{opacity:0;transition-duration:.2s}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron{display:flex;margin-left:.5rem}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron:focus{outline:none}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron:focus-visible{outline:none;position:relative}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron:focus-visible:before,:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron:focus-visible:after{content:\"\";position:absolute;border-radius:.375rem}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron:focus-visible:before{inset:-.125rem;border:.0625rem solid var(--cps-color-calm)}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron:focus-visible:after{inset:-.25rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron:focus-visible.suppress-focus-visible:before,:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron:focus-visible.suppress-focus-visible:after{display:none}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron{transition-duration:.2s;cursor:pointer}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron:hover ::ng-deep cps-icon .cps-icon,:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron:focus ::ng-deep cps-icon .cps-icon{color:var(--cps-color-calm)!important}:host .cps-autocomplete .cps-autocomplete-hint{color:var(--cps-color-text-mild);background-color:var(--cps-surface-body);font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default;margin-top:.2rem}:host .cps-autocomplete .cps-autocomplete-error{color:var(--cps-state-error);font-weight:700;font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default;margin-top:.2rem}:host .cps-autocomplete.disabled{pointer-events:none}:host .cps-autocomplete.disabled .cps-autocomplete-box{background:var(--cps-color-bg-disabled)}:host .cps-autocomplete.disabled .cps-autocomplete-box-items{color:var(--cps-color-text-light)}:host .cps-autocomplete.disabled .cps-autocomplete-box-items .text-group,:host .cps-autocomplete.disabled .cps-autocomplete-box-items .single-item{color:var(--cps-color-text-light)}:host .cps-autocomplete.disabled .cps-autocomplete-label{color:var(--cps-color-text-mild)}:host .cps-autocomplete.error .cps-autocomplete-box{border-color:var(--cps-state-error)!important;background:#fef3f2}:host .about-to-remove{color:var(--cps-color-text-light)}:host .about-to-remove ::ng-deep .cps-chip{background-color:var(--cps-color-bg-mid)}.cps-autocomplete-options{font-family:inherit;background:var(--cps-popover-background);overflow-x:hidden;max-height:15.125rem;overflow-y:auto}.cps-autocomplete-options .cps-autocomplete-options-empty,.cps-autocomplete-options .cps-autocomplete-options-loading{padding:.6875rem;font-size:1rem;cursor:default;color:var(--cps-color-text-dark)}.cps-autocomplete-options .cps-autocomplete-options-option{padding:.75rem;justify-content:space-between;display:flex;cursor:pointer}.cps-autocomplete-options .cps-autocomplete-options-option:hover{background:var(--cps-color-highlight-hover)}.cps-autocomplete-options .cps-autocomplete-options-option-label{color:var(--cps-color-text-dark)}.cps-autocomplete-options .cps-autocomplete-options-option-left{display:flex;align-items:center;margin-right:.5rem}.cps-autocomplete-options .cps-autocomplete-options-option-right{color:var(--cps-color-text-medium);text-align:right}.cps-autocomplete-options .cps-autocomplete-options-option-check{background-color:transparent;border:0;width:1rem;height:1rem;cursor:pointer;display:inline-block;vertical-align:middle;box-sizing:border-box;position:relative;flex-shrink:0;transition:border-color 90ms cubic-bezier(0,0,.2,.1),background-color 90ms cubic-bezier(0,0,.2,.1);margin-right:.5rem;opacity:0}.cps-autocomplete-options .cps-autocomplete-options-option-check:after{color:var(--cps-color-calm);top:.25rem;left:.0625rem;width:.5rem;height:.1875rem;border-left:.125rem solid currentColor;transform:rotate(-45deg);opacity:1;box-sizing:content-box;position:absolute;content:\"\";border-bottom:.125rem solid currentColor;transition:opacity 90ms cubic-bezier(0,0,.2,.1)}.cps-autocomplete-options .cps-autocomplete-options-option.selected,.cps-autocomplete-options .cps-autocomplete-options-option.allselected{font-weight:600}.cps-autocomplete-options .cps-autocomplete-options-option.selected .cps-autocomplete-options-option-label,.cps-autocomplete-options .cps-autocomplete-options-option.allselected .cps-autocomplete-options-option-label{color:var(--cps-color-calm)}.cps-autocomplete-options .cps-autocomplete-options-option.selected .cps-autocomplete-options-option-check,.cps-autocomplete-options .cps-autocomplete-options-option.allselected .cps-autocomplete-options-option-check{opacity:1}.cps-autocomplete-options .cps-autocomplete-options-option.selected{background:var(--cps-color-highlight-selected)}.cps-autocomplete-options .cps-autocomplete-options-option.selected .cps-autocomplete-options-option-right{color:var(--cps-color-text-dark)}.cps-autocomplete-options .cps-autocomplete-options-option.highlighten{background:var(--cps-color-highlight-active)}.cps-autocomplete-options .cps-autocomplete-options-option.selected.highlighten{background:var(--cps-color-highlight-selected-dark)}.cps-autocomplete-options .select-all-option{border-bottom:.0625rem solid lightgrey;font-weight:600}.cps-autocomplete-options ::ng-deep .p-virtualscroller-list.p-scroller{overflow-anchor:none}.cps-autocomplete-options .virtual-row{white-space:nowrap}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }, { kind: "component", type: CpsChipComponent, selector: "cps-chip", inputs: ["label", "icon", "iconColor", "iconPosition", "closable", "disabled", "closeButtonAriaLabel"], outputs: ["closed"] }, { kind: "component", type: CpsProgressLinearComponent, selector: "cps-progress-linear", inputs: ["width", "height", "color", "bgColor", "opacity", "radius"] }, { kind: "component", type: CpsInfoCircleComponent, selector: "cps-info-circle", inputs: ["size", "tooltipText", "tooltipPosition", "tooltipContentClass", "tooltipMaxWidth", "tooltipPersistent"] }, { kind: "ngmodule", type: ScrollerModule }, { kind: "component", type: i4$1.Scroller, selector: "p-scroller, p-virtualscroller, p-virtual-scroller, p-virtualScroller", inputs: ["hostName", "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: i4.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: CpsMenuComponent, selector: "cps-menu", inputs: ["header", "ariaLabel", "items", "withArrow", "compressed", "focusOnShow", "persistent", "containerClass", "showTransitionOptions", "hideTransitionOptions"], outputs: ["menuShown", "menuHidden", "beforeMenuHidden", "contentClicked", "containerMouseLeave"] }, { kind: "pipe", type: LabelByValuePipe, name: "labelByValue" }, { kind: "pipe", type: CheckOptionSelectedPipe, name: "checkOptionSelected" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: CpsAutocompleteComponent, decorators: [{
             type: Component,
@@ -2944,7 +2963,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
                         CheckOptionSelectedPipe,
                         ScrollerModule,
                         CpsMenuComponent
-                    ], providers: [LabelByValuePipe, CheckOptionSelectedPipe], selector: 'cps-autocomplete', template: "<div\n  [ngStyle]=\"{ width: cvtWidth }\"\n  class=\"cps-autocomplete\"\n  [ngClass]=\"{\n    disabled: disabled,\n    error: error || externalError,\n    active: isActive,\n    opened: isOpened\n  }\"\n  #autocompleteContainer>\n  @if (label) {\n    <div class=\"cps-autocomplete-label\">\n      <label>{{ label }}</label>\n      @if (infoTooltip) {\n        <cps-info-circle\n          class=\"cps-autocomplete-label-info-circle\"\n          size=\"xsmall\"\n          [tooltipPosition]=\"infoTooltipPosition\"\n          [tooltipContentClass]=\"infoTooltipClass\"\n          [tooltipMaxWidth]=\"infoTooltipMaxWidth\"\n          [tooltipPersistent]=\"infoTooltipPersistent\"\n          [tooltipText]=\"infoTooltip\">\n        </cps-info-circle>\n      }\n    </div>\n  }\n  <div\n    (keydown)=\"onContainerKeyDown($event)\"\n    class=\"cps-autocomplete-container\"\n    [class.active]=\"isActive\"\n    [ngClass]=\"{\n      'persistent-clear': persistentClear,\n      borderless: appearance === 'borderless',\n      underlined: appearance === 'underlined'\n    }\">\n    <div\n      class=\"cps-autocomplete-box\"\n      #autocompleteBox\n      (mousedown)=\"onBoxClick()\">\n      <div class=\"cps-autocomplete-box-area\">\n        @if (prefixIcon) {\n          <cps-icon\n            aria-hidden=\"true\"\n            [icon]=\"prefixIcon\"\n            [style.color]=\"disabled ? 'var(--cps-text-muted)' : null\"\n            [size]=\"prefixIconSize\"\n            class=\"prefix-icon\">\n          </cps-icon>\n        }\n        @if (hasSelectedValue()) {\n          <div class=\"cps-autocomplete-box-items\">\n            @if (!multiple) {\n              <span class=\"single-item\">\n                <div class=\"single-item-selection\">\n                  <span [style.opacity]=\"activeSingle ? 0 : 1\">{{\n                    returnObject\n                      ? value[optionLabel]\n                      : (value\n                        | labelByValue: options : optionValue : optionLabel)\n                  }}</span>\n                </div>\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    autocompleteInputTemplate;\n                    context: {\n                      inputClass: 'single-item-input',\n                      inputStyle: activeSingle ? { opacity: '1' } : null\n                    }\n                  \">\n                </ng-container>\n              </span>\n            }\n            @if (multiple && !chips) {\n              <div class=\"cps-autocomplete-multi-selection-wrapper\">\n                <div\n                  class=\"text-group\"\n                  role=\"list\"\n                  tabindex=\"-1\"\n                  aria-label=\"Selected options\">\n                  @for (val of value; track val; let last = $last) {\n                    <div\n                      class=\"text-group-item\"\n                      role=\"listitem\"\n                      [ngClass]=\"{\n                        'about-to-remove': last && backspaceClickedOnce\n                      }\">\n                      {{\n                        returnObject\n                          ? val[optionLabel]\n                          : (val\n                            | labelByValue\n                              : options\n                              : optionValue\n                              : optionLabel)\n                      }}{{ !last ? ',' : '' }}\n                    </div>\n                  }\n                </div>\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    autocompleteInputTemplate;\n                    context: {\n                      inputClass: 'multi-item-input'\n                    }\n                  \"></ng-container>\n              </div>\n            }\n            @if (multiple && chips) {\n              <div class=\"cps-autocomplete-multi-selection-wrapper\">\n                <div\n                  class=\"chips-group\"\n                  role=\"list\"\n                  tabindex=\"-1\"\n                  aria-label=\"Selected options\">\n                  @for (val of value; track val; let last = $last) {\n                    <cps-chip\n                      role=\"listitem\"\n                      closeButtonAriaLabel=\"Remove\"\n                      [disabled]=\"disabled\"\n                      [closable]=\"closableChips\"\n                      (closed)=\"select(val, true)\"\n                      [ngClass]=\"{\n                        'about-to-remove': last && backspaceClickedOnce\n                      }\"\n                      [label]=\"\n                        returnObject\n                          ? val[optionLabel]\n                          : (val\n                            | labelByValue: options : optionValue : optionLabel)\n                      \">\n                    </cps-chip>\n                  }\n                </div>\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    autocompleteInputTemplate;\n                    context: {\n                      inputClass: 'multi-chip-input'\n                    }\n                  \"></ng-container>\n              </div>\n            }\n          </div>\n        } @else {\n          <ng-container\n            *ngTemplateOutlet=\"autocompleteInputTemplate\"></ng-container>\n        }\n        <span class=\"cps-autocomplete-box-icons\">\n          @if (clearable && !disabled) {\n            <span\n              role=\"button\"\n              (click)=\"clear($event)\"\n              (mousedown)=\"$event.preventDefault()\"\n              (keydown.enter)=\"clear($event)\"\n              (keydown.space)=\"clear($event)\"\n              aria-label=\"Clear selection\"\n              [tabindex]=\"disabled ? -1 : 0\"\n              class=\"cps-autocomplete-box-clear-icon\"\n              [ngClass]=\"{\n                'cps-autocomplete-box-clear-icon-hidden':\n                  !persistentClear && !hasSelectedValue()\n              }\">\n              <cps-icon\n                icon=\"delete\"\n                size=\"small\"\n                aria-hidden=\"true\"></cps-icon>\n            </span>\n          }\n          @if (showChevron && options.length) {\n            <span\n              class=\"cps-autocomplete-box-chevron\"\n              role=\"button\"\n              (mousedown)=\"onChevronClick($event)\"\n              (keydown.enter)=\"onChevronClick($event)\"\n              (keydown.space)=\"onChevronClick($event)\"\n              [attr.aria-label]=\"\n                isOpened ? 'Collapse options' : 'Expand options'\n              \"\n              [tabindex]=\"disabled ? -1 : 0\">\n              <cps-icon\n                aria-hidden=\"true\"\n                icon=\"chevron-down\"\n                size=\"small\"\n                [color]=\"disabled ? 'text-light' : 'text-dark'\"></cps-icon>\n            </span>\n          }\n        </span>\n      </div>\n    </div>\n\n    <cps-menu\n      #optionsMenu\n      [withArrow]=\"false\"\n      (beforeMenuHidden)=\"onBeforeOptionsHidden($event)\"\n      hideTransitionOptions=\"0s linear\"\n      containerClass=\"cps-autocomplete-options-menu\">\n      <div\n        #optionsList\n        role=\"listbox\"\n        [id]=\"optionsListId\"\n        tabindex=\"-1\"\n        aria-readonly=\"false\"\n        aria-disabled=\"false\"\n        aria-orientation=\"vertical\"\n        [attr.aria-multiselectable]=\"!!multiple\"\n        class=\"cps-autocomplete-options\"\n        [style.width.px]=\"autocompleteBoxWidthPx\">\n        @if (loading && showLoadingMessage) {\n          <div\n            class=\"cps-autocomplete-options-loading\"\n            role=\"option\"\n            tabindex=\"-1\"\n            aria-disabled=\"true\"\n            aria-selected=\"false\">\n            {{ loadingMessage }}\n          </div>\n        }\n        @if (\n          showEmptyMessage &&\n          filteredOptions.length < 1 &&\n          !loading &&\n          inputTextDebounced\n        ) {\n          <div\n            class=\"cps-autocomplete-options-empty\"\n            role=\"option\"\n            tabindex=\"-1\"\n            aria-disabled=\"true\"\n            aria-selected=\"false\">\n            {{ emptyMessage }}\n          </div>\n        }\n        @if (isSelectAllVisible) {\n          <div\n            class=\"cps-autocomplete-options-option select-all-option\"\n            [id]=\"selectAllOptionId\"\n            role=\"option\"\n            tabindex=\"-1\"\n            aria-disabled=\"false\"\n            [attr.aria-setsize]=\"optionsAriaSetSize\"\n            [attr.aria-posinset]=\"1\"\n            [attr.aria-selected]=\"value?.length === options.length\"\n            [class.allselected]=\"value?.length === options.length\"\n            [class.highlighten]=\"\n              isArrowNavigating && optionHighlightedIndex === 0\n            \"\n            (mousedown)=\"$event.preventDefault()\"\n            (click)=\"toggleAll()\">\n            <span class=\"cps-autocomplete-options-option-left\">\n              @if (multiple) {\n                <span class=\"cps-autocomplete-options-option-check\"> </span>\n              }\n              <span class=\"cps-autocomplete-options-option-label\"\n                >Select all</span\n              >\n            </span>\n          </div>\n        }\n        @if (!loading) {\n          @if (virtualScroll) {\n            <p-virtualscroller\n              #virtualList\n              [tabindex]=\"-1\"\n              [items]=\"filteredOptions\"\n              [delay]=\"0\"\n              [scrollHeight]=\"virtualListHeightRem + 'rem'\"\n              [options]=\"{ numToleratedItems: numToleratedItems }\"\n              [itemSize]=\"virtualScrollItemSizePx()\">\n              <ng-template pTemplate=\"item\" let-item let-options=\"options\">\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    itemTemplate;\n                    context: {\n                      item: item,\n                      itemIndex: options.index\n                    }\n                  \"></ng-container>\n              </ng-template>\n            </p-virtualscroller>\n          } @else {\n            @for (item of filteredOptions; track item; let itemIndex = $index) {\n              <ng-container\n                *ngTemplateOutlet=\"\n                  itemTemplate;\n                  context: {\n                    item: item,\n                    itemIndex: itemIndex\n                  }\n                \"></ng-container>\n            }\n          }\n        }\n      </div>\n    </cps-menu>\n    @if (loading || validating) {\n      <cps-progress-linear\n        height=\"3\"\n        radius=\"4\"\n        opacity=\"0.3\"\n        class=\"autocomplete-progress-bar\"\n        bgColor=\"transparent\">\n      </cps-progress-linear>\n    }\n  </div>\n  @if (!error && !externalError && !hideDetails) {\n    <div class=\"cps-autocomplete-hint\">\n      {{ hint }}\n    </div>\n  }\n  @if ((error || externalError) && !hideDetails) {\n    <div class=\"cps-autocomplete-error\" role=\"alert\" aria-live=\"assertive\">\n      {{ error || externalError }}\n    </div>\n  }\n</div>\n\n<ng-template\n  #autocompleteInputTemplate\n  let-inputClass=\"inputClass\"\n  let-inputStyle=\"inputStyle\">\n  <input\n    #autocompleteInput\n    type=\"text\"\n    class=\"cps-autocomplete-box-input\"\n    spellcheck=\"false\"\n    [disabled]=\"disabled\"\n    role=\"combobox\"\n    aria-autocomplete=\"list\"\n    aria-haspopup=\"listbox\"\n    [attr.aria-invalid]=\"error || externalError ? 'true' : null\"\n    [attr.aria-controls]=\"optionsListId\"\n    [attr.aria-activedescendant]=\"activeDescendantId\"\n    [attr.aria-expanded]=\"isOpened\"\n    [attr.aria-required]=\"isRequired || null\"\n    [ngClass]=\"inputClass\"\n    [ngStyle]=\"inputStyle\"\n    [placeholder]=\"!hasSelectedValue() ? placeholder : ''\"\n    (input)=\"filterOptions($event)\"\n    (keydown)=\"onInputKeyDown($event)\"\n    [(ngModel)]=\"inputText\"\n    (focus)=\"onFocus()\"\n    (blur)=\"onBlur()\"\n    [attr.aria-label]=\"computedLabel\" />\n</ng-template>\n\n<ng-template #itemTemplate let-item=\"item\" let-itemIndex=\"itemIndex\">\n  <div\n    class=\"cps-autocomplete-options-option\"\n    [id]=\"getOptionId(item, itemIndex)\"\n    role=\"option\"\n    tabindex=\"-1\"\n    [attr.aria-setsize]=\"optionsAriaSetSize\"\n    [attr.aria-posinset]=\"getOptionAriaPosInSet(itemIndex)\"\n    (mousedown)=\"$event.preventDefault()\"\n    (click)=\"onOptionClick(item)\"\n    [class.highlighten]=\"\n      isArrowNavigating &&\n      itemIndex === optionHighlightedIndex - (isSelectAllVisible ? 1 : 0)\n    \"\n    [attr.aria-selected]=\"\n      item | checkOptionSelected: value : multiple : returnObject : optionValue\n    \"\n    [class.selected]=\"\n      item | checkOptionSelected: value : multiple : returnObject : optionValue\n    \">\n    <span class=\"cps-autocomplete-options-option-left\">\n      @if (multiple) {\n        <span class=\"cps-autocomplete-options-option-check\"> </span>\n      }\n      <span\n        data-testid=\"cps-autocomplete-options\"\n        class=\"cps-autocomplete-options-option-label\"\n        [class.virtual-row]=\"virtualScroll\"\n        >{{ item[optionLabel] }}</span\n      >\n    </span>\n\n    <span\n      class=\"cps-autocomplete-options-option-right\"\n      [class.virtual-row]=\"virtualScroll\"\n      >{{ item[optionInfo] }}</span\n    >\n  </div>\n</ng-template>\n", styles: [":host{display:flex}:host .cps-autocomplete{position:relative;width:100%;outline:none;font-family:inherit;font-weight:400;display:grid}:host .cps-autocomplete .cps-autocomplete-container{position:relative}:host .cps-autocomplete .cps-autocomplete-container .autocomplete-progress-bar{position:absolute;bottom:.0625rem;padding:0 .0625rem}:host .cps-autocomplete .cps-autocomplete-container.borderless .cps-autocomplete-box,:host .cps-autocomplete .cps-autocomplete-container.underlined .cps-autocomplete-box{line-height:1;border:none!important;border-radius:0}:host .cps-autocomplete .cps-autocomplete-container.underlined .cps-autocomplete-box{border-bottom:.0625rem solid var(--cps-color-line-light)!important}:host .cps-autocomplete.active .cps-autocomplete-box{border:.0625rem solid var(--cps-color-calm)}:host .cps-autocomplete.active .cps-autocomplete-box .cps-autocomplete-box-area .prefix-icon{color:var(--cps-color-calm)}:host .cps-autocomplete.opened .cps-autocomplete-box .cps-autocomplete-box-chevron{top:1.375rem;transform:rotate(180deg)}:host .cps-autocomplete .cps-autocomplete-label{align-items:center;display:inline-flex;margin-bottom:.2rem;color:var(--cps-color-text-dark);background-color:var(--cps-surface-body);font-size:.875rem;font-weight:600}:host .cps-autocomplete .cps-autocomplete-label .cps-autocomplete-label-info-circle{margin-left:.5rem;pointer-events:all}:host .cps-autocomplete .persistent-clear .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:not(:focus):not(:hover) cps-icon,:host .cps-autocomplete .cps-autocomplete-container.active .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:not(:focus):not(:hover) cps-icon,:host .cps-autocomplete .cps-autocomplete-container:hover .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:not(:focus):not(:hover) cps-icon{opacity:.5}:host .cps-autocomplete .cps-autocomplete-box{overflow:hidden;min-height:2.375rem;width:100%;cursor:text;background:var(--cps-input-background);font-size:1rem;outline:none;padding:0 .75rem;border-radius:.25rem;border:.0625rem solid var(--cps-color-line-light);transition-duration:.2s}:host .cps-autocomplete .cps-autocomplete-box-area{display:flex;min-height:2.25rem;align-items:center}:host .cps-autocomplete .cps-autocomplete-box-area .prefix-icon{margin-right:.5rem;color:var(--cps-color-text-dark)}:host .cps-autocomplete .cps-autocomplete-box-input{min-height:2.25rem;padding:0;background-color:transparent;width:0;min-width:1.875rem;flex-grow:1;font-size:1rem;color:var(--cps-color-text-dark);border-style:none;outline:none;font-family:inherit}:host .cps-autocomplete .cps-autocomplete-box-input::placeholder{-webkit-user-select:none;user-select:none;color:var(--cps-input-placeholder);font-style:italic;opacity:1}:host .cps-autocomplete .cps-autocomplete-box-items{display:inline-flex;flex-direction:column;width:100%;padding-top:.1875rem;padding-bottom:.1875rem;min-height:2.25rem;justify-content:center;position:relative}:host .cps-autocomplete .cps-autocomplete-box-items .single-item{color:var(--cps-color-text-dark);display:inline-flex}:host .cps-autocomplete .cps-autocomplete-box-items .single-item-selection{display:inline-flex;letter-spacing:inherit;line-height:inherit;max-width:100%}:host .cps-autocomplete .cps-autocomplete-box-items .single-item-input{opacity:0;min-width:0;align-self:flex-start;flex:1 1;transition:none;position:absolute;top:0;bottom:0;width:100%;padding-inline-start:inherit;padding-inline-end:inherit}:host .cps-autocomplete .cps-autocomplete-box-items .multi-chip-input{min-height:1.875rem}:host .cps-autocomplete .cps-autocomplete-box-items .multi-item-input{min-height:1.75rem}:host .cps-autocomplete .cps-autocomplete-box-items .cps-autocomplete-multi-selection-wrapper{display:inline-flex;flex-wrap:wrap;align-items:center}:host .cps-autocomplete .cps-autocomplete-box-items .cps-autocomplete-multi-selection-wrapper .chips-group{display:contents}:host .cps-autocomplete .cps-autocomplete-box-items .cps-autocomplete-multi-selection-wrapper .chips-group cps-chip{padding-bottom:.1875rem;padding-top:.1875rem;padding-right:.25rem}:host .cps-autocomplete .cps-autocomplete-box-items .cps-autocomplete-multi-selection-wrapper .text-group{display:contents;color:var(--cps-color-text-dark)}:host .cps-autocomplete .cps-autocomplete-box-items .cps-autocomplete-multi-selection-wrapper .text-group .text-group-item{padding-bottom:.1875rem;padding-top:.1875rem;padding-right:.25rem}:host .cps-autocomplete .cps-autocomplete-box:hover{border:.0625rem solid var(--cps-color-calm)}:host .cps-autocomplete .cps-autocomplete-box:hover .cps-autocomplete-box-area .prefix-icon{color:var(--cps-color-calm)}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons{display:flex}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon{cursor:pointer;display:flex;color:var(--cps-state-error);margin-left:.5rem}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:focus{outline:none}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:hover cps-icon,:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:focus cps-icon{opacity:1}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:focus-visible{outline:none;position:relative}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:focus-visible:before,:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:focus-visible:after{content:\"\";position:absolute;border-radius:50%}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:focus-visible:before{inset:-.125rem;border:.0625rem solid var(--cps-color-calm)}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:focus-visible:after{inset:-.25rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:focus-visible.suppress-focus-visible:before,:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:focus-visible.suppress-focus-visible:after{display:none}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon-hidden{visibility:hidden}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon cps-icon{opacity:0;transition-duration:.2s}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron{display:flex;margin-left:.5rem}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron:focus{outline:none}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron:focus-visible{outline:none;position:relative}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron:focus-visible:before,:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron:focus-visible:after{content:\"\";position:absolute;border-radius:.375rem}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron:focus-visible:before{inset:-.125rem;border:.0625rem solid var(--cps-color-calm)}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron:focus-visible:after{inset:-.25rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron:focus-visible.suppress-focus-visible:before,:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron:focus-visible.suppress-focus-visible:after{display:none}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron{transition-duration:.2s;cursor:pointer}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron:hover ::ng-deep cps-icon .cps-icon,:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron:focus ::ng-deep cps-icon .cps-icon{color:var(--cps-color-calm)!important}:host .cps-autocomplete .cps-autocomplete-hint{color:var(--cps-color-text-mild);background-color:var(--cps-surface-body);font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default;margin-top:.2rem}:host .cps-autocomplete .cps-autocomplete-error{color:var(--cps-state-error);font-weight:700;font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default;margin-top:.2rem}:host .cps-autocomplete.disabled{pointer-events:none}:host .cps-autocomplete.disabled .cps-autocomplete-box{background:var(--cps-color-bg-disabled)}:host .cps-autocomplete.disabled .cps-autocomplete-box-items{color:var(--cps-color-text-light)}:host .cps-autocomplete.disabled .cps-autocomplete-box-items .text-group,:host .cps-autocomplete.disabled .cps-autocomplete-box-items .single-item{color:var(--cps-color-text-light)}:host .cps-autocomplete.disabled .cps-autocomplete-label{color:var(--cps-color-text-mild)}:host .cps-autocomplete.error .cps-autocomplete-box{border-color:var(--cps-state-error)!important;background:#fef3f2}:host .about-to-remove{color:var(--cps-color-text-light)}:host .about-to-remove ::ng-deep .cps-chip{background-color:var(--cps-color-bg-mid)}.cps-autocomplete-options{font-family:inherit;background:var(--cps-popover-background);overflow-x:hidden;max-height:15.125rem;overflow-y:auto}.cps-autocomplete-options .cps-autocomplete-options-empty,.cps-autocomplete-options .cps-autocomplete-options-loading{padding:.6875rem;font-size:1rem;cursor:default;color:var(--cps-color-text-dark)}.cps-autocomplete-options .cps-autocomplete-options-option{padding:.75rem;justify-content:space-between;display:flex;cursor:pointer}.cps-autocomplete-options .cps-autocomplete-options-option:hover{background:var(--cps-color-highlight-hover)}.cps-autocomplete-options .cps-autocomplete-options-option-label{color:var(--cps-color-text-dark)}.cps-autocomplete-options .cps-autocomplete-options-option-left{display:flex;align-items:center;margin-right:.5rem}.cps-autocomplete-options .cps-autocomplete-options-option-right{color:var(--cps-color-text-medium);text-align:right}.cps-autocomplete-options .cps-autocomplete-options-option-check{background-color:transparent;border:0;width:1rem;height:1rem;cursor:pointer;display:inline-block;vertical-align:middle;box-sizing:border-box;position:relative;flex-shrink:0;transition:border-color 90ms cubic-bezier(0,0,.2,.1),background-color 90ms cubic-bezier(0,0,.2,.1);margin-right:.5rem;opacity:0}.cps-autocomplete-options .cps-autocomplete-options-option-check:after{color:var(--cps-color-calm);top:.25rem;left:.0625rem;width:.5rem;height:.1875rem;border-left:.125rem solid currentColor;transform:rotate(-45deg);opacity:1;box-sizing:content-box;position:absolute;content:\"\";border-bottom:.125rem solid currentColor;transition:opacity 90ms cubic-bezier(0,0,.2,.1)}.cps-autocomplete-options .cps-autocomplete-options-option.selected,.cps-autocomplete-options .cps-autocomplete-options-option.allselected{font-weight:600}.cps-autocomplete-options .cps-autocomplete-options-option.selected .cps-autocomplete-options-option-label,.cps-autocomplete-options .cps-autocomplete-options-option.allselected .cps-autocomplete-options-option-label{color:var(--cps-color-calm)}.cps-autocomplete-options .cps-autocomplete-options-option.selected .cps-autocomplete-options-option-check,.cps-autocomplete-options .cps-autocomplete-options-option.allselected .cps-autocomplete-options-option-check{opacity:1}.cps-autocomplete-options .cps-autocomplete-options-option.selected{background:var(--cps-color-highlight-selected)}.cps-autocomplete-options .cps-autocomplete-options-option.selected .cps-autocomplete-options-option-right{color:var(--cps-color-text-dark)}.cps-autocomplete-options .cps-autocomplete-options-option.highlighten{background:var(--cps-color-highlight-active)}.cps-autocomplete-options .cps-autocomplete-options-option.selected.highlighten{background:var(--cps-color-highlight-selected-dark)}.cps-autocomplete-options .select-all-option{border-bottom:.0625rem solid lightgrey;font-weight:600}.cps-autocomplete-options ::ng-deep .p-virtualscroller-list.p-scroller{overflow-anchor:none}.cps-autocomplete-options .virtual-row{white-space:nowrap}\n"] }]
+                    ], providers: [LabelByValuePipe, CheckOptionSelectedPipe], selector: 'cps-autocomplete', template: "<div\n  [ngStyle]=\"{ width: cvtWidth }\"\n  class=\"cps-autocomplete\"\n  [ngClass]=\"{\n    disabled: disabled,\n    error: error || externalError,\n    active: isActive,\n    opened: isOpened\n  }\"\n  #autocompleteContainer>\n  @if (label) {\n    <div class=\"cps-autocomplete-label\">\n      <label>{{ label }}</label>\n      @if (infoTooltip) {\n        <cps-info-circle\n          class=\"cps-autocomplete-label-info-circle\"\n          size=\"xsmall\"\n          [tooltipPosition]=\"infoTooltipPosition\"\n          [tooltipContentClass]=\"infoTooltipClass\"\n          [tooltipMaxWidth]=\"infoTooltipMaxWidth\"\n          [tooltipPersistent]=\"infoTooltipPersistent\"\n          [tooltipText]=\"infoTooltip\">\n        </cps-info-circle>\n      }\n    </div>\n  }\n  <div\n    (keydown)=\"onContainerKeyDown($event)\"\n    class=\"cps-autocomplete-container\"\n    [class.active]=\"isActive\"\n    [class.keyboard-focused]=\"isKeyboardFocused\"\n    [ngClass]=\"{\n      'persistent-clear': persistentClear,\n      borderless: appearance === 'borderless',\n      underlined: appearance === 'underlined'\n    }\">\n    <div\n      class=\"cps-autocomplete-box\"\n      #autocompleteBox\n      (mousedown)=\"onBoxClick()\">\n      <div class=\"cps-autocomplete-box-area\">\n        @if (prefixIcon) {\n          <cps-icon\n            aria-hidden=\"true\"\n            [icon]=\"prefixIcon\"\n            [style.color]=\"disabled ? 'var(--cps-text-muted)' : null\"\n            [size]=\"prefixIconSize\"\n            class=\"prefix-icon\">\n          </cps-icon>\n        }\n        @if (hasSelectedValue()) {\n          <div class=\"cps-autocomplete-box-items\">\n            @if (!multiple) {\n              <span class=\"single-item\">\n                <div class=\"single-item-selection\">\n                  <span [style.opacity]=\"activeSingle ? 0 : 1\">{{\n                    returnObject\n                      ? value[optionLabel]\n                      : (value\n                        | labelByValue: options : optionValue : optionLabel)\n                  }}</span>\n                </div>\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    autocompleteInputTemplate;\n                    context: {\n                      inputClass: 'single-item-input',\n                      inputStyle: activeSingle ? { opacity: '1' } : null\n                    }\n                  \">\n                </ng-container>\n              </span>\n            }\n            @if (multiple && !chips) {\n              <div class=\"cps-autocomplete-multi-selection-wrapper\">\n                <div\n                  class=\"text-group\"\n                  role=\"list\"\n                  tabindex=\"-1\"\n                  aria-label=\"Selected options\">\n                  @for (val of value; track val; let last = $last) {\n                    <div\n                      class=\"text-group-item\"\n                      role=\"listitem\"\n                      [ngClass]=\"{\n                        'about-to-remove': last && backspaceClickedOnce\n                      }\">\n                      {{\n                        returnObject\n                          ? val[optionLabel]\n                          : (val\n                            | labelByValue\n                              : options\n                              : optionValue\n                              : optionLabel)\n                      }}{{ !last ? ',' : '' }}\n                    </div>\n                  }\n                </div>\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    autocompleteInputTemplate;\n                    context: {\n                      inputClass: 'multi-item-input'\n                    }\n                  \"></ng-container>\n              </div>\n            }\n            @if (multiple && chips) {\n              <div class=\"cps-autocomplete-multi-selection-wrapper\">\n                <div\n                  class=\"chips-group\"\n                  role=\"list\"\n                  tabindex=\"-1\"\n                  aria-label=\"Selected options\">\n                  @for (val of value; track val; let last = $last) {\n                    <cps-chip\n                      role=\"listitem\"\n                      closeButtonAriaLabel=\"Remove\"\n                      [disabled]=\"disabled\"\n                      [closable]=\"closableChips\"\n                      (closed)=\"select(val, true)\"\n                      [ngClass]=\"{\n                        'about-to-remove': last && backspaceClickedOnce\n                      }\"\n                      [label]=\"\n                        returnObject\n                          ? val[optionLabel]\n                          : (val\n                            | labelByValue: options : optionValue : optionLabel)\n                      \">\n                    </cps-chip>\n                  }\n                </div>\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    autocompleteInputTemplate;\n                    context: {\n                      inputClass: 'multi-chip-input'\n                    }\n                  \"></ng-container>\n              </div>\n            }\n          </div>\n        } @else {\n          <ng-container\n            *ngTemplateOutlet=\"autocompleteInputTemplate\"></ng-container>\n        }\n        <span class=\"cps-autocomplete-box-icons\">\n          @if (clearable && !disabled) {\n            <span\n              role=\"button\"\n              (click)=\"clear($event)\"\n              (mousedown)=\"$event.preventDefault()\"\n              (keydown.enter)=\"clear($event)\"\n              (keydown.space)=\"clear($event)\"\n              aria-label=\"Clear selection\"\n              [tabindex]=\"disabled ? -1 : 0\"\n              class=\"cps-autocomplete-box-clear-icon\"\n              [ngClass]=\"{\n                'cps-autocomplete-box-clear-icon-hidden':\n                  !persistentClear && !hasSelectedValue()\n              }\">\n              <cps-icon\n                icon=\"delete\"\n                size=\"small\"\n                aria-hidden=\"true\"></cps-icon>\n            </span>\n          }\n          @if (showChevron && options.length) {\n            <span\n              class=\"cps-autocomplete-box-chevron\"\n              role=\"button\"\n              (mousedown)=\"onChevronClick($event)\"\n              (keydown.enter)=\"onChevronClick($event)\"\n              (keydown.space)=\"onChevronClick($event)\"\n              [attr.aria-label]=\"\n                isOpened ? 'Collapse options' : 'Expand options'\n              \"\n              [tabindex]=\"disabled ? -1 : 0\">\n              <cps-icon\n                aria-hidden=\"true\"\n                icon=\"chevron-down\"\n                size=\"small\"\n                [color]=\"disabled ? 'text-light' : 'text-dark'\"></cps-icon>\n            </span>\n          }\n        </span>\n      </div>\n    </div>\n\n    <cps-menu\n      #optionsMenu\n      [withArrow]=\"false\"\n      (beforeMenuHidden)=\"onBeforeOptionsHidden($event)\"\n      hideTransitionOptions=\"0s linear\"\n      containerClass=\"cps-autocomplete-options-menu\">\n      <div\n        #optionsList\n        role=\"listbox\"\n        [id]=\"optionsListId\"\n        tabindex=\"-1\"\n        aria-readonly=\"false\"\n        aria-disabled=\"false\"\n        aria-orientation=\"vertical\"\n        [attr.aria-multiselectable]=\"!!multiple\"\n        class=\"cps-autocomplete-options\"\n        [style.width.px]=\"autocompleteBoxWidthPx\">\n        @if (loading && showLoadingMessage) {\n          <div\n            class=\"cps-autocomplete-options-loading\"\n            role=\"option\"\n            tabindex=\"-1\"\n            aria-disabled=\"true\"\n            aria-selected=\"false\">\n            {{ loadingMessage }}\n          </div>\n        }\n        @if (\n          showEmptyMessage &&\n          filteredOptions.length < 1 &&\n          !loading &&\n          inputTextDebounced\n        ) {\n          <div\n            class=\"cps-autocomplete-options-empty\"\n            role=\"option\"\n            tabindex=\"-1\"\n            aria-disabled=\"true\"\n            aria-selected=\"false\">\n            {{ emptyMessage }}\n          </div>\n        }\n        @if (isSelectAllVisible) {\n          <div\n            class=\"cps-autocomplete-options-option select-all-option\"\n            [id]=\"selectAllOptionId\"\n            role=\"option\"\n            tabindex=\"-1\"\n            aria-disabled=\"false\"\n            [attr.aria-setsize]=\"optionsAriaSetSize\"\n            [attr.aria-posinset]=\"1\"\n            [attr.aria-selected]=\"value?.length === options.length\"\n            [class.allselected]=\"value?.length === options.length\"\n            [class.highlighten]=\"\n              isArrowNavigating && optionHighlightedIndex === 0\n            \"\n            (mousedown)=\"$event.preventDefault()\"\n            (click)=\"toggleAll()\">\n            <span class=\"cps-autocomplete-options-option-left\">\n              @if (multiple) {\n                <span class=\"cps-autocomplete-options-option-check\"> </span>\n              }\n              <span class=\"cps-autocomplete-options-option-label\"\n                >Select all</span\n              >\n            </span>\n          </div>\n        }\n        @if (!loading) {\n          @if (virtualScroll) {\n            <p-virtualscroller\n              #virtualList\n              [tabindex]=\"-1\"\n              [items]=\"filteredOptions\"\n              [delay]=\"0\"\n              [scrollHeight]=\"virtualListHeightRem + 'rem'\"\n              [options]=\"{ numToleratedItems: numToleratedItems }\"\n              [itemSize]=\"virtualScrollItemSizePx()\">\n              <ng-template pTemplate=\"item\" let-item let-options=\"options\">\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    itemTemplate;\n                    context: {\n                      item: item,\n                      itemIndex: options.index\n                    }\n                  \"></ng-container>\n              </ng-template>\n            </p-virtualscroller>\n          } @else {\n            @for (item of filteredOptions; track item; let itemIndex = $index) {\n              <ng-container\n                *ngTemplateOutlet=\"\n                  itemTemplate;\n                  context: {\n                    item: item,\n                    itemIndex: itemIndex\n                  }\n                \"></ng-container>\n            }\n          }\n        }\n      </div>\n    </cps-menu>\n    @if (loading || validating) {\n      <cps-progress-linear\n        height=\"3\"\n        radius=\"4\"\n        opacity=\"0.3\"\n        class=\"autocomplete-progress-bar\"\n        bgColor=\"transparent\">\n      </cps-progress-linear>\n    }\n  </div>\n  @if (!error && !externalError && !hideDetails) {\n    <div class=\"cps-autocomplete-hint\">\n      {{ hint }}\n    </div>\n  }\n  @if ((error || externalError) && !hideDetails) {\n    <div class=\"cps-autocomplete-error\" role=\"alert\" aria-live=\"assertive\">\n      {{ error || externalError }}\n    </div>\n  }\n</div>\n\n<ng-template\n  #autocompleteInputTemplate\n  let-inputClass=\"inputClass\"\n  let-inputStyle=\"inputStyle\">\n  <input\n    #autocompleteInput\n    type=\"text\"\n    class=\"cps-autocomplete-box-input\"\n    spellcheck=\"false\"\n    [disabled]=\"disabled\"\n    role=\"combobox\"\n    aria-autocomplete=\"list\"\n    aria-haspopup=\"listbox\"\n    [attr.aria-invalid]=\"error || externalError ? 'true' : null\"\n    [attr.aria-controls]=\"optionsListId\"\n    [attr.aria-activedescendant]=\"activeDescendantId\"\n    [attr.aria-expanded]=\"isOpened\"\n    [attr.aria-required]=\"isRequired || null\"\n    [ngClass]=\"inputClass\"\n    [ngStyle]=\"inputStyle\"\n    [placeholder]=\"!hasSelectedValue() ? placeholder : ''\"\n    (input)=\"filterOptions($event)\"\n    (keydown)=\"onInputKeyDown($event)\"\n    [(ngModel)]=\"inputText\"\n    (focus)=\"onFocus()\"\n    (blur)=\"onBlur()\"\n    [attr.aria-label]=\"computedLabel\" />\n</ng-template>\n\n<ng-template #itemTemplate let-item=\"item\" let-itemIndex=\"itemIndex\">\n  <div\n    class=\"cps-autocomplete-options-option\"\n    [id]=\"getOptionId(item, itemIndex)\"\n    role=\"option\"\n    tabindex=\"-1\"\n    [attr.aria-setsize]=\"optionsAriaSetSize\"\n    [attr.aria-posinset]=\"getOptionAriaPosInSet(itemIndex)\"\n    (mousedown)=\"$event.preventDefault()\"\n    (click)=\"onOptionClick(item)\"\n    [class.highlighten]=\"\n      isArrowNavigating &&\n      itemIndex === optionHighlightedIndex - (isSelectAllVisible ? 1 : 0)\n    \"\n    [attr.aria-selected]=\"\n      item | checkOptionSelected: value : multiple : returnObject : optionValue\n    \"\n    [class.selected]=\"\n      item | checkOptionSelected: value : multiple : returnObject : optionValue\n    \">\n    <span class=\"cps-autocomplete-options-option-left\">\n      @if (multiple) {\n        <span class=\"cps-autocomplete-options-option-check\"> </span>\n      }\n      <span\n        data-testid=\"cps-autocomplete-options\"\n        class=\"cps-autocomplete-options-option-label\"\n        [class.virtual-row]=\"virtualScroll\"\n        >{{ item[optionLabel] }}</span\n      >\n    </span>\n\n    <span\n      class=\"cps-autocomplete-options-option-right\"\n      [class.virtual-row]=\"virtualScroll\"\n      >{{ item[optionInfo] }}</span\n    >\n  </div>\n</ng-template>\n", styles: [":host{display:flex}:host .cps-autocomplete{position:relative;width:100%;outline:none;font-family:inherit;font-weight:400;display:grid}:host .cps-autocomplete .cps-autocomplete-container{position:relative}:host .cps-autocomplete .cps-autocomplete-container .autocomplete-progress-bar{position:absolute;bottom:.0625rem;padding:0 .0625rem}:host .cps-autocomplete .cps-autocomplete-container.borderless .cps-autocomplete-box,:host .cps-autocomplete .cps-autocomplete-container.underlined .cps-autocomplete-box{line-height:1;border:none!important;border-radius:0}:host .cps-autocomplete .cps-autocomplete-container.underlined .cps-autocomplete-box{border-bottom:.0625rem solid var(--cps-color-line-light)!important}:host .cps-autocomplete .cps-autocomplete-container.keyboard-focused{outline:none;position:relative}:host .cps-autocomplete .cps-autocomplete-container.keyboard-focused:before,:host .cps-autocomplete .cps-autocomplete-container.keyboard-focused:after{content:\"\";position:absolute;border-radius:.25rem}:host .cps-autocomplete .cps-autocomplete-container.keyboard-focused:before{inset:0;border:.0625rem solid var(--cps-color-calm)}:host .cps-autocomplete .cps-autocomplete-container.keyboard-focused:after{inset:.0625rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-autocomplete .cps-autocomplete-container.keyboard-focused.suppress-focus-visible:before,:host .cps-autocomplete .cps-autocomplete-container.keyboard-focused.suppress-focus-visible:after{display:none}:host .cps-autocomplete .cps-autocomplete-container.keyboard-focused:before,:host .cps-autocomplete .cps-autocomplete-container.keyboard-focused:after{pointer-events:none}:host .cps-autocomplete.active .cps-autocomplete-box{border:.0625rem solid var(--cps-color-calm)}:host .cps-autocomplete.active .cps-autocomplete-box .cps-autocomplete-box-area .prefix-icon{color:var(--cps-color-calm)}:host .cps-autocomplete.opened .cps-autocomplete-box .cps-autocomplete-box-chevron{top:1.375rem;transform:rotate(180deg)}:host .cps-autocomplete .cps-autocomplete-label{align-items:center;display:inline-flex;margin-bottom:.2rem;color:var(--cps-color-text-dark);background-color:var(--cps-surface-body);font-size:.875rem;font-weight:600}:host .cps-autocomplete .cps-autocomplete-label .cps-autocomplete-label-info-circle{margin-left:.5rem;pointer-events:all}:host .cps-autocomplete .persistent-clear .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:not(:focus):not(:hover) cps-icon,:host .cps-autocomplete .cps-autocomplete-container.active .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:not(:focus):not(:hover) cps-icon,:host .cps-autocomplete .cps-autocomplete-container:hover .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:not(:focus):not(:hover) cps-icon{opacity:.5}:host .cps-autocomplete .cps-autocomplete-box{overflow:hidden;min-height:2.375rem;width:100%;cursor:text;background:var(--cps-input-background);font-size:1rem;outline:none;padding:0 .75rem;border-radius:.25rem;border:.0625rem solid var(--cps-color-line-light);transition-duration:.2s}:host .cps-autocomplete .cps-autocomplete-box-area{display:flex;min-height:2.25rem;align-items:center}:host .cps-autocomplete .cps-autocomplete-box-area .prefix-icon{margin-right:.5rem;color:var(--cps-color-text-dark)}:host .cps-autocomplete .cps-autocomplete-box-input{min-height:2.25rem;padding:0;background-color:transparent;width:0;min-width:1.875rem;flex-grow:1;font-size:1rem;color:var(--cps-color-text-dark);border-style:none;outline:none;font-family:inherit}:host .cps-autocomplete .cps-autocomplete-box-input::placeholder{-webkit-user-select:none;user-select:none;color:var(--cps-input-placeholder);font-style:italic;opacity:1}:host .cps-autocomplete .cps-autocomplete-box-items{display:inline-flex;flex-direction:column;width:100%;padding-top:.1875rem;padding-bottom:.1875rem;min-height:2.25rem;justify-content:center;position:relative}:host .cps-autocomplete .cps-autocomplete-box-items .single-item{color:var(--cps-color-text-dark);display:inline-flex}:host .cps-autocomplete .cps-autocomplete-box-items .single-item-selection{display:inline-flex;letter-spacing:inherit;line-height:inherit;max-width:100%}:host .cps-autocomplete .cps-autocomplete-box-items .single-item-input{opacity:0;min-width:0;align-self:flex-start;flex:1 1;transition:none;position:absolute;top:0;bottom:0;width:100%;padding-inline-start:inherit;padding-inline-end:inherit}:host .cps-autocomplete .cps-autocomplete-box-items .multi-chip-input{min-height:1.875rem}:host .cps-autocomplete .cps-autocomplete-box-items .multi-item-input{min-height:1.75rem}:host .cps-autocomplete .cps-autocomplete-box-items .cps-autocomplete-multi-selection-wrapper{display:inline-flex;flex-wrap:wrap;align-items:center}:host .cps-autocomplete .cps-autocomplete-box-items .cps-autocomplete-multi-selection-wrapper .chips-group{display:contents}:host .cps-autocomplete .cps-autocomplete-box-items .cps-autocomplete-multi-selection-wrapper .chips-group cps-chip{padding-bottom:.1875rem;padding-top:.1875rem;padding-right:.25rem}:host .cps-autocomplete .cps-autocomplete-box-items .cps-autocomplete-multi-selection-wrapper .text-group{display:contents;color:var(--cps-color-text-dark)}:host .cps-autocomplete .cps-autocomplete-box-items .cps-autocomplete-multi-selection-wrapper .text-group .text-group-item{padding-bottom:.1875rem;padding-top:.1875rem;padding-right:.25rem}:host .cps-autocomplete .cps-autocomplete-box:hover{border:.0625rem solid var(--cps-color-calm)}:host .cps-autocomplete .cps-autocomplete-box:hover .cps-autocomplete-box-area .prefix-icon{color:var(--cps-color-calm)}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons{display:flex}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon{cursor:pointer;display:flex;color:var(--cps-state-error);margin-left:.5rem}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:focus{outline:none}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:hover cps-icon,:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:focus cps-icon{opacity:1}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:focus-visible{outline:none;position:relative}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:focus-visible:before,:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:focus-visible:after{content:\"\";position:absolute;border-radius:50%}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:focus-visible:before{inset:-.125rem;border:.0625rem solid var(--cps-color-calm)}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:focus-visible:after{inset:-.25rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:focus-visible.suppress-focus-visible:before,:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:focus-visible.suppress-focus-visible:after{display:none}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon-hidden{visibility:hidden}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon cps-icon{opacity:0;transition-duration:.2s}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron{display:flex;margin-left:.5rem}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron:focus{outline:none}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron:focus-visible{outline:none;position:relative}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron:focus-visible:before,:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron:focus-visible:after{content:\"\";position:absolute;border-radius:.375rem}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron:focus-visible:before{inset:-.125rem;border:.0625rem solid var(--cps-color-calm)}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron:focus-visible:after{inset:-.25rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron:focus-visible.suppress-focus-visible:before,:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron:focus-visible.suppress-focus-visible:after{display:none}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron{transition-duration:.2s;cursor:pointer}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron:hover ::ng-deep cps-icon .cps-icon,:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron:focus ::ng-deep cps-icon .cps-icon{color:var(--cps-color-calm)!important}:host .cps-autocomplete .cps-autocomplete-hint{color:var(--cps-color-text-mild);background-color:var(--cps-surface-body);font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default;margin-top:.2rem}:host .cps-autocomplete .cps-autocomplete-error{color:var(--cps-state-error);font-weight:700;font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default;margin-top:.2rem}:host .cps-autocomplete.disabled{pointer-events:none}:host .cps-autocomplete.disabled .cps-autocomplete-box{background:var(--cps-color-bg-disabled)}:host .cps-autocomplete.disabled .cps-autocomplete-box-items{color:var(--cps-color-text-light)}:host .cps-autocomplete.disabled .cps-autocomplete-box-items .text-group,:host .cps-autocomplete.disabled .cps-autocomplete-box-items .single-item{color:var(--cps-color-text-light)}:host .cps-autocomplete.disabled .cps-autocomplete-label{color:var(--cps-color-text-mild)}:host .cps-autocomplete.error .cps-autocomplete-box{border-color:var(--cps-state-error)!important;background:#fef3f2}:host .about-to-remove{color:var(--cps-color-text-light)}:host .about-to-remove ::ng-deep .cps-chip{background-color:var(--cps-color-bg-mid)}.cps-autocomplete-options{font-family:inherit;background:var(--cps-popover-background);overflow-x:hidden;max-height:15.125rem;overflow-y:auto}.cps-autocomplete-options .cps-autocomplete-options-empty,.cps-autocomplete-options .cps-autocomplete-options-loading{padding:.6875rem;font-size:1rem;cursor:default;color:var(--cps-color-text-dark)}.cps-autocomplete-options .cps-autocomplete-options-option{padding:.75rem;justify-content:space-between;display:flex;cursor:pointer}.cps-autocomplete-options .cps-autocomplete-options-option:hover{background:var(--cps-color-highlight-hover)}.cps-autocomplete-options .cps-autocomplete-options-option-label{color:var(--cps-color-text-dark)}.cps-autocomplete-options .cps-autocomplete-options-option-left{display:flex;align-items:center;margin-right:.5rem}.cps-autocomplete-options .cps-autocomplete-options-option-right{color:var(--cps-color-text-medium);text-align:right}.cps-autocomplete-options .cps-autocomplete-options-option-check{background-color:transparent;border:0;width:1rem;height:1rem;cursor:pointer;display:inline-block;vertical-align:middle;box-sizing:border-box;position:relative;flex-shrink:0;transition:border-color 90ms cubic-bezier(0,0,.2,.1),background-color 90ms cubic-bezier(0,0,.2,.1);margin-right:.5rem;opacity:0}.cps-autocomplete-options .cps-autocomplete-options-option-check:after{color:var(--cps-color-calm);top:.25rem;left:.0625rem;width:.5rem;height:.1875rem;border-left:.125rem solid currentColor;transform:rotate(-45deg);opacity:1;box-sizing:content-box;position:absolute;content:\"\";border-bottom:.125rem solid currentColor;transition:opacity 90ms cubic-bezier(0,0,.2,.1)}.cps-autocomplete-options .cps-autocomplete-options-option.selected,.cps-autocomplete-options .cps-autocomplete-options-option.allselected{font-weight:600}.cps-autocomplete-options .cps-autocomplete-options-option.selected .cps-autocomplete-options-option-label,.cps-autocomplete-options .cps-autocomplete-options-option.allselected .cps-autocomplete-options-option-label{color:var(--cps-color-calm)}.cps-autocomplete-options .cps-autocomplete-options-option.selected .cps-autocomplete-options-option-check,.cps-autocomplete-options .cps-autocomplete-options-option.allselected .cps-autocomplete-options-option-check{opacity:1}.cps-autocomplete-options .cps-autocomplete-options-option.selected{background:var(--cps-color-highlight-selected)}.cps-autocomplete-options .cps-autocomplete-options-option.selected .cps-autocomplete-options-option-right{color:var(--cps-color-text-dark)}.cps-autocomplete-options .cps-autocomplete-options-option.highlighten{background:var(--cps-color-highlight-active)}.cps-autocomplete-options .cps-autocomplete-options-option.selected.highlighten{background:var(--cps-color-highlight-selected-dark)}.cps-autocomplete-options .select-all-option{border-bottom:.0625rem solid lightgrey;font-weight:600}.cps-autocomplete-options ::ng-deep .p-virtualscroller-list.p-scroller{overflow-anchor:none}.cps-autocomplete-options .virtual-row{white-space:nowrap}\n"] }]
         }], ctorParameters: () => [{ type: i1$2.NgControl, decorators: [{
                     type: Self
                 }, {